miniProgram/pages/data/data.wxss

/* pages/data/data.wxss */
@import "/pages/setTime/setTime.wxss";
page {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-color: #F3F5F9;
}

.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; */
}
ec-canvas {
  width: 100%;
  height:400rpx;
  /* background-color: #fff; */
}


/* 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;  
  color: #ffffff; /* 占位符颜色 */  
  z-index: 10;
  border-radius: 20rpx;
  font-size: 30rpx;
}  

.picker-row {  
  position: absolute;  
  top: 20rpx; /* 根据需要调整 */  
  left: 5rpx;  
  right: 0;  
  display: flex;  
  justify-content: center;  
  /* padding: 0 10px;  */
  width:95%;
}  

.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: 60rpx; /* 根据需要调整 */  
  color: rgba(161, 161, 161, 1.0); 
  font-family: 'Microsoft YaHei', 'Heiti SC', 'Heiti TC', sans-serif;
} 
 
.picker-placeholder1 {  
  text-align: center;
  line-height: 60rpx; /* 根据需要调整 */  
  color: rgba(161, 161, 161, 1.0); 
  font-family: 'Microsoft YaHei', 'Heiti SC', 'Heiti TC', sans-serif;
  margin-left:15rpx;
  font-size: 28rpx;
}

.picker-placeholder2 {  
  text-align: center;
  line-height: 60rpx; /* 根据需要调整 */  
  color: rgba(161, 161, 161, 1.0); 
  font-family: 'Microsoft YaHei', 'Heiti SC', 'Heiti TC', sans-serif;
  margin-right:15rpx;
  font-size: 28rpx;
}

.button-group {  
  position: absolute;  
  top: 80rpx; /* 相对于picker-row的位置调整 */  
  left: 10rpx;  
  display: flex;  
  flex-direction: column;  
  z-index: 999;
}  

.select-group {  
  position: absolute;  
  top: 80rpx; /* 相对于picker-row的位置调整 */  
  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: 540rpx; /* 垂直居中 */  
  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: #000; /* 第三行文字颜色 */  
  font-size: 32rpx; /* 第三行文字大小 */
  margin-left: 18rpx;
}  
  
.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;
}  
  
.big-title_c2 {  
  font-size: 40rpx; /* 设置字体大小，根据需要调整 */  
  text-align: left;
  font-weight: 545; /* 设置为粗体 */  
  color: #000000; /* 设置字体颜色 */   
  /* 其他样式，如行高、字间距等 */  
  line-height: 1.5;  
}

.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; /* 顶端对齐 */  
  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);
}  
  
.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; /* 使文本部分占据剩余空间 */  
}  
  
.text-line_c3 {  
  white-space: nowrap; /* 防止文本自动换行，但这里不需要，因为我们想要两行显示 */  
  overflow: hidden; /* 如果需要，可以隐藏溢出内容 */  
  text-overflow: ellipsis; /* 如果需要，可以用省略号表示溢出 */  
  border-radius: 5%;
  color: rgba(0, 170, 255, 0.8);
  /* 可以添加其他文本样式，如字体大小、颜色等 */  
}  
  
/* 如果需要固定文本行数，可以为 .text-line 添加特定的高度和行高 */  
.text-line_c3:nth-child(1) {  
  /* 第一行文本样式（如果需要） */
	color: rgba(159, 159, 159, 0.8);
}  
  
.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;
}  
  
/* 如果需要固定文本行数，可以为 .text-line 添加特定的高度和行高 */  
.text-line_c31:nth-child(1) {  
  /* 第一行文本样式（如果需要） */
	color: #000;
}  
  
.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: 100%; /* 与左边面板等高 */  
  margin-left:15rpx;
}  
  
.cell_c4 {  
  display: flex;  
  align-items: center; /* 顶端对齐 */  
  justify-content: flex-start; /* 子元素靠右对齐 */ 
  padding: 20rpx 5rpx; /* 上下内边距 */ 
  margin-bottom:10rpx;
  height:62rpx;
  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; /* 文本部分占据剩余空间 */  
}  
  
