miniProgram/subpages/data/data.wxss

/* subpages/data/data.wxss */

page {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  padding-bottom: 130px;
  background-color: #F8FAFF;
}

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* border: 2rpx solid #e0e0e0; */
  /* 设置圆角弧度 */
  border-radius: 20rpx;
  /* 可以根据需要调整圆角的大小 */
  /* 设置阴影效果 */
  box-shadow: 0rpx 4rpx 8rpx rgba(0, 0, 0, 0.1);
  /* 阴影的偏移量、模糊半径和颜色 */
}

.calendar {
  width: 750rpx;
}

.header {
  font-size: large;
  color: #605eac;
}

.board {
  background-color: #ffffff;
}

.value {
  width: 350rpx;
  height: 350rpx;
  border: 10rpx solid #62c4d9;
  border-radius: 50%;
  margin-top: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-size: 28rpx;
  color: #605eac;
}

.num {
  font-size: 100rpx;
  margin: 20rpx;
  font-weight: 800;
  color: #fff;
}

.tag {
  color: #ffd700;
}

.list {
  height: 15rpx;
  font-size: 25rpx;
}

.list .content {
  font-size: 25rpx;
}

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

.canvas {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 420rpx;
}

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

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

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

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

.canvas5 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 620rpx;
  /* background-color: #ffffff; */
}

.big-title_c2-box {
  margin-top: 30rpx;
  width: calc(100% - 60rpx);
  margin-bottom: 28rpx;
  position: relative;
}

.big-title_c2 {
  font-size: 32rpx;
  color: #3E3D44;
}

