贷款-会员中心样式

htmldev/loan/src/views/loan/apply/components/flow.vue

@@ -45,7 +45,7 @@
 
     img {
       display: block;
-      width: 311px;
+      width: 185px;
       height: 59px;
     }
   }

htmldev/loan/src/views/loan/mine/index.vue

@@ -6,14 +6,9 @@
       </div>
       <p class="name">{{ userInfo.userName }}</p>
       <div class="card">
-        <div class="left">
-          <p class="logo">
-            <img src="./image/VIP@2x.png" alt="">
-            <span>驼驼会员VIP1</span>
-          </p>
-          <p class="expire">{{ userInfo.expireTime }}到期</p>
-        </div>
-        <p class="right" @click="funCheckMyBenefits">我的会员权益</p>
+        <p class="level">1</p>
+        <p class="expire">{{ userInfo.expireTime }} 到期</p>
+        <p class="right" @click="funCheckMyBenefits">我的会员权益></p>
       </div>
     </div>
     <div class="menu-wrap">
@@ -34,11 +29,14 @@
       <a class="link-item" href="javascript:;">
         <span class="label-wrap">
           <img class="icon-left" src="./image/kefu@2x.png" alt="">
-          <i class="label">私人客服</i>
+          <i class="label">我的专属客服</i>
         </span>
         <span class="value-wrap">
           <span class="box">
-            <a class="value" href="javascript:;">{{ userInfo.privateName }} {{ userInfo.privatePhone }}</a>
+            <a class="value" href="javascript:;">张华华{{ userInfo.privateName }}</a>
+            <a :href="'tel:' + userInfo.privatePhone">
+              <img class="icon-phone" src="./image/btn_phone@2x.png" alt="">
+            </a>
           </span>
         </span>
       </a>
@@ -141,54 +139,54 @@ export default {
   left: 50%;
   bottom: 0;
   z-index: 1;
-  display: flex;
-  justify-content: space-between;
-  width: 356px;
-  padding: 20px;
-  margin-left: -178px;
-  border-radius: 10px 10px 0 0;
-  background: #fff;
-
-  .right {
-    width: 130px;
-    height: 45px;
-    border-radius: 4px;
-    line-height: 45px;
-    font-size: 14px;
-    font-weight: 500;
-    text-align: center;
-    white-space: nowrap;
-    color: #fff;
+  width: 344px;
+  height: 92px;
+  margin-left: -172px;
+  background: url("./image/min_card@2x.png") center top/100% 100% no-repeat;
+
+  .level {
+    position: absolute;
+    left: 158px;
+    top: 20px;
+    z-index: 1;
+    font-size: 20px;
+    font-weight: bolder;
+    color: #C9AD8D;
+    line-height: 27px;
+    text-shadow: 0 14px 9px #DBD0C2;
     background: linear-gradient(90deg, #E5C7A5 0%, #CFAA7F 100%);
-    box-shadow: 0 14px 9px -10px #DBD0C2;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
   }
-}
-
-.logo {
-  display: flex;
-  align-items: center;
 
-  img {
-    width: 20px;
-    height: 20px;
+  .expire {
+    position: absolute;
+    left: 14px;
+    bottom: 16px;
+    z-index: 1;
+    line-height: 22px;
+    font-size: 16px;
+    color: #fff;
   }
 
-  span {
-    line-height: 20px;
+  .right {
+    position: absolute;
+    right: 28px;
+    top: 33px;
+    z-index: 1;
+    width: 103px;
+    height: 32px;
+    border-radius: 4px;
+    border: 1px solid #C9AD8D;
+    line-height: 32px;
     font-size: 14px;
     font-weight: 500;
-    color: #333;
+    text-align: center;
+    white-space: nowrap;
+    color: #C9AD8D;
   }
 }
 
-.expire {
-  margin-top: 10px;
-  line-height: 17px;
-  font-size: 12px;
-  font-weight: 500;
-  color: #666;
-}
-
 .menu-wrap {
   display: flex;
   flex-direction: column;
@@ -245,5 +243,12 @@ export default {
     height: 22px;
     margin-left: 24px;
   }
+
+  .icon-phone {
+    display: block;
+    width: 40px;
+    height: 40px;
+    margin-left: 5px;
+  }
 }
 </style>

htmldev/loan/src/views/partner/goods/index.vue

@@ -76,8 +76,8 @@ export default {
       posterBg: require('./image/poster_loan.png'),
       codeParams: {
         link: '',
-        x: 104,
-        y: 1188,
+        x: 126,
+        y: 1174,
         width: 202,
         height: 202
       }