no message

pages/about/order.vue

@@ -1,127 +1,6 @@
 <template>
   <div class="page" id="page">
-    <div class="top-title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-      <div class="top-container">
-        <n-icon :component="MdCart" size="40" style="vertical-align: middle;" />
-        <span>{{ t('common.navAboutUs.order') }}</span>
-      </div>
-    </div>
-
-    <div class="page-nav-container wow fadeInLeft" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-      <div class="nav-txt">
-        <n-breadcrumb separator=">">
-          <n-breadcrumb-item>
-            <n-icon :component="MdHome" /><router-link to="/home">{{ t('common.navigate.home') }}</router-link>
-          </n-breadcrumb-item>
-          <n-breadcrumb-item>
-            <n-icon :component="MdCart" />{{ t('common.navAboutUs.order') }}
-          </n-breadcrumb-item>
-        </n-breadcrumb>
-      </div>
-    </div>
-
-    <!--订购流程-->
-    <div class="order-process">
-      <div class="container">
-        <div class="title wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-          <h2>{{ t('common.navAboutUs.order') }}</h2>
-        </div>
-        <div class="process-list">
-          <div class="row wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-            <div class="row-desc">
-              <h2 v-if="!pcShow">{{ t('aboutUs.order.pFstTile') }}</h2>
-              <p>{{ t('aboutUs.order.pFstDesc01') }}</p>
-              <p>{{ t('aboutUs.order.pFstDesc02') }}</p>
-            </div>
-            <div class="row-index">
-              <span class="row-index-txt">1</span>
-              <span class="icon iconfont icon-iconset0435 f50"></span>
-            </div>
-            <div v-if="pcShow" class="row-text">
-              <h2>{{ t('aboutUs.order.pFstTile') }}</h2>
-            </div>
-          </div>
-
-          <div class="row wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-            <div v-if="pcShow" class="row-text">
-              <h2>{{ t('aboutUs.order.pSndTitle') }}</h2>
-            </div>
-            <div class="row-index">
-              <span class="row-index-txt">2</span>
-              <span class="icon iconfont icon-iconset0435 f50"></span>
-            </div>
-            <div class="row-desc">
-              <h2 v-if="!pcShow">{{ t('aboutUs.order.pSndTitle') }}</h2>
-              <p>{{ t('aboutUs.order.pSndDesc01') }}</p>
-              <p>{{ t('aboutUs.order.pSndDesc02') }}</p>
-            </div>
-          </div>
-
-          <div class="row wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-            <div class="row-desc">
-              <h2 v-if="!pcShow">{{ t('aboutUs.order.pThrTitle') }}</h2>
-              <p>{{ t('aboutUs.order.pThrDesc01') }}</p>
-              <p>{{ t('aboutUs.order.pThrDesc02') }}</p>
-              <!-- <p>{{ t('aboutUs.order.pThrDesc03') }}</p> -->
-            </div>
-            <div class="row-index">
-              <span class="row-index-txt">3</span>
-              <span class="icon iconfont icon-iconset0435 f50"></span>
-            </div>
-            <div v-if="pcShow" class="row-text">
-              <h2>{{ t('aboutUs.order.pThrTitle') }}</h2>
-            </div>
-          </div>
-
-          <div class="row wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-            <div v-if="pcShow" class="row-text">
-              <h2>{{ t('aboutUs.order.pForTitle') }}</h2>
-            </div>
-            <div class="row-index">
-              <span class="row-index-txt">4</span>
-              <span class="icon iconfont icon-iconset0435 f50"></span>
-            </div>
-            <div class="row-desc">
-              <h2 v-if="!pcShow">{{ t('aboutUs.order.pForTitle') }}</h2>
-              <p>{{ t('aboutUs.order.pForDesc01') }}</p>
-              <p>{{ t('aboutUs.order.pForDesc02') }}</p>
-              <p>{{ t('aboutUs.order.pForDesc03') }}</p>
-            </div>
-          </div>
-
-          <div class="row wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-            <div class="row-desc">
-              <h2 v-if="!pcShow">{{ t('aboutUs.order.pFivTitle') }}</h2>
-              <p>{{ t('aboutUs.order.pFivDesc') }}</p>
-            </div>
-            <div class="row-index">
-              <span class="row-index-txt">5</span>
-            </div>
-            <div v-if="pcShow" class="row-text">
-              <h2>{{ t('aboutUs.order.pFivTitle') }}</h2>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="home-contact" id="home-contact">
-      <div class="contact-row wow fadeInDown" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-        <div class="contact-txt">
-          <span>{{t('home.custom.sndtitle')}}</span>
-        </div>
-        <div class="contact-btn">
-          <a @click="handleContact">{{ t('aboutUs.order.custom') }}</a>
-        </div>
-      </div>
-      <div class="contact-img wow fadeInUp" data-wow-duration="2s" data-wow-delay="0s" data-wow-offset="0">
-        <img src="@/assets/images/swtp.jpg" />
-      </div>
-    </div>
-
-    <n-modal :show="demandShow" preset="dialog" :title="t('report.detail.subscribe')" @close="demandShow = false" @esc="demandShow = false" @mask-click="demandShow = false" :style="'min-width: 40%'">
-      <demand @closeDialog="handleCloseDiag" />
-    </n-modal>
+    
   </div>
 </template>
 