.big-title_c2-line {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 288rpx;
  height: 12rpx;
  background: linear-gradient(90deg, #8D32F1 0%, rgba(255, 255, 255, 0) 100%);
}

ec-canvas {
  width: 100%;
  height: 100%;
}


/* canvas {  
  margin-bottom: 40rpx;  
} */

.percentage {
  font-size: 36rpx;
  text-align: center;
  /* margin-left: 150rpx;
  margin-top:5rpx */
}

.centered {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* 垂直居中 */
  align-items: center;
  /* 水平居中，但在这里不是必需的，因为text-align会处理水平居中 */
}

.centered-text {
  text-align: center;
  /* 水平居中 */
  color: '#62c4d9';
  font-size: 60rpx;
  font-weight: 700;
  /* 这里可以添加其他文本样式 */
}

.container1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.gradient-button {
  width: 600rpx;
  height: 80rpx;
  border: none;
  border-radius: 10rpx;
  background: linear-gradient(to right, #6699ff, #625eff);
  color: #fff;
  font-size: 32rpx;
  text-align: center;
  line-height: 80rpx;
  box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  /* 添加过渡效果 */
  margin-top: 10rpx;
}

.gradient-button-clicked {
  background: linear-gradient(to right, #ff9966, #ff5e62);
  /* 点击后的背景渐变 */
}

.air-conditioner-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
}

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

.control-icon {
  width: 80rpx;
  height: 80rpx;
}

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

.image-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 620rpx;
  /* 根据实际情况设置容器高度 */
  overflow: hidden;
}

.background-image {
  width: 100%;
  height: 100%;
  margin-top: 38rpx;
}

.header {
  position: absolute;
  top: 20rpx;
  /* 距离顶部的距离，根据需要调整 */
  left: 20rpx;
  /* 距离左边的距离，确保按钮在图片左边 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 垂直对齐在顶部 */
}

.picker-container {
  width: 100%;
  /* 根据需要调整 */
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: space-between;
  /* 水平两端对齐，你也可以根据需要调整 */
  padding: 20rpx;
  /* 容器内边距 */
  background-color: rgba(255, 255, 255, 0.8);
  /* 半透明背景色，可选 */
  position: relative;
  /* 如果需要相对于其他元素定位 */
  z-index: 10;
  /* 确保在图片上方 */
}

.picker-placeholder {
  line-height: 60rpx;
  /* 根据需要调整 */
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
  /* 占位符颜色 */
  z-index: 10;
  margin-left: 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.picker-row {
  display: flex;
  left: 0;
  top: 0;
  right: 0;
  padding-top: 20rpx;
  padding-bottom: 20rpx;
  z-index: 9999;
  background: #F8FAFF;
  position: sticky;
  flex-direction: row;
  align-items: center;
  width: 100%;
  box-shadow: 0rpx 16rpx 40rpx 0rpx #E8E8E8;
}

.picker {
  flex: 1;
  /* 平分空间 */
  background-color: transparent;
  /* 移除默认背景 */
  border: none;
  /* 移除默认边框 */
  /* border-radius: 5%; */
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  width: 40%;
}

.picker-placeholder {
  text-align: center;
  line-height: 64rpx;
  color: #666666;
  font-size: 24rpx;
  font-weight: 400;
}

.picker-placeholder1 {
  text-align: center;
  line-height: 64rpx;
  color: #666666;
  margin-left: 15rpx;
  font-size: 24rpx;
}

.picker-placeholder2 {
  text-align: center;
  line-height: 64rpx;
  color: #666666;
  margin-right: 15rpx;
  font-size: 24rpx;
}

.button-group {
  position: absolute;
  top: 80rpx;
  left: 10rpx;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.select-group {
  position: absolute;
  top: 80rpx;
  right: 10rpx;
  width: 160rpx;
  height: 50rpx;
  display: flex;
  flex-direction: column;
  z-index: 999;
}

.small-button {
  width: 160rpx;
  height: 60rpx;
  font-size: 25rpx;
  margin-top: 10rpx;
  background-color: #a873b6;
  /* 浅紫色示例，你可以根据需要选择具体的颜色 */
  background-color: rgba(255, 255, 255, 1);
  color: white;
  border-radius: 4px;
  /* 设置圆角 */
}

.small-button:last-child {
  margin-bottom: 0;
  /* 最后一个按钮不需要下边距 */
}

.centered-text {
  position: absolute;
  top: 570rpx;
  /* 垂直居中 */
  left: 0;
  right: 0;
  transform: translateY(-50%);
  /* 垂直居中 */
  text-align: center;
  /* 水平居中 */
  z-index: 999;
}

.centered-text_1 {
  position: absolute;
  top: 130rpx;
  /* 垂直居中 */
  left: 0;
  right: 0;
  transform: translateY(-50%);
  /* 垂直居中 */
  text-align: center;
  /* 水平居中 */
}

.text-line {
  display: block;
  margin-bottom: 20rpx;
  /* 行间距 */
}

.text-line-1 {
  color: white;
  /* 第一行文字颜色 */
  font-size: 40rpx;
  /* 第一行文字大小 */
}

.text-line-2 {
  color: #99ff62;
  /* 第二行文字颜色 */
  font-size: 120rpx;
  /* 第二行文字大小 */
}

.text-line-3 {
  color: #3E3D44;
  font-size: 32rpx;
  margin-left: 18rpx;
  font-weight: 600;
}

.text-line:last-child {
  margin-bottom: 0;
  /* 最后一行不需要下边距 */
}

.container_1 {
  display: flex;
  justify-content: space-between;
  /* 根据需要调整间距 */
  align-items: center;
  /* 垂直居中 */
  padding: 20rpx;
  /* 外部间距 */
}

.item_c1 {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  margin: 0 20rpx;
  /* 左右间距 */
}

.image_c1 {
  width: 100rpx;
  /* 图片宽度 */
  height: 100rpx;
  /* 图片高度 */
  margin-right: 20rpx;
  /* 图片与文字的间距 */
}

.text-container_c1 {
  flex: 1;
}

.text-line_c1 {
  /* 根据需要设置文本样式 */
  font-size: 28rpx;
  line-height: 1.5;
  margin-bottom: 10rpx;
  /* 行间距 */
  color: white;
}

/* 最后一行文字不需要下外边距 */
.text-container_c1 .text-line_c1:last-child {
  margin-bottom: 0;
}

.title-container_2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-right: 230rpx;
  padding: 10rpx;
}


.container_3 {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* 或者你需要的任意高度 */
  width: 95%;
}

.row_c3 {
  display: flex;
  justify-content: space-between;
  /* 使两个cell之间有一定间距 */
  align-items: flex-start;
  /* 顶端对齐 */
  padding: 10rpx 0;
  /* 上下内边距 */
}

.cell_c3 {
  display: flex;
  align-items: flex-start;
  position: relative;
  /* 顶端对齐 */
  flex: 1;
  /* 使两个cell等宽 */
  margin-right: 10rpx;
  /* 右边距，最后一个cell可以去掉或使用 :nth-last-child() 选择器去除 */
  border-radius: 5%;
  width: 80%;
  padding-left: 10rpx;
  margin-left: 10rpx;
  height: 150rpx;
  background-color: rgba(255, 255, 255, 1);
}

.image_c5 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 116rpx;
}

.cell_c3:nth-last-child(1) {
  margin-right: 0;
  /* 移除最后一个cell的右边距 */
}

.cell-image_c3 {
  width: 50rpx;
  /* 图片宽度，可以根据需要调整 */
  height: 50rpx;
  /* 图片高度，可以根据需要调整 */
  margin-right: 10rpx;
  /* 图片与文字的间距 */
}

.cell-text_c3 {
  flex: 1;
  margin-top: 14rpx;
  display: flex;
  flex-direction: column;
  /* 使文本部分占据剩余空间 */
}

.text-line_c3 {
  white-space: nowrap;
  /* 防止文本自动换行，但这里不需要，因为我们想要两行显示 */
  overflow: hidden;
  /* 如果需要，可以隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 如果需要，可以用省略号表示溢出 */
  border-radius: 5%;
  color: rgba(0, 170, 255, 0.8);
  font-size: 24rpx;
  /* 可以添加其他文本样式，如字体大小、颜色等 */
}

/* 如果需要固定文本行数，可以为 .text-line 添加特定的高度和行高 */
.text-line_c3:nth-child(1) {
  /* 第一行文本样式（如果需要） */
  color: #6C6970;
}

.text-line_c3:nth-child(2) {
  /* 第二行文本样式（如果需要） */
  color: rgba(255, 255, 255, 0.6);
}

.text-line_c3_1 {
  white-space: nowrap;
  /* 防止文本自动换行，但这里不需要，因为我们想要两行显示 */
  overflow: hidden;
  /* 如果需要，可以隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 如果需要，可以用省略号表示溢出 */
  border-radius: 5%;
  background: linear-gradient(to right, #000 5%, #62c4d9 100%);
  /* 可以添加其他文本样式，如字体大小、颜色等 */
}

/* 如果需要固定文本行数，可以为 .text-line 添加特定的高度和行高 */
.text-line_c3_1:nth-child(1) {
  /* 第一行文本样式（如果需要） */
  color: rgba(255, 255, 255, 0.8);
}

.text-line_c3_1:nth-child(2) {
  /* 第二行文本样式（如果需要） */
  color: rgba(255, 255, 255, 0.6);
}

.text-line_c31 {
  white-space: nowrap;
  /* 防止文本自动换行，但这里不需要，因为我们想要两行显示 */
  overflow: hidden;
  /* 如果需要，可以隐藏溢出内容 */
  text-overflow: ellipsis;
  font-weight: 550;
  font-size: 32rpx;
}

.text-line_c31-units {
  font-size: 24rpx;
  font-weight: 400;
}

.text-line_c31:nth-child(1) {
  color: #3E3D44;
}

.text-line_c31:nth-child(2) {
  /* 第二行文本样式（如果需要） */
  color: white;
}


.container_4 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 95%;
  margin-top: 10rpx;
  /* padding: 10px;  */
}

.left-panel_c4 {
  position: relative;
  flex: 1;
  /* 左边面板占据剩余空间的一半 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 标题和内容垂直分布 */
  align-items: center;
  /* padding-right: 10px; */
  background-color: rgba(255, 255, 255, 1);
  height: 320rpx;
  margin-left: 10rpx;
  border-radius: 5%;
}

.left-panel-header_c4 {
  /* 标题样式 */
  font-weight: bold;
  margin-bottom: 20rpx;
  /* 与内容的间距 */
  color: white;
}

.left-panel-content_c4 {
  /* 内容样式 */
  color: white;
  margin-bottom: 100rpx;
  padding: 20rpx;
}

.right-panel_c4 {
  flex: 1;
  /* 右边面板占据剩余空间的一半 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 垂直分布三个cell */
  height: 320rpx;
  background: white;
  /* 与左边面板等高 */
  margin-left: 15rpx;
  border-radius: 20rpx;
  box-shadow: 0rpx 32rpx 80rpx 0rpx #E8E8E8;
}

.cell_c4 {
  display: flex;
  flex: auto;
  align-items: center;
  /* 顶端对齐 */
  justify-content: flex-start;
  /* 子元素靠右对齐 */
  padding: 20rpx 5rpx;
  /* 上下内边距 */
  /* margin-bottom: 10rpx; */
  /* background-color: rgba(255, 255, 255, 1); */
  /* border-radius: 5%; */
}

.cell-image_c4 {
  width: 60rpx;
  /* 图片宽度 */
  height: 60rpx;
  /* 图片高度 */
  margin-right: 10rpx;
}

.cell-text_c4 {
  flex: 1;
  margin-right: 30rpx;
  /* 文本部分占据剩余空间 */
}

.text-line_c4 {
  /* 文本行样式 */
  white-space: nowrap;
  /* 防止文本自动换行，但这里不需要 */
  overflow: hidden;
  /* 如果需要，可以隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 如果需要，可以用省略号表示溢出 */
  color: #6C6970;
}

/* 如果需要固定文本为两行显示，可以为 .text-line 设置特定的 height 和 line-height */
.text-line_c4 {
  height: 48rpx;
  font-size: 24rpx;
  /* 假设每行文本高度为24px */
  line-height: 48rpx;
  /* 行高与文本高度相同 */
  /* 还可以添加其他文本样式，如字体大小、颜色等 */
}

.image_c4 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 确保图片填充整个容器并保持其宽高比 */
}

