|
|
@@ -15,61 +15,86 @@
|
|
|
<view class="rules">
|
|
|
|
|
|
<view class="content">
|
|
|
- <view class="rule1">
|
|
|
+
|
|
|
<view class="title">
|
|
|
- 用电分类
|
|
|
+ <view class="title-item">
|
|
|
+ 用电分类
|
|
|
+ </view>
|
|
|
+ <view class="title-item">
|
|
|
+ 用电时段
|
|
|
+ </view>
|
|
|
+ <view class="title-item">
|
|
|
+ 电度电价
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <view class="classify">
|
|
|
+ <view class="classify-title">
|
|
|
+ 高峰用电
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ 09:00-15:00
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ 0.99元/度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="classify">
|
|
|
+ <view class="classify-title">
|
|
|
+ 谷段用电
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ 23:00-07:00
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ 0.37元/度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="classify classify2">
|
|
|
+ <view class="classify-title">
|
|
|
+ 平段用电
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ <p>07:00-09:00</p>
|
|
|
+ <p>15:00-20:00</p>
|
|
|
+ <p>22:00-23:00</p>
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ 0.69元/度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="classify">
|
|
|
+ <view class="classify-title">
|
|
|
+ 尖峰用电
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ 20:00-22:00
|
|
|
+ </view>
|
|
|
+ <view class="classify-value">
|
|
|
+ 1.18元/度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
<view class="value" v-for="(item,index) in groupPriceList" :key="index"
|
|
|
:class="item.electricPeriodPriceList.length>1 ? '' : 'title3'">
|
|
|
{{item.name}}
|
|
|
</view>
|
|
|
- <!-- <view class="value">
|
|
|
- 谷段用电
|
|
|
- </view>
|
|
|
- <view class="value title3">
|
|
|
- 平段用电
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 尖峰用电
|
|
|
- </view> -->
|
|
|
- </view>
|
|
|
+
|
|
|
+
|
|
|
<view class="rule2">
|
|
|
- <view class="title">
|
|
|
- 用电时段
|
|
|
- </view>
|
|
|
+
|
|
|
<view class="value" v-for="(item,index) in groupPriceList" :key="index"
|
|
|
:class="item.electricPeriodPriceList.length>1 ? '' : 'value3'">
|
|
|
<span v-for="e in item.electricPeriodPriceList">{{e.startTime}}-{{e.endTime}}</span>
|
|
|
</view>
|
|
|
- <!-- <view class="value">
|
|
|
- 23:00-07:00
|
|
|
- </view>
|
|
|
- <view class="value value3">
|
|
|
- <p>07:00-09:00</p>
|
|
|
- <p>15:00-20:00</p>
|
|
|
- <p>22:00-23:00</p>
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 20:00-22:00
|
|
|
- </view> -->
|
|
|
+
|
|
|
</view>
|
|
|
<view class="rule3">
|
|
|
- <view class="title">
|
|
|
- 电度电价
|
|
|
- </view>
|
|
|
+
|
|
|
<view class="value" v-for="(item,index) in groupPriceList" :key="index"
|
|
|
:class="item.electricPeriodPriceList.length>1 ? '' : 'value4'">
|
|
|
<span v-for="e in item.electricPeriodPriceList">{{e.price}}元/度</span>
|
|
|
</view>
|
|
|
- <view class="value">
|
|
|
- 0.37元/度
|
|
|
- </view>
|
|
|
- <view class="value value4">
|
|
|
- 0.69元/度
|
|
|
- </view>
|
|
|
- <view class="value">
|
|
|
- 1.18元/度
|
|
|
- </view>
|
|
|
+
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 备注 -->
|
|
|
@@ -187,60 +212,50 @@
|
|
|
|
|
|
.content {
|
|
|
padding: 24rpx;
|
|
|
- display: flex;
|
|
|
- text-align: center;
|
|
|
-
|
|
|
- .rule1 {
|
|
|
- width: 200rpx;
|
|
|
-
|
|
|
+
|
|
|
.title {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
line-height: 96rpx;
|
|
|
color: rgba(51, 51, 51, 1);
|
|
|
font-size: 32rpx;
|
|
|
font-weight: bold;
|
|
|
+ .title-item{
|
|
|
+ width: 33.3%;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .value {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- line-height: 96rpx;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .rule2,
|
|
|
- .rule3 {
|
|
|
- width: 200rpx;
|
|
|
-
|
|
|
- .title {
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- font-size: 32rpx;
|
|
|
- line-height: 96rpx;
|
|
|
- font-weight: bold;
|
|
|
+ .classify{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ height: 96rpx;
|
|
|
+
|
|
|
+ .classify-title,.classify-value{
|
|
|
+ width: 33.3%;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ .classify-title{
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
-
|
|
|
- .value {
|
|
|
- color: rgba(119, 119, 119, 1);
|
|
|
- line-height: 96rpx;
|
|
|
+ .classify2{
|
|
|
+ height: 144rpx;
|
|
|
+
|
|
|
}
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
- .title3 {
|
|
|
- height: 144rpx;
|
|
|
- line-height: 144rpx !important;
|
|
|
- }
|
|
|
+
|
|
|
+
|
|
|
|
|
|
- .value3 {
|
|
|
- height: 144rpx;
|
|
|
+
|
|
|
|
|
|
- p {
|
|
|
- line-height: 48rpx;
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
- .value4 {
|
|
|
- height: 144rpx;
|
|
|
- line-height: 144rpx !important;
|
|
|
- }
|
|
|
+
|
|
|
|
|
|
}
|
|
|
|
