调整 pc 的背景

src/assets/styles/rem.js

@@ -7,7 +7,7 @@
 			console.log("11111",clientWidth)
 			if (!clientWidth) return;
 			if (clientWidth >= 640) {
-				docEl.style.fontSize = 16 * 4 + 'px';
+				docEl.style.fontSize = 75 + 'px';
 			} else {
 				docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
 				// console.log("00001111")

src/views/thinkiumBridge/pcIndex.vue

@@ -28,9 +28,9 @@ import thinkiumBridge from './thinkiumBridge.vue'
      display: flex;
      justify-content: center;
      align-items: center;
-     background: rgba(0,0,0,0.4);
+    //  background: rgba(0,0,0,0.4);
      .container {
-       width: 7.5rem;
+       
        margin:  0 auto;
      }
      

src/views/thinkiumBridge/thinkiumBridge.vue

 <template>
     <div class="container">
-        <div class="banner-top">
-            <img src="@/assets/images/bg.png" alt="">
-        </div>
+        <div class="banner-top" />
+        <div class="main">
             <div class="cannect-wallet" v-if="walletConnected">{{$hideMoreText(currentWalletAddress, 7, 0)}}</div>
             <div class="cannect-wallet pointer" v-else @click="toCannectWallet">{{$t('connectWallet')}}</div>
             <div class="redemption-wrap">
@@ -39,6 +38,7 @@
                 <div class="handling-fee">{{$t('handlingFee')}}<span>0.3%</span></div>
             </div>
             <div class="convert-btn pointer" @click="transfer">{{$t('transfer')}}</div>
+        </div>
         <EDialog :title="$t('chooseToken')" :visible="dialogVisible" @close="dialogVisible = false" v-if="dialogVisible">
             <ul class="select-list">
                 <li class="select-item" v-for="(item, index) in tokenList" :key="index" @click="changeSelect(index,item)" :class="selectIndex === index ? 'active' : ''">
@@ -51,6 +51,7 @@
             </ul>
         </EDialog>
         <van-loading class="loading-bg" type="spinner" color="#303030" size="24px" v-show="pageLoading" />
+    
     </div>
 </template>
 
@@ -189,7 +190,7 @@ export default {
             }
         },
         networkAlert() {
-            if(!this.holdItem.coinData.chainId || !this.exchangeItem.coinData.chainId){
+            if (!this.holdItem.coinData.chainId || !this.exchangeItem.coinData.chainId) {
                 return;
             }
             let fromChainName = this.formateChainName(this.holdItem.coinData.chainId);
@@ -280,27 +281,27 @@ export default {
             let holdName = this.holdItem.coinData.name
             let isTKM = holdName == 'TKM' || holdName == 'BTKM' || holdName == 'TKM3' || holdName == 'BTKM3'
             let minNum = 0
-            if (isTKM && value < 1000) {
-                minNum = 1000
-                this.$dialog.alert({
-                    title: this.$t('title'),
-                    message: this.$t('placeholder3', { minNum }),
-                    confirmButtonText: this.$t('confirm')
-                }).then(() => {
-                    // on close
-                });
-                return;
-            } else if (!isTKM && value < 200) {
-                minNum = 200
-                this.$dialog.alert({
-                    title: this.$t('title'),
-                    message: this.$t('placeholder3', { minNum }),
-                    confirmButtonText: this.$t('confirm')
-                }).then(() => {
-                    // on close
-                });
-                return;
-            }
+            // if (isTKM && value < 1000) {
+            //     minNum = 1000
+            //     this.$dialog.alert({
+            //         title: this.$t('title'),
+            //         message: this.$t('placeholder3', { minNum }),
+            //         confirmButtonText: this.$t('confirm')
+            //     }).then(() => {
+            //         // on close
+            //     });
+            //     return;
+            // } else if (!isTKM && value < 200) {
+            //     minNum = 200
+            //     this.$dialog.alert({
+            //         title: this.$t('title'),
+            //         message: this.$t('placeholder3', { minNum }),
+            //         confirmButtonText: this.$t('confirm')
+            //     }).then(() => {
+            //         // on close
+            //     });
+            //     return;
+            // }
             this.pageLoading = true;
             try {
                 if (holdItem.coinData.type == 'main') {
@@ -397,19 +398,7 @@ export default {
 
 <style scoped lang="scss">
 .container {
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
     background: #FFF;
-    .banner-top {
-        height: 3.0rem;
-        img {
-            width: 7.5rem;
-            height: 3.0rem;
-        }
-    }
     .cannect-wallet {
         margin: 0.47rem 0 0.18rem auto;
         width: 2.00rem;
@@ -520,8 +509,10 @@ export default {
         }
     }
     .convert-btn {
-        margin-left: 0.75rem;
+        transform: translate(-50%);
+        margin-left: 50%;
         margin-top: 2.3rem;
+        margin-bottom: 2rem;
         width: 6rem;
         height: 0.8rem;
         background-color: #FCBF19;
@@ -577,5 +568,45 @@ export default {
         color: red;
         font-size: .36rem;
     }
+    /deep/{
+        .loading-bg.van-loading{
+          top: 0;
+          left: 0;
+        }
+    }
+}
+
+@media screen and ( max-width: 640px) {
+    .container {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        .banner-top {
+            height: 3.0rem;
+            background: url('../../assets/images/bg.png') center no-repeat;
+            background-size: cover;
+        }
+    }
+}
+
+@media screen and ( min-width: 640px) {
+    .container {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .banner-top {
+            height: 24.3vw;
+            background: url('../../assets/images/bgPc.png') center no-repeat;
+            background-size: cover;
+        }
+        .main {
+            width: 10rem;
+            margin: 0 auto;
+            padding-bottom: 1rem;
+        }
+    } 
+    
 }
 </style>