.text-container_c4 {
  position: absolute;
  /* 绝对定位使得文字可以位于图片之上 */
  top: 50%;
  /* 垂直居中 */
  left: 50%;
  /* 水平居中 */
  width: calc(100% - 60rpx);
  transform: translate(-50%, -50%);
  /* 调整位置以完全居中 */
  color: white;
  /* 或者其他你需要的颜色 */
}

.text-container_c4_top_left {
  position: absolute;
  /* 绝对定位使得文字可以位于图片之上 */
  top: 9%;
  /* 垂直居中 */
  left: 20%;
  /* 水平居中 */
  width: 40%;
  transform: translate(-50%, -50%);
  /* 调整位置以完全居中 */
  color: white;
  /* 或者其他你需要的颜色 */
  text-align: center;
  /* 确保文字水平居中（尽管在绝对定位下这不是必需的）*/
}

.text_c4 {
  color: #3C3796;
  font-size: 24rpx;
  text-align: start;
  font-weight: 400;
}

.text_c4_left_top {
  color: #ffffff;
  font-size: 28rpx;
  font-weight: 600;
}

.text_c4_1 {
  font-size: 34rpx;
  color: #6E6AB2;
  font-weight: 700;
}

.text-line_c41 {
  /* 文本行样式 */
  white-space: nowrap;
  /* 防止文本自动换行，但这里不需要 */
  overflow: hidden;
  /* 如果需要，可以隐藏溢出内容 */
  text-overflow: ellipsis;
  /* 如果需要，可以用省略号表示溢出 */
  color: #000;
  font-size: 32rpx;
}