.text-line_c4 {  
  /* 文本行样式 */  
  white-space: nowrap; /* 防止文本自动换行，但这里不需要 */  
  overflow: hidden; /* 如果需要，可以隐藏溢出内容 */  
  text-overflow: ellipsis; /* 如果需要，可以用省略号表示溢出 */  
  color:rgba(159, 159, 159, 0.8);
}  
  
/* 如果需要固定文本为两行显示，可以为 .text-line 设置特定的 height 和 line-height */  
.text-line_c4 {  
  height: 48rpx; /* 假设每行文本高度为24px */  
  line-height: 48rpx; /* 行高与文本高度相同 */  
  /* 还可以添加其他文本样式，如字体大小、颜色等 */  
}

.image_c4 {  
  width: 100%;  
  height: 100%;  
  object-fit: cover; /* 确保图片填充整个容器并保持其宽高比 */  
}  
  
.text-container_c4 {  
  position: absolute; /* 绝对定位使得文字可以位于图片之上 */  
  top: 50%; /* 垂直居中 */  
  left: 50%; /* 水平居中 */
  width:90%;
  transform: translate(-50%, -50%); /* 调整位置以完全居中 */  
  color: white; /* 或者其他你需要的颜色 */  
  text-align: center; /* 确保文字水平居中（尽管在绝对定位下这不是必需的）*/  
}  

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

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

.text-line_c41 {  
  /* 文本行样式 */  
  white-space: nowrap; /* 防止文本自动换行，但这里不需要 */  
  overflow: hidden; /* 如果需要，可以隐藏溢出内容 */  
  text-overflow: ellipsis; /* 如果需要，可以用省略号表示溢出 */  
  color: #000;
  font-weight:700;
}  
  
/* 如果需要固定文本为两行显示，可以为 .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;  */
  border-radius: 5%;
  width:95%;
  margin-top:30rpx;
  background-color:rgba(255, 255, 255, 1);
}  
  
.header_c5 {  
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 20rpx 0rpx 20rpx 20rpx;
  width:92%;
}  
  
.header-image_c5 {  
  width: 100rpx; /* 根据需要调整图片大小 */  
  height: 100rpx; /* 根据需要调整图片大小 */  
  margin-right: 20rpx;  
}  

.header-image_comma {  
  width: 40rpx; /* 根据需要调整图片大小 */  
  height: 40rpx; /* 根据需要调整图片大小 */  
  margin-left: 10rpx;  
}  
  
.header-title_c5 {  
  font-size: 38rpx; /* 标题字体大小 */  
  color: #000;
}  
  
.data-row_c5 {  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
  /* margin-bottom: 10rpx; */
   margin-left: 20rpx;
  width:92%;
  background-color:rgba(221, 222, 255, 0.2);
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding:0rpx 15rpx;
}  

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

.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: 20rpx 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 {  
  /* 文本样式可以根据需要调整 */  
  color:#000;
} 

.dot_c51{
	width: 20rpx;
	height: 20rpx;  
	background-color: rgba(140, 120, 255, 0.9); 
	border-radius: 50%;
	display: inline-block;
	margin-right:10rpx;
}
 .data-text_c51 {
   /* 文本样式可以根据需要调整 */
   margin-left:10rpx;
   font-size: 20rpx; 
   color:rgba(140, 120, 255, 0.6);
   background-color:rgba(140, 120, 255, 0.2);
 } 
 
 .dot_c51_1{
 	width: 20rpx;
 	height: 20rpx;  
 	background-color: rgba(85, 255, 127, 0.9); 
 	border-radius: 50%;
 	display: inline-block;
	margin-right:10rpx;
 }
 
 .data-text_c51_1 {
   /* 文本样式可以根据需要调整 */
   margin-left:10rpx;
   font-size: 20rpx; 
   color:rgba(85, 255, 127, 0.6);
   background-color:rgba(85, 255, 127, 0.2);
 } 
  
