miniProgram/pages/index/index.wxss

/**index.wxss**/
page {
  width: 100vw;
  padding-bottom: 130px;
  background: #F6F8F9;
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
}

.container {
  display: flex;
  width: 100vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.header-wrapper {
  width: calc(100% - 120rpx);
  margin: 0 auto 50rpx auto;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.weather-box {
  display: flex;
  flex-direction: column;
}

.weather-box .weather-title {
  font-size: 28rpx;
  color: #3E3D44;
}

.weather-box .weather-value {
  font-size: 72rpx;
  font-weight: bold;
  line-height: 80rpx;
  margin-top: 10rpx;
  color: #3E3D44;
}

.weather-box .weather-desc {
  font-size: 36rpx;
  color: #3E3D44;
  line-height: 80rpx;
  margin-top: 10rpx;
}


.contentArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #F6F8F9;
  border-radius: 28rpx 28rpx 0;
}

.theFirstRow {
  font-weight: 500;
  display: flex;
  justify-content: flex-end;
  margin-right: 30rpx;
  align-items: center;
  flex-direction: row;
}

.theFirstRow-title {
  font-size: 20rpx;
  margin: 0 20rpx;
  color: #6C6970;
}

.theFirstRow-value {
  color: #3E3D44;
  font-size: 16px;
  font-weight: 600;
}

.theFirstRow-unit {
  color: #3E3D44;
  font-size: 10px;
}

.theFirstRow image {
  width: 30rpx;
  height: 30rpx;
  margin-left: 30rpx;
}

.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-title {
  display: flex;
  justify-content: space-between;
}

.header-title text {
  color: #000;
}

.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: #000;
}

.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;
}

.body {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.data-media-player {
  box-shadow: inset 10px 4px 10px 0px rgba(182, 194, 205, 0.2);
  border-radius: 20px;
  background: #FFFFFF;
  align-items: center;
  padding: 20rpx 0;
  margin: 0 40rpx;
  display: flex;
  flex-direction: column;
  margin-bottom: 48rpx;
  position: relative;
}

.data-media-1 {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.data-media-1 .sub-title {
  color: #6C6970;
  font-size: 14px;
  margin-top: 40rpx;
  margin-left: 30rpx;
}

.card-data {
  display: flex;
  flex-direction: column;
  padding-right: 30rpx;
  align-items: flex-end;
  position: relative;
  height: 200rpx;
}

.card-data .data-card__icon {
  position: absolute;
  top: 40rpx;
  left: 40rpx;
  width: 88rpx;
  height: 88rpx;
}

.card-data .data-card__value {
  margin-top: 40rpx;
}

.card-data .data-card__title1 {
  margin-top: 40rpx;
  font-size: 14px;
  color: #6C6970;
}

.card-line {
  width: calc(100% - 68rpx);
  margin: 0 auto;
  background: #E8E8E8;
  height: 1rpx;
}

.card-line-v {
  height: 300rpx;
  margin: auto 0;
  background: #E8E8E8;
  width: 1rpx;
}

.btn-pos-view {
  width: 200rpx;
  height: 200rpx;
  position: relative;
  margin-top: 40rpx;
  margin-left: 40rpx;
  margin-bottom: 84rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn-pos-view image {
  width: 200rpx;
  height: 200rpx;
  display: block;
}

.btn-pos-view:active {
  opacity: 0.7;
}

.btn-pos-view text {
  width: 200rpx;
  text-align: center;
  font-size: 24rpx;
  color: #6C6970;
  position: absolute;
  white-space: nowrap;
}

.echarts-container_humidityDial {
  width: 300rpx;
  height: 300rpx;
}

.power-btn {
  position: absolute;
  right: 30rpx;
  top: 40rpx;
  border-radius: 100%;
  box-sizing: border-box;
  box-shadow: 0px 6rpx 18rpx 0px #E3E4E5;
  width: 110rpx;
  height: 110rpx;
}

.power-btn-small {
  width: 110rpx;
  height: 110rpx;
  box-sizing: border-box;
  border-radius: 100%;
  box-shadow: 0px 6rpx 18rpx 0px #E3E4E5;
  margin-top: -10rpx;
}

.airConditioning-title {
  position: absolute;
  left: 40rpx;
  top: 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.airConditioning-title image {
  width: 48rpx;
  height: 48rpx;
}

.airConditioning-title text {
  font-size: 24rpx;
  color: #3E3D44;
  margin-left: 20rpx;
}

.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;
}

.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: 440rpx;
  margin-top: 20rpx;
}

.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: 96rpx;
  height: 156rpx;
  border-radius: 24rpx;
  background: #F6F8F9;
}

.control-button_1 {
  width: 96rpx;
  height: 156rpx;
  border-radius: 24rpx;
  background: #0BC3AA;
}

.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;
  margin-bottom: 30rpx;
  flex-direction: row;
  align-items: center;
  font-size: 32rpx;
  color: #3E3D44;
}

.title-line {
  margin-left: 40rpx;
  width: 12rpx;
  height: 32rpx;
  margin-right: 20rpx;
  border-radius: 8rpx;
  background: #0BC3AA;
}