/* 如果需要固定文本为两行显示，可以为 .text-line 设置特定的 height 和 line-height */
.text-line_c41 {
  height: 48rpx;
  /* 假设每行文本高度为24px */
  line-height: 48rpx;
  /* 行高与文本高度相同 */
  /* 还可以添加其他文本样式，如字体大小、颜色等 */
}

.container_5 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* padding: 40rpx;  */
  width: 95%;
  margin-top: 30rpx;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 20rpx;
  box-shadow: 0rpx 32rpx 80rpx 0rpx #E8E8E8;
}

.header_c5 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20rpx 0rpx 20rpx 20rpx;
  width: 92%;
}

.header-image_c5 {
  width: 72rpx;
  height: 72rpx;
  margin-right: 20rpx;
}

.header-image_comma {
  width: 32rpx;
  /* 根据需要调整图片大小 */
  height: 32rpx;
  /* 根据需要调整图片大小 */
  margin-left: 10rpx;
}

.header-title_c5 {
  font-size: 32rpx;
  font-weight: 600;
  color: #3E3D44;
}

.data-row_c5 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20rpx;
  width: calc(100% - 100rpx);
  background-color: rgba(221, 222, 255, 0.2);
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 15rpx 30rpx 0 30rpx;
}

.data-row_c5_down {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 10rpx; */
  margin-left: 20rpx;
  width: calc(100% - 100rpx);
  background-color: rgba(221, 222, 255, 0.2);
  border-bottom-left-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  padding: 0 30rpx 15rpx 30rpx;
}

