|
|
@@ -37,12 +37,6 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
|
|
|
- <!-- 支流出库流量图表 -->
|
|
|
- <!-- <view class="chart-section">
|
|
|
- <text class="section-title">支流出库流量 (m³/s)</text>
|
|
|
- <flow-chart />
|
|
|
- </view> -->
|
|
|
-
|
|
|
<!-- <view>
|
|
|
<button @click="handlePush">通知</button>
|
|
|
</view> -->
|
|
|
@@ -628,7 +622,7 @@
|
|
|
.page-container {
|
|
|
position: relative;
|
|
|
flex: 1;
|
|
|
- padding-top: env(safe-area-inset-top);
|
|
|
+ // padding-top: env(safe-area-inset-top);
|
|
|
background-color: #e8f0f9;
|
|
|
}
|
|
|
|
|
|
@@ -654,8 +648,9 @@
|
|
|
.page-content {
|
|
|
position: relative;
|
|
|
flex: 1;
|
|
|
+ margin-top: 30rpx;
|
|
|
margin-bottom: 150rpx;
|
|
|
- padding: 20rpx;
|
|
|
+ // padding: 20rpx;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
@@ -684,7 +679,8 @@
|
|
|
}
|
|
|
|
|
|
.section-title-container {
|
|
|
- padding: 20rpx 30rpx 10rpx 30rpx;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
}
|
|
|
|
|
|
.section-header {
|
|
|
@@ -710,53 +706,89 @@
|
|
|
.db-view{
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
- // justify-content: space-between;
|
|
|
- justify-content: flex-start;
|
|
|
- margin-bottom: 10rpx;
|
|
|
- // gap: 20rpx;
|
|
|
-
|
|
|
- .db-box{
|
|
|
+ justify-content: space-between; // 或 space-around
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 20rpx; // 可选:避免贴边
|
|
|
+
|
|
|
+ // .db-box{
|
|
|
+ // background-color: #fff;
|
|
|
+ // width:200rpx;
|
|
|
+ // height: 200rpx;
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // margin-left: 28rpx;
|
|
|
+ // border-radius: 5px;
|
|
|
+ // .db-text{
|
|
|
+ // margin-top: 10rpx;
|
|
|
+ // font-size:10px;
|
|
|
+ // }
|
|
|
+ // .db-center-1{
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // background-color: #DBEAFE;
|
|
|
+ // border-radius: 200px;
|
|
|
+ // width:100rpx;
|
|
|
+ // height:100rpx;
|
|
|
+ // position: relative;
|
|
|
+ // }
|
|
|
+ // .db-center-2{
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // background-color: #DCFCE7;
|
|
|
+ // border-radius: 200px;
|
|
|
+ // width:100rpx;
|
|
|
+ // height:100rpx;
|
|
|
+ // position: relative;
|
|
|
+ // }
|
|
|
+ // .db-center-3{
|
|
|
+ // justify-content: center;
|
|
|
+ // align-items: center;
|
|
|
+ // background-color: #F3E8FF;
|
|
|
+ // border-radius: 200px;
|
|
|
+ // width:100rpx;
|
|
|
+ // height:100rpx;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ .db-box {
|
|
|
background-color: #fff;
|
|
|
- width:200rpx;
|
|
|
- height: 200rpx;
|
|
|
+ // 删除固定宽高 ↓
|
|
|
+ // width: 200rpx;
|
|
|
+ // height: 200rpx;
|
|
|
+
|
|
|
+ flex: 1; // ✅ 关键:平均分空间
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column; // 垂直排列:图标在上,文字在下
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- margin-left: 28rpx;
|
|
|
+ margin: 0 10rpx; // 左右间距(替代原来的 margin-left)
|
|
|
border-radius: 5px;
|
|
|
- .db-text{
|
|
|
- margin-top: 10rpx;
|
|
|
- font-size:10px;
|
|
|
- }
|
|
|
- .db-center-1{
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: #DBEAFE;
|
|
|
- border-radius: 200px;
|
|
|
- width:100rpx;
|
|
|
- height:100rpx;
|
|
|
- position: relative;
|
|
|
+ padding: 30rpx 10rpx; // 可选:增加内边距使内容不拥挤
|
|
|
+
|
|
|
+ .db-text {
|
|
|
+ margin-top: 16rpx; // 图标与文字间距
|
|
|
+ font-size: 24rpx; // 建议用 rpx,10px 太小了
|
|
|
+ color: #333;
|
|
|
}
|
|
|
- .db-center-2{
|
|
|
+
|
|
|
+ .db-center-1,
|
|
|
+ .db-center-2,
|
|
|
+ .db-center-3 {
|
|
|
+ display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- background-color: #DCFCE7;
|
|
|
- border-radius: 200px;
|
|
|
- width:100rpx;
|
|
|
- height:100rpx;
|
|
|
+ width: 100rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
position: relative;
|
|
|
}
|
|
|
- .db-center-3{
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background-color: #F3E8FF;
|
|
|
- border-radius: 200px;
|
|
|
- width:100rpx;
|
|
|
- height:100rpx;
|
|
|
- }
|
|
|
+
|
|
|
+ .db-center-1 { background-color: #DBEAFE; }
|
|
|
+ .db-center-2 { background-color: #DCFCE7; }
|
|
|
+ .db-center-3 { background-color: #F3E8FF; }
|
|
|
}
|
|
|
.db-image{
|
|
|
- width:20px;
|
|
|
- height:20px;
|
|
|
+ width:50rpx;
|
|
|
+ height:50rpx;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -774,14 +806,15 @@
|
|
|
align-items: center; // 垂直居中
|
|
|
box-sizing: border-box; // 确保 padding 不影响整体尺寸
|
|
|
padding: 0 12rpx;
|
|
|
+ .count {
|
|
|
+ // line-height: 40rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ // text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
|
|
|
}
|
|
|
- .count {
|
|
|
- // line-height: 40rpx;
|
|
|
- font-size: 26rpx;
|
|
|
- // text-align: center;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
.list-item {
|
|
|
margin: 0 30rpx 24rpx 30rpx;
|