first page update

src/permission.js

@@ -15,7 +15,9 @@ const whiteList = [
   '/login/aboutUs',
   '/login/contactUs',
   '/login/register',
-  '/login/tradeTool'
+  '/login/tradeTool',
+  '/login/exportTrade',
+  '/login/tradeService'
 ] // no redirect whitelist
 
 router.beforeEach(async(to, from, next) => {

src/router/index.js

@@ -65,6 +65,14 @@ export const constantRoutes = [
       {
         path: 'tradeTool',
         component: () => import('@/views/login/components/TradeTool.vue')
+      },
+      {
+        path: 'exportTrade',
+        component: () => import('@/views/login/components/ExportTrade.vue')
+      },
+      {
+        path: 'tradeService',
+        component: () => import('@/views/login/components/TradeService.vue')
       }
     ]
   },

src/views/login/components/ExportTrade.vue

@@ -0,0 +1,22 @@
+<template>
+  <component :is="isMobile ? 'phonePage' : 'pcPage'" />
+</template>
+
+<script>
+export default {
+  components: {
+    pcPage: () => import('../pcComponents/ExportTrade.vue'),
+    phonePage: () => import('../mobileComponents/ExportTrade.vue')
+  },
+  data() {
+    return {
+      pageName: 'pcPage'
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.isMobile
+    }
+  }
+}
+</script>

src/views/login/components/TradeService.vue

@@ -0,0 +1,22 @@
+<template>
+  <component :is="isMobile ? 'phonePage' : 'pcPage'" />
+</template>
+
+<script>
+export default {
+  components: {
+    pcPage: () => import('../pcComponents/TradeService.vue'),
+    phonePage: () => import('../mobileComponents/TradeService.vue')
+  },
+  data() {
+    return {
+      pageName: 'pcPage'
+    }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.app.isMobile
+    }
+  }
+}
+</script>

src/views/login/index.vue

@@ -1,15 +1,13 @@
 <template>
   <div class="login-container">
     <div class="login-nav">
-      <div class="logo-cont" @click="clickLogo">
-        <!-- <svg-icon icon-class="logo" style="width: 136px; height: 42px;" /> -->
-      </div>
+      <div class="logo-cont" @click="clickLogo" />
       <template v-if="!isMobileTerminal">
         <div class="nav-desc">
           <div v-for="item in bannerList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
-            <span v-if="item.order !== 1">{{ item.name }}</span>
-            <el-dropdown v-else trigger="click" style="margin-right: 0;" placement="bottom-start" @command="toPage">
-              <span class="el-dropdown-link">
+            <span v-if="item.order !== 1 && item.order !== 2">{{ item.name }}</span>
+            <el-dropdown v-if="item.order === 1" trigger="click" style="margin-right: 0;" placement="bottom-start" @command="toPage">
+              <span class="el-dropdown-link" :style="item.isActice ? 'color: #FE7D0B': ''">
                 产品服务<i class="el-icon-arrow-down el-icon--right" />
               </span>
               <el-dropdown-menu slot="dropdown" class="product-list">
@@ -25,6 +23,33 @@
                 </el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
+            <el-dropdown v-if="item.order === 2" trigger="click" style="margin-right: 0;" placement="bottom-start" @command="toPage1">
+              <span class="el-dropdown-link" :style="item.isActice ? 'color: #FE7D0B': ''">
+                增值服务<i class="el-icon-arrow-down el-icon--right" />
+              </span>
+              <el-dropdown-menu slot="dropdown" class="product-list">
+                <el-dropdown-item command="1">
+                  <div class="dropdown-item-title">进口商额度评估</div>
+                  <div class="dropdown-item-desc">为进口商提供核额评估服务</div>
+                  <i class="el-icon-arrow-right el-icon--right" />
+                </el-dropdown-item>
+                <el-dropdown-item command="2">
+                  <div class="dropdown-item-title">应收账款管理（敬请期待）</div>
+                  <div class="dropdown-item-desc">为出口商或资方提供买方催收服务</div>
+                  <i class="el-icon-arrow-right el-icon--right" />
+                </el-dropdown-item>
+                <el-dropdown-item command="3">
+                  <div class="dropdown-item-title">贸易信用险（敬请期待）</div>
+                  <div class="dropdown-item-desc">为客户定制灵活多样的贸易信用保险方案</div>
+                  <i class="el-icon-arrow-right el-icon--right" />
+                </el-dropdown-item>
+                <el-dropdown-item command="4">
+                  <div class="dropdown-item-title">国际物流服务（敬请期待）</div>
+                  <div class="dropdown-item-desc">为出口商精准、高效对接专业的数字化物流服务商</div>
+                  <i class="el-icon-arrow-right el-icon--right" />
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
           </div>
         </div>
       </template>
@@ -52,8 +77,11 @@
     </div>
     <template v-if="isMobileTerminal">
       <div v-if="showCloseIcon" class="nav-desc-mobile">
-        <div v-for="item in bannerMobileList" :key="item.order" :style="item.isActice ? 'color: #FE7D0B': ''" @click="clickNav(item.order)">
-          {{ item.name }}
+        <div v-for="item in bannerMobileList" :key="item.order" @click="clickNav(item.order)">
+          <div :style="item.isActice ? 'color: #FE7D0B': ''">{{ item.name }}</div>
+          <template v-if="item.list && item.list.length">
+            <div v-for="(i, j) in item.list" :key="i.name" class="son-nav" :style="j === 0 ? 'margin-top: 2vw;' : ''" @click="clickSonNav(i.path)">{{ i.name }}</div>
+          </template>
         </div>
       </div>
     </template>
