fix: 修改样式

src/pages/bank/index.vue

@@ -9,15 +9,29 @@
 </route>
 
 <template>
-  <view class="bank-page min-h-screen pb-100">
+  <view class="bank-page min-h-screen pb-50">
     <NavBar title-color="#333" />
-    <view class="bank-card mx-auto mt-24 relative w-345 h-210">
+    <view class="bank-card mx-auto mt-24 relative w-300 h-182 rounded-15">
-      <view class="absolute text-19 top-120 left-40 text-white" style="font-family: FARRINGTON-7B">
+      <view class="absolute text-18 top-100 left-20 text-white" style="font-family: FARRINGTON-7B">
         {{ userStore.userInfo.banknum.replace(/(\d{4})(?=\d)/g, '$1 ') }}
       </view>
     </view>
     <view
-      class="rounded-full mx-auto mt-24 w-345 h-40 flex items-center justify-center text-15"
+      class="rounded-15 mx-auto mt-15 w-345 flex items-center justify-center text-12 px-30 py-20 text-#E5A200"
+      border="1px solid #FFDD99"
+      style="
+        background: linear-gradient(
+          90deg,
+          rgba(255, 221, 153, 0.2) 0%,
+          rgba(239, 184, 90, 0.2) 100%
+        );
+      "
+    >
+      云家银行专属卡是由全球各地银行联合发行的银行
+      完成卡。首批发行仅限五万张，云家人的资产将全部到账到此卡，一人一卡，此专属卡无任何限制，可在全球210个国家及地区进行使用！
+    </view>
+    <view
+      class="rounded-full mx-auto mt-15 w-345 h-45 flex items-center justify-center text-15"
       style="
         background: linear-gradient(
           90deg,
@@ -30,17 +44,34 @@
       卡内余额：{{ userStore.userInfo.money }}
     </view>
     <view
-      class="btn-gradient rounded-full text-white mx-auto mt-50 w-345 h-40 flex items-center justify-center text-15"
+      class="btn-gradient rounded-full text-white mx-auto mt-10 w-345 h-40 flex items-center justify-center text-15"
       @click="onWithdraw"
     >
       提现
     </view>
+
+    <view
+      class="flex bg-white py-15 rounded-10 mt-150 w-345 mx-auto border-2 border-#FFDD99 border-solid"
+    >
+      <view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
+        <image class="w-30 h-30" src="@/static/images/home/nav-2.png" mode="aspectFill" />
+        <text class="mt-8 text-14 text-#333">官方社群</text>
+      </view>
+      <view class="flex-1 flex flex-col items-center" @click="handleOfficialCommunity">
+        <image class="w-30 h-30" src="@/static/images/home/nav-3.png" mode="aspectFill" />
+        <text class="mt-8 text-14 text-#333">在线客服</text>
+      </view>
+      <view class="flex-1 flex flex-col items-center" @click="handleDownload">
+        <image class="w-30 h-30" src="@/static/images/home/nav-4.png" mode="aspectFill" />
+        <text class="mt-8 text-14 text-#333">下载APP</text>
+      </view>
+    </view>
   </view>
 </template>
 
 <script setup lang="ts">
 import NavBar from '@/components/NavBar.vue'
-import { getBankCardAPI } from '@/service'
+import { downloadAppAPI, getBankCardAPI } from '@/service'
 import { useUserStore } from '@/store'
 
 const userStore = useUserStore()
@@ -61,14 +92,26 @@ function onWithdraw() {
     url: '/pages-sub/withdrawal/index',
   })
 }
+
+const handleOfficialCommunity = () => {
+  uni.navigateTo({
+    url: '/pages-sub/official-community/index',
+  })
+}
+
+const handleDownload = () => {
+  downloadAppAPI()
+}
 </script>
 
 <style lang="scss" scoped>
 .bank-page {
-  background: linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
+  background:
+    url('@/static/images/home/bg.jpg') no-repeat top -40px center / cover,
+    linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
 }
 .bank-card {
-  background-image: url('@/static/images/bank/card.png');
+  background-image: url('@/static/images/bank/card.jpg');
   background-size: 100% 100%;
 }
 </style>

src/pages/invest/index.vue

@@ -8,7 +8,7 @@
 }
 </route>
 <template>
-  <view class="invest-page">
+  <view class="invest-page min-h-screen">
     <NavBar title-color="#333" />
     <view class="mt-320 pl-15 text-24 text-white" style="text-shadow: 0 0 2px #ff5153">
       银行卡恢复列表

src/pages/invite/index.vue

@@ -115,7 +115,7 @@ async function onGetReward(level) {
 <template>
   <view class="pb-100 min-h-screen invite-page">
     <NavBar />
-    <view class="flex items-center mt-290 mx-auto w-345 bg-#FFFFFFE5 p-15 rounded-20">
+    <view class="flex items-center mt-286 mx-auto w-345 bg-#FFFFFFE5 p-15 rounded-20">
       <view class="text-center">
         <view class="mt-15 rounded-10 overflow-hidden flex bg-#FFFFFF50 p-10 shadow">
           <VueQrcode

vite.config.ts

@@ -119,7 +119,7 @@ export default ({ command, mode }) => {
           viewport({
             mobileUnit: 'rem',
             appSelector: '#app',
-            // selectorBlackList: ['wd-'],
+            selectorBlackList: ['uni-'],
             viewportWidth: 375,
             maxDisplayWidth: 600,
             // rootContainingBlockSelectorList: ['wd-navbar__title'],