feat: modify asset/setting and common style (yigger#18)

yangyangyou · Jun 12, 2019 · 3ff2dc8 · 3ff2dc8
1 parent bb8374e
commit 3ff2dc8
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 64 deletions.
diff --git a/src/app.wpy b/src/app.wpy
@@ -68,12 +68,13 @@ export default class extends wepy.app {
       "pages/friends/search"
     ],
     window: {
-      backgroundColor: "#efefef",
-      navigationBarBackgroundColor: "#1976D2",
-      backgroundTextStyle: "light",
-      navigationBarTitleText: "洁账",
-      navigationBarTextStyle: "white",
-      enablePullDownRefresh: false
+      "backgroundColor": "#efefef",
+      "navigationBarBackgroundColor": "#ffffff",
+      "navigationBarTextStyle": "black",
+      "backgroundTextStyle": "light",
+      "navigationBarTitleText": "洁账",
+      // navigationBarTextStyle: "white",
+      "enablePullDownRefresh": false
     },
     tabBar: {
       backgroundColor: "#fff",

diff --git a/src/pages/asset.wpy b/src/pages/asset.wpy
@@ -1,7 +1,27 @@
 <template>
 <view class="container">
   <view class="wallet-header">
-    <view class="assets">
+    <view class="header-container">
+      <view class="netWorth">
+        <view>
+          <text>净资产</text>
+          <text
+            @tap="eyesTab"
+            class="iconfont eye-item-img {{ eyeImageClass }}"
+          >
+          </text>
+        </view>
+        <view>{{ hiddenMoney ? '****' : netWorth }}</view>
+      </view>
+
+      <view class="asset-and-debt">
+        <text>总资产 {{ hiddenMoney ? '****' : totalAssets }}</text>
+        <text>|</text>
+        <text>总负债 {{ hiddenMoney ? '****' : totalAssets }}</text>
+      </view>
+    </view>
+
+    <!-- <view class="assets">
       <view>
         <view class="header-text">
           <text>{{ hiddenMoney ? '****' : netWorth }}</text>
@@ -15,8 +35,8 @@
         <view class="desc-text">总资产</view>
         <image class="eye-item-img" @tap="eyesTab" src="{{ eyeImageSrc }}"></image>
       </view>
-    </view>
-    <view class="yesterday-amount">
+    </view> -->
+    <!-- <view class="yesterday-amount">
       <view>
         <text>总负债：</text>
         <text>{{ hiddenMoney ? '****' : totalDebt }}</text>
@@ -33,7 +53,7 @@
         <text>近一月日均消费：</text>
         <text>{{ hiddenMoney ? '****' : monthAmount }}</text>
       </view>
-    </view>
+    </view> -->
   </view>
 
   <view id="all-assets">
@@ -44,7 +64,7 @@
       </view>
       <view class="column" wx:for="{{ item.childs }}" bindtap="showAsset('{{ item.id }}')">
         <view class="icon pull-left">
-          <image class="ljt-icon" src="{{ item.icon_path }}"></image>
+          <image class="icon-small-size" src="{{ item.icon_path }}"></image>
         </view>
         <view class="money pull-right">{{ hiddenMoney ? '****' : item.amount }}</view>
         <view class="title">{{ item.name }}</view>
@@ -99,8 +119,8 @@
       hiddenMoney () {
         return this.$parent.globalData.user.hidden_asset_money
       },
-      eyeImageSrc () {
-        return this.hiddenMoney ? '../public/images/eye-open.png' : '../public/images/eye-open.png'
+      eyeImageClass () {
+        return this.hiddenMoney ? 'jz-icon-yanjing-zheng' : 'jz-icon-yanjing-bi'
       }
     }
 

diff --git a/src/pages/setting.wpy b/src/pages/setting.wpy
@@ -1,9 +1,9 @@
 <template>
   <view class="container">
     <view class="header" :class="{'no-login': !user.already_login}">
-      <view class="background-img">
+      <!-- <view class="background-img">
         <image src="../public/images/doodles.png"></image>
-      </view>
+      </view> -->
 
       <view class="main-container">
         <view class="user-section" @tap="redirect('/pages/settings/user_info')">

diff --git a/src/public/styles/asset.scss b/src/public/styles/asset.scss
@@ -1,11 +1,29 @@
 @import './_variable.scss';
 
 .wallet-header {
-  height:360rpx;
-  position:relative;
-  // background: $darkPrimaryColor;
-  background-image: linear-gradient(to top, #48c6ef 0%, #1976D2 70%);
-  box-shadow:0 0 20rpx $divideText;
+  height: 200rpx;
+  position: relative;
+  background: linear-gradient(to right, rgb(242, 153, 74), rgb(242, 201, 76));
+  color: white;
+  .header-container {
+    position: absolute;
+    bottom:12px;
+    left:12px;
+  }
+  .asset-and-debt {
+    font-size: 14px;
+    > text {
+      margin-right: 8px;
+    }
+  }
+  .eye-item-img {
+    font-size: 18px;
+    margin-left: 8px;
+  }
+  .netWorth {
+    margin-bottom:12px;
+    font-size: 16px;
+  }
   .assets {
     height:220rpx;
     display: flex;
@@ -82,28 +100,26 @@
   }
 
   .column {
-    height: 110rpx;
-    line-height: 110rpx;
+    height: 80rpx;
+    line-height: 80rpx;
     border-bottom:1px solid #efefef;
     &:last-child {
       .title, .money {
         border:none;
       }
     }
     .icon {
-      height: 110rpx;
+      height: 80rpx;
       display: flex;
       justify-content: center;
       flex-direction:column;
     }
     .title {
-      margin-left:60rpx;
-      margin-right:180rpx;
-      padding-left:16rpx;
-      font-size:34rpx;
+      margin-left:56rpx;
+      font-size:16px;
     }
     .money {
-      font-size:34rpx;
+      font-size:16px;
       text-align:right;
       color: $secondaryText;
     }
@@ -113,4 +129,8 @@
     width: 100% !important;
     background: white;
   }
+  .icon-small-size {
+    width:34rpx;
+    height:34rpx;
+  }
 }
diff --git a/src/public/styles/iconfont.wxss b/src/public/styles/iconfont.wxss
diff --git a/src/public/styles/setting.scss b/src/public/styles/setting.scss
@@ -6,8 +6,9 @@ page {
 .header {
   position: relative;
   font-size:14px;
-  height:224px;
+  // height:224px;
   z-index: 88;
+  margin-bottom: 12px;
   &.no-login {
     filter:blur(2px);
   }
@@ -27,7 +28,7 @@ page {
   .main-container {
     background:white;
     padding:0 8px;
-    margin: -145px 12px 12px 12px;
+    // margin: -145px 12px 12px 12px;
     border-radius:4px;
     position:relative;
     z-index:99;

diff --git a/src/public/styles/super_statement.scss b/src/public/styles/super_statement.scss
@@ -1,6 +1,7 @@
 @import './_variable.scss';
 .header {
-  background: $darkPrimaryColor;
+  // background: $darkPrimaryColor;
+  background: linear-gradient(to right, rgb(242, 153, 74), rgb(242, 201, 76));
   height: 75px;
   color: white;
   padding: 0 14px;