miniProgram/pages/index/index.wxss

/**index.wxss**/
page {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-color: #000000;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* height: 60vh; */
  /* background-color: #ffffff; */
}

.horizontal-swiper {
  width: 100%; 
  height: 40rpx; 
}

.swiper-item {
  width: 400rpx; /* 设置滑动块的宽度 */
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3c4fff;
  margin-right: 20rpx; /* 根据需要设置间距 */
}

.item-content {
  /* 其他样式 */
}

.wrapper {
    padding: 20rpx 30rpx;
    background-color: #000000;
}

.wrapper-dark {
    padding: 30rpx;
    background-color: #27313b;
}

.header-wrapper {
  /* background-image: url(https://pic1.zhimg.com/v2-cbc33b07853d0604caaeafa7f779e144_b.webp); */
  /* 头部的图片 */
   background-color: #5a4caa; 
  border-radius: 40rpx;
  color: #3d7ef9;
  box-shadow: #3d7ef9 0rpx 0rpx 20rpx;
  padding: 30rpx 60rpx;
}

.header-title {
  display: flex;
  justify-content: space-between;
}
.header-title text{
  color:#ffffff;
}

.header-title-fire {
  display: flex;
  justify-content: space-between;
}
.header-title-fire text{
  color:#fdfbfb;
  font-size: large;
  font-weight: 200;
  margin:0 auto;
}

.header-text {
  font-size: 60rpx;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
}
.header-text text{
  color: #edf0f5;
}
.weather-advice {
  margin-top: 40rpx;
  font-size: 24rpx;
}

.data-wrapper {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;
  background-color: #000000;

}

.data {
  background-color: #fff;
  width: 300rpx;
  height: 200rpx;
  margin: 20rpx 0px;
  border-radius: 40rpx;
  display: flex;
  justify-content: space-around;
  padding: 0 16rpx;
  box-shadow: #d6d6d6 0px 0px 10rpx;

}
.data-humidifier{
	/* margin-top: 30rpx; */
	background-color: #fff;
	/* 设置边框样式 */  
	border: 2rpx solid #e0e0e0; /* 边框宽度、样式和颜色 */  
	
  /* 设置圆角弧度 */  
	border-radius: 20rpx; /* 可以根据需要调整圆角的大小 */  
	
	/* 设置阴影效果 */  
	box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影的偏移量、模糊半径和颜色 */  
	
	padding-right: 5rpx;  
	margin-top: 10rpx; 
	height:650rpx;
}

.data-media-player{
	/* margin-top: 30rpx; */
	/* background-color: #fff; */
	/* 设置边框样式 */  
	border: 1rpx solid #f0f0f0; /* 边框宽度、样式和颜色 */  
	
  /* 设置圆角弧度 */  
	border-radius: 20rpx; /* 可以根据需要调整圆角的大小 */  
	
	/* 设置阴影效果 */  
	box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影的偏移量、模糊半径和颜色 */  
	
	padding-right: 5rpx;  
	margin-top: 35rpx; 
}

.data-logo {
  height: 72rpx;
  width: 72rpx;
  margin-top: 30rpx;
}

.data-text {
  margin-top: 30rpx;
  color: #7f7f7f;

}

.data-title {
  text-align: right;
}

.data-value {
  font-size: 52rpx;
}

.panel{
  display: flex;
  padding: 0 30rpx;
}

.cellgroup{
  margin-top: 12rpx;
  /* 设置边框样式 */  
  border: 2rpx solid #ebebeb; /* 边框宽度、样式和颜色 */  
	
  /* 设置圆角弧度 */  
  border-radius: 20rpx; /* 可以根据需要调整圆角的大小 */  
  /* 设置阴影效果 */  
  box-shadow: 0rpx 8rpx 12rpx rgba(85, 255, 255, 0.1); /* 阴影的偏移量、模糊半径和颜色 */ 
}


.circle-humi{
  margin-left: 150rpx;
}

