Merge branch 'dev' of http://git.izouma.com/xiongzhu/raex_front into dev

package.json

@@ -50,6 +50,7 @@
         "@vue/cli-plugin-vuex": "~4.5.0",
         "@vue/cli-service": "~4.5.0",
         "@vue/compiler-sfc": "^3.0.0",
+        "@vue/composition-api": "^1.6.1",
         "@vue/eslint-config-prettier": "^6.0.0",
         "babel-eslint": "^10.1.0",
         "eslint": "^6.7.2",

src/App.vue

@@ -84,6 +84,7 @@ export default {
 <style lang="less" scoped>
 .scroll-content {
     min-height: 100vh;
+    min-height: var(--app-height);
     box-sizing: border-box;
     // padding-top: 46px;
 }

src/components/PageBar.vue

@@ -29,7 +29,7 @@ export default {};
 
     .text2 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         margin-top: 4px;
         .prim {

src/components/Post.vue

@@ -379,7 +379,7 @@ export default {
     margin-top: 6px;
     span {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding: 0 10px;
         background: @bg3;
@@ -390,7 +390,7 @@ export default {
 
 .status {
     font-size: 14px;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
     padding-top: 11px;
 }
@@ -398,7 +398,7 @@ export default {
 .sold {
     background-color: #1c1e25;
     font-size: @font1;
-    color: #939599;
+    color: @text3;
     padding: 0 17px;
     border-radius: 13px;
     line-height: 24px;

src/components/asset/assetInfo.vue

@@ -228,7 +228,7 @@ export default {
     left: 0;
     width: 21.3vw;
     font-size: 10px;
-    color: #939599;
+    color: @text3;
     line-height: 17px;
     background-color: fade(#000, 80%);
     padding: 0 5px;
@@ -259,7 +259,7 @@ export default {
     background-color: #fff;
     font-size: 12px;
     font-weight: bold;
-    color: #939599;
+    color: @text3;
     position: absolute;
     top: 4px;
     left: 3px;

src/components/asset/showInfo.vue

@@ -163,7 +163,7 @@ export default {
 
     .text2 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 12px;
     }
 }
@@ -180,7 +180,7 @@ export default {
         }
         span {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 17px;
         }
     }

src/components/creator/CreatorSmall.vue

@@ -120,7 +120,7 @@ export default {
 
         .text2 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 17px;
             width: 100%;
             margin-top: 4px;

src/components/level/Level.vue

@@ -57,7 +57,7 @@ export default {
     mixins: [level],
     mounted() {
         this.$nextTick(() => {
-            document.body.appendChild(this.$refs.overLay);
+            // document.body.appendChild(this.$refs.overLay);
         });
     },
     methods: {

src/components/order/OrderInfo.vue

@@ -32,7 +32,7 @@
         </div>
         <!-- 
         <div class="btns">
-            <van-button color="#939599" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
+            <van-button color="@text3" @click.prevent="del" plain size="mini" round> 删除订单 </van-button>
         </div> -->
     </router-link>
 </template>

src/components/order/OrderOpen.vue

@@ -88,14 +88,14 @@ export default {
     .text {
         text-align: center;
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 17px;
         margin-top: 60px;
     }
 
     .text1 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 17px;
         position: absolute;
         left: 50%;

src/components/product/NewsInfo.vue

@@ -58,7 +58,7 @@ export default {
             white-space: nowrap;
         }
         .text2 {
-            color: #939599;
+            color: @text3;
             line-height: 17px;
             font-size: 12px;
             display: -webkit-box;

src/components/product/NewsLarge.vue

@@ -220,7 +220,7 @@ export default {
 .sold {
     background-color: @bg2;
     font-size: @font1;
-    color: #939599;
+    color: @text3;
     padding: 0 17px;
     border-radius: 13px;
     line-height: 24px;

src/components/product/Tasks.vue

@@ -122,7 +122,7 @@ export default {
 
 .title {
     font-size: 12px;
-    color: #939599;
+    color: @text3;
     line-height: 17px;
     padding: 10px 6px;
     text-align: center;
@@ -148,7 +148,7 @@ export default {
         .text1 {
             margin-top: 6px;
             font-size: 10px;
-            color: #939599;
+            color: @text3;
             line-height: 10px;
         }
 
@@ -181,7 +181,7 @@ export default {
 
 .tips {
     font-size: 12px;
-    color: #939599;
+    color: @text3;
     line-height: 17px;
     text-align: center;
     padding: 16px;

src/components/product/productInfo.vue

@@ -212,7 +212,7 @@ export default {
 .sold {
     background-color: @bg2;
     font-size: @font1;
-    color: #939599;
+    color: @text3;
     padding: 0 17px;
     border-radius: 13px;
     line-height: 24px;
@@ -247,7 +247,7 @@ export default {
     left: 0;
     right: 0;
     font-size: 12px;
-    color: #939599;
+    color: @text3;
     line-height: 22px;
     background-color: fade(#000, 80%);
     padding: 0 10px;

src/components/product/productLarge.vue

@@ -268,7 +268,7 @@ export default {
 .sold {
     background-color: @bg2;
     font-size: @font1;
-    color: #939599;
+    color: @text3;
     padding: 0 17px;
     border-radius: 13px;
     line-height: 24px;

src/main.js

@@ -28,6 +28,13 @@ import isSameOrBefore from 'dayjs/plugin/isSameOrBefore';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { Toast, Dialog } from 'vant';
 
+const appHeight = () => {
+    const doc = document.documentElement;
+    doc.style.setProperty('--app-height', `${window.innerHeight}px`);
+};
+window.addEventListener('resize', appHeight);
+appHeight();
+
 Toast.setDefaultOptions('loading', { duration: 0 });
 require('dayjs/locale/zh-cn');
 

src/styles/app.less

@@ -58,9 +58,10 @@ textarea {
 body {
     font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui,
         'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
-}
-body {
     -webkit-text-size-adjust: none;
+    font-size: 14px;
+    color: var(--van-text-color);
+    background-color: #272b2e;
 }
 html,
 body,
@@ -69,6 +70,7 @@ body,
     padding: 0;
     margin: 0;
     height: 100vh;
+    height: var(--app-height);
     overflow: hidden;
     -webkit-overflow-scrolling: touch;
     -webkit-font-smoothing: antialiased;
@@ -81,11 +83,6 @@ body,
     display: none;
     opacity: 0;
 }
-body {
-    font-size: 14px;
-    color: var(--van-text-color);
-}
-
 input:-webkit-autofill {
     box-shadow: 0 0 0px 1000px @bg inset;
     -webkit-text-fill-color: @text0;
@@ -228,6 +225,7 @@ input:-webkit-autofill {
     position: fixed;
     width: 100vw;
     height: 100vh;
+    height: var(--app-height);
     top: 0;
     left: 0;
     right: 0;

src/views/Creator.vue

@@ -113,6 +113,7 @@ export default {
     background-color: @bg3;
     padding-bottom: 100px;
     min-height: 100vh;
+    min-height: var(--app-height);
 }
 
 /deep/.van-tab {

src/views/Discover.vue

@@ -106,7 +106,7 @@
                 ></van-tab>
             </van-tabs>
             <van-list
-                style="padding-bottom: 100px;"
+                style="padding-bottom: 100px"
                 class="box-list"
                 v-model:loading="loading"
                 :finished="finished"

src/views/Givesubmit.vue

@@ -589,7 +589,7 @@ export default {
 
     &.not {
         span {
-            color: #939599;
+            color: @text3;
         }
     }
 }

src/views/Home.vue

@@ -493,7 +493,7 @@ export default {
     justify-content: center;
     .text1 {
         font-size: 16px;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         padding: 8px 40px 16px;
 

src/views/Mine.vue

@@ -37,7 +37,7 @@
                     />
                     <div class="text">
                         <div class="text1">
-                            <span class="van-ellipsis" style="max-width: 120px;">{{ userInfo.nickname }}</span>
+                            <span class="van-ellipsis" style="max-width: 120px">{{ userInfo.nickname }}</span>
                         </div>
                         <div class="text2">
                             <span> 用户ID:{{ userInfo.id }} </span>
@@ -108,7 +108,7 @@
 
                     <div class="text">
                         <div class="text1" @click="$router.push('/login')">点击登录</div>
-                        <div class="text2" style="padding-bottom: 16px;">立即登录获取精彩服务</div>
+                        <div class="text2" style="padding-bottom: 16px">立即登录获取精彩服务</div>
                     </div>
                 </div>
             </div>
@@ -673,7 +673,7 @@ export default {
                 }
                 span {
                     font-size: 12px;
-                    color: #939599;
+                    color: @text3;
                     line-height: 18px;
                     background: #373b3e;
                     border-radius: 2px;

src/views/Store.vue

@@ -514,6 +514,7 @@ export default {
 .discover {
     background-color: #0f0f0f;
     min-height: 100vh;
+    min-height: var(--app-height);
     box-sizing: border-box;
 }
 .grid-img {
@@ -596,7 +597,8 @@ export default {
 .goTop {
     position: fixed;
     right: 16px;
-    bottom: 30vh;
+    bottom: 70px;
+    bottom: calc(env(safe-area-inset-bottom) + 70px);
     width: 44px;
     height: 44px;
     display: block;

src/views/Submit.vue

@@ -731,7 +731,7 @@ export default {
 
     &.not {
         span {
-            color: #939599;
+            color: @text3;
         }
     }
 }

src/views/account/Login.vue

@@ -223,6 +223,7 @@ export default {
 }
 .loginHeight {
     min-height: calc(100vh - 46px);
+    min-height: calc(var(--app-height) - 46px);
 }
 /deep/input:-webkit-autofill {
     box-shadow: 0 0 0px 1000px #101010 inset;

src/views/account/Register.vue

@@ -231,6 +231,7 @@ export default {
 }
 .loginHeight {
     min-height: calc(100vh - 46px);
+    min-height: calc(var(--app-height) - 46px);
 }
 .tabs {
     display: flex;

src/views/activity/ChooseProduct.vue

@@ -68,7 +68,7 @@
         <div class="tips" v-if="showTips">当前可兑换藏品不足</div>
 
         <div class="action-btn">
-            <!-- <van-button round color="#939599" plain>取消</van-button> -->
+            <!-- <van-button round color="@text3" plain>取消</van-button> -->
             <van-button type="primary" round @click="goHome" v-if="empty || showTips">去购买</van-button>
             <van-button type="primary" @click="submit" v-else :disabled="!canNext" round>确认</van-button>
         </div>
@@ -216,7 +216,7 @@ export default {
 
     .sub {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         .flex();
         justify-content: space-between;
@@ -234,11 +234,11 @@ export default {
             display: inline-block;
             min-width: 60px;
             height: 20px;
-            background: #f5f7fa;
+            background: @bg3;
             border-radius: 10px;
             text-align: center;
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 17px;
             margin-top: 4px;
         }
@@ -277,7 +277,7 @@ export default {
 
             .text2 {
                 font-size: 12px;
-                color: #939599;
+                color: @text3;
                 line-height: 17px;
             }
         }
@@ -299,7 +299,7 @@ export default {
         flex-grow: 1;
         // &.van-button--disabled {
         //     background: #303133;
-        //     color: #939599;
+        //     color: @text3;
         //     opacity: 1;
         // }
     }

src/views/activity/Detail1.vue

@@ -130,7 +130,7 @@ export default {
 
     div {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding: 0 8px 0 6px;
 
@@ -139,7 +139,7 @@ export default {
             font-size: 12px;
             color: #000000;
             line-height: 22px;
-            background: #939599;
+            background: @text3;
         }
     }
 }
@@ -159,7 +159,7 @@ export default {
         width: 132px;
         &.van-button--disabled {
             background: #303133;
-            color: #939599;
+            color: @text3;
             opacity: 1;
         }
     }

src/views/activity/Submit.vue

@@ -491,7 +491,7 @@ export default {
 
         .text2 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 17px;
         }
     }
@@ -530,7 +530,7 @@ export default {
 
     &.not {
         span {
-            color: #939599;
+            color: @text3;
         }
     }
 }

src/views/asset/Consignment.vue

@@ -412,7 +412,7 @@ export default {
             .flex();
             justify-content: space-between;
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
 
             .val {

src/views/asset/Detail.vue

@@ -792,7 +792,7 @@ export default {
 .conName {
     font-size: @font2;
     font-weight: 400;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
     padding: 10px 0 16px 16px;
 }
@@ -1020,7 +1020,7 @@ export default {
     .name1 {
         width: 208px;
         padding: 10px;
-        background: #f5f7fa;
+        background: @bg3;
         border-radius: 4px;
         color: @text3;
         margin-bottom: 11px;
@@ -1050,7 +1050,7 @@ export default {
     .copy {
         width: 220px;
         height: 42px;
-        background: #f5f7fa;
+        background: @bg3;
         border-radius: 24px;
         margin-bottom: 16px;
         justify-content: center;
@@ -1091,7 +1091,7 @@ export default {
 .textName {
     font-size: @font2;
     font-weight: 400;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
     // padding-top: 10px;
     // padding: 10px 0 0 16px;
@@ -1168,7 +1168,7 @@ export default {
         .text5 {
             font-size: @font2;
             font-weight: 400;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             // padding-left: 10px;
         }
@@ -1347,7 +1347,7 @@ export default {
     }
 
     .no-btn {
-        color: #939599;
+        color: @text3;
         font-size: 12px;
     }
 }
@@ -1579,7 +1579,7 @@ export default {
 
 .status-text {
     font-size: @font4;
-    color: #939599;
+    color: @text3;
     line-height: 28px;
     text-align: center;
     padding: 14px 50px !important;

src/views/asset/Search.vue

@@ -185,6 +185,7 @@ export default {
 .discover {
     background-color: @bg3;
     min-height: 100vh;
+    min-height: var(--app-height);
     box-sizing: border-box;
 }
 

src/views/creator/Home.vue

@@ -202,7 +202,7 @@ export default {
         }
         span {
             font-size: 14px;
-            color: #939599;
+            color: @text3;
             line-height: 24px;
             margin-left: 10px;
         }
@@ -251,4 +251,18 @@ export default {
         background: @prim;
     }
 }
+
+/deep/.van-sticky--fixed {
+    background-color: #181818;
+
+    &:after {
+        content: '';
+        background-color: #181818;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: -4px;
+        height: 5px;
+    }
+}
 </style>

src/views/hall/Detail.vue

@@ -583,6 +583,7 @@ export default {
     overflow: auto;
     width: 100vw;
     height: 100vh;
+    height: var(--app-height);
 }
 .swiper-content {
     position: relative;
@@ -592,6 +593,7 @@ export default {
         flex-shrink: 0;
     }
     height: 100vh;
+    height: var(--app-height);
 }
 .user-bg {
     background-size: 100% 100%;
@@ -758,7 +760,7 @@ export default {
             }
 
             &.status1 {
-                color: #939599;
+                color: @text3;
             }
         }
     }
@@ -948,6 +950,7 @@ export default {
     }
     .img-bg {
         min-height: calc(100vh - 95vw);
+        min-height: calc(var(--app-height) - 95vh);
     }
     .user-bg-img {
         height: 100vw;
@@ -1039,6 +1042,7 @@ export default {
         bottom: 0;
         left: auto;
         height: 100vh;
+        height: var(--app-height);
         width: 40px;
         flex-direction: column;
         right: 5px;
@@ -1088,12 +1092,12 @@ export default {
 
     .text2 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 18px;
         padding-top: 6px;
         margin-top: 10px;
         text-indent: 24px;
-        background: #f5f7fa;
+        background: @bg3;
         border-radius: 4px;
         padding: 10px;
         margin: 10px 16px 0;

src/views/hall/Post.vue

@@ -250,7 +250,7 @@ export default {
             }
             .text2 {
                 font-size: 12px;
-                color: #939599;
+                color: @text3;
                 transform: scale(0.8);
                 width: 200px;
                 position: absolute;
@@ -274,7 +274,7 @@ export default {
         }
         .text1 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 12px;
             transform: scale(0.8);
         }
@@ -325,7 +325,7 @@ export default {
     margin-top: 6px;
     span {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding: 0 10px;
         background: @bg3;
@@ -336,7 +336,7 @@ export default {
 
 .status {
     font-size: 14px;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
     padding-top: 11px;
 }
@@ -344,7 +344,7 @@ export default {
 .sold {
     background-color: #1c1e25;
     font-size: @font1;
-    color: #939599;
+    color: @text3;
     padding: 0 17px;
     border-radius: 13px;
     line-height: 24px;

src/views/hall/ProductAdd.vue

@@ -48,7 +48,7 @@
         </van-list>
 
         <div class="btns">
-            <van-button color="#939599" @click="$router.back()" plain round>取消</van-button>
+            <van-button color="@text3" @click="$router.back()" plain round>取消</van-button>
             <van-button round type="primary" @click="sure">确认</van-button>
         </div>
     </div>
@@ -153,7 +153,7 @@ export default {
         }
         .text2 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
     }
@@ -162,7 +162,7 @@ export default {
         .flex();
         .text1 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
 

src/views/hall/ProductChoose.vue

@@ -34,7 +34,7 @@
         </van-list>
 
         <div class="btns">
-            <van-button color="#939599" @click="$router.back()" plain round>取消</van-button>
+            <van-button color="@text3" @click="$router.back()" plain round>取消</van-button>
         </div>
     </div>
 </template>
@@ -129,7 +129,7 @@ export default {
         }
         .text2 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
     }
@@ -138,7 +138,7 @@ export default {
         .flex();
         .text1 {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 22px;
         }
 

src/views/order/ActivityDetail.vue

@@ -66,7 +66,7 @@
             <div class="tips-item">
                 <div class="text1">订单编号</div>
                 <div class="text2">
-                    <van-button @click="copy" color="#939599" plain size="mini">复制</van-button>
+                    <van-button @click="copy" color="@text3" plain size="mini">复制</van-button>
                     <span>{{ info.id }}</span>
                 </div>
             </div>
@@ -364,7 +364,7 @@ export default {
 
     .text2 {
         font-size: 13px;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
         .flex();
         img {

src/views/order/ActivityOrders.vue

@@ -166,6 +166,7 @@ export default {
 .discover {
     background-color: @bg3;
     min-height: 100vh;
+    min-height: var(--app-height);
 }
 
 .list {

src/views/order/Detail.vue

@@ -59,7 +59,7 @@
             <div class="tips-item">
                 <div class="text1">订单编号</div>
                 <div class="text2">
-                    <van-button @click="copy" color="#939599" plain size="mini">复制</van-button>
+                    <van-button @click="copy" color="@text3" plain size="mini">复制</van-button>
                     <span>{{ info.id }}</span>
                 </div>
             </div>

src/views/order/Orders.vue

@@ -152,6 +152,7 @@ export default {
 .discover {
     background-color: @bg3;
     min-height: 100vh;
+    min-height: var(--app-height);
 }
 
 .list {

src/views/product/Detail.vue

@@ -934,7 +934,7 @@ export default {
 .conName {
     font-size: @font2;
     font-weight: 400;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
     // padding: 10px 0 0 16px;
 }
@@ -947,7 +947,7 @@ export default {
     span {
         font-size: @font2;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 24px;
     }
 }
@@ -1100,7 +1100,7 @@ export default {
 .textName {
     font-size: @font2;
     font-weight: 400;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
     // padding-top: 10px;
 }
@@ -1196,7 +1196,7 @@ export default {
             border-width: 0px;
         }
         .no-btn {
-            color: #939599;
+            color: @text3;
             background-color: #303133;
             border-width: 0;
 
@@ -1257,7 +1257,7 @@ export default {
 
 .status-text {
     font-size: @font4;
-    color: #939599;
+    color: @text3;
     line-height: 28px;
     text-align: center;
     padding: 14px 50px !important;

src/views/product/HopeMarket.vue

@@ -419,6 +419,7 @@ export default {
     padding: 8px;
     box-sizing: border-box;
     min-height: calc(100vh - 200px);
+    min-height: calc(var(--app-height) - 200px);
 }
 .top {
     background-color: #222426;
@@ -597,6 +598,7 @@ export default {
     position: absolute;
     width: 100vw;
     height: 100vh;
+    height: var(--app-height);
     background-color: transparent;
     top: 0;
     left: 0;

src/views/product/List.vue

@@ -264,6 +264,7 @@ export default {
     padding: 8px;
     box-sizing: border-box;
     min-height: calc(100vh - 200px);
+    height: calc(var(--app-height) - 200px);
 }
 .top {
     background-color: @bg;

src/views/product/NewsDetail.vue

@@ -137,7 +137,7 @@ export default {
     /deep/.van-button {
         &.van-button--disabled {
             background: #303133;
-            color: #939599;
+            color: @text3;
             opacity: 1;
         }
     }
@@ -158,7 +158,7 @@ export default {
     }
     span {
         font-size: 14px;
-        color: #939599;
+        color: @text3;
         margin-left: 3px;
         line-height: 32px;
     }

src/views/product/Tasks.vue

@@ -1,6 +1,7 @@
 <template>
     <div class="tasks" :class="{ isMine: isMine }">
-        <van-image class="bg" width="100%" :src="registerBg" fit="scale-down" />
+        <!-- <van-image class="bg" width="100%" :src="registerBg" fit="scale-down" /> -->
+        <img class="bg" :src="registerBg" alt="" />
         <div class="box" v-if="!isMine">
             <div class="title">帮好友助力获得白名单权限</div>
             <van-form ref="form">
@@ -184,6 +185,13 @@ export default {
         }
     },
     mounted() {
+        if (this.$route.query.invitor) {
+            this.$store.commit('setInvitor', this.$route.query.invitor);
+
+            if (this.$route.query.id) {
+                this.$store.commit('setProductId', this.$route.query.id);
+            }
+        }
         if (this.productId) {
             this.form.collectionId = this.productId;
             this.$http.get('/collection/get/' + this.productId).then(res => {
@@ -313,6 +321,9 @@ export default {
 .bg {
     display: block;
     min-height: 100vh;
+    min-height: var(--app-height);
+    width: 100%;
+    height: auto;
 }
 .box {
     width: calc(100vw - 40px);
@@ -340,7 +351,7 @@ export default {
 
             .th {
                 font-size: 12px;
-                color: #939599;
+                color: @text3;
                 line-height: 17px;
                 &:first-child {
                     width: 20%;
@@ -365,7 +376,7 @@ export default {
                     font-size: 16px;
                     font-family: AlibabaPuHuiTi-Bold, AlibabaPuHuiTi;
                     font-weight: bold;
-                    color: #939599;
+                    color: @text3;
                     line-height: 38px;
                 }
                 &:first-child {
@@ -399,7 +410,7 @@ export default {
             .not {
                 text-align: center;
                 font-size: 12px;
-                color: #939599;
+                color: @text3;
                 flex-grow: 1;
                 padding: 20px;
             }
@@ -420,7 +431,7 @@ export default {
     padding: 0 20px;
 
     .van-field__control {
-        background: #f5f7fa;
+        background: @bg3;
         border-radius: 22px;
         height: 38px;
         padding: 0 10px 0 20px;
@@ -598,7 +609,7 @@ export default {
             }
             .text2 {
                 font-size: 10px;
-                color: #939599;
+                color: @text3;
                 line-height: 10px;
                 margin-top: 2px;
             }
@@ -610,7 +621,7 @@ export default {
             line-height: 17px;
 
             &.not {
-                color: #939599;
+                color: @text3;
             }
         }
 

src/views/user/AddressEdit.vue

@@ -15,7 +15,7 @@
         />
 
         <div class="back-list" v-if="!isEdit">
-            <van-button color="#939599" @click="$router.go(-1)" round block plain>返回</van-button>
+            <van-button color="@text3" @click="$router.go(-1)" round block plain>返回</van-button>
         </div>
     </div>
 </template>

src/views/user/Banks.vue

@@ -9,7 +9,7 @@
 
         <div class="list">
             <van-swipe-cell :name="index" v-for="(item, index) in list" :key="index" :before-close="beforeClose">
-                <div class="bank-info">
+                <div class="bank-info" :style="{ background: getColor(item.bankNo) }">
                     <div class="info1">
                         <div class="text1">{{ item.bankName }}</div>
                         <div class="text2">{{ getNum(item.bankNo) }}</div>
@@ -34,6 +34,7 @@
 export default {
     data() {
         return {
+            colorList: ['#6b73a1', '#ea4f56', '#36a0b9', '#f79439'],
             list: []
         };
     },
@@ -41,6 +42,25 @@ export default {
         this.getBank();
     },
     methods: {
+        getColor(bank) {
+            const cyrb53 = function (str, seed = 0) {
+                let h1 = 0xdeadbeef ^ seed,
+                    h2 = 0x41c6ce57 ^ seed;
+                for (let i = 0, ch; i < str.length; i++) {
+                    ch = str.charCodeAt(i);
+                    h1 = Math.imul(h1 ^ ch, 2654435761);
+                    h2 = Math.imul(h2 ^ ch, 1597334677);
+                }
+                h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
+                h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
+                return 4294967296 * (2097151 & h2) + (h1 >>> 0);
+            };
+            if (bank) {
+                console.log(cyrb53(bank));
+                return this.colorList[cyrb53(bank) % 4];
+            }
+            return this.colorList[0];
+        },
         getBank() {
             this.$http.get('/user/myBankCard').then(res => {
                 this.list = res;
@@ -150,13 +170,6 @@ export default {
 .bank-info {
     color: #fff;
     border-radius: 8px;
-    each(@colorList,{
-        &:nth-child( 4n + @{index} ){
-            background:  linear-gradient(90deg, @value, lighten(@value , 10%) 100%);
-        }
-    
-    });
-
     height: 100px;
     .flex-col();
     // margin: 20px 16px;

src/views/user/BanksAdd.vue

@@ -141,7 +141,7 @@ export default {
         .van-field__body {
             line-height: 48px;
             border-radius: 8px;
-            border: 1px solid #939599;
+            border: 1px solid @text3;
             padding: 0 16px;
             margin-top: 6px;
 
@@ -177,7 +177,7 @@ export default {
         font-size: @font1;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding: 21px 20px;
         left: 0;
@@ -189,7 +189,7 @@ export default {
         font-size: @font1;
         font-family: PingFangSC-Regular, PingFang SC;
         font-weight: 400;
-        color: #939599;
+        color: @text3;
         line-height: 22px;
         padding: 21px 20px;
         right: 0;

src/views/user/Exchange.vue

@@ -188,7 +188,7 @@ export default {
 .tab-title {
     padding: 0 16px 12px;
     font-size: 14px;
-    color: #939599;
+    color: @text3;
     line-height: 24px;
 }
 .bg {
@@ -223,7 +223,7 @@ export default {
 
 .text3 {
     font-size: 12px;
-    color: #939599;
+    color: @text3;
     line-height: 17px;
     margin-top: 6px;
     span + span {

src/views/user/Level.vue

@@ -113,7 +113,7 @@ export default {
 
     .text2 {
         font-size: 12px;
-        color: #939599;
+        color: @text3;
         line-height: 17px;
     }
 }
@@ -127,7 +127,7 @@ export default {
 }
 .table-title {
     font-size: 12px;
-    color: #939599;
+    color: @text3;
     line-height: 17px;
     .flex();
     justify-content: center;
@@ -163,7 +163,7 @@ export default {
 
             &.td {
                 font-size: 12px;
-                color: #939599;
+                color: @text3;
                 line-height: 17px;
                 white-space: nowrap;
                 flex-shrink: 0;
@@ -174,7 +174,7 @@ export default {
         }
 
         &:nth-child(2n + 1) {
-            background: #f5f7fa;
+            background: @bg3;
         }
     }
 }

src/views/user/Rank.vue

@@ -80,6 +80,7 @@ export default {
     }
     padding: 48vw 10px 0;
     min-height: calc(100vh - 46px);
+    min-height: calc(var(--app-height) - 46px);
 
     .top-text {
         position: absolute;
@@ -128,7 +129,7 @@ export default {
         .flex();
         .th {
             font-size: 12px;
-            color: #939599;
+            color: @text3;
             line-height: 17px;
             padding: 15px 0;
 
@@ -192,7 +193,7 @@ export default {
             width: 38px;
             font-size: 20px;
             font-family: 'AlibabaPuHuiTi';
-            color: #939599;
+            color: @text3;
             font-weight: bold;
             line-height: 20px;
         }

src/views/user/Wallet.vue

@@ -1,192 +1,111 @@
 <template>
     <div class="wallet">
-        <div class="top">
-            <div class="text1">个人账户余额</div>
-            <div class="text2">
-                <img src="@assets/svgs/icon_jiage.svg" alt="" />
-                <span>0</span>
-            </div>
+        <div class="wallet-card">
+            <div class="label">账户余额（元）</div>
+            <div class="value">{{ userBalance.balance }}</div>
             <div class="btns">
-                <van-button @click="wait" plain round color="#939599" size="mini">提现</van-button>
-                <van-button @click="wait" plain round type="primary" size="mini">充值</van-button>
+                <div class="btn btn-card" @click="$router.push({ name: 'mineBanks' })">我的银行卡</div>
+                <div class="btn btn-record">充值记录</div>
             </div>
-            <img src="@assets/svgs/topBg.svg" class="top-img" alt="" />
-        </div>
-
-        <div class="title">
-            <span>收入明细</span>
-            <van-popover v-model:show="showPopover" :actions="actions" theme="dark" @select="onSelect">
-                <template #reference>
-                    <van-button
-                        class="select"
-                        size="mini"
-                        color="#1C1E25"
-                        icon-position="right"
-                        :icon="require('@assets/svgs/icon_shaixuan_sanjiao.svg')"
-                        >2021年9月</van-button
-                    >
-                </template>
-            </van-popover>
         </div>
-        <div class="list">
-            <!-- <div class="info">
-                <div class="info-text">
-                    <div class="text1">提现</div>
-                    <div class="text2">奶盖</div>
-                    <div class="text2">09-03 09:56</div>
-                </div>
-                <div class="text3">-320</div>
+        <div class="recharge-card">
+            <div class="title">选择金额</div>
+            <div class="amount">
+                <div class="item" v-for="item in amountOptions" :key="item">{{ item }}</div>
             </div>
-            <div class="info">
-                <div class="info-text">
-                    <div class="text1">提现</div>
-                    <div class="text2">奶盖</div>
-                    <div class="text2">09-03 09:56</div>
-                </div>
-                <div class="text3">-320</div>
-            </div> -->
-            <van-empty :image="require('@assets/kong_png_yongyoude  (1).png')" description="暂时没有任何记录哦~" />
         </div>
     </div>
 </template>
-
 <script>
-import { ref } from 'vue';
 export default {
-    setup() {
-        const showPopover = ref(false);
-
-        // 通过 actions 属性来定义菜单选项
-        const actions = [{ text: '2021年9月' }];
-
+    data() {
         return {
-            actions,
-            showPopover
+            userBalance: {
+                balance: 0
+            },
+            amountOptions: [100, 500, 1000, 2000, 5000, 10000]
         };
-    },
-    methods: {
-        onSelect(action) {
-            console.log(action);
-        }
     }
 };
 </script>
-
 <style lang="less" scoped>
-.top {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 50px 16px 53px;
-    background-color: @bg3;
-    position: relative;
-    .text1 {
-        font-size: 13px;
-        color: #939599;
-        line-height: 18px;
-    }
-    .text2 {
-        span {
+.wallet {
+    background: @bg3;
+    padding-top: 16px;
+    .wallet-card {
+        height: 138px;
+        margin: 0 16px;
+        background: #404569;
+        background-image: url(../../assets/bg_wallet.png);
+        background-size: 182px 94px;
+        background-repeat: no-repeat;
+        background-position-x: right;
+        background-position-y: top;
+        border-radius: 9px;
+        color: white;
+        position: relative;
+        overflow: hidden;
+        .flex-col();
+        .label {
+            font-size: 14px;
+            line-height: 24px;
+            margin: 16px 0 0 16px;
+        }
+        .value {
+            font-family: OSP-DIN, OSP;
             font-size: 36px;
-            font-family: DIN;
-            font-weight: bold;
-            color: #fdfb60;
-            line-height: 44px;
-            background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
-            background-clip: text;
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
+            line-height: 30px;
+            margin: 4px 0 0 16px;
+            flex-grow: 1;
         }
-    }
-
-    .btns {
-        margin-top: 20px;
-        .van-button {
-            width: 90px;
-
-            &.van-button--primary {
-                border: solid 0px transparent;
-                padding: 1px;
-                background-image: linear-gradient(@bg, @bg), linear-gradient(135deg, #fdfb60, #ff8f3e);
-                background-origin: border-box;
-                box-sizing: border-box;
-                background-clip: content-box, border-box;
+        .btns {
+            color: @text3;
+            font-size: 14px;
+            background: #292a52;
+            .flex();
+            .btn {
+                flex-basis: 0;
+                flex-grow: 1;
+                height: 44px;
+                .flex();
+                align-items: center;
+                justify-content: center;
+                transition: color 0.1s;
+                &:active {
+                    color: fade(@text3, 20%);
+                }
+            }
+            .btn-card {
+                position: relative;
+                &:after {
+                    content: '';
+                    width: 1px;
+                    height: 20px;
+                    background: @text3;
+                    border-radius: 1px;
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    right: 0;
+                    margin: auto;
+                }
             }
-        }
-
-        .van-button + .van-button {
-            margin-left: 32px;
         }
     }
-}
-
-.top-img {
-    display: block;
-    width: 100%;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-}
-
-.title {
-    padding: 20px 16px;
-    font-size: 16px;
-    font-weight: bold;
-    color: @text0;
-    line-height: 22px;
-    display: flex;
-    justify-content: space-between;
-}
-.select {
-    min-width: 100px;
-    height: 32px;
-    color: #939599 !important;
-
-    /deep/.van-icon__image {
-        width: 20px;
-        height: 20px;
-        display: block;
-    }
-}
-
-.info {
-    display: flex;
-    padding: 0 16px;
-    height: 90px;
-    align-items: center;
-    position: relative;
-    .info-text {
-        flex-grow: 1;
-        .text1 {
-            font-size: 14px;
-            color: @text0;
-            line-height: 20px;
-            margin-bottom: 4px;
+    .recharge-card {
+        margin: 16px 16px 0 16px;
+        padding-top: 16px;
+        .title {
+            font-size: 16px;
+            font-weight: bold;
         }
-
-        .text2 {
-            font-size: 12px;
-            color: #969799;
-            line-height: 17px;
-            margin-bottom: 2px;
+        .amount {
+            margin: 16px 16px 0 0;
+            .item {
+                background: #393d62;
+                flex: 1 1 150px;
+            }
         }
     }
-
-    .text3 {
-        font-size: 16px;
-        font-weight: bold;
-        color: @text0;
-        line-height: 24px;
-    }
-
-    &::before {
-        content: '';
-        position: absolute;
-        left: 16px;
-        right: 16px;
-        top: 0;
-        height: 1px;
-        background-color: #202122;
-    }
 }
 </style>

yarn.lock

@@ -1621,6 +1621,11 @@
   optionalDependencies:
     prettier "^1.18.2 || ^2.0.0"
 
+"@vue/composition-api@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.npmmirror.com/@vue/composition-api/-/composition-api-1.6.1.tgz#3b809802979af9ec06678437bead7617f0f85be5"
+  integrity sha512-QNeduwRllSRzo9ZOzZjtzCeGUx0sEfrEDHmQlf+goLw4calBPBbpYWf8ueh6VSBrWJGQRJPsRPmTVEeTKRKBMg==
+
 "@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.0.0-beta.18":
   version "6.0.11"
   resolved "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.0.11.tgz#f855e49fb4dc8b4f368488d300dde793f434dcbe"