diff --git a/src/assets/images/about-bg.png b/src/assets/images/about-bg.png
index 3075d83..d34e84b 100644
Binary files a/src/assets/images/about-bg.png and b/src/assets/images/about-bg.png differ
diff --git a/src/components/menuTree/index.vue b/src/components/menuTree/index.vue
index 593ef86..2a5c152 100644
--- a/src/components/menuTree/index.vue
+++ b/src/components/menuTree/index.vue
@@ -1,26 +1,19 @@
 <template>
   <div class="menu-child">
     <template v-for="item in this.menuList">
-      <el-submenu :popper-class="site == 2 && $store.getters.getModelType ? 'iasf-menu-popup' : ''"
-                  :class="{active: $route.query.id == item.id}"
-                  :key="item.id"
-                  :index="String(item.id)"
-                  :id="item.id"
-                  v-if="item.children && item.children.length && item.children.find(i=>i.menuVisible !==1)">
+      <el-submenu :popper-class="$store.getters.getModelType ? 'iasf-menu-popup' : isHome ? 'home-menu-popup' : ''"
+        :class="{ active: $route.query.id == item.id }" :key="item.id" :index="String(item.id)" :id="item.id"
+        v-if="item.children && item.children.length && item.children.find(i => i.menuVisible !== 1)">
         <template slot="title">
-          <span slot="title"
-                :id="item.id">{{item.columnName}}</span>
+          <span slot="title" :id="item.id">{{ item.columnName }}</span>
         </template>
         <menuTree :menuList="item.children"></menuTree>
       </el-submenu>
       <template v-else>
-        <template v-if="item.menuVisible!==1">
-          <el-menu-item :key="item.id"
-                        :id="item.id"
-                        :index="String(item.id)"
-                        :class="{active: $route.query.id == item.id}">
-            <span slot="title"
-                  :id="item.id">{{item.columnName}}</span>
+        <template v-if="item.menuVisible !== 1">
+          <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)"
+            :class="{ active: $route.query.id == item.id }">
+            <span slot="title" :id="item.id">{{ item.columnName }}</span>
           </el-menu-item>
         </template>
       </template>