@@ -149,7 +177,6 @@ export default {
     RegisterContent: () => import('./components/RegisterContent'),
     RegisterProtocal: () => import('./components/RegisterProtocal'),
     PrivacyProtocal: () => import('./components/PrivacyProtocal'),
-    // HomeBottom: () => import('./components/HomeBottom'),
     ChangePassword: () => import('./components/ChangePassword')
   },
   data() {
@@ -164,12 +191,6 @@ export default {
           order: 0,
           path: '/login/tradeSinceLink'
         },
-        // {
-        //   name: '资质荣誉',
-        //   isActice: false,
-        //   order: 1,
-        //   path: '/login/qualificationsHonors'
-        // },
         {
           name: '产品服务',
           isActice: false,
@@ -177,65 +198,81 @@ export default {
           path: ''
         },
         {
-          name: '外贸工具',
+          name: '增值服务',
           isActice: false,
           order: 2,
+          path: ''
+        },
+        {
+          name: '外贸工具',
+          isActice: false,
+          order: 3,
           path: '/login/tradeTool'
         },
         {
           name: '关于我们',
           isActice: false,
-          order: 3,
+          order: 4,
           path: '/login/aboutUs'
         },
         {
           name: '联系我们',
           isActice: false,
-          order: 4,
+          order: 5,
           path: '/login/contactUs'
         }
       ],
       bannerMobileList: [
         {
-          name: '跨境通',
+          name: '首页',
           isActice: true,
           order: 0,
           path: '/login/tradeSinceLink'
         },
-        // {
-        //   name: '资质荣誉',
-        //   isActice: false,
-        //   order: 1,
-        //   path: '/login/qualificationsHonors'
-        // },/
-        // {
-        //   name: '产品服务',
-        //   isActice: false,
-        //   order: 1,
-        //   path: ''
-        // },
         {
-          name: '外贸工具',
+          name: '产品服务',
           isActice: false,
           order: 1,
+          path: '',
+          list: [
+            { name: '跨境电商贸易', path: 'https://changyin.tech/', order: 1 },
+            { name: '一般出口贸易', path: '/login/exportTrade', order: 2 }
+          ]
+        },
+        {
+          name: '增值服务',
+          isActice: false,
+          order: 2,
+          path: '',
+          list: [
+            { name: '进口商额度评估', path: '/login/tradeService', order: 1 },
+            { name: '应收账款管理（敬请期待）', path: '', order: 2 },
+            { name: '贸易信用险（敬请期待）', path: '', order: 3 },
+            { name: '国际物流服务（敬请期待）', path: '', order: 4 }
+          ]
+        },
+        {
+          name: '外贸工具',
+          isActice: false,
+          order: 3,
           path: '/login/tradeTool'
         },
         {
           name: '关于我们',
           isActice: false,
-          order: 2,
+          order: 4,
           path: '/login/aboutUs'
         },
         {
           name: '联系我们',
           isActice: false,
-          order: 3,
+          order: 5,
           path: '/login/contactUs'
         },
         {
           name: '立即注册',
           isActice: false,
-          order: 4,
+          order: 6,
           path: '/login/register'
         }
       ],
@@ -245,7 +282,7 @@ export default {
       iconAnimate1: {},
       iconAnimate2: {},
       homepagePath: '/login/tradeSinceLink',
-      notHomepagePath: ['/login/qualificationsHonors', '/login/tradeTool', '/login/aboutUs', '/login/contactUs']
+      notHomepagePath: ['/login/qualificationsHonors', '/login/tradeTool', '/login/aboutUs', '/login/contactUs', '/login/exportTrade', '/login/tradeService']
     }
   },
   computed: {
@@ -299,9 +336,6 @@ export default {
     window.removeEventListener('resize', this.isMobile)
   },
   methods: {
-    test(val) {
-      console.log(val)
-    },
     preventDefault(e) {
       e.preventDefault()
     },
@@ -340,17 +374,32 @@ export default {
           element.isActice = false
         })
         this.bannerMobileList[idx].isActice = true
-        this.$router.push({
-          path: this.bannerMobileList[idx].path,
-          query: this.$route.query
-        })
+        if (this.bannerMobileList[idx].path) {
+          this.$router.push({
+            path: this.bannerMobileList[idx].path,
+            query: this.$route.query
+          })
+        }
       } else {
         this.bannerList.forEach(element => {
           element.isActice = false
         })
         this.bannerList[idx].isActice = true
+        if (this.bannerList[idx].path) {
+          this.$router.push({
+            path: this.bannerList[idx].path
+          })
+        }
+      }
+    },
+    clickSonNav(val) {
+      if (val.includes('https')) {
+        window.open(val, '_blank')
+      } else if (val) {
+        console.log(val, 'val')
         this.$router.push({
-          path: this.bannerList[idx].path
+          path: val,
+          query: this.$route.query
         })
       }
     },
@@ -384,6 +433,13 @@ export default {
     toPage(val) {
       if (val === '1') {
         window.open('https://changyin.tech/', '_blank')
+      } else {
+        this.$router.push('/login/exportTrade')
+      }
+    },
+    toPage1(val) {
+      if (val === '1') {
+        this.$router.push('/login/tradeService')
       }
     }
   }
@@ -690,10 +746,16 @@ export default {
       right: 0;
       flex-direction: column;
       background-color: #fff;
-      z-index: 9;
+      z-index: 9999;
       box-shadow: 0 3px 6px #00000029;
+      color: #2C4270;
       > div {
         padding: 12px;
+        border-bottom: 1px solid #C7CCD7;
+        .son-nav {
+          padding: 1.5vw 0 2vw 9vw;
+          font-size: 3.5vw;
+        }
       }
     }
     // @keyframes rotateIcon1 {

src/views/login/mobileComponents/ContactUs.vue

@@ -3,32 +3,9 @@
     <div class="top-banner" />
     <div class="from-cont">
       <div class="form-all">
-        <div class="form-line" />
         <div class="form-top">联系我们</div>
-        <div class="form-title">我们的专业团队将及时解决您的问题</div>
-        <div class="input-full">
-          <div class="ipnut-title">企业名称</div>
-          <el-input v-model="contactParam.enterpriceCn" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">姓名</div>
-          <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">电话</div>
-          <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">职务</div>
-          <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">邮箱</div>
-          <el-input v-model="contactParam.email" type="text" class="input-cont" />
-        </div>
-        <el-button type="primary" style="display: block; width: 52vw; margin: 8vw auto 0;" @click="submitForm">提交</el-button>
+        <p v-html="text" />
       </div>
-      <div class="form-img form-img-mobile" />
     </div>
     <div class="card-cont">
       <div v-for="item in cardList" :key="item.address" class="card-item">
@@ -90,7 +67,8 @@ export default {
           mapName: 'shenzhen'
         }
       ],