.switch{
  margin-top: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.silder{
  margin-top: 50rpx;
}

.s_view {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -50rpx;
  /* margin-bottom: 50rpx; */
}

.s_view_climate {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: -50rpx;
  /* margin-bottom: 50rpx; */
}

.button {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin: -100rpx 5rpx 5rpx 5rpx;
  background-color: #00aaff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
  border: none;
  outline: none;
  z-index: 9999;
}

.button:hover {
  background-color: #808080;
}

.buttonClimate {
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  margin: -100rpx 5rpx 5rpx 5rpx;
  background-color: #00aaff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s;
  border: none;
  outline: none;
  margin-left:20rpx;
  z-index: 9999;
}

.buttonClimate:hover {
  background-color: #808080;
}

.plusHumidifier {
  font-size: 35rpx;
  color: white;
}

.plus {
  font-size: 60rpx;
  color: white;
}

.van-grid-item-cron {
  width: 226rpx;
}

.van-grid-item-dev {
  width: 169.5rpx;
}

.van-grid-item {
  width: 231rpx; /* 设置你想要的默认宽度 */
  box-sizing: border-box;
  align-items: center;
}

.data-wrapper .van-grid-item {
  width: 170rpx; /* 设置你想要的默认宽度 */
  box-sizing: border-box;
  align-items: center;
}

.narrow-slider {  
  width: 200rpx;   
}

.slider-container {  
  display: flex;  
  align-items: center;  
  justify-content: flex-start;  
}  
  
.custom-slider {  
  width: 50%; /* 根据需要调整slider的宽度 */  
}  
  
.slider-value {  
  margin-left: 10rpx; /* 根据需要调整value与slider之间的间距 */  
}

.tui-slider-box{
 width: 80%; 
 height: 50rpx;
 line-height: 50rpx;
 font-size: 25rpx;
 color: #666;
}

.gray-input {  
  /* background-color: #ccc; */
  background-color: #f5f5f5;
  /* 其他样式，如字体大小、颜色、边框等 */  
  padding: 10rpx 50rpx 10rpx 10rpx; /* 内边距，使文本不会紧贴着边框 */  
  border: none; /* 移除默认边框 */  
}

.arrow-up, .arrow-down {  
  width: 5rpx; /* 箭头的宽度 */  
  height: 5rpx; /* 箭头的高度 */  
  border-width: 6rpx; /* 边框宽度，控制箭头的大小 */  
  border-style: solid; /* 边框样式 */  
  position: absolute; /* 绝对定位，方便后续调整位置 */  
  background-color: #f5f5f5; /* 灰色背景 */
}  
  
.arrow-up {  
  border-color: transparent transparent white transparent; /* 设置上箭头的颜色 */  
  transform: rotate(-45deg); /* 旋转箭头，使其朝上 */  
  margin-top: 10rpx; /* 设置上箭头的位置 */  
  background-color: #f5f5f5; /* 灰色背景 */
}  
  
.arrow-down {  
  border-color: white transparent transparent transparent; /* 设置下箭头的颜色 */  
  transform: rotate(45deg); /* 旋转箭头，使其朝下 */  
  margin-top: 20rpx; /* 设置下箭头的位置，确保它在上箭头的下方 */  
  background-color: #f5f5f5; /* 灰色背景 */
}

.input-unit {  
  margin-left: 10rpx; /* 与文本框之间留一些间距 */  
  color: #666; /* 单位的颜色 */  
  font-size: 24rpx; /* 单位的字体大小 */  
  background-color: #f5f5f5; /* 灰色背景 */
}

.input-container {  
  display: flex;  
  align-items: center;  
  justify-content: space-between; /* 使得文本框、箭头和单位之间有空隙 */  
  padding: 10rpx;  
  background-color: #f5f5f5; /* 灰色背景 */
}  
  
.input-text {  
  flex: 1; /* 占据大部分空间 */  
  border: none;  
  padding: 10rpx;  
  background-color: #fff; /* 文本框背景色 */  
  border-radius: 10rpx; /* 圆角 */  
}  
  
.arrow-container {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
}  
  
.arrow {  
  width: 12rpx;  
  height: 12rpx;  
  border: 1rpx solid #666;  
  border-width: 0 1rpx 1rpx 0;  
  /* transform: rotate(-45deg);  */
  margin-bottom: 0rpx; /* 上下箭头之间的间距 */
  background-color: #f5f5f5; /* 灰色背景 */
}  
 
 .up-arrow {
   transform: rotate(225deg); /* 下箭头需要反方向旋转 */  
   margin-bottom: 0; /* 下箭头不需要额外的底部间距 */  
 } 
  
.down-arrow {  
  transform: rotate(45deg); /* 下箭头需要反方向旋转 */  
  margin-bottom: 0; /* 下箭头不需要额外的底部间距 */  
}  
  
.input-unit {  
  color: #666;  
  font-size: 24rpx;  
}

.audio-player {  
  width: 100%;  
  padding: 20rpx;  
  box-sizing: border-box;  
  /* margin-top: 20rpx; */
}  
  
.controls {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  margin-bottom: 20rpx;  
}  
.controls_tv {  
  display: flex;  
  /* justify-content: space-between;  */
  align-items: left;  
  margin-bottom: 20rpx;  
}  
  
.control-button {
  width: 40rpx;  
  height: 40rpx;  
  padding: 5rpx;  
  border-radius: 50%;
  border: 2rpx solid #c3c3c3;
  background-color: rgba(112, 56, 168, 0.5);  
}  
  
.control-button_1 {
  width: 60rpx;
  height: 60rpx;  
  padding: 5rpx;  
  border-radius: 50%;  
  background-color: rgba(0, 170, 255, 0.5); 
} 

.progress {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  margin-bottom: 20rpx;  
}  
  
.progress-bar {  
  width: 80%;  
  height: 40rpx;  
}  
  
.info {  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  text-align: center;  
}  
  
.song-title, .song-artist {  
  color: #7eff98;  
  /* font-weight: bold; */ 
}

.picker-view {  
  background-color: #fff;  
  border: 2rpx solid #ddd;  
  padding: 10rpx;  
  font-size: 28rpx;  
}

.center-view {  
  display: flex;  
  justify-content: center; /* 水平居中 */  
  align-items: center; /* 垂直居中 */  
  height: 5vh; /* 设置view的高度，根据需要调整 */  
  /* background-color: #cccccc; */
  /* 渐变背景 */  
    background: linear-gradient(to bottom, #fff 0%, #ccc 100%);  
      
    /* 阴影效果 */  
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.1);
  font-weight: 600;
}

.gray-text {  
  color: gray; /* 或者使用具体的灰度值，如 #808080 */  
}

.custom-cell {  
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);  
  background-color: #fff;  
  border-radius: 4px;  */
}

