修改充值页面和功能

src/components/assets/assetsHeader.vue

@@ -345,20 +345,23 @@
         </div>
         <p>Diamonds: In-game currency for purchasing items and entering the Lucky Draw.</p>
         <div class="content">
-          <div class="item" v-for="(item, index) in rechargeList" :key="index" @click="selectItem(item, index)">
+          <div class="item">
-            <div class="activity" v-if="activeIndex == index">
-              <img src="@/assets/img/marketplace/selected.png" alt="">
-            </div>
             <div class="item-img">
-              <img :src="rechargeImgList[item.goods_id].img" alt="">
+              <img :src="rechargeImgList[1006].img" alt="">
             </div>
-            <div v-if="index != 5" class="item-amount">×{{ item.diamond }}</div>
+            <div class="item-amount">
-            <div v-else class="item-amount item-amount-input">
+              <img src="@/assets/img/marketplace/icon_diamond.png" alt="">
+              <span>499950</span>
+            </div>
+            <div class="item-amount-input">
+              <div class="left">
                 <span @click="rechargeDecrease">-</span>
                 <!-- <span>0</span> -->
                 <input type="text" placeholder="0" v-model="brickworkAmount" @input="handleInput" oninput="value=value.replace(/[^\d]/g,'')">
                 <span @click="rechargeIncrease">+</span>
               </div>
+              <div class="right"><span>Unit</span></div>
+            </div>
           </div>
         </div>
         <div class="conform-btn" @click="conformBtn">
@@ -585,21 +588,6 @@ const getRechargeGoods = async () => {
   }
 }
 
-// selectItem 预选充值数量
-const selectItem = (data, index) => {
-  activeIndex.value = index
-  if(data.goods_id == 1006) {
-    confirmRecharge.value = {
-      currency: data.currency,
-      diamond: brickworkAmount.value,
-      goods_id: data.goods_id,
-      price: priceAmount.value
-    }
-  } else {
-    confirmRecharge.value = data
-  }
-}
-
 const handleInput = (e) => {
   // console.log(brickworkAmount.value, e)
   if(Number(brickworkAmount.value) >9999) {
@@ -630,11 +618,11 @@ const rechargeIncrease = async () => {
     toRaw(confirmRecharge.value).price = priceAmount.value
     toRaw(confirmRecharge.value).diamond = brickworkAmount.value
   }
-  console.log(brickworkAmount.value)
 }
 
 // 充值
 const conformBtn = async () => {
+  return
   // if(localWalletStore.walletType == 3) {
     let address = localWalletStore.address
     if(toRaw(confirmRecharge.value).price == 0) {
@@ -1888,8 +1876,8 @@ onMounted(() => {
     // z-index: 10;
   }
   :deep(.rechargeListModal) {
-    width: 1219px !important;
+    width: 975px !important;
-    height: 895px;
+    height: 716px;
     background: #1A1821;
     box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
     border-radius: 100px;
@@ -1937,29 +1925,18 @@ onMounted(() => {
           clear: both;
           margin-top: 7px;
           .item {
-            width: 332px;
+            width: 594px;
-            height: 258px;
+            height: 441px;
             border-radius: 40px;
             background: #2d2738;
             margin-top: 31px;
             cursor: pointer;
-            position: relative;
-            .activity {
-              position: absolute;
-              top: 0;
-              left: 0;
-              width: 77px;
-              height: 74px;
-              img {
-                width: 100%;
-                height: 100%;
-              }
-            }
             .item-img {
-              width: 312px;
+              width: 468px;
-              height: 206px;
+              height: 244px;
               margin: 0 auto;
-              padding: 5px;
+              // padding: 5px;
+              margin-top: 30px;
               img {
                 width: 100%;
                 height: 100%;
@@ -1970,14 +1947,42 @@ onMounted(() => {
               font-weight: bold;
               font-size: 36px;
               line-height: 1;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              width: 376px;
+              height: 65px;
+              background: #282333;
+              border: 3px solid #1e1b26;
+              border-radius: 30px;
+              margin: 10px auto;
+              img {
+                width: 40px;
+                height: 40px;
+              }
+              span {
+                display: inline-block;
+                width: 180px;
+              }
             }
             .item-amount-input {
-              width: 222px;
+              height: 65px;
-              height: 42px;
               display: flex;
               align-items: center;
               justify-content: space-evenly;
+              font-family: 'Poppins';
+              font-weight: bold;
+              font-size: 36px;
+              
               margin: 0 auto;
+              position: relative;
+              .left {
+                width: 376px;
+                height: 65px;
+                line-height: 65px;
+                display: flex;
+                align-items: center;
+                justify-content: space-evenly;
                 background: #1E1B26;
                 border-radius: 21px;
                 input {
@@ -1988,6 +1993,12 @@ onMounted(() => {
                   text-align: center;
                 }
               }
+              .right {
+                position: absolute;
+                right: 20px;
+              }
+              
+            }
           }
         }
         .conform-btn {
@@ -2000,7 +2011,7 @@ onMounted(() => {
           box-shadow: 0px 15px 28px 3px rgba(22,22,22,0.13);
           border-radius: 30px;
           margin: 0 auto;
-          margin-top: 56px;
+          margin-top: 10px;
           font-family: 'Poppins';
           font-weight: bold;
           font-size: 36px;