手机端适配

src/views/homePage.vue

@@ -899,8 +899,8 @@ const userInfo = ref({
   img: "	https://d31zlh4on95l9h.cloudfront.net/images/403ef762dd2f335df3b0c9e3fe488375.png",
 });
 const changeRule = ref({
-  gold:1,
-  token:1,
+  gold: 1,
+  token: 1,
 });
 const changeLevelList = ref([
   { position: 10, calculatedPosition: 10 },
@@ -928,7 +928,7 @@ const showCount = async () => {
     const res = await showExchangeAPI();
     changeLevelList.value = res.data;
     activeLevel.value = changeLevelList.value[0];
-    changeRule.value.token=res.data[0].ratio;
+    changeRule.value.token = res.data[0].ratio;
 
     // 显示弹窗
     dialogVisible.value = true;
@@ -1315,7 +1315,7 @@ onUnmounted(() => {
     </el-container>
     <!-- 弹窗 -->
     <!-- 新增弹窗组件 -->
-    <el-dialog v-model="dialogVisible" :width="isMobile ? '80%' : '60%'">
+    <el-dialog v-model="dialogVisible" :width="isMobile ? '80%' : '40%'">
       <!-- 中间内容部分 -->
       <div class="changeMsg">
         <div class="changeInfo">
@@ -1327,8 +1327,9 @@ onUnmounted(() => {
             <div class="changeJwcode">精网号：{{ userInfo.jwcode }}</div>
           </div>
         </div>
-        <div class="changeRule">兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token</div>
-
+        <div class="changeRule">
+          兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token
+        </div>
       </div>
       <div class="changeLevel">
         <div class="changeLevelTitle">兑换Token</div>
@@ -1367,7 +1368,7 @@ onUnmounted(() => {
 
     <el-dialog
       v-model="rechargeDialogVisible"
-      :width="isMobile ? '60%' : '40%'"
+      :width="isMobile ? '60%' : '30%'"
       :show-close="false"
     >
       <div class="rechargeDialogTitle">温馨提示</div>
@@ -1388,7 +1389,7 @@ onUnmounted(() => {
 
     <el-dialog
       v-model="confirmDialogVisible"
-      :width="isMobile ? '60%' : '40%'"
+      :width="isMobile ? '60%' : '30%'"
       :show-close="false"
     >
       <div class="confirmDialogTitle">兑换</div>
@@ -1407,7 +1408,7 @@ onUnmounted(() => {
 
     <el-dialog
       v-model="changeSuccessDialogVisible"
-      :width="isMobile ? '60%' : '40%'"
+      :width="isMobile ? '60%' : '30%'"
       :show-close="false"
       class="changeSuccessDialog"
     >
@@ -1980,22 +1981,6 @@ body {
   z-index: 6;
 }
 
-@media (max-width: 768px) {
-  .action-btn {
-    height: 21px;
-  }
-
-  .footer-second-line {
-    padding: 5px 10px 10px;
-  }
-
-  .msg-input {
-    /* min-height: 44px; */
-    /* height: 44px; */
-    font-size: 16px;
-  }
-}
-
 .changeMsg {
   display: flex;
   width: 100%;
@@ -2065,6 +2050,8 @@ body {
   display: flex;
   background-color: #f8f8f8;
   width: 20%;
+  min-width: 70px;
+  max-width: 150px;
   justify-content: center;
   align-items: center;
   flex-direction: column;
@@ -2115,6 +2102,7 @@ body {
 
 .changeBtn {
   width: 40%;
+  max-width: 350px;
   background-color: #4e86fe;
   color: white;
   display: flex;
@@ -2156,8 +2144,9 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
+  white-space: nowrap;
 }
 
 .recharge:hover {
@@ -2169,7 +2158,7 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
 }
 
@@ -2204,7 +2193,7 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
 }
 
@@ -2217,7 +2206,7 @@ body {
   padding: 10px 20px;
   border-radius: 13px;
   cursor: pointer;
-  width: 20%;
+  min-width: 20%;
   text-align: center;
 }
 
@@ -2241,6 +2230,87 @@ body {
   font-weight: bold;
   text-align: center;
 }
+
+@media (max-width: 768px) {
+  .action-btn {
+    height: 21px;
+  }
+
+  .footer-second-line {
+    padding: 5px 10px 10px;
+  }
+
+  .msg-input {
+    /* min-height: 44px; */
+    /* height: 44px; */
+    font-size: 16px;
+  }
+
+  /* .changeImg {
+    width: 30px;
+    height: 30px;
+  } */
+
+  .changeImgClass {
+    width: 30px;
+    height: 30px;
+  }
+
+  .changeContent {
+    font-size: 0.5rem;
+  }
+
+  .changeLevelItems {
+    font-size: 0.5rem;
+  }
+
+  .rechargeDialogTitle {
+    font-size: 1.3rem;
+  }
+  .rechargeDialogContent {
+    font-size: 1rem;
+  }
+
+  .rechargeDialogBtnGroup {
+    font-size: 1rem;
+  }
+
+  .recharge {
+    padding: 5px 10px;
+  }
+
+  .rechargeDialogCancel {
+    padding: 5px 10px;
+  }
+
+  .confirmDialogTitle {
+    font-size: 1.3rem;
+  }
+  .confirmDialogContent {
+    font-size: 1rem;
+  }
+
+  .confirmDialogBtnGroup {
+    font-size: 1rem;
+  }
+
+  .confirmDialogConfirm {
+    padding: 5px 10px;
+  }
+
+
+  .confirmDialogCancel {
+    padding: 5px 10px;
+  }
+
+  .changeSuccessDialogTitle {
+    font-size: 1.3rem;
+  }
+
+  .changeSuccessDialogContent {
+    font-size: 1rem;
+  }
+}
 </style>
 
 <style>