调整首页

pages/home/index.json

@@ -1,3 +1,9 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "custom-status-bar": "/components/customStatusBar/index",
+    "van-icon": "@vant/weapp/icon/index",
+    "van-button": "@vant/weapp/button/index",
+    "van-image": "@vant/weapp/image/index"
+  },
+  "navigationStyle": "custom"
 }

pages/home/index.wxml

@@ -1,2 +1,62 @@
 <!--pages/home/index.wxml-->
-首页
+<view class="top">
+  <custom-status-bar />
+  <view class="chooseParkWrapper">
+    用电管理服务 ·
+    <view class="parkContent">
+      <view class="park">
+        金石工业园
+      </view>
+      <van-icon name="arrow-down" style="margin-left: 16rpx;" />
+    </view>
+  </view>
+</view>
+<view class="login" wx:if="{{!user || !user.id}}" class="notLoginWrapper">
+  <van-image width="100rpx" height="100rpx" src="/assets/images/defaultAvatar.png" class="defaultAvatar"/>
+  <van-button type="info" size="small" plain="{{true}}" class="loginBtn">请登录</van-button>
+</view>
+<view class="rechargeWrapper">
+  <view class="card">
+    <view class="cardTop">
+      <view class="cardTopLeft">
+        <view> 华昌宝能 - 软c307 </view>
+      </view>
+      <van-button type="info" size="small" plain="{{true}}" class="loginBtn">
+        <van-icon name="exchange" />
+        切换电表
+      </van-button>
+    </view>
+    <view class="cardContent">
+      <view class="cardItem">
+        <view class="cardItemLabel"> 电表编号： </view>
+        <view class="cardItemValue"> 15151515 </view>
+      </view>
+      <view class="cardItem">
+        <view class="cardItemLabel"> 电表地址： </view>
+        <view class="cardItemValue"> 软C307 </view>
+      </view>
+      <view class="cardItem">
+        <view class="cardItemLabel"> 电表余额： </view>
+        <view class="cardItemValue">
+          <view class="text"> 200 </view>
+          <van-button type="info" size="small" plain="{{true}}">
+            <van-icon name="replay" />
+            刷新
+          </van-button>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="recharge">
+    <view> 请输入金额： </view>
+    <view>
+      <view> ￥30 </view>
+      <view> ￥50 </view>
+      <view> ￥100 </view>
+      <view> ￥200 </view>
+    </view>
+  </view>
+  <view class="operate">
+    <van-button color="rgb(88, 165, 141)" block>去缴费</van-button>
+  </view>
+</view>

pages/home/index.wxss

@@ -1 +1,97 @@
-/* pages/home/index.wxss */
+/* pages/home/index.wxss */
+@import "/app.wxss";
+
+.top {
+  background-color: var(--deep-green);
+}
+
+.chooseParkWrapper {
+  height: 46px;
+  display: flex;
+  align-items: center;
+  padding: 0 32rpx;
+  color: #fff;
+  font-size: 34rpx;
+}
+
+.park {
+  margin-left: 30rpx;
+}
+
+.parkContent {
+  display: flex;
+  align-items: center;
+}
+
+.notLoginWrapper {
+  padding: 30rpx 32rpx;
+  background-color: var(--middle-green);
+  display: flex;
+  align-items: center;
+}
+
+.loginBtn {
+  margin-left: 30rpx;
+}
+
+.rechargeWrapper {
+  background: linear-gradient(to bottom, var(--middle-green), #fff );
+  overflow: hidden;
+}
+
+.card {
+  margin-top: 1vh;
+  margin-left: 46rpx;
+  margin-right: 46rpx;
+  border-radius: 30rpx;
+  padding: 28rpx 30rpx;
+  /* background-color: rgb(173, 217, 203); */
+  background: linear-gradient(to bottom right, rgb(212, 240, 231), rgb(145, 206, 185));
+}
+
+.cardTop {
+  display: flex;
+  align-items: center;
+}
+
+.cardTopLeft {
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.cardContent {
+  margin: 30rpx 20rpx 0;
+}
+
+.cardItem {
+  display: flex;
+  align-items: center;
+  margin-bottom: 30rpx;
+  font-size: 34rpx;
+}
+
+.cardItemValue {
+  display: flex;
+  flex: 1;
+  align-items: center;
+}
+
+.cardItemValue .text {
+  flex: 1;
+}
+
+.recharge {
+  background: #fff;
+  padding: 20rpx 30rpx;
+  margin-top: 30rpx;
+  margin-left: 46rpx;
+  margin-right: 46rpx;
+  margin-bottom: 40rpx;
+  border-radius: 30rpx;
+}
+
+.operate {
+  margin-left: 46rpx;
+  margin-right: 46rpx;
+}