.data-item_c5 {
  display: flex;
  align-items: center;
}

.data-item_c5.left_c5 {
  display: flex;
  justify-content: flex-start;
  /* 子元素靠右对齐 */
  align-items: center;
  /* 如果需要垂直居中对齐 */
  padding: 10rpx 5rpx;
  /* 上下内边距 */
  margin-bottom: 2rpx;
  height: 52rpx;
  /* background-color:rgba(255, 255, 255, 1); */
  border-radius: 5%;
}

.data-item_c5 .right_c5 {
  display: flex;
  justify-content: flex-end;
  /* 子元素靠右对齐 */
  align-items: center;
  /* 如果需要垂直居中对齐 */
  padding: 15rpx 5rpx;
  /* 上下内边距 */
  margin-bottom: 10rpx;
  height: 62rpx;
  /* background-color:rgba(255, 255, 255, 1); */
  border-radius: 5%;
}

.data-image_c5 {
  width: 45rpx;
  /* 根据需要调整图片大小 */
  height: 45rpx;
  /* 根据需要调整图片大小 */
  margin-right: 8rpx;
  /* 图片和文本之间的间距 */
}

.data-text_c5 {
  font-size: 28rpx;
  color: #3E3D44;
}

.dot_c51 {
  width: 16rpx;
  height: 16rpx;
  background-color: #6086EF;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10rpx;
}

.data-text_c51 {
  /* 文本样式可以根据需要调整 */
  margin-left: 10rpx;
  font-size: 20rpx;
  color: #6186EF;
  background: #E6EDFF;
  padding: 1rpx 7rpx;
  border-radius: 4rpx;
}

.dot_c51_1 {
  width: 16rpx;
  height: 16rpx;
  background-color: #60C38D;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10rpx;
}

.data-text_c51_1 {
  /* 文本样式可以根据需要调整 */
  margin-left: 10rpx;
  font-size: 20rpx;
  color: #60C38D;
  background: #DEFAEB;
  padding: 1rpx 7rpx;
  border-radius: 4rpx;
}

.separator_c5 {
  width: 100%;
  height: 2rpx;
  background-color: #fff;
  /* 分割线的颜色为白色 */
  margin-bottom: 20rpx;
}

.container_6 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 95%;
  padding-bottom: 30rpx;
  background: white;
  margin-top: 30rpx;
  border-radius: 20rpx;
  box-shadow: 0rpx 32rpx 80rpx 0rpx #E8E8E8;
}

.title-row_c6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0rpx 20rpx 20rpx;
  width: 92%;
}

.title-left_c6 {
  display: flex;
  justify-content: flex-start;
  /* 子元素靠右对齐 */
  align-items: center;
  /* 如果需要垂直居中对齐 */
}

.title-right_c6 {
  display: flex;
  justify-content: flex-end;
  /* 子元素靠右对齐 */
  align-items: center;
  /* 如果需要垂直居中对齐 */
}

.title-image_c6 {
  width: 72rpx;
  height: 72rpx;
  margin-right: 20rpx;
}

.title-text_c6,
.title-text-right_c6 {
  font-size: 32rpx;
  font-weight: 600;
  color: #3E3D44;
}

.title-text-right_c6_1 {
  font-size: 24rpx;
  color: #EE8E56;
  margin-right: 30rpx;
}

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

.data-row_c6 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  width: 95%;
  margin-left: 20rpx;
}

.data-row_c6_0 {
  margin-bottom: 20rpx;
  width: 95%;
  margin-left: 20rpx;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  background-color: rgba(221, 222, 255, 0.2);
  padding: 15rpx;
}

.data-row_c6_1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.data-row_c6_2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15rpx;
}

