|
|
@@ -4,10 +4,42 @@
|
|
|
|
|
|
|
|
|
</u-navbar>
|
|
|
+ <!-- 折线图 -->
|
|
|
<view class="chat-box">
|
|
|
- 11
|
|
|
+ <view class="title">
|
|
|
+ <view class="month">
|
|
|
+ 1月 共用电
|
|
|
+ </view>
|
|
|
+ <view class="month-pick">
|
|
|
+ 2024年1月<u-icon name="arrow-down"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="degree">
|
|
|
+ 180.00<text class="unit">度</text>
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <image class="img" src="@/assets/img/jVzkNKE@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 记录 -->
|
|
|
+ <view class="record">
|
|
|
+ <view class="total">
|
|
|
+ 01月 合计用电1000.00度 624.00元
|
|
|
+ </view>
|
|
|
+ <view class="record-item" v-for="item in 2">
|
|
|
+ <view class="item-left">
|
|
|
+ <view class="number">
|
|
|
+ 1月2日 用电 100.00 度
|
|
|
+ </view>
|
|
|
+ <view class="date">
|
|
|
+ 01-03 00:01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="money">
|
|
|
+ 64.4元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
@@ -25,8 +57,72 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ // 折线图
|
|
|
.chat-box{
|
|
|
background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(255,255,255,1) 75%);
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .month{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+
|
|
|
+ }
|
|
|
+ .month-pick{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .degree{
|
|
|
+ color: rgb(51,51,51);
|
|
|
+ font-size: 64rpx;
|
|
|
+ .unit{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chat{
|
|
|
+ width: 100%;
|
|
|
+ height: 240rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ // 记录
|
|
|
+ .record{
|
|
|
+ .total{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ }
|
|
|
+ .record-item{
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 32rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom: 1px solid rgba(244,244,244,1);
|
|
|
+ .item-left{
|
|
|
+ .number{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .date{
|
|
|
+ color: rgb(153,153,153);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .money{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
-
|
|
|
</style>
|