@@ -168,103 +47,5 @@ useHead({
 });
 </script>
 <style lang="scss" scoped>
-.order-process {
-  background-color: #fff;
-  margin-top: 10px;
-  padding-bottom: 120px;
-}
-.process-list {
-  .row {
-    display: flex;
-    align-items: center;
-    padding-top: 20px;
-    .row-text {
-      width: calc(50% - 100px);
-    }
-    .row-index {
-      width: 200px;
-      text-align: center;
-      position: relative;
-      .row-index-txt {
-        width: 80px;
-        height: 80px;
-        display: inline-block;
-        background-color: #18a058;
-        line-height: 80px;
-        border-radius: 100%;
-        color: #fff;
-        font-size: 30px;
-      }
-      .icon {
-        position: absolute;
-        top: 90px;
-        left: 75px;
-      }
-    }
-    .row-desc {
-      width: calc(50% - 100px);
-      padding: 30px;
-      min-height: 155px;
-      background-color: #fff;
-      box-shadow: 5px 4px 15px 0 rgba(0, 0, 0, 0.15);
-      border-radius: 10px;
-      > p {
-        font-size: 16px;
-        color: #000;
-        margin: 0;
-        line-height: 30px;
-      }
-      &:hover {
-        background-color: #18a058;
-        > p {
-          color: #fff;
-        }
-        > h2 {
-          color: #fff;
-        }
-      }
-    }
-  }
-}
-
-.home-contact {
-  position: relative;
-  .contact-row {
-    position: absolute;
-    left: 12.5%;
-    top: 160px;
-    width: 1200px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex-wrap: wrap;
-    .contact-txt {
-      width: 40%;
-      span {
-        font-size: 26px;
-        color: #fff;
-        font-weight: 600;
-      }
-    }
-    .contact-btn {
-      width: 30%;
-      > a {
-        color: #fff;
-        font-size: 26px;
-        background: #18a058;
-        padding: 15px 25px;
-      }
-    }
-  }
 
-  .contact-img {
-    height: 360px;
-    overflow: hidden;
-    > img {
-      height: 100%;
-      width: 100%;
-      object-fit: cover;
-    }
-  }
-}
 </style>

pages/about/term.vue

@@ -18,7 +18,7 @@
 
       <div class="container-item" v-for="(item, index) in termContainer" :key="index">
         <img class="item-img" :src="item.img" alt="" />
-        <div>
+        <div class="item-content">
           <p class="item-title">{{ item.title }}</p>
           <p class="item-text">{{ item.text }}</p>
         </div>
@@ -137,6 +137,7 @@ const termContainer = [
     position: relative;
     line-height: var(--size-53);
     padding-bottom: var(--size-20);
+    margin-bottom: var(--size-40);
     &::before {
       content: "";
       position: absolute;
@@ -151,10 +152,40 @@ const termContainer = [
   }
   .container-item {
     padding: var(--size-25) var(--size-30);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: var(--size-10);
     .item-img {
+      flex-shrink: 0;
       width: var(--size-532);
       height: var(--size-317);
     }
+    .item-content {
+      flex: 1 0;
+      color: #1a1a1a;
+      padding-left: var(--size-47);
+      .item-title {
+        font-size: var(--size-22);
+        font-family: Arial, Arial-Bold;
+        font-weight: 700;
+        padding-bottom: var(--size-20);
+      }
+      .item-text {
+        font-size: var(--size-16);
+        font-family: Arial, Arial-Regular;
+        line-height: var(--size-24);
+      }
+    }
+    &:nth-child(odd) {
+      background: #eeeeee;
+      .item-img {
+        order: 2;
+      }
+      .item-content {
+        padding: 0 var(--size-47) 0 0;
+      }
+    }
   }
 }
 </style>