.gray-text {
  font-size: 32rpx;
  color: #3E3D44;
}

.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;
  flex-direction: row;
  width: calc(100% - 80rpx);
  padding: 20rpx 0;
  background: white;
}

.control-button {
  width: 96rpx;
  height: 156rpx;
  border-radius: 24rpx;
  background: #F6F8F9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.control-button_1 {
  width: 96rpx;
  height: 156rpx;
  border-radius: 24rpx;
  background: #0BC3AA;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.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-button_media_2 {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  flex-direction: column;
  align-items: right;
  justify-content: right;
  background-color: rgba(203, 203, 203, 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: #3E3D44;
  margin-top: 10rpx;
}

.control-text_select {
  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: 72rpx;
  display: block;
  line-height: 90rpx;
  font-weight: 700;
  margin-left: 40rpx;
  color: #3E3D44;
}

.value-display_unit {
  font-size: 28rpx;
}

.button-row {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
}

.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, 320rpx);
  grid-gap: 30rpx;
}

.data-card-v {
  display: flex;
  flex-direction: column;

}

.data-container .data-card {
  position: relative;
  /* background-color:#fff; */
  /* background: linear-gradient(180deg, #E3FFE6 0%, #FFFFFF 53%); */
  /* background-color: rgba(112, 56, 168, 0.5); */
  height: 160rpx;
  box-shadow: inset 20rpx 8rpx 20rpx 0px rgba(182, 194, 205, 0.2);
  border-radius: 36rpx;
  display: flex;
  justify-content: space-between;
  padding: 24rpx;
}

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

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

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

.data-container .data-card .data-card__title1 {
  font-size: 28rpx;
  white-space: pre;
  font-weight: bold;
  color: #6C6970;
}

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

.data-container .data-card .data-card__value1 {
  padding-top: 49rpx;
  font-size: 30rpx;
  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;
}

.customSwitch {
  border-color: #E8EAEB;
}

@keyframes myAnimation {

  /* 定义你的动画 */
  from {
    transform: scale(1);
  }

  to {
    transform: scale(0.95);
  }
}

.tv_button-container {
  display: flex;
  flex-direction: row;
  height: 52rpx;
  align-items: center;
  justify-content: space-between;
  background: #FFF6EA;
  border-radius: 40rpx;
}

.tv_custom-button {
  margin: 4rpx;
  border: none;
  text-align: center;
  background: #FDA64A;
  font-size: 20rpx;
  white-space: nowrap;
  border-radius: 40rpx;
  padding: 0 12rpx;
  font-weight: normal;
  height: 44rpx;
  line-height: 44rpx;
  color: white;
  cursor: pointer;
}

.tv_disabled-button {
  font-size: 20rpx;
  white-space: nowrap;
  background: transparent;
  border: none;
  padding: 0 12rpx;
  font-weight: normal;
  text-align: center;
  height: 44rpx;
  line-height: 44rpx;
  margin: 4rpx;
  color: #6C6970;
  cursor: not-allowed;
  /* 更改鼠标指针样式 */
}

.menu-tab {
  display: flex;
  flex-direction: row;
  width: fit-content;
  margin: 40rpx;
  align-items: center;
  border-radius: 40rpx;
  background: #FFFFFF;
}

.menu-tab-item {
  font-size: 28rpx;
  padding: 8rpx 54rpx;
  margin: 4rpx;
  white-space: nowrap;
  border-radius: 40rpx;
  color: #6C6970;
}

.menu-tab-disenable {
  font-size: 28rpx;
  padding: 8rpx 54rpx;
  margin: 4rpx;
  white-space: nowrap;
  border-radius: 40rpx;
  color: #cccccc;
}

.menu-tab-item-active {
  color: #FFFFFF;
  font-size: 28rpx;
  padding: 8rpx 48rpx;
  white-space: nowrap;
  border-radius: 40rpx;
  margin: 4rpx;
  background: #0BC3AA;
}

.dialog-sure-btn {
  position: absolute;
  width: 312rpx;
  font-size: 28rpx;
  height: 64rpx;
  bottom: 40rpx;
  color: #49AF88;
  background: #FFFFFF;
  line-height: 64rpx;
  left: calc(50% - 156rpx);
  text-align: center;
  border-radius: 64rpx;
}

.dialog-content {
  width: 620rpx;
  top: 0;
  left: 0;
  position: absolute;
  margin-left: 60rpx;
  height: 380rpx;
  display: flex;
  flex-direction: column;
}

.dialog-h {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 50rpx;
  margin-top: 50rpx;
}

.dialog-icon {
  display: block;
  width: 36rpx;
  height: 36rpx;
}

.dialog-title {
  margin-left: 20rpx;
  font-weight: 700;
  font-size: 32rpx;
  color: #222222;
}

.dialog-desc {
  margin: 28rpx 50rpx 0;
  font-size: 22rpx;
  color: #333333;
  line-height: 36rpx;
  font-weight: 400;
}