.data-item_c6 {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.data-item_c6.left_c60 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* 如果需要垂直居中对齐 */
  text-align: left;
  color: white;
  font-size: 38rpx;
}

.data-item_c6 .left_c6 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* 如果需要垂直居中对齐 */
  text-align: left;
  color: rgba(0, 0, 0, 0.6);
}

.left_c61 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* 如果需要垂直居中对齐 */
  text-align: left;
  color: #3E3D44;
  /* color:rgba(0, 0, 0, 0.6); */
  font-size: 28rpx;
  font-weight: 525;
}

.data-item_c6 .left_c62 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* 如果需要垂直居中对齐 */
  text-align: left;
  font-size: 24rpx;
  color: #3E3D44;
}

.data-item_c6 .left_c62_1 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  /* 如果需要垂直居中对齐 */
  text-align: left;
  font-size: 24rpx;
  color: #ff0000;
}

.data-item_c6 .right_c6 {
  display: flex;
  justify-content: flex-end;
  /* 子元素靠右对齐 */
  align-items: center;
  /* 如果需要垂直居中对齐 */
  text-align: right;
  color: rgba(0, 0, 0, 0.6);
}

.separator_c6 {
  width: 100%;
  height: 2rpx;
  background-color: #ccc;
  /* 分割线的颜色 */
  margin-bottom: 20rpx;
}

.echarts-container_c6 {
  width: 100%;
  /* 可以根据需要调整 */
  height: 400rpx;
  /* 可以根据需要调整，或者设置为百分比 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 如果需要垂直居中对齐 */
}

/* ec-canvas 组件的样式可以根据需要进行调整 */
ec-canvas_c6 {
  width: 92%;
  height: 100%;
  margin-left: 50rpx;
}

.container_4_1 {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: left;
  /* 水平居中（如果需要整个容器内的内容居中）*/
  padding-top: 10rpx;
  /* 如果只需要image和text水平居中，并且它们占据整个容器的宽度，可以删除justify-content并设置flex-direction: row*/
}

.image_4_1 {
  width: 50rpx;
  /* 设置图片的宽度 */
  height: 50rpx;
  /* 设置图片的高度 */
  margin-right: 20rpx;
  /* 图片和文本之间的间距 */
}

.text_4_1 {
  /* 这里可以设置文本的样式，如字体大小、颜色等 */
  font-size: 50rpx;
  color: #ffffff;
}

.picker-view {
  margin-top: 12rpx;
}

.loading-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
  background-color: #00ffff;
  width: 350rpx;
  color: #909090;
  border-radius: 4px;
  z-index: 9999;
  /* 确保它显示在其他内容之上 */
}

.loading-text {
  /* 其他样式 */
  width: 300rpx;
  white-space: nowrap;
}

.circle-container-yh {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 让左右文本分布在图片两侧 */
  width: 100%;
  /* 根据需要调整，确保足够宽以容纳图片和文本 */
}

.circle-image-yh {
  width: 200rpx;
  /* 假设圆环图片宽度 */
  height: 200rpx;
  /* 假设圆环图片高度 */
}

.text-container-yh {
  display: flex;
  flex-direction: column;
  /* 文本内容垂直排列 */
  align-items: flex-start;
  /* 文本内容从顶部开始排列 */
  align-items: left;
}

.left-text-yh {
  margin-left: 15rpx;
}

.left-text-yh,
.right-text-yh {
  /* 根据需要添加样式，如内边距、字体大小等 */
  display: flex;
  align-items: center;
}

.icon-yh {
  width: 30rpx;
  /* 假设小图片的宽度 */
  height: 30rpx;
  /* 假设小图片的高度 */
  margin-right: 10rpx;
  /* 小图片与文字的间距 */
}

.top-text-yh {
  /* 上方文字的样式 */
  display: flex;
  justify-content: space-between;
  /* 让左右文本分布在水平方向上 */
  align-items: center;
  margin-top: 20rpx;
  /* 与圆环图片的间距 */
}

.text-row-yh {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
  /* 行与行之间的间距 */
}

.centered-text-yh {
  position: absolute;
  top: 85rpx;
  /* 垂直居中 */
  left: 0;
  right: 0;
  transform: translateY(-50%);
  /* 垂直居中 */
  text-align: center;
  /* 水平居中 */
}

