2

src/views/purchase/index.vue

@@ -49,8 +49,8 @@
       </div>
     </div>
     <div style="font-size: 20px;font-weight: bold;text-align: center;color: #000;padding-top: 1rem;">{{ $t("purchase.subscribe") }}</div>
-    <div class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm"
-       style="display: flex;justify-content: center;width: 35%;">
+    <div class="container panel my-4 px-4 pt-5 pb-5 rounded shadow-sm"
+       style="display: flex;justify-content: center;width: 625px;">
       <div class="col-12 d-flex flex-column justify-content-end align-items-start">
         <div class="input-group mb-3">
           <div class="input-group-prepend">
@@ -92,28 +92,38 @@
           </div>
         </div>
         <!-- v-if="activeCoin.usable_balance" -->
-        <p >
-          {{ $t("wallet.availableBalance") }}：{{ activeCoin.usable_balance }}
-        </p>
-        <p>
-          1 
-          <!-- {{ activeCoin.coin_name }}  -->
-          USDT
-          ≈
-          {{ 1 / detail.issue_price | omitTo(4)}}
-          <!-- {{ activeCoin.proportion_amount | omitTo(5) }} -->
-          {{ detail.coin_name }}
-        </p>
-        <p>
-          {{ num || 0 }} {{ activeCoin.coin_name }} ≈
-          {{(activeCoin.CurrentPrice/ detail.issue_price)*num | omitTo(4)}}
-          <!-- {{ total }} -->
-          {{ detail.coin_name }}
-        </p>
+        <div class="d-flex" style="width:100%;justify-content: space-between;align-items: center;margin-top: 10px;">
+          <div>
+            <p >
+              {{ $t("wallet.availableBalance") }}：{{ activeCoin.usable_balance }}
+            </p>
+            <p>
+              1 
+              <!-- {{ activeCoin.coin_name }}  -->
+              USDT
+              ≈
+              {{ 1 / detail.issue_price | omitTo(4)}}
+              <!-- {{ activeCoin.proportion_amount | omitTo(5) }} -->
+              {{ detail.coin_name }}
+            </p>
+            <p>
+              {{ num || 0 }} {{ activeCoin.coin_name }} ≈
+              {{(activeCoin.CurrentPrice/ detail.issue_price)*num | omitTo(4)}}
+              <!-- {{ total }} -->
+              {{ detail.coin_name }}
+            </p>
+          </div>
+          <div>
+            <img :src="detail.icon" alt="" style="width:70px;" />
+            <div style="text-align: center;font-size: 20px;font-weight: bold;margin-top: 10px;">RAT</div>
+          </div>
+        </div>
+        
         <button
           type="submit"
           class="btn rounded-pill bg-yellow-a"
           @click="ifSubscribeNow"
+          style="width:100%;height: 40px;margin-top: 30px;"
         >
           {{ $t("purchase.subscribeNow") }}
         </button>
@@ -178,7 +188,7 @@
                                 <tbody>
                                     <tr v-for="item in subscribeRecords" :key="item.id" v-if="seek(item)">
                                         <td>
-                                            <img src="../../assets/img/icon/1.png" alt="eth" />
+                                            <img :src='"../../assets/img/icon/"+item.payment_currency+".png"' alt="eth" />
                                             {{ item.subscription_currency_name }}
                                         </td>
                                         <td>{{ item.subscription_currency_amount }}</td>
@@ -320,7 +330,7 @@ export default {
         subscribeRecords:[],
         activityList:[{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""}],
         activestep:0,
-        issue_price:0.03,
+        issue_price:0.035,
         timer:''
     };
   },
@@ -378,6 +388,7 @@ export default {
       });
     },
     getInfo() {
+      console.log(1111,'----------------------')
       Subscride.subscribe().then((res) => {
         this.detail = res;
       });
@@ -467,12 +478,15 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+.table{
+  color: #333;
+}
 .table tr:hover{
     background: #e9e9e9 !important;
 }
 /deep/ {
   .el-step__icon {
-    background: #222e3d;
+    // background: #222e3d;
   }
   .el-step__head.is-process {
     color: inherit;
@@ -485,6 +499,21 @@ export default {
   .el-step__description{
     margin-top: 0;
   }
+  .el-step__icon.is-icon{
+    width:24px;
+    border-radius: 50%;
+    border: 2px solid;
+  }
+  .el-step__head.is-finish{
+    color: #F7D558;
+    border-color: #F7D558;
+  }
+  .el-step__title.is-finish {
+    color: #e7c343;
+  }
+  .el-step__description.is-finish {
+    color: #e7c343;
+  }
 }
 .purchase-bg{
   background: url('../../assets/img/purchase-bg.jpg');