金币兑换Token页面样式

src/views/homePage.vue

@@ -718,22 +718,27 @@ const backToHome = () => {
 const userInfo = ref({
   username: "HomilyLink",
   jwcode: "90042088",
+  img: "	https://d31zlh4on95l9h.cloudfront.net/images/403ef762dd2f335df3b0c9e3fe488375.png",
 });
 const changeRule = ref("1金币=1Token");
 const changeLevelList = ref([
-  { gold: 10, token: 10 },
-  { gold: 20, token: 20 },
-  { gold: 50, token: 50 },
-  { gold: 100, token: 100 },
-  { gold: 200, token: 200 },
-  { gold: 500, token: 500 },
-  { gold: 1000, token: 1000 },
+  { position: 10, calculatedPosition: 10 },
+  { position: 20, calculatedPosition: 20 },
+  { position: 50, calculatedPosition: 50 },
+  { position: 100, calculatedPosition: 100 },
+  { position: 200, calculatedPosition: 200 },
+  { position: 500, calculatedPosition: 500 },
+  { position: 1000, calculatedPosition: 1000 },
 ]);
+const activeLevel = ref(
+  changeLevelList.value[0] || { position: 10, calculatedPosition: 10 }
+);
 
-const shouldPay=ref(0);
-const gold=ref(0);
-
-
+const chooseLevel = (item) => {
+  activeLevel.value = item;
+};
+const shouldPay = ref(0);
+const gold = ref(0);
 
 // 8.18金币兑换Token end
 
@@ -1033,15 +1038,12 @@ onUnmounted(() => {
     </el-container>
     <!-- 弹窗 -->
     <!-- 新增弹窗组件 -->
-    <el-dialog v-model="dialogVisible" max-width="65%">
+    <el-dialog v-model="dialogVisible" :width="isMobile ? '80%' : '60%'">
       <!-- 中间内容部分 -->
       <div class="changeMsg">
         <div class="changeInfo">
           <div class="changeImg">
-            <img
-              src="https://d31zlh4on95l9h.cloudfront.net/images/74e20c65c9ef2526477c63ad68698a50.png"
-              alt="头像"
-            />
+            <img :src="userInfo.img" alt="头像" class="changeImgClass" />
           </div>
           <div class="changeContent">
             <div class="changeUsername">{{ userInfo.username }}</div>
@@ -1049,17 +1051,37 @@ onUnmounted(() => {
           </div>
         </div>
         <div class="changeRule">兑换规则：{{ changeRule }}</div>
-
       </div>
       <div class="changeLevel">
         <div class="changeLevelTitle">兑换Token</div>
-        <div class="changeLevelItems"></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">{{ shouldPay }}</div>
         (金币余额：{{ gold }})
-
       </div>
       <div class="changeBtn">立即兑换</div>
     </el-dialog>
@@ -1640,6 +1662,8 @@ body {
   display: flex;
   width: 100%;
   margin-bottom: 30px;
+  flex-wrap: wrap;
+  gap: 20px;
 }
 
 .changeInfo {
@@ -1648,7 +1672,6 @@ body {
   border-radius: 5px;
   padding: 10px 20px;
   /* width: 40%; */
-  margin-right: 5%;
   white-space: nowrap;
 }
 
@@ -1657,11 +1680,16 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+  margin-right: 10px;
+}
+
+.changeImgClass {
 }
 
 .changeContent {
   display: flex;
   flex-direction: column;
+  justify-content: center;
   font-weight: bold;
 }
 
@@ -1674,8 +1702,8 @@ body {
   justify-content: center;
   color: #4e86fe;
   white-space: nowrap;
-  padding: 5px;
-  width: 40%;
+  padding: 5px 20px;
+  min-width: 40%;
 }
 
 .changeLevel {
@@ -1685,6 +1713,53 @@ body {
 
 .changeLevelTitle {
   font-weight: bold;
+  margin-bottom: 10px;
+}
+
+.changeLevelContent {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  margin-bottom: 10px;
+}
+
+.changeLevelItems {
+  display: flex;
+  background-color: #f8f8f8;
+  width: 20%;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  border-radius: 10px;
+  padding: 5px;
+  cursor: pointer;
+}
+
+.changeLevelItems:hover {
+  background-color: #ecf2ff;
+}
+
+.changeLevelItemsActive {
+  border: 1px solid #4e86fe;
+  background-color: #ecf2ff;
+}
+
+.changeLevelItem {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.changeLevelItemToken {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.changeLevelItemTokenImg {
+  width: 40px;
+  height: 40px;
 }
 
 .changeNow {