.text-line-yh {
  display: block;
  margin-bottom: 20rpx;
  /* 行间距 */
}

.text-line-yh-1 {
  color: white;
  /* 第一行文字颜色 */
  font-size: 40rpx;
  /* 第一行文字大小 */
}

.text-line-yh-2 {
  color: #99ff62;
  /* 第二行文字颜色 */
  font-size: 120rpx;
  /* 第二行文字大小 */
}

.text-line-yh-3 {
  color: white;
  /* 第三行文字颜色 */
  font-size: 32rpx;
  /* 第三行文字大小 */
}

.text-content-yh {
  color: #9A969F;
  font-size: 20rpx;
}

.text-content-yh_1 {
  color: #3E3D44;
  font-size: 24rpx;
}

.text-content-yh_1-units {
  font-size: 20rpx;
}

/* 蓝色 */
.blue-dot-up {
  width: 16rpx;
  height: 16rpx;
  background-color: #5555ff;
  border-radius: 50%;
  display: inline-block;
  margin-right: 12rpx;
  margin-left: 20rpx;
  margin-top: 32rpx;
}

/* 紫色 */
.purple-dot-up {
  width: 16rpx;
  height: 16rpx;
  background-color: #9d00f1;
  border-radius: 50%;
  display: inline-block;
  margin-right: 12rpx;
  margin-left: 20rpx;
  margin-top: 32rpx;
}

/* 绿色 */
.green-dot-up {
  width: 16rpx;
  height: 16rpx;
  background-color: #55ff7f;
  border-radius: 50%;
  display: inline-block;
  margin-right: 12rpx;
  margin-left: 20rpx;
  margin-top: 32rpx;
}

/* 橘色 */
.organize-dot-up {
  width: 16rpx;
  height: 16rpx;
  background-color: #ffaa00;
  border-radius: 50%;
  display: inline-block;
  margin-right: 12rpx;
  margin-left: 20rpx;
  margin-top: 32rpx;
}

/* 蓝色 */
.blue-dot {
  width: 16rpx;
  height: 16rpx;
  margin-left: 25rpx;
  background-color: #6086EF;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10rpx;
}

/* 紫色 */
.purple-dot {
  width: 16rpx;
  height: 16rpx;
  background-color: #9d00f1;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10rpx;
}

/* 绿色 */
.green-dot {
  width: 16rpx;
  height: 16rpx;
  margin-left: 25rpx;
  background-color: #61C38D;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10rpx;
}

/* 橘色 */
.organize-dot {
  width: 16rpx;
  height: 16rpx;
  margin-left: 25rpx;
  background-color: #ffaa00;
  border-radius: 50%;
  display: inline-block;
  margin-right: 10rpx;

}

.echarts-container_c000 {
  width: 300rpx;
  /* 可以根据需要调整 */
  height: 300rpx;
  /* 可以根据需要调整，或者设置为百分比 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 如果需要垂直居中对齐 */
  margin-left: 150rpx;
}

.echarts-container_c00 {
  width: 350rpx;
  height: 350rpx;
}

.container_00 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* padding: 40rpx;  */
  border-radius: 20rpx;
  width: 95%;
  margin-top: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  height: 500rpx;
  box-shadow: 0rpx 32rpx 80rpx 0rpx #E8E8E8;
}

.separator_c00 {
  width: 90%;
  height: 1rpx;
  background-color: #ebebeb;
  /* 分割线的颜色为白色 */
  margin-bottom: 15rpx;
}

.header_c00 {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20rpx 0rpx 20rpx 20rpx;
  width: 92%;
}

.header-image_c00 {
  width: 100rpx;
  /* 根据需要调整图片大小 */
  height: 100rpx;
  /* 根据需要调整图片大小 */
  margin-right: 20rpx;
}

.header-title_c00 {
  font-size: 38rpx;
  /* 标题字体大小 */
  color: white;
}

.data-row_c00 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 20rpx;
  width: 92%;
  padding: 25rpx 0rpx;
}

.data-item_c00 {
  display: flex;
  align-items: center;
}

.data-item_c00.left_c00 {
  display: flex;
  justify-content: flex-start;
  /* 子元素靠右对齐 */
  align-items: center;
  /* 如果需要垂直居中对齐 */
}

