project init

pages/account/index.js

@@ -1,5 +1,23 @@
 Page({
-    data: {},
+    data: {
+        noMoney : "****",
+        hiddenMoney: false,
+        cashAccountList : [
+            {"name":"现金","money":"2000.00"},
+            {"name":"银行卡","money":"30500.03"}
+        ],
+        visualAccountList : [
+            {"name":"支付宝","money":"200.00"},
+            {"name":"微信","money":"00.03"}
+        ],
+        oweAccountList : [
+            {"name":"信用卡","money":"-200.00"},
+        ],
+        payAccountList : [
+            {"name":"基金","money":"31200.00"},
+            {"name":"长江证券","money":"200.00"},
+        ],
+    },
     onLoad: function (options) {
 
     },
@@ -8,4 +26,11 @@ Page({
             wx.hideHomeButton()
         }
     },
+    changeHidden () {
+        let isHidden = this.data.hiddenMoney;
+        this.setData({
+            hiddenMoney : !isHidden
+        });
+    }
+
 });

pages/account/index.wxml

@@ -1,2 +1,45 @@
-账户
+<view class="main_look">
+    <view class="look_content">
+        <view class="pay_look">
+            <view class="inline_box font_big">净资产<t-icon bind:tap="changeHidden" name="{{ hiddenMoney ? 'browse' : 'browse-off'}}"/></view>
+            <text class="font_big">{{ hiddenMoney ? noMoney : 1200.00 }}</text>
+        </view>
+        <view class="balance_look">
+            <text>总资产: {{ hiddenMoney ? noMoney : 900.00 }}</text>
+            <text> | </text>
+            <text>总负债: {{ hiddenMoney ? noMoney : -300.00 }}</text>
+        </view>
+    </view>
+</view>
+<view class="padding_box">
+    <t-divider dashed content="现金账户"/>
+    <t-cell wx:for="{{cashAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <t-divider dashed content="虚拟账户"/>
+    <t-cell wx:for="{{visualAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <t-divider dashed content="负债账户"/>
+    <t-cell wx:for="{{oweAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <t-divider dashed content="投资账户"/>
+    <t-cell wx:for="{{payAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <view class="placeholder"/>
+</view>
 <foot-tab value="label_3"/>

pages/account/index.wxss

@@ -0,0 +1,26 @@
+.main_look {
+    margin: 0 20rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 200rpx;
+    background-image: url("https://yigger.cn/covers/default-7.jpeg");
+    background-size:100% 100%;
+}
+.look_content {
+    font-weight: bold;
+}
+.pay_look {
+    padding: 0 20rpx;
+}
+.balance_look {
+    padding: 20rpx;
+    /*display: flex;*/
+    /*justify-content: space-between;*/
+}
+.t-divider__content {
+    --td-divider-content-font-size:25rpx;
+}
+t-cell {
+    --td-cell-note-color: orange;
+}