-      mapLoadError: false
+      mapLoadError: false,
+      text: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;跨境通为您提供专业的咨询服务，助您轻松享受优质服务，需要更高效的服务响应请联系我们，多种服务方案供您选择!'
     }
   },
   computed: {
@@ -183,92 +161,27 @@ export default {
   .top-banner {
     width: 100%;
     height: 60vw;
-    background: url('../../../assets/contactUs/bac-phone.jpg') no-repeat center;
+    background: url('../../../assets/contactUs/bac-phone-1.jpg') no-repeat center;
     background-size: 100%;
   }
-
   .from-cont {
     width: 100%;
-    height: 702px;
-    margin: 8vw auto 174px;
+    margin: 8vw auto 40px;
     .form-all {
       width: 100%;
-      .form-line {
-        width: 3.2vw;
-        height: 2px;
-        border: 2px solid #FE7D0B;
-      }
       .form-top {
-        font-size: 3.2vw;
+        font-size: 4.2vw;
         line-height: 4.8vw;
         color: #333333;
         margin-top: 2vw;
         font-weight: 600;
-      }
-      .form-title {
-        font-size: 2.8vw;
-        line-height: 4.8vw;
-        color: #999;
-        margin: 4vw 0 5.6vw;
-      }
-      .ipnut-title {
-        color: #333;
-        font-size: 2.8vw;
-        line-height: 4.2vw;
-        margin-bottom: 0.8vw;
-      }
-      .input-cont {
-        width: 100%;
-        border: 1px solid #fff;
-        ::v-deep .el-input__inner {
-          height: 8vw;
-          line-height: 8vw;
-          background-color: transparent;
-        }
-      }
-      .input-full {
-        width: 100%;
-        color: #fff;
-        margin-bottom: 4vw;
-      }
-      .input-flex {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 4vw;
-        div {
-          width: 45%;
-          .ipnut-title {
-            width: 100%;
-          }
-          .input-cont {
-            width: 100%;
-            border: 1px solid #fff;
-            ::v-deep .el-input__inner {
-              height: 8vw;
-              line-height: 8vw;
-              background-color: transparent;
-            }
-          }
-        }
-      }
-      .from-btn {
-        width: 25.6vw;
-        height: 8vw;
-        line-height: 8vw;
-        background-color: #FE7D0B;
-        color: #fff;
-        margin: 0 auto;
         text-align: center;
-        cursor: pointer;
-        border-radius: 0.8vw;
       }
-    }
-    .form-img {
-      height: 82vw;
-      width: 100%;
-      margin-top: 10vw;
-      background: url('../../../assets/contactUs/form_r.png') no-repeat left center;
-      background-size: 100%;
+      p {
+        font-size: 3.6vw;
+        margin: 3.2vw 0;
+        line-height: 5vw;
+      }
     }
   }
 

src/views/login/mobileComponents/ExportTrade.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="about-cont">
+    <div class="top-banner" />
+    <div class="tool-area">
+      <div
+        v-for="(item, index) in toolList"
+        :key="item.title"
+        :style="{backgroundColor: index === 1 ? '#F9FAFB' : 'transparent'}"
+        class="tool-item"
+      >
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.desc }}</p>
+        <div class="tool-item-list">
+          <div v-for="(i, j) in item.list" :key="i.title" :style="{backgroundImage: `url(${i.icon})`, backgroundSize: index === 0 ? j === 0 ? '15.6vw' : '20.6vw' : index === 1 ? '15.6vw' : j === 0 ? '15.6vw' : j === 1 ? '17.6vw' : '16.6vw'}">
+            <h5>{{ i.title }}</h5>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="background-color: #F9FAFB; padding: 10vw 0;">
+      <p class="tool-title">贸易流程</p>
+      <div class="net-area" style="margin-top: 8vw; margin-bottom: 15vw;">
+        <div v-for="item in tradeList1" :key="item.name" :style="{backgroundImage: `url(${item.icon})`}">
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="net-area" style="margin-bottom: 200px;">
+        <div v-for="(item, index) in tradeList2" :key="item.name" :style="{backgroundImage: `url(${item.icon})`, backgroundSize: index === 2 ? '6vw' : ''}">
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolList: [
+        {
+          title: '自营出口贸易',
+          desc: '使用出口商自已的抬头报关出口，可通过平台完成合同签署、订单管理、物流追踪、发票生成、保险购买、关单下载、退税申报、备案单证管理等贸易全流程管理。',
+          list: [
+            { title: '尊重原有贸易结构', icon: require('@/assets/exportTrade/first-bac-1.svg') },
+            { title: '掌控出口贸易流程', icon: require('@/assets/exportTrade/first-bac-2.svg') },
+            { title: '自主完成退税申报', icon: require('@/assets/exportTrade/first-bac-3.svg') }
+          ]
+        },
+        {
+          title: '代理出口贸易',
+          desc: '出口商根据贸易习惯可使用指定贸易平台的抬头代理报关出口，为出口商提供快捷、低成本的通关、收汇、退税及配套的融资服务。',
+          list: [
+            { title: '实现外贸综合化服务', icon: require('@/assets/exportTrade/second-bac-1.svg') },
+            { title: '灵活匹配出口贸易保险', icon: require('@/assets/exportTrade/second-bac-2.svg') },
+            { title: '智能化退税系统申报', icon: require('@/assets/exportTrade/second-bac-3.svg') }
+          ]
+        },
+        {
+          title: '境外转口贸易',
+          desc: '出口商根据货物的特性、运输成本、关税政策，选择海外指定的贸易平台公司进行转口贸易出口，从而帮助出口商实现贸易流程高效运作和成本有效控制。',
+          list: [
+            { title: '享受贸易政策优惠', icon: require('@/assets/exportTrade/third-bac-1.svg') },
+            { title: '实现资金流通便利', icon: require('@/assets/exportTrade/third-bac-2.svg') },
+            { title: '物流、通关便捷化', icon: require('@/assets/exportTrade/third-bac-3.svg') }
+          ]
+        }
+      ],
+      tradeList1: [
+        { name: '签署合同', icon: require('@/assets/exportTrade/contract-sign.svg') },
+        { name: '录入订单', icon: require('@/assets/exportTrade/recordOrder.svg') },
+        { name: '物流出运', icon: require('@/assets/login/kua-pro-4.svg') }
+      ],
+      tradeList2: [
+        { name: '发票开具', icon: require('@/assets/exportTrade/recordOrder.svg') },
+        { name: '退税申报', icon: require('@/assets/login/kua-pro-6.svg') },
+        { name: '收汇结算', icon: require('@/assets/login/kua-pro-7.svg') }
+      ],
+      activeIndex: ''
+    }
+  },
+  methods: {
+    toPage(url) {
+      window.open(url, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.about-cont {
+  background-color: #fff;
+  .top-banner {
+    width: 94vw;
+    height: 44vw;
+    margin-top: 80px;
+    margin-left: 3vw;
+    background: url('../../../assets/contactUs/bac-phone.jpg') no-repeat center;
+    background-size: 100%;
+  }
+  .tool-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .tool-item {
+      width: 100%;
+      height: 81.6vw;
+      padding: 10vw 0;
+      text-align: center;
+      h3 {
+        font-size: 4.16vw;
+        margin: 0 0 4vw;
+      }
+      p {
+        font-size: 3.64vw;
+        margin: 0 3.9vw 7.2vw;
+        text-indent: 8vw;
+        line-height: 5.46vw;
+        text-align: left;
+      }
+      .tool-item-list {
+        display: flex;
+        flex-direction: row;
+        padding: 0 8.3vw;
+        div {
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 15.6vw;
+          height: 28.6vw;
+          padding-top: 19.5vw;
+          margin-right: 10vw;
+          margin-top: 3vw;
+          h5 {
+            font-size: 3.12vw;
+            margin: 0;
+            font-weight: 400;
+          }
+        }
+        div:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  .net-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 0 11.9vw;
+    div {
+      width: 13vw;
+      height: 13vw;
+      border-radius: 13vw;
+      background-color: #32373E;
+      color: #131820;
+      font-size: 3.12vw;
+      text-align: center;
+      line-height: 36.5vw;
+      position: relative;
+      background-size: 5.2vw;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    div::after {
+      content: '';
+      display: inline-block;
+      width: 20vw;
+      height: 2px;
+      background-color: #32373E;
+      position: absolute;
+      left: 13vw;
+      top: 50%;
+    }
+    div:last-child::after {
+      display: none;
+    }
+  }
+  .tool-title {
+    text-align: center;
+    font-size: 4.16vw;
+    font-weight: 700;
+    color:#131820;
+    margin: 0;
+  }
+}
+</style>

src/views/login/mobileComponents/TradeService.vue

@@ -0,0 +1,297 @@
+<template>
+  <div class="about-cont">
+    <div class="top-banner" />
+    <p class="tool-title" style="margin-top: 7vw;">进口商额度评估</p>
+    <p style="font-size: 3.64vw; color: #575757; margin: 4vw 3.9vw 8vw; line-height: 5.46vw; text-align: center;">为跨境贸易的进口商提供包括保险公司、境内外银行、保理公司等专业机构的信用额度评估服务，有效避免贸易双方信息不对称，从而大幅提升合作的可行性与可靠性。</p>
+    <p class="tool-title" style="margin-top: 7vw;">服务流程</p>
+    <div class="net-area">
+      <div v-for="item in serviceList" :key="item.name" :style="{backgroundImage: `url(${item.icon})`}">
+        {{ item.name }}
+      </div>
+    </div>
+    <p class="tool-title" style="margin-top: 7vw; margin-bottom: 2vw;">快速查询进口商额度</p>
+    <div class="tabs-content">
+      <el-form
+        ref="tab2"
+        :model="form2"
+        :rules="rule2"
+        label-position="top"
+        class="form-box"
+      >
+        <el-form-item label="1、进口商所在的国家和地区" prop="region">
+          <el-radio-group v-model="form2.region" @change="regionChange">
+            <el-radio label="Asia">亚洲</el-radio>
+            <el-radio label="Europe">欧洲</el-radio>
+            <el-radio label="Africa">非洲</el-radio>
+            <el-radio label="NAmerica">北美洲</el-radio>
+            <el-radio label="SAmerica">南美洲</el-radio>
+            <el-radio label="Oceania">大洋洲</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="" prop="country">
+          <el-select v-model="form2.country" placeholder="请选择国家" @change="moneyUnit = ''; money = '--'">
+            <el-option
+              v-for="item in countryList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="2、进口商有无官方网站?" prop="officialWebsite">
+          <el-radio-group v-model="form2.officialWebsite" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">有</el-radio>
+            <el-radio label="2">无</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="3、进口商企业类型" prop="buyerEnterpriseType">
+          <el-radio-group v-model="form2.buyerEnterpriseType" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">生产型</el-radio>
+            <el-radio label="2">贸易型</el-radio>
+            <el-radio label="3">服务类</el-radio>
+            <el-radio label="4">其他类</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="4、与进口商合作的时间?" prop="buyerCooperationTime">
+          <el-radio-group v-model="form2.buyerCooperationTime" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">6个月及以下</el-radio>
+            <el-radio label="2">6个月-1年 </el-radio>
+            <el-radio label="3">1-3年</el-radio>
+            <el-radio label="4">3年及以上</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="5、进口商历史最长回款账期" prop="buyerMaximumPaybackPeriod">
+          <el-radio-group v-model="form2.buyerMaximumPaybackPeriod" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">无回款</el-radio>
+            <el-radio label="2">30—90天 </el-radio>
+            <el-radio label="3">90—120天</el-radio>
+            <el-radio label="4">120—180天</el-radio>
+            <el-radio label="5">180天及以上</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <template v-if="showResult">
+          <h5 class="caculate-money">预估授信额度：<span>{{ moneyUnit }} {{ money }}</span></h5>
+          <div class="caculate-desc">此额度只是初步估算所得，最终的授信额度将根据您的具体情况和申请资料综合确定。</div>
+        </template>
+        <el-button v-if="money === '--'" type="primary" @click="confirm">提交</el-button>
+        <el-button v-if="money !== '--'" type="primary" @click="toRegister">去注册</el-button>
+      </el-form>
+    </div>
+    <p class="tool-title" style="margin-top: 7vw; margin-bottom: 2vw;">合作伙伴</p>
+    <div class="friend-list">
+      <div v-for="(item, index) in friendsList" :key="item" :style="{backgroundImage: `url(${item})`, marginRight: index === 3 || index === 7 ? 0 : '4vw'}" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCountryByRegoin, getCreditQuota } from '@/api/common'
+export default {
+  data() {
+    return {
+      serviceList: [
+        { name: '填写核额信息', icon: require('@/assets/exportTrade/recordOrder.svg') },
+        { name: '系统在线评估', icon: require('@/assets/tradeService/asset-online.svg') },
+        { name: '评估结果反馈', icon: require('@/assets/tradeService/asset-question.svg') }
+      ],
+      form2: {
+        region: '',
+        officialWebsite: '',
+        buyerEnterpriseType: '',
+        buyerCooperationTime: '',
+        buyerMaximumPaybackPeriod: '',
+        country: ''
+      },
+      rule2: {
+        region: [
+          { required: true, message: '请选择进口商所在的国家和地区', trigger: 'change' }
+        ],
+        country: [
+          { required: true, message: '请选择进口商所在的国家和地区', trigger: 'blur' }
+        ],
+        officialWebsite: [
+          { required: true, message: '请选择进口商有无官方网站', trigger: 'change' }
+        ],
+        buyerEnterpriseType: [
+          { required: true, message: '请选择进口商企业类型', trigger: 'change' }
+        ],
+        buyerCooperationTime: [
+          { required: true, message: '请选择与进口商合作的时间', trigger: 'change' }
+        ],
+        buyerMaximumPaybackPeriod: [
+          { required: true, message: '请选择进口商历史最长回款账期', trigger: 'change' }
+        ]
+      },
+      money: '--',
+      moneyUnit: '',
+      friendsList: [
+        require('@/assets/tradeService/friend-1.svg'),
+        require('@/assets/tradeService/friend-2.svg'),
+        require('@/assets/tradeService/friend-3.svg'),
+        require('@/assets/tradeService/friend-4.svg'),
+        require('@/assets/tradeService/friend-5.svg'),
+        require('@/assets/tradeService/friend-6.svg'),
+        require('@/assets/tradeService/friend-7.svg'),
+        require('@/assets/tradeService/friend-8.svg')
+      ]
+    }
+  },
+  methods: {
+    toPage(url) {
+      window.open(url, '_blank')
+    },
+    confirm() {
+      this.$refs.tab2.validate(flag => {
+        if (flag) {
+          this.calcuteMethod()
+        }
+      })
+    },
+    // 查询国家
+    regionChange() {
+      if (this.form2.region) {
+        this.moneyUnit = ''
+        this.money = '--'
+        this.form2.country = ''
+        const postData = new FormData()
+        postData.append('continent', this.form2.region)
+        getCountryByRegoin(postData).then(res => {
+          this.countryList = res.data || []
+        })
+      }
+    },
+    // 计算授信额度
+    calcuteMethod() {
+      const data = { ...this.form2 }
+      getCreditQuota(data).then(res => {
+        this.$message.success('计算成功')
+        this.money = res.data.amount / 10000 + '万'
+        this.moneyUnit = res.data.currency === 'USD' ? '$ ' : '￥ '
+        this.showResult = true
+      })
+    },
+    toRegister() {
+      this.$store.commit('app/SET_REGISTER_STATE', true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.about-cont {
+  background-color: #fff;
+  // padding: 0 0 180px;
+  .top-banner {
+    width: 94vw;
+    height: 44vw;
+    margin-top: 80px;
+    margin-left: 3vw;
+    background: url('../../../assets/tradeService/bac-phone.jpg') no-repeat center;
+    background-size: 100%;
+  }
+  .net-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 5vw 11.9vw 20vw;
+    div {
+      width: 13vw;
+      height: 13vw;
+      border-radius: 13vw;
+      background-color: #32373E;
+      color: #131820;
+      font-size: 3.12vw;
+      text-align: center;
+      line-height: 36.5vw;
+      position: relative;
+      background-size: 5.2vw;
+      background-position: center;
+      background-repeat: no-repeat;
+      white-space: nowrap;
+      text-indent: -3vw;
+    }
+    div::after {
+      content: '';
+      display: inline-block;
+      width: 20vw;
+      height: 2px;
+      background-color: #32373E;
+      position: absolute;
+      left: 13vw;
+      top: 50%;
+    }
+    div:last-child::after {
+      display: none;
+    }
+  }
+  .tool-title {
+    text-align: center;
+    font-size: 4.16vw;
+    font-weight: 700;
+    color:#131820;
+    margin: 0;
+  }
+  .tabs-content {
+    width: 100vw;
+    display: flex;
+    justify-content: flex-end;
+    background-size: 100vw auto;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-image: url("../../../assets/login/kua-bac-phone-2.jpg");
+    .form-box {
+      margin-top: 48vw;
+      width: 100vw;
+      padding: 40px 20px;
+      .el-button {
+        width: 260px;
+        height: 40px;
+        margin-left: 50%;
+        transform: translateX(-50%);
+        margin-top: 1vw;
+        font-size: 14px
+      }
+      .caculate-money {
+        width: 100%;
+        text-align: center;
+        font-size: 18px;
+        font-weight: 400;
+        color: #222931;
+        margin-bottom: 10px;
+        span {
+          color: #FE7D0B;
+        }
+      }
+      .caculate-desc {
+        width: 100%;
+        font-size: 12px;
+        color: #666666;
+        line-height: 22px;
+        text-indent: 15px;
+        margin-bottom: 15px;
+      }
+      .el-form-item > .el-form-item__content > .el-radio-group > .el-radio {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .friend-list {
+    width: 92vw;
+    margin: 3vw auto 200px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    div {
+      width: 18vw;
+      height: 8.32vw;
+      background-size: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      margin-bottom: 4vw;
+      margin-right: 4vw;
+      flex-grow: 1;
+    }
+  }
+}
+</style>

src/views/login/mobileComponents/TradeTool.vue

@@ -30,19 +30,18 @@ export default {
         { name: '商品HS编码', desc: '为平台店铺卖家提供综合服务', icon: require('@/assets/tradeTool/tool-1.svg'), activeIcon: require('@/assets/tradeTool/tool-1-1.svg'), url: 'https://wmsw.mofcom.gov.cn/wmsw/toolBox/codeContrast' },
         { name: '汇率牌价查询', desc: '为出口商客户提供贸易管理', icon: require('@/assets/tradeTool/tool-2.svg'), activeIcon: require('@/assets/tradeTool/tool-2-2.svg'), url: 'https://www.boc.cn/sourcedb/whpj/' },
         { name: '国别代码查询', desc: '为客户匹配多元化融资支持', icon: require('@/assets/tradeTool/tool-3.svg'), activeIcon: require('@/assets/tradeTool/tool-3-3.svg'), url: 'https://www.iban.hk/currency-codes' },
-        { name: 'CIF价格计算', desc: '为平台店铺卖家提供综合服务', icon: require('@/assets/tradeTool/tool-4.svg'), activeIcon: require('@/assets/tradeTool/tool-4-4.svg'), url: 'https://www.choicexp.com/tool/cif.htm' },
-        { name: 'FOB价格计算', desc: '为出口商客户提供贸易管理', icon: require('@/assets/tradeTool/tool-5.svg'), activeIcon: require('@/assets/tradeTool/tool-5-5.svg'), url: 'https://www.choicexp.com/tool/fob.htm' },
-        { name: '通关状态查询', desc: '为客户匹配多元化融资支持', icon: require('@/assets/tradeTool/tool-6.svg'), activeIcon: require('@/assets/tradeTool/tool-6-6.svg'), url: 'http://202.127.48.116:18001/static/pages/manifestQuery.html' },
-        { name: '海关政策查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-7.svg'), activeIcon: require('@/assets/tradeTool/tool-7-7.svg'), url: 'http://www.customs.gov.cn/customs/302249/302266/index.html' },
-        { name: '出口退税率查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-8.svg'), activeIcon: require('@/assets/tradeTool/tool-8-8.svg'), url: 'https://hd.chinatax.gov.cn/nszx/InitChukou.html' }
+        { name: '出口退税率查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-4.svg'), activeIcon: require('@/assets/tradeTool/tool-4-4.svg'), url: 'https://hd.chinatax.gov.cn/nszx/InitChukou.html' },
+        { name: 'CIF价格计算', desc: '为平台店铺卖家提供综合服务', icon: require('@/assets/tradeTool/tool-5.svg'), activeIcon: require('@/assets/tradeTool/tool-5-5.svg'), url: 'https://www.choicexp.com/tool/cif.htm' },
+        { name: 'FOB价格计算', desc: '为出口商客户提供贸易管理', icon: require('@/assets/tradeTool/tool-6.svg'), activeIcon: require('@/assets/tradeTool/tool-6-6.svg'), url: 'https://www.choicexp.com/tool/fob.htm' },
+        { name: '通关状态查询', desc: '为客户匹配多元化融资支持', icon: require('@/assets/tradeTool/tool-7.svg'), activeIcon: require('@/assets/tradeTool/tool-7-7.svg'), url: 'http://202.127.48.116:18001/static/pages/manifestQuery.html' },
+        { name: '海关政策查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-8.svg'), activeIcon: require('@/assets/tradeTool/tool-8-8.svg'), url: 'http://www.customs.gov.cn/customs/302249/302266/index.html' },
       ],
       netList: [
         { name: '海关单一窗口', url: 'https://www.singlewindow.cn/#/' },
         { name: '电子税务局网站', url: 'https://12366.chinatax.gov.cn/' },
         { name: '中国海关总署', url: 'http://www.customs.gov.cn/' },
         { name: '中国商务部', url: 'https://www.mofcom.gov.cn/' }
-      ],
-      activeIndex: ''
+      ]
     }
   },
   methods: {

src/views/login/pcComponents/ContactUs.vue

@@ -1,90 +1,16 @@
 <template>
   <div class="contact-us">
     <div class="top-banner" />
-    <div class="from-cont">
-      <div class="form-all">
-        <div class="form-line" />
-        <div class="form-top">联系我们</div>
-        <div class="form-title">我们的专业团队将及时解决您的问题</div>
-        <div class="input-full">
-          <div class="ipnut-title">企业名称</div>
-          <el-input v-model="contactParam.enterpriceCn" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">姓名</div>
-          <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">电话</div>
-          <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">职务</div>
-          <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">邮箱</div>
-          <el-input v-model="contactParam.email" type="text" class="input-cont" />
-        </div>
-        <!-- <div class="input-flex">
-          <div>
-            <div class="ipnut-title">姓名</div>
-            <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
-          </div>
-          <div>
-            <div class="ipnut-title">职务</div>
-            <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
-          </div>
-        </div>
-        <div class="input-flex">
-          <div>
-            <div class="ipnut-title">电话</div>
-            <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
-          </div>
-          <div>
-            <div class="ipnut-title">邮箱</div>
-            <el-input v-model="contactParam.email" type="text" class="input-cont" />
-          </div>
-        </div>
-        <div class="input-flex">
-          <div>
-            <div class="ipnut-title">主营品类</div>
-            <el-input v-model="contactParam.mainCategories" type="text" class="input-cont" />
-          </div>
-          <div>
-            <div class="ipnut-title">年销售额（万元）</div>
-            <el-input v-model="contactParam.annualSalesRevenue" type="text" class="input-cont" />
-          </div>
-        </div>
-        <div class="input-full">
-          <div class="ipnut-title">主要客户</div>
-          <el-input v-model="contactParam.mainCustomers" type="text" class="input-cont" />
-        </div>
-        <div class="input-flex">
-          <div>
-            <div class="ipnut-title">预估账期</div>
-            <el-input v-model="contactParam.estimatedAccountingPeriod" type="text" class="input-cont" />
-          </div>
-          <div>
-            <div class="ipnut-title">应收余额（万元）</div>
-            <el-input v-model="contactParam.accountsReceivableBalance" type="text" class="input-cont" />
-          </div>
-        </div> -->
-        <!-- <div class="from-btn" @click="submitForm">
-          提交
-        </div> -->
-        <el-button type="primary" style="width: 15vw; margin-left: 7vw;" @click="submitForm">提交</el-button>
-      </div>
-      <div class="form-img form-img-mobile" />
+    <h3>联系我们</h3>
+    <div class="contact-us-content">
+      <p v-html="text" />
+      <b>可手机扫码注册  >></b>
     </div>
     <div class="card-cont">
       <div v-for="item in cardList" :key="item.address" class="card-item">
         <div class="card-item-name">
           {{ item.companyName }}
         </div>
-        <div class="card-item-desc">
-          {{ item.address }}
-        </div>
         <template v-if="mapLoadError">
           <div class="card-item-map">
             <img :src="item.mapUrl">
@@ -93,6 +19,11 @@
         <template v-else>
           <div :id="item.mapName" class="card-item-map" />
         </template>
+        <div class="card-item-desc">
+          <p>{{ item.phone }}</p>
+          <p>{{ item.email }}</p>
+          <p>{{ item.address }}</p>
+        </div>
       </div>
     </div>
   </div>
@@ -120,24 +51,31 @@ export default {
       cardList: [
         {
           companyName: '西安总部',
-          address: '西安市经济技术开发区凤城二路51号白桦林金融创新中心D栋13层',
+          address: '地址：西安市经济技术开发区凤城二路51号白桦林金融创新中心D栋13层',
+          phone: '电话：+86(29) 8668 9180',
+          email: '邮箱：ad@changan-inkasso.com',
           mapUrl: require('@/assets/contactUs/map_1.png'),
           mapName: 'xian'
         },
         {
           companyName: '上海中心',
-          address: '上海市普陀区曹杨路1888号星光耀广场1号楼13A19室',
+          address: '地址：上海市普陀区铜川路699弄2号中海中心A座1901室',
+          phone: '电话：+86(21) 6167 7022',
+          email: '邮箱：shanghai@changan-inkasso.com',
           mapUrl: require('@/assets/contactUs/map_2.png'),
           mapName: 'shanghai'
         },
         {
           companyName: '深圳中心',
           address: '深圳市前海深港合作区南山街道听海大道5059号前海鸿荣源中心A座1601B',
+          phone: '电话：+86(755) 8656 0030',
+          email: '邮箱：sales@changan-inkasso.com',
           mapUrl: require('@/assets/contactUs/map_3.jpg'),
           mapName: 'shenzhen'
         }
       ],
-      mapLoadError: false
+      mapLoadError: false,
+      text: '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;跨境通为您提供专业的咨询服务，助您轻松享受优质服务，需要更高效的服务响应请联系我们，多种服务方案供您选择!'
     }
   },
   computed: {
@@ -236,88 +174,35 @@ export default {
     margin: 80px 5vw 0;
   }
 
-  .from-cont {
+  h3 {
+    font-size: 1.5vw;
+    text-align: center;
+    margin-top: 7.5vw;
+  }
+
+  .contact-us-content {
+    width: 35vw;
+    height: 8vw;
+    padding-right: 11vw;
+    margin: 1vw auto 3vw;
+    background-image: url('../../../assets/contactUs/erweima.svg');
+    background-size: auto 100%;
+    background-repeat: no-repeat;
+    background-position: right center;
     display: flex;
-    width: 100%;
-    height: 702px;
-    margin: 90px auto 174px;
-    .form-all {
-      width: 50%;
-      padding: 0 1% 0 18%;
-      .form-line {
-        width: 16px;
-        height: 2px;
-        border: 2px solid #FE7D0B;
-      }
-      .form-top {
-        font-size: 16px;
-        line-height: 24px;
-        color: #333333;
-        margin-top: 10px;
-        font-weight: 600;
-      }
-      .form-title {
-        font-size: 14px;
-        line-height: 24px;
-        color: #999;
-        margin: 20px 0 28px;
-      }
-      .ipnut-title {
-        color: #333;
-        font-size: 14px;
-        line-height: 21px;
-        margin-bottom: 4px;
-      }
-      .input-cont {
-        width: 100%;
-        border: 1px solid #fff;
-        ::v-deep .el-input__inner {
-          height: 40px;
-          line-height: 40px;
-          background-color: transparent;
-        }
-      }
-      .input-full {
-        width: 100%;
-        color: #fff;
-        margin-bottom: 20px;
-      }
-      .input-flex {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 20px;
-        div {
-          width: 45%;
-          .ipnut-title {
-            width: 100%;
-          }
-          .input-cont {
-            width: 100%;
-            border: 1px solid #fff;
-            ::v-deep .el-input__inner {
-              height: 40px;
-              line-height: 40px;
-              background-color: transparent;
-            }
-          }
-        }
-      }
-      .from-btn {
-        width: 128px;
-        height: 40px;
-        line-height: 40px;
-        background-color: #FE7D0B;
-        color: #fff;
-        margin: 0 auto;
-        text-align: center;
-        cursor: pointer;
-        border-radius: 4px;
-      }
+    flex-direction: column;
+    p {
+      font-size: 0.7vw;
+      line-height: 1vw;
+      flex-grow: 1;
+      margin-top: 1.5vw;
+      color: #575757;
     }
-    .form-img {
-      flex: 1;
-      height: 100%;
-      background: url('../../../assets/contactUs/form_r.png') no-repeat left center;
+    b {
+      font-size: 0.7vw;
+      color: #F7941D;
+      text-align: right;
+      margin-bottom: 1.5vw;
     }
   }
 
@@ -325,32 +210,35 @@ export default {
     display: flex;
     width: 100%;
     justify-content: center;
-    margin-bottom: 70px;
+    margin-bottom: 170px;
     .card-item {
       width: 28%;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
-      width: 388px;
+      width: 19.4vw;
       color: #444;
       background-color: #FBFBFB;
-      padding: 24px;
+      padding: 1.2vw;
       .card-item-name {
-        margin-bottom: 20px;
-        font-size: 22px;
-        line-height: 28px;
+        font-size: 1.1vw;
+        line-height: 1.4vw;
         color: #32373E;
       }
       .card-item-desc {
-        font-size: 14px;
-        line-height: 24px;
+        font-size: 0.7vw;
+        line-height: 1.2vw;
         color: #333;
+        margin-top: 1.5vw;
+        p {
+          margin: 0;
+        }
       }
       .card-item-map {
-        margin-top: 15px;
+        margin-top: 0.75vw;
         width: 100%;
-        height: 380px;
+        height: 19vw;
         img {
           width: 100%;
           height: 100%;
@@ -358,10 +246,10 @@ export default {
       }
     }
     .card-item:nth-child(2) {
-      margin: 0 20px;
+      margin: 0 1vw;
     }
     .card-item:nth-child(2) .card-item-map {
-      margin-top: 32px;
+      margin-top: 1.6vw;
     }
   }
 }

src/views/login/pcComponents/ExportTrade.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="about-cont">
+    <div class="top-banner" />
+    <div class="tool-area">
+      <div
+        v-for="(item, index) in toolList"
+        :key="item.title"
+        :style="{backgroundColor: index === 1 ? '#F9FAFB' : 'transparent'}"
+        class="tool-item"
+      >
+        <h3>{{ item.title }}</h3>
+        <p>{{ item.desc }}</p>
+        <div class="tool-item-list">
+          <div v-for="(i, j) in item.list" :key="i.title" :style="{backgroundImage: `url(${i.icon})`, backgroundSize: index === 0 ? j === 0 ? '5vw' : '7vw' : index === 1 ? '5vw' : j === 0 ? '5vw' : j === 1 ? '7vw' : '6vw'}">
+            <h5>{{ i.title }}</h5>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="background-color: #F9FAFB; padding: 6.5vw 0;">
+      <p class="tool-title">贸易流程</p>
+      <div class="net-area">
+        <div v-for="(item, index) in tradeList" :key="item.name" :style="{backgroundImage: `url(${item.icon})`, backgroundSize: index === 5 ? '2vw' : ''}">
+          {{ item.name }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      toolList: [
+        {
+          title: '自营出口贸易',
+          desc: '使用出口商自已的抬头报关出口，可通过平台完成合同签署、订单管理、物流追踪、发票生成、保险购买、关单下载、退税申报、备案单证管理等贸易全流程管理。',
+          list: [
+            { title: '尊重原有贸易结构', icon: require('@/assets/exportTrade/first-bac-1.svg') },
+            { title: '掌控出口贸易流程', icon: require('@/assets/exportTrade/first-bac-2.svg') },
+            { title: '自主完成退税申报', icon: require('@/assets/exportTrade/first-bac-3.svg') }
+          ]
+        },
+        {
+          title: '代理出口贸易',
+          desc: '出口商根据贸易习惯可使用指定贸易平台的抬头代理报关出口，为出口商提供快捷、低成本的通关、收汇、退税及配套的融资服务。',
+          list: [
+            { title: '实现外贸综合化服务', icon: require('@/assets/exportTrade/second-bac-1.svg') },
+            { title: '灵活匹配出口贸易保险', icon: require('@/assets/exportTrade/second-bac-2.svg') },
+            { title: '智能化退税系统申报', icon: require('@/assets/exportTrade/second-bac-3.svg') }
+          ]
+        },
+        {
+          title: '境外转口贸易',
+          desc: '出口商根据货物的特性、运输成本、关税政策，选择海外指定的贸易平台公司进行转口贸易出口，从而帮助出口商实现贸易流程高效运作和成本有效控制。',
+          list: [
+            { title: '享受贸易政策优惠', icon: require('@/assets/exportTrade/third-bac-1.svg') },
+            { title: '实现资金流通便利', icon: require('@/assets/exportTrade/third-bac-2.svg') },
+            { title: '物流、通关便捷化', icon: require('@/assets/exportTrade/third-bac-3.svg') }
+          ]
+        }
+      ],
+      tradeList: [
+        { name: '签署合同', icon: require('@/assets/exportTrade/contract-sign.svg') },
+        { name: '录入订单', icon: require('@/assets/exportTrade/recordOrder.svg') },
+        { name: '物流出运', icon: require('@/assets/login/kua-pro-4.svg') },
+        { name: '发票开具', icon: require('@/assets/exportTrade/recordOrder.svg') },
+        { name: '退税申报', icon: require('@/assets/login/kua-pro-6.svg') },
+        { name: '收汇结算', icon: require('@/assets/login/kua-pro-7.svg') }
+      ],
+      activeIndex: ''
+    }
+  },
+  methods: {
+    toPage(url) {
+      window.open(url, '_blank')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.about-cont {
+  background-color: #fff;
+  // padding: 0 0 180px;
+  .top-banner {
+    width: 90vw;
+    height: 30.5vw;
+    margin: 80px 5vw 0;
+    background: url('../../../assets/exportTrade/bac.jpg') no-repeat center;
+    background-size: 100%;
+  }
+  .tool-area {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    .tool-item {
+      width: 100%;
+      height: 33vw;
+      padding: 7.5vw 0;
+      text-align: center;
+      h3 {
+        font-size: 1.5vw;
+        margin: 0 0 1.5vw;
+      }
+      p {
+        font-size: 0.7vw;
+        margin: 0 0 5vw;
+      }
+      .tool-item-list {
+        display: flex;
+        flex-direction: row;
+        padding: 0 25vw;
+        div {
+          background-repeat: no-repeat;
+          background-position: top center;
+          background-size: 5vw;
+          flex-grow: 1;
+          height: 8vw;
+          padding-top: 6vw;
+          h5 {
+            font-size: 0.8vw;
+            margin: 0;
+          }
+        }
+      }
+    }
+  }
+  .net-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 5vw 23.5vw 0;
+    div {
+      width: 5vw;
+      height: 5vw;
+      border-radius: 2.5vw;
+      background-color: #32373E;
+      color: #FFFFFF;
+      font-size: 0.8vw;
+      text-align: center;
+      line-height: 7.5vw;
+      position: relative;
+      background-size: 1.8vw;
+      background-position: center 0.9vw;
+      background-repeat: no-repeat;
+    }
+    div::after {
+      content: '';
+      display: inline-block;
+      width: 6vw;
+      height: 2px;
+      background-color: #32373E;
+      position: absolute;
+      left: 5vw;
+      top: 50%;
+    }
+    div:last-child::after {
+      display: none;
+    }
+  }
+  .tool-title {
+    text-align: center;
+    font-size: 1.5vw;
+    font-weight: 700;
+    color:#131820;
+    margin: 0;
+  }
+}
+</style>

src/views/login/pcComponents/TradeService.vue

@@ -0,0 +1,296 @@
+<template>
+  <div class="about-cont">
+    <div class="top-banner" />
+    <p class="tool-title" style="margin-top: 7vw;">进口商额度评估</p>
+    <p style="font-size: 0.7vw; color: #575757; margin-top: 1.5vw; text-align: center;">为跨境贸易的进口商提供包括保险公司、境内外银行、保理公司等专业机构的信用额度评估服务，有效避免贸易双方信息不对称，从而大幅提升合作的可行性与可靠性。</p>
+    <p class="tool-title" style="margin-top: 7vw;">服务流程</p>
+    <div class="net-area">
+      <div v-for="item in serviceList" :key="item.name" :style="{backgroundImage: `url(${item.icon})`}">
+        {{ item.name }}
+      </div>
+    </div>
+    <p class="tool-title" style="margin-top: 7vw; margin-bottom: 2vw;">快速查询进口商额度</p>
+    <div class="tabs-content">
+      <el-form
+        ref="tab2"
+        :model="form2"
+        :rules="rule2"
+        label-position="top"
+        class="form-box"
+      >
+        <el-form-item label="1、进口商所在的国家和地区" prop="region">
+          <el-radio-group v-model="form2.region" @change="regionChange">
+            <el-radio label="Asia">亚洲</el-radio>
+            <el-radio label="Europe">欧洲</el-radio>
+            <el-radio label="Africa">非洲</el-radio>
+            <el-radio label="NAmerica">北美洲</el-radio>
+            <el-radio label="SAmerica">南美洲</el-radio>
+            <el-radio label="Oceania">大洋洲</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="" prop="country">
+          <el-select v-model="form2.country" placeholder="请选择国家" @change="moneyUnit = ''; money = '--'">
+            <el-option
+              v-for="item in countryList"
+              :key="item.code"
+              :label="item.name"
+              :value="item.code"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="2、进口商有无官方网站?" prop="officialWebsite">
+          <el-radio-group v-model="form2.officialWebsite" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">有</el-radio>
+            <el-radio label="2">无</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="3、进口商企业类型" prop="buyerEnterpriseType">
+          <el-radio-group v-model="form2.buyerEnterpriseType" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">生产型</el-radio>
+            <el-radio label="2">贸易型</el-radio>
+            <el-radio label="3">服务类</el-radio>
+            <el-radio label="4">其他类</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="4、与进口商合作的时间?" prop="buyerCooperationTime">
+          <el-radio-group v-model="form2.buyerCooperationTime" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">6个月及以下</el-radio>
+            <el-radio label="2">6个月-1年 </el-radio>
+            <el-radio label="3">1-3年</el-radio>
+            <el-radio label="4">3年及以上</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item label="5、进口商历史最长回款账期" prop="buyerMaximumPaybackPeriod">
+          <el-radio-group v-model="form2.buyerMaximumPaybackPeriod" @change="moneyUnit = ''; money = '--'">
+            <el-radio label="1">无回款</el-radio>
+            <el-radio label="2">30—90天 </el-radio>
+            <el-radio label="3">90—120天</el-radio>
+            <el-radio label="4">120—180天</el-radio>
+            <el-radio label="5">180天及以上</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <template v-if="showResult">
+          <h5 class="caculate-money">预估授信额度：<span>{{ moneyUnit }} {{ money }}</span></h5>
+          <div class="caculate-desc">此额度只是初步估算所得，最终的授信额度将根据您的具体情况和申请资料综合确定。</div>
+        </template>
+        <el-button v-if="money === '--'" type="primary" @click="confirm">提交</el-button>
+        <el-button v-if="money !== '--'" type="primary" @click="toRegister">去注册</el-button>
+      </el-form>
+    </div>
+    <p class="tool-title" style="margin-top: 7vw; margin-bottom: 2vw;">合作伙伴</p>
+    <div class="friend-list">
+      <div v-for="item in friendsList" :key="item" :style="{backgroundImage: `url(${item})`}" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCountryByRegoin, getCreditQuota } from '@/api/common'
+export default {
+  data() {
+    return {
+      serviceList: [
+        { name: '填写核额信息', icon: require('@/assets/exportTrade/recordOrder.svg') },
+        { name: '系统在线评估', icon: require('@/assets/tradeService/asset-online.svg') },
+        { name: '评估结果反馈', icon: require('@/assets/tradeService/asset-question.svg') }
+      ],
+      form2: {
+        region: '',
+        officialWebsite: '',
+        buyerEnterpriseType: '',
+        buyerCooperationTime: '',
+        buyerMaximumPaybackPeriod: '',
+        country: ''
+      },
+      rule2: {
+        region: [
+          { required: true, message: '请选择进口商所在的国家和地区', trigger: 'change' }
+        ],
+        country: [
+          { required: true, message: '请选择进口商所在的国家和地区', trigger: 'blur' }
+        ],
+        officialWebsite: [
+          { required: true, message: '请选择进口商有无官方网站', trigger: 'change' }
+        ],
+        buyerEnterpriseType: [
+          { required: true, message: '请选择进口商企业类型', trigger: 'change' }
+        ],
+        buyerCooperationTime: [
+          { required: true, message: '请选择与进口商合作的时间', trigger: 'change' }
+        ],
+        buyerMaximumPaybackPeriod: [
+          { required: true, message: '请选择进口商历史最长回款账期', trigger: 'change' }
+        ]
+      },
+      money: '--',
+      moneyUnit: '',
+      friendsList: [
+        require('@/assets/tradeService/friend-1.svg'),
+        require('@/assets/tradeService/friend-2.svg'),
+        require('@/assets/tradeService/friend-3.svg'),
+        require('@/assets/tradeService/friend-4.svg'),
+        require('@/assets/tradeService/friend-5.svg'),
+        require('@/assets/tradeService/friend-6.svg'),
+        require('@/assets/tradeService/friend-7.svg'),
+        require('@/assets/tradeService/friend-8.svg')
+      ]
+    }
+  },
+  methods: {
+    toPage(url) {
+      window.open(url, '_blank')
+    },
+    confirm() {
+      this.$refs.tab2.validate(flag => {
+        if (flag) {
+          this.calcuteMethod()
+        }
+      })
+    },
+    // 查询国家
+    regionChange() {
+      if (this.form2.region) {
+        this.moneyUnit = ''
+        this.money = '--'
+        this.form2.country = ''
+        const postData = new FormData()
+        postData.append('continent', this.form2.region)
+        getCountryByRegoin(postData).then(res => {
+          this.countryList = res.data || []
+        })
+      }
+    },
+    // 计算授信额度
+    calcuteMethod() {
+      const data = { ...this.form2 }
+      getCreditQuota(data).then(res => {
+        this.$message.success('计算成功')
+        this.money = res.data.amount / 10000 + '万'
+        this.moneyUnit = res.data.currency === 'USD' ? '$ ' : '￥ '
+        this.showResult = true
+      })
+    },
+    toRegister() {
+      this.$store.commit('app/SET_REGISTER_STATE', true)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.about-cont {
+  background-color: #fff;
+  // padding: 0 0 180px;
+  .top-banner {
+    width: 90vw;
+    height: 30.5vw;
+    margin: 80px 5vw 0;
+    background: url('../../../assets/tradeService/bac.jpg') no-repeat center;
+    background-size: 100%;
+  }
+  .net-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin: 5vw 33vw 0;
+    div {
+      width: 5vw;
+      height: 5vw;
+      border-radius: 2.5vw;
+      background-color: #32373E;
+      color: #000000;
+      font-size: 0.8vw;
+      text-align: center;
+      line-height: 13vw;
+      position: relative;
+      background-size: 1.8vw;
+      background-position: center;
+      background-repeat: no-repeat;
+    }
+    div::after {
+      content: '';
+      display: inline-block;
+      width: 10vw;
+      height: 2px;
+      background-color: #32373E;
+      position: absolute;
+      left: 5vw;
+      top: 50%;
+    }
+    div:last-child::after {
+      display: none;
+    }
+  }
+  .tool-title {
+    text-align: center;
+    font-size: 1.5vw;
+    font-weight: 700;
+    color:#131820;
+    margin: 0;
+  }
+  .tabs-content {
+    width: 100vw;
+    display: flex;
+    justify-content: flex-end;
+    background-size: 100vw auto;
+    background-position: 0 0;
+    background-repeat: no-repeat;
+    background-image: url("../../../assets/login/kua-bac-2.jpg");
+    .form-box {
+      margin-top: 2vw;
+      margin-right: 8vw;
+      background-color:#F9FAFB;
+      box-shadow: 0 4px 25px #00000026;
+      width: 540px;
+      padding: 40px 50px;
+      .el-button {
+        width: 260px;
+        height: 40px;
+        margin-left: 50%;
+        transform: translateX(-50%);
+        margin-top: 1vw;
+        font-size: 14px
+      }
+      .caculate-money {
+        width: 100%;
+        text-align: center;
+        font-size: 18px;
+        font-weight: 400;
+        color: #222931;
+        margin-bottom: 10px;
+        span {
+          color: #FE7D0B;
+        }
+      }
+      .caculate-desc {
+        width: 100%;
+        font-size: 12px;
+        color: #666666;
+        line-height: 22px;
+        text-indent: 15px;
+        margin-bottom: 15px;
+      }
+      .el-form-item > .el-form-item__content > .el-radio-group > .el-radio {
+        margin-bottom: 10px;
+      }
+    }
+  }
+  .friend-list {
+    width: 48vw;
+    margin: 3vw auto 8vw;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    div {
+      width: 9vw;
+      height: 4vw;
+      background-size: 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+      margin-bottom: 2vw;
+      margin-right: 2vw;
+    }
+  }
+}
+</style>

src/views/login/pcComponents/TradeTool.vue

@@ -31,19 +31,18 @@ export default {
         { name: '商品HS编码', desc: '为平台店铺卖家提供综合服务', icon: require('@/assets/tradeTool/tool-1.svg'), activeIcon: require('@/assets/tradeTool/tool-1-1.svg'), url: 'https://wmsw.mofcom.gov.cn/wmsw/toolBox/codeContrast' },
         { name: '汇率牌价查询', desc: '为出口商客户提供贸易管理', icon: require('@/assets/tradeTool/tool-2.svg'), activeIcon: require('@/assets/tradeTool/tool-2-2.svg'), url: 'https://www.boc.cn/sourcedb/whpj/' },
         { name: '国别代码查询', desc: '为客户匹配多元化融资支持', icon: require('@/assets/tradeTool/tool-3.svg'), activeIcon: require('@/assets/tradeTool/tool-3-3.svg'), url: 'https://www.iban.hk/currency-codes' },
-        { name: 'CIF价格计算', desc: '为平台店铺卖家提供综合服务', icon: require('@/assets/tradeTool/tool-4.svg'), activeIcon: require('@/assets/tradeTool/tool-4-4.svg'), url: 'https://www.choicexp.com/tool/cif.htm' },
-        { name: 'FOB价格计算', desc: '为出口商客户提供贸易管理', icon: require('@/assets/tradeTool/tool-5.svg'), activeIcon: require('@/assets/tradeTool/tool-5-5.svg'), url: 'https://www.choicexp.com/tool/fob.htm' },
-        { name: '通关状态查询', desc: '为客户匹配多元化融资支持', icon: require('@/assets/tradeTool/tool-6.svg'), activeIcon: require('@/assets/tradeTool/tool-6-6.svg'), url: 'http://202.127.48.116:18001/static/pages/manifestQuery.html' },
-        { name: '海关政策查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-7.svg'), activeIcon: require('@/assets/tradeTool/tool-7-7.svg'), url: 'http://www.customs.gov.cn/customs/302249/302266/index.html' },
-        { name: '出口退税率查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-8.svg'), activeIcon: require('@/assets/tradeTool/tool-8-8.svg'), url: 'https://hd.chinatax.gov.cn/nszx/InitChukou.html' }
+        { name: '出口退税率查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-4.svg'), activeIcon: require('@/assets/tradeTool/tool-4-4.svg'), url: 'https://hd.chinatax.gov.cn/nszx/InitChukou.html' },
+        { name: 'CIF价格计算', desc: '为平台店铺卖家提供综合服务', icon: require('@/assets/tradeTool/tool-5.svg'), activeIcon: require('@/assets/tradeTool/tool-5-5.svg'), url: 'https://www.choicexp.com/tool/cif.htm' },
+        { name: 'FOB价格计算', desc: '为出口商客户提供贸易管理', icon: require('@/assets/tradeTool/tool-6.svg'), activeIcon: require('@/assets/tradeTool/tool-6-6.svg'), url: 'https://www.choicexp.com/tool/fob.htm' },
+        { name: '通关状态查询', desc: '为客户匹配多元化融资支持', icon: require('@/assets/tradeTool/tool-7.svg'), activeIcon: require('@/assets/tradeTool/tool-7-7.svg'), url: 'http://202.127.48.116:18001/static/pages/manifestQuery.html' },
+        { name: '海关政策查询', desc: '为进口商提供核额评估服务', icon: require('@/assets/tradeTool/tool-8.svg'), activeIcon: require('@/assets/tradeTool/tool-8-8.svg'), url: 'http://www.customs.gov.cn/customs/302249/302266/index.html' },
       ],
       netList: [
         { name: '海关单一窗口', url: 'https://www.singlewindow.cn/#/' },
         { name: '电子税务局网站', url: 'https://12366.chinatax.gov.cn/' },
         { name: '中国海关总署', url: 'http://www.customs.gov.cn/' },
         { name: '中国商务部', url: 'https://www.mofcom.gov.cn/' }
-      ],
-      activeIndex: ''
+      ]
     }
   },
   methods: {
@@ -87,6 +86,7 @@ export default {
       flex-grow: 1;
       box-shadow: 0.5vw 0.5vw 1.5vw #0000001A;
       border: 1px solid #73CBDD;
+      cursor: pointer;
       p {
         color: #575757;
         font-weight: 400;
@@ -147,6 +147,7 @@ export default {
       text-align: center;
       line-height: 3.5vw;
       background-color: #FAFDFF;
+      cursor: pointer;
     }
   }
   .tool-title {