.air-conditioner-controls {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  padding: 20rpx;  
}  
  
.control-button {  
  width: 100rpx;  
  height: 100rpx;  
  border-radius: 50%;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  background-color: rgba(112, 56, 168, 0.5);  
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  
  margin: 0 10rpx;
  border: 5rpx solid #45dd5e;
}  

.control-button_1 {  
  width: 100rpx;  
  height: 100rpx;  
  border-radius: 50%;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  background-color: rgba(0, 170, 255, 0.5);  
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  
  margin: 0 10rpx;  
}

.control-button_media {  
  width: 100rpx;  
  height: 100rpx;  
  border-radius: 50%;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  background-color: rgba(203, 203, 203, 0.5);  
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  
  margin: 0 10rpx;
}  

.control-button_media_1 {  
  width: 100rpx;  
  height: 100rpx;  
  border-radius: 50%;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  justify-content: center;  
  background-color: rgba(0, 170, 255, 0.5);  
  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);  
  margin: 0 10rpx;  
}

.control-icon {  
  width: 40rpx;  
  height: 40rpx;  
}  
  
.control-text {  
  font-size: 24rpx;  
  color: #ffffff;  
  margin-top: 10rpx;  
}

.control-text_zr {  
  font-size: 24rpx;  
  color: #ffffff;  
  margin-top: 10rpx;  
}

.control-text_zl {  
  font-size: 24rpx;  
  color: #ffffff;  
  margin-top: 10rpx;  
}

.control-text_cs {  
  font-size: 24rpx;  
  color: #ffffff;  
  margin-top: 10rpx;  
}

.control-text_sf {  
  font-size: 24rpx;  
  color: #ffffff;  
  margin-top: 10rpx;  
}

