|
|
@@ -0,0 +1,166 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="电费月度账单" title-color="#101010" ></u-navbar>
|
|
|
+ <view class="background">
|
|
|
+ <view class="recharge-details">
|
|
|
+ <view class="headline">
|
|
|
+ 2024年1月电费月度账单
|
|
|
+ </view>
|
|
|
+ <view class="sum">
|
|
|
+ 1000.00
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details">
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 用户信息
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 3~6楼联通公司
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 户号
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 00880088
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 收费标准
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 1.3元/度C
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 度数
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+
|
|
|
+ 61.53度 (起止码100-161.53)
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 可用余额
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+
|
|
|
+ 650.51元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-title">
|
|
|
+ 统计截止日期
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2024-01-02 00:00:01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="details">
|
|
|
+ <view class="chart-box">
|
|
|
+ <view class="title">
|
|
|
+ 1月用电量趋势
|
|
|
+ </view>
|
|
|
+ <image class="img" src="../../../assets/img/jVzkNKE@1x.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 返回 -->
|
|
|
+ <button class="back">返回</button>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .background{
|
|
|
+ position: relative;
|
|
|
+ height: 200px;
|
|
|
+ background: linear-gradient(180deg, rgba(203,234,255,1) 0%,rgba(203,234,255,0) 100%);
|
|
|
+ .recharge-details{
|
|
|
+ position: absolute;
|
|
|
+ top: 24rpx;
|
|
|
+ left: 32rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ .headline{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 36rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .sum{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 48rpx;
|
|
|
+ margin-top: 32rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .details{
|
|
|
+ margin-top: 40rpx;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ border-top: 1px solid rgba(241,241,241,1);
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom:16rpx;
|
|
|
+ .item-title{
|
|
|
+ color: rgb(119,119,119);
|
|
|
+ }
|
|
|
+ .item-value{
|
|
|
+ color: rgb(48,48,48);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart-box{
|
|
|
+ background-color: rgba(208,236,255,1);
|
|
|
+ .title{
|
|
|
+ text-align: left;
|
|
|
+ padding: 24rpx 28rpx;
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 622rpx;
|
|
|
+ height: 304rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 返回
|
|
|
+ .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;
|
|
|
+ position: absolute;
|
|
|
+ top: 1220rpx;
|
|
|
+ left: 32rpx;
|
|
|
+ right: 32rpx;
|
|
|
+ }
|
|
|
+</style>
|