.data-item_c00.right_c00 {
  display: flex;
  justify-content: flex-end;
  /* 子元素靠右对齐 */
  align-items: center;
  /* 如果需要垂直居中对齐 */
}

.data-image_c00 {
  width: 32rpx;
  /* 根据需要调整图片大小 */
  height: 32rpx;
  /* 根据需要调整图片大小 */
  margin-left: 12rpx;
  /* 图片和文本之间的间距 */
}

.data-image_c00_0 {
  width: 28rpx;
  /* 根据需要调整图片大小 */
  height: 28rpx;
  margin-left: 12rpx;
  /* 根据需要调整图片大小 */
}

.data-image_c00_01 {
  width: 16rpx;
  /* 根据需要调整图片大小 */
  height: 16rpx;
  /* 根据需要调整图片大小 */
  margin-left: 6rpx;
  margin-right: 6rpx
}

.data-text_c00_0 {
  color: #3E3D44;
  font-family: 'Microsoft YaHei', 'Heiti SC', 'Heiti TC', sans-serif;
  font-size: 24rpx;
  margin-left: 10rpx;
  white-space: nowrap;
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  font-weight: 600;
}

.data-text_c00 {
  /* 文本样式可以根据需要调整 */
  color: #000;
  font-family: 'Microsoft YaHei', 'Heiti SC', 'Heiti TC', sans-serif;
  font-size: 24rpx;
  margin-right: 30rpx;
  margin-left: 12rpx;
}

.data-text_c002 {
  /* 文本样式可以根据需要调整 */
  color: #000;
  font-family: 'Microsoft YaHei', 'Heiti SC', 'Heiti TC', sans-serif;
  font-size: 28rpx;
  font-weight: 600;
}

.data-text_c001 {
  /* 文本样式可以根据需要调整 */
  margin-left: 10rpx;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.6);
}

.block-element {
  display: block;
}

.hidden-element {
  display: none;
}

.picker-arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 10px solid rgba(161, 161, 161, 1.0);
  margin-left: 2px;
  margin-top: 10px;
  margin-right: 10rpx;
}

.picker_out {
  display: flex;
  flex-direction: row;
  min-width: 380rpx;
  margin-right: 20rpx;
  justify-content: space-between;
  border-radius: 60rpx;
  background-color: white;
  margin-left: 20rpx;
}

.picker-row_view {
  display: flex;
  flex-direction: row;
  height: 64rpx;
  flex: 1;
  justify-content: left;
  /* 移除默认背景 */
  align-items: center;
  background-color: rgba(255, 255, 255, 1);
  border-top-right-radius: 32rpx;
  border-bottom-right-radius: 32rpx;
  /* height:50rpx; */
}


.card-h {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
}

.card-h .chart-left-box {
  display: flex;
  width: 110rpx;
  justify-content: space-between;
  align-items: flex-end;
  flex-direction: column;



}

.card-h .chart-left-box .chart-left-title-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;


}

.card-h .chart-left-box .chart-left-title-box .dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 100%;
}

.card-h .chart-left-box .chart-left-title-box .left-title {
  white-space: nowrap;
  color: #333333;
  margin-left: 16rpx;
  min-width: 52rpx;
  font-size: 24rpx;
  color: #3E3D44;
}

.card-h .chart-left-box .chart-left-title-box:last-child {
  margin-bottom: 30rpx;
}

.sub-title {
  font-size: 24rpx;
  margin-bottom: 30rpx;
  color: #3E3D44;
  margin-left: 30rpx;
}


.card5-h {
  margin-top: 20rpx;
  display: flex;
  width: calc(100% - 40rpx);
  background: #F7F8FD;
  margin-left: 20rpx;
  flex-direction: row;
  align-items: center;
  padding: 24rpx 0;
  justify-content: space-around;

}

.card-v {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.card-t1 {
  font-size: 28rpx;
  font-weight: 600;
  color: #3E3D44;
}

.card-t2 {
  font-size: 24rpx;
  color: #6C6970;
}


.card6-h {
  width: 100%;
  margin: auto;
  display: flex;
}

.card-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.card-t3 {
  font-size: 24rpx;
  color: #3E3D44;
}

.card-item2 {
  margin-bottom: 30rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
}