@@ -55,38 +48,40 @@ export default {
 </script>
 <style lang="scss" scoped>
 .menu-child {
+  /deep/ .el-menu-item {
+    background-color: transparent !important;
+  }
+
+  &:hover {
+    background-color: transparent !important;
+  }
+}
+
+@media (max-width: 1200px) {
+  .menu-child {
     /deep/ .el-menu-item {
-        background-color: transparent !important;
+      height: 40px;
+      line-height: 40px;
+      color: black !important;
+      background-color: transparent !important;
     }
 
     &:hover {
-        background-color: transparent !important;
+      background-color: transparent !important;
     }
-}
-@media (max-width: 1200px) {
-    .menu-child {
-        /deep/ .el-menu-item {
-            height: 40px;
-            line-height: 40px;
-            color: black !important;
-            background-color: transparent !important;
-        }
+  }
 
-        &:hover {
-            background-color: transparent !important;
-        }
+  .el-submenu {
+    &:focus-visible {
+      outline: none;
     }
 
-    .el-submenu {
-        &:focus-visible {
-            outline: none;
-        }
-        /deep/ .el-submenu__title {
-            height: 40px;
-            line-height: 40px;
-            font-size: 1rem;
-            color: black !important;
-        }
+    /deep/ .el-submenu__title {
+      height: 40px;
+      line-height: 40px;
+      font-size: 1rem;
+      color: black !important;
     }
+  }
 }
 </style>
diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue
index 892ce73..2735695 100644
--- a/src/layouts/footer/index.vue
+++ b/src/layouts/footer/index.vue
@@ -1,82 +1,58 @@
 <template>
   <div>
-    <div v-if="showDefaultPath.includes($route.path)"
-         :class="['footer', {iasf: isIasf}]">
+    <div v-if="showDefaultPath.includes($route.path)" :class="['footer', { iasf: isIasf }]">
       <template v-if="isIasf">
         <div class="mask"></div>
-        <ul v-if="isIasf"
-            class="entry">
-          <li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
-              @click="openLink(modules[14].form)">
-            <img class="icon"
-                 :src="modules[14].form.pic"
-                 alt="">
+        <ul v-if="isIasf" class="entry">
+          <li :class="{ 'cursor-pointer': isLink(modules[13].form.link.linkName) }" @click="openLink(modules[14].form)">
+            <img class="icon" :src="modules[14].form.pic" alt="">
             <p class="text">{{ modules[14].form.title }}</p>
           </li>
-          <li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}"
-              @click="openLink(modules[15].form)">
-            <img class="icon"
-                 :src="modules[15].form.pic"
-                 alt="">
+          <li :class="{ 'cursor-pointer': isLink(modules[14].form.link.linkName) }" @click="openLink(modules[15].form)">
+            <img class="icon" :src="modules[15].form.pic" alt="">
             <p class="text">{{ modules[15].form.title }}</p>
           </li>
-          <li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}"
-              @click="openLink(modules[16].form)">
-            <img class="icon"
-                 :src="modules[16].form.pic"
-                 alt="">
+          <li :class="{ 'cursor-pointer': isLink(modules[15].form.link.linkName) }" @click="openLink(modules[16].form)">
+            <img class="icon" :src="modules[16].form.pic" alt="">
             <p class="text">{{ modules[16].form.title }}</p>
           </li>
-          <li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
-              @click="openLink(modules[17].form)">
-            <img class="icon"
-                 :src="modules[17].form.pic"
-                 alt="">
+          <li :class="{ 'cursor-pointer': isLink(modules[16].form.link.linkName) }" @click="openLink(modules[17].form)">
+            <img class="icon" :src="modules[17].form.pic" alt="">
             <p class="text">{{ modules[17].form.title }}</p>
           </li>
-          <li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
-              @click="openLink(modules[18].form)">
-            <img class="icon"
-                 :src="modules[18].form.pic"
-                 alt="">
+          <li :class="{ 'cursor-pointer': isLink(modules[17].form.link.linkName) }" @click="openLink(modules[18].form)">
+            <img class="icon" :src="modules[18].form.pic" alt="">
             <p class="text">{{ modules[18].form.title }}</p>
           </li>
         </ul>
       </template>
-      <div class="relative">
-        <div class="info">
-          <div class="leftBox">
-            <p class="meta">Copyright ©2002- 2021</p>
-            <p class="meta">Institute of Advanced Science Facilities, ShenzhenIASF</p>
-            <p class="meta">Tel：400-0010-998</p>
-          </div>
-          <div v-for="(item, i) in columns"
-               :key="i"
-               class="column">
-            <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
-            <ul v-if="item.children.length"
-                class="children">
-              <li v-for="(column, j) in item.children"
-                  :key="j"
-                  @click="columnTo(column)">{{ column.columnName }}</li>
-            </ul>
+      <div class="relative text-center">
+        <img src="https://huorantech.com/images/about/logo.png" alt="">
+        <div class="flex j-center a-center m-t-20">
+          <div class="flex">
+            <div v-for="(item, i) in columns" :key="i" class="column">
+              <h6 @click="columnTo(item)">{{ item.columnName }}</h6>
+              <ul v-if="item.children.length" class="children">
+                <li v-for="(column, j) in item.children" :key="j" @click="columnTo(column)">{{ column.columnName }}</li>
+              </ul>
+            </div>
           </div>
         </div>
-        <a class="copyright">粤ICP备2020131940号 粤公安网34565432456765432号</a>
+        <div class="text-center">
+          <p class="meta">广东省深圳市龙华区民治街道红山社区龙光玖钻商务中心南期A座2311</p>
+          <a class="copyright" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
+        </div>
       </div>
     </div>
 
-    <div v-if="showContactPath.includes($route.path)"
-         class="contact">
+    <div v-if="showContactPath.includes($route.path)" class="contact">
       <div class="inner">
         <div class="title">
           <h6>Contact us</h6>
           <p class="text">CONTACT US</p>
         </div>
         <div class="region">
-          <img class="dot"
-               src="@/assets/images/dot.png"
-               alt="">
+          <img class="dot" src="@/assets/images/dot.png" alt="">
           <p class="name">Shenzhen</p>
         </div>
         <div class="info">
@@ -86,22 +62,17 @@
           <div class="texts">
             <div class="lines">
               <div class="line">
-                <img class="icon"
-                     src="@/assets/images/mail.png"
-                     alt="">
+                <img class="icon" src="@/assets/images/mail.png" alt="">
                 Email: {{ isSfel ? 'fel@mail.iasf.ac.cn' : 'std@mail.iasf.ac.cn' }}
               </div>
               <div class="line">
-                <img class="icon"
-                     src="@/assets/images/tel.png"
-                     alt="">
+                <img class="icon" src="@/assets/images/tel.png" alt="">
                 Telephone: {{ isSfel ? '0755-21096052' : '0086-755-21096026' }}
               </div>
               <div class="line">
-                <img class="icon"
-                     src="@/assets/images/address.png"
-                     alt="">
-                Address: {{ isSfel ? '自由电子激光工程经理部' : '268 Zhenyuan St, Building A3, Floor 3-6, Guangming District, Shenzhen, Guangdong, P.R.China' }}
+                <img class="icon" src="@/assets/images/address.png" alt="">
+                Address: {{ isSfel ? '自由电子激光工程经理部' :
+                  '268 Zhenyuan St, Building A3, Floor 3-6, Guangming District, Shenzhen, Guangdong, P.R.China' }}
               </div>
             </div>
             <div class="qrcode">
@@ -244,190 +215,223 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.leftBox {
-    margin-right: 100px;
-}
 .footer {
-    position: relative;
-    padding: 64px 20% 25px;
-    color: #fff;
-    background-color: #091733;
-    overflow: hidden;
-    .info {
-        display: flex;
-    }
-    .meta {
-        margin-bottom: 10px;
-        font-size: 14px;
+  position: relative;
+  padding: 48px 20% 25px;
+  color: #fff;
+  background-color: #091733;
+  overflow: hidden;
+
+  .info {
+    display: flex;
+  }
+
+  .meta {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  .column {
+    margin: 0 20px;
+
+    h6 {
+      margin-bottom: 20px;
+      font-size: 16px;
+      white-space: nowrap;
+      cursor: pointer;
     }
-    .column {
-        margin: 0 20px;
-        h6 {
-            margin-bottom: 20px;
-            font-size: 16px;
-            white-space: nowrap;
-            cursor: pointer;
-        }
+  }
+
+  .children {
+    li {
+      margin: 12px 0;
+      font-size: 14px;
+      color: #6d7384;
+      white-space: nowrap;
+      cursor: pointer;
     }
+  }
+
+  .copyright {
+    font-size: 14px;
+    color: #6d7384;
+  }
+
+  &.iasf {
+    padding-top: 50px;
+    background: url(http://10.10.11.7/images/iasf/footer.jpg) 0 -400px/100% auto no-repeat;
+    background-color: #091733;
+
     .children {
-        li {
-            margin: 12px 0;
-            font-size: 14px;
-            color: #6d7384;
-            white-space: nowrap;
-            cursor: pointer;
-        }
-    }
-    .copyright {
-        font-size: 14px;
-        color: #6d7384;
+      li {
+        color: #fff;
+      }
     }
-    &.iasf {
-        padding-top: 50px;
-        background: url(http://10.10.11.7/images/iasf/footer.jpg) 0 -400px/100% auto no-repeat;
-        background-color: #091733;
-        .children {
-            li {
-                color: #fff;
-            }
-        }
-        .mask {
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            background-color: rgba(0, 0, 0, 0.6);
-        }
+
+    .mask {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: rgba(0, 0, 0, 0.6);
     }
+  }
 }
+
 .entry {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 100px;
-    li {
-        display: inline-flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        text-align: center;
-    }
-    img {
-        max-width: 100px;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 100px;
+
+  li {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  img {
+    max-width: 100px;
+  }
+
+  .text {
+    margin-top: 15px;
+    font-size: 1rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #fff;
+  }
+}
+
+.contact {
+  position: relative;
+  padding: 0 0 73px 0;
+  background: url(../../assets/images/map.png) 0 0 / cover no-repeat;
+
+  .inner {
+    width: 1082px;
+    margin: 0 auto;
+  }
+
+  .title {
+    width: 419px;
+    height: 263px;
+    padding: 147px 0 0 40px;
+    background-color: #0854fe;
+
+    h6 {
+      z-index: 2;
+      position: relative;
+      margin-bottom: 20px;
+      font-size: 45px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #fff;
     }
+
     .text {
-        margin-top: 15px;
-        font-size: 1rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        color: #fff;
+      margin-top: -65px;
+      font-size: 48px;
+      -webkit-text-fill-color: transparent;
+      -webkit-text-stroke: 1px #4073e5;
     }
-}
-.contact {
-    position: relative;
-    padding: 0 0 73px 0;
-    background: url(../../assets/images/map.png) 0 0 / cover no-repeat;
-    .inner {
-        width: 1082px;
-        margin: 0 auto;
+  }
+
+  .region {
+    position: absolute;
+    top: 152px;
+    left: 70%;
+    display: flex;
+    align-items: center;
+    font-size: 20px;
+    color: #fff;
+
+    img {
+      margin-right: 20px;
     }
-    .title {
-        width: 419px;
-        height: 263px;
-        padding: 147px 0 0 40px;
-        background-color: #0854fe;
-        h6 {
-            z-index: 2;
-            position: relative;
-            margin-bottom: 20px;
-            font-size: 45px;
-            font-family: PingFangSC-Semibold, PingFang SC;
-            font-weight: 600;
-            color: #fff;
-        }
-        .text {
-            margin-top: -65px;
-            font-size: 48px;
-            -webkit-text-fill-color: transparent;
-            -webkit-text-stroke: 1px #4073e5;
-        }
+  }
+
+  .info {
+    margin: 55px 0 0 8px;
+
+    .texts {
+      display: flex;
+      align-items: center;
+      margin-top: 24px;
     }
-    .region {
-        position: absolute;
-        top: 152px;
-        left: 70%;
-        display: flex;
-        align-items: center;
-        font-size: 20px;
-        color: #fff;
-        img {
-            margin-right: 20px;
-        }
+
+    .item {
+      margin-right: 75px;
     }
-    .info {
-        margin: 55px 0 0 8px;
-        .texts {
-            display: flex;
-            align-items: center;
-            margin-top: 24px;
-        }
-        .item {
-            margin-right: 75px;
-        }
-        .line {
-            display: flex;
-            align-items: center;
-            margin-bottom: 20px;
-            font-size: 16px;
-            color: #fff;
-            img {
-                margin-right: 8px;
-            }
-        }
+
+    .line {
+      display: flex;
+      align-items: center;
+      margin-bottom: 20px;
+      font-size: 16px;
+      color: #fff;
+
+      img {
+        margin-right: 8px;
+      }
     }
-    .qrcode {
-        text-align: center;
-        .text {
-            margin-top: 10px;
-            font-size: 12px;
-            color: #fff;
-        }
+  }
+
+  .qrcode {
+    text-align: center;
+
+    .text {
+      margin-top: 10px;
+      font-size: 12px;
+      color: #fff;
     }
+  }
 }
+
 @media (max-width: 1500px) {
-    .footer {
-        padding: 64px 10% 25px;
-    }
+  .footer {
+    padding: 64px 10% 25px;
+  }
 }
+
 @media (max-width: 1350px) {
-    .inner {
-        width: 100% !important;
-        .title {
-            width: 100%;
-            text-align: center;
-        }
-        .region {
-            top: 300px;
-            left: 50%;
-        }
-        .info {
-            margin-top: 90px;
-        }
+  .inner {
+    width: 100% !important;
+
+    .title {
+      width: 100%;
+      text-align: center;
     }
-    .footer {
-        .info {
-            flex-direction: column;
-            .column {
-                margin-top: 20px;
-                margin-left: 0;
-            }
-        }
+
+    .region {
+      top: 300px;
+      left: 50%;
     }
-    .entry {
-        flex-direction: column;
-        li {
-            margin-bottom: 30px;
-        }
+
+    .info {
+      margin-top: 90px;
+    }
+  }
+
+  .footer {
+    .info {
+      flex-direction: column;
+
+      .column {
+        margin-top: 20px;
+        margin-left: 0;
+      }
+    }
+  }
+
+  .entry {
+    flex-direction: column;
+
+    li {
+      margin-bottom: 30px;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index 656e990..7a144cd 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -1,47 +1,30 @@
 <template>
-  <div :class="['header', { estate: isEstate, iasf: isIasf }]">
-    <a class="logo"
-       @click="toIndex">
+  <div :class="['header', { channel: isHome, estate: isEstate, iasf: isIasf }]">
+    <a class="logo" @click="toIndex">
       <template v-if="GTA">
-        <img src="@/assets/images/logo2.png"
-             alt="">
+        <img src="@/assets/images/logo2.png" alt="">
         产业学院平台
       </template>
 
-      <img v-else
-           src="@/assets/images/logo.png"
-           alt="">
+      <img v-else src="@/assets/images/logo.png" alt="">
     </a>
     <!-- pc端 -->
     <template v-if="$store.getters.getModelType">
-      <navbar v-if="navShow"
-              ref="nav"
-              :isHome.sync="isHome"
-              :isEstate.sync="isEstate"
-              :isIasf.sync="isIasf"
-              @showMoreBtns="updateBtnsType"></navbar>
+      <navbar v-if="navShow" ref="nav" :isHome.sync="isHome" :isEstate.sync="isEstate" :isIasf.sync="isIasf"
+        @showMoreBtns="updateBtnsType"></navbar>
       <div class="tools">
-        <div class="login"
-             @click="toLogin">
-          <img src="@/assets/images/user.png"
-               alt="">
+        <div class="login" @click="toLogin">
+          <img src="@/assets/images/user.png" alt="">
           <span>注册登录</span>
         </div>
       </div>
     </template>
     <!-- 手机端 -->
-    <div v-else
-         class="mobile-tools">
-      <i class="login el-icon-user-solid"
-         @click="toLogin"></i>
-      <i class="menu-icon"
-         :class="modelType ? 'el-icon-s-fold': 'el-icon-s-unfold' "
-         @click.stop="updateModelType"></i>
-      <div class="contentBox"
-           v-show="modelType">
-        <navbar ref="nav"
-                :isHome.sync="isHome"
-                @updateModelType="updateType"></navbar>
+    <div v-else class="mobile-tools">
+      <i class="login el-icon-user-solid" @click="toLogin"></i>
+      <i class="menu-icon" :class="modelType ? 'el-icon-s-fold' : 'el-icon-s-unfold'" @click.stop="updateModelType"></i>
+      <div class="contentBox" v-show="modelType">
+        <navbar ref="nav" :isHome.sync="isHome" @updateModelType="updateType"></navbar>
       </div>
     </div>
 
@@ -187,142 +170,165 @@ export default {
 </script>
 <style scoped lang="scss">
 $height: 90px;
+
 .header {
-    z-index: 10;
-    position: fixed;
-    top: 0;
-    left: 0;
-    display: flex;
-    justify-content: space-between;
+  z-index: 10;
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: $height;
+  padding: 0 5% 0 5%;
+
+  &:not(.channel) {
+    background-color: #fff;
+    border-bottom: 1px solid #f7f7f7;
+  }
+
+  &.estate {
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+
+  .logo {
+    display: inline-flex;
     align-items: center;
-    width: 100%;
-    height: $height;
-    padding: 0 5% 0 5%;
-    &:not(.channel) {
-        background-color: #fff;
-        border-bottom: 1px solid #f7f7f7;
-    }
-    &.estate {
-        background-color: rgba(0, 0, 0, 0.15);
-    }
-    .logo {
-        display: inline-flex;
-        align-items: center;
-        font-size: 20px;
-        font-weight: 600;
-        color: #333;
-        cursor: pointer;
-        img {
-            width: 150px;
-        }
-    }
-    .tools {
-        .login {
-            display: inline-flex;
-            align-items: center;
-            cursor: pointer;
-            &:hover {
-                opacity: 0.9;
-            }
-            span {
-                margin-left: 5px;
-                color: #666;
-                font-size: 14px;
-            }
-        }
-    }
-    .search {
-        margin-right: 43px;
+    font-size: 20px;
+    font-weight: 600;
+    color: #333;
+    cursor: pointer;
+
+    img {
+      width: 150px;
     }
-    .mobile-tools {
-        display: inline-flex;
-        align-items: center;
-        .login {
-            font-size: 1.5rem;
-            color: #c1c1c1;
-            cursor: pointer;
-        }
+  }
+
+  .tools {
+    .login {
+      display: inline-flex;
+      align-items: center;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      span {
+        margin-left: 5px;
+        color: #666;
+        font-size: 14px;
+      }
     }
-    .menu-icon {
-        margin-left: 10px;
-        font-size: 1.8rem;
-        color: #c1c1c1;
-        cursor: pointer;
+  }
+
+  .search {
+    margin-right: 43px;
+  }
+
+  .mobile-tools {
+    display: inline-flex;
+    align-items: center;
+
+    .login {
+      font-size: 1.5rem;
+      color: #c1c1c1;
+      cursor: pointer;
     }
+  }
+
+  .menu-icon {
+    margin-left: 10px;
+    font-size: 1.8rem;
+    color: #c1c1c1;
+    cursor: pointer;
+  }
 }
+
 .search-wrap {
-    position: absolute;
-    top: 67px;
-    right: 89px;
-    display: flex;
-    align-items: center;
-    padding: 10px 15px 10px 10px;
-    background-color: #fff;
-    box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3);
-    input {
-        width: 300px;
-        height: 40px;
-        padding: 0 40px 0 15px;
-        font-size: 1.14rem;
-        color: #333;
-        line-height: 46px;
-        border: 0;
-        border-radius: 4px;
-        outline: none;
-    }
-    .search-icon {
-        padding-right: 15px;
-        margin: 0 15px;
-        cursor: pointer;
-        border-right: 1px solid #ccc;
-    }
-    .close-icon {
-        font-size: 2rem;
-        cursor: pointer;
-    }
+  position: absolute;
+  top: 67px;
+  right: 89px;
+  display: flex;
+  align-items: center;
+  padding: 10px 15px 10px 10px;
+  background-color: #fff;
+  box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.3);
+
+  input {
+    width: 300px;
+    height: 40px;
+    padding: 0 40px 0 15px;
+    font-size: 1.14rem;
+    color: #333;
+    line-height: 46px;
+    border: 0;
+    border-radius: 4px;
+    outline: none;
+  }
+
+  .search-icon {
+    padding-right: 15px;
+    margin: 0 15px;
+    cursor: pointer;
+    border-right: 1px solid #ccc;
+  }
+
+  .close-icon {
+    font-size: 2rem;
+    cursor: pointer;
+  }
 }
+
 .menu-child {
-    /deep/ .el-submenu__title {
-        font-size: 1rem;
-    }
+  /deep/ .el-submenu__title {
+    font-size: 1rem;
+  }
 }
+
 .contentBox {
-    width: 100%;
-    position: absolute;
-    top: 90px;
-    left: 0;
-    background-color: white;
-    z-index: 9999;
-    max-height: 30rem;
-    overflow-y: scroll;
+  width: 100%;
+  position: absolute;
+  top: 90px;
+  left: 0;
+  background-color: white;
+  z-index: 9999;
+  max-height: 30rem;
+  overflow-y: scroll;
 }
+
 @media (max-width: 1660px) {
-    .header {
-        .logo {
-            left: 10px;
-        }
-        .search {
-            margin-right: 20px !important;
-        }
-        .tools {
-            right: 30px;
-        }
+  .header {
+    .logo {
+      left: 10px;
+    }
+
+    .search {
+      margin-right: 20px !important;
     }
+
+    .tools {
+      right: 30px;
+    }
+  }
 }
 
 @media (max-width: 1200px) {
-    .header {
-        color: black !important;
-        background-color: #fff;
-    }
-    .search-wrap {
-        right: 10px;
-        top: 0;
-        width: 70%;
-        input {
-            width: 15rem;
-            padding: 0 0.5rem 0 0.1rem;
-        }
+  .header {
+    color: black !important;
+    background-color: #fff;
+  }
+
+  .search-wrap {
+    right: 10px;
+    top: 0;
+    width: 70%;
+
+    input {
+      width: 15rem;
+      padding: 0 0.5rem 0 0.1rem;
     }
+  }
 }
 </style>
diff --git a/src/layouts/home/index.vue b/src/layouts/home/index.vue
index 45e14ce..73e1238 100644
--- a/src/layouts/home/index.vue
+++ b/src/layouts/home/index.vue
@@ -2,8 +2,7 @@
   <div :class="['main', { channel: isHome, 'site-en': handleClass() }]">
     <v-head ref="header"></v-head>
     <div class="layout">
-      <transition name="move"
-                  mode="out-in">
+      <transition name="move" mode="out-in">
         <router-view class="view"></router-view>
       </transition>
       <el-backtop target=".layout"></el-backtop>
@@ -77,9 +76,10 @@ export default {
 </script>
 <style lang="scss" scoped>
 .main:not(.channel) {
-    min-height: calc(100% - 90px);
-    .layout {
-        padding-top: 90px;
-    }
+  min-height: calc(100% - 90px);
+
+  .layout {
+    padding-top: 90px;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index 49aee24..28975c8 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -1,19 +1,12 @@
 <template>
   <div>
-    <el-menu :class="['nav', {estate: isEstate,changing: !showMenu}]"
-             ref="elMenu"
-             :key="menuRefresh"
-             :mode="$store.getters.getModelType ? 'horizontal' : 'vertical' "
-             :background-color="bgColor"
-             :text-color="textColor"
-             :active-text-color="activeTextColor"
-             @open="jump"
-             @select="jump"
-             :default-active="String(active)">
+    <el-menu :class="['nav', { home: isHome, estate: isEstate, changing: !showMenu }]" ref="elMenu" :key="menuRefresh"
+      :mode="$store.getters.getModelType ? 'horizontal' : 'vertical'" :background-color="bgColor"
+      :text-color="textColor" :active-text-color="activeTextColor" @open="jump" @select="jump"
+      :default-active="String(active)">
       <menuTree :menuList="menus" />
-      <el-submenu :popper-class="site == 2 && $store.getters.getModelType ? 'iasf-menu-popup' : ''"
-                  v-show="showMoreBtns"
-                  index="522222">
+      <el-submenu :popper-class="$store.getters.getModelType ? 'iasf-menu-popup' : isHome ? 'home-menu-popup' : ''"
+        v-show="showMoreBtns" index="522222">
         <template slot="title">
           <div class="moreBtns">{{ $t('column.more') }}</div>
         </template>
@@ -30,7 +23,7 @@ import mixins from '@/mixins/article'
 import { mapMutations, mapGetters } from 'vuex'
 import Setting from '@/setting'
 export default {
-  props: ['isEstate', 'isIasf'],
+  props: ['isHome', 'isEstate', 'isIasf'],
   mixins: [mixins],
   data () {
     return {
@@ -65,12 +58,18 @@ export default {
         this.getColumn()
         this.setSite(siteId)
       }
+      this.handleColor()
+    },
+    isHome () {
+      this.handleColor()
     },
     getNavSum () {
       this.getColumn()
     }
   },
   mounted () {
+    this.lastHome = this.isHome
+    this.handleColor()
     this.getColumn()
   },
   methods: {
@@ -120,6 +119,19 @@ export default {
         }
       }).catch(err => { })
     },
+    // 改变菜单颜色
+    handleColor () {
+      const home = this.isHome
+      if (this.lastHome !== home) this.showMenu = false
+      this.bgColor = home ? 'transparent' : '#fff'
+      this.lastHome !== home && this.$nextTick(() => {
+        setTimeout(() => {
+          this.showMenu = true
+        }, 200)
+      })
+      this.lastHome = home
+      // this.menuRefresh++
+    },
     // 获取点击菜单的路径
     getPath (data, id) {
       for (const e of data) {
@@ -146,82 +158,100 @@ export default {
 
 <style lang="scss" scoped>
 $height: 90px;
+
 .moreBtns {
-    font-size: 1rem;
-    font-weight: bold;
-    padding-top: 0.2rem;
+  font-size: 1rem;
+  font-weight: bold;
+  padding-top: 0.2rem;
 }
+
 .changing {
-    opacity: 0;
+  opacity: 0;
 }
+
 /deep/.nav.el-menu--horizontal {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  border: 0;
+  outline: none;
+
+  .el-menu-item,
+  .el-submenu__title {
+    height: $height;
+    line-height: $height;
+
+    span {
+      font-size: 1rem;
+      font-weight: 600;
+    }
+
+    &:hover {
+      background-color: transparent !important;
+
+      span {
+        color: #499eff;
+      }
+    }
+  }
+
+  .el-submenu__title {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .menu-child {
     display: flex;
-    position: absolute;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-    border: 0;
-    outline: none;
+  }
+
+  .el-submenu__icon-arrow {
+    position: static;
+    margin: 0 0 0 5px;
+    color: inherit;
+  }
+
+  .is-active {
+    color: #333 !important;
+  }
+
+  .active,
+  .active .el-submenu__title {
+    color: #1583ff !important;
+  }
+
+  &.home {
+
     .el-menu-item,
     .el-submenu__title {
-        height: $height;
-        line-height: $height;
+      &:hover {
+        background-color: transparent !important;
+
         span {
-            font-size: 1rem;
-            font-weight: 600;
+          color: #499eff;
         }
-        &:hover {
-            background-color: transparent !important;
-            span {
-                color: #1583ff;
-            }
-        }
-    }
-    .el-submenu__title {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-    }
-    .menu-child {
-        display: flex;
-    }
-    .el-submenu__icon-arrow {
-        position: static;
-        margin: 0 0 0 5px;
-        color: inherit;
+      }
     }
+
     .is-active {
-        color: #333 !important;
+      color: #f9f9f9 !important;
     }
+
     .active,
     .active .el-submenu__title {
-        color: #1583ff !important;
-    }
-    &.home {
-        .el-menu-item,
-        .el-submenu__title {
-            &:hover {
-                background-color: transparent !important;
-                span {
-                    color: #fff;
-                }
-            }
-        }
-        .is-active {
-            color: #f9f9f9 !important;
-        }
-        .active,
-        .active .el-submenu__title {
-            color: #fff !important;
-        }
+      color: #1583ff !important;
     }
+  }
 }
+
 @media (max-width: 1200px) {
-    /deep/.nav {
-        .el-menu-item {
-            padding: 0 8px;
-            color: black !important;
-        }
+  /deep/.nav {
+    .el-menu-item {
+      padding: 0 8px;
+      color: black !important;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/mixins/page/index.js b/src/mixins/page/index.js
index 5af307a..a487066 100644
--- a/src/mixins/page/index.js
+++ b/src/mixins/page/index.js
@@ -1,25 +1,36 @@
-import Setting from '@/setting'
 import Util from '@/libs/util'
 export default {
-  data() {
+  data () {
     return {
       id: this.$route.query.id,
       preview: this.$route.query.preview,
+      listPreview: this.$route.query.listPreview,
       modules: [],
       articles: []
     }
   },
   computed: {
-    site() {
+    site () {
       return this.$route.query.siteId || this.$store.state.content.site
     }
   },
-  mounted() {
-    this.getInfo && this.$route.query.id && this.getInfo()
+  mounted () {
+    this.getInfo && this.$route.query.id && this.init()
   },
   methods: {
+    // 初始化
+    async init () {
+      // 预览直接可以看长页
+      if (this.listPreview || this.preview) {
+        this.getInfo()
+      } else {
+        // 前台正常进入长页，则需要先判断该长页的导航菜单字段是否被禁用
+        const { data } = await this.$post(`${this.api.findColumn}?id=${this.id}`)
+        data.menuVisible || this.getInfo()
+      }
+    },
     // 打开链接
-    async openLink(item) {
+    async openLink (item) {
       const { link } = item
       if (link.linkName === '无' || link.linkName === '') return false
       let href = link.linkAddress
@@ -58,28 +69,28 @@ export default {
         this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
           href = this.$router.resolve(href + '&id=' + this.id + '&columnName=' + data.columnName + '&path=' + this.$route.path.replace('/', '')).href
           this.toHref(link.isOpen, href)
-        }).catch(res => {})
+        }).catch(res => { })
       } else {
         this.toHref(link.isOpen, href)
       }
     },
     // 跳转地址
-    toHref(isOpen, href) {
+    toHref (isOpen, href) {
       if (isOpen) {
         var userAgent = navigator.userAgent;
         var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
-        if(isSafari) {
+        if (isSafari) {
           window.location.href = href
-        }else {
+        } else {
           window.open(href)
         }
       } else {
-        
+
         window.location.href = href
       }
     },
     // 跳转文章页面
-    toArtice(item, form) {
+    toArtice (item, form) {
       if (item.articleTemplate === 24) { // 链接
         let href = item.linkAddress
         const cType = item.connectionType
@@ -103,15 +114,15 @@ export default {
       }
     },
     // 关联栏目的查看全部跳转
-    toAll(form) {
+    toAll (form) {
       this.$router.push(`/column?id=${form.column[form.column.length - 1]}&siteId=${form.site}`)
     },
     // 判断是否有添加链接
-    isLink(linkName) {
+    isLink (linkName) {
       return linkName !== '无' && linkName !== ''
     },
     // 关联栏目专用，获取栏目标题
-    getColumnTitle(form) {
+    getColumnTitle (form) {
       return form.columnTitle == 1 ? form.columnName : form.columnTitleCustom
     }
   }
diff --git a/src/pages/aboutUs/index.vue b/src/pages/aboutUs/index.vue
index ce64bcc..c8592a4 100644
--- a/src/pages/aboutUs/index.vue
+++ b/src/pages/aboutUs/index.vue
@@ -1,43 +1,24 @@
 <template>
   <div class="wrap index">
-    <el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length"
-                 class="carousel"
-                 :interval="6000"
-                 height="480px"
-                 :arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
-                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel v-if="modules[0].list.length && modules[0].list.filter(e => e.isEnable).length" class="carousel"
+      :interval="6000" height="480px" :arrow="(modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+      :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable"
-                          :key="i">
-          <div v-if="isImg(item.mediaType)"
-               class="pic"
-               :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
-          <video v-else
-                 class="pic"
-                 width="100%"
-                 height="100%"
-                 autoplay
-                 muted
-                 loop>
-            <source :src="item.pic"
-                    type="video/mp4">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div v-if="isImg(item.mediaType)" class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
+          <video v-else class="pic" width="100%" height="100%" autoplay muted loop>
+            <source :src="item.pic" type="video/mp4">
             您的浏览器不支持 video 标签。
           </video>
           <div class="text-wrap">
-            <div class="text"
-                 v-html="item.des"></div>
-            <div v-if="!GTA"
-                 class="qrcodes fadeInUp">
+            <div class="text" v-html="item.des"></div>
+            <div v-if="!GTA" class="qrcodes fadeInUp">
               <div class="qrcode">
-                <img width="103"
-                     :src="item.weixinPic1"
-                     alt="">
+                <img width="103" :src="item.weixinPic1" alt="">
                 <p class="text">{{ item.weixinText1 }}</p>
               </div>
               <div class="qrcode m-l-30">
-                <img width="103"
-                     :src="item.weixinPic2"
-                     alt="">
+                <img width="103" :src="item.weixinPic2" alt="">
                 <p class="text">{{ item.weixinText2 }}</p>
               </div>
             </div>
@@ -46,23 +27,15 @@
       </template>
     </el-carousel>
 
-    <div v-else
-         class="banner fadeInUp">
-      <img class="texts"
-           src="https://huorantech.com/images/about/banner-text.png"
-           alt="">
-      <div v-if="!GTA"
-           class="qrcodes">
+    <div v-else class="banner fadeInUp">
+      <img class="texts" src="https://huorantech.com/images/about/banner-text.png" alt="">
+      <div v-if="!GTA" class="qrcodes">
         <div class="qrcode">
-          <img width="103"
-               src="https://huorantech.com/images/about/qrcode.jpg"
-               alt="">
+          <img width="103" src="https://huorantech.com/images/about/qrcode.jpg" alt="">
           <p class="text">扫一扫，关注公众号</p>
         </div>
         <div class="qrcode m-l-30">
-          <img width="103"
-               src="@/assets/images/mini-program-sm.jpg"
-               alt="">
+          <img width="103" src="@/assets/images/mini-program-sm.jpg" alt="">
           <p class="text">扫一扫，登录职站商城</p>
         </div>
       </div>
@@ -77,12 +50,9 @@
               <p class="brief fadeInLeft">{{ modules[1].form.subTitle1 }}</p>
               <p class="en fadeInRight">{{ modules[1].form.subTitle2 }}</p>
             </div>
-            <div class="desc animate"
-                 v-html="modules[1].form.des"></div>
+            <div class="desc animate" v-html="modules[1].form.des"></div>
           </div>
-          <img class="bg fadeInRight"
-               :src="modules[1].form.pic"
-               alt="">
+          <img class="bg fadeInRight" :src="modules[1].form.pic" alt="">
         </div>
       </div>
     </div>
@@ -98,14 +68,10 @@
         <p class="en fadeInUp">{{ modules[3].form.des }}</p>
         <ul class="list">
           <template v-for="(item, i) in modules[4].list">
-            <li v-if="item.isEnable"
-                :key="i"
-                class="fadeInUp">
-              <img :src="item.pic"
-                   alt="">
+            <li v-if="item.isEnable" :key="i" class="fadeInUp">
+              <img :src="item.pic" alt="">
               <h6>{{ item.title }}</h6>
-              <div class="text"
-                   v-html="item.des"></div>
+              <div class="text" v-html="item.des"></div>
             </li>
           </template>
         </ul>
@@ -113,8 +79,7 @@
     </div>
 
     <!-- 为什么加入我们 -->
-    <div class="adv"
-         id="part2">
+    <div class="adv" id="part2">
       <div class="inner">
         <h6 class="i-title animate">{{ modules[5].form.title }}</h6>
         <p class="en fadeInUp">{{ modules[5].form.subTitle }}</p>
@@ -122,14 +87,10 @@
 
         <ul class="list">
           <template v-for="(item, i) in modules[6].list">
-            <li v-if="item.isEnable"
-                :key="i"
-                class="fadeInUp">
-              <img :src="item.pic"
-                   alt="">
+            <li v-if="item.isEnable" :key="i" class="fadeInUp">
+              <img :src="item.pic" alt="">
               <h6>{{ item.title }}</h6>
-              <div class="text"
-                   v-html="item.des"></div>
+              <div class="text" v-html="item.des"></div>
             </li>
           </template>
         </ul>
@@ -142,48 +103,36 @@
         <p class="en fadeInUp">{{ modules[7].form.subTitle }}</p>
         <p class="title-des animate">{{ modules[7].form.des }}</p>
 
-				
-				<el-carousel class="carousel" height="372px"
-                 :interval="6000"
-                 :arrow="(modules[8] && modules[8].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
-                 :indicator-position="modules[8].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
-					<template v-for="(item, i) in modules[8].list">
-						<el-carousel-item v-if="item.isEnable" :key="i">
-							<div class="client-pic" :class="{'cursor-pointer': isLink(item.link.linkName)}"
-                     @click="openLink(item)">
-								<img class="bg fadeInLeft"
-										:src="item.pic"
-										alt="">
-								<div class="text fadeInRight">
-									<div class="c-title1">
-										<img src="https://huorantech.com/images/index/comma1.png"
-												alt="">
-										{{ item.title }}
-									</div>
-									<div class="text"
-											v-html="item.des"></div>
-									<div class="c-title2">
-										{{ item.subTitle }}
-										<img src="https://huorantech.com/images/index/comma2.png"
-												alt="">
-									</div>
-								</div>
-							</div>
-						</el-carousel-item>
-					</template>
-				</el-carousel>
-
-
-        <scroll class="clients"
-                :data="clients"
-                :class-option="{limitMoveNum: 2, direction: 2}">
-          <ul class="client-list"
-              ref="client">
+
+        <el-carousel class="carousel" height="372px" :interval="6000"
+          :arrow="(modules[8] && modules[8].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+          :indicator-position="modules[8].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+          <template v-for="(item, i) in modules[8].list">
+            <el-carousel-item v-if="item.isEnable" :key="i">
+              <div class="client-pic" :class="{ 'cursor-pointer': isLink(item.link.linkName) }" @click="openLink(item)">
+                <img class="bg fadeInLeft" :src="item.pic" alt="">
+                <div class="text fadeInRight">
+                  <div class="c-title1">
+                    <img src="https://huorantech.com/images/index/comma1.png" alt="">
+                    {{ item.title }}
+                  </div>
+                  <div class="text" v-html="item.des"></div>
+                  <div class="c-title2">
+                    {{ item.subTitle }}
+                    <img src="https://huorantech.com/images/index/comma2.png" alt="">
+                  </div>
+                </div>
+              </div>
+            </el-carousel-item>
+          </template>
+        </el-carousel>
+
+
+        <scroll class="clients" :data="clients" :class-option="{ limitMoveNum: 2, direction: 2 }">
+          <ul class="client-list" ref="client">
             <template v-for="item in modules[9].list">
-              <li v-if="item.isEnable"
-                  :key="item">
-                <img :src="item.pic"
-                     alt="">
+              <li v-if="item.isEnable" :key="item">
+                <img :src="item.pic" alt="">
               </li>
             </template>
           </ul>
@@ -198,54 +147,38 @@
           <p class="text">{{ modules[10].form.des }}</p>
         </div>
         <div class="region">
-          <img class="dot"
-               src="https://huorantech.com/images/about/dot.png"
-               alt="">
+          <img class="dot" src="https://huorantech.com/images/about/dot.png" alt="">
           <p class="name">深圳</p>
         </div>
         <div class="info">
-          <img class="logo"
-               :src="modules[11].form.pic"
-               alt="">
+          <img class="logo" :src="modules[11].form.pic" alt="">
           <div class="texts">
             <div class="item">
               <div class="line">
-                <img class="icon"
-                     src="https://huorantech.com/images/about/site.png"
-                     alt="">
+                <img class="icon" src="https://huorantech.com/images/about/site.png" alt="">
                 {{ modules[11].form.siteName }}
               </div>
               <div class="line">
-                <img class="icon"
-                     src="https://huorantech.com/images/about/address.png"
-                     alt="">
+                <img class="icon" src="https://huorantech.com/images/about/address.png" alt="">
                 {{ modules[11].form.address }}
               </div>
             </div>
             <div class="item">
               <div class="line">
-                <img class="icon"
-                     src="https://huorantech.com/images/about/phone.png"
-                     alt="">
+                <img class="icon" src="https://huorantech.com/images/about/phone.png" alt="">
                 {{ modules[11].form.phone }}
               </div>
               <div class="line">
-                <img class="icon"
-                     src="https://huorantech.com/images/about/mail.png"
-                     alt="">
+                <img class="icon" src="https://huorantech.com/images/about/mail.png" alt="">
                 {{ modules[11].form.mail }}
-              </div>
+              </div>contact
             </div>
             <div class="qrcode">
-              <img width="103"
-                   :src=" modules[12].form.pic"
-                   alt="">
+              <img width="103" :src="modules[12].form.pic" alt="">
               <p class="text">{{ modules[12].form.title }}</p>
             </div>
             <div class="qrcode">
-              <img width="103"
-                   :src=" modules[13].form.pic"
-                   alt="">
+              <img width="103" :src="modules[13].form.pic" alt="">
               <p class="text">{{ modules[13].form.title }}</p>
             </div>
           </div>
@@ -258,42 +191,33 @@
       <div class="popup wechat-popup">
         <p class="tips">微信扫码添加职站售前咨询</p>
         <p class="des">提供付费咨询及解决方案</p>
-        <img width="150"
-             src="https://huorantech.com/images/index/customer.png"
-             alt="">
+        <img width="150" src="https://huorantech.com/images/index/customer.png" alt="">
       </div>
       <div class="item tel"></div>
       <div class="popup tel-popup">
         <div class="tel-inner">
           <div class="line">
             <div>
-              <img class="icon"
-                   src="https://huorantech.com/images/index/tel-2.png"
-                   alt="">
+              <img class="icon" src="https://huorantech.com/images/index/tel-2.png" alt="">
             </div>
             <div class="text">
               <p class="title">售前咨询</p>
-              <p class="tel-num"
-                 style="margin-bottom: 5px">金老师</p>
+              <p class="tel-num" style="margin-bottom: 5px">金老师</p>
               <p class="tel-num">15218726836</p>
             </div>
           </div>
           <div class="line">
             <div>
-              <img class="icon"
-                   src="https://huorantech.com/images/index/sug.png"
-                   alt="">
+              <img class="icon" src="https://huorantech.com/images/index/sug.png" alt="">
             </div>
             <div class="text">
-              <p class="title"
-                 @click="toQues">咨询，建议与反馈</p>
+              <p class="title" @click="toQues">咨询，建议与反馈</p>
               <p class="des">您的每一条建议声音，我们都认真对待</p>
             </div>
           </div>
         </div>
       </div>
-      <div class="item topping"
-           @click="topping"></div>
+      <div class="item topping" @click="topping"></div>
     </div>
   </div>
 </template>
@@ -398,979 +322,1185 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
+  position: relative;
+  background-color: #f9f9f9;
+
+  .banner {
     position: relative;
-    background-color: #f9f9f9;
-    .banner {
-        position: relative;
-        height: 480px;
-        padding: 110px 0 0 165px;
-        background: url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat,
-            url(https://huorantech.com/images/about/banner2.png) (90% 37px) / auto no-repeat;
-        background-color: #0f5bed;
-        .qrcodes {
-            display: flex;
-            margin-top: 25px;
+    height: 480px;
+    padding: 110px 0 0 165px;
+    background: url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat,
+      url(https://huorantech.com/images/about/banner2.png) (90% 37px) / auto no-repeat;
+    background-color: #0f5bed;
+
+    .qrcodes {
+      display: flex;
+      margin-top: 25px;
+    }
+  }
+
+  .carousel {
+    .pic {
+      height: 100%;
+      background-position: center center;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+
+    /deep/.el-carousel__container {
+      height: 100%;
+    }
+
+    .text-wrap {
+      position: absolute;
+      top: 50%;
+      left: 165px;
+      color: #fff;
+      transform: translateY(-50%);
+    }
+
+    .qrcodes {
+      display: flex;
+      margin-top: 10px;
+    }
+  }
+
+  .qrcode {
+    text-align: center;
+
+    .text {
+      margin-top: 10px;
+      font-size: 12px;
+      color: #fff;
+      white-space: nowrap;
+    }
+  }
+
+  .i-title {
+    z-index: 1;
+    position: relative;
+    margin-bottom: 37px;
+    font-size: 30px;
+    text-align: center;
+    color: #0b1d30;
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      width: 30px;
+      height: 4px;
+      transform: translate(-50%);
+      background-color: #006eff;
+    }
+  }
+
+  .inner {
+    position: relative;
+    width: 1200px;
+    padding: 107px 0 87px;
+    margin: 0 auto;
+  }
+
+  .en {
+    position: absolute;
+    top: 80px;
+    left: 50%;
+    width: 100%;
+    text-align: center;
+    font-size: 46px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    color: #d4daea;
+    transform: translate(-50%);
+  }
+
+  .title-des {
+    margin: -10px 0 40px;
+    font-size: 18px;
+    text-align: center;
+    color: #5a6b7e;
+  }
+
+  .pics {
+    display: flex;
+    justify-content: space-between;
+
+    .text {
+      width: 470px;
+    }
+
+    .title-wrap {
+      position: relative;
+    }
+
+    .title {
+      z-index: 2;
+      position: relative;
+      font-size: 30px;
+      color: #0b1d30;
+      font-weight: bold;
+    }
+
+    .brief {
+      margin: 20px 0 30px;
+      font-size: 24px;
+      color: #0b1d30;
+    }
+
+    .en {
+      top: -30px;
+      text-align: left;
+      color: #e5e5e5;
+    }
+
+    .desc {
+      font-size: 15px;
+      color: #535c6e;
+      line-height: 25px;
+    }
+  }
+
+  .service-intro {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    height: 153px;
+    margin-top: -240px;
+    color: #fff;
+    background: url(https://huorantech.com/images/about/about2.png) 0 0 / cover no-repeat;
+
+    .inner {
+      padding: 0;
+    }
+
+    h6 {
+      margin-bottom: 15px;
+      font-size: 26px;
+    }
+
+    .text {
+      font-size: 16px;
+    }
+  }
+
+  .culture {
+    position: relative;
+    background: #fff url(https://huorantech.com/images/about/about3.png) 0 0/100% 100% no-repeat;
+
+    .inner {
+      padding-bottom: 112px;
+    }
+
+    .list {
+      display: flex;
+      margin: 80px 0 20px;
+
+      li {
+        width: 33.33%;
+        padding: 50px 35px 74px;
+        margin-right: 57px;
+        text-align: center;
+        box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
+        border-radius: 8px;
+        background-color: #f9faff;
+        border: 2px solid #ffffff;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        &:hover {
+          img {
+            transform: rotateY(180deg);
+          }
+
+          .text {
+            transform: scale(1.1);
+          }
         }
+      }
+
+      img {
+        width: 70px;
+        transition: 0.6s;
+      }
+
+      h6 {
+        margin: 10px 0 16px;
+        font-size: 26px;
+        line-height: 28px;
+        color: #0b1d30;
+        transition: 0.3s;
+      }
+
+      .text {
+        font-size: 14px;
+        color: #637493;
+        transition: 0.3s;
+      }
     }
-    .carousel {
-        .pic {
-            height: 100%;
-            background-position: center center;
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
+  }
+
+  .progress {
+    .inner {
+      width: auto;
+    }
+
+    .list {
+      display: flex;
+      justify-content: center;
+      margin-top: 200px;
+    }
+
+    li {
+      position: relative;
+      max-width: 180px;
+      margin-right: 80px;
+      text-align: center;
+
+      h6 {
+        margin: 20px 0 10px;
+        font-size: 40px;
+        font-family: dinBold;
+        font-weight: bold;
+        color: #2d67f6;
+        line-height: 48px;
+      }
+
+      .text {
+        font-size: 15px;
+        color: #565656;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 9px;
+        left: 76px;
+        width: 168px;
+        height: 1px;
+        border: 3px solid;
+        border-image: linear-gradient(209deg, rgba(32, 101, 255, 0.01), rgba(32, 101, 255, 1), rgba(32, 101, 255, 0)) 3 3;
+      }
+
+      &:nth-child(2) {
+        margin-right: 75px;
+
+        &:after {
+          left: 82px;
         }
-        /deep/.el-carousel__container {
-            height: 100%;
+      }
+
+      &:nth-child(3) {
+        margin-right: 67px;
+
+        &:after {
+          left: 93px;
         }
-        .text-wrap {
-            position: absolute;
-            top: 50%;
-            left: 165px;
-            color: #fff;
-            transform: translateY(-50%);
+      }
+
+      &:nth-child(4) {
+        margin-right: 51px;
+      }
+
+      &:nth-child(5) {
+        margin-right: 27px;
+
+        &:after {
+          left: 108px;
         }
-        .qrcodes {
-            display: flex;
-            margin-top: 10px;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &:nth-child(even) {
+        margin-top: -130px;
+
+        .arrow {
+          transform: rotateX(180deg);
         }
-    }
 
-    .qrcode {
-        text-align: center;
         .text {
-            margin-top: 10px;
-            font-size: 12px;
-            color: #fff;
-            white-space: nowrap;
+          margin: 10px 0 20px;
         }
-    }
-    .i-title {
-        z-index: 1;
-        position: relative;
-        margin-bottom: 37px;
-        font-size: 30px;
-        text-align: center;
-        color: #0b1d30;
+
         &:after {
-            content: '';
-            position: absolute;
-            bottom: -10px;
-            left: 50%;
-            width: 30px;
-            height: 4px;
-            transform: translate(-50%);
-            background-color: #006eff;
+          top: 139px;
         }
+      }
+
+      &:last-child:after {
+        display: none;
+      }
     }
+  }
+
+  .contact {
+    position: relative;
+    padding: 0 0 106px 0;
+    background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
+
     .inner {
-        position: relative;
-        width: 1200px;
-        padding: 107px 0 87px;
-        margin: 0 auto;
+      padding: 0;
     }
-    .en {
-        position: absolute;
-        top: 80px;
-        left: 50%;
-        width: 100%;
-        text-align: center;
+
+    .title {
+      width: 419px;
+      height: 258px;
+      padding: 113px 0 0 43px;
+      background-color: #0854fe;
+
+      h6 {
+        margin-bottom: 20px;
         font-size: 46px;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        color: #d4daea;
-        transform: translate(-50%);
+        color: #fff;
+      }
+
+      .text {
+        font-size: 28px;
+        color: #fff;
+      }
     }
-    .title-des {
-        margin: -10px 0 40px;
-        font-size: 18px;
-        text-align: center;
-        color: #5a6b7e;
+
+    .region {
+      position: absolute;
+      top: 152px;
+      left: 70%;
+      display: flex;
+      align-items: center;
+      font-size: 20px;
+      color: #fff;
+
+      img {
+        margin-right: 20px;
+      }
     }
-    .pics {
+
+    .info {
+      margin: 86px 0 0 44px;
+
+      .texts {
         display: flex;
-        justify-content: space-between;
-        .text {
-            width: 470px;
-        }
-        .title-wrap {
-            position: relative;
-        }
-        .title {
-            z-index: 2;
-            position: relative;
-            font-size: 30px;
-            color: #0b1d30;
-            font-weight: bold;
-        }
-        .brief {
-            margin: 20px 0 30px;
-            font-size: 24px;
-            color: #0b1d30;
+        align-items: center;
+        margin-top: 24px;
+      }
+
+      .item {
+        margin-right: 75px;
+      }
+
+      .line {
+        display: flex;
+        align-items: center;
+        margin-bottom: 20px;
+        font-size: 16px;
+        color: #fff;
+
+        img {
+          margin-right: 8px;
         }
-        .en {
-            top: -30px;
-            text-align: left;
-            color: #e5e5e5;
+      }
+    }
+
+    .qrcode:last-child {
+      margin-left: 30px;
+    }
+  }
+
+  .about {
+    padding: 130px 0 200px;
+    background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
+      url(https://huorantech.com/images/index/about1.png) 0 0 / cover no-repeat;
+
+    .inner {
+      padding: 0;
+    }
+
+    .a-title {
+      z-index: 2;
+      position: relative;
+      font-size: 30px;
+      color: #fff;
+
+      &:after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -10px;
+        width: 30px;
+        height: 4px;
+        background-color: #fff;
+      }
+    }
+
+    .a-en {
+      position: absolute;
+      top: -28px;
+      font-size: 46px;
+      color: #b6c4d9;
+      opacity: 0.7;
+    }
+
+    .a-gene {
+      margin: 50px 0 30px;
+      font-size: 34px;
+      line-height: 58px;
+      color: #fff;
+    }
+
+    .text {
+      width: 800px;
+      font-size: 18px;
+      line-height: 33px;
+      color: #fff;
+    }
+  }
+
+  .adv {
+    position: relative;
+    background: #fff url(https://huorantech.com/images/index/index7.png) 0 0/100% 100% no-repeat;
+
+    .list {
+      display: flex;
+
+      li {
+        width: 33.33%;
+        padding: 107px 35px 30px;
+        margin-right: 57px;
+        text-align: center;
+        box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
+        border-radius: 8px;
+        background-color: #f9faff;
+        border: 2px solid #ffffff;
+
+        &:last-child {
+          margin-right: 0;
         }
-        .desc {
-            font-size: 15px;
-            color: #535c6e;
-            line-height: 25px;
+
+        &:hover {
+          img {
+            transform: rotateY(180deg);
+          }
+
+          h6 {
+            transform: scale(1.1);
+          }
         }
+      }
+
+      img {
+        width: 70px;
+        transition: 0.6s;
+      }
+
+      h6 {
+        margin: 10px 0 16px;
+        font-size: 26px;
+        line-height: 28px;
+        color: #0b1d30;
+        transition: 0.3s;
+      }
+
+      .text {
+        font-size: 14px;
+        color: #637493;
+        transition: 0.3s;
+      }
     }
-    .service-intro {
+  }
+
+  .service {
+    position: relative;
+    background: #0653ff url(https://huorantech.com/images/index/service4.png) 0 0/100% 100% no-repeat;
+
+    .i-title {
+      color: #fff;
+    }
+
+    .en {
+      color: #467df9;
+    }
+
+    .service-pic {
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 78px;
+      }
+    }
+
+    .s-title {
+      margin-bottom: 30px;
+      font-size: 20px;
+      color: #fff;
+    }
+
+    .service-list {
+      li {
         display: flex;
-        justify-content: center;
-        flex-direction: column;
-        height: 153px;
-        margin-top: -240px;
+        align-items: center;
+        margin: 15px 0;
+        font-size: 18px;
         color: #fff;
-        background: url(https://huorantech.com/images/about/about2.png) 0 0 / cover no-repeat;
-        .inner {
-            padding: 0;
-        }
-        h6 {
-            margin-bottom: 15px;
-            font-size: 26px;
-        }
-        .text {
-            font-size: 16px;
-        }
+
+        &:before {
+          content: '';
+          width: 12px;
+          height: 12px;
+          margin-right: 26px;
+          border: 2px solid #fff;
+          border-radius: 50%;
+        }
+      }
     }
-    .culture {
-        position: relative;
-        background: #fff url(https://huorantech.com/images/about/about3.png) 0 0/100% 100% no-repeat;
-        .inner {
-            padding-bottom: 112px;
+
+    .list {
+      display: flex;
+
+      li {
+        width: 33.33%;
+        padding: 50px 35px;
+        margin-right: 20px;
+        text-align: center;
+        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+        border-radius: 10px;
+        background-color: #f9faff;
+
+        &:last-child {
+          margin-right: 0;
         }
-        .list {
-            display: flex;
-            margin: 80px 0 20px;
-            li {
-                width: 33.33%;
-                padding: 50px 35px 74px;
-                margin-right: 57px;
-                text-align: center;
-                box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
-                border-radius: 8px;
-                background-color: #f9faff;
-                border: 2px solid #ffffff;
-                &:last-child {
-                    margin-right: 0;
-                }
-                &:hover {
-                    img {
-                        transform: rotateY(180deg);
-                    }
-                    .text {
-                        transform: scale(1.1);
-                    }
-                }
-            }
-            img {
-                width: 70px;
-                transition: 0.6s;
-            }
-            h6 {
-                margin: 10px 0 16px;
-                font-size: 26px;
-                line-height: 28px;
-                color: #0b1d30;
-                transition: 0.3s;
-            }
-            .text {
-                font-size: 14px;
-                color: #637493;
-                transition: 0.3s;
-            }
+
+        &:hover {
+          img {
+            transform: rotateY(180deg);
+          }
+
+          h6 {
+            transform: scale(1.1);
+          }
         }
+      }
+
+      img {
+        width: 64px;
+        transition: 0.6s;
+      }
+
+      h6 {
+        margin: 10px 0 16px;
+        font-size: 18px;
+        line-height: 28px;
+        color: #0b1d30;
+        transition: 0.3s;
+      }
+
+      .text {
+        font-size: 14px;
+        color: #757f92;
+      }
     }
-    .progress {
-        .inner {
-            width: auto;
-        }
-        .list {
-            display: flex;
-            justify-content: center;
-            margin-top: 200px;
-        }
-        li {
-            position: relative;
-            max-width: 180px;
-            margin-right: 80px;
-            text-align: center;
-            h6 {
-                margin: 20px 0 10px;
-                font-size: 40px;
-                font-family: dinBold;
-                font-weight: bold;
-                color: #2d67f6;
-                line-height: 48px;
-            }
-            .text {
-                font-size: 15px;
-                color: #565656;
-            }
-            &:after {
-                content: '';
-                position: absolute;
-                top: 9px;
-                left: 76px;
-                width: 168px;
-                height: 1px;
-                border: 3px solid;
-                border-image: linear-gradient(209deg, rgba(32, 101, 255, 0.01), rgba(32, 101, 255, 1), rgba(32, 101, 255, 0)) 3 3;
-            }
-            &:nth-child(2) {
-                margin-right: 75px;
-                &:after {
-                    left: 82px;
-                }
-            }
-            &:nth-child(3) {
-                margin-right: 67px;
-                &:after {
-                    left: 93px;
-                }
-            }
-            &:nth-child(4) {
-                margin-right: 51px;
-            }
-            &:nth-child(5) {
-                margin-right: 27px;
-                &:after {
-                    left: 108px;
-                }
-            }
-            &:last-child {
-                margin-right: 0;
-            }
-            &:nth-child(even) {
-                margin-top: -130px;
-                .arrow {
-                    transform: rotateX(180deg);
-                }
-                .text {
-                    margin: 10px 0 20px;
-                }
-                &:after {
-                    top: 139px;
-                }
-            }
-            &:last-child:after {
-                display: none;
-            }
-        }
+  }
+
+  .title-intro {
+    position: relative;
+    display: flex;
+    align-items: flex-end;
+    margin-bottom: 30px;
+
+    .text-title {
+      padding-left: 12px;
+      margin-left: 12px;
+      font-size: 26px;
+      line-height: 1;
+      color: #0b1d30;
+      border-left: 1px solid #dee4f1;
     }
-    .contact {
-        position: relative;
-        padding: 0 0 106px 0;
-        background: url(https://huorantech.com/images/about/map.png) 0 0 / cover no-repeat;
-        .inner {
-            padding: 0;
-        }
-        .title {
-            width: 419px;
-            height: 258px;
-            padding: 113px 0 0 43px;
-            background-color: #0854fe;
-            h6 {
-                margin-bottom: 20px;
-                font-size: 46px;
-                color: #fff;
-            }
-            .text {
-                font-size: 28px;
-                color: #fff;
-            }
-        }
-        .region {
-            position: absolute;
-            top: 152px;
-            left: 70%;
-            display: flex;
-            align-items: center;
-            font-size: 20px;
-            color: #fff;
-            img {
-                margin-right: 20px;
-            }
-        }
-        .info {
-            margin: 86px 0 0 44px;
-            .texts {
-                display: flex;
-                align-items: center;
-                margin-top: 24px;
-            }
-            .item {
-                margin-right: 75px;
-            }
-            .line {
-                display: flex;
-                align-items: center;
-                margin-bottom: 20px;
-                font-size: 16px;
-                color: #fff;
-                img {
-                    margin-right: 8px;
-                }
-            }
+  }
+
+  .product {
+    background: url(https://huorantech.com/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
+      url(https://huorantech.com/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
+    background-color: #fff;
+
+    .list {
+      display: flex;
+      margin: 40px 0 110px;
+
+      li {
+        width: 33.33%;
+        padding: 50px 35px;
+        margin-right: 20px;
+        text-align: center;
+        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+        border-radius: 10px;
+        background-color: #fff;
+
+        &:last-child {
+          margin-right: 0;
         }
-        .qrcode:last-child {
-            margin-left: 30px;
+
+        &:hover {
+          img {
+            transform: rotateY(180deg);
+          }
+
+          .text {
+            transform: scale(1.1);
+          }
         }
+      }
+
+      img {
+        width: 70px;
+        transition: 0.6s;
+      }
+
+      h6 {
+        margin: 10px 0 16px;
+        font-size: 18px;
+        line-height: 28px;
+        color: #0b1d30;
+        transition: 0.3s;
+      }
+
+      .text {
+        font-size: 14px;
+        color: #757f92;
+        transition: 0.3s;
+      }
     }
 
-    .about {
-        padding: 130px 0 200px;
-        background: url(https://huorantech.com/images/index/about2.png) (bottom right) / auto no-repeat,
-            url(https://huorantech.com/images/index/about1.png) 0 0 / cover no-repeat;
-        .inner {
-            padding: 0;
-        }
-        .a-title {
-            z-index: 2;
-            position: relative;
-            font-size: 30px;
-            color: #fff;
-            &:after {
-                content: '';
-                position: absolute;
-                left: 0;
-                bottom: -10px;
-                width: 30px;
-                height: 4px;
-                background-color: #fff;
-            }
-        }
-        .a-en {
-            position: absolute;
-            top: -28px;
-            font-size: 46px;
-            color: #b6c4d9;
-            opacity: 0.7;
-        }
-        .a-gene {
-            margin: 50px 0 30px;
-            font-size: 34px;
-            line-height: 58px;
-            color: #fff;
-        }
-        .text {
-            width: 800px;
-            font-size: 18px;
-            line-height: 33px;
-            color: #fff;
-        }
+    .carousel {
+      width: 500px;
+      margin-left: 50px;
+
+      .car-img {
+        width: 100%;
+        height: 100%;
+      }
     }
-    .adv {
-        position: relative;
-        background: #fff url(https://huorantech.com/images/index/index7.png) 0 0/100% 100% no-repeat;
-        .list {
-            display: flex;
-            li {
-                width: 33.33%;
-                padding: 107px 35px 30px;
-                margin-right: 57px;
-                text-align: center;
-                box-shadow: 0px 6px 11px 0px rgba(193, 202, 217, 0.38);
-                border-radius: 8px;
-                background-color: #f9faff;
-                border: 2px solid #ffffff;
-                &:last-child {
-                    margin-right: 0;
-                }
-                &:hover {
-                    img {
-                        transform: rotateY(180deg);
-                    }
-                    h6 {
-                        transform: scale(1.1);
-                    }
-                }
-            }
-            img {
-                width: 70px;
-                transition: 0.6s;
-            }
-            h6 {
-                margin: 10px 0 16px;
-                font-size: 26px;
-                line-height: 28px;
-                color: #0b1d30;
-                transition: 0.3s;
-            }
-            .text {
-                font-size: 14px;
-                color: #637493;
-                transition: 0.3s;
-            }
-        }
+
+    .arrow {
+      position: absolute;
+      top: 157px;
+      width: 21px;
+      height: 21px;
+      background: url(https://huorantech.com/images/index/arrow.png) no-repeat;
+      cursor: pointer;
+
+      &:hover {
+        background-image: url(https://huorantech.com/images/index/arrow-active.png);
+      }
     }
-    .service {
-        position: relative;
-        background: #0653ff url(https://huorantech.com/images/index/service4.png) 0 0/100% 100% no-repeat;
-        .i-title {
-            color: #fff;
-        }
-        .en {
-            color: #467df9;
-        }
-        .service-pic {
-            display: flex;
-            align-items: center;
-            .text {
-                margin-left: 78px;
-            }
-        }
-        .s-title {
-            margin-bottom: 30px;
-            font-size: 20px;
-            color: #fff;
-        }
-        .service-list {
-            li {
-                display: flex;
-                align-items: center;
-                margin: 15px 0;
-                font-size: 18px;
-                color: #fff;
-                &:before {
-                    content: '';
-                    width: 12px;
-                    height: 12px;
-                    margin-right: 26px;
-                    border: 2px solid #fff;
-                    border-radius: 50%;
-                }
-            }
-        }
-        .list {
-            display: flex;
-            li {
-                width: 33.33%;
-                padding: 50px 35px;
-                margin-right: 20px;
-                text-align: center;
-                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
-                border-radius: 10px;
-                background-color: #f9faff;
-                &:last-child {
-                    margin-right: 0;
-                }
-                &:hover {
-                    img {
-                        transform: rotateY(180deg);
-                    }
-                    h6 {
-                        transform: scale(1.1);
-                    }
-                }
-            }
-            img {
-                width: 64px;
-                transition: 0.6s;
-            }
-            h6 {
-                margin: 10px 0 16px;
-                font-size: 18px;
-                line-height: 28px;
-                color: #0b1d30;
-                transition: 0.3s;
-            }
-            .text {
-                font-size: 14px;
-                color: #757f92;
-            }
-        }
+
+    .a-left {
+      left: 32px;
+      transform: rotate(180deg);
     }
-    .title-intro {
-        position: relative;
-        display: flex;
-        align-items: flex-end;
-        margin-bottom: 30px;
-        .text-title {
-            padding-left: 12px;
-            margin-left: 12px;
-            font-size: 26px;
-            line-height: 1;
-            color: #0b1d30;
-            border-left: 1px solid #dee4f1;
-        }
+
+    .a-right {
+      right: 6px;
     }
-    .product {
-        background: url(https://huorantech.com/images/index/pro-bg1.png) (right 828px) / auto no-repeat,
-            url(https://huorantech.com/images/index/pro-bg8.png) (left bottom) / auto no-repeat;
-        background-color: #fff;
-        .list {
-            display: flex;
-            margin: 40px 0 110px;
-            li {
-                width: 33.33%;
-                padding: 50px 35px;
-                margin-right: 20px;
-                text-align: center;
-                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
-                border-radius: 10px;
-                background-color: #fff;
-                &:last-child {
-                    margin-right: 0;
-                }
-                &:hover {
-                    img {
-                        transform: rotateY(180deg);
-                    }
-                    .text {
-                        transform: scale(1.1);
-                    }
-                }
-            }
-            img {
-                width: 70px;
-                transition: 0.6s;
-            }
-            h6 {
-                margin: 10px 0 16px;
-                font-size: 18px;
-                line-height: 28px;
-                color: #0b1d30;
-                transition: 0.3s;
-            }
-            .text {
-                font-size: 14px;
-                color: #757f92;
-                transition: 0.3s;
-            }
-        }
-        .carousel {
-            width: 500px;
-            margin-left: 50px;
-            .car-img {
-                width: 100%;
-                height: 100%;
-            }
+
+    .pro-bg1 {
+      position: relative;
+      width: 594px;
+      height: 365px;
+
+      img {
+        position: absolute;
+        transition: 0.5s;
+      }
+
+      .bg1 {
+        top: 23px;
+        left: 0;
+      }
+
+      .bg2 {
+        bottom: 0;
+        right: 8px;
+      }
+
+      .bg3 {
+        top: 256px;
+        right: 0;
+      }
+
+      &:hover {
+        .bg1 {
+          transform: scale(1.1);
         }
-        .arrow {
-            position: absolute;
-            top: 157px;
-            width: 21px;
-            height: 21px;
-            background: url(https://huorantech.com/images/index/arrow.png) no-repeat;
-            cursor: pointer;
-            &:hover {
-                background-image: url(https://huorantech.com/images/index/arrow-active.png);
-            }
+
+        .bg2 {
+          transform: scale(1.3);
         }
-        .a-left {
-            left: 32px;
-            transform: rotate(180deg);
+
+        .bg3 {
+          transform: scale(1.3);
         }
-        .a-right {
-            right: 6px;
+      }
+    }
+
+    .pro-bg2 {
+      position: relative;
+      width: 594px;
+      height: 365px;
+
+      img {
+        position: absolute;
+        transition: 0.5s;
+      }
+
+      .bg1 {
+        top: 23px;
+        right: 0;
+      }
+
+      .bg2 {
+        bottom: 0;
+        left: 8px;
+      }
+
+      .bg3 {
+        top: 256px;
+        left: 0;
+      }
+
+      &:hover {
+        .bg1 {
+          transform: scale(1.1);
         }
-        .pro-bg1 {
-            position: relative;
-            width: 594px;
-            height: 365px;
-            img {
-                position: absolute;
-                transition: 0.5s;
-            }
-            .bg1 {
-                top: 23px;
-                left: 0;
-            }
-            .bg2 {
-                bottom: 0;
-                right: 8px;
-            }
-            .bg3 {
-                top: 256px;
-                right: 0;
-            }
-            &:hover {
-                .bg1 {
-                    transform: scale(1.1);
-                }
-                .bg2 {
-                    transform: scale(1.3);
-                }
-                .bg3 {
-                    transform: scale(1.3);
-                }
-            }
+
+        .bg2 {
+          transform: scale(1.3);
         }
-        .pro-bg2 {
-            position: relative;
-            width: 594px;
-            height: 365px;
-            img {
-                position: absolute;
-                transition: 0.5s;
-            }
-            .bg1 {
-                top: 23px;
-                right: 0;
-            }
-            .bg2 {
-                bottom: 0;
-                left: 8px;
-            }
-            .bg3 {
-                top: 256px;
-                left: 0;
-            }
-            &:hover {
-                .bg1 {
-                    transform: scale(1.1);
-                }
-                .bg2 {
-                    transform: scale(1.3);
-                }
-                .bg3 {
-                    transform: scale(1.3);
-                }
-            }
+
+        .bg3 {
+          transform: scale(1.3);
         }
+      }
     }
-    .parner {
-        background: #fff url(https://huorantech.com/images/index/parner.png) 0 0 / cover no-repeat;
-        .i-title,
-        .brief {
-            color: #fff;
-        }
-        .en {
-            color: #465779;
-        }
+  }
+
+  .parner {
+    background: #fff url(https://huorantech.com/images/index/parner.png) 0 0 / cover no-repeat;
+
+    .i-title,
+    .brief {
+      color: #fff;
     }
-    .chart {
-        height: 600px;
+
+    .en {
+      color: #465779;
     }
-    .client {
-        background: url(https://huorantech.com/images/index/client.png) 0 0 / cover no-repeat;
+  }
+
+  .chart {
+    height: 600px;
+  }
+
+  .client {
+    background: url(https://huorantech.com/images/index/client.png) 0 0 / cover no-repeat;
+  }
+
+  .client-pic {
+    display: flex;
+    padding: 32px 55px 32px 32px;
+    margin-bottom: 20px;
+    background-color: #fff;
+    box-shadow: 0px 0px 20px 0px rgba(226, 226, 226, 0.25);
+
+    .bg {
+      width: 453px;
+      height: 308px;
+      margin-right: 47px;
     }
-    .client-pic {
-        display: flex;
-        padding: 32px 55px 32px 32px;
-        margin-bottom: 20px;
-        background-color: #fff;
-        box-shadow: 0px 0px 20px 0px rgba(226, 226, 226, 0.25);
-        .bg {
-            width: 453px;
-            height: 308px;
-            margin-right: 47px;
-        }
-        .c-title1 {
-            display: flex;
-            align-items: center;
-            font-size: 30px;
-            color: #efefef;
-            img {
-                margin-right: 19px;
-            }
-        }
-        .c-title2 {
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            font-size: 18px;
-            color: #535c6e;
-            img {
-                margin-left: 19px;
-            }
-        }
-        .text {
-            margin: 22px 0;
-            font-size: 18px;
-            color: #535c6e;
-            line-height: 33px;
-        }
+
+    .c-title1 {
+      display: flex;
+      align-items: center;
+      font-size: 30px;
+      color: #efefef;
+
+      img {
+        margin-right: 19px;
+      }
     }
-    .clients {
-        width: 1200px;
-        margin-top: 30px;
-        overflow: hidden;
+
+    .c-title2 {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+      font-size: 18px;
+      color: #535c6e;
+
+      img {
+        margin-left: 19px;
+      }
     }
-    .client-list {
-        display: flex;
-        &::-webkit-scrollbar {
-            display: none;
-        }
-        li {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            width: 231px;
-            height: 102px;
-            margin: 0 11px 11px 0;
-            background-color: #fff;
-            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
-            border: 1px solid #ececec;
-        }
+
+    .text {
+      margin: 22px 0;
+      font-size: 18px;
+      color: #535c6e;
+      line-height: 33px;
     }
-    .pics {
-        display: flex;
-        justify-content: space-between;
-        .icon {
-            width: 60px;
-        }
-        .text {
-            width: 450px;
-        }
-        h6 {
-            margin: 30px 0 10px;
-            font-size: 28px;
-            color: #0b1d30;
-        }
-        .desc {
-            font-size: 15px;
-            color: #0b1d30;
-            line-height: 28px;
-        }
+  }
+
+  .clients {
+    width: 1200px;
+    margin-top: 30px;
+    overflow: hidden;
+  }
+
+  .client-list {
+    display: flex;
+
+    &::-webkit-scrollbar {
+      display: none;
     }
-    .none {
-        padding: 50px 0;
-        text-align: center;
-        img {
-            width: 324px;
-            margin-bottom: 42px;
-        }
-        .text {
-            font-size: 12px;
-            color: #333;
-        }
+
+    li {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 231px;
+      height: 102px;
+      margin: 0 11px 11px 0;
+      background-color: #fff;
+      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.04);
+      border: 1px solid #ececec;
     }
-    @keyframes rotate {
-        0% {
-            transform: rotate(0);
-        }
-        50% {
-            transform: rotate(180deg);
-        }
-        100% {
-            transform: rotate(360deg);
-        }
+  }
+
+  .pics {
+    display: flex;
+    justify-content: space-between;
+
+    .icon {
+      width: 60px;
     }
+
+    .text {
+      width: 450px;
+    }
+
+    h6 {
+      margin: 30px 0 10px;
+      font-size: 28px;
+      color: #0b1d30;
+    }
+
+    .desc {
+      font-size: 15px;
+      color: #0b1d30;
+      line-height: 28px;
+    }
+  }
+
+  .none {
+    padding: 50px 0;
+    text-align: center;
+
+    img {
+      width: 324px;
+      margin-bottom: 42px;
+    }
+
+    .text {
+      font-size: 12px;
+      color: #333;
+    }
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0);
+    }
+
+    50% {
+      transform: rotate(180deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }
+
 .tool {
-    z-index: 10;
-    position: fixed;
-    bottom: 100px;
-    right: 30px;
-    .item {
-        width: 45px;
-        height: 45px;
-        margin-bottom: 10px;
-        border: 1px solid #e5e5e5;
-        cursor: pointer;
-    }
-    .wechat {
-        background: #fff url(https://huorantech.com/images/index/wechat.png) center center/auto no-repeat;
-        &:hover {
-            background-image: url(https://huorantech.com/images/index/wechat-1.png);
-            background-color: #006eff;
-            & + .popup {
-                display: block;
-            }
-        }
+  z-index: 10;
+  position: fixed;
+  bottom: 100px;
+  right: 30px;
+
+  .item {
+    width: 45px;
+    height: 45px;
+    margin-bottom: 10px;
+    border: 1px solid #e5e5e5;
+    cursor: pointer;
+  }
+
+  .wechat {
+    background: #fff url(https://huorantech.com/images/index/wechat.png) center center/auto no-repeat;
+
+    &:hover {
+      background-image: url(https://huorantech.com/images/index/wechat-1.png);
+      background-color: #006eff;
+
+      &+.popup {
+        display: block;
+      }
     }
-    .tel {
-        background: #fff url(https://huorantech.com/images/index/tel.png) center center/auto no-repeat;
-        &:hover {
-            background-image: url(https://huorantech.com/images/index/tel-1.png);
-            background-color: #006eff;
-            & + .popup {
-                display: block;
-            }
-        }
+  }
+
+  .tel {
+    background: #fff url(https://huorantech.com/images/index/tel.png) center center/auto no-repeat;
+
+    &:hover {
+      background-image: url(https://huorantech.com/images/index/tel-1.png);
+      background-color: #006eff;
+
+      &+.popup {
+        display: block;
+      }
     }
-    .topping {
-        background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
-        &:hover {
-            background-image: url(https://huorantech.com/images/index/top-1.png);
-            background-color: #006eff;
-        }
+  }
+
+  .topping {
+    background: #fff url(https://huorantech.com/images/index/top.png) center center/auto no-repeat;
+
+    &:hover {
+      background-image: url(https://huorantech.com/images/index/top-1.png);
+      background-color: #006eff;
     }
-    .popup {
-        position: absolute;
-        display: none;
+  }
+
+  .popup {
+    position: absolute;
+    display: none;
+  }
+
+  .wechat-popup {
+    top: -100px;
+    left: -230px;
+    padding: 20px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
+
+    .tips {
+      font-size: 14px;
     }
-    .wechat-popup {
-        top: -100px;
-        left: -230px;
-        padding: 20px;
-        text-align: center;
-        background-color: #fff;
-        box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
-        .tips {
-            font-size: 14px;
-        }
-        .des {
-            margin: 5px 0 15px;
-            font-size: 12px;
-            color: #333;
-        }
+
+    .des {
+      margin: 5px 0 15px;
+      font-size: 12px;
+      color: #333;
     }
-    .tel-popup {
-        top: -10px;
-        left: -250px;
-        width: 250px;
-        border-right: 20px solid transparent;
-        &:hover {
-            display: block;
-        }
-        .tel-inner {
-            padding: 20px;
-            background-color: #fff;
-            box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
-        }
-        .line {
-            display: flex;
-            &:first-child {
-                margin-bottom: 20px;
-            }
-        }
-        .text {
-            margin-left: 15px;
-        }
-        .title {
-            margin-bottom: 5px;
-            font-size: 14px;
-            cursor: pointer;
-            &:hover {
-                color: #006eff;
-            }
-        }
-        .tel-num {
-            font-size: 12px;
-            color: #006eff;
-        }
-        .des {
-            font-size: 12px;
-            color: #686868;
-        }
+  }
+
+  .tel-popup {
+    top: -10px;
+    left: -250px;
+    width: 250px;
+    border-right: 20px solid transparent;
+
+    &:hover {
+      display: block;
+    }
+
+    .tel-inner {
+      padding: 20px;
+      background-color: #fff;
+      box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
+    }
+
+    .line {
+      display: flex;
+
+      &:first-child {
+        margin-bottom: 20px;
+      }
+    }
+
+    .text {
+      margin-left: 15px;
+    }
+
+    .title {
+      margin-bottom: 5px;
+      font-size: 14px;
+      cursor: pointer;
+
+      &:hover {
+        color: #006eff;
+      }
+    }
+
+    .tel-num {
+      font-size: 12px;
+      color: #006eff;
+    }
+
+    .des {
+      font-size: 12px;
+      color: #686868;
     }
+  }
 }
+
 @media (max-width: 1730px) {
-    .wrap {
-        .banner {
-            padding-left: 120px;
-        }
-        .carousel {
-            .text-wrap {
-                left: 120px;
-            }
-        }
+  .wrap {
+    .banner {
+      padding-left: 120px;
+    }
+
+    .carousel {
+      .text-wrap {
+        left: 120px;
+      }
     }
+  }
 }
+
 @media (max-width: 1200px) {
-    .wrap {
-        .banner {
-            padding-left: 30px;
-        }
-        .carousel {
-            .text-wrap {
-                left: 30px;
-            }
-        }
-        .inner {
-            width: 90%;
-        }
-        .pics {
-            flex-direction: column;
-            .text {
-                width: 100%;
-                margin-bottom: 20px;
-            }
-            img {
-                display: none;
-            }
-        }
-        .service-intro {
-            margin-top: 0;
-        }
-        .service {
-            .service-pic {
-                flex-direction: column;
-                .text {
-                    margin: 0 0 30px 0;
-                }
-            }
-        }
-        .culture,
-        .adv,
-        .service,
-        .product {
-            .list {
-                flex-direction: column;
-                li {
-                    width: 100%;
-                    margin: 0 0 20px 0;
-                }
-            }
+  .wrap {
+    .banner {
+      padding-left: 30px;
+    }
+
+    .carousel {
+      .text-wrap {
+        left: 30px;
+      }
+    }
+
+    .inner {
+      width: 90%;
+    }
+
+    .pics {
+      flex-direction: column;
+
+      .text {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+
+      img {
+        display: none;
+      }
+    }
+
+    .service-intro {
+      margin-top: 0;
+    }
+
+    .service {
+      .service-pic {
+        flex-direction: column;
+
+        .text {
+          margin: 0 0 30px 0;
         }
-        .adv {
-            .list {
-                li {
-                    padding-top: 30px;
-                }
-            }
+      }
+    }
+
+    .culture,
+    .adv,
+    .service,
+    .product {
+      .list {
+        flex-direction: column;
+
+        li {
+          width: 100%;
+          margin: 0 0 20px 0;
         }
-        .client-pic {
-            flex-direction: column;
-            .bg {
-                width: auto;
-                height: auto;
-                max-width: 100%;
-                margin-right: 0;
-            }
+      }
+    }
+
+    .adv {
+      .list {
+        li {
+          padding-top: 30px;
         }
-        .clients {
-            width: 100%;
+      }
+    }
+
+    .client-pic {
+      flex-direction: column;
+
+      .bg {
+        width: auto;
+        height: auto;
+        max-width: 100%;
+        margin-right: 0;
+      }
+    }
+
+    .clients {
+      width: 100%;
+    }
+
+    .contact {
+      .info {
+        margin-left: 0;
+
+        .texts {
+          flex-direction: column;
+          align-items: flex-start;
         }
-        .contact {
-            .info {
-                margin-left: 0;
-                .texts {
-                    flex-direction: column;
-                    align-items: flex-start;
-                }
-                .item {
-                    margin: 0 0 30px 0;
-                }
-            }
-            .qrcode:last-child {
-                margin: 20px 0 0 0;
-            }
+
+        .item {
+          margin: 0 0 30px 0;
         }
+      }
+
+      .qrcode:last-child {
+        margin: 20px 0 0 0;
+      }
     }
+  }
 }
+
 @media (max-width: 640px) {
-    .wrap {
-        .banner {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            height: 380px;
-            padding: 0 30px;
-            background: #0f5bed url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat;
-            // background-color: #0f5bed;
-            .texts {
-                max-width: 100%;
-            }
-        }
-        .contact {
-            .inner {
-                width: 100%;
-            }
-            .title {
-                width: 100%;
-            }
-            .info {
-                padding: 0 5%;
-            }
-        }
+  .wrap {
+    .banner {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 380px;
+      padding: 0 30px;
+      background: #0f5bed url(https://huorantech.com/images/about/banner1.png) 0 0 / auto no-repeat;
+
+      // background-color: #0f5bed;
+      .texts {
+        max-width: 100%;
+      }
     }
+
+    .contact {
+      .inner {
+        width: 100%;
+      }
+
+      .title {
+        width: 100%;
+      }
+
+      .info {
+        padding: 0 5%;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index 2ec1ba1..94304de 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -1,42 +1,35 @@
 <template>
-  <div v-show="loaded"
-       class="wrap">
+  <div v-show="loaded" class="wrap">
     <!-- 人物详情不展示banner -->
-    <div v-if="form.articleTemplate !== 23 && !isPeople"
-         class="banner"
-         :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
+    <div v-if="form.articleTemplate !== 23 && !isPeople" class="banner"
+      :style="{ backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : '' }">
       {{ form.columnName }}
     </div>
     <div class="content">
-      <Breadcrumb ref="breadcrumb"
-                  :data.sync="routes" />
+      <Breadcrumb ref="breadcrumb" :data.sync="routes" />
       <div class="article">
         <div class="left">
           <template v-if="!isPeople">
             <h2>{{ form.title }}</h2>
-            <div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{ form.releaseTime }}</div>
-            <div class="meta">{{ form.edit && $t('column.edit') + '：' + form.edit }} {{ form.audit && ' | ' + $t('column.auditor') + '：' + form.audit }} {{ form.label && ' | ' + $t('column.label') + '：' + form.label }}</div>
+            <div class="meta">{{ form.source && form.source + ' | ' }} {{ form.author && form.author + ' | ' }} {{
+              form.releaseTime }}</div>
+            <div class="meta">{{ form.edit && $t('column.edit') + '：' + form.edit }} {{ form.audit && ' | ' +
+              $t('column.auditor') + '：' + form.audit }} {{ form.label && ' | ' + $t('column.label') + '：' + form.label
+              }}</div>
           </template>
-          <p v-if="form.summary"
-             class="brief">{{ form.summary }}</p>
-          <div class="des"
-               id="mainBody"
-               v-html="form.mainBody"></div>
-          <div v-if="form.fileList && form.fileList.length"
-               class="annex">
-            <h6>{{$t('column.attachmentDownload')}}</h6>
+          <p v-if="form.summary" class="brief">{{ form.summary }}</p>
+          <div class="des" id="mainBody" v-html="form.mainBody"></div>
+          <div v-if="form.fileList && form.fileList.length" class="annex">
+            <h6>{{ $t('column.attachmentDownload') }}</h6>
             <ul class="files">
-              <li v-for="(file, i) in form.fileList"
-                  :key="i">
+              <li v-for="(file, i) in form.fileList" :key="i">
                 <span class="name">{{ file.fileName }}</span>
-                <span class="download"
-                      @click="download(file)">{{$t('column.download')}}</span>
+                <span class="download" @click="download(file)">{{ $t('column.download') }}</span>
               </li>
             </ul>
           </div>
         </div>
-        <RightColumns ref="right"
-                      :party="isParty" />
+        <RightColumns ref="right" :party="isParty" />
       </div>
     </div>
   </div>
@@ -189,136 +182,162 @@ export default {
 
 <style lang="scss" scoped>
 @import './editor.css';
+
 .content {
-    width: 1200px;
-    /deep/ .el-breadcrumb {
-        font-size: 0.98rem;
-    }
+  width: 1200px;
+
+  /deep/ .el-breadcrumb {
+    font-size: 0.98rem;
+  }
 }
+
 .banner {
-    display: flex;
-    align-items: center;
-    height: 21.6rem;
-    padding-left: 10%;
-    font-size: 2rem;
-    font-weight: 600;
-    color: #fff;
-    background: url(../../assets/images/intro-bg.png) center center/cover no-repeat;
-    object-fit: cover;
+  display: flex;
+  align-items: center;
+  height: 21.6rem;
+  padding-left: 10%;
+  font-size: 2rem;
+  font-weight: 600;
+  color: #fff;
+  background: url(../../assets/images/intro-bg.png) center center/cover no-repeat;
+  object-fit: cover;
 }
+
 .article {
-    display: flex;
-    justify-content: space-between;
-    .left {
-        width: 70%;
+  display: flex;
+  justify-content: space-between;
+
+  .left {
+    width: 70%;
+  }
+
+  h2 {
+    font-size: 1.9rem;
+    color: #1c1c1c;
+  }
+
+  .meta {
+    margin: 1rem 0;
+    font-size: 0.88rem;
+    color: #9b9b9b;
+  }
+
+  .brief {
+    padding-bottom: 1.5rem;
+    margin: 1rem 0;
+    font-size: 1.2rem;
+    line-height: 1.6;
+    color: #606060;
+    border-bottom: 1px solid #d8d8d8;
+  }
+
+  /deep/.des {
+    // width: 100%;
+    // overflow: auto;
+    a {
+      color: rgb(0, 0, 238);
+      word-wrap: break-word;
     }
-    h2 {
-        font-size: 1.9rem;
-        color: #1c1c1c;
+
+    img {
+      max-width: 100%;
+      object-fit: cover;
     }
-    .meta {
-        margin: 1rem 0;
-        font-size: 0.88rem;
-        color: #9b9b9b;
+
+    ul {
+      // padding-left: 40px;
+      list-style: disc;
+
+      li {
+        list-style: inherit;
+      }
     }
-    .brief {
-        padding-bottom: 1.5rem;
-        margin: 1rem 0;
-        font-size: 1.2rem;
-        line-height: 1.6;
-        color: #606060;
-        border-bottom: 1px solid #d8d8d8;
+
+    ol {
+      // padding-left: 40px;
+      list-style: decimal;
+
+      li {
+        list-style: inherit;
+      }
     }
-    /deep/.des {
-        // width: 100%;
-        // overflow: auto;
-        a {
-            color: rgb(0, 0, 238);
-            word-wrap: break-word;
-        }
-        img {
-            max-width: 100%;
-            object-fit: cover;
-        }
-        ul {
-            // padding-left: 40px;
-            list-style: disc;
-            li {
-                list-style: inherit;
-            }
-        }
-        ol {
-            // padding-left: 40px;
-            list-style: decimal;
-            li {
-                list-style: inherit;
-            }
-        }
+  }
+
+  .annex {
+    margin-top: 30px;
+
+    h6 {
+      padding-left: 8px;
+      margin-bottom: 20px;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      line-height: 1;
+      color: #333;
+      border-left: 4px solid #1583ff;
     }
-    .annex {
-        margin-top: 30px;
-        h6 {
-            padding-left: 8px;
-            margin-bottom: 20px;
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            line-height: 1;
-            color: #333;
-            border-left: 4px solid #1583ff;
-        }
-        li {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-        .name {
-            margin-right: 8px;
-            font-size: 14px;
-        }
-        .download {
-            color: #1583ff;
-            cursor: pointer;
-        }
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+    }
+
+    .name {
+      margin-right: 8px;
+      font-size: 14px;
     }
+
+    .download {
+      color: #1583ff;
+      cursor: pointer;
+    }
+  }
 }
 
 @media (max-width: 1420px) {
-    .content {
-        width: 98%;
-    }
+  .content {
+    width: 98%;
+  }
 }
+
 @media (max-width: 1200px) {
-    .article {
-        /deep/.des {
-            img {
-                max-width: 100%;
-                max-height: 15rem;
-            }
-        }
+  .article {
+    /deep/.des {
+      img {
+        max-width: 100%;
+        max-height: 15rem;
+      }
     }
-    .banner {
+  }
+
+  .banner {
+    font-size: 1.5rem;
+  }
+
+  .article {
+    flex-direction: column;
+
+    .left {
+      width: 100%;
+      margin-bottom: 20px;
+
+      h2 {
         font-size: 1.5rem;
+      }
     }
-    .article {
-        flex-direction: column;
-        .left {
-            width: 100%;
-            margin-bottom: 20px;
-            h2 {
-                font-size: 1.5rem;
-            }
-        }
-    }
-    .article {
-        .des {
-            img {
-                height: 15rem !important;
-            }
-        }
-    }
-    .right {
-        width: 100%;
+  }
+
+  .article {
+    .des {
+      img {
+        height: 15rem !important;
+      }
     }
+  }
+
+  .right {
+    width: 100%;
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index 04113fe..70c4aab 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -1,11 +1,8 @@
 <template>
-  <div v-show="loaded"
-       :class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
+  <div v-show="loaded" v-loading="loading"
+    :class="['wrap', { activity: info.listStyleId === 15, party: info.listStyleId === 68 }]">
     <div class="banner fadeInUp">
-      <img width="100%"
-           height="280"
-           :src="info.columnBanner"
-           alt="" />
+      <img width="100%" height="280" :src="info.columnBanner" alt="" />
       <div class="texts">
         <p class="text">{{ info.columnName }}</p>
         <p class="sub">{{ info.subtitle }}</p>
@@ -15,37 +12,24 @@
       <div class="article">
         <div class="left">
           <!-- 文章：侧边栏+搜索+新闻列表 -->
-          <div v-if="info.listStyleId === 10"
-               class="forms">
+          <div v-if="info.listStyleId === 10" class="forms">
             <div class="item">
               <span class="label">{{ $t('column.classification') }}：</span>
-              <el-select v-model="form.classificationId"
-                         @change="filter">
-                <el-option :label="$t('column.all')"
-                           :value="null"></el-option>
-                <el-option v-for="item in classifications"
-                           :key="item.id"
-                           :label="item.classificationName"
-                           :value="item.id">
+              <el-select v-model="form.classificationId" @change="filter">
+                <el-option :label="$t('column.all')" :value="null"></el-option>
+                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
+                  :value="item.id">
                 </el-option>
               </el-select>
             </div>
             <div class="item">
               <span class="label">{{ $t('column.label') }}：</span>
-              <el-select ref="search"
-                         v-model="lableId"
-                         multiple
-                         @change="filter">
-                <el-option v-for="item in labels"
-                           :key="item.id"
-                           :label="item.labelName"
-                           :value="item.id"> </el-option>
+              <el-select ref="search" v-model="lableId" multiple @change="filter">
+                <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
               </el-select>
             </div>
             <div class="search">
-              <input type="text"
-                     :placeholder="$t('column.titlePlaceholder')"
-                     v-model="form.title" />
+              <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
 
               <!-- <i class="icon">
                 <img src="@/assets/images/search-white.png" alt="" />
@@ -53,111 +37,76 @@
             </div>
           </div>
           <!-- 侧导航+新闻列表(含文章概述) -->
-          <div v-if="info.listStyleId === 12"
-               class="forms">
+          <div v-if="info.listStyleId === 12" class="forms">
             <div class="item">
               <span class="label">{{ $t('column.classification') }}：</span>
-              <el-select v-model="form.classificationId"
-                         @change="filter">
-                <el-option :label="$t('column.all')"
-                           :value="null"></el-option>
-                <el-option v-for="item in classifications"
-                           :key="item.id"
-                           :label="item.classificationName"
-                           :value="item.id">
+              <el-select v-model="form.classificationId" @change="filter">
+                <el-option :label="$t('column.all')" :value="null"></el-option>
+                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
+                  :value="item.id">
                 </el-option>
               </el-select>
             </div>
             <div class="item">
               <span class="label">{{ $t('column.label') }}：</span>
-              <el-select ref="search"
-                         v-model="lableId"
-                         multiple
-                         @change="filter">
-                <el-option v-for="item in labels"
-                           :key="item.id"
-                           :label="item.labelName"
-                           :value="item.id"> </el-option>
+              <el-select ref="search" v-model="lableId" multiple @change="filter">
+                <el-option v-for="item in labels" :key="item.id" :label="item.labelName" :value="item.id"> </el-option>
               </el-select>
             </div>
             <div class="search">
-              <input type="text"
-                     :placeholder="$t('column.titlePlaceholder')"
-                     v-model="form.title" />
+              <input type="text" :placeholder="$t('column.titlePlaceholder')" v-model="form.title" />
               <!-- <i class="icon">
                 <img src="@/assets/images/search-white.png" alt="" />
               </i> -->
             </div>
           </div>
           <!-- 会议活动：筛选+会议活动列表 -->
-          <div v-if="info.listStyleId === 15"
-               class="forms">
+          <div v-if="info.listStyleId === 15" class="forms">
             <ul class="switch">
-              <li v-for="(item, i) in convokeTypes"
-                  :key="i"
-                  :class="{ active: item.id === form.convokeType }"
-                  @click="switchChange(item)">
+              <li v-for="(item, i) in convokeTypes" :key="i" :class="{ active: item.id === form.convokeType }"
+                @click="switchChange(item)">
                 {{ item.name }}
               </li>
             </ul>
             <div class="item">
               <span class="label">{{ $t('column.classification') }}：</span>
-              <el-select v-model="form.classificationId"
-                         @change="filter">
-                <el-option :label="$t('column.all')"
-                           :value="null"></el-option>
-                <el-option v-for="item in classifications"
-                           :key="item.id"
-                           :label="item.classificationName"
-                           :value="item.id">
+              <el-select v-model="form.classificationId" @change="filter">
+                <el-option :label="$t('column.all')" :value="null"></el-option>
+                <el-option v-for="item in classifications" :key="item.id" :label="item.classificationName"
+                  :value="item.id">
                 </el-option>
               </el-select>
             </div>
           </div>
 
           <div class="contents">
-            <el-tree v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15"
-                     class="columns"
-                     ref="leftColumn"
-                     :data="columns"
-                     highlight-current
-                     :expand-on-click-node="false"
-                     default-expand-all
-                     :props="defaultProps"
-                     node-key="id"
-                     icon-class="el-icon-arrow-down"
-                     @node-click="(item) => columnClick(item, 1)"
-                     @current-change="(item) => columnClick(item, 1)">
-              <span class="custom-tree-node"
-                    slot-scope="{ node, data }"
-                    style="padding-left: 10px;">
+            <el-tree
+              v-if="columns.length && columns.find(e => e.children.length) && !isFilter && showNav && info.listStyleId !== 15"
+              class="columns" ref="leftColumn" :data="columns" highlight-current :expand-on-click-node="false"
+              default-expand-all :props="defaultProps" node-key="id" icon-class="el-icon-arrow-down"
+              @node-click="(item) => columnClick(item, 1)" @current-change="(item) => columnClick(item, 1)">
+              <span class="custom-tree-node" slot-scope="{ node, data }" style="padding-left: 10px;">
                 <span :title="node.label">{{ node.label }}</span>
               </span>
             </el-tree>
 
             <template v-if="articles.length && !loading">
               <!-- 列表样式选的是列表详情，则直接显示最新一篇文章的详情 -->
-              <div v-if="info.listStyleId === 77"
-                   class="detail">
+              <div v-if="info.listStyleId === 77" class="detail">
 
                 <template v-if="article.articleTemplate != 72">
                   <h2>{{ article.title }}</h2>
                   <!-- <div class="meta">{{ article.source && article.source + ' | ' }} {{ article.author && article.author + ' | ' }} {{ article.releaseTime }}</div>
                   <div class="meta">{{ article.edit && $t('column.edit') + '：' + article.edit }} {{ article.audit && ' | ' + $t('column.auditor') + '：' + article.audit }} {{ article.label && ' | ' + $t('column.label') + '：' + article.label }}</div> -->
                 </template>
-                <p v-if="article.summary"
-                   class="brief">{{ article.summary }}</p>
-                <div class="des"
-                     v-html="article.mainBody"></div>
-                <div v-if="article.fileList && article.fileList.length"
-                     class="annex">
-                  <h6>{{$t('column.attachmentDownload')}}</h6>
+                <p v-if="article.summary" class="brief">{{ article.summary }}</p>
+                <div class="des" v-html="article.mainBody"></div>
+                <div v-if="article.fileList && article.fileList.length" class="annex">
+                  <h6>{{ $t('column.attachmentDownload') }}</h6>
                   <ul class="files">
-                    <li v-for="(file, i) in article.fileList"
-                        :key="i">
+                    <li v-for="(file, i) in article.fileList" :key="i">
                       <span class="name">{{ file.fileName }}</span>
-                      <span class="download"
-                            @click="download(file)">{{$t('column.download')}}</span>
+                      <span class="download" @click="download(file)">{{ $t('column.download') }}</span>
                     </li>
                   </ul>
                 </div>
@@ -167,11 +116,8 @@
                 <template v-if="info.listStyleId === 12">
                   <div class="article-wrap">
                     <ul class="articles">
-                      <li v-for="(item, i) in articles"
-                          :key="i"
-                          :class="{'news-notice': info.listStyleId === 55}"
-                          class="readDetail"
-                          @click="toArtice(item)">
+                      <li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }"
+                        class="readDetail" @click="toArtice(item)">
                         <template v-if="info.listStyleId === 55">
                           <div class="releaseTime">
                             <p class="d">{{ item.date }}</p>
@@ -180,76 +126,54 @@
                           <div class="news-title">{{ item.title }}</div>
                         </template>
                         <template v-else>
-                          <img class="pic"
-                               :src="item.titleImg"
-                               alt=""
-                               onerror="javascript:this.src='./images/1.png?id=1';" />
+                          <img class="pic" :src="item.titleImg" alt=""
+                            onerror="javascript:this.src='./images/1.png?id=1';" />
                           <div class="texts">
                             <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                               class="type">
+                              class="type">
                               {{ item.classificationName }}
                             </p>
                             <h6 class="titleDes">{{ item.title }}</h6>
                             <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
                               <span class="meta">{{ item.releaseTime }}</span>
-                              <div class="des"
-                                   v-html="item.mainBody"></div>
+                              <div class="des" v-html="item.mainBody"></div>
                             </template>
-                            <span v-if="item.listStyleId === 10 "
-                                  class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
-                        item.labelName }}</span>
+                            <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
+                              && ' | ' +
+                              item.labelName }}</span>
                             <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                              <div v-if="item.keynoteSpeaker"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/mine.png"
-                                     alt="" /> {{ item.keynoteSpeaker }}
+                              <div v-if="item.keynoteSpeaker" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
                               </div>
-                              <div v-if="item.activityStartTime"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/time.png"
-                                     alt="" />
+                              <div v-if="item.activityStartTime" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/time.png" alt="" />
                                 {{ item.activityStartTime }}
                               </div>
-                              <div v-if="item.offlineLocation"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/location.png"
-                                     alt="" /> {{ item.offlineLocation }}
+                              <div v-if="item.offlineLocation" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
+                                }}
                               </div>
-                              <div v-if="item.onlineLocation"
-                                   class="meta">
-                                <img class="icon"
-                                     src="@/assets/images/online.png"
-                                     alt="" /> {{ item.onlineLocation }}
+                              <div v-if="item.onlineLocation" class="meta">
+                                <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
                               </div>
                             </template>
-                            <el-button type="primary"
-                                       class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
+                            <el-button type="primary" class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
                           </div>
 
                         </template>
                       </li>
                     </ul>
-                    <div v-if="articles.length"
-                         class="pagination">
-                      <el-pagination background
-                                     @current-change="currentChange"
-                                     :current-page="page"
-                                     :page-size="pageSize"
-                                     layout="total, prev, pager, next"
-                                     :total="total"></el-pagination>
+                    <div v-if="articles.length" class="pagination">
+                      <el-pagination background @current-change="currentChange" :current-page="page"
+                        :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
                     </div>
                   </div>
                 </template>
                 <template v-else-if="info.listStyleId === 11 || info.listStyleId === 15 || info.listStyleId === 10">
                   <div class="article-wrap">
                     <ul class="articles">
-                      <li v-for="(item, i) in articles"
-                          :key="i"
-                          :class="{'news-notice': info.listStyleId === 55}"
-                          @click="toArtice(item)">
+                      <li v-for="(item, i) in articles" :key="i" :class="{ 'news-notice': info.listStyleId === 55 }"
+                        @click="toArtice(item)">
                         <template v-if="info.listStyleId === 55">
                           <div class="releaseTime">
                             <p class="d">{{ item.date }}</p>
@@ -259,8 +183,8 @@
                         </template>
                         <template v-else>
                           <div class="texts leftBox">
-                            <p v-if="(item.listStyleId === 10 || item.listStyleId === 15|| item.listStyleId === 11) && item.classificationName"
-                               class="type">
+                            <p v-if="(item.listStyleId === 10 || item.listStyleId === 15 || item.listStyleId === 11) && item.classificationName"
+                              class="type">
                               {{ item.classificationName }}
                             </p>
                             <h6 class="titleDes">{{ item.title }}</h6>
@@ -271,63 +195,43 @@
                                 </template>
                               </span>
                             </template>
-                            <span v-if="item.listStyleId === 10 "
-                                  class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
-                        item.labelName }}</span>
+                            <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
+                              && ' | ' +
+                              item.labelName }}</span>
                             <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                              <div v-if="item.keynoteSpeaker"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/mine.png"
-                                     alt="" /> {{ item.keynoteSpeaker }}
+                              <div v-if="item.keynoteSpeaker" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
                               </div>
-                              <div v-if="item.activityStartTime"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/time.png"
-                                     alt="" />
+                              <div v-if="item.activityStartTime" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/time.png" alt="" />
                                 {{ item.activityStartTime }}
                               </div>
-                              <div v-if="item.offlineLocation"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/location.png"
-                                     alt="" /> {{ item.offlineLocation }}
+                              <div v-if="item.offlineLocation" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
+                                }}
                               </div>
-                              <div v-if="item.onlineLocation"
-                                   class="meta">
-                                <img class="icon"
-                                     src="@/assets/images/online.png"
-                                     alt="" /> {{ item.onlineLocation }}
+                              <div v-if="item.onlineLocation" class="meta">
+                                <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
                               </div>
                             </template>
                           </div>
-                          <img class="pic"
-                               :src="item.titleImg"
-                               alt=""
-                               onerror="javascript:this.src='./images/1.png?id=1';" />
+                          <img class="pic" :src="item.titleImg" alt=""
+                            onerror="javascript:this.src='./images/1.png?id=1';" />
                         </template>
                       </li>
                     </ul>
-                    <div v-if="articles.length"
-                         class="pagination">
-                      <el-pagination background
-                                     @current-change="currentChange"
-                                     :current-page="page"
-                                     :page-size="pageSize"
-                                     layout="total, prev, pager, next"
-                                     :total="total"></el-pagination>
+                    <div v-if="articles.length" class="pagination">
+                      <el-pagination background @current-change="currentChange" :current-page="page"
+                        :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
                     </div>
                   </div>
                 </template>
                 <template v-else>
                   <div class="article-wrap">
-                    <ul :class="['articles', {media: info.listStyleId === 74}]">
-                      <li v-for="(item, i) in articles"
-                          :key="i"
-                          :class="{'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68}"
-                          class="overDetail"
-                          @click="toArtice(item)">
+                    <ul :class="['articles', { media: info.listStyleId === 74 }]">
+                      <li v-for="(item, i) in articles" :key="i"
+                        :class="{ 'news-notice': info.listStyleId === 55, 'org': info.listStyleId === 68 }"
+                        class="overDetail" @click="toArtice(item)">
                         <template v-if="info.listStyleId === 55">
                           <div class="releaseTime">
                             <p class="d">{{ item.date }}</p>
@@ -336,11 +240,8 @@
                           <div class="news-title">{{ item.title }}</div>
                         </template>
                         <template v-else>
-                          <img v-if="info.listStyleId !== 74"
-                               class="pic"
-                               :src="item.titleImg"
-                               alt=""
-                               onerror="javascript:this.src='./images/1.png?id=1';" />
+                          <img v-if="info.listStyleId !== 74" class="pic" :src="item.titleImg" alt=""
+                            onerror="javascript:this.src='./images/1.png?id=1';" />
 
                           <template v-else-if="item.fileList">
                             <!-- <el-image class="media-pic"
@@ -348,90 +249,65 @@
                                       src="https://huorantech.com/iasf/sysFiles/preview/1706961813193707521"
                                       :preview-src-list="['https://huorantech.com/iasf/sysFiles/preview/1706961813193707521']">
                             </el-image> -->
-                            <video v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))"
-                                   class="media-video"
-                                   controls
-                                   x5-playsinline
-                                   x5-video-player-type="h5"
-                                   :poster="isIphone ? 'https://huorantech.com/images/about/12.png' : ''"
-                                   preload>
-                              <source :src="item.fileList[0].filePath"
-                                      type="video/mp4">
+                            <video
+                              v-if="Util.isVideo(item.fileList[0].fileName.substring(item.fileList[0].fileName.lastIndexOf('.') + 1))"
+                              class="media-video" controls x5-playsinline x5-video-player-type="h5"
+                              :poster="isIphone ? 'https://huorantech.com/images/about/12.png' : ''" preload>
+                              <source :src="item.fileList[0].filePath" type="video/mp4">
                               您的浏览器不支持 video 标签。
                             </video>
-                            <el-image v-else
-                                      class="media-pic"
-                                      :src="item.fileList[0].filePath"
-                                      :preview-src-list="[item.fileList[0].filePath]">
+                            <el-image v-else class="media-pic" :src="item.fileList[0].filePath"
+                              :preview-src-list="[item.fileList[0].filePath]">
                             </el-image>
                           </template>
 
                           <div class="texts">
                             <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                               class="type">
+                              class="type">
                               {{ item.classificationName }}
                             </p>
-                            <h6 class="titleDes"
-                                :title="item.title">{{ item.title }}</h6>
-                            <template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
+                            <h6 class="titleDes" :title="item.title">{{ item.title }}</h6>
+                            <template
+                              v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
                               <span class="meta">{{ item.releaseTime }}</span>
-                              <div class="des"
-                                   v-html="item.mainBody"></div>
+                              <div class="des" v-html="item.mainBody"></div>
                             </template>
-                            <span v-if="item.listStyleId === 10 "
-                                  class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
-                        item.labelName }}</span>
+                            <span v-if="item.listStyleId === 10" class="meta">{{ item.releaseTime }} {{ item.labelName
+                              && ' | ' +
+                              item.labelName }}</span>
                             <template v-if="item.listStyleId === 15 || item.listStyleId === 16">
-                              <div v-if="item.keynoteSpeaker"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/mine.png"
-                                     alt="" /> {{ item.keynoteSpeaker }}
+                              <div v-if="item.keynoteSpeaker" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/mine.png" alt="" /> {{ item.keynoteSpeaker }}
                               </div>
-                              <div v-if="item.activityStartTime"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/time.png"
-                                     alt="" />
+                              <div v-if="item.activityStartTime" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/time.png" alt="" />
                                 {{ item.activityStartTime }}
                               </div>
-                              <div v-if="item.offlineLocation"
-                                   class="meta m-b-10">
-                                <img class="icon"
-                                     src="@/assets/images/location.png"
-                                     alt="" /> {{ item.offlineLocation }}
+                              <div v-if="item.offlineLocation" class="meta m-b-10">
+                                <img class="icon" src="@/assets/images/location.png" alt="" /> {{ item.offlineLocation
+                                }}
                               </div>
-                              <div v-if="item.onlineLocation"
-                                   class="meta">
-                                <img class="icon"
-                                     src="@/assets/images/online.png"
-                                     alt="" /> {{ item.onlineLocation }}
+                              <div v-if="item.onlineLocation" class="meta">
+                                <img class="icon" src="@/assets/images/online.png" alt="" /> {{ item.onlineLocation }}
                               </div>
                             </template>
-                            <el-button v-if="item.listStyleId === 15 || item.listStyleId == 68"
-                                       type="primary"
-                                       class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
+                            <el-button v-if="item.listStyleId === 15 || item.listStyleId == 68" type="primary"
+                              class="readDetailBtn">{{
+                                $t('column.readDetail') }}</el-button>
                           </div>
                         </template>
                       </li>
                     </ul>
-                    <div v-if="total > articles.length"
-                         class="pagination">
-                      <el-pagination background
-                                     @current-change="currentChange"
-                                     :current-page="page"
-                                     :page-size="pageSize"
-                                     layout="total, prev, pager, next"
-                                     :total="total"></el-pagination>
+                    <div v-if="total > articles.length" class="pagination">
+                      <el-pagination background @current-change="currentChange" :current-page="page"
+                        :page-size="pageSize" layout="total, prev, pager, next" :total="total"></el-pagination>
                     </div>
                   </div>
                 </template>
               </template>
             </template>
-            <div v-else
-                 class="none">
-              <img src="@/assets/images/none.png"
-                   alt="">
+            <div v-else class="none">
+              <img src="@/assets/images/none.png" alt="">
               <p class="text">{{ $t('column.comming') }}</p>
             </div>
           </div>
@@ -442,10 +318,7 @@
           <div class="right">
             <p class="l-title">{{ $t('column.hot') }}</p>
             <ul class="list">
-              <li v-for="(item, i) in hots"
-                  :key="i"
-                  :title="item.title"
-                  @click="toArtice(item)">
+              <li v-for="(item, i) in hots" :key="i" :title="item.title" @click="toArtice(item)">
                 <p class="text">{{ item.title }}</p>
                 <span class="date">{{ item.releaseTime }}</span>
               </li>
@@ -453,10 +326,7 @@
 
             <p class="l-title">{{ $t('column.latestNews') }}</p>
             <ul class="list">
-              <li v-for="(item, i) in news"
-                  :key="i"
-                  :title="item.title"
-                  @click="toArtice(item)">
+              <li v-for="(item, i) in news" :key="i" :title="item.title" @click="toArtice(item)">
                 <p class="text">{{ item.title }}</p>
                 <span class="date">{{ item.releaseTime }}</span>
               </li>
@@ -479,7 +349,7 @@ export default {
   data () {
     return {
       Util,
-      loaded: false,
+      loaded: true,
       fromColumn: this.$route.query.column,
       isIphone: false,
       columnId: '',
@@ -563,13 +433,13 @@ export default {
     // 获取栏目详情
     getInfo () {
       this.loading = true
-      this.loaded = false
+      this.loaded = true
       this.id &&
         this.$post(`${this.api.findColumn}?id=${this.id}`)
           .then(({ data }) => {
             this.columnClick(data);
-            if (data.typeId !== 3 && !data.menuVisible) {
-              this.loaded = true; // 非长页，才展示页面
+            if (data.typeId === 3 || data.menuVisible) {
+              this.loaded = false; // 非长页，才展示页面
             }
             this.info = data
             this.pageSize = data.pageSize || 10
@@ -875,688 +745,762 @@ export default {
 
 <style lang="scss" scoped>
 .banner {
-    position: relative;
+  position: relative;
+  height: 24rem;
+  color: #fff;
+
+  img {
     height: 24rem;
-    color: #fff;
-    img {
-        height: 24rem;
-        object-fit: cover;
-    }
-    .texts {
-        position: absolute;
-        top: 160px;
-        left: 267px;
-    }
+    object-fit: cover;
+  }
 
-    .text {
-        font-size: 2.16rem;
-        font-weight: 600;
-        @include ellipsis;
-    }
+  .texts {
+    position: absolute;
+    top: 160px;
+    left: 267px;
+  }
 
-    .sub {
-        margin-top: 0.5rem;
-        font-size: 1.6rem;
-    }
+  .text {
+    font-size: 2.16rem;
+    font-weight: 600;
+    @include ellipsis;
+  }
+
+  .sub {
+    margin-top: 0.5rem;
+    font-size: 1.6rem;
+  }
 }
+
 .el-tree-node__content {
-    padding-left: 10px !important;
+  padding-left: 10px !important;
 }
+
 .l-title {
-    font-weight: 600;
+  font-weight: 600;
 }
 
 .column-wrap {
-    padding: 2rem 0;
-    background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
-        url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
-    background-color: #f9fafa;
+  padding: 2rem 0;
+  background: url(../../assets/images/column-bg.png) 0 0 / auto no-repeat,
+    url(../../assets/images/column-bg2.png) bottom right/auto auto no-repeat;
+  background-color: #f9fafa;
 }
 
 .article {
-    display: flex;
-    justify-content: space-between;
-    width: 1200px;
-    margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  width: 1200px;
+  margin: 0 auto;
 
-    .left {
-        width: 83%;
-        &:only-child {
-            width: 100%;
-            .detail:only-child {
-                max-width: none;
-            }
-        }
+  .left {
+    width: 83%;
+
+    &:only-child {
+      width: 100%;
+
+      .detail:only-child {
+        max-width: none;
+      }
     }
+  }
 
-    .article-wrap {
-        width: 100%;
+  .article-wrap {
+    width: 100%;
+  }
+
+  .switch {
+    display: inline-flex;
+    align-items: center;
+    margin-right: 2.5rem;
+
+    li {
+      padding: 0 0.75rem;
+      margin-right: 0.5rem;
+      line-height: 1.8rem;
+      font-size: 1rem;
+      color: #333;
+      background: #f7f7f7;
+      cursor: pointer;
     }
 
-    .switch {
-        display: inline-flex;
-        align-items: center;
-        margin-right: 2.5rem;
-
-        li {
-            padding: 0 0.75rem;
-            margin-right: 0.5rem;
-            line-height: 1.8rem;
-            font-size: 1rem;
-            color: #333;
-            background: #f7f7f7;
-            cursor: pointer;
-        }
+    .active {
+      color: #fff;
+      background: linear-gradient(126deg, #1150ac 0%, #17beff 100%);
+    }
+  }
 
-        .active {
-            color: #fff;
-            background: linear-gradient(126deg, #1150ac 0%, #17beff 100%);
-        }
+  .forms {
+    display: flex;
+    align-items: center;
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    background-color: #fff;
+
+    .item {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 1.5rem;
     }
 
-    .forms {
-        display: flex;
-        align-items: center;
-        padding: 1.5rem;
-        margin-bottom: 1rem;
-        background-color: #fff;
-
-        .item {
-            display: inline-flex;
-            align-items: center;
-            margin-right: 1.5rem;
-        }
+    .label {
+      font-size: 0.912rem;
+      color: #333;
+      white-space: nowrap;
+    }
 
-        .label {
-            font-size: 0.912rem;
-            color: #333;
-            white-space: nowrap;
-        }
+    /deep/.el-input__inner {
+      width: 100%;
+      height: 2.4rem;
+      line-height: 2.4rem;
+      border: 0;
+      background: #f7f7f7;
+    }
 
-        /deep/.el-input__inner {
-            width: 100%;
-            height: 2.4rem;
-            line-height: 2.4rem;
-            border: 0;
-            background: #f7f7f7;
-        }
+    .search {
+      display: inline-flex;
+      width: 34%;
+      margin-top: 0.1rem;
 
-        .search {
-            display: inline-flex;
-            width: 34%;
-            margin-top: 0.1rem;
-
-            input {
-                width: 100%;
-                height: 2.4rem;
-                padding: 0 0.75rem;
-                font-size: 1rem;
-                color: #333;
-                background: #f7f7f7;
-                border: 0;
-                border-radius: 6px;
-
-                &:focus {
-                    outline: none;
-                }
-            }
-        }
+      input {
+        width: 100%;
+        height: 2.4rem;
+        padding: 0 0.75rem;
+        font-size: 1rem;
+        color: #333;
+        background: #f7f7f7;
+        border: 0;
+        border-radius: 6px;
 
-        .icon {
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            width: 3.1rem;
-            height: 2.4rem;
-            background: #1583ff;
-            border-radius: 0px 6px 6px 0px;
-            cursor: pointer;
+        &:focus {
+          outline: none;
         }
+      }
     }
 
-    .contents {
-        display: flex;
+    .icon {
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      width: 3.1rem;
+      height: 2.4rem;
+      background: #1583ff;
+      border-radius: 0px 6px 6px 0px;
+      cursor: pointer;
     }
+  }
 
-    /deep/.columns {
-        & + .detail {
-            padding-left: 10px;
-        }
-        width: 22%;
-        margin-right: 0.6rem;
-        overflow: auto;
-        span {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+  .contents {
+    display: flex;
+  }
 
-        &:after {
-            content: '';
-            position: absolute;
-            top: 0;
-            right: 0;
-            width: 2px;
-            height: 100%;
-            background-color: #e1e6f2;
-        }
+  /deep/.columns {
+    &+.detail {
+      padding-left: 10px;
+    }
 
-        .el-tree-node__content {
-            position: relative;
-            height: 2.4rem;
-            padding-left: 2rem;
-            margin-bottom: 1px;
-            font-size: 1.04rem;
-            color: #666;
-            background-color: #fff;
-            border-top: 1px solid #f8f9f9;
-            cursor: pointer;
-
-            &:hover {
-                color: #0c84eb;
-            }
-        }
+    width: 22%;
+    margin-right: 0.6rem;
+    overflow: auto;
 
-        .el-tree-node__label {
-            font-size: 1.28rem;
-            color: #666;
-            line-height: 22px;
-        }
+    span {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
 
-        .el-tree-node__expand-icon.expanded {
-            transform: rotate(180deg);
-        }
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      width: 2px;
+      height: 100%;
+      background-color: #e1e6f2;
+    }
 
-        .el-tree-node__expand-icon {
-            position: absolute;
-            right: 10px;
-        }
+    .el-tree-node__content {
+      position: relative;
+      height: 2.4rem;
+      padding-left: 2rem;
+      margin-bottom: 1px;
+      font-size: 1.04rem;
+      color: #666;
+      background-color: #fff;
+      border-top: 1px solid #f8f9f9;
+      cursor: pointer;
+
+      &:hover {
+        color: #0c84eb;
+      }
+    }
 
-        .is-current > .el-tree-node__content {
-            background-color: #e5edf8;
-            border-top: 0;
-
-            &:after {
-                content: '';
-                z-index: 2;
-                position: absolute;
-                top: 0;
-                right: 0;
-                width: 2px;
-                height: 100%;
-                background-color: #083a93;
-            }
+    .el-tree-node__label {
+      font-size: 1.28rem;
+      color: #666;
+      line-height: 22px;
+    }
 
-            .el-tree-node__label,
-            .custom-tree-node {
-                font-weight: 600;
-                color: #1150ac;
-            }
-        }
+    .el-tree-node__expand-icon.expanded {
+      transform: rotate(180deg);
     }
 
-    .articles {
-        .readDetail {
-            padding: 10px 20px;
-            justify-content: flex-start;
-            align-items: center;
-            .texts {
-                padding-left: 1.5rem;
-                .titleDes {
-                    margin-bottom: 10px;
-                    font-size: 1.2rem;
-                    margin-top: 0;
-                }
-                .des {
-                    margin-top: 10px;
-                }
-            }
-            .titleDes {
-                margin-top: 0.8rem;
-                -webkit-line-clamp: 1;
-            }
-            .readDetailBtn {
-                margin-top: 10px;
-            }
-            .texts {
-                flex-grow: 1;
-            }
-        }
-        .overDetail {
-            .texts {
-                width: 70%;
-            }
-        }
-        li {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 20px;
-            background-color: #fff;
-            cursor: pointer;
-        }
+    .el-tree-node__expand-icon {
+      position: absolute;
+      right: 10px;
+    }
 
-        .texts {
-            width: 60%;
-            padding-left: 30px;
-        }
+    .is-current>.el-tree-node__content {
+      background-color: #e5edf8;
+      border-top: 0;
 
-        .type {
-            margin-bottom: 15px;
-            font-size: 1.024rem;
-            color: #333;
-        }
+      &:after {
+        content: '';
+        z-index: 2;
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 2px;
+        height: 100%;
+        background-color: #083a93;
+      }
 
-        h6 {
-            margin-bottom: 10px;
-            font-size: 1.368rem;
-            color: #000;
-            @include mul-ellipsis(2);
-        }
+      .el-tree-node__label,
+      .custom-tree-node {
+        font-weight: 600;
+        color: #1150ac;
+      }
+    }
+  }
 
-        .meta {
-            display: flex;
-            align-items: center;
-            font-size: 0.88rem;
-            line-height: 1;
-            font-family: PingFangSC-Medium;
-            color: #333;
-        }
+  .articles {
+    .readDetail {
+      padding: 10px 20px;
+      justify-content: flex-start;
+      align-items: center;
+
+      .texts {
+        padding-left: 1.5rem;
 
-        .icon {
-            margin-right: 10px;
+        .titleDes {
+          margin-bottom: 10px;
+          font-size: 1.2rem;
+          margin-top: 0;
         }
 
         .des {
-            margin-top: 10px;
-            @include mul-ellipsis(2);
+          margin-top: 10px;
         }
+      }
 
-        .pic {
-            width: 30%;
-            height: auto;
-            object-fit: cover;
-        }
+      .titleDes {
+        margin-top: 0.8rem;
+        -webkit-line-clamp: 1;
+      }
+
+      .readDetailBtn {
+        margin-top: 10px;
+      }
+
+      .texts {
+        flex-grow: 1;
+      }
     }
-    .media {
-        display: flex;
-        flex-wrap: wrap;
-        margin-left: 10px;
-        li {
-            flex-direction: column;
-            width: calc(33% - 30px);
-            margin-right: 30px;
-            background-color: transparent;
-            &:nth-child(3n) {
-                margin-right: 0;
-            }
-        }
-        .media-video {
-            width: 100%;
-            height: 155px;
-        }
-        /deep/.media-pic {
-            width: 100%;
-            height: 155px;
-            img {
-                object-fit: cover;
-            }
-        }
-        .texts {
-            width: 100% !important;
-            padding-left: 0;
-        }
-        h6 {
-            margin-top: 10px;
-            margin-bottom: 0;
-            font-size: 1rem;
-            text-align: center;
-            -webkit-line-clamp: 1;
-        }
+
+    .overDetail {
+      .texts {
+        width: 70%;
+      }
     }
-    .news-notice {
-        .releaseTime {
-            width: 88px;
-            height: 88px;
-            padding: 10px 0 16px;
-            margin-right: 24px;
-            color: #fff;
-            text-align: center;
-            background: #0b5086;
-        }
-        .d {
-            font-size: 2rem;
-            font-family: DINCondensed-Bold, DINCondensed;
-            font-weight: bold;
-            line-height: 43px;
-        }
-        .m {
-            font-size: 0.9rem;
-            line-height: 20px;
-        }
-        .news-title {
-            width: calc(100% - 110px);
-            font-size: 1.1rem;
-            color: #333;
-            line-height: 1.6;
-            @include mul-ellipsis(2);
-        }
+
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+      background-color: #fff;
+      cursor: pointer;
     }
-    .org {
-        padding: 15px;
+
+    .texts {
+      width: 60%;
+      padding-left: 30px;
     }
-    .right {
-        width: 17%;
-        padding-left: 20px;
-        overflow: hidden;
+
+    .type {
+      margin-bottom: 15px;
+      font-size: 1.024rem;
+      color: #333;
     }
 
-    .list {
-        margin-bottom: 1rem;
+    h6 {
+      margin-bottom: 10px;
+      font-size: 1.368rem;
+      color: #000;
+      @include mul-ellipsis(2);
+    }
 
-        li {
-            padding: 0.8rem 0;
-            border-bottom: 1px solid #d8d8d8;
-        }
+    .meta {
+      display: flex;
+      align-items: center;
+      font-size: 0.88rem;
+      line-height: 1;
+      font-family: PingFangSC-Medium;
+      color: #333;
+    }
 
-        .text {
-            margin-bottom: 5px;
-            font-size: 0.98rem;
-            cursor: pointer;
+    .icon {
+      margin-right: 10px;
+    }
 
-            &:hover {
-                color: $main-color;
-            }
-        }
+    .des {
+      margin-top: 10px;
+      @include mul-ellipsis(2);
+    }
 
-        .date {
-            font-size: 0.78rem;
-            color: #999;
-        }
+    .pic {
+      width: 30%;
+      height: auto;
+      object-fit: cover;
     }
-}
+  }
 
-.activity {
-    .column-wrap {
-        padding: 0;
-        background: none;
+  .media {
+    display: flex;
+    flex-wrap: wrap;
+    margin-left: 10px;
+
+    li {
+      flex-direction: column;
+      width: calc(33% - 30px);
+      margin-right: 30px;
+      background-color: transparent;
+
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
     }
 
-    .article-wrap {
-        width: 100%;
+    .media-video {
+      width: 100%;
+      height: 155px;
     }
 
-    .article {
-        .forms {
-            padding: 30px 0;
-        }
+    /deep/.media-pic {
+      width: 100%;
+      height: 155px;
 
-        .articles li {
-            flex-direction: row-reverse;
-            justify-content: flex-end;
-            padding-bottom: 38px;
-            margin-bottom: 38px;
-            border-bottom: 1px solid #ddd;
-        }
+      img {
+        object-fit: cover;
+      }
+    }
 
-        .right {
-            padding-top: 30px;
-        }
+    .texts {
+      width: 100% !important;
+      padding-left: 0;
+    }
+
+    h6 {
+      margin-top: 10px;
+      margin-bottom: 0;
+      font-size: 1rem;
+      text-align: center;
+      -webkit-line-clamp: 1;
+    }
+  }
+
+  .news-notice {
+    .releaseTime {
+      width: 88px;
+      height: 88px;
+      padding: 10px 0 16px;
+      margin-right: 24px;
+      color: #fff;
+      text-align: center;
+      background: #0b5086;
+    }
+
+    .d {
+      font-size: 2rem;
+      font-family: DINCondensed-Bold, DINCondensed;
+      font-weight: bold;
+      line-height: 43px;
+    }
+
+    .m {
+      font-size: 0.9rem;
+      line-height: 20px;
+    }
+
+    .news-title {
+      width: calc(100% - 110px);
+      font-size: 1.1rem;
+      color: #333;
+      line-height: 1.6;
+      @include mul-ellipsis(2);
+    }
+  }
+
+  .org {
+    padding: 15px;
+  }
+
+  .right {
+    width: 17%;
+    padding-left: 20px;
+    overflow: hidden;
+  }
+
+  .list {
+    margin-bottom: 1rem;
+
+    li {
+      padding: 0.8rem 0;
+      border-bottom: 1px solid #d8d8d8;
     }
+
+    .text {
+      margin-bottom: 5px;
+      font-size: 0.98rem;
+      cursor: pointer;
+
+      &:hover {
+        color: $main-color;
+      }
+    }
+
+    .date {
+      font-size: 0.78rem;
+      color: #999;
+    }
+  }
 }
-.party {
-    /deep/.columns {
-        .el-tree-node__content {
-            &:hover {
-                color: $partyTheme;
-            }
-        }
-        .is-current > .el-tree-node__content {
-            background-color: $lightPartyTheme;
-            &:after {
-                background-color: $partyTheme;
-            }
 
-            .el-tree-node__label,
-            .custom-tree-node {
-                color: $partyTheme;
-            }
-        }
+.activity {
+  .column-wrap {
+    padding: 0;
+    background: none;
+  }
+
+  .article-wrap {
+    width: 100%;
+  }
+
+  .article {
+    .forms {
+      padding: 30px 0;
     }
-    .article {
-        .readDetailBtn {
-            width: 100px;
-            padding: 10px 20px;
-            margin-top: 10px;
-            background-color: $partyTheme;
-            border-color: $partyTheme;
-        }
+
+    .articles li {
+      flex-direction: row-reverse;
+      justify-content: flex-end;
+      padding-bottom: 38px;
+      margin-bottom: 38px;
+      border-bottom: 1px solid #ddd;
     }
-    /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
-        background-color: $partyTheme !important;
+
+    .right {
+      padding-top: 30px;
     }
+  }
 }
+
+.party {
+  /deep/.columns {
+    .el-tree-node__content {
+      &:hover {
+        color: $partyTheme;
+      }
+    }
+
+    .is-current>.el-tree-node__content {
+      background-color: $lightPartyTheme;
+
+      &:after {
+        background-color: $partyTheme;
+      }
+
+      .el-tree-node__label,
+      .custom-tree-node {
+        color: $partyTheme;
+      }
+    }
+  }
+
+  .article {
+    .readDetailBtn {
+      width: 100px;
+      padding: 10px 20px;
+      margin-top: 10px;
+      background-color: $partyTheme;
+      border-color: $partyTheme;
+    }
+  }
+
+  /deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
+    background-color: $partyTheme !important;
+  }
+}
+
 .detail {
-    flex: 1;
-    max-width: 77%;
-    padding: 10px 15px;
-    background-color: #fff;
-    overflow: auto;
-    h2 {
-        margin-bottom: 1rem;
-        font-size: 1.9rem;
-        color: #1c1c1c;
+  flex: 1;
+  max-width: 77%;
+  padding: 10px 15px;
+  background-color: #fff;
+  overflow: auto;
+
+  h2 {
+    margin-bottom: 1rem;
+    font-size: 1.9rem;
+    color: #1c1c1c;
+  }
+
+  .meta {
+    margin: 1rem 0;
+    font-size: 0.88rem;
+    color: #9b9b9b;
+  }
+
+  .brief {
+    padding-bottom: 1.5rem;
+    margin-bottom: 1rem;
+    font-size: 1.2rem;
+    line-height: 1.33;
+    color: #606060;
+    border-bottom: 1px solid #d8d8d8;
+  }
+
+  /deep/.des {
+    a {
+      color: rgb(0, 0, 238);
+      word-wrap: break-word;
     }
-    .meta {
-        margin: 1rem 0;
-        font-size: 0.88rem;
-        color: #9b9b9b;
+
+    img {
+      max-width: 100%;
+      object-fit: cover;
     }
-    .brief {
-        padding-bottom: 1.5rem;
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-        line-height: 1.33;
-        color: #606060;
-        border-bottom: 1px solid #d8d8d8;
-    }
-    /deep/.des {
-        a {
-            color: rgb(0, 0, 238);
-            word-wrap: break-word;
-        }
-        img {
-            max-width: 100%;
-            object-fit: cover;
-        }
+  }
+
+  .annex {
+    margin-top: 30px;
+
+    h6 {
+      padding-left: 8px;
+      margin-bottom: 20px;
+      font-size: 16px;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      line-height: 1;
+      color: #333;
+      border-left: 4px solid #1583ff;
     }
-    .annex {
-        margin-top: 30px;
-        h6 {
-            padding-left: 8px;
-            margin-bottom: 20px;
-            font-size: 16px;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            line-height: 1;
-            color: #333;
-            border-left: 4px solid #1583ff;
-        }
-        li {
-            display: flex;
-            align-items: center;
-            margin-bottom: 10px;
-        }
-        .name {
-            margin-right: 8px;
-            font-size: 14px;
-        }
-        .download {
-            color: #1583ff;
-            cursor: pointer;
-        }
+
+    li {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
     }
+
+    .name {
+      margin-right: 8px;
+      font-size: 14px;
+    }
+
+    .download {
+      color: #1583ff;
+      cursor: pointer;
+    }
+  }
 }
+
 .none {
-    display: inline-flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    flex: 1;
-    text-align: center;
-    .text {
-        margin-top: 20px;
-        font-size: 0.9rem;
-        color: #333;
-    }
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  text-align: center;
+
+  .text {
+    margin-top: 20px;
+    font-size: 0.9rem;
+    color: #333;
+  }
 }
 
 @media (max-width: 1200px) {
-    .banner {
-        height: 15rem !important;
-        img {
-            height: 15rem !important;
-        }
-        .texts {
-            top: 6rem;
-            left: 3rem;
-        }
+  .banner {
+    height: 15rem !important;
+
+    img {
+      height: 15rem !important;
+    }
+
+    .texts {
+      top: 6rem;
+      left: 3rem;
     }
-    .article {
+  }
+
+  .article {
+    flex-direction: column;
+    width: 90%;
+
+    .columns {
+      width: 40%;
+    }
+
+    .left {
+      width: 100%;
+
+      .forms {
         flex-direction: column;
-        width: 90%;
-        .columns {
-            width: 40%;
-        }
-        .left {
-            width: 100%;
-            .forms {
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-
-                .item,
-                .search {
-                    margin: 20px 0 0 0;
-                }
-
-                .item:first-child {
-                    margin: 0;
-                }
-
-                div {
-                    width: 100%;
-                }
-            }
+        justify-content: center;
+        align-items: center;
+
+        .item,
+        .search {
+          margin: 20px 0 0 0;
         }
 
-        .article-wrap {
-            width: 90%;
-            margin: 0 auto;
+        .item:first-child {
+          margin: 0;
         }
 
-        .articles {
-            li:not(.news-notice) {
-                flex-direction: column;
-                align-items: flex-start;
-                padding: 1rem;
-                margin-top: 1rem;
-                .pic {
-                    width: 100%;
-                    margin: 10px 0;
-                }
-            }
-            .readDetail {
-                align-items: flex-start;
-                .texts {
-                    width: 100%;
-                    padding-left: 0;
-                }
-            }
+        div {
+          width: 100%;
         }
-        .media {
-            li {
-                padding: 0;
-            }
+      }
+    }
+
+    .article-wrap {
+      width: 90%;
+      margin: 0 auto;
+    }
+
+    .articles {
+      li:not(.news-notice) {
+        flex-direction: column;
+        align-items: flex-start;
+        padding: 1rem;
+        margin-top: 1rem;
+
+        .pic {
+          width: 100%;
+          margin: 10px 0;
         }
+      }
+
+      .readDetail {
+        align-items: flex-start;
 
-        .right {
-            width: 95%;
-            margin: 20px auto;
+        .texts {
+          width: 100%;
+          padding-left: 0;
         }
+      }
     }
+
+    .media {
+      li {
+        padding: 0;
+      }
+    }
+
+    .right {
+      width: 95%;
+      margin: 20px auto;
+    }
+  }
 }
 
 @media (max-width: 640px) {
-    .banner {
-        height: 12rem !important;
-        img {
-            height: 12rem !important;
-        }
-        .texts {
-            left: 2rem;
-            bottom: 2rem;
-            .text {
-                font-size: 1.5rem;
-            }
-        }
+  .banner {
+    height: 12rem !important;
+
+    img {
+      height: 12rem !important;
     }
-    .article {
-        .contents {
-            flex-direction: column;
-            padding: 0 15px;
-        }
-        .columns,
-        .article-wrap {
-            width: 100%;
-            margin-right: 0;
-        }
-        .articles {
-            li {
-                .leftBox {
-                    padding-left: 0;
-                    .titleDes {
-                        line-height: 1.368rem;
-                    }
-                }
-            }
-        }
-        .media {
-            margin-left: 0;
-            li {
-                width: calc(50% - 20px);
-                margin-right: 20px;
-                &:nth-child(2n) {
-                    margin-right: 0;
-                }
-                &:nth-child(3n) {
-                    margin-right: 20px;
-                }
-            }
-        }
+
+    .texts {
+      left: 2rem;
+      bottom: 2rem;
+
+      .text {
+        font-size: 1.5rem;
+      }
     }
-    .forms {
-        .switch {
-            width: 100%;
-            flex-direction: column;
-            margin-right: 0;
-            li {
-                width: 90%;
-                margin: 0 auto;
-                margin-top: 10px;
-            }
-        }
+  }
+
+  .article {
+    .contents {
+      flex-direction: column;
+      padding: 0 15px;
     }
-    .detail {
-        h2 {
-            font-size: 1.3rem;
+
+    .columns,
+    .article-wrap {
+      width: 100%;
+      margin-right: 0;
+    }
+
+    .articles {
+      li {
+        .leftBox {
+          padding-left: 0;
+
+          .titleDes {
+            line-height: 1.368rem;
+          }
         }
-        .meta {
-            font-size: 0.7rem;
+      }
+    }
+
+    .media {
+      margin-left: 0;
+
+      li {
+        width: calc(50% - 20px);
+        margin-right: 20px;
+
+        &:nth-child(2n) {
+          margin-right: 0;
         }
-        .brief {
-            font-size: 1rem;
+
+        &:nth-child(3n) {
+          margin-right: 20px;
         }
+      }
+    }
+  }
+
+  .forms {
+    .switch {
+      width: 100%;
+      flex-direction: column;
+      margin-right: 0;
+
+      li {
+        width: 90%;
+        margin: 0 auto;
+        margin-top: 10px;
+      }
     }
+  }
+
+  .detail {
+    h2 {
+      font-size: 1.3rem;
+    }
+
+    .meta {
+      font-size: 0.7rem;
+    }
+
+    .brief {
+      font-size: 1rem;
+    }
+  }
 }
 </style>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 0e4cefb..81d33d6 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,194 +1,139 @@
 <template>
-  <div class="wrap"
-       v-if="modules.length>=1">
-    <el-carousel class="carousel"
-                 :interval="6000"
-                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
-                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
-      <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable"
-                          :key="i">
-          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
-               width="100%"
-               :src="item.pic"
-               alt=""
-               @click="openLink(item)">
-          <!-- <div class="texts">
+  <div class="wrap">
+    <template v-if="modules.length >= 1">
+      <el-carousel class="carousel" :interval="6000"
+        :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+        :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+        <template v-for="(item, i) in modules[0].list">
+          <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+            <img :class="[{ 'cursor-pointer': isLink(item.link.linkName) }]" width="100%" :src="item.pic" alt=""
+              @click="openLink(item)">
+            <!-- <div class="texts">
             <h6>{{ item.title }}</h6>
             <p class="text">{{ item.des }}</p>
           </div> -->
-        </el-carousel-item>
-      </template>
-    </el-carousel>
-
-    <div class="block">
-      <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
-        <ul class="card">
-          <li class="wow fadeInDown"
-              data-wow-delay="0.2s">
-            <img class="pic"
-                 :src="modules[2].form.pic"
-                 alt="">
-            <div class="texts">
-              <h6>{{ modules[2].form.title }}</h6>
-              <p class="des">{{ modules[2].form.des }}</p>
-              <img v-if="modules[2].form.link"
-                   src="@/assets/images/arrow.png"
-                   alt=""
-                   :class="{'arrow': isLink(modules[2].form.link.linkName)}"
-                   @click="openLink(modules[2].form)">
-            </div>
-          </li>
-          <li class="wow fadeInDown"
-              data-wow-delay="0.6s">
-            <img class="pic"
-                 :src="modules[3].form.pic"
-                 alt="">
-            <div class="texts">
-              <h6>{{ modules[3].form.title }}</h6>
-              <p class="des">{{ modules[3].form.des }}</p>
-              <img src="@/assets/images/arrow.png"
-                   alt=""
-                   :class="{'arrow': isLink(modules[3].form.link.linkName)}"
-                   @click="openLink(modules[3].form)">
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="block news-block">
-      <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
-        <ul class="news">
-          <li class="wow fadeInDown"
-              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
-              v-for="(item, i) in articles"
-              :key="i"
-              @click="toArtice(item, modules[5].form)">
-            <img :src="item.titleImg"
-                 alt="">
-            <div class="texts">
-              <h6>{{ item.title }}</h6>
-              <div class="des"
-                   v-html="item.mainBody"></div>
-              <span class="meta">{{ item.releaseTime }}</span>
-            </div>
-          </li>
-        </ul>
-        <div class="all-link"
-             @click="toAll(modules[5].form)">
-          <span>{{$t('column.all')}} <img class="icon"
-                 src="@/assets/images/arrow.png"
-                 alt=""></span>
+          </el-carousel-item>
+        </template>
+      </el-carousel>
+
+      <div class="block">
+        <div class="inner">
+          <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+          <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
+          <ul class="card">
+            <li class="wow fadeInDown" data-wow-delay="0.2s">
+              <img class="pic" :src="modules[2].form.pic" alt="">
+              <div class="texts">
+                <h6>{{ modules[2].form.title }}</h6>
+                <p class="des">{{ modules[2].form.des }}</p>
+                <img v-if="modules[2].form.link" src="@/assets/images/arrow.png" alt=""
+                  :class="{ 'arrow': isLink(modules[2].form.link.linkName) }" @click="openLink(modules[2].form)">
+              </div>
+            </li>
+            <li class="wow fadeInDown" data-wow-delay="0.6s">
+              <img class="pic" :src="modules[3].form.pic" alt="">
+              <div class="texts">
+                <h6>{{ modules[3].form.title }}</h6>
+                <p class="des">{{ modules[3].form.des }}</p>
+                <img src="@/assets/images/arrow.png" alt="" :class="{ 'arrow': isLink(modules[3].form.link.linkName) }"
+                  @click="openLink(modules[3].form)">
+              </div>
+            </li>
+          </ul>
         </div>
       </div>
-    </div>
-
-    <div class="block">
-      <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
-        <ul class="people">
-          <template v-for="(item, i) in modules[7].list">
-            <li v-if="item.isEnable"
-                :key="i"
-                class="wow fadeInDown"
-                :data-wow-delay="(0.4 * i).toFixed(1) + 's'">
-              <img class="pic"
-                   :src="item.pic"
-                   alt="">
+
+      <div class="block news-block">
+        <div class="inner">
+          <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+          <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+          <ul class="news">
+            <li class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" v-for="(item, i) in articles"
+              :key="i" @click="toArtice(item, modules[5].form)">
+              <img :src="item.titleImg" alt="">
               <div class="texts">
                 <h6>{{ item.title }}</h6>
-                <p class="des">{{ item.des }}</p>
-                <img src="@/assets/images/arrow.png"
-                     alt=""
-                     :class="{'arrow': isLink(item.link.linkName)}"
-                     @click="openLink(item)">
+                <div class="des" v-html="item.mainBody"></div>
+                <span class="meta">{{ item.releaseTime }}</span>
               </div>
             </li>
-          </template>
-        </ul>
+          </ul>
+          <div class="all-link" @click="toAll(modules[5].form)">
+            <span>{{ $t('column.all') }} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+          </div>
+        </div>
       </div>
-    </div>
-
-    <div class="about"
-         :class="{'cursor-pointer': modules[8].form.link && isLink(modules[8].form.link.linkName)}"
-         @click="openLink(modules[8].form)">
-      <div class="inner">
-        <img class="pic wow fadeInUp"
-             src="@/assets/images/about.png"
-             alt="">
-        <div class="line wow fadeInUp"
-             data-wow-delay="0.4s"></div>
-        <div class="text wow fadeInUp"
-             data-wow-delay="0.7s">{{ modules[8].form.title }}</div>
-        <div class="des wow fadeInDown"
-             data-wow-delay="1s"
-             v-html="modules[8].form.des"></div>
+
+      <div class="block">
+        <div class="inner">
+          <h2 class="b-title wow fadeInUp">{{ modules[6].form.title }}</h2>
+          <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
+          <ul class="people">
+            <template v-for="(item, i) in modules[7].list">
+              <li v-if="item.isEnable" :key="i" class="wow fadeInDown" :data-wow-delay="(0.4 * i).toFixed(1) + 's'">
+                <img class="pic" :src="item.pic" alt="">
+                <div class="texts">
+                  <h6>{{ item.title }}</h6>
+                  <p class="des">{{ item.des }}</p>
+                  <img src="@/assets/images/arrow.png" alt="" :class="{ 'arrow': isLink(item.link.linkName) }"
+                    @click="openLink(item)">
+                </div>
+              </li>
+            </template>
+          </ul>
+        </div>
       </div>
-    </div>
-
-    <div class="block"
-         style="padding-bottom: 0">
-      <div class="inner">
-        <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
-        <ul class="stat">
-          <li>
-            <!-- <p class="num">{{ modules[10].form.title }}</p> -->
-            <animate-number class="num"
-                            ref="num1"
-                            from="0"
-                            :to="modules[10].form.title"
-                            duration="3000" />
-            <p class="text">{{ modules[10].form.des }}</p>
-          </li>
-          <li>
-            <animate-number class="num"
-                            ref="num2"
-                            from="0"
-                            :to="modules[11].form.title"
-                            duration="3000" />
-            <p class="text">{{ modules[11].form.des }}</p>
-          </li>
-          <li>
-            <animate-number class="num"
-                            ref="num3"
-                            from="0"
-                            :to="modules[12].form.title"
-                            duration="3000" />
-            <p class="text">{{ modules[12].form.des }}</p>
-          </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="0.9s">
-            <p class="num">{{ modules[13].form.title }}</p>
-            <p class="text">{{ modules[13].form.des }}</p>
-          </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="1.2s">
-            <p class="num">{{ modules[14].form.title }}</p>
-            <p class="text">{{ modules[14].form.des }}</p>
-          </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="1.5s">
-            <p class="num">{{ modules[15].form.title }}</p>
-            <p class="text">{{ modules[15].form.des }}</p>
-          </li>
-        </ul>
+
+      <div class="about" :class="{ 'cursor-pointer': modules[8].form.link && isLink(modules[8].form.link.linkName) }"
+        :style="{ backgroundImage: 'url(' + modules[8].form.pic + ')' }" @click="openLink(modules[8].form)">
+        <div class="inner">
+          <img class="pic wow fadeInUp" src="@/assets/images/about.png" alt="">
+          <div class="line wow fadeInUp" data-wow-delay="0.4s"></div>
+          <div class="text wow fadeInUp" data-wow-delay="0.7s">{{ modules[8].form.title }}</div>
+          <div class="des wow fadeInDown" data-wow-delay="1s" v-html="modules[8].form.des"></div>
+        </div>
       </div>
-    </div>
+
+      <div class="block" style="padding-bottom: 0">
+        <div class="inner">
+          <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
+          <ul class="stat">
+            <li>
+              <p class="num">{{ modules[10].form.title }}</p>
+              <!-- <animate-number class="num" ref="num1" from="0" :to="modules[10].form.title" duration="3000" /> -->
+              <p class="text">{{ modules[10].form.des }}</p>
+            </li>
+            <li>
+              <p class="num">{{ modules[11].form.title }}</p>
+              <!-- <animate-number class="num" ref="num2" from="0" :to="modules[11].form.title" duration="3000" /> -->
+              <p class="text">{{ modules[11].form.des }}</p>
+            </li>
+            <li>
+              <p class="num">{{ modules[12].form.title }}</p>
+              <!-- <animate-number class="num" ref="num3" from="0" :to="modules[12].form.title" duration="3000" /> -->
+              <p class="text">{{ modules[12].form.des }}</p>
+            </li>
+            <li class="wow fadeInRight" data-wow-delay="0.9s">
+              <p class="num">{{ modules[13].form.title }}</p>
+              <p class="text">{{ modules[13].form.des }}</p>
+            </li>
+            <li class="wow fadeInRight" data-wow-delay="1.2s">
+              <p class="num">{{ modules[14].form.title }}</p>
+              <p class="text">{{ modules[14].form.des }}</p>
+            </li>
+            <li class="wow fadeInRight" data-wow-delay="1.5s">
+              <p class="num">{{ modules[15].form.title }}</p>
+              <p class="text">{{ modules[15].form.des }}</p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
 import mixins from '@/mixins/page'
-import Setting from '@/setting'
 import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
@@ -247,750 +192,906 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .carousel {
+  height: 100vh;
+
+  img {
+    height: 100%;
+    object-fit: cover;
+  }
+
+  /deep/.el-carousel__container {
     height: 100vh;
-    img {
-        height: 100%;
-        object-fit: cover;
+  }
+
+  .texts {
+    position: absolute;
+    bottom: 20%;
+    left: 120px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    h6,
+    .text {
+      padding: 20px 15px;
+      color: #fff;
     }
-    /deep/.el-carousel__container {
-        height: 100vh;
+
+    h6 {
+      margin-bottom: 30px;
+      font-size: 68px;
+      font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
     }
-    .texts {
-        position: absolute;
-        bottom: 20%;
-        left: 120px;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        h6,
-        .text {
-            padding: 20px 15px;
-            color: #fff;
-        }
-        h6 {
-            margin-bottom: 30px;
-            font-size: 68px;
-            font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
-        }
-        .text {
-            font-size: 24px;
-            font-family: AppleSystemUIFont;
-        }
+
+    .text {
+      font-size: 24px;
+      font-family: AppleSystemUIFont;
     }
+  }
 }
+
 .block {
-    padding-top: 3.15rem;
-    .b-title {
-        font-size: 2.25rem;
-    }
-    .intro {
-        font-size: 1.35rem;
-        margin-bottom: 3.6rem;
-    }
+  padding-top: 3.15rem;
+
+  .b-title {
+    font-size: 2.25rem;
+  }
+
+  .intro {
+    font-size: 1.35rem;
+    margin-bottom: 3.6rem;
+  }
 }
+
 .card {
-    display: flex;
-    justify-content: space-between;
-    li {
-        width: 47%;
-        transition: 0.3s;
-        &:hover {
-            margin-top: -0.9375rem;
-        }
-    }
-    .pic {
-        width: 100%;
-        height: auto;
-        object-fit: cover;
-    }
-    .texts {
-        padding-left: 1.375rem;
-        margin-top: 3rem;
-        border-left: 2px solid #dfe4e9;
-    }
-    h6 {
-        min-height: 4.5rem;
-        margin-bottom: 1.56rem;
-        line-height: 2rem;
-        font-size: 1.368rem;
-        color: #333;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    .des {
-        font-size: 1.024rem;
-        color: #222;
-        line-height: 30px;
+  display: flex;
+  justify-content: space-between;
+
+  li {
+    width: 47%;
+    transition: 0.3s;
+
+    &:hover {
+      margin-top: -0.9375rem;
     }
+  }
+
+  .pic {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+  .texts {
+    padding-left: 1.375rem;
+    margin-top: 3rem;
+    border-left: 2px solid #dfe4e9;
+  }
+
+  h6 {
+    min-height: 4.5rem;
+    margin-bottom: 1.56rem;
+    line-height: 2rem;
+    font-size: 1.368rem;
+    color: #333;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .des {
+    font-size: 1.024rem;
+    color: #222;
+    line-height: 30px;
+  }
 }
 
 .news-block {
-    background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
+  background: url(../../assets/images/info-bg.png) 0 0/100% 100% no-repeat;
 }
+
 .news {
-    display: flex;
-    flex-wrap: wrap;
-    li {
-        display: inline-flex;
-        width: calc((100% - 35px) / 2);
-        padding: 2.125rem;
-        margin-bottom: 1.75rem;
-        background-color: #fff;
-        cursor: pointer;
-        overflow: hidden;
-        transition: 0.3s;
-        &:nth-child(odd) {
-            margin-right: 1.75rem;
-        }
-        &:hover {
-            transform: scale(1.05);
-        }
-    }
-    img {
-        width: 12.5rem;
-        height: 7.81rem;
-        object-fit: cover;
-    }
-    .texts {
-        width: calc(100% - 220px);
-        margin-left: 1.25rem;
-    }
-    h6 {
-        font-size: 1.28rem;
-        color: #0648a8;
-        @include ellipsis;
+  display: flex;
+  flex-wrap: wrap;
+
+  li {
+    display: inline-flex;
+    width: calc((100% - 35px) / 2);
+    padding: 2.125rem;
+    margin-bottom: 1.75rem;
+    background-color: #fff;
+    cursor: pointer;
+    overflow: hidden;
+    transition: 0.3s;
+
+    &:nth-child(odd) {
+      margin-right: 1.75rem;
     }
-    .des {
-        margin: 14px 0;
-        font-size: 1.14rem;
-        color: #333;
-        line-height: 22px;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    .meta {
-        font-size: 1.14rem;
-        color: #999;
+
+    &:hover {
+      transform: scale(1.05);
     }
+  }
+
+  img {
+    width: 12.5rem;
+    height: 7.81rem;
+    object-fit: cover;
+  }
+
+  .texts {
+    width: calc(100% - 220px);
+    margin-left: 1.25rem;
+  }
+
+  h6 {
+    font-size: 1.28rem;
+    color: #0648a8;
+    @include ellipsis;
+  }
+
+  .des {
+    margin: 14px 0;
+    font-size: 1.14rem;
+    color: #333;
+    line-height: 22px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .meta {
+    font-size: 1.14rem;
+    color: #999;
+  }
 }
 
 .people {
-    li {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 7.87rem;
-        &:nth-child(even) {
-            flex-direction: row-reverse;
-        }
-        &:hover {
-            .pic {
-                transform: scale(1.05);
-            }
-            .texts {
-                transform: translateY(15px);
-            }
-        }
-    }
-    .pic {
-        width: 47%;
-        height: auto;
-        transition: 0.3s;
-        object-fit: cover;
-    }
-    .texts {
-        width: 48%;
-        padding-top: 8.5rem;
-        transition: 0.3s;
-    }
-    h6 {
-        font-size: 1.8rem;
+  li {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 7.87rem;
+
+    &:nth-child(even) {
+      flex-direction: row-reverse;
     }
-    .des {
-        margin: 20px 0 10px;
-        font-size: 1.2rem;
-        color: #020202;
-        line-height: 30px;
+
+    &:hover {
+      .pic {
+        transform: scale(1.05);
+      }
+
+      .texts {
+        transform: translateY(15px);
+      }
     }
+  }
+
+  .pic {
+    width: 47%;
+    height: auto;
+    transition: 0.3s;
+    object-fit: cover;
+  }
+
+  .texts {
+    width: 48%;
+    padding-top: 8.5rem;
+    transition: 0.3s;
+  }
+
+  h6 {
+    font-size: 1.8rem;
+  }
+
+  .des {
+    margin: 20px 0 10px;
+    font-size: 1.2rem;
+    color: #020202;
+    line-height: 30px;
+  }
 }
 
 .glance {
-    padding-bottom: 3.125rem;
-    font-size: 2.81rem;
-    font-weight: bold;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    text-align: center;
-    border-bottom: 1px solid #dedede;
+  padding-bottom: 3.125rem;
+  font-size: 2.81rem;
+  font-weight: bold;
+  font-family: SFProDisplay-Bold, SFProDisplay;
+  text-align: center;
+  border-bottom: 1px solid #dedede;
 }
+
 .stat {
-    display: flex;
-    justify-content: space-around;
-    flex-wrap: wrap;
-    margin-top: 3.75rem;
-    li {
-        width: 27%;
-        margin-bottom: 50px;
-        transition: 0.3s;
-        &:hover {
-            transform: translateX(20px);
-        }
-    }
-    .num {
-        margin-bottom: 10px;
-        font-family: toppan;
-        font-size: 2.7rem;
-        font-weight: 800;
-        color: #035ce1;
-        line-height: 49px;
-    }
-    .text {
-        font-size: 1.08rem;
-        margin-top: 1rem;
-        line-height: 1.8rem;
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin-top: 3.75rem;
+
+  li {
+    width: 27%;
+    margin-bottom: 50px;
+    transition: 0.3s;
+
+    &:hover {
+      transform: translateX(20px);
     }
+  }
+
+  .num {
+    margin-bottom: 10px;
+    font-family: toppan;
+    font-size: 2.7rem;
+    font-weight: 800;
+    color: #035ce1;
+    line-height: 49px;
+  }
+
+  .text {
+    font-size: 1.08rem;
+    margin-top: 1rem;
+    line-height: 1.8rem;
+  }
 }
+
 .about {
-    padding: 3.848rem 0 9.9rem;
-    background: url(../../assets/images/about-bg.png) no-repeat center center;
-    // background-size: 100% 100%;
-    .pic {
-        object-fit: cover;
-    }
-    .line {
-        display: flex;
-        align-items: center;
-        margin: 3.125rem 0 1.875rem;
-        width: 5.5rem;
-        height: 6px;
-        background-color: #fff;
-        &:after {
-            content: '';
-            width: 6px;
-            height: 6px;
-        }
-    }
-    .text {
-        font-size: 1.35rem;
-        color: #fff;
+  padding: 3.848rem 0 9.9rem;
+  background: url(../../assets/images/about-bg.png) no-repeat center center;
+
+  .pic {
+    object-fit: cover;
+  }
+
+  .line {
+    display: flex;
+    align-items: center;
+    margin: 3.125rem 0 1.875rem;
+    width: 5.5rem;
+    height: 6px;
+    background-color: #fff;
+
+    &:after {
+      content: '';
+      width: 6px;
+      height: 6px;
     }
-    .des {
-        display: block;
-        padding: 2.375rem 3.75rem;
-        margin-top: 3.78rem;
-        font-size: 1.35rem;
-        color: #fff;
-        line-height: 42px;
-        text-align: center;
-        background: rgba(111, 69, 36, 0.56);
-        border-radius: 17px;
-        overflow: visible;
-        transition: 0.3s;
-        &:hover {
-            background: rgba(239, 126, 10, 0.56);
-            transform: translateY(10px);
-        }
+  }
+
+  .text {
+    font-size: 1.35rem;
+    color: #fff;
+  }
+
+  .des {
+    display: block;
+    padding: 2.375rem 3.75rem;
+    margin-top: 3.78rem;
+    font-size: 1.35rem;
+    color: #fff;
+    line-height: 42px;
+    text-align: center;
+    background: rgba(111, 69, 36, 0.56);
+    border-radius: 17px;
+    overflow: visible;
+    transition: 0.3s;
+
+    &:hover {
+      background: rgba(239, 126, 10, 0.56);
+      transform: translateY(10px);
     }
+  }
 }
 
 @media (min-width: 280px) and (max-width: 1200px) {
-    .carousel {
-        height: 21.87rem;
-        img {
-            height: 100%;
-        }
-        /deep/.el-carousel__container {
-            height: 21.87rem;
-        }
-    }
-    .about {
-        .des {
-            font-size: 1rem;
-        }
+  .carousel {
+    height: 21.87rem;
+
+    img {
+      height: 100%;
     }
-    .el-carousel__item {
-        height: 21.87rem;
-        img {
-            height: 21.87rem;
-        }
+
+    /deep/.el-carousel__container {
+      height: 21.87rem;
     }
-    .block {
-        padding: 3.125rem 0;
-        .inner {
-            width: 95%;
-            margin: 0 auto;
-            .b-title {
-                font-size: 2rem;
-                margin-bottom: 1.25rem;
-            }
-            .wow {
-                font-size: 1.5rem;
-            }
-            .intro {
-                margin-bottom: 1.25rem;
-            }
-            .card {
-                flex-direction: column;
-                li {
-                    margin-top: 1.25rem;
-                    width: 100%;
-                }
-            }
-            .news {
-                flex-direction: column;
-                li {
-                    width: 100%;
-                    margin-bottom: 15px;
-                    img {
-                        width: 10rem;
-                    }
-                    .texts {
-                        width: calc(100% - 10rem);
-                    }
-                }
-            }
-            .people {
-                li {
-                    flex-direction: column;
-                    margin-bottom: 1.25rem;
-                    .pic {
-                        width: 100%;
-                        height: 21.875rem;
-                    }
-                    .texts {
-                        padding-top: 1.25rem;
-                        width: 100%;
-                    }
-                }
-            }
-        }
+  }
+
+  .about {
+    .des {
+      font-size: 1rem;
     }
-    .card .pic {
-        height: 20rem;
+  }
+
+  .el-carousel__item {
+    height: 21.87rem;
+
+    img {
+      height: 21.87rem;
     }
-    .about {
-        width: 100%;
-        padding: 1.25rem 0 1.875rem;
-        .inner {
-            width: 95%;
-            margin: 0 auto;
-            .line {
-                margin: 1.25rem 0 1.25rem;
-            }
-            .des {
-                margin-top: 1.25rem;
-                padding: 10px 1.25rem;
-            }
+  }
+
+  .block {
+    padding: 3.125rem 0;
+
+    .inner {
+      width: 95%;
+      margin: 0 auto;
+
+      .b-title {
+        font-size: 2rem;
+        margin-bottom: 1.25rem;
+      }
+
+      .wow {
+        font-size: 1.5rem;
+      }
+
+      .intro {
+        margin-bottom: 1.25rem;
+      }
+
+      .card {
+        flex-direction: column;
+
+        li {
+          margin-top: 1.25rem;
+          width: 100%;
         }
-    }
-    .glance {
-        padding-bottom: 1.25rem;
-    }
-    .stat {
+      }
+
+      .news {
         flex-direction: column;
+
+        li {
+          width: 100%;
+          margin-bottom: 15px;
+
+          img {
+            width: 10rem;
+          }
+
+          .texts {
+            width: calc(100% - 10rem);
+          }
+        }
+      }
+
+      .people {
         li {
+          flex-direction: column;
+          margin-bottom: 1.25rem;
+
+          .pic {
             width: 100%;
-            text-align: center;
+            height: 21.875rem;
+          }
+
+          .texts {
+            padding-top: 1.25rem;
+            width: 100%;
+          }
         }
+      }
+    }
+  }
+
+  .card .pic {
+    height: 20rem;
+  }
+
+  .about {
+    width: 100%;
+    padding: 1.25rem 0 1.875rem;
+
+    .inner {
+      width: 95%;
+      margin: 0 auto;
+
+      .line {
+        margin: 1.25rem 0 1.25rem;
+      }
+
+      .des {
+        margin-top: 1.25rem;
+        padding: 10px 1.25rem;
+      }
+    }
+  }
+
+  .glance {
+    padding-bottom: 1.25rem;
+  }
+
+  .stat {
+    flex-direction: column;
+
+    li {
+      width: 100%;
+      text-align: center;
     }
+  }
 }
 
 @media (min-width: 751px) and (max-width: 920px) {
-    .news {
-        flex-direction: column;
-        li {
-            width: 100%;
-            margin-bottom: 0.9375rem;
-            img {
-                width: 10rem;
-            }
-            .texts {
-                width: calc(100% - 10rem);
-            }
-        }
+  .news {
+    flex-direction: column;
+
+    li {
+      width: 100%;
+      margin-bottom: 0.9375rem;
+
+      img {
+        width: 10rem;
+      }
+
+      .texts {
+        width: calc(100% - 10rem);
+      }
     }
+  }
 }
 
 @media (min-width: 320px) and (max-width: 375px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 15rem;
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    padding: 1rem 0;
+
+    .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: 0.95rem;
+        line-height: 1rem;
+      }
+
+      .card {
+        li {
+          .pic {
+            height: auto;
+          }
+
+          .texts {
+            margin-top: 1.2rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
-            }
+      }
+
+      .news {
+        li {
+          padding: 1.2rem;
+
+          img {
+            width: 8rem;
+          }
         }
-    }
-    .block {
-        padding: 1rem 0;
-        .inner {
-            .intro {
-                margin-bottom: 1rem;
-                font-size: 0.95rem;
-                line-height: 1rem;
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        margin-top: 1.2rem;
-                    }
-                }
-            }
-            .news {
-                li {
-                    padding: 1.2rem;
-                    img {
-                        width: 8rem;
-                    }
-                }
-            }
-            .people {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
+      }
+
+      .people {
+        li {
+          .pic {
+            height: auto;
+          }
         }
+      }
     }
-    .about {
-        .inner {
-            .des {
-                line-height: 1.5rem;
-            }
-        }
+  }
+
+  .about {
+    .inner {
+      .des {
+        line-height: 1.5rem;
+      }
     }
+  }
 }
+
 @media (min-width: 375px) and (max-width: 480px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 15rem;
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    padding: 1rem 0;
+
+    .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: 0.95rem;
+        line-height: 1rem;
+      }
+
+      .card {
+        li {
+          .pic {
+            height: auto;
+          }
+
+          .texts {
+            margin-top: 1.2rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
-            }
+      }
+
+      .news {
+        li {
+          padding: 1.2rem;
+
+          img {
+            width: 8rem;
+          }
         }
-    }
-    .block {
-        padding: 1rem 0;
-        .inner {
-            .intro {
-                margin-bottom: 1rem;
-                font-size: 0.95rem;
-                line-height: 1rem;
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        margin-top: 1.2rem;
-                    }
-                }
-            }
-            .news {
-                li {
-                    padding: 1.2rem;
-                    img {
-                        width: 8rem;
-                    }
-                }
-            }
-            .people {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
+      }
+
+      .people {
+        li {
+          .pic {
+            height: auto;
+          }
         }
+      }
     }
-    .about {
-        .inner {
-            .des {
-                line-height: 1.5rem;
-            }
-        }
+  }
+
+  .about {
+    .inner {
+      .des {
+        line-height: 1.5rem;
+      }
     }
+  }
 }
+
 @media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 18rem;
+  .wrap {
+    /deep/ .el-carousel {
+      height: 18rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 18rem;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 18rem;
+
+      img {
+        height: 18rem;
+      }
+    }
+  }
+
+  .block {
+    padding: 1rem 0;
+
+    .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: 0.95rem;
+        line-height: 1rem;
+      }
+
+      .card {
+        li {
+          .pic {
+            height: auto;
+          }
+
+          .texts {
+            margin-top: 1.2rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 18rem;
+      }
+
+      .news {
+        li {
+          padding: 1.2rem;
+
+          img {
+            width: 8rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 18rem;
-            img {
-                height: 18rem;
-            }
+      }
+
+      .people {
+        li {
+          .pic {
+            height: auto;
+          }
         }
-    }
-    .block {
-        padding: 1rem 0;
-        .inner {
-            .intro {
-                margin-bottom: 1rem;
-                font-size: 0.95rem;
-                line-height: 1rem;
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        margin-top: 1.2rem;
-                    }
-                }
-            }
-            .news {
-                li {
-                    padding: 1.2rem;
-                    img {
-                        width: 8rem;
-                    }
-                }
-            }
-            .people {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .about {
-                .des {
-                    line-height: 1.5rem;
-                }
-            }
+      }
+
+      .about {
+        .des {
+          line-height: 1.5rem;
         }
+      }
     }
+  }
 }
+
 @media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 20rem;
+  .wrap {
+    /deep/ .el-carousel {
+      height: 20rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 20rem;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 20rem;
+
+      img {
+        height: 20rem;
+      }
+    }
+  }
+
+  .block {
+    padding: 1rem 0;
+
+    .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: 0.95rem;
+        line-height: 1rem;
+      }
+
+      .card {
+        li {
+          .pic {
+            height: auto;
+          }
+
+          .texts {
+            margin-top: 1.2rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 20rem;
+      }
+
+      .news {
+        li {
+          padding: 1.2rem;
+
+          img {
+            width: 8rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 20rem;
-            img {
-                height: 20rem;
-            }
+      }
+
+      .people {
+        li {
+          .pic {
+            height: auto;
+          }
         }
-    }
-    .block {
-        padding: 1rem 0;
-        .inner {
-            .intro {
-                margin-bottom: 1rem;
-                font-size: 0.95rem;
-                line-height: 1rem;
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        margin-top: 1.2rem;
-                    }
-                }
-            }
-            .news {
-                li {
-                    padding: 1.2rem;
-                    img {
-                        width: 8rem;
-                    }
-                }
-            }
-            .people {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .about {
-                .des {
-                    line-height: 1.2rem;
-                }
-            }
-            .stat {
-                flex-direction: row;
-                li {
-                    width: 30%;
-                }
-            }
+      }
+
+      .about {
+        .des {
+          line-height: 1.2rem;
         }
+      }
+
+      .stat {
+        flex-direction: row;
+
+        li {
+          width: 30%;
+        }
+      }
     }
+  }
 }
+
 @media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 22rem;
+  .wrap {
+    /deep/ .el-carousel {
+      height: 22rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 22rem;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 22rem;
+
+      img {
+        height: 22rem;
+      }
+    }
+  }
+
+  .block {
+    padding: 1rem 0;
+
+    .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: 0.95rem;
+        line-height: 1rem;
+      }
+
+      .card {
+        flex-direction: row;
+
+        li {
+          width: 47%;
+
+          .pic {
+            height: auto;
+          }
+
+          .texts {
+            margin-top: 1.2rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 22rem;
+      }
+
+      .news {
+        li {
+          padding: 1.2rem;
+
+          img {
+            width: 8rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 22rem;
-            img {
-                height: 22rem;
-            }
+      }
+
+      .people {
+        li {
+          flex-direction: row;
+
+          &:nth-child(2) {
+            flex-direction: row-reverse !important;
+          }
+
+          .pic {
+            width: 47%;
+            height: auto;
+          }
+
+          .texts {
+            width: 48%;
+          }
         }
-    }
-    .block {
-        padding: 1rem 0;
-        .inner {
-            .intro {
-                margin-bottom: 1rem;
-                font-size: 0.95rem;
-                line-height: 1rem;
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 47%;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        margin-top: 1.2rem;
-                    }
-                }
-            }
-            .news {
-                li {
-                    padding: 1.2rem;
-                    img {
-                        width: 8rem;
-                    }
-                }
-            }
-            .people {
-                li {
-                    flex-direction: row;
-                    &:nth-child(2) {
-                        flex-direction: row-reverse !important;
-                    }
-                    .pic {
-                        width: 47%;
-                        height: auto;
-                    }
-                    .texts {
-                        width: 48%;
-                    }
-                }
-            }
-            .about {
-                .des {
-                    line-height: 1.2rem;
-                }
-            }
-            .stat {
-                flex-direction: row;
-                li {
-                    width: 30%;
-                }
-            }
+      }
+
+      .about {
+        .des {
+          line-height: 1.2rem;
+        }
+      }
+
+      .stat {
+        flex-direction: row;
+
+        li {
+          width: 30%;
         }
+      }
     }
+  }
 }
+
 @media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 25rem;
+  .wrap {
+    /deep/ .el-carousel {
+      height: 25rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 25rem;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 25rem;
+
+      img {
+        height: 25rem;
+      }
+    }
+  }
+
+  .block {
+    padding: 1rem 0;
+
+    .inner {
+      .intro {
+        margin-bottom: 1rem;
+        font-size: 0.95rem;
+        line-height: 1rem;
+      }
+
+      .card {
+        flex-direction: row;
+
+        li {
+          width: 47%;
+
+          .pic {
+            height: auto;
+          }
+
+          .texts {
+            margin-top: 1.2rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 25rem;
+      }
+
+      .news {
+        li {
+          padding: 1.2rem;
+
+          img {
+            width: 8rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 25rem;
-            img {
-                height: 25rem;
-            }
+      }
+
+      .people {
+        li {
+          flex-direction: row;
+
+          &:nth-child(2) {
+            flex-direction: row-reverse !important;
+          }
+
+          .pic {
+            width: 47%;
+            height: auto;
+          }
+
+          .texts {
+            width: 48%;
+          }
         }
-    }
-    .block {
-        padding: 1rem 0;
-        .inner {
-            .intro {
-                margin-bottom: 1rem;
-                font-size: 0.95rem;
-                line-height: 1rem;
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 47%;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        margin-top: 1.2rem;
-                    }
-                }
-            }
-            .news {
-                li {
-                    padding: 1.2rem;
-                    img {
-                        width: 8rem;
-                    }
-                }
-            }
-            .people {
-                li {
-                    flex-direction: row;
-                    &:nth-child(2) {
-                        flex-direction: row-reverse !important;
-                    }
-                    .pic {
-                        width: 47%;
-                        height: auto;
-                    }
-                    .texts {
-                        width: 48%;
-                    }
-                }
-            }
-            .about {
-                .des {
-                }
-            }
-            .stat {
-                flex-direction: row;
-                li {
-                    width: 30%;
-                }
-            }
+      }
+
+      .stat {
+        flex-direction: row;
+
+        li {
+          width: 30%;
         }
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index 5e6ae2f..eff997a 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -1,21 +1,14 @@
 <template>
   <div class="wrap">
-    <el-carousel class="carousel fadeInUp"
-                 :interval="6000"
-                 height="354px"
-                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
-                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel class="carousel fadeInUp" :interval="6000" height="354px"
+      :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+      :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable"
-                          :key="i">
-          <div class="pic"
-               :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <div class="pic" :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
           <div class="text-wrap">
-            <div v-if="!GTA && !i"
-                 class="qrcode-wrap">
-              <img class="qrcode"
-                   src="https://www.occupationlab.com/images/mini-program.jpg"
-                   alt="">
+            <div v-if="!GTA && !i" class="qrcode-wrap">
+              <img class="qrcode" src="https://www.occupationlab.com/images/mini-program.jpg" alt="">
               <p class="text">扫小程序下单</p>
             </div>
             <div class="texts">
@@ -30,12 +23,9 @@
     <div class="inner">
       <ul class="intro">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable"
-              :key="i"
-              :class="[{'cursor-pointer': isLink(item.link.linkName)}, 'fadeInDown' + i]"
-              @click="openLink(item)">
-            <img :src="item.pic"
-                 alt="">
+          <li v-if="item.isEnable" :key="i" :class="[{ 'cursor-pointer': isLink(item.link.linkName) }, 'fadeInDown' + i]"
+            @click="openLink(item)">
+            <img :src="item.pic" alt="">
             <div class="text">
               <h6>{{ item.title }}</h6>
               <p class="desc">{{ item.des }}</p>
@@ -50,28 +40,19 @@
         <div class="type-wrap">
           <div class="tab-wrap">
             <div>
-              <img src="@/assets/images/hot.png"
-                   alt="">
-              <img class="m-l-5 m-r-10"
-                   src="@/assets/images/type.png"
-                   alt="">
+              <img src="@/assets/images/hot.png" alt="">
+              <img class="m-l-5 m-r-10" src="@/assets/images/type.png" alt="">
             </div>
             <div class="tab-con">
               <ul class="tab">
-                <li v-for="(tab, i) in tabs"
-                    :key="i"
-                    :class="{active: curTab === tab.id}"
-                    @click="tabChange(tab)">{{ tab.name }}</li>
+                <li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{
+                  tab.name }}</li>
               </ul>
             </div>
           </div>
           <div class="search">
-            <img class="icon"
-                 src="@/assets/images/search.png"
-                 alt="">
-            <input type="text"
-                   placeholder="请输入产品名称"
-                   v-model="form.productName">
+            <img class="icon" src="@/assets/images/search.png" alt="">
+            <input type="text" placeholder="请输入产品名称" v-model="form.productName">
           </div>
         </div>
         <div class="filter">
@@ -79,100 +60,77 @@
             <dl>
               <dt>学科类别</dt>
               <div class="vals">
-                <dd :class="{active: categoryId === ''}"
-                    @click="categoryClick({id: ''}, 1)">全部</dd>
-                <dd :class="{active: categoryId === 1}"
-                    style="margin-right: 20px"
-                    @click="categoryClick({id: 1}, 1)">不限</dd>
-                <dd v-for="(item, i) in category"
-                    :key="i"
-                    :class="{active: categoryId === item.id}"
-                    @click="categoryClick(item, 1)">{{ item.name }}</dd>
+                <dd :class="{ active: categoryId === '' }" @click="categoryClick({ id: '' }, 1)">全部</dd>
+                <dd :class="{ active: categoryId === 1 }" style="margin-right: 20px" @click="categoryClick({ id: 1 }, 1)">不限
+                </dd>
+                <dd v-for="(item, i) in category" :key="i" :class="{ active: categoryId === item.id }"
+                  @click="categoryClick(item, 1)">{{ item.name }}</dd>
               </div>
             </dl>
             <dl v-if="categoryId && categoryId !== 1">
               <dt>专业类</dt>
               <div class="vals">
-                <dd :class="{active: professionalCategoryId === ''}"
-                    @click="categoryClick({id: ''}, 2)">全部</dd>
-                <dd v-for="(item, i) in professionalClasses"
-                    :key="i"
-                    :class="{active: professionalCategoryId === item.id}"
-                    @click="categoryClick(item, 2)">{{ item.name }}</dd>
+                <dd :class="{ active: professionalCategoryId === '' }" @click="categoryClick({ id: '' }, 2)">全部</dd>
+                <dd v-for="(item, i) in professionalClasses" :key="i"
+                  :class="{ active: professionalCategoryId === item.id }" @click="categoryClick(item, 2)">{{ item.name }}
+                </dd>
               </div>
             </dl>
             <dl v-if="professionalCategoryId && professionalCategoryId !== 1">
               <dt>专业</dt>
               <div class="vals">
-                <dd :class="{active: professionalId === ''}"
-                    @click="categoryClick({id: ''}, 3)">全部</dd>
-                <dd v-for="(item, i) in professionals"
-                    :key="i"
-                    :class="{active: professionalId === item.id}"
-                    @click="categoryClick(item, 3)">{{ item.name }}</dd>
+                <dd :class="{ active: professionalId === '' }" @click="categoryClick({ id: '' }, 3)">全部</dd>
+                <dd v-for="(item, i) in professionals" :key="i" :class="{ active: professionalId === item.id }"
+                  @click="categoryClick(item, 3)">{{ item.name }}</dd>
               </div>
             </dl>
           </template>
           <dl v-if="curTab == 3">
             <dt>产品标签</dt>
             <div class="vals">
-              <dd :class="{active: form.tagId === ''}"
-                  @click="filterChange('', 'tagId')">全部</dd>
-              <dd v-for="(item, i) in labels"
-                  :key="i"
-                  :class="{active: form.tagId === item.tagsId}"
-                  @click="filterChange(item.tagsId, 'tagId')">{{ item.tagsName }}</dd>
+              <dd :class="{ active: form.tagId === '' }" @click="filterChange('', 'tagId')">全部</dd>
+              <dd v-for="(item, i) in labels" :key="i" :class="{ active: form.tagId === item.tagsId }"
+                @click="filterChange(item.tagsId, 'tagId')">{{ item.tagsName }}</dd>
             </div>
           </dl>
           <template v-if="curTab == 4">
             <dl>
               <dt>方案分类</dt>
               <div class="vals">
-                <dd :class="{active: form.productClassification === ''}"
-                    @click="filterChange('', 'productClassification')">全部</dd>
-                <dd v-for="(item, i) in classifications"
-                    :key="i"
-                    :class="{active: form.productClassification === item.id}"
-                    @click="filterChange(item.id, 'productClassification')">{{ item.classificationName }}</dd>
+                <dd :class="{ active: form.productClassification === '' }"
+                  @click="filterChange('', 'productClassification')">全部</dd>
+                <dd v-for="(item, i) in classifications" :key="i"
+                  :class="{ active: form.productClassification === item.id }"
+                  @click="filterChange(item.id, 'productClassification')">{{ item.classificationName }}</dd>
               </div>
             </dl>
             <dl>
               <dt>方案名称</dt>
               <div class="vals">
-                <dd :class="{active: form.websiteMallId === ''}"
-                    @click="filterChange('', 'websiteMallId')">全部</dd>
-                <dd v-for="(item, i) in schemes"
-                    :key="i"
-                    :class="{active: form.websiteMallId === item.id}"
-                    @click="filterChange(item.id, 'websiteMallId')">{{ item.title }}</dd>
+                <dd :class="{ active: form.websiteMallId === '' }" @click="filterChange('', 'websiteMallId')">全部</dd>
+                <dd v-for="(item, i) in schemes" :key="i" :class="{ active: form.websiteMallId === item.id }"
+                  @click="filterChange(item.id, 'websiteMallId')">{{ item.title }}</dd>
               </div>
             </dl>
           </template>
           <dl>
             <dt>产品类型</dt>
             <div class="vals">
-              <dd :class="{active: form.productType === ''}"
-                  @click="filterChange('', 'productType')">全部</dd>
-              <dd v-for="(item, i) in types"
-                  :key="i"
-                  :class="{active: form.productType === item.typeId}"
-                  @click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd>
+              <dd :class="{ active: form.productType === '' }" @click="filterChange('', 'productType')">全部</dd>
+              <dd v-for="(item, i) in types" :key="i" :class="{ active: form.productType === item.typeId }"
+                @click="filterChange(item.typeId, 'productType')">{{ item.typeName }}</dd>
             </div>
           </dl>
         </div>
 
         <div class="filter m-t-20">
           <dl>
-            <dd v-for="(item, i) in sorts"
-                :key="i"
-                :class="{active: form.sort === item.id}"
-                @click="filterChange(item.id, 'sort')">{{ item.name }}</dd>
-            <dd :class="{active: form.sort === 2 || form.sort === 5}"
-                @click="sort">发布时间</dd>
-            <span class="caret"
-                  @click="sort">
-              <i :class="['asc', {active: form.sort === 2}]"></i>
-              <i :class="['desc', {active: form.sort === 5}]"></i>
+            <dd v-for="(item, i) in sorts" :key="i" :class="{ active: form.sort === item.id }"
+              @click="filterChange(item.id, 'sort')">{{ item.name }}</dd>
+            <dd :class="{ active: form.sort === 2 || form.sort === 5 }" @click="sort">发布时间</dd>
+            <span class="caret" @click="sort">
+              <i :class="['asc', { active: form.sort === 2 }]"></i>
+              <i :class="['desc', { active: form.sort === 5 }]"></i>
             </span>
           </dl>
         </div>
@@ -180,61 +138,37 @@
         <div class="courses">
           <template v-if="list.length">
             <ul>
-              <li v-for="(item, i) in list"
-                  :key="i"
-                  @click="toDetail(item.mallId)">
-                <img :src="item.coverDrawing"
-                     alt="" />
-                <img v-if="item.logoOfOurSchool"
-                     class="my-school"
-                     src="@/assets/images/my-school.png"
-                     alt="">
+              <li v-for="(item, i) in list" :key="i" @click="toDetail(item.mallId)">
+                <img :src="item.coverDrawing" alt="" />
+                <img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/images/my-school.png" alt="">
                 <div class="texts">
-                  <el-tooltip effect="dark"
-                              :visible-arrow="false"
-                              :content="item.productName"
-                              placement="bottom">
+                  <el-tooltip effect="dark" :visible-arrow="false" :content="item.productName" placement="bottom">
                     <div class="title">{{ item.productName }}</div>
                   </el-tooltip>
-                  <div class="desc"
-                       v-html="item.productIntroduction"></div>
+                  <div class="desc" v-html="item.productIntroduction"></div>
                   <div class="tags">
-                    <el-tooltip v-if="item.tagsName"
-                                class="item"
-                                effect="dark"
-                                :visible-arrow="false"
-                                :content="item.tagsName"
-                                placement="bottom">
+                    <el-tooltip v-if="item.tagsName" class="item" effect="dark" :visible-arrow="false"
+                      :content="item.tagsName" placement="bottom">
                       <div>
-                        <el-tag v-for="(tag, i) in item.tagsName.split(',')"
-                                :key="i"
-                                class="tag">{{ tag }}</el-tag>
+                        <el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
                       </div>
                     </el-tooltip>
                   </div>
                   <div :class="['metas']">
-                    <el-tag v-if="item.selected"
-                            type="danger"
-                            effect="dark">
+                    <el-tag v-if="item.selected" type="danger" effect="dark">
                       官方精选
                     </el-tag>
-                    <el-tag v-if="item.typeName"
-                            effect="dark">
+                    <el-tag v-if="item.typeName" effect="dark">
                       {{ item.typeName }}
                     </el-tag>
-                    <div v-if="item.isCourse"
-                         class="meta">{{ item.learningCount }}人学过</div>
+                    <div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div>
                   </div>
                 </div>
               </li>
             </ul>
             <div class="pagination">
-              <el-pagination background
-                             layout="total, prev, pager, next"
-                             :page-size="pageSize"
-                             :total="total"
-                             @current-change="handleCurrentChange"
-                             :current-page="page"></el-pagination>
+              <el-pagination background layout="total, prev, pager, next" :page-size="pageSize" :total="total"
+                @current-change="handleCurrentChange" :current-page="page"></el-pagination>
             </div>
           </template>
         </div>
@@ -243,8 +177,7 @@
 
     <div class="copyright">
       <!-- <span>© Copyright 2021 Occupation Lab 职站</span> -->
-      <a href="https://beian.miit.gov.cn/#/Integrated/index"
-         target="_blank">粤ICP备20072679号</a>
+      <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20072679号</a>
     </div>
   </div>
 </template>
@@ -583,498 +516,589 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    .carousel {
-        .pic {
-            height: 100%;
-            background-repeat: no-repeat;
-            background-size: cover;
-        }
-        img {
-            height: 100%;
-        }
-        /deep/.el-carousel__container {
-            height: 100%;
-        }
-        .text-wrap {
-            position: absolute;
-            top: 55%;
-            left: 12%;
-            display: flex;
-            align-items: center;
-            color: #fff;
-            transform: translateY(-50%);
-        }
-        h6 {
-            margin-bottom: 25px;
-            font-size: 2.2rem;
-        }
-        .sub {
-            font-size: 1.5rem;
-        }
-        .qrcode-wrap {
-            display: inline-block;
-            padding: 5px;
-            margin-right: 50px;
-            text-align: center;
-            background-color: #fff;
-            border-radius: 12px;
-            .text {
-                margin-top: 5px;
-                font-size: 12px;
-                color: #979797;
-            }
-        }
-        .qrcode {
-            width: 120px;
-            height: 120px;
-        }
+  .carousel {
+    .pic {
+      height: 100%;
+      background-repeat: no-repeat;
+      background-size: cover;
     }
 
-    .intro {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 20px 0;
-        background-color: #fff;
-        li {
-            display: inline-flex;
-            align-items: center;
-            transition: 0.3s;
-            &.active {
-                h6,
-                .desc {
-                    color: #006eff;
-                }
-            }
-            &:hover {
-                margin-top: -15px;
-                h6,
-                .desc {
-                    color: #006eff;
-                }
-            }
-        }
-        img {
-            width: 50px;
-            margin-right: 15px;
-        }
-        h6 {
-            margin-bottom: 5px;
-            font-size: 16px;
-            color: #0b1d30;
-            transition: 0.5s;
+    img {
+      height: 100%;
+    }
+
+    /deep/.el-carousel__container {
+      height: 100%;
+    }
+
+    .text-wrap {
+      position: absolute;
+      top: 55%;
+      left: 12%;
+      display: flex;
+      align-items: center;
+      color: #fff;
+      transform: translateY(-50%);
+    }
+
+    h6 {
+      margin-bottom: 25px;
+      font-size: 2.2rem;
+    }
+
+    .sub {
+      font-size: 1.5rem;
+    }
+
+    .qrcode-wrap {
+      display: inline-block;
+      padding: 5px;
+      margin-right: 50px;
+      text-align: center;
+      background-color: #fff;
+      border-radius: 12px;
+
+      .text {
+        margin-top: 5px;
+        font-size: 12px;
+        color: #979797;
+      }
+    }
+
+    .qrcode {
+      width: 120px;
+      height: 120px;
+    }
+  }
+
+  .intro {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 20px 0;
+    background-color: #fff;
+
+    li {
+      display: inline-flex;
+      align-items: center;
+      transition: 0.3s;
+
+      &.active {
+
+        h6,
+        .desc {
+          color: #006eff;
         }
+      }
+
+      &:hover {
+        margin-top: -15px;
+
+        h6,
         .desc {
-            font-size: 13px;
-            color: #757f92;
-            transition: 0.5s;
+          color: #006eff;
         }
+      }
     }
-    .inner-wrap {
-        padding: 18px 0;
-        background: url(../../../assets/images/product/bg1.png) 0 159px no-repeat,
-            url(../../../assets/images/product/bg2.png) bottom right no-repeat;
-        background-color: #f3f6fa;
+
+    img {
+      width: 50px;
+      margin-right: 15px;
     }
-    .inner {
-        width: 1146px;
-        margin: 0 auto;
+
+    h6 {
+      margin-bottom: 5px;
+      font-size: 16px;
+      color: #0b1d30;
+      transition: 0.5s;
     }
-    .type-wrap {
-        display: flex;
-        justify-content: space-between;
-        margin-bottom: 18px;
-        .left {
-            display: inline-flex;
-        }
-        .tab-wrap {
-            display: inline-flex;
-            align-items: center;
+
+    .desc {
+      font-size: 13px;
+      color: #757f92;
+      transition: 0.5s;
+    }
+  }
+
+  .inner-wrap {
+    padding: 18px 0;
+    background: url(../../../assets/images/product/bg1.png) 0 159px no-repeat,
+      url(../../../assets/images/product/bg2.png) bottom right no-repeat;
+    background-color: #f3f6fa;
+  }
+
+  .inner {
+    width: 1146px;
+    margin: 0 auto;
+  }
+
+  .type-wrap {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 18px;
+
+    .left {
+      display: inline-flex;
+    }
+
+    .tab-wrap {
+      display: inline-flex;
+      align-items: center;
+    }
+
+    .tab {
+      display: inline-flex;
+
+      li {
+        position: relative;
+        margin: 0 20px;
+        font-size: 18px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 600;
+        line-height: 25px;
+        color: #0b1d30;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &:after {
+          content: '';
+          position: absolute;
+          bottom: -10px;
+          left: 50%;
+          width: 53px;
+          height: 4px;
+          transform: translateX(-50%);
+          border-radius: 2px;
         }
-        .tab {
-            display: inline-flex;
-            li {
-                position: relative;
-                margin: 0 20px;
-                font-size: 18px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 600;
-                line-height: 25px;
-                color: #0b1d30;
-                white-space: nowrap;
-                cursor: pointer;
-                &:after {
-                    content: '';
-                    position: absolute;
-                    bottom: -10px;
-                    left: 50%;
-                    width: 53px;
-                    height: 4px;
-                    transform: translateX(-50%);
-                    border-radius: 2px;
-                }
-                &.active:after {
-                    background-color: #1583ff;
-                }
-            }
+
+        &.active:after {
+          background-color: #1583ff;
         }
+      }
     }
-    .search {
-        position: relative;
-        display: flex;
+  }
+
+  .search {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 410px;
+    height: 48px;
+    padding: 0 18px;
+    background-color: #fff;
+    border-radius: 31px;
+
+    input {
+      height: 40px;
+      margin-left: 7px;
+      font-size: 14px;
+      color: #333;
+      border: 0;
+      outline: none !important;
+    }
+  }
+
+  .filter {
+    padding: 5px 30px;
+    background-color: #fff;
+    border-radius: 10px;
+
+    dl {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      margin: 20px 0;
+
+      dt {
+        min-width: 60px;
+        padding: 5px 0;
+        margin-right: 30px;
+        color: #666;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+
+      dd {
+        padding: 5px 15px;
+        color: #333;
+        font-size: 14px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        white-space: nowrap;
+        cursor: pointer;
+
+        &.active {
+          font-weight: 600;
+          color: #1583ff;
+        }
+      }
+
+      .category {
+        margin: 5px 10px 0;
+      }
+
+      /deep/.category-item {
+        display: inline-flex;
         align-items: center;
-        width: 410px;
-        height: 48px;
-        padding: 0 18px;
-        background-color: #fff;
-        border-radius: 31px;
-        input {
-            height: 40px;
-            margin-left: 7px;
+        margin-right: 20px;
+
+        .name {
+          position: relative;
+          font-size: 14px;
+          color: #333;
+          cursor: pointer;
+
+          &+.el-cascader {
+            width: 30px;
+          }
+        }
+
+        &.active {
+          .name {
+            color: #1583ff;
+          }
+        }
+      }
+
+      /deep/.el-cascader {
+        width: auto;
+
+        .el-input {
+          .el-input__inner {
             font-size: 14px;
             color: #333;
             border: 0;
-            outline: none !important;
+          }
         }
-    }
-    .filter {
-        padding: 5px 30px;
-        background-color: #fff;
-        border-radius: 10px;
-        dl {
-            position: relative;
-            display: flex;
-            flex-wrap: wrap;
-            margin: 20px 0;
-            dt {
-                min-width: 60px;
-                padding: 5px 0;
-                margin-right: 30px;
-                color: #666;
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 600;
-                white-space: nowrap;
-            }
-            dd {
-                padding: 5px 15px;
-                color: #333;
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                white-space: nowrap;
-                cursor: pointer;
-                &.active {
-                    font-weight: 600;
-                    color: #1583ff;
-                }
-            }
-            .category {
-                margin: 5px 10px 0;
-            }
-            /deep/.category-item {
-                display: inline-flex;
-                align-items: center;
-                margin-right: 20px;
-                .name {
-                    position: relative;
-                    font-size: 14px;
-                    color: #333;
-                    cursor: pointer;
-                    & + .el-cascader {
-                        width: 30px;
-                    }
-                }
-                &.active {
-                    .name {
-                        color: #1583ff;
-                    }
-                }
-            }
-            /deep/.el-cascader {
-                width: auto;
-                .el-input {
-                    .el-input__inner {
-                        font-size: 14px;
-                        color: #333;
-                        border: 0;
-                    }
-                }
-                &.active {
-                    .el-input .el-input__inner {
-                        color: #1583ff;
-                    }
-                }
-            }
+
+        &.active {
+          .el-input .el-input__inner {
+            color: #1583ff;
+          }
         }
-        .vals {
-            display: inline-flex;
-            flex-wrap: wrap;
-            align-items: center;
-            width: 920px;
+      }
+    }
+
+    .vals {
+      display: inline-flex;
+      flex-wrap: wrap;
+      align-items: center;
+      width: 920px;
+    }
+
+    .caret {
+      position: absolute;
+      top: 4px;
+      left: 250px;
+      width: 20px;
+      height: 20px;
+      cursor: pointer;
+
+      i {
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 5px solid transparent;
+      }
+
+      .asc {
+        top: 0;
+        border-bottom-color: #c0c4cc;
+
+        &.active {
+          border-bottom-color: #409eff;
         }
-        .caret {
-            position: absolute;
-            top: 4px;
-            left: 250px;
-            width: 20px;
-            height: 20px;
-            cursor: pointer;
-            i {
-                position: absolute;
-                width: 0;
-                height: 0;
-                border: 5px solid transparent;
-            }
-            .asc {
-                top: 0;
-                border-bottom-color: #c0c4cc;
-                &.active {
-                    border-bottom-color: #409eff;
-                }
-            }
-            .desc {
-                top: 12px;
-                border-top-color: #c0c4cc;
-                &.active {
-                    border-top-color: #409eff;
-                }
-            }
+      }
+
+      .desc {
+        top: 12px;
+        border-top-color: #c0c4cc;
+
+        &.active {
+          border-top-color: #409eff;
         }
+      }
     }
-    .courses {
-        position: relative;
-        margin-top: 24px;
-        ul {
-            position: relative;
-            display: flex;
-            flex-wrap: wrap;
+  }
+
+  .courses {
+    position: relative;
+    margin-top: 24px;
+
+    ul {
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+    }
+
+    li {
+      position: relative;
+      width: calc((100% - 66px) / 4);
+      min-height: 250px;
+      margin: 0 22px 22px 0;
+      cursor: pointer;
+      border-radius: 10px;
+      background-color: #fff;
+      transition: all 0.3s;
+      overflow: hidden;
+
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+
+      img {
+        width: 100%;
+        height: 155px;
+        transition: 0.3s;
+        object-fit: cover;
+      }
+
+      .my-school {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 57px;
+        height: 22px;
+      }
+
+      .texts {
+        padding: 10px;
+      }
+
+      .title {
+        margin-bottom: 10px;
+        color: #0b1d30;
+        font-size: 14px;
+        font-weight: 600;
+        word-wrap: break-word;
+        word-break: break-all;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .desc {
+        min-height: 34px;
+        color: #757f92;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+      }
+
+      .tags {
+        height: 24px;
+        margin-top: 10px;
+        overflow: hidden;
+      }
+
+      .tag {
+        margin-right: 8px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        color: #1583ff;
+        background-color: #f9f9f9;
+        border: 0;
+      }
+
+      .type {
+        display: inline-block;
+        padding: 4px 11px;
+        font-size: 12px;
+        color: #666;
+        border: 1px solid #dadada;
+        border-radius: 20px;
+      }
+
+      .metas {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+
+        &.not-selected {
+          justify-content: flex-end;
         }
-        li {
-            position: relative;
-            width: calc((100% - 66px) / 4);
-            min-height: 250px;
-            margin: 0 22px 22px 0;
-            cursor: pointer;
-            border-radius: 10px;
-            background-color: #fff;
-            transition: all 0.3s;
-            overflow: hidden;
-            &:nth-child(4n) {
-                margin-right: 0;
-            }
-            img {
-                width: 100%;
-                height: 155px;
-                transition: 0.3s;
-                object-fit: cover;
-            }
-            .my-school {
-                position: absolute;
-                top: 0;
-                right: 0;
-                width: 57px;
-                height: 22px;
-            }
-            .texts {
-                padding: 10px;
-            }
-            .title {
-                margin-bottom: 10px;
-                color: #0b1d30;
-                font-size: 14px;
-                font-weight: 600;
-                word-wrap: break-word;
-                word-break: break-all;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .desc {
-                min-height: 34px;
-                color: #757f92;
-                font-size: 12px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-            }
-            .tags {
-                height: 24px;
-                margin-top: 10px;
-                overflow: hidden;
-            }
-            .tag {
-                margin-right: 8px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                color: #1583ff;
-                background-color: #f9f9f9;
-                border: 0;
-            }
-            .type {
-                display: inline-block;
-                padding: 4px 11px;
-                font-size: 12px;
-                color: #666;
-                border: 1px solid #dadada;
-                border-radius: 20px;
-            }
-            .metas {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-top: 10px;
-                &.not-selected {
-                    justify-content: flex-end;
-                }
-            }
-            .meta {
-                display: inline-flex;
-                align-items: center;
-                color: #b5bfd5;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-size: 12px;
-                .icon {
-                    width: 14px;
-                    max-height: 14px;
-                    margin-right: 3px;
-                }
-            }
-            &:hover {
-                box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12),
-                    0px 1px 2px -2px rgba(142, 123, 253, 0.16);
-                img {
-                    transform: scale(1.05);
-                }
-            }
+      }
+
+      .meta {
+        display: inline-flex;
+        align-items: center;
+        color: #b5bfd5;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-size: 12px;
+
+        .icon {
+          width: 14px;
+          max-height: 14px;
+          margin-right: 3px;
         }
+      }
+
+      &:hover {
+        box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12),
+          0px 1px 2px -2px rgba(142, 123, 253, 0.16);
+
+        img {
+          transform: scale(1.05);
+        }
+      }
     }
+  }
 }
 
 .copyright {
-    padding: 10px 0;
+  padding: 10px 0;
+  font-size: 12px;
+  text-align: center;
+  line-height: 17px;
+  background-color: #0f1d2e;
+
+  span {
+    margin-right: 20px;
+    color: #757f8a;
+  }
+
+  a {
+    color: #757f8a;
     font-size: 12px;
-    text-align: center;
-    line-height: 17px;
-    background-color: #0f1d2e;
-    span {
-        margin-right: 20px;
-        color: #757f8a;
-    }
-    a {
-        color: #757f8a;
-        font-size: 12px;
-        &:hover {
-            color: #c7c7c7;
-        }
+
+    &:hover {
+      color: #c7c7c7;
     }
+  }
 }
+
 @media (max-width: 1200px) {
-    .wrap {
-        .carousel {
-            .qrcode-wrap {
-                margin-right: 20px;
-            }
-        }
-        .inner {
-            width: 90%;
-        }
-        .type-wrap {
-            flex-direction: column;
-        }
-        .search {
-            margin-top: 20px;
-        }
-        .filter {
-            .vals {
-                width: calc(100% - 100px);
-            }
-        }
+  .wrap {
+    .carousel {
+      .qrcode-wrap {
+        margin-right: 20px;
+      }
+    }
+
+    .inner {
+      width: 90%;
+    }
+
+    .type-wrap {
+      flex-direction: column;
+    }
+
+    .search {
+      margin-top: 20px;
+    }
+
+    .filter {
+      .vals {
+        width: calc(100% - 100px);
+      }
     }
+  }
 }
+
 @media (max-width: 1000px) {
-    .wrap {
-        .carousel {
-            .text-wrap {
-                top: 49%;
-            }
-            h6 {
-                font-size: 1.8rem;
-            }
-            .sub {
-                font-size: 1.3rem;
-            }
-        }
-        .intro {
-            flex-direction: column;
-            justify-content: center;
-            align-items: flex-start;
-            li {
-                flex: 1;
-                margin-bottom: 20px;
-            }
-        }
-        .type-wrap {
-            .tab-wrap {
-                flex-direction: column;
-                align-items: flex-start;
-            }
-            .tab {
-                margin-top: 10px;
-            }
-        }
-        .courses {
-            li {
-                width: calc((100% - 22px) / 2);
-                &:nth-child(2n) {
-                    margin-right: 0;
-                }
-            }
+  .wrap {
+    .carousel {
+      .text-wrap {
+        top: 49%;
+      }
+
+      h6 {
+        font-size: 1.8rem;
+      }
+
+      .sub {
+        font-size: 1.3rem;
+      }
+    }
+
+    .intro {
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+
+      li {
+        flex: 1;
+        margin-bottom: 20px;
+      }
+    }
+
+    .type-wrap {
+      .tab-wrap {
+        flex-direction: column;
+        align-items: flex-start;
+      }
+
+      .tab {
+        margin-top: 10px;
+      }
+    }
+
+    .courses {
+      li {
+        width: calc((100% - 22px) / 2);
+
+        &:nth-child(2n) {
+          margin-right: 0;
         }
+      }
     }
+  }
 }
+
 @media (max-width: 640px) {
-    .wrap {
-        /deep/.carousel {
-            .el-carousel__container {
-                height: 240px !important;
-            }
-            .text-wrap {
-                left: 20px;
-            }
-            .qrcode {
-                width: 80px;
-                height: 80px;
-            }
-            h6 {
-                font-size: 1.4rem;
-            }
-            .sub {
-                font-size: 1rem;
-            }
-        }
-        .type-wrap {
-            .tab-con {
-                max-width: 100%;
-                margin-bottom: 10px;
-                overflow: auto;
-            }
-            .tab {
-                li {
-                    margin-bottom: 20px;
-                }
-            }
-        }
-        .search {
-            width: 100%;
-            margin-top: 0;
-        }
-        .courses {
-            li {
-                width: 100%;
-                margin-right: 0;
-            }
+  .wrap {
+    /deep/.carousel {
+      .el-carousel__container {
+        height: 240px !important;
+      }
+
+      .text-wrap {
+        left: 20px;
+      }
+
+      .qrcode {
+        width: 80px;
+        height: 80px;
+      }
+
+      h6 {
+        font-size: 1.4rem;
+      }
+
+      .sub {
+        font-size: 1rem;
+      }
+    }
+
+    .type-wrap {
+      .tab-con {
+        max-width: 100%;
+        margin-bottom: 10px;
+        overflow: auto;
+      }
+
+      .tab {
+        li {
+          margin-bottom: 20px;
         }
+      }
     }
+
+    .search {
+      width: 100%;
+      margin-top: 0;
+    }
+
+    .courses {
+      li {
+        width: 100%;
+        margin-right: 0;
+      }
+    }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/index/show/index.vue b/src/pages/index/show/index.vue
index dcd23ad..259e57b 100644
--- a/src/pages/index/show/index.vue
+++ b/src/pages/index/show/index.vue
@@ -1,126 +1,78 @@
 <template>
   <div class="wrap">
     <div class="inner">
-      <Breadcrumb ref="breadcrumb"
-                  :data.sync="routes" />
+      <Breadcrumb ref="breadcrumb" :data.sync="routes" />
       <div class="top">
-        <el-carousel class="pics fadeInLeft"
-                     :interval="6000"
-                     height="278px"
-                     :arrow="form.pics.length > 1 ? 'hover' : 'never'"
-                     :indicator-position="form.pics.length > 1 ? '' : 'none'">
-          <el-carousel-item v-for="(item, i) in form.pics"
-                            :key="i">
-            <el-image class="pic"
-                      :src="item"
-                      :preview-src-list="form.pics">
+        <el-carousel class="pics fadeInLeft" :interval="6000" height="278px"
+          :arrow="form.pics.length > 1 ? 'hover' : 'never'" :indicator-position="form.pics.length > 1 ? '' : 'none'">
+          <el-carousel-item v-for="(item, i) in form.pics" :key="i">
+            <el-image class="pic" :src="item" :preview-src-list="form.pics">
             </el-image>
           </el-carousel-item>
         </el-carousel>
-        <div class="right fadeInRight"
-             id="fields">
+        <div class="right fadeInRight" id="fields">
           <h6>{{ form.mall.productName }}</h6>
-          <div v-if="isCourse"
-               class="meta">
+          <div v-if="isCourse" class="meta">
             共 <span class="val">{{ form.numberOfExperimentalItems }}</span> 个实验项目&emsp;&emsp;
             已有 <span class="val">{{ form.goodsRes.learningCount }}</span>人学过
           </div>
-          <div class="des"
-               v-html="form.mall.productIntroduction"></div>
+          <div class="des" v-html="form.mall.productIntroduction"></div>
           <div class="fields">
             <div class="field">
-              <img src="@/assets/images/product/1.png"
-                   alt=""> 适用专业：
-              <el-tooltip class="text"
-                          effect="dark"
-                          :visible-arrow="false"
-                          :content="form.goodsRes.professionalName"
-                          placement="bottom">
+              <img src="@/assets/images/product/1.png" alt=""> 适用专业：
+              <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.goodsRes.professionalName"
+                placement="bottom">
                 <div>
                   {{ form.goodsRes.professionalName }}
                 </div>
               </el-tooltip>
             </div>
-            <div v-if="form.mall.applicationScenario"
-                 class="field">
-              <img src="@/assets/images/product/2.png"
-                   alt=""> 适用场景：
+            <div v-if="form.mall.applicationScenario" class="field">
+              <img src="@/assets/images/product/2.png" alt=""> 适用场景：
               <div class="text">{{ form.mall.applicationScenario }}</div>
             </div>
-            <div v-if="form.mall.matchingCourse"
-                 class="field">
-              <img src="@/assets/images/product/3.png"
-                   alt=""> 匹配课程：
-              <el-tooltip class="text"
-                          effect="dark"
-                          :visible-arrow="false"
-                          :content="form.mall.matchingCourse"
-                          placement="bottom">
+            <div v-if="form.mall.matchingCourse" class="field">
+              <img src="@/assets/images/product/3.png" alt=""> 匹配课程：
+              <el-tooltip class="text" effect="dark" :visible-arrow="false" :content="form.mall.matchingCourse"
+                placement="bottom">
                 <div class="text">
                   {{ form.mall.matchingCourse }}
                 </div>
               </el-tooltip>
             </div>
-            <div v-if="form.mall.courseHours"
-                 class="field">
-              <img src="@/assets/images/product/4.png"
-                   alt=""> 预计课时：
+            <div v-if="form.mall.courseHours" class="field">
+              <img src="@/assets/images/product/4.png" alt=""> 预计课时：
               <div class="text">{{ form.mall.courseHours }}</div>
             </div>
-            <div v-if="form.goodsRes.typeName"
-                 class="field">
-              <img src="@/assets/images/product/5.png"
-                   alt=""> 产品类型：
+            <div v-if="form.goodsRes.typeName" class="field">
+              <img src="@/assets/images/product/5.png" alt=""> 产品类型：
               <div class="text">{{ form.goodsRes.typeName }}</div>
             </div>
           </div>
-          <button v-if="!GTA"
-                  class="btn"
-                  @click="showQrcode">会员价采购</button>
+          <button v-if="!GTA" class="btn" @click="showQrcode">会员价采购</button>
         </div>
       </div>
-      <div class="course"
-           id="part0">
+      <div class="course" id="part0">
         <div class="detail">
-          <ul class="tab fadeInDown">
-            <li v-for="(tab, i) in tabs"
-                :key="i"
-                :class="{active: curTab === tab.id}"
-                @click="tabChange(tab)">{{ tab.name }}</li>
+          <ul class="tab">
+            <li v-for="(tab, i) in tabs" :key="i" :class="{ active: curTab === tab.id }" @click="tabChange(tab)">{{
+              tab.name }}</li>
           </ul>
           <div class="courses fadeInUp">
-            <div class="des"
-                 v-html="form.mall.detailedIntroduction"></div>
-            <div class="chapter"
-                 id="part1"
-                 v-for="(item, i) in chapterList"
-                 :key="i">
+            <div class="des" v-html="form.mall.detailedIntroduction"></div>
+            <div class="chapter" id="part1" v-for="(item, i) in chapterList" :key="i">
               <div class="chapterName">{{ item.name }}</div>
-              <div class="section"
-                   v-if="item.subsectionList.length">
-                <div v-for="(section, j) in item.subsectionList"
-                     :key="j">
-                  <div class="sectionName"
-                       :title="section.name">
+              <div class="section" v-if="item.subsectionList.length">
+                <div v-for="(section, j) in item.subsectionList" :key="j">
+                  <div class="sectionName" :title="section.name">
                     <div class="val">
-                      <img v-if="section.fileType === 'pptx'"
-                           src="@/assets/images/exts/ppt.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'mp4'"
-                           src="@/assets/images/exts/video.png"
-                           alt="">
+                      <img v-if="section.fileType === 'pptx'" src="@/assets/images/exts/ppt.png" alt="">
+                      <img v-else-if="section.fileType === 'mp4'" src="@/assets/images/exts/video.png" alt="">
                       <img v-else-if="section.fileType === 'doc' || section.fileType === 'docx'"
-                           src="@/assets/images/exts/word.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'txt'"
-                           src="@/assets/images/exts/txt.png"
-                           alt="">
-                      <img v-else-if="section.fileType === 'pdf'"
-                           src="@/assets/images/exts/pdf.png"
-                           alt="">
-                      <img v-else
-                           src="@/assets/images/exts/pic.png"
-                           alt="">
+                        src="@/assets/images/exts/word.png" alt="">
+                      <img v-else-if="section.fileType === 'txt'" src="@/assets/images/exts/txt.png" alt="">
+                      <img v-else-if="section.fileType === 'pdf'" src="@/assets/images/exts/pdf.png" alt="">
+                      <img v-else src="@/assets/images/exts/pic.png" alt="">
                       {{ section.name }}
                     </div>
                   </div>
@@ -132,33 +84,20 @@
         <div class="products">
           <h6 class="fadeInUp">热门产品推荐</h6>
           <ul class="product fadeInDown">
-            <li v-for="(item, i) in hots"
-                :key="i"
-                @click="toDetail(item.mallId)">
-              <img :src="item.coverDrawing"
-                   alt="" />
-              <img v-if="item.logoOfOurSchool"
-                   class="my-school"
-                   src="@/assets/images/my-school.png"
-                   alt="">
+            <li v-for="(item, i) in hots" :key="i" @click="toDetail(item.mallId)">
+              <img :src="item.coverDrawing" alt="" />
+              <img v-if="item.logoOfOurSchool" class="my-school" src="@/assets/images/my-school.png" alt="">
               <div class="texts">
                 <div class="title">{{ item.productName }}</div>
-                <div :class="['desc', {'not-tag': !item.tagsName}]"
-                     v-html="item.productIntroduction"></div>
-                <div v-if="item.tagsName"
-                     class="tags">
-                  <el-tag v-for="(tag, i) in item.tagsName.split(',')"
-                          :key="i"
-                          class="tag">{{ tag }}</el-tag>
+                <div :class="['desc', { 'not-tag': !item.tagsName }]" v-html="item.productIntroduction"></div>
+                <div v-if="item.tagsName" class="tags">
+                  <el-tag v-for="(tag, i) in item.tagsName.split(',')" :key="i" class="tag">{{ tag }}</el-tag>
                 </div>
                 <div class="metas">
-                  <el-tag v-if="item.selected"
-                          type="danger"
-                          effect="dark">
+                  <el-tag v-if="item.selected" type="danger" effect="dark">
                     官方精选
                   </el-tag>
-                  <div v-if="item.isCourse"
-                       class="meta">{{ item.learningCount }}人学过</div>
+                  <div v-if="item.isCourse" class="meta">{{ item.learningCount }}人学过</div>
                 </div>
               </div>
             </li>
@@ -168,34 +107,18 @@
     </div>
 
     <!-- 选择链接 -->
-    <el-dialog title="请选择链接"
-               :visible.sync="linkVisible"
-               width="420px"
-               center
-               :close-on-click-modal="false">
-      <div v-if="withLink"
-           class="buy">
-        <div v-for="(link, i) in form.mallNonAssociatedLinks"
-             :key="i"
-             class="link-line">
+    <el-dialog title="请选择链接" :visible.sync="linkVisible" width="420px" center :close-on-click-modal="false">
+      <div v-if="withLink" class="buy">
+        <div v-for="(link, i) in form.mallNonAssociatedLinks" :key="i" class="link-line">
           {{ link.urlName }}：
-          <a class="url"
-             :href="link.url"
-             target="_blank">{{ link.url }}</a>
+          <a class="url" :href="link.url" target="_blank">{{ link.url }}</a>
         </div>
       </div>
     </el-dialog>
 
-    <el-dialog title=""
-               :visible.sync="qrcodeVisible"
-               width="500px"
-               center
-               :top="qrcodeTop"
-               custom-class="qrcode-dia">
+    <el-dialog title="" :visible.sync="qrcodeVisible" width="500px" center :top="qrcodeTop" custom-class="qrcode-dia">
       <div>
-        <img width="100%"
-             src="@/assets/images/occupationlab.png"
-             alt="">
+        <img width="100%" src="@/assets/images/occupationlab.png" alt="">
       </div>
     </el-dialog>
   </div>
@@ -476,352 +399,421 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
+  padding: 24px;
+  background: url(../../../assets/images/product/bg1.png) 0 373px no-repeat,
+    url(../../../assets/images/product/bg2.png) bottom right no-repeat;
+  background-color: #f3f6fa;
+
+  .inner {
+    width: 1146px;
+    margin: 0 auto;
+  }
+
+  .top {
+    display: flex;
     padding: 24px;
-    background: url(../../../assets/images/product/bg1.png) 0 373px no-repeat,
-        url(../../../assets/images/product/bg2.png) bottom right no-repeat;
-    background-color: #f3f6fa;
-    .inner {
-        width: 1146px;
-        margin: 0 auto;
+    background-color: #fff;
+    border-radius: 10px;
+
+    .pics {
+      width: 484px;
+      margin-right: 20px;
+
+      .pic {
+        width: 100%;
+        height: 100%;
+        border-radius: 8px;
+      }
     }
-    .top {
-        display: flex;
-        padding: 24px;
-        background-color: #fff;
-        border-radius: 10px;
-        .pics {
-            width: 484px;
-            margin-right: 20px;
-            .pic {
-                width: 100%;
-                height: 100%;
-                border-radius: 8px;
-            }
-        }
-        .right {
-            width: 592px;
-            overflow: hidden;
-        }
-        h6 {
-            font-size: 24px;
-            font-weight: 600;
-            color: #2e2d31;
-        }
-        .meta {
-            margin: 10px 0;
-            font-size: 12px;
-            color: #2e2d31;
-            .val {
-                color: #007eff;
-            }
-        }
-        .des {
-            margin-bottom: 15px;
-            font-size: 14px;
-            color: #666;
-            line-height: 20px;
-            @include mul-ellipsis(3);
-        }
-        .field {
-            display: inline-flex;
-            align-items: center;
-            margin: 0 20px 10px 0;
-            font-size: 14px;
-            color: #2e2d31;
-            &:last-child {
-                margin-right: 0;
-            }
-            .label {
-                color: #333;
-            }
-            .text {
-                max-width: 160px;
-                @include ellipsis;
-            }
-            img {
-                margin-right: 5px;
-            }
-        }
-        .fields {
-            display: flex;
-            // justify-content: space-between;
-            flex-wrap: wrap;
-            height: 60px;
-            margin: 10px 0 10px;
-            overflow: hidden;
-        }
-        .btn {
-            width: 119px;
-            height: 46px;
-            color: #fff;
-            background: #007eff;
-            border-radius: 6px;
-            border: 0;
-            cursor: pointer;
-            &:hover {
-                opacity: 0.9;
-            }
-            &:first-child {
-                margin-left: 11px;
-            }
-        }
+
+    .right {
+      width: 592px;
+      overflow: hidden;
     }
-    .tab {
-        z-index: 100;
-        position: sticky;
-        top: 20px;
-        display: flex;
-        padding: 10px 10px 20px;
-        background-color: #fff;
-        li {
-            position: relative;
-            margin-right: 20px;
-            font-size: 18px;
-            line-height: 25px;
-            color: #0b1d30;
-            cursor: pointer;
-            &:after {
-                content: '';
-                position: absolute;
-                bottom: -10px;
-                left: 50%;
-                width: 53px;
-                height: 4px;
-                transform: translateX(-50%);
-            }
-            &.active:after {
-                background-color: #007eff;
-            }
-        }
+
+    h6 {
+      font-size: 24px;
+      font-weight: 600;
+      color: #2e2d31;
     }
-    .course {
-        display: flex;
-        margin-top: 20px;
-        .detail {
-            width: calc(100% - 294px);
-            padding: 20px 24px;
-            background-color: #fff;
-            border-radius: 10px;
-        }
+
+    .meta {
+      margin: 10px 0;
+      font-size: 12px;
+      color: #2e2d31;
+
+      .val {
+        color: #007eff;
+      }
+    }
+
+    .des {
+      margin-bottom: 15px;
+      font-size: 14px;
+      color: #666;
+      line-height: 20px;
+      @include mul-ellipsis(3);
+    }
+
+    .field {
+      display: inline-flex;
+      align-items: center;
+      margin: 0 20px 10px 0;
+      font-size: 14px;
+      color: #2e2d31;
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      .label {
+        color: #333;
+      }
+
+      .text {
+        max-width: 160px;
+        @include ellipsis;
+      }
+
+      img {
+        margin-right: 5px;
+      }
+    }
+
+    .fields {
+      display: flex;
+      // justify-content: space-between;
+      flex-wrap: wrap;
+      height: 60px;
+      margin: 10px 0 10px;
+      overflow: hidden;
+    }
+
+    .btn {
+      width: 119px;
+      height: 46px;
+      color: #fff;
+      background: #007eff;
+      border-radius: 6px;
+      border: 0;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      &:first-child {
+        margin-left: 11px;
+      }
+    }
+  }
+
+  .tab {
+    z-index: 100;
+    position: sticky;
+    top: 90px;
+    display: flex;
+    padding: 10px 10px 20px;
+    background-color: #fff;
+
+    li {
+      position: relative;
+      margin-right: 20px;
+      font-size: 18px;
+      line-height: 25px;
+      color: #0b1d30;
+      cursor: pointer;
+
+      &:after {
+        content: '';
+        position: absolute;
+        bottom: -10px;
+        left: 50%;
+        width: 53px;
+        height: 4px;
+        transform: translateX(-50%);
+      }
+
+      &.active:after {
+        background-color: #007eff;
+      }
+    }
+  }
+
+  .course {
+    display: flex;
+    margin-top: 20px;
+
+    .detail {
+      width: calc(100% - 294px);
+      padding: 20px 24px;
+      background-color: #fff;
+      border-radius: 10px;
+    }
+  }
+
+  .courses {
+    padding-top: 10px;
+    overflow: hidden;
+
+    /deep/.des {
+      div,
+      p,
+      span {
+        font-family: PingFangSC-Regular !important;
+      }
+
+      img {
+        max-width: 100%;
+        object-fit: cover;
+      }
     }
-    .courses {
-        padding-top: 10px;
+
+    .chapters {
+      margin-top: 16px;
+      max-height: calc(100% - 53px);
+      overflow: auto;
+    }
+
+    .chapter {
+      padding-top: 60px;
+      margin-bottom: 20px;
+    }
+
+    .chapterName {
+      padding: 0 12px;
+      margin-bottom: 15px;
+      color: #333;
+      font-size: 14px;
+    }
+
+    .sectionName {
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      padding: 12px;
+      font-size: 14px;
+      color: #666;
+      border-radius: 8px;
+      @include ellipsis;
+
+      img {
+        margin-right: 8px;
+      }
+
+      &:hover {
+        color: #007eff;
+        background: #f6fbff;
+      }
+
+      .val {
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .icon {
+        font-size: 18px;
+        color: #666;
+      }
+    }
+  }
+
+  .products {
+    width: 270px;
+    margin-left: 24px;
+
+    &>h6 {
+      font-size: 14px;
+      color: #0b1d30;
+    }
+  }
+
+  .product {
+    margin-top: 11px;
+
+    li {
+      position: relative;
+      margin-bottom: 15px;
+      cursor: pointer;
+      border-radius: 10px;
+      background-color: #fff;
+      transition: all 0.3s;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 140px;
+        transition: 0.3s;
+        object-fit: cover;
+      }
+
+      .my-school {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 57px;
+        height: 22px;
+      }
+
+      .texts {
+        padding: 10px;
+      }
+
+      .title {
+        margin-bottom: 10px;
+        color: #0b1d30;
+        font-size: 14px;
+        font-weight: 600;
+        word-wrap: break-word;
+        word-break: break-all;
         overflow: hidden;
-        /deep/.des {
-            div,
-            p,
-            span {
-                font-family: PingFangSC-Regular !important;
-            }
-            img {
-                max-width: 100%;
-                object-fit: cover;
-            }
-        }
-        .chapters {
-            margin-top: 16px;
-            max-height: calc(100% - 53px);
-            overflow: auto;
-        }
-        .chapter {
-            padding-top: 60px;
-            margin-bottom: 20px;
-        }
-        .chapterName {
-            padding: 0 12px;
-            margin-bottom: 15px;
-            color: #333;
-            font-size: 14px;
-        }
-        .sectionName {
-            position: relative;
-            display: flex;
-            justify-content: space-between;
-            padding: 12px;
-            font-size: 14px;
-            color: #666;
-            border-radius: 8px;
-            @include ellipsis;
-            img {
-                margin-right: 8px;
-            }
-            &:hover {
-                color: #007eff;
-                background: #f6fbff;
-            }
-            .val {
-                display: inline-flex;
-                align-items: center;
-            }
-            .icon {
-                font-size: 18px;
-                color: #666;
-            }
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .desc {
+        min-height: 34px;
+        color: #757f92;
+        font-size: 12px;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+
+        &.not-tag {
+          -webkit-line-clamp: 3;
         }
-    }
-    .products {
-        width: 270px;
-        margin-left: 24px;
-        & > h6 {
-            font-size: 14px;
-            color: #0b1d30;
+      }
+
+      .tags {
+        margin-top: 10px;
+      }
+
+      .tag {
+        margin-right: 8px;
+        color: #007eff;
+        background-color: #f9f9f9;
+        border: 0;
+      }
+
+      .type {
+        display: inline-block;
+        padding: 4px 11px;
+        font-size: 12px;
+        color: #666;
+        border: 1px solid #dadada;
+        border-radius: 20px;
+      }
+
+      .metas {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-top: 10px;
+      }
+
+      .meta {
+        display: inline-flex;
+        align-items: center;
+        color: #b5bfd5;
+        font-size: 12px;
+
+        .icon {
+          width: 14px;
+          max-height: 14px;
+          margin-right: 3px;
         }
-    }
-    .product {
-        margin-top: 11px;
-        li {
-            position: relative;
-            margin-bottom: 15px;
-            cursor: pointer;
-            border-radius: 10px;
-            background-color: #fff;
-            transition: all 0.3s;
-            overflow: hidden;
-            img {
-                width: 100%;
-                height: 140px;
-                transition: 0.3s;
-                object-fit: cover;
-            }
-            .my-school {
-                position: absolute;
-                top: 0;
-                right: 0;
-                width: 57px;
-                height: 22px;
-            }
-            .texts {
-                padding: 10px;
-            }
-            .title {
-                margin-bottom: 10px;
-                color: #0b1d30;
-                font-size: 14px;
-                font-weight: 600;
-                word-wrap: break-word;
-                word-break: break-all;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-            .desc {
-                min-height: 34px;
-                color: #757f92;
-                font-size: 12px;
-                display: -webkit-box;
-                -webkit-box-orient: vertical;
-                -webkit-line-clamp: 2;
-                overflow: hidden;
-                &.not-tag {
-                    -webkit-line-clamp: 3;
-                }
-            }
-            .tags {
-                margin-top: 10px;
-            }
-            .tag {
-                margin-right: 8px;
-                color: #007eff;
-                background-color: #f9f9f9;
-                border: 0;
-            }
-            .type {
-                display: inline-block;
-                padding: 4px 11px;
-                font-size: 12px;
-                color: #666;
-                border: 1px solid #dadada;
-                border-radius: 20px;
-            }
-            .metas {
-                display: flex;
-                justify-content: space-between;
-                align-items: center;
-                margin-top: 10px;
-            }
-            .meta {
-                display: inline-flex;
-                align-items: center;
-                color: #b5bfd5;
-                font-size: 12px;
-                .icon {
-                    width: 14px;
-                    max-height: 14px;
-                    margin-right: 3px;
-                }
-            }
-            &:hover {
-                box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12),
-                    0px 1px 2px -2px rgba(142, 123, 253, 0.16);
-                img {
-                    transform: scale(1.05);
-                }
-            }
+      }
+
+      &:hover {
+        box-shadow: 0px 5px 12px 4px rgba(142, 123, 253, 0.09), 0px 3px 6px 0px rgba(142, 123, 253, 0.12),
+          0px 1px 2px -2px rgba(142, 123, 253, 0.16);
+
+        img {
+          transform: scale(1.05);
         }
+      }
     }
+  }
 }
+
 .link-line {
-    margin: 5px 0;
-    .url {
-        color: #007eff;
-        text-decoration: underline;
-    }
+  margin: 5px 0;
+
+  .url {
+    color: #007eff;
+    text-decoration: underline;
+  }
 }
+
 .buy {
-    text-align: center;
-    .tips {
-        margin-bottom: 10px;
-        font-size: 14px;
-    }
-    img {
-        width: 85%;
-    }
+  text-align: center;
+
+  .tips {
+    margin-bottom: 10px;
+    font-size: 14px;
+  }
+
+  img {
+    width: 85%;
+  }
 }
+
 /deep/.qrcode-dia {
-    .el-dialog__header,
-    .el-dialog__body {
-        padding: 0;
-    }
-    .el-dialog__headerbtn .el-dialog__close {
-        color: #fff;
-    }
+  .el-dialog__header,
+  .el-dialog__body {
+    padding: 0;
+  }
+
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #fff;
+  }
 }
+
 @media (max-width: 1200px) {
-    .wrap {
-        .inner {
-            width: 100%;
-        }
-        .top {
-            flex-direction: column;
-            .pics {
-                width: 100%;
-                margin-bottom: 20px;
-            }
-            .el-image__preview {
-                object-fit: cover;
-            }
-            .right {
-                width: 100%;
-            }
-        }
-        .course {
-            flex-direction: column;
-            .detail {
-                width: 100%;
-                margin-bottom: 20px;
-            }
-            .products {
-                width: 100%;
-                margin-left: 0;
-            }
-        }
+  .wrap {
+    .inner {
+      width: 100%;
+    }
+
+    .top {
+      flex-direction: column;
+
+      .pics {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+
+      .el-image__preview {
+        object-fit: cover;
+      }
+
+      .right {
+        width: 100%;
+      }
     }
+
+    .course {
+      flex-direction: column;
+
+      .detail {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+
+      .products {
+        width: 100%;
+        margin-left: 0;
+      }
+    }
+  }
 }
+
 @media (max-width: 480px) {
-    .wrap {
-        .tab {
-            position: static;
-        }
+  .wrap {
+    .tab {
+      position: static;
     }
+  }
 }
 </style>
\ No newline at end of file