.separator_c5 {  
  width: 100%;  
  height: 2rpx;  
  background-color: #fff; /* 分割线的颜色为白色 */  
  margin-bottom: 20rpx;  
}

.container_6 {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
  /* padding: 20rpx; */
  border-radius: 5%;
  width:95%;
  margin-top: 20rpx;
  background-color:rgba(255, 255, 255, 1);
}  
  
.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: 100rpx; /* 根据需要调整图片大小 */  
  height: 100rpx; /* 根据需要调整图片大小 */  
  margin-right: 20rpx;  
}  
  
.title-text_c6, .title-text-right_c6 {  
  font-size: 35rpx; /* 标题字体大小 */  
  color: #000;
}  

.title-text-right_c6_1 {  
  font-size: 32rpx; /* 标题字体大小 */  
  color: #ffb9a4;
  margin-right:10rpx;
  /* background-color: rgba(255, 255, 255, 1); */
} 
  
.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; /* 保证左右两边等宽或按比例分配空间 */  
}  
  
.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);
}  
  
.data-item_c6.left_c61 { 
  display: flex;  
  justify-content: flex-start;
  align-items: center; /* 如果需要垂直居中对齐 */
  text-align: left; 
  color:#000;
  /* color:rgba(0, 0, 0, 0.6); */
  font-size: 38rpx;
  font-weight: 525;
}

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

.data-item_c6.left_c62_1 { 
  display: flex;  
  justify-content: flex-start;
  align-items: center; /* 如果需要垂直居中对齐 */
  text-align: left; 
  font-size:23rpx;
  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: 300rpx; /* 可以根据需要调整，或者设置为百分比 */  
  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: #d4d4d4; /* 第三行文字颜色 */  
  font-size: 28rpx; /* 第三行文字大小 */  
} 
.text-content-yh_1{  
  color: #000000; /* 第三行文字颜色 */  
  font-size: 28rpx; /* 第三行文字大小 */  
} 

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

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

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

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

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

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

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

/* 橘色 */
.organize-dot {  
  width: 20rpx; 
  height: 20rpx;  
  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: 300rpx; /* 可以根据需要调整 */  
  height: 300rpx; /* 可以根据需要调整，或者设置为百分比 */  
  /* display: flex;  
  justify-content: center;  
  align-items: center; */
  /* z-index: -1; */
} 

.container_00 {  
  display: flex;  
  flex-direction: column;  
  align-items: flex-start;  
  /* padding: 40rpx;  */
  border-radius: 5%;
  width:95%;
  margin-top:100rpx;
  background-color: rgba(255, 255, 255, 1);
  height:500rpx;
}  

.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-bottom: 20rpx;
   margin-left: 20rpx;
  width:92%;
  padding: 20rpx 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: 45rpx; /* 根据需要调整图片大小 */  
  height: 45rpx; /* 根据需要调整图片大小 */  
  margin-left: 12rpx; /* 图片和文本之间的间距 */  
}  

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

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

.data-text_c00_0 {  
  /* 文本样式可以根据需要调整 */  
  color: rgba(57, 57, 57, 1.0);
  font-family: 'Microsoft YaHei', 'Heiti SC', 'Heiti TC', sans-serif;
  font-size:24rpx;
  /* width:40rpx; */
  margin-left:5rpx;
  /* justify-content: center; 
  align-items: center; */
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 20rpx; 
  background-color: rgba(255, 255, 255, 1);
} 

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

.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;
  justify-content: space-between; 
  background-color: transparent; /* 移除默认背景 */  
  border: none; /* 移除默认边框 */  
  border-radius: 20rpx;
  background-color: rgba(255, 255, 255, 1);
  width: 58%;
  margin-left: 15rpx;
}

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