落地页样式

src/view/landing/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="page">
+  <div class="page" :class="{'en': language != 'zh-CN' && language != 'zh-TW'}">
     <header class="header flex">
       <div class="left">
         <div class="logo-box flex">
@@ -95,14 +95,18 @@
       </div>
     </section>
     <section class="section">
-      <div class="tabs flex">
-        <div class="tab" :class="{'active': type == 1}" @click="type = 1">
-          <!-- 手机号 -->
-          {{ $t('login.l21') }}
+      <div class="tabs">
+        <div class="tab flex" :class="{'active': type == 1}" @click="type = 1">
+          <div>
+            <!-- 手机号 -->
+            {{ $t('login.l21') }}
+          </div>
         </div>
-        <div class="tab" :class="{'active': type == 2}" @click="type = 2">
-          <!-- 邮箱 -->
-          {{ $t('setting.l11') }}
+        <div class="tab flex" :class="{'active': type == 2}" @click="type = 2">
+          <div>
+            <!-- 邮箱 -->
+            {{ $t('setting.l11') }}
+          </div>
         </div>
       </div>
       <el-form autocomplete="off" class="login-land" :rules="rules" :model="form" ref="form">
@@ -226,66 +230,73 @@
         <!-- 特惠福利 1800USD 大礼包 -->
         {{ $t('landing.l9') }}
       </div>
-      <div class="cell">
-        <div class="left flex">
-          <img class="icon" src="/img/landing/icon1.png" alt="JDNX">
-          <div>
-            <!-- 注册 -->
-            {{ $t('login.l9') }}
-          </div>
-        </div>
-        <div class="right">
-          <div class="flex">
-            <!-- 送 <span class="span">100USD</span> 抵扣券 -->
-            <div class="text" v-html="$t('landing.l10')">
+      <table>
+        <tr class="tr">
+          <td class="left">
+            <img class="icon" src="/img/landing/icon1.png" alt="JDNX">
+            <div>
+              <!-- 注册 -->
+              {{ $t('login.l9') }}
             </div>
-            <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
-          </div>
-          <!-- A股、美股、港股的交易手续费、资金利息均<br/>可部分抵扣 -->
-          <div v-html="$t('landing.l11')">
-          </div>
-        </div>
-      </div>
-      <div class="cell">
-        <div class="left flex">
-          <img class="icon" src="/img/landing/icon2.png" alt="JDNX">
-          <div>
-            <!-- 认证 -->
-            {{ $t('landing.l12') }}
-          </div>
-        </div>
-        <div class="right">
-          <div class="flex">
-            <!-- 送 <span class="span">200USD</span> 赠金 -->
-            <div class="text" v-html="$t('landing.l13')">
+          </td>
+          <td style="padding: 2px;"></td>
+          <td class="right">
+            <div class="flex">
+              <!-- 送 <span class="span">100USD</span> 抵扣券 -->
+              <div class="text" v-html="$t('landing.l10')">
+              </div>
+              <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
             </div>
-            <img class="icon" src="/img/landing/icon5.png" alt="JDNX">
-          </div>
-          <!-- 完成身份认证获得，等同现金可直接用于交易，<br/>赚到的收益可直接取款 -->
-          <div v-html="$t('landing.l14')">
-          </div>
-        </div>
-      </div>
-      <div class="cell">
-        <div class="left flex">
-          <img class="icon" src="/img/landing/icon3.png" alt="JDNX">
-          <div>
-            <!-- 交易 -->
-            {{ $t('tab.tab3') }}
-          </div>
-        </div>
-        <div class="right">
-          <div class="flex">
-            <!-- 送 <span class="span">600USD</span> 现金券 -->
-            <div class="text" v-html="$t('landing.l15')">
+            <!-- A股、美股、港股的交易手续费、资金利息均<br/>可部分抵扣 -->
+            <div v-html="$t('landing.l11')">
             </div>
-            <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
-          </div>
-          <!-- 达成指定交易额，即可获得最高600USD的现<br/>金 -->
-          <div v-html="$t('landing.l16')">
-          </div>
-        </div>
-      </div>
+          </td>
+        </tr>
+        <tr style="height: 4px;"></tr>
+        <tr class="tr">
+          <td class="left">
+            <img class="icon" src="/img/landing/icon2.png" alt="JDNX">
+            <div>
+              <!-- 认证 -->
+              {{ $t('landing.l12') }}
+            </div>
+          </td>
+          <td style="padding: 2px;"></td>
+          <td class="right">
+            <div class="flex">
+              <!-- 送 <span class="span">200USD</span> 赠金 -->
+              <div class="text" v-html="$t('landing.l13')">
+              </div>
+              <img class="icon" src="/img/landing/icon5.png" alt="JDNX">
+            </div>
+            <!-- 完成身份认证获得，等同现金可直接用于交易，<br/>赚到的收益可直接取款 -->
+            <div v-html="$t('landing.l14')">
+            </div>
+          </td>
+        </tr>
+        <tr style="height: 4px;"></tr>
+        <tr class="tr">
+          <td class="left">
+            <img class="icon" src="/img/landing/icon3.png" alt="JDNX">
+            <div>
+              <!-- 交易 -->
+              {{ $t('tab.tab3') }}
+            </div>
+          </td>
+          <td style="padding: 2px;"></td>
+          <td class="right">
+            <div class="flex">
+              <!-- 送 <span class="span">600USD</span> 现金券 -->
+              <div class="text" v-html="$t('landing.l15')">
+              </div>
+              <img class="icon" src="/img/landing/icon4.png" alt="JDNX">
+            </div>
+            <!-- 达成指定交易额，即可获得最高600USD的现<br/>金 -->
+            <div v-html="$t('landing.l16')">
+            </div>
+          </td>
+        </tr>
+      </table>
       <div class="btn" @click="formFocus">
         <!-- 立即注册 -->
         {{ $t('download.l47') }}
@@ -910,6 +921,15 @@ export default {
     text-shadow: 2px 2px 3px rgba(255,61,3,0.5);
   }
 }
+.en {
+  .top {
+    padding: (140/@r) (20/@r) (21/@r) (32/@r);
+  }
+  .box1 {
+    padding-top: 4px;
+    row-gap: 6px;
+  }
+}
 .box {
   color: #0037FF;
   font-weight: 600;
@@ -957,14 +977,15 @@ export default {
     border: 1px solid #D8D8D8;
     padding: 3px;
     column-gap: 8px;
+    display: flex;
   }
   .tab {
     cursor: pointer;
-    text-align: center;
     flex: 1;
-    text-align: center;
     padding: 6px;
     color: #202C43;
+    justify-content: center;
+    text-align: center;
     &.active {
       background: #202C43;
       border-radius: 2px;
@@ -1103,27 +1124,28 @@ export default {
     margin-bottom: 20px;
   }
 }
-.cell {
-  display: flex;
-  column-gap: 4px;
-  &+.cell {
-    margin-top: 4px;
+table {
+  border-collapse: collapse;
+}
+.tr {
+  &+.tr {
+    margin-top: 4px
   }
   .left {
     background: #FFFAEE;
     min-width: 62px;
-    justify-content: center;
-    flex-direction: column;
     font-weight: 600;
     color: #202C43;
+    text-align: center;
+    padding: 0 2px;
     .icon {
+      display: block;
       width: 28px;
-      margin-bottom: 10px;
+      margin: 0 auto 10px;
     }
   }
   .right {
-    flex: 1;
-    min-width: 0px;
+    width: 100%;
     background: #FFFAEE;
     padding: 11px 9px 11px 16px;
     line-height: 22px;