|
|
@@ -0,0 +1,193 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="用电详情" title-color="#101010" >
|
|
|
+
|
|
|
+ <view class="slot" slot="right" >
|
|
|
+ 计费规则
|
|
|
+ </view>
|
|
|
+ </u-navbar>
|
|
|
+ <view class="background">
|
|
|
+ <!-- 用电记录 -->
|
|
|
+ <view class="details">
|
|
|
+ <view class="headline">
|
|
|
+ 1月1日用电记录
|
|
|
+ </view>
|
|
|
+ <view class="infos">
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-title">
|
|
|
+ 用电量
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 100.00度
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-title">
|
|
|
+ 电费
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 94.5元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-title">
|
|
|
+ 峰时用电 (1.28元/度)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+
|
|
|
+
|
|
|
+ 20.00度 25.6元
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-title">
|
|
|
+
|
|
|
+ 谷时用电 (0.65元/度)
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 40.00度 26元
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-title">
|
|
|
+ 平时用电 (0.98元/度)
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 30.00度 29.4元
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-title">
|
|
|
+ 尖时用电 (1.36元/度)
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 10.00度 13.6元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item" >
|
|
|
+ <view class="item-title">
|
|
|
+ 用户信息
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 物业公司
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="infos-item">
|
|
|
+ <view class="item-title">
|
|
|
+ 户号
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 00101010
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 折线图 -->
|
|
|
+ <view class="chat-box">
|
|
|
+ <view class="title">
|
|
|
+ 1月1日 用电量趋势
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <image src="@/assets/img/chart@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <button class="back">返回</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .background{
|
|
|
+ height: 400rpx;
|
|
|
+ padding-top: 32rpx;
|
|
|
+ background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
|
|
|
+
|
|
|
+ // 用电记录
|
|
|
+ .details{
|
|
|
+
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 32rpx;
|
|
|
+ margin: 0rpx 32rpx;
|
|
|
+
|
|
|
+ .headline{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .infos{
|
|
|
+ margin-top: 32rpx;
|
|
|
+ border-bottom: 1px solid rgba(241,241,241,1);
|
|
|
+ .infos-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .item-title{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ }
|
|
|
+ .item-value{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 折线图
|
|
|
+ .chat-box{
|
|
|
+ border-radius: 8px;
|
|
|
+ background: linear-gradient(180deg, rgba(214,238,255,1) 0%,rgba(208,236,236,0) 100%);
|
|
|
+ .title{
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ padding: 24rpx;
|
|
|
+ }
|
|
|
+ .chat-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 322rpx;
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 返回
|
|
|
+ .back{
|
|
|
+ border: 1px solid rgba(205,205,205,1);
|
|
|
+ line-height: 88rpx;
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin: 32rpx;
|
|
|
+ }
|
|
|
+</style>
|
