Jelajahi Sumber

fix(client): 解决我的钱包背景图片问题

yizhiyang 10 bulan lalu
induk
melakukan
07cb4d30cd
1 mengubah file dengan 26 tambahan dan 3 penghapusan
  1. 26 3
      src/PageMine/myWallet/index.vue

+ 26 - 3
src/PageMine/myWallet/index.vue

@@ -1,16 +1,24 @@
 <template>
   <view class="myWallet">
     <view class="wallet-bg">
-      <u--image src="/static/pageMine/wallet-bj.png" width="100%" height="550rpx"></u--image>
+      <u--image
+        src="/static/pageMine/wallet-bj.png"
+        width="100%"
+        height="550rpx"
+      ></u--image>
     </view>
     <page-navbar :hasBack="true" bgColor="transparent" title="我的钱包"></page-navbar>
 
     <view class="wallet-main">
-      <view class="wallet-card">
+      <view class="wallet-card" :style="'background-image: url(' + bgBase64 + ')'">
         <view class="fl-flex-item wallet-secure">
           <view class="fl-text-title">*烊的钱包</view>
           <view class="fl-flex">
-            <u--image src="/static/pageMine/secure.png" width="32rpx" height="32rpx"></u--image>
+            <u--image
+              src="/static/pageMine/secure.png"
+              width="32rpx"
+              height="32rpx"
+            ></u--image>
             <view class="f-s-24 text-33 u-m-l-4">安全保障中</view>
           </view>
         </view>
@@ -47,9 +55,21 @@
 
 <script>
 import WalletItem from './walletItem.vue';
+import { getBase64Image } from '@/utils/index.js';
 export default {
   name: 'myWallet',
   components: { WalletItem },
+  data() {
+    return {
+      bgBase64: '',
+    };
+  },
+  created() {
+    // 将背景图转为base64格式
+    getBase64Image('/static/pageMine/wallet-card-bj.png', data => {
+      this.bgBase64 = data;
+    });
+  },
 };
 </script>
 
@@ -74,6 +94,9 @@ export default {
       box-sizing: border-box;
       border-radius: 16rpx;
       position: relative;
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center;
       .wallet-secure {
         padding-bottom: 32rpx;
         border-bottom: 1px solid #eaebeb;