手机样式修改

src/views/homePage.vue

@@ -997,6 +997,7 @@ const showCount = async () => {
       }),
     ]);
     changeLevelList.value = res.data;
+
     activeLevel.value = changeLevelList.value[0];
 
     changeRule.value.token = res.data[0].ratio;
@@ -1455,7 +1456,7 @@ onUnmounted(() => {
     </el-container>
     <!-- 弹窗 -->
     <!-- 新增弹窗组件 -->
-    <el-dialog v-model="dialogVisible" :width="isMobile ? '80%' : '48%'">
+    <el-dialog v-if="!isMobile" v-model="dialogVisible" width="48%">
       <!-- 中间内容部分 -->
       <div class="changeMsg">
         <div class="changeInfo">
@@ -1511,6 +1512,64 @@ onUnmounted(() => {
       <div class="changeBtn" @click="changeToken">立即兑换</div>
     </el-dialog>
 
+    <el-dialog v-else v-model="dialogVisible" width="80%">
+      <!-- 中间内容部分 -->
+      <div class="changeMsg">
+        <div class="changeInfo">
+          <div class="changeImg">
+            <img
+              :src="userInfo.img"
+              alt="头像"
+              class="changeImgClass"
+              @error="handleImageError"
+            />
+          </div>
+          <div class="changeContent">
+            <div class="changeJwcode">精网号：{{ userInfo.jwcode }}</div>
+          </div>
+        </div>
+      </div>
+      <div class="changeLevel">
+        <div class="changeLevelTitle">
+          兑换Token
+          <div class="changeRule">
+            (兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token)
+          </div>
+        </div>
+
+        <div class="changeLevelContent">
+          <div
+            class="changeLevelItems"
+            v-for="item in changeLevelList"
+            :key="item"
+            :class="{
+              changeLevelItemsActive: item.position == activeLevel.position,
+            }"
+            @click="chooseLevel(item)"
+          >
+            <div class="changeLevelItem">
+              <div class="changeLevelItemToken">
+                <img
+                  src="https://d31zlh4on95l9h.cloudfront.net/images/403ef762dd2f335df3b0c9e3fe488375.png"
+                  alt="token"
+                  class="changeLevelItemTokenImg"
+                />
+                {{ item.calculatedPosition }}
+              </div>
+              <div class="changeLevelItemToken">{{ item.position }} 金币</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="changeNow">
+        应付金额
+        <div class="changePay">{{ activeLevel.position }}</div>
+
+        (金币余额：{{ gold }})
+      </div>
+      <div class="changeBtn" @click="changeToken">立即兑换</div>
+    </el-dialog>
+
     <el-dialog
       v-model="rechargeDialogVisible"
       :width="isMobile ? '60%' : '30%'"
@@ -2398,6 +2457,30 @@ body {
     height: 30px;
   } */
 
+  .changeLevel {
+    flex-direction: horizontal;
+  }
+
+  .changeLevelContent {
+    display: flex;
+    /* justify-content: center; */
+  }
+
+  .changeLevelItems {
+    flex: 0 0 calc(33% - 20px);
+    /* margin-right: auto; */
+  }
+
+  .changeLevelTitle {
+    align-items: center;
+    display: flex;
+  }
+  .changeRule {
+    margin-left: 10px;
+    width: 0%;
+    background-color: white;
+  }
+
   .changeMsg {
     gap: 10px 20px;
     margin-bottom: 10px;
@@ -2426,6 +2509,14 @@ body {
     height: 20px;
   }
 
+  .changeInfo {
+    margin: 0px auto;
+  }
+
+  .changeBtn {
+    margin: 0px auto;
+  }
+
   .rechargeDialogTitle {
     font-size: 1.3rem;
   }