.canvas4 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 720rpx;
  background-color: #d2d9ff; /* 这里设置你想要的背景色 */ 
}


/* button {
    -webkit-tap-highlight-color: transparent;
    background: -webkit-linear-gradient(bottom,rgb(255, 255, 255),rgb(46, 207, 255),rgb(0, 170, 255));
    border-radius: 5px;
    box-sizing: border-box;
    color: #000;
    cursor: pointer;
    display: block;
    font-size: 18px;
    line-height: 2.55555556;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding-left: 14px;
    padding-right: 14px;
    position: relative;
    text-align: center;
    text-decoration: none;
} */

.value-display {  
  font-size: 30rpx;  
  font-weight: 500;  
  margin-bottom: 40rpx; 
  margin-top: 10rpx;
  margin-left: 40rpx; 
  color:white;
}  
  
.button-row {  
  display: flex;  
  justify-content: space-between;  
  margin-bottom: 20rpx;  
  margin-left: 40rpx; 
}  
  
.round-gradient-button {  
  width: 160rpx;  
  height: 60rpx;  
  border: none;  
  /* background: linear-gradient(to bottom, #ffba4a, #ffaa00);  */
  /* background: -webkit-linear-gradient(bottom,rgb(255, 255, 255),rgb(46, 207, 255),rgb(0, 170, 255)); */
  background-color: rgb(0, 170, 255);
  /* color: white;  */
  font-size: 26rpx;  
  color: #000;
  /* border-radius: 20%;  */
  line-height: 60rpx;  
  text-align: center;  
  /* box-shadow: 0px 4rpx 15rpx rgba(0, 0, 0, 0.2);  */
}  
  
.round-gradient-button-pressed {  
  background: linear-gradient(to bottom, #87ceeb, #aaaaff);  
  box-shadow: none;  
}

.right-content-cover {  
  display: flex;  
  align-items: center; /* 垂直居中 */  
  justify-content: flex-end; /* 水平靠右对齐 */  
}

.control-button-cover {
  width: 60rpx;  
  height: 60rpx;  
  padding: 5rpx 25rpx 5rpx 5rpx;  
  border-radius: 50%;  
  background-color: rgba(255, 255, 255, 0.5); /* 白色半透明背景 */  
} 


.data-container{
  margin-top: 36rpx;
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fill, 300rpx);
  grid-gap: 36rpx;
}
.data-container .data-card{
  position: relative;
  /* background-color:#fff; */
  background-color: rgba(112, 56, 168, 0.5);
  height: 160rpx;
  box-shadow: #d6d6d6 0 0 8rpx;
  border-radius: 36rpx;
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
  border: 2rpx solid #45dd5e;
}

.data-container .data-card .data-card__text{
  position: absolute;
  right: 24rpx;
  text-align: right;
  white-space: nowrap;
}

.data-container .data-card .data-card__icon{
  height: 72rpx;
  width: 72rpx;
  left: 24rpx;
  top: 36rpx;
}

.data-container .data-card .data-card__title{
  padding-top: 18rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
}

.data-container .data-card .data-card__title1{
  padding-top: 18rpx;
  font-size: 28rpx;
  font-weight: bold;
  color: #ffffff;
}

.data-container .data-card .data-card__value{
  padding-top: 36rpx;
  font-size: 52rpx;
  font-weight: bold;
  color: #ffffff;
}

.sliderList {
-webkit-overflow-scrolling: touch  
}
.sliderItem {
-webkit-overflow-scrolling: touch  
}

.loading-container {  
  position: fixed;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  padding: 10px;  
  /* background-color: #9cffa3;  */
  color: #b1b1b1;  
  border-radius: 4px;  
  z-index: 9999; /* 确保它显示在其他内容之上 */  
}  
  
.loading-text {  
  /* 其他样式 */  
  width:300rpx;
  white-space: nowrap;
}

.clicked {  
  /* 这里添加你的点击效果样式，例如改变透明度或添加阴影 */  
  opacity: 0.8;  
  /* 或者使用动画 */  
  animation: myAnimation 0.3s;  
}  
  
@keyframes myAnimation {  
  /* 定义你的动画 */  
  from { transform: scale(1); }  
  to { transform: scale(0.95); }  
}