2

src/components/CommonHeader.vue

@@ -394,11 +394,11 @@ export default {
           label: "Turkey",
           url: require("../assets/img/tr.jpg"),
         },
-        {
+        // {
-            value: "cn", // zh-CN
+        //     value: "cn", // zh-CN
-            label: "简体中文",
+        //     label: "简体中文",
-            url: require("../assets/img/tw.jpg"),
+        //     url: require("../assets/img/tw.jpg"),
-        },
+        // },
         {
           value: "tw", // zh-TW
           label: "繁体中文",

src/views/purchase/index.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="subscride-page">
     <!-- 表单 -->
-    <div class="container panel my-4 p-5 rounded shadow-sm bg-panel-n">
+    <div class="container panel my-4 p-5 rounded purchase-bg">
-      <div class="row">
+      <div style="display: flex;justify-content: center;">
-        <div class="col-6">
+        <img src="../../assets/img/img-buy-hold-lg.png" alt="" style="margin-right: 100px;margin-left: -50px;height: 240px;">
+        <div class="col-3">
           <div class="h3 mb-3">{{ detail.coin_name }}</div>
           <div class>{{ $t("purchase.sendPrice") }}</div>
           <div class="price fn-20 yellow-a">
@@ -12,109 +13,113 @@
             USDT
           </div>
           <ul>
-            <li class="mt-3">
+            <li class="mt-3 d-flex justify-content-between">
               <div class="label text-secondary">
                 {{ $t("purchase.subscriptionCurrency") }}
               </div>
-              <div class="txt">{{ detail.subscribe_currency }}</div>
+              <div class="txt">{{ detail.subscribe_currency || '---' }}</div>
             </li>
-            <li class="mt-3">
+            <li class="mt-3 d-flex justify-content-between">
               <div class="label text-secondary">
                 {{ $t("purchase.expected") }}
               </div>
               <div class="txt">
-                {{ parseTime(detail.expected_time_online) }}
+                {{ parseTime(detail.expected_time_online) || '---' }}
               </div>
             </li>
-            <li class="mt-3">
+            <li class="mt-3 d-flex justify-content-between">
               <div class="label text-secondary">
                 {{ $t("purchase.startTime") }}
               </div>
               <div class="txt">
-                {{ parseTime(detail.start_subscription_time) }}
+                {{ parseTime(detail.start_subscription_time) || '---' }}
               </div>
             </li>
-            <li class="mt-3">
+            <li class="mt-3 d-flex justify-content-between">
               <div class="label text-secondary">
                 {{ $t("purchase.applyForPurchase") }}
               </div>
               <div class="txt">
-                {{ parseTime(detail.end_subscription_time) }}
+                {{ parseTime(detail.end_subscription_time) || '---' }}
               </div>
             </li>
           </ul>
         </div>
-        <div
+        
-          class="col-6 d-flex flex-column justify-content-end align-items-start"
+      </div>
-        >
+    </div>
-          <div class="input-group mb-3">
+    <div style="font-size: 20px;font-weight: bold;text-align: center;color: #000;padding-top: 1rem;">{{ $t("purchase.subscribe") }}</div>
-            <div class="input-group-prepend">
+    <div class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm"
-              <el-dropdown>
+       style="display: flex;justify-content: center;width: 35%;">
-                <span class="input-group-text">
+      <div class="col-12 d-flex flex-column justify-content-end align-items-start">
-                  {{ activeCoin.coin_name }}
+        <div class="input-group mb-3">
-                  <i class="el-icon-caret-bottom"></i>
+          <div class="input-group-prepend">
-                </span>
+            <el-dropdown>
-                <el-dropdown-menu slot="dropdown">
+              <span class="input-group-text">
-                  <el-dropdown-item
+                {{ activeCoin.coin_name }}
-                    v-for="item in coinList"
+                <i class="el-icon-caret-bottom"></i>
-                    @click.native="activeCoin = item"
+              </span>
-                    :key="item.coin_name"
+              <el-dropdown-menu slot="dropdown">
-                    >{{ item.coin_name }}</el-dropdown-item
+                <el-dropdown-item
-                  >
+                  v-for="item in coinList"
-                </el-dropdown-menu>
+                  @click.native="activeCoin = item"
-              </el-dropdown>
+                  :key="item.coin_name"
-            </div>
+                  >{{ item.coin_name }}</el-dropdown-item
-            <input
+                >
-              type="number"
+              </el-dropdown-menu>
-              class="form-control"
+            </el-dropdown>
-              :placeholder="$t('purchase.enterNum')"
+          </div>
-              min="0"
+          <input
-              step="0.0000000001"
+            type="number"
-              :data-message="$t('nav.b9',{num:10})"
+            class="form-control"
-              required
+            :placeholder="$t('purchase.enterNum')"
-              aria-label="Username"
+            min="0"
-              v-model="num"
+            step="0.0000000001"
-              aria-describedby="basic-addon1"
+            :data-message="$t('nav.b9',{num:10})"
-            />
+            required
-            <div class="input-group-append">
+            aria-label="Username"
-              <button
+            v-model="num"
-                class="btn btn-outline-yellow"
+            aria-describedby="basic-addon1"
-                type="button"
+          />
-                @click="num = activeCoin.usable_balance"
+          <div class="input-group-append">
-              >
+            <button
-                {{ $t("purchase.all") }}
+              class="btn btn-outline-yellow"
-              </button>
+              type="button"
-            </div>
+              @click="num = activeCoin.usable_balance"
+            >
+              {{ $t("purchase.all") }}
+            </button>
           </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>
-          <button
-            type="submit"
-            class="btn rounded-pill bg-yellow-a"
-            @click="ifSubscribeNow"
-          >
-            {{ $t("purchase.subscribeNow") }}
-          </button>
         </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>
+        <button
+          type="submit"
+          class="btn rounded-pill bg-yellow-a"
+          @click="ifSubscribeNow"
+        >
+          {{ $t("purchase.subscribeNow") }}
+        </button>
       </div>
     </div>
+    
     <!-- 进度 -->
     <div v-if="activityList[0].amount" class="container panel my-4 px-4 pt-4 pb-5 rounded shadow-sm bg-panel-n">
       <div class="row">
@@ -477,4 +482,9 @@ export default {
     margin-top: 0;
   }
 }
+.purchase-bg{
+  background: url('../../assets/img/purchase-bg.jpg');
+  background-size: 100% 100%;
+  max-width: none;
+}
 </style>