From d1b480c097ca31b47fc0d75017080c4c4aa92036 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 8 Mar 2024 18:20:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E6=AD=A5=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/tel1.png             |  Bin 0 -> 534 bytes
 src/libs/util.js                       |    4 +
 src/pages/about/index.vue              | 1834 ++++---------
 src/pages/application/index.vue        | 1576 +++++------
 src/pages/article/activity.vue         |   36 +-
 src/pages/article/editor.css           |   12 +-
 src/pages/article/index.vue            |  106 +-
 src/pages/careers/index.vue            | 1358 +++++-----
 src/pages/column/index.vue             |  807 +++---
 src/pages/column/result.vue            |  197 +-
 src/pages/contactUs/index.vue          |   58 +-
 src/pages/devHistory/index.vue         |   86 +-
 src/pages/deviceIntroBeam/index.vue    |   47 +-
 src/pages/deviceIntroLayout/index.vue  |   90 +-
 src/pages/deviceIntroLinear/index.vue  |   71 +-
 src/pages/edu/index.vue                | 1102 ++++----
 src/pages/estate/event/index.vue       |   16 +-
 src/pages/estate/index/index.vue       |   32 +-
 src/pages/estate/location/index.vue    |   12 +-
 src/pages/estate/orgSetup/index.vue    |   21 +-
 src/pages/estate/survey/index.vue      |   12 +-
 src/pages/exp/index.vue                |    8 +-
 src/pages/governance/index.vue         |   57 +-
 src/pages/home/index.vue               |  134 +-
 src/pages/iasf/index.vue               |  743 ++++--
 src/pages/industrial/index.vue         |   69 +-
 src/pages/lightSources/index.vue       |   16 +-
 src/pages/mission/index.vue            |   42 +-
 src/pages/news/index.vue               | 1046 +-------
 src/pages/newsPress/index.vue          |  914 +++----
 src/pages/newsProcurement/index.vue    |  966 +++----
 src/pages/org/index.vue                |   47 +-
 src/pages/overview/index.vue           |  122 +-
 src/pages/overviewDevHistory/index.vue |   26 +-
 src/pages/overviewIntro/index.vue      |   18 +-
 src/pages/overviewLocation/index.vue   |    1 +
 src/pages/overviewSetup/index.vue      |   20 +-
 src/pages/overviewTrailer/index.vue    |    1 +
 src/pages/publication/index.vue        |   51 +-
 src/pages/publication/monograph.vue    |   17 +-
 src/pages/publication/patent.vue       |   29 +-
 src/pages/publication/single.vue       |   82 +-
 src/pages/publication/thesis.vue       |   81 +-
 src/pages/publish/show.vue             |   21 -
 src/pages/research/index.vue           | 1400 ++++++----
 src/pages/researchTeam/index.vue       |    8 +-
 src/pages/science/index.vue            |  633 +++--
 src/pages/scientific/index.vue         |   68 +-
 src/pages/sfel/index.vue               | 3398 ++++++++++++------------
 src/pages/speech/index.vue             |   38 +-
 src/pages/talent/index.vue             |    1 +
 src/pages/talentCenter/index.vue       |    1 +
 src/pages/talentCentre/index.vue       |   27 +-
 src/pages/team/index.vue               |   45 +-
 src/pages/userSharing/index.vue        |   25 +-
 55 files changed, 8416 insertions(+), 9216 deletions(-)
 create mode 100644 src/assets/images/tel1.png

diff --git a/src/assets/images/tel1.png b/src/assets/images/tel1.png
new file mode 100644
index 0000000000000000000000000000000000000000..056905b9f6c991a4295f4c60436a92daf6e2807e
GIT binary patch
literal 534
zcmV+x0_pvUP)<h;3K|Lk000e1NJLTq000yK000yS1^@s6jfou%00001b5ch_0Itp)
z=>Px$&`Cr=R5(wql+BAyQ5?rVpDbo&fyJ;;lv0$0^0t@PqL7W3Ns`&fR%%#Ti6TWx
zUSgumhRA}AMkbb6Sg<n1e_-=-eoyC_?mRuF=T7eCF77#>^E=;{EC2bi$%}|Jz&2np
z@J*d)d)^GN!kz$YfzS1QO+D8J+5t9TPl0>tkBHb0TrCs7R!<KK?E;Si_km67r|#y6
zxSJBFtJ?z41AEofZ{~@JL%?lyQCr|i;DWlc2Y3fqq8?}q+ygvQhpMJ4inL?E3E+}?
zu`O^J@DtdjzKV#qzyjd1`f^ZMu4~37Az#(eh}aFh0Jf`>^9AO$PF1I;3v?<2uCAId
zFr9o4jHhN1aRhkWt6@as!CQc>z;EDTQ{&$1odIqFo7JhhIn7CZGu#V-N5%Q;z#Cva
za4^3YX?D!guo32*V9auCbv!4z0c<FyeW*H*G}dPlvH<(k=d&j4g#w4wtYg-5v~)a!
zK9be!$?Nw#RK3y{SOJ|$Q$yfZ>GO0yb0T76Y1v2MnEK$KzzR)G&sOcmfeH0p<0e^v
z<8|`9&6hcW6`JlRbZ43c{HZ48#Hnxo>N>E#rp%SOh*(}Kx(-+h3<JM_$u6ulaFBri
Y1wDGU6#~lrd;kCd07*qoM6N<$g58??F#rGn

literal 0
HcmV?d00001

diff --git a/src/libs/util.js b/src/libs/util.js
index 4ecfe6d..e04d9b6 100644
--- a/src/libs/util.js
+++ b/src/libs/util.js
@@ -146,6 +146,10 @@ const util = {
     isEn(id) {
       return Setting.enIds.includes(+id)
     },
+		// rsa加密(这里无需加密，但是全部页面的请求都有调这个方法，因此直接返回即可)
+		rsa(data) {
+      return data
+		},
 };
 
 export default util;
\ No newline at end of file
diff --git a/src/pages/about/index.vue b/src/pages/about/index.vue
index 910e2fb..2092560 100644
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@@ -1,26 +1,40 @@
 <template>
-  <div class="wrap" v-if="modules.length>=1">
-    <el-carousel height="24rem" :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'">
+  <div class="wrap"
+       v-if="modules.length>=1">
+    <el-carousel height="24rem"
+                 :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">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
       </template>
     </el-carousel>
-    
+
     <div class="block history gray">
-      <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]" @click="openLink(modules[1].form)">
-        <h2 class="wow fadeInLeft" style="margin-left: 3.56rem">{{ modules[1].form.title }}</h2>
-        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+      <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]"
+           @click="openLink(modules[1].form)">
+        <h2 class="wow fadeInLeft"
+            style="margin-left: 3.56rem">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
           <div class="left">
             <h2>{{ modules[1].form.subTitle }}</h2>
             <div class="line"></div>
             <div class="des">{{ modules[1].form.des }}</div>
           </div>
-          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+          <img class="bg"
+               width="562"
+               height="506"
+               :src="modules[1].form.pic"
+               alt="">
         </div>
       </div>
     </div>
@@ -28,23 +42,36 @@
     <div class="block">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
         <ul class="card">
-          <li :class="['item1 wow fadeInLeft', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]" data-wow-delay="0.7s" @click="openLink(modules[3].form)">
+          <li :class="['item1 wow fadeInLeft', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
+              data-wow-delay="0.7s"
+              @click="openLink(modules[3].form)">
             <h6>{{ modules[3].form.title }}</h6>
-            <div class="des" v-html="modules[3].form.des"></div>
+            <div class="des"
+                 v-html="modules[3].form.des"></div>
           </li>
-          <li :class="['item2 wow fadeInRight', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]" data-wow-delay="0.9s" @click="openLink(modules[4].form)">
+          <li :class="['item2 wow fadeInRight', {'cursor-pointer': isLink(modules[4].form.link.linkName)}]"
+              data-wow-delay="0.9s"
+              @click="openLink(modules[4].form)">
             <h6>{{ modules[4].form.title }}</h6>
-            <div class="des" v-html="modules[4].form.des"></div>
+            <div class="des"
+                 v-html="modules[4].form.des"></div>
           </li>
-          <li :class="['item3 wow fadeInLeft', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]" data-wow-delay="1.1s" @click="openLink(modules[5].form)">
+          <li :class="['item3 wow fadeInLeft', {'cursor-pointer': isLink(modules[5].form.link.linkName)}]"
+              data-wow-delay="1.1s"
+              @click="openLink(modules[5].form)">
             <h6>{{ modules[5].form.title }}</h6>
-            <div class="des" v-html="modules[5].form.des"></div>
+            <div class="des"
+                 v-html="modules[5].form.des"></div>
           </li>
-          <li :class="['item4 wow fadeInRight', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]" data-wow-delay="1.3s" @click="openLink(modules[6].form)">
+          <li :class="['item4 wow fadeInRight', {'cursor-pointer': isLink(modules[6].form.link.linkName)}]"
+              data-wow-delay="1.3s"
+              @click="openLink(modules[6].form)">
             <h6>{{ modules[6].form.title }}</h6>
-            <div class="des" v-html="modules[6].form.des"></div>
+            <div class="des"
+                 v-html="modules[6].form.des"></div>
           </li>
         </ul>
       </div>
@@ -53,29 +80,36 @@
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[7].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[7].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[7].form.des }}</p>
         <ul class="stat">
-          <li class="wow fadeInLeft" data-wow-delay="0.2s">
+          <li class="wow fadeInLeft"
+              data-wow-delay="0.2s">
             <p class="num">{{ modules[8].form.title }}</p>
             <p class="text">{{ modules[8].form.des }}</p>
           </li>
-          <li class="wow fadeInLeft" data-wow-delay="0.4s">
+          <li class="wow fadeInLeft"
+              data-wow-delay="0.4s">
             <p class="num">{{ modules[9].form.title }}</p>
             <p class="text">{{ modules[9].form.des }}</p>
           </li>
-          <li class="wow fadeInLeft" data-wow-delay="0.6s">
+          <li class="wow fadeInLeft"
+              data-wow-delay="0.6s">
             <p class="num">{{ modules[10].form.title }}</p>
             <p class="text">{{ modules[10].form.des }}</p>
           </li>
-          <li class="wow fadeInLeft" data-wow-delay="0.9s">
+          <li class="wow fadeInLeft"
+              data-wow-delay="0.9s">
             <p class="num">{{ modules[11].form.title }}</p>
             <p class="text">{{ modules[11].form.des }}</p>
           </li>
-          <li class="wow fadeInLeft" data-wow-delay="1.1s">
+          <li class="wow fadeInLeft"
+              data-wow-delay="1.1s">
             <p class="num">{{ modules[12].form.title }}</p>
             <p class="text">{{ modules[12].form.des }}</p>
           </li>
-          <li class="wow fadeInLeft" data-wow-delay="1.3s">
+          <li class="wow fadeInLeft"
+              data-wow-delay="1.3s">
             <p class="num">{{ modules[13].form.title }}</p>
             <p class="text">{{ modules[13].form.des }}</p>
           </li>
@@ -84,12 +118,16 @@
     </div>
 
     <div class="plan">
-      <div :class="['inner', {'cursor-pointer': isLink(modules[14].form.link.linkName)}]" @click="openLink(modules[14].form)">
-        <img class="pic wow fadeInLeft" :src="modules[14].form.pic" alt="">
+      <div :class="['inner', {'cursor-pointer': isLink(modules[14].form.link.linkName)}]"
+           @click="openLink(modules[14].form)">
+        <img class="pic wow fadeInLeft"
+             :src="modules[14].form.pic"
+             alt="">
         <div class="texts wow fadeInRight">
           <h6>{{ modules[14].form.title }}</h6>
           <div class="des">{{ modules[14].form.des }}</div>
-          <img src="@/assets/images/arrow-white.png" alt="">
+          <img src="@/assets/images/arrow-white.png"
+               alt="">
         </div>
       </div>
     </div>
@@ -97,16 +135,25 @@
     <div class="block">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[15].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[15].form.des }}</p>
         <ul class="people">
           <template v-for="(item, i) in modules[16].list">
-            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s">
-              <img class="pic" :src="item.pic" alt="">
+            <li v-if="item.isEnable"
+                :key="i"
+                class="wow fadeInDown"
+                data-wow-delay="0.5s">
+              <img class="pic"
+                   :src="item.pic"
+                   alt="">
               <div class="texts">
                 <p class="sub">{{ item.subTitle }}</p>
                 <h6>{{ item.title }}</h6>
                 <p class="des">{{ item.des }}</p>
-                <img :class="{'arrow': isLink(item.link.linkName)}" src="@/assets/images/arrow.png" alt="" @click="openLink(item)">
+                <img :class="{'arrow': isLink(item.link.linkName)}"
+                     src="@/assets/images/arrow.png"
+                     alt=""
+                     @click="openLink(item)">
               </div>
             </li>
           </template>
@@ -117,20 +164,36 @@
     <div class="block list-block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[17].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[17].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[17].form.des }}</p>
         <ul class="list">
-          <li class="wow fadeInDown" data-wow-delay="0.6s" :class="{'cursor-pointer': isLink(modules[18].form.link.linkName)}" @click="openLink(modules[18].form)">
-            <img class="pic" :src="modules[18].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.6s"
+              :class="{'cursor-pointer': isLink(modules[18].form.link.linkName)}"
+              @click="openLink(modules[18].form)">
+            <img class="pic"
+                 :src="modules[18].form.pic"
+                 alt="">
             <h6>{{ modules[18].form.title }}</h6>
             <p class="des">{{ modules[18].form.des }}</p>
           </li>
-          <li class="wow fadeInDown" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[19].form.link.linkName)}" @click="openLink(modules[19].form)">
-            <img class="pic" :src="modules[19].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.8s"
+              :class="{'cursor-pointer': isLink(modules[19].form.link.linkName)}"
+              @click="openLink(modules[19].form)">
+            <img class="pic"
+                 :src="modules[19].form.pic"
+                 alt="">
             <h6>{{ modules[19].form.title }}</h6>
             <p class="des">{{ modules[19].form.des }}</p>
           </li>
-          <li class="wow fadeInDown" data-wow-delay="1s" :class="{'cursor-pointer': isLink(modules[20].form.link.linkName)}" @click="openLink(modules[20].form)">
-            <img class="pic" :src="modules[20].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="1s"
+              :class="{'cursor-pointer': isLink(modules[20].form.link.linkName)}"
+              @click="openLink(modules[20].form)">
+            <img class="pic"
+                 :src="modules[20].form.pic"
+                 alt="">
             <h6>{{ modules[20].form.title }}</h6>
             <p class="des">{{ modules[20].form.des }}</p>
           </li>
@@ -141,13 +204,18 @@
     <div class="block">
       <div class="inner staff-inner">
         <h2 class="b-title wow fadeInUp">{{ modules[21].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
-        <div :class="['staff wow fadeInDown', {'cursor-pointer': isLink(modules[22].form.link.linkName)}]" data-wow-delay="0.7s" @click="openLink(modules[22].form)">
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[21].form.des }}</p>
+        <div :class="['staff wow fadeInDown', {'cursor-pointer': isLink(modules[22].form.link.linkName)}]"
+             data-wow-delay="0.7s"
+             @click="openLink(modules[22].form)">
           <div class="left">
             <h6>{{ modules[22].form.title }}</h6>
             <div class="des">{{ modules[22].form.des }}</div>
           </div>
-          <img class="pic" :src="modules[22].form.pic" alt="">
+          <img class="pic"
+               :src="modules[22].form.pic"
+               alt="">
         </div>
       </div>
     </div>
@@ -161,17 +229,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -182,7 +250,7 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -190,1386 +258,414 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.85rem 0;
-  .inner {
-    .wow  {
-      font-size: 1.921rem;
+    .banner-name {
+        font-size: 2.16rem;
     }
-    .texts {
-      padding: 4.1rem 2.85rem 1.5rem;
-      .left {
-        width: 58%;
-        margin-right: 2.8rem;
-        h2 {
-          font-size: 1.721rem;
-        }
-        .line {
-          margin: 1rem;
-        }
-        .des {
-          font-size: 1.256rem;
+}
+.block {
+    padding: 3.85rem 0;
+    .inner {
+        .wow {
+            font-size: 1.921rem;
+        }
+        .texts {
+            padding: 4.1rem 2.85rem 1.5rem;
+            .left {
+                width: 58%;
+                margin-right: 2.8rem;
+                h2 {
+                    font-size: 1.721rem;
+                }
+                .line {
+                    margin: 1rem;
+                }
+                .des {
+                    font-size: 1.256rem;
+                }
+            }
+            .bg {
+                width: 38%;
+                height: 25.3rem;
+            }
+        }
+        .b-title {
+            margin-bottom: 2.5rem;
+            font-size: 2.8rem;
+        }
+        .intro {
+            margin-bottom: 4rem;
         }
-      }
-      .bg {
-        width: 38%;
-        height: 25.3rem;
-      }
-    }
-    .b-title {
-      margin-bottom: 2.5rem;
-      font-size: 2.8rem;
-    }
-    .intro  {
-      margin-bottom: 4rem;
     }
-  }
 }
 .history {
-  h2 {
-    font-size: 2.14rem;
-    color: #333;
-  }
-  .texts {
-    display: flex;
-    justify-content: space-between;
-    padding: 5.125rem 3.5625rem 1.875rem;
-    margin-top: 20px;
-    background-color: #fff;
-    border-radius: 6.25rem 0px 0px 0px;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
+    h2 {
+        font-size: 2.14rem;
+        color: #333;
     }
-  }
-  .left {
-    width: 43.4375rem;
-  }
-  .line {
-    width: 8.5rem;
-    height: 2px;
-    margin: 1.25rem 0;
-    background: #D7D7D7;
-  }
-  .des {
-    font-size: 1.57rem;
-    color: #181818;
-    line-height: 31px;
-    -webkit-line-clamp: 6;
-  }
-  .bg {
-    margin: -122px 0 0 0;
-    border-top-right-radius: 40px;
-  }
-}
-.card {
-  display: flex;
-  flex-wrap: wrap;
-  li {
-    width: calc((100% - 28px) / 2);
-    // height: 13.85rem;
-    padding: 3.5rem 3.344rem ;
-    margin-bottom: 1.4rem;
-    color: #fff;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
-    &:nth-child(odd) {
-      margin-right: 1.75rem;
-    }
-  }
-  .item1 {
-    background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
-  }
-  .item2 {
-    background-color: #4984B6;
-  }
-  .item3 {
-    background-color: #567180;
-  }
-  .item4 {
-    background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
-  }
-  h6 {
-    margin-bottom: 10px;
-    font-size: 2.28rem;
-    font-family: toppan;
-  }
-  .des {
-    font-size: 1.024rem;
-  }
-}
-.plan {
-  padding: 3.65rem 0;
-  background: #072947;
-  .inner {
-    display: flex;
-    justify-content: space-between;
-    width: 85.7142rem;
-  }
-  .pic {
-    width: 33.2rem;
-    height: 24.4rem;
-    margin-bottom: -4.8rem;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
-  }
-  .texts {
-    width: 51%;
-    margin-top: 4.25rem;
-    color: #fff;
-    transition: .3s;
-    &:hover {
-      transform: translateY(20px);
-    }
-    img {
-      width: 3.5rem;
-      height: 3.5rem;
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 5rem 3.5rem 1.8rem;
+        margin-top: 20px;
+        background-color: #fff;
+        border-radius: 6.25rem 0px 0px 0px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+    .left {
+        width: 43rem;
+    }
+    .line {
+        width: 8.5rem;
+        height: 2px;
+        margin: 1.25rem 0;
+        background: #d7d7d7;
+    }
+    .des {
+        font-size: 1.57rem;
+        color: #181818;
+        line-height: 31px;
+        -webkit-line-clamp: 6;
+    }
+    .bg {
+        margin: -122px 0 0 0;
+        border-top-right-radius: 40px;
     }
-  }
-  h6 {
-    font-size: 2.056rem;
-  }
-  .des {
-    margin: 2rem 0;
-    font-size: 1.1424rem;
-  }
 }
-.people {
-  li {
+.card {
     display: flex;
-    justify-content: space-between;
-    margin-bottom: 6.296rem;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
-    &:nth-child(even) {
-      flex-direction: row-reverse;
-    }
-  }
-  .pic {
-    width: 47%;
-    height: auto;
-  }
-  .texts {
-    width: 49%;
-    padding-top: 4.45rem;
-  }
-  h6 {
-    margin: 1rem 0;
-    font-size: 2.28rem;
-    font-weight: 600;
-  }
-  .sub {
-    font-size: 1.1424rem;
-    color: #020202;
-  }
-  .des {
-    font-size: 1.024rem;
-    color: #020202;
-    line-height: 30px;
-  }
-  .arrow {
-    height: 3.7rem;width: 3.7rem;
-  }
-}
-.list-block {
-  .inner {
-    width: 80%;
-    padding: 5.625rem 0;
-    background-color: #fff;
-  }
-}
-.list {
-  display: flex;
-  justify-content: center;
-  li {
-    flex: 1;
-    padding-bottom: 1.875rem;
-    margin-right: 1.75rem;
-    text-align: center;
-    background-color: #F5F5F5;
-    transition: .3s;
-    &:hover {
-      background-color: #1f5793;
-      h6, .des {
+    flex-wrap: wrap;
+    li {
+        width: calc((100% - 28px) / 2);
+        // height: 13.85rem;
+        padding: 3.5rem 3.344rem;
+        margin-bottom: 1.4rem;
         color: #fff;
-      }
-    }
-    &:last-child {
-      margin-right: 0;
-    }
-  }
-  .pic {
-    width: 100%;
-  }
-  h6 {
-    margin: 1.75rem 0 5px;
-    font-size: 1.368rem;
-    color: #272727;
-    transition: .3s;
-  }
-  .des {
-    font-size: .912rem;
-    color: #757575;
-    transition: .3s;
-  }
-}
-.staff {
-  display: flex;
-  justify-content: space-between;
-  background: #F8F8F8;
-  transition: .3s;
-  &:hover {
-    transform: scale(1.05);
-    background-color: #165191;
-    h6, .des {
-      color: #fff;
-    }
-  }
-  .staff-inner {
-    width: 98.8125rem;
-  }
-  .left {
-    width: 50%;
-    padding: 5.4rem 2.15rem 0 2.3rem;
-  }
-  h6 {
-    margin-bottom: 1.5rem;
-    font-size: 1.712rem;
-    color: #333;
-    transition: .3s;
-    @include mul-ellipsis(3);
-  }
-  .des {
-    font-size: 1.42rem;
-    color: #333;
-    line-height: 1.94rem;
-    transition: .3s;
-  }
-  .pic {
-    width: 53%;
-    height: auto
-  }
-}
-.stat {
-  display: flex;
-  justify-content: space-around;
-  flex-wrap: wrap;
-  margin-top: 3rem;
-  li {
-    width: 27%;
-    margin-bottom: 2.5rem;
-  }
-  .num {
-    margin-bottom: 10px;
-    font-size: 2.7rem;
-    font-weight: 800;
-    font-family: toppan;
-    color: #035CE1;
-    line-height: 2.45rem;
-  }
-  .text {
-    font-size: 1.08rem;
-  }
-}
-
-@media (max-width: 1200px) {
-  .card li {
-    padding:3.5rem 1rem;
-  }
-  .history{
-    .texts{
-      padding: 3.14rem 1.5rem;
-    }
-  }
- .texts {
-  flex-direction: column;
-  .left{
-    width: 100%;
-    h2{
-      font-size: 1.42rem;
-    }
-    
-  }
-  .bg{ 
-      margin: 0;
-      width: 100%;
-      height: 28.125rem;
-    }
- }
- .block{
-  padding: 50px 0;
-  .intro{
-    margin-bottom: 3.125rem;
-  }
-  .inner {
-    .card{
-      flex-direction: column;
-      li {
-        width: 100%;
-      }
-    }
-  }
-  
- }
- .gray {
-    .inner{
-      .stat{
-        flex-direction: column;
-        li{
-          width: 100%;
-          text-align: center;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
         }
-      } 
-    }
-    
-  }
-  .plan{
-    .inner{
-       flex-direction: column;
-       .pic{
-        width: 95%;margin: 0 auto;
-       }
-       .texts {
-        width: 100%;
-        text-align: center;
-       }
-    }
-  }
-  .block {
-    .inner {
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .people{
-        .wow {
-          flex-direction: column;
-          .pic {
-            width: 95%;
-            margin: 0 auto;
-          }
-          .texts{
-            padding-top: 3.125rem;
-            width: 100%;
-          }
+        &:nth-child(odd) {
+            margin-right: 1.75rem;
         }
-      }
-      .list{
-        flex-direction: column;
-        .wow {
-          width: 100%;
-        }
-      }
-      .staff {
-        flex-direction: column;
-        .left{
-          width: 100%;
-          h6 {
-            font-size: 1.42rem;
-          }
-          .des{
-             font-size: 1.07rem;
-          }
-        }
-        .pic {
-          width: 95%;margin: 0 auto;
-          height: 25rem;
-        }
-      }
     }
-  }
-}
-
-@media (min-width: 280px) and (max-width: 1200px) {
-
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
+    .item1 {
+        background: url(../../assets/images/about/3.png) 0 0/100% 100% no-repeat;
     }
-  }
-  .inner{
-    .texts {
-      .bg {
-        height: 21.875rem;
-        margin-top: 1rem;
-      }
+    .item2 {
+        background-color: #4984b6;
     }
-    .card {
-      li {
-        h6 {
-          font-size: 2rem;
-        }
-      }
+    .item3 {
+        background-color: #567180;
     }
-    .people{
-      li {
-        margin-bottom: 30px;
-        .pic {
-          height: 18.875rem;
-        }
-      }
+    .item4 {
+        background: url(../../assets/images/about/4.png) 0 0/100% 100% no-repeat;
     }
-  }
-  .plan {
-    .pic {
-      height: 25rem;
+    h6 {
+        margin-bottom: 10px;
+        font-size: 2.28rem;
+        font-family: toppan;
     }
-  }
-  .list {
-    .pic {
-      height: 19rem;
+    .des {
+        font-size: 1.024rem;
     }
-  }
-  .staff {
-    .pic {
-      height: 20rem !important;
-    }
-  }
 }
-@media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      bottom: 0;
-      left: 2rem;
-    }
-  }
-  .history  {
+.plan {
+    padding: 3.65rem 0;
+    background: #072947;
     .inner {
-      h2  {
-        margin-left: 1rem !important;
-      }
-      .texts  {
-        padding: 4.1rem 1.35rem 1.5rem;
-        .left {
-          h2 {
-            margin: 0 !important;
-            font-size: 1.321rem;
-          }
-          .line {
-            margin: .5rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-          }
-      }
+        display: flex;
+        justify-content: space-between;
+        width: 85.7142rem;
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      width: 90%;
-      .b-title {
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-      }
-      .intro  {
-        margin-bottom: 1rem;
-        font-size: .85rem;
-      }
-      .texts  {
-        .bg {
-          height: auto;
-        }
-      }
-      .card {
-        li {
-          padding: 1rem;
-          h6 {
-            font-size: 1.5rem;
-          }
-        }
-      }
-      .people {
-        li {
-          .pic {
-            width: 100% !important;
-            height: auto;
-            margin: 0;
-          }
-          .texts {
-            padding: 1rem !important;
-          }
-        }
-      }
-      .list {
-        li {
-          .pic {
-            height: 13rem;
-          }
-        }
-      }
-      .staff  {
-        .pic {
-          height: auto !important;
+    .pic {
+        width: 33.2rem;
+        height: 24.4rem;
+        margin-bottom: -4.8rem;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
         }
-      }
     }
-  }
-  .plan {
-    padding: 1rem 0;
-      .inner {
-        width: 90%;
-        .pic {
-          width: 100%;
-          height: auto;
-        }
-        .texts  {
-          margin-top: 1rem;
-        }
-      }
-  }
-  .list-block  {
-    .inner {
-      padding-top: 1rem;
-      .list {
-        li {
-          .pic {
-            height: auto;
-          }
+    .texts {
+        width: 51%;
+        margin-top: 4.25rem;
+        color: #fff;
+        transition: 0.3s;
+        &:hover {
+            transform: translateY(20px);
         }
-      }
-    }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px)  {
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      bottom: 0;
-      left: 2rem;
-    }
-  }
-  .history  {
-    .inner {
-      h2  {
-        margin-left: 1rem !important;
-      }
-      .texts  {
-        padding: 4.1rem 1.35rem 1.5rem;
-        .left {
-          h2 {
-            margin: 0 !important;
-            font-size: 1.321rem;
-          }
-          .line {
-            margin: .5rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
+        img {
+            width: 3.5rem;
+            height: 3.5rem;
         }
-        .bg {
-            width: 100%;
-            height: auto;
-          }
-      }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      width: 90%;
-      .b-title {
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-      }
-      .intro  {
-        margin-bottom: 1rem;
-        font-size: .85rem;
-      }
-      .texts  {
-        .bg {
-          height: auto;
-        }
-      }
-      .card {
-        li {
-          padding: 1rem;
-          h6 {
-            font-size: 1.5rem;
-          }
-        }
-      }
-      .people {
-        li {
-          .pic {
-            width: 100% !important;
-            height: auto;
-            margin: 0;
-          }
-          .texts {
-            padding: 1rem !important;
-          }
-        }
-      }
-      .list {
-        li {
-          .pic {
-            height: 13rem;
-          }
-        }
-      }
-      .staff  {
-        .pic {
-          height: auto !important;
-        }
-      }
+    h6 {
+        font-size: 2.056rem;
     }
-  }
-  .plan {
-    padding: 1rem 0;
-      .inner {
-        width: 90%;
-        .pic {
-          width: 100%;
-          height: auto;
-        }
-        .texts  {
-          margin-top: 1rem;
-        }
-      }
-  }
-  .list-block  {
-    .inner {
-      padding-top: 1rem;
-      .list {
-        li {
-          .pic {
-            height: auto;
-          }
-        }
-      }
+    .des {
+        margin: 2rem 0;
+        font-size: 1.1424rem;
     }
-  }
 }
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      bottom: 0;
-      left: 2rem;
-    }
-  }
-  .history  {
-    .inner {
-      h2  {
-        margin-left: 1rem !important;
-      }
-      .texts  {
-        padding: 4.1rem 1.35rem 1.5rem;
-        .left {
-          h2 {
-            margin: 0 !important;
-            font-size: 1.321rem;
-          }
-          .line {
-            margin: .5rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-          }
-      }
-    }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      width: 90%;
-      .b-title {
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-      }
-      .intro  {
-        margin-bottom: 1rem;
-        font-size: .85rem;
-      }
-      .texts  {
-        .bg {
-          height: auto;
-        }
-      }
-      .card {
-        li {
-          padding: 1.5rem;
-          h6 {
-            font-size: 1.5rem;
-          }
-        }
-      }
-      .people {
-        li {
-          .pic {
-            width: 100% !important;
-            height: auto;
-            margin: 0;
-          }
-          .texts {
-            padding: 1rem !important;
-          }
-        }
-      }
-      .list {
-        li {
-          .pic {
-            height: 13rem;
-          }
-        }
-      }
-      .staff  {
-        .pic {
-          height: auto !important;
-        }
-      }
-    }
-  }
-  .plan {
-    padding: 1rem 0;
-      .inner {
-        width: 90%;
-        .pic {
-          width: 100%;
-          height: auto;
-        }
-        .texts  {
-          margin-top: 1rem;
+.people {
+    li {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 6.296rem;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
         }
-      }
-  }
-  .list-block  {
-    .inner {
-      padding-top: 1rem;
-      .list {
-        li {
-          .pic {
-            height: auto;
-          }
+        &:nth-child(even) {
+            flex-direction: row-reverse;
         }
-      }
     }
-  }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
+    .pic {
+        width: 47%;
+        height: auto;
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .texts {
+        width: 49%;
+        padding-top: 4.45rem;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      bottom: 0;
-      left: 2rem;
+    h6 {
+        margin: 1rem 0;
+        font-size: 2.28rem;
+        font-weight: 600;
     }
-  }
-  .history  {
-    .inner {
-      h2  {
-        margin-left: 1rem !important;
-      }
-      .texts  {
-        padding: 4.1rem 1.35rem 1.5rem;
-        .left {
-          h2 {
-            margin: 0 !important;
-            font-size: 1.321rem;
-          }
-          .line {
-            margin: .5rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-          }
-      }
+    .sub {
+        font-size: 1.1424rem;
+        color: #020202;
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      width: 90%;
-      .b-title {
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-      }
-      .intro  {
-        margin-bottom: 1rem;
-        font-size: .85rem;
-      }
-      .texts  {
-        .bg {
-          height: auto;
-        }
-      }
-      .card {
-        li {
-          padding: 2rem;
-          h6 {
-            font-size: 1.5rem;
-          }
-        }
-      }
-      .people {
-        li {
-          .pic {
-            width: 100% !important;
-            height: auto;
-            margin: 0;
-          }
-          .texts {
-            padding: 1rem !important;
-          }
-        }
-      }
-      .list {
-        li {
-          .pic {
-            height: 13rem;
-          }
-        }
-      }
-      .staff  {
-        .pic {
-          height: auto !important;
-        }
-      }
+    .des {
+        font-size: 1.024rem;
+        color: #020202;
+        line-height: 30px;
     }
-  }
-  .plan {
-    padding: 1rem 0;
-      .inner {
-        width: 90%;
-        .pic {
-          width: 100%;
-          height: auto;
-        }
-        .texts  {
-          margin-top: 1rem;
-        }
-      }
-  }
-  .list-block  {
-    .inner {
-      padding-top: 1rem;
-      .list {
-        li {
-          .pic {
-            height: auto;
-          }
-        }
-      }
+    .arrow {
+        height: 3.7rem;
+        width: 3.7rem;
     }
-  }
 }
-@media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      bottom: 0;
-      left: 2rem;
-    }
-  }
-  .history  {
-    .inner {
-      h2  {
-        margin-left: 1rem !important;
-      }
-      .texts  {
-        padding: 4.1rem 1.35rem 1.5rem;
-        .left {
-          h2 {
-            margin: 0 !important;
-            font-size: 1.321rem;
-          }
-          .line {
-            margin: .5rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-          }
-      }
-    }
-  }
-  .block  {
-    padding: 1.25rem 0;
+.list-block {
     .inner {
-      width: 90%;
-      .b-title {
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-      }
-      .intro  {
-        margin-bottom: 1rem;
-        font-size: .85rem;
-      }
-      .texts  {
-        .bg {
-          height: auto;
-        }
-      }
-      .card {
-        flex-direction: row;
-        li {
-          padding: 2rem;
-          width: calc((100% - 28px) / 2);
-          h6 {
-            font-size: 1.5rem;
-          }
-        }
-      }
-      .people {
-        li {
-          .pic {
-            width: 100% !important;
-            height: auto;
-            margin: 0;
-          }
-          .texts {
-            padding: 1rem !important;
-          }
-        }
-      }
-      .list {
-        li {
-          .pic {
-            height: 13rem;
-          }
-        }
-      }
-      .staff  {
-        .pic {
-          height: auto !important;
-        }
-      }
-      .stat {
-        flex-direction: row;
-        li {
-          width: 30%;
-        }
-      }
+        padding: 5rem 0;
+        background-color: #fff;
     }
-  }
-  .plan {
-    padding: 1rem 0;
-      .inner {
-        width: 90%;
-        .pic {
-          width: 100%;
-          height: auto;
-        }
-        .texts  {
-          margin-top: 1rem;
+}
+.list {
+    display: flex;
+    justify-content: center;
+    li {
+        flex: 1;
+        padding-bottom: 1.875rem;
+        margin-right: 1.75rem;
+        text-align: center;
+        background-color: #f5f5f5;
+        transition: 0.3s;
+        &:hover {
+            background-color: #1f5793;
+            h6,
+            .des {
+                color: #fff;
+            }
         }
-      }
-  }
-  .list-block  {
-    .inner {
-      padding-top: 1rem;
-      .list {
-        li {
-          .pic {
-            height: auto;
-          }
+        &:last-child {
+            margin-right: 0;
         }
-      }
     }
-  }
-}
-@media (min-width: 768px) and (max-width: 980px)  {
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .pic {
+        width: 100%;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      bottom: 0;
-      left: 2rem;
+    h6 {
+        margin: 1.75rem 0 5px;
+        font-size: 1.368rem;
+        color: #272727;
+        transition: 0.3s;
     }
-  }
-  .history  {
-    .inner {
-      h2  {
-        margin-left: 1rem !important;
-      }
-      .texts  {
-        padding: 4.1rem 1.35rem 1.5rem;
-        .left {
-          h2 {
-            margin: 0 !important;
-            font-size: 1.321rem;
-          }
-          .line {
-            margin: .5rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-          }
-      }
+    .des {
+        font-size: 0.912rem;
+        color: #757575;
+        transition: 0.3s;
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      width: 90%;
-      .b-title {
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-      }
-      .intro  {
-        margin-bottom: 1rem;
-        font-size: .85rem;
-      }
-      .texts  {
-        .bg {
-          height: auto;
-        }
-      }
-      .card {
-        flex-direction: row;
-        li {
-          padding: 2rem;
-          width: calc((100% - 28px) / 2);
-          h6 {
-            font-size: 1.5rem;
-          }
-        }
-      }
-      .people {
-        
-        li {
-          flex-direction: row !important;
-          .pic {
-            width: 47% !important;
-            height: auto;
-            margin: 0;
-          }
-          .texts {
-            padding: 1rem !important;
-          }
-        }
-      }
-      .list {
-        flex-direction: row;
-        li {
-          .pic {
-            height: 13rem;
-          }
-        }
-      }
-      .staff  {
-        flex-direction: row;
-        .pic {
-          width: 53%;
-          height: auto !important;
-        }
-      }
-      .stat {
-        flex-direction: row;
-        li {
-          width: 30%;
-        }
-      }
-    }
-  }
-  .plan {
-    padding: 1rem 0;
-      .inner {
-        width: 90%;
-        .pic {
-          width: 100%;
-          height: auto;
-        }
-        .texts  {
-          margin-top: 1rem;
-        }
-      }
-  }
-  .list-block  {
-    .inner {
-      padding-top: 1rem;
-      .list {
-        li {
-          .pic {
-            height: auto;
-          }
+}
+.staff {
+    display: flex;
+    justify-content: space-between;
+    background: #f8f8f8;
+    transition: 0.3s;
+    &:hover {
+        transform: scale(1.05);
+        background-color: #165191;
+        h6,
+        .des {
+            color: #fff;
         }
-      }
     }
-  }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-  .wrap  {
-    /deep/ .el-carousel {
-      height: 12rem;
-      .el-carousel__container{
-        height: 12rem !important;
-      }
-      img {
-        height: 12rem;
-      }
+    .staff-inner {
+        width: 98.8125rem;
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .left {
+        width: 50%;
+        padding: 5.4rem 2.15rem 0 2.3rem;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      bottom: 0;
-      left: 2rem;
+    h6 {
+        margin-bottom: 1.5rem;
+        font-size: 1.712rem;
+        color: #333;
+        transition: 0.3s;
+        @include mul-ellipsis(3);
     }
-  }
-  .history  {
-    .inner {
-      h2  {
-        margin-left: 1rem !important;
-      }
-      .texts  {
-        padding: 4.1rem 1.35rem 1.5rem;
-        .left {
-          h2 {
-            margin: 0 !important;
-            font-size: 1.321rem;
-          }
-          .line {
-            margin: .5rem;
-          }
-          .des {
-            font-size: 1rem;
-            line-height: 1rem;
-          }
-        }
-        .bg {
-            width: 100%;
-            height: auto;
-          }
-      }
+    .des {
+        font-size: 1.42rem;
+        color: #333;
+        line-height: 1.94rem;
+        transition: 0.3s;
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      width: 90%;
-      .b-title {
-        margin-bottom: 1rem;
-        font-size: 1.2rem;
-      }
-      .intro  {
-        margin-bottom: 1rem;
-        font-size: .85rem;
-      }
-      .texts  {
-        .bg {
-          height: auto;
-        }
-      }
-      .card {
-        flex-direction: row;
-        li {
-          padding:  3.5rem 3.344rem;
-          width: calc((100% - 28px) / 2);
-          h6 {
-            font-size: 1.5rem;
-          }
-        }
-      }
-      .people {
-        
-        li {
-          flex-direction: row !important;
-          .pic {
-            width: 47% !important;
-            height: auto;
-            margin: 0;
-          }
-          .texts {
-            padding: 1rem !important;
-          }
-        }
-      }
-      .list {
-        flex-direction: row;
-        li {
-          .pic {
-            height: 13rem;
-          }
-        }
-      }
-      .staff  {
-        flex-direction: row;
-        .pic {
-          width: 53%;
-          height: auto !important;
-        }
-      }
-      .stat {
-        flex-direction: row;
-        li {
-          width: 30%;
-        }
-      }
+    .pic {
+        width: 53%;
+        height: auto;
     }
-  }
-  .plan {
-    padding: 1rem 0;
-      .inner {
-        width: 90%;
-        .pic {
-          width: 100%;
-          height: auto;
-        }
-        .texts  {
-          margin-top: 1rem;
-        }
-      }
-  }
-  .list-block  {
-    .inner {
-      padding-top: 1rem;
-      .list {
-        li {
-          .pic {
-            height: auto;
-          }
-        }
-      }
+}
+.stat {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    margin-top: 3rem;
+    li {
+        width: 27%;
+        margin-bottom: 2.5rem;
+    }
+    .num {
+        margin-bottom: 10px;
+        font-size: 2.7rem;
+        font-weight: 800;
+        font-family: toppan;
+        color: #035ce1;
+        line-height: 2.45rem;
+    }
+    .text {
+        font-size: 1.08rem;
     }
-  }
 }
-@media (min-width: 1200px) and (max-width: 1300px) {
-  .block {
-    .inner {
-      .card {
-        li {
-          h6 {
-            font-size: 1.5rem;
-          }
+
+@media (max-width: 1200px) {
+    .history {
+        h2 {
+            margin-left: 1rem !important;
+        }
+        .texts {
+            flex-direction: column;
+            padding: 4.1rem 1.35rem 1.5rem;
+            .left {
+                h2 {
+                    margin: 0 !important;
+                    font-size: 1.3rem;
+                }
+                .line {
+                    margin: 0.5rem;
+                }
+                .des {
+                    font-size: 1rem;
+                    line-height: 1rem;
+                }
+            }
+            .bg {
+                width: 100%;
+                height: auto;
+            }
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .b-title {
+                margin-bottom: 1rem;
+                font-size: 1.2rem;
+            }
+            .intro {
+                margin-bottom: 1rem;
+                font-size: 0.85rem;
+            }
+            .texts {
+                .bg {
+                    height: auto;
+                }
+            }
+            .card {
+                flex-direction: row;
+                li {
+                    padding: 3.5rem 3.344rem;
+                    width: calc((100% - 28px) / 2);
+                    h6 {
+                        font-size: 1.5rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    flex-direction: row !important;
+                    .pic {
+                        width: 47% !important;
+                        height: auto;
+                        margin: 0;
+                    }
+                    .texts {
+                        padding: 1rem !important;
+                    }
+                }
+            }
+            .list {
+                flex-direction: row;
+                li {
+                    .pic {
+                        height: 13rem;
+                    }
+                }
+            }
+            .staff {
+                flex-direction: row;
+                .pic {
+                    width: 53%;
+                    height: auto !important;
+                }
+            }
+            .stat {
+                flex-direction: row;
+                li {
+                    width: 30%;
+                }
+            }
+        }
+    }
+    .plan {
+        padding: 1rem 0;
+        .inner {
+            .pic {
+                width: 100%;
+                height: auto;
+            }
+            .texts {
+                margin-top: 1rem;
+            }
+        }
+    }
+    .list-block {
+        .inner {
+            padding-top: 1rem;
+            .list {
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/application/index.vue b/src/pages/application/index.vue
index fba0f6b..f27161a 100644
--- a/src/pages/application/index.vue
+++ b/src/pages/application/index.vue
@@ -1,39 +1,64 @@
 <template>
-  <div class="wrap" v-if="modules.length>=1">
-    <el-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'">
+  <div class="wrap"
+       v-if="modules.length>=1">
+    <el-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">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
       </template>
     </el-carousel>
-    
+
     <div class="block history gray">
       <div class="inner">
-        <h2 class="wow fadeInLeft" style="margin-left: 57px">{{ modules[1].form.title }}</h2>
-        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
+        <h2 class="wow fadeInLeft"
+            style="margin-left: 57px">{{ modules[1].form.title }}</h2>
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
           <div class="left">
             <h2>{{ modules[1].form.subTitle }}</h2>
             <!-- <div class="line"></div> -->
             <div class="des">{{ modules[1].form.des }}</div>
-            <img :class="{'arrow': isLink(modules[1].form.link.linkName)}" src="@/assets/images/arrow.png" alt="" @click="openLink(modules[1].form)">
+            <img :class="{'arrow': isLink(modules[1].form.link.linkName)}"
+                 src="@/assets/images/arrow.png"
+                 alt=""
+                 @click="openLink(modules[1].form)">
           </div>
-          <img class="bg" width="562" height="506" :src="modules[1].form.pic" alt="">
+          <img class="bg"
+               width="562"
+               height="506"
+               :src="modules[1].form.pic"
+               alt="">
         </div>
       </div>
     </div>
-    
+
     <div class="block">
       <div class="inner app-inner">
         <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[2].form.des }}</p>
         <ul class="app">
-          <li v-for="(item, i) in modules[3].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
-            <img class="bg" :src="require('@/assets/images/application/app' + (i + 1) + '.png')" alt="">
-            <img class="icon" :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')" alt="">
+          <li v-for="(item, i) in modules[3].list"
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img class="bg"
+                 :src="require('@/assets/images/application/app' + (i + 1) + '.png')"
+                 alt="">
+            <img class="icon"
+                 :src="require('@/assets/images/application/app' + (i + 1) + '-1.png')"
+                 alt="">
             <p class="text">{{ item.title }}</p>
           </li>
         </ul>
@@ -43,10 +68,17 @@
     <div class="block gray">
       <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>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
         <ul class="group">
-          <li v-for="(item, i) in modules[5].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+          <li v-for="(item, i) in modules[5].list"
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="text">{{ item.title }}</p>
           </li>
         </ul>
@@ -56,19 +88,29 @@
     <div class="block news-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>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
         <ul class="news">
-          <li v-for="(item, i) in articles" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" @click="toArtice(item, modules[7].form)">
-            <img :src="item.titleImg" alt="">
+          <li v-for="(item, i) in articles"
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              @click="toArtice(item, modules[7].form)">
+            <img :src="item.titleImg"
+                 alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
-              <div class="des" v-html="item.mainBody"></div>
+              <div class="des"
+                   v-html="item.mainBody"></div>
               <span class="meta">{{ item.releaseTime }}</span>
             </div>
           </li>
         </ul>
-        <div class="all-link" @click="toAll(modules[7].form)">
-          <span>{{$t('column.all')}} <img class="icon" src="@/assets/images/arrow.png" alt=""></span>
+        <div class="all-link"
+             @click="toAll(modules[7].form)">
+          <span>{{$t('column.all')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
         </div>
       </div>
     </div>
@@ -82,17 +124,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       articles: []
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -102,7 +144,7 @@ export default {
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
-          
+
           // 获取文章列表
           const { column, site, articleNum } = json[7].form
           if (column.length) {
@@ -111,7 +153,7 @@ export default {
             }).catch(err => {})
           }
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -119,820 +161,820 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 
-.wrap{
-  /deep/ .el-carousel {
-    height: 21.6rem;
-    .el-carousel__container{
-      height: 21.6rem;
-    }
-    img{
-      height: 21.6rem;
+.wrap {
+    /deep/ .el-carousel {
+        height: 21.6rem;
+        .el-carousel__container {
+            height: 21.6rem;
+        }
+        img {
+            height: 21.6rem;
+        }
     }
-  }
 }
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.15rem 0;
-  .inner {
-    .b-title  {
-      font-size: 2.25rem;
-      margin-bottom: 2.25rem;
+    .banner-name {
+        font-size: 2.16rem;
     }
-    .intro  {
-      margin-bottom: 2.25rem;
+}
+.block {
+    padding: 3.15rem 0;
+    .inner {
+        .b-title {
+            font-size: 2.25rem;
+            margin-bottom: 2.25rem;
+        }
+        .intro {
+            margin-bottom: 2.25rem;
+        }
     }
-  }
 }
 .history {
-  h2 {
-    font-size: 1.35rem;
-    color: #333;
-  }
-  .texts {
-    display: flex;
-    justify-content: space-between;
-    padding: 2.7rem 2.56rem 2.7rem;
-    margin-top: 20px;
-    background-color: #fff;
-    border-radius: 100px 0px 0px 0px;
-    transition: .3s;
-    position: relative;
-    &:hover {
-      transform: scale(1.05);
+    h2 {
+        font-size: 1.35rem;
+        color: #333;
+    }
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 2.7rem 2.56rem 2.7rem;
+        margin-top: 20px;
+        background-color: #fff;
+        border-radius: 100px 0px 0px 0px;
+        transition: 0.3s;
+        position: relative;
+        &:hover {
+            transform: scale(1.05);
+        }
+        // .line {
+        //   padding: 2.7rem 0;
+        // }
+        .des {
+            margin: 2.7rem 0;
+        }
+    }
+    .left {
+        width: 50%;
     }
-    // .line {
-    //   padding: 2.7rem 0;
-    // }
     .des {
-      margin:  2.7rem 0;
+        margin: 20px 0;
+        font-size: 1.2rem;
+        color: #181818;
+        line-height: 31px;
+    }
+    .bg {
+        width: 32.88rem;
+        height: auto;
+        position: absolute;
+        right: -1rem;
+        bottom: 2.9rem;
     }
-  }
-  .left {
-    width: 50%;
-  }
-  .des {
-    margin: 20px 0;
-    font-size: 1.2rem;
-    color: #181818;
-    line-height: 31px;
-  }
-  .bg {
-    width: 32.88rem;
-    height: auto;
-    position: absolute;
-    right: -1rem;
-    bottom: 2.9rem;
-  }
 }
 .app-inner {
-  width: 1558px;
+    width: 1558px;
 }
 .app {
-  display: flex;
-  flex-wrap: wrap;
-  li {
-    position: relative;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    width: 368px;
-    height: 252px;
-    margin: 0 14px 14px 0;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-      .icon {
-        transform: rotateY(180deg);
-      }
-    }
-    &:first-child {
-      width: 750px;
-    }
-    &:nth-child(3), &:nth-child(7), &:nth-child(10) {
-      margin-right: 0;
-    }
-    &:nth-child(9) {
-      width: 563px;
-    }
-    &:nth-child(10) {
-      width: 555px;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        width: 368px;
+        height: 252px;
+        margin: 0 14px 14px 0;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+            .icon {
+                transform: rotateY(180deg);
+            }
+        }
+        &:first-child {
+            width: 750px;
+        }
+        &:nth-child(3),
+        &:nth-child(7),
+        &:nth-child(10) {
+            margin-right: 0;
+        }
+        &:nth-child(9) {
+            width: 563px;
+        }
+        &:nth-child(10) {
+            width: 555px;
+        }
+    }
+    .bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+    .icon {
+        position: relative;
+        transition: 0.3s;
+    }
+    .text {
+        position: relative;
+        margin-top: 20px;
+        font-size: 2rem;
+        color: #fff;
     }
-  }
-  .bg {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-  .icon {
-    position: relative;
-    transition: .3s;
-  }
-  .text {
-    position: relative;
-    margin-top: 20px;
-    font-size: 2rem;
-    color: #fff;
-  }
 }
 .group {
-  display: flex;
-  flex-wrap: wrap;
-  li {
-    position: relative;
-    width: calc((100% - 56px) / 3);
-    margin: 0 28px 39px 0;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-      .text {
-        color: #fff;
-        background-color: #394f6d;
-      }
+    display: flex;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        width: calc((100% - 56px) / 3);
+        margin: 0 28px 39px 0;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+            .text {
+                color: #fff;
+                background-color: #394f6d;
+            }
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
     }
-    &:nth-child(3n) {
-      margin-right: 0;
+    img {
+        width: 100%;
+        height: auto;
+    }
+    .text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 6.43rem;
+        font-size: 1.44rem;
+        font-family: SFProDisplay-Bold, SFProDisplay;
+        font-weight: bold;
+        line-height: 6.43rem;
+        text-align: center;
+        color: #272727;
+        background-color: #f5f5f5;
+        transition: 0.3s;
     }
-  }
-  img {
-    width: 100%;
-    height: auto;
-  }
-  .text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 6.43rem;
-    font-size: 1.44rem;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    font-weight: bold;
-    line-height:  6.43rem;
-    text-align: center;
-    color: #272727;
-    background-color: #F5F5F5;
-    transition: .3s;
-  }
 }
 .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 {
-  position: relative;
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  li {
-    display: inline-flex;
-    width: calc((100% - 28px) / 2);
-    padding: 1.53rem;
-    margin-bottom: 1.26rem;
-    background-color: #fff;
-    cursor: pointer;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    li {
+        display: inline-flex;
+        width: calc((100% - 28px) / 2);
+        padding: 1.53rem;
+        margin-bottom: 1.26rem;
+        background-color: #fff;
+        cursor: pointer;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+    }
+    img {
+        width: 10.66rem;
+        height: auto;
+    }
+    .texts {
+        margin-left: 34px;
+    }
+    h6 {
+        font-size: 1.1rem;
+        color: #0648a8;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        text-overflow: ellipsis;
+        overflow: hidden;
+    }
+    .des {
+        margin: 2px 0;
+        font-size: 0.9rem;
+        color: #333;
+        line-height: 22px;
+        -webkit-line-clamp: 2;
+    }
+    .meta {
+        font-size: 0.8rem;
+        color: #999;
     }
-  }
-  img {
-    width: 10.66rem;
-    height: auto;
-  }
-  .texts {
-    margin-left: 34px;
-  }
-  h6 {
-    font-size: 1.1rem;
-    color: #0648A8;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-  .des {
-    margin: 2px 0;
-    font-size: .9rem;
-    color: #333;
-    line-height: 22px;
-    -webkit-line-clamp: 2;
-  }
-  .meta {
-    font-size: .8rem;
-    color: #999;
-  }
 }
+
 @media (max-width: 1520px) {
-  .app-inner {
-    width: 1558px;
-  }
+    .app-inner {
+        width: 1558px;
+    }
 }
 
-
 @media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 15rem;
-    .el-carousel__container{
-      height: 15rem;
-    }
-    img{
-      height: 15rem;
-    }
-  }
-}
-.banner-item .banner-name {
-  font-size: 1.5rem;
-  bottom: 2.25rem;
-  left: 16.125rem
-}
- .block{ 
-  padding: 50px 0;
-  .inner{
-    width: 95%;
-    margin: 0 auto;
-    .texts{
-      flex-direction: column;
-      .left {
-        width: 100%;
-      }
-      .bg{
-        margin: 0;
-        width: 100%;
-        height: 20rem !important;
-      }
-    }
-  }
-  .app{
-    li {
-      width: 100%;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+            .el-carousel__container {
+                height: 15rem;
+            }
+            img {
+                height: 15rem;
+            }
+        }
     }
-  }
-  .intro {
-    margin-bottom: 30px;
-  }
-  .group{
-     flex-direction: column;
-     li {
-      width: 100%;
-      img {
-        height: 20rem;
-      }
-     }
-  }
-  .news{
-    flex-direction: column;
-    li {
-      width: 95%;
-      margin: 0 auto;
-      flex-direction: column;
-      img{
-        width: 100%;
-        height: 12rem;
-      }
-      .texts{
-        margin-left: 0;
-        margin-top: 20px;
-      }
+    .banner-item .banner-name {
+        font-size: 1.5rem;
+        bottom: 2.25rem;
+        left: 16.125rem;
+    }
+    .block {
+        padding: 50px 0;
+        .inner {
+            width: 95%;
+            margin: 0 auto;
+            .texts {
+                flex-direction: column;
+                .left {
+                    width: 100%;
+                }
+                .bg {
+                    margin: 0;
+                    width: 100%;
+                    height: 20rem !important;
+                }
+            }
+        }
+        .app {
+            li {
+                width: 100%;
+            }
+        }
+        .intro {
+            margin-bottom: 30px;
+        }
+        .group {
+            flex-direction: column;
+            li {
+                width: 100%;
+                img {
+                    height: 20rem;
+                }
+            }
+        }
+        .news {
+            flex-direction: column;
+            li {
+                width: 95%;
+                margin: 0 auto;
+                flex-direction: column;
+                img {
+                    width: 100%;
+                    height: 12rem;
+                }
+                .texts {
+                    margin-left: 0;
+                    margin-top: 20px;
+                }
+            }
+        }
     }
-  }
- }
 }
 @media (max-width: 1200px) {
- .block{ 
-  padding: 50px 0;
-  .inner{
-    width: 95%;
-    margin: 0 auto;
-    .texts{
-      flex-direction: column;
-      .left {
-        width: 100%;
-      }
-      .bg{
-        margin: 0;
-        width: 100%;
-        height: 450px;
-      }
-    }
-  }
-  .app{
-    li {
-      width: 100%;
-    }
-  }
-  .intro {
-    margin-bottom: 30px;
-  }
-  .group{
-     flex-direction: column;
-     li {
-      width: 100%;
-     }
-  }
-  .news{
-    flex-direction: column;
-    li {
-      width: 95%;
-      margin: 0 auto;
-      flex-direction: column;
-      img{
-        width: 100%;
-        height: 200px;
-      }
-      .texts{
-        margin-left: 0;
-        margin-top: 20px;
-      }
+    .block {
+        padding: 50px 0;
+        .inner {
+            width: 95%;
+            margin: 0 auto;
+            .texts {
+                flex-direction: column;
+                .left {
+                    width: 100%;
+                }
+                .bg {
+                    margin: 0;
+                    width: 100%;
+                    height: 450px;
+                }
+            }
+        }
+        .app {
+            li {
+                width: 100%;
+            }
+        }
+        .intro {
+            margin-bottom: 30px;
+        }
+        .group {
+            flex-direction: column;
+            li {
+                width: 100%;
+            }
+        }
+        .news {
+            flex-direction: column;
+            li {
+                width: 95%;
+                margin: 0 auto;
+                flex-direction: column;
+                img {
+                    width: 100%;
+                    height: 200px;
+                }
+                .texts {
+                    margin-left: 0;
+                    margin-top: 20px;
+                }
+            }
+        }
     }
-  }
- }
 }
 @media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .inner {
-      h2 {
-        margin-left: 1.5rem !important;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .texts {
-        padding: 5rem 1.25rem;
-        h2{
-          margin-left: 0 !important;
-        }
-        .bg {
-          height: auto !important;
-        }
-      }
-      .group{
-        li {
-          img {
-            height: auto;
-          }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            h2 {
+                margin-left: 1.5rem !important;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .texts {
+                padding: 5rem 1.25rem;
+                h2 {
+                    margin-left: 0 !important;
+                }
+                .bg {
+                    height: auto !important;
+                }
+            }
+            .group {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.25rem;
+                    img {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
         }
-      }
-      .news {
-         li {
-          padding: 1.25rem;
-          img{
-             height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-         }
-      }
     }
-  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .inner {
-      h2 {
-        margin-left: 1.5rem !important;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .texts {
-        padding: 5rem 1.25rem;
-        h2{
-          margin-left: 0 !important;
-        }
-        .bg {
-          height: auto !important;
-        }
-      }
-      .group{
-        li {
-          img {
-            height: auto;
-          }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            h2 {
+                margin-left: 1.5rem !important;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .texts {
+                padding: 5rem 1.25rem;
+                h2 {
+                    margin-left: 0 !important;
+                }
+                .bg {
+                    height: auto !important;
+                }
+            }
+            .group {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.25rem;
+                    img {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
         }
-      }
-      .news {
-         li {
-          padding: 1.25rem;
-          img{
-             height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-         }
-      }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .inner {
-      h2 {
-        margin-left: 1.5rem !important;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .texts {
-        padding: 5rem 1.25rem;
-        h2{
-          margin-left: 0 !important;
-        }
-        .bg {
-          height: auto !important;
-        }
-      }
-      .group{
-        li {
-          img {
-            height: auto;
-          }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            h2 {
+                margin-left: 1.5rem !important;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .texts {
+                padding: 5rem 1.25rem;
+                h2 {
+                    margin-left: 0 !important;
+                }
+                .bg {
+                    height: auto !important;
+                }
+            }
+            .group {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.25rem;
+                    img {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
         }
-      }
-      .news {
-         li {
-          padding: 1.25rem;
-          img{
-             height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-         }
-      }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .inner {
-      h2 {
-        margin-left: 1.5rem !important;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .texts {
-        padding: 5rem 1.25rem;
-        h2{
-          margin-left: 0 !important;
-        }
-        .bg {
-          height: auto !important;
-        }
-      }
-      .group{
-        li {
-          img {
-            height: auto;
-          }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            h2 {
+                margin-left: 1.5rem !important;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .texts {
+                padding: 5rem 1.25rem;
+                h2 {
+                    margin-left: 0 !important;
+                }
+                .bg {
+                    height: auto !important;
+                }
+            }
+            .group {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.25rem;
+                    img {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
         }
-      }
-      .news {
-         li {
-          padding: 1.25rem;
-          img{
-             height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-         }
-      }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .inner {
-      h2 {
-        margin-left: 1.5rem !important;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .texts {
-        padding: 5rem 1.25rem;
-        h2{
-          margin-left: 0 !important;
-        }
-        .bg {
-          height: auto !important;
-        }
-      }
-      .group{
-        li {
-          img {
-            height: auto;
-          }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            h2 {
+                margin-left: 1.5rem !important;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .texts {
+                padding: 5rem 1.25rem;
+                h2 {
+                    margin-left: 0 !important;
+                }
+                .bg {
+                    height: auto !important;
+                }
+            }
+            .group {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .news {
+                li {
+                    padding: 1.25rem;
+                    img {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
         }
-      }
-      .news {
-         li {
-          padding: 1.25rem;
-          img{
-             height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-         }
-      }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .inner {
-      h2 {
-        margin-left: 1.5rem !important;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .texts {
-        flex-direction: row;
-        padding: 3rem 1.25rem;
-        .left {
-          width: 50%;
-        }
-        h2{
-          margin-left: 0 !important;
-        }
-        .bg {
-          width: 50%;
-          margin: -3rem 0 0 0;
-          height: auto !important;
-        }
-      }
-      .group{
-        flex-direction: row;
-        li {
-          width: calc((100% - 56px) / 3);
-          img {
-            height: auto;
-          }
-          .text {
-            line-height: 1.5rem;
-          }
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
         }
-      }
-      .news {
-        flex-direction: row;
-         li {
-          width: calc((100% - 28px) / 2);
-          padding: 1.25rem;
-          img{
-             height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-         }
-      }
-      .app {
-        flex-direction: row;
-        li {
-          width: 45%;
-          &:nth-child(2n+1) {
-            margin-right: 1rem;
-          }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
         }
-      }
-    }
-  }
-}
-@media (min-width: 980px) and (max-width: 1200px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            h2 {
+                margin-left: 1.5rem !important;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .texts {
+                flex-direction: row;
+                padding: 3rem 1.25rem;
+                .left {
+                    width: 50%;
+                }
+                h2 {
+                    margin-left: 0 !important;
+                }
+                .bg {
+                    width: 50%;
+                    margin: -3rem 0 0 0;
+                    height: auto !important;
+                }
+            }
+            .group {
+                flex-direction: row;
+                li {
+                    width: calc((100% - 56px) / 3);
+                    img {
+                        height: auto;
+                    }
+                    .text {
+                        line-height: 1.5rem;
+                    }
+                }
+            }
+            .news {
+                flex-direction: row;
+                li {
+                    width: calc((100% - 28px) / 2);
+                    padding: 1.25rem;
+                    img {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+            .app {
+                flex-direction: row;
+                li {
+                    width: 45%;
+                    &:nth-child(2n + 1) {
+                        margin-right: 1rem;
+                    }
+                }
+            }
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .inner {
-      h2 {
-        margin-left: 1.5rem !important;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .texts {
-        flex-direction: row;
-        padding: 3rem 1.25rem;
-        .left {
-          width: 50%;
-        }
-        h2{
-          margin-left: 0 !important;
-        }
-        .bg {
-          width: 50%;
-          margin: -3rem 0 0 0;
-          height: auto !important;
-        }
-      }
-      .group{
-        flex-direction: row;
-        li {
-          width: calc((100% - 56px) / 3);
-          img {
-            height: auto;
-          }
-          .text {
-            line-height: 1.5rem;
-          }
+    .banner-item {
+        img {
+            height: 12rem !important;
         }
-      }
-      .news {
-        flex-direction: row;
-         li {
-          width: calc((100% - 28px) / 2);
-          padding: 1.25rem;
-          img{
-             height: auto;
-          }
-          .texts {
-            padding: 1.25rem;
-          }
-         }
-      }
-      .app {
-        flex-direction: row;
-        li {
-          width: 45%;
-          &:nth-child(2n+1) {
-            margin-right: 1rem;
-          }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            h2 {
+                margin-left: 1.5rem !important;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .texts {
+                flex-direction: row;
+                padding: 3rem 1.25rem;
+                .left {
+                    width: 50%;
+                }
+                h2 {
+                    margin-left: 0 !important;
+                }
+                .bg {
+                    width: 50%;
+                    margin: -3rem 0 0 0;
+                    height: auto !important;
+                }
+            }
+            .group {
+                flex-direction: row;
+                li {
+                    width: calc((100% - 56px) / 3);
+                    img {
+                        height: auto;
+                    }
+                    .text {
+                        line-height: 1.5rem;
+                    }
+                }
+            }
+            .news {
+                flex-direction: row;
+                li {
+                    width: calc((100% - 28px) / 2);
+                    padding: 1.25rem;
+                    img {
+                        height: auto;
+                    }
+                    .texts {
+                        padding: 1.25rem;
+                    }
+                }
+            }
+            .app {
+                flex-direction: row;
+                li {
+                    width: 45%;
+                    &:nth-child(2n + 1) {
+                        margin-right: 1rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
-
-
 </style>
\ No newline at end of file
diff --git a/src/pages/article/activity.vue b/src/pages/article/activity.vue
index 16ac024..768bceb 100644
--- a/src/pages/article/activity.vue
+++ b/src/pages/article/activity.vue
@@ -1,12 +1,17 @@
 <template>
   <div class="wrap">
+    <div v-if="form.bannerImg"
+         class="banner"
+         :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
+      {{ form.columnName }}
+    </div>
     <div class="content">
       <Breadcrumb ref="breadcrumb"
                   :data.sync="routes" />
       <div class="article">
         <div class="left">
           <h2>{{ form.title }}</h2>
-          <div class="meta">{{$t('column.time')}}：{{ form.activityStartTime + ' ~ ' + form.activityEndTime }}</div>
+          <div class="meta">{{$t('column.time')}}：{{ form.activityStartTime }}</div>
           <div v-if="form.offlineLocation"
                class="meta">{{$t('column.address')}}：{{ form.offlineLocation }}</div>
           <div v-if="form.onlineLocation"
@@ -102,7 +107,7 @@ export default {
       }).catch(err => { })
 
       // 浏览量+1
-      this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
+      this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(res => { }).catch(err => { })
     },
     // 获取banner 规则：当前文章有上传的，用上传的，没有上传的栏目有图片，读取上级栏目的（上级没有读上上级，以此类推）都没有的读取默认的
     getBanner (data) {
@@ -148,6 +153,7 @@ export default {
     font-size: 48px;
     color: #fff;
     background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
+    object-fit: cover;
 }
 .article {
     display: flex;
@@ -167,6 +173,10 @@ export default {
         color: #333;
     }
     /deep/.des {
+        a {
+            color: rgb(0, 0, 238);
+            word-wrap: break-word;
+        }
         img {
             max-width: 100%;
         }
@@ -202,15 +212,23 @@ export default {
         font-size: 18px;
     }
 }
+
 @media (max-width: 1420px) {
     .content {
         width: 98%;
     }
 }
-
 @media (max-width: 1200px) {
+    .article {
+        /deep/.des {
+            img {
+                max-width: 100%;
+                height: 15rem;
+            }
+        }
+    }
     .banner {
-        height: 15rem;
+        font-size: 1.5rem;
     }
     .article {
         flex-direction: column;
@@ -221,5 +239,15 @@ export default {
             }
         }
     }
+    .article {
+        .des {
+            img {
+                height: 15rem !important;
+            }
+        }
+    }
+    .right {
+        width: 100%;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/article/editor.css b/src/pages/article/editor.css
index 69ec20b..7228ffc 100644
--- a/src/pages/article/editor.css
+++ b/src/pages/article/editor.css
@@ -84,7 +84,9 @@
 }
 .tiny-wrap .people .pic {
     max-width: 400px;
-    margin-right: 50px;
+}
+.tiny-wrap .people .texts {
+    margin-left: 50px;
 }
 .tiny-wrap .people h6 {
     font-size: 24px;
@@ -114,3 +116,11 @@
     background: #1583ff;
     border-radius: 4px;
 }
+@media (max-width: 640px) {
+    .tiny-wrap .people {
+        flex-direction: column;
+    }
+    .tiny-wrap .people .texts {
+        margin-left: 0;
+    }
+}
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index 4d51777..f818ef5 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -1,7 +1,8 @@
 <template>
   <div v-show="loaded"
        class="wrap">
-    <div v-if="form.articleTemplate !== 23"
+    <!-- 人物详情不展示banner -->
+    <div v-if="form.articleTemplate !== 23 && !isPeople"
          class="banner"
          :style="{backgroundImage: form.bannerImg ? ('url(' + form.bannerImg + ')') : ''}">
       {{ form.columnName }}
@@ -19,6 +20,7 @@
           <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">
@@ -96,7 +98,6 @@ export default {
         if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
         if (cache.releaseTime) cache.releaseTime = cache.releaseTime.split(' ')[0]
         this.loaded = true
-        console.log("🚀 ~ file: index.vue:90 ~ getInfo ~ cache:", this.form, cache)
       } else {
         this.$post(`${this.api.findArticle}?id=${this.id}`).then(async ({ data }) => {
           // 设置面包屑
@@ -110,15 +111,15 @@ export default {
               }
             },
             {
-              name: data.title
+              name: data.columnName
             }
           ]
           // 文章被禁用了就直接返回
-          if (data.isDisable) {
+          if (data.isDisable || !data.isRelease) {
             this.$router.back()
           } else {
             const temId = data.articleTemplate
-            let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&path=${path || ''}`
+            let path = `?articleId=${this.id}&id=${id}&columnName=${columnName || ''}&siteId=${data.siteId}&path=${path || ''}`
             if (temId === 25 || temId === 26) { // 会议活动/期刊详情
               this.$router.replace((temId === 25 ? '/article/activity' : '/publish/show') + path)
             } else {
@@ -126,22 +127,32 @@ export default {
               if (temId == 72) this.isPeople = 1 // 人物详情（articleTemplate=72）要隐藏除了正文和摘要以外的所有字段
               data.releaseTime = data.releaseTime.split(' ')[0]
               this.form = data
+              // 手动修复tinymce缩进bug（p标签下包裹多个子元素，p标签上只有text-indent，没有font-size，导致缩进2em的情况下未能缩进两个字符）
+              this.$nextTick(() => {
+                document.querySelectorAll('#mainBody p').forEach(e => {
+                  try {
+                    if (e.children.length && e.style.textIndent) {
+                      e.style.fontSize = e.children[0].style.fontSize
+                    }
+                  } catch (e) { }
+                })
+              })
               this.columnId = data.columnId
               // 如果没上传banner
               if (!data.bannerImg) {
-                const columns = await this.$post(this.api.listWithTree, {
+                const columns = await this.$post(this.api.listWithTree, Util.rsa({
                   siteId: this.site,
                   columnName: '',
                   templateId: '',
                   typeId: '',
                   isSort: 1
-                })
+                }))
                 this.getBanner(columns.data)
                 this.form.bannerImg = this.gotBanner ? this.columnBanner || require('@/assets/images/article-banner.png') : ''
               }
 
               // 浏览量+1
-              this.$post(`${this.api.articlePreview}?contentId=${this.id}`).then(({ data }) => { }).catch(err => { })
+              this.$post(this.api.articlePreview, Util.rsa(this.id)).then(res => { }).catch(err => { })
               this.loaded = true
             }
           }
@@ -185,12 +196,15 @@ export default {
     }
 }
 .banner {
+    display: flex;
+    align-items: center;
     height: 21.6rem;
-    padding: 14.68rem 0 0 22.1875rem;
-    font-size: 2.16rem;
+    padding-left: 10%;
+    font-size: 2rem;
     font-weight: 600;
     color: #fff;
-    background: url(../../assets/images/intro-bg.png) 0 0/100% 100% no-repeat;
+    background: url(../../assets/images/intro-bg.png) center center no-repeat;
+    object-fit: cover;
 }
 .article {
     display: flex;
@@ -209,15 +223,36 @@ export default {
     }
     .brief {
         padding-bottom: 1.5rem;
-        margin-bottom: 1rem;
+        margin: 1rem 0;
         font-size: 1.2rem;
-        line-height: 1.33;
+        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;
+        }
         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 {
@@ -247,6 +282,7 @@ export default {
         }
     }
 }
+
 @media (max-width: 1420px) {
     .content {
         width: 98%;
@@ -257,7 +293,7 @@ export default {
         /deep/.des {
             img {
                 max-width: 100%;
-                height: 15rem;
+                max-height: 15rem;
             }
         }
     }
@@ -280,46 +316,8 @@ export default {
             }
         }
     }
-}
-
-@media (max-width: 480px) {
-    .wrap {
-        .banner {
-            padding: 8rem 0 0 10rem;
-            height: 17rem;
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        .banner {
-            padding: 12rem 0 0 10rem;
-            height: 20rem;
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        .banner {
-            padding: 14rem 0 0 10rem;
-            height: 22rem;
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        .banner {
-            padding: 16rem 0 0 10rem;
-            height: 26rem;
-        }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        .banner {
-            padding: 18rem 0 0 10rem;
-            height: 30rem;
-        }
+    .right {
+        width: 100%;
     }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
index 22007fe..9f64922 100644
--- a/src/pages/careers/index.vue
+++ b/src/pages/careers/index.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-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'">
+    <el-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">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -14,44 +19,68 @@
     <div class="block">
       <div class="inner">
         <ul class="card">
-          <li class="wow fadeInDown" data-wow-delay="0.1s">
-            <img class="pic" :src="modules[1].form.pic" alt="">
+          <!-- <li class="wow fadeInDown"
+              data-wow-delay="0.1s">
+            <img class="pic"
+                 :src="modules[1].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[1].form.title }}</h6>
               <p class="text">{{ modules[1].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+                   @click="openLink(modules[1].form)">
             </div>
-          </li>
-          <li class="wow fadeInDown" data-wow-delay="0.3s">
-            <img class="pic" :src="modules[2].form.pic" alt="">
+          </li> -->
+          <li class="wow fadeInDown"
+              data-wow-delay="0.3s">
+            <img class="pic"
+                 :src="modules[2].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[2].form.title }}</h6>
               <p class="text">{{ modules[2].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+                   @click="openLink(modules[2].form)">
             </div>
           </li>
-          <li class="wow fadeInDown" data-wow-delay="0.5s">
-            <img class="pic" :src="modules[3].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.5s">
+            <img class="pic"
+                 :src="modules[3].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[3].form.title }}</h6>
               <p class="text">{{ modules[3].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+                   @click="openLink(modules[3].form)">
             </div>
           </li>
-          <li class="wow fadeInDown" data-wow-delay="0.7s">
-            <img class="pic" :src="modules[4].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.7s">
+            <img class="pic"
+                 :src="modules[4].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[4].form.title }}</h6>
               <p class="text">{{ modules[4].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
+                   @click="openLink(modules[4].form)">
             </div>
           </li>
         </ul>
@@ -61,16 +90,26 @@
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
         <ul class="people">
           <template v-for="(item, i) in modules[6].list">
-            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
-              <img class="comma" src="@/assets/images/comma.png" alt="">
+            <li v-if="item.isEnable"
+                :key="i"
+                class="wow fadeInDown"
+                data-wow-delay="0.5s"
+                :class="{'cursor-pointer': isLink(item.link.linkName)}"
+                @click="openLink(item)">
+              <img class="comma"
+                   src="@/assets/images/comma.png"
+                   alt="">
               <div class="left">
                 <h6>{{ item.title }}</h6>
                 <div class="des">{{ item.des }}</div>
               </div>
-              <img class="pic" :src="item.pic" alt="">
+              <img class="pic"
+                   :src="item.pic"
+                   alt="">
             </li>
           </template>
         </ul>
@@ -79,14 +118,23 @@
 
     <ul class="shows">
       <template v-for="(item, i) in modules[7].list">
-        <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.3s">
+        <li v-if="item.isEnable"
+            :key="i"
+            class="wow fadeInDown"
+            data-wow-delay="0.3s">
           <div class="left">
             <h6>{{ item.title }}</h6>
             <div class="sub">{{ item.subTitle }}</div>
             <div class="des">{{ item.des }}</div>
-            <img src="@/assets/images/arrow-white.png" alt="" class="icon" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+            <img src="@/assets/images/arrow-white.png"
+                 alt=""
+                 class="icon"
+                 :class="{'arrow': isLink(item.link.linkName)}"
+                 @click="openLink(item)">
           </div>
-          <img class="pic" :src="item.pic" alt="">
+          <img class="pic"
+               :src="item.pic"
+               alt="">
         </li>
       </template>
     </ul>
@@ -100,17 +148,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -121,7 +169,7 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -129,697 +177,697 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
-.wrap{
-  /deep/ .el-carousel {
-    height: 21.6rem;
-    .el-carousel__container{
-      height: 21.6rem;
-    }
-    img{
-      height: 21.6rem;
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 21.6rem;
+        .el-carousel__container {
+            height: 21.6rem;
+        }
+        img {
+            height: 21.6rem;
+        }
     }
-  }
 }
 
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.15rem 0;
-  .inner {
-    .b-title  {
-      font-size: 2.25rem;
-      margin-bottom: 2.25rem;
+    .banner-name {
+        font-size: 2.16rem;
     }
-    .intro  {
-      margin-bottom: 6.9rem;
+}
+.block {
+    padding: 3.15rem 0;
+    .inner {
+        .b-title {
+            font-size: 2.25rem;
+            margin-bottom: 2.25rem;
+        }
+        .intro {
+            margin-bottom: 6.9rem;
+        }
     }
-   
-  }
 }
 .card {
-  display: flex;
-  justify-content: center;
-  li {
-    position: relative;
-    display: inline-flex;
+    display: flex;
     justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    flex: 1;
-    height: 23.67rem;
-    color: #fff;
-    &:hover {
-      .arrow {
-        opacity: 1;
-      }
-    }
-    .pic {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .texts {
-      position: relative;
-    }
-    h6 {
-      margin-bottom: 10px;
-      font-size: 1.57rem;
-    }
-    .text {
-      font-size: 1.08rem;
-      text-align: center;
-    }
-    .arrow {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 7.9rem;
-      text-align: center;
-      background: #36404A;
-      opacity: 0;
-      transition: .3s;
-      cursor: default;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    li {
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        flex: 1;
+        height: 23.67rem;
+        color: #fff;
+        &:hover {
+            .arrow {
+                opacity: 1;
+            }
+        }
+        .pic {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .texts {
+            position: relative;
+        }
+        h6 {
+            margin-bottom: 10px;
+            font-size: 1.57rem;
+        }
+        .text {
+            font-size: 1.08rem;
+            text-align: center;
+        }
+        .arrow {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 7.9rem;
+            text-align: center;
+            background: #36404a;
+            opacity: 0;
+            transition: 0.3s;
+            cursor: default;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     }
-  }
 }
 .people {
-  position: relative;
-  li {
     position: relative;
-    padding: 4.5rem 3.15rem 4.5rem 2.565rem;
-    margin-bottom: 100px;
-    background-color: #fff;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
-    &:nth-child(even) {
-      display: flex;
-      justify-content: flex-end;
-      .comma {
-        left: 70%;
-      }
-      .pic {
-        left: 0;
-        right: auto;
-      }
-    }
-  }
-  .comma {
-    position: absolute;
-    top: -22px;
-    left: 57px;
-  }
-  .left {
-    width: 50%;
-  }
-  h6 {
-    font-size: 1.4rem;
-    color: #333;
-  }
-  .des {
-    margin-top: 20px;
-    font-size: 1.2rem;
-    color: #666;
-    line-height: 32px;
-  }
-  .pic {
-    position: absolute;
-    top: -60px;
-    right: 43px;
-    width: 40%;
-    height: auto;
-  }
-}
-.shows {
-  position: relative;
-  li {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: auto;
-    margin-bottom: 40px;
-    color: #fff;
-    &:hover .left {
-      h6, .sub, .des, .icon {
-        transform: translateY(20px);
-      }
-    }
-    &:nth-child(even) {
-      flex-direction: row-reverse;
-    }
-    &:nth-child(2) {
-      .left {
-        background-color: rgba(47, 79, 23, .65);
-      }
-    }
-    &:nth-child(3) {
-      .left {
-        width: 43%;
-        background-color: rgba(91, 58, 35, .65);
-      }
-    }
-  }
-  .left {
-    position: relative;
-    z-index: 1;
-    width: 43.333%;
-    height: 100%;
-    padding: 138px 30px 130px 103px;
-    background-color: rgba(54, 54, 54, .65);
-  }
-  .pic {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-  }
-  h6 {
-    font-size: 2.07rem;
-    transition: .3s;
-  }
-  .sub {
-    margin: 20px 0 20px 0;
-    font-size: 1.35rem;
-    transition: .3s;
-  }
-  .des {
-    margin-bottom: 40px;
-    font-size: 1.08rem;
-    transition: .3s;
-  }
-  .icon {
-    transition: .3s;
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 15rem;
-    .el-carousel__container{
-      height: 15rem;
+    li {
+        position: relative;
+        padding: 4.5rem 3.15rem 4.5rem 2.565rem;
+        margin-bottom: 100px;
+        background-color: #fff;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+        &:nth-child(even) {
+            display: flex;
+            justify-content: flex-end;
+            .comma {
+                left: 70%;
+            }
+            .pic {
+                left: 0;
+                right: auto;
+            }
+        }
+    }
+    .comma {
+        position: absolute;
+        top: -22px;
+        left: 57px;
+    }
+    .left {
+        width: 50%;
     }
-    img{
-      height: 15rem;
+    h6 {
+        font-size: 1.4rem;
+        color: #333;
     }
-  }
-}
- .block{ 
-  padding: 50px 0;
-  .inner {
-    width: 95%;margin: 0 auto;
-    .card{
-      flex-direction: column;
-      li{
+    .des {
         margin-top: 20px;
-        width: 100%;
-        height: 27rem;
-      }
+        font-size: 1.2rem;
+        color: #666;
+        line-height: 32px;
     }
-    .people{
-      li {
-        padding: 200px 20px 30px;
-        .left {
-          width: 100%;
-        }
-        .pic{
-          top: -60px;
-          right: 13px;
-          width: 60%;
-          height: 12.5rem;
-        }
-      }
+    .pic {
+        position: absolute;
+        top: -60px;
+        right: 43px;
+        width: 40%;
+        height: auto;
     }
-    
-  }
- }
- .shows{
+}
+.shows {
+    position: relative;
     li {
-      flex-direction: column;
-      align-items:flex-start;
-      height: 16rem;
-      .left {
-        padding: 10px ;
-        h6{
-          font-size: 1.5rem ;
-        }
-        .sub {
-          margin: .5rem;
-          font-size: 1rem;
-        }
-        .des{
-          margin-bottom: 1.25rem;
-        }
-        .icon {
-          width: 3.5rem;
-          height: 3.5rem;
-        }
-      }
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: auto;
+        margin-bottom: 40px;
+        color: #fff;
+        &:hover .left {
+            h6,
+            .sub,
+            .des,
+            .icon {
+                transform: translateY(20px);
+            }
+        }
+        &:nth-child(even) {
+            flex-direction: row-reverse;
+        }
+        &:nth-child(2) {
+            .left {
+                background-color: rgba(47, 79, 23, 0.65);
+            }
+        }
+        &:nth-child(3) {
+            .left {
+                width: 43%;
+                background-color: rgba(91, 58, 35, 0.65);
+            }
+        }
+    }
+    .left {
+        position: relative;
+        z-index: 1;
+        width: 43.333%;
+        height: 100%;
+        padding: 138px 30px 130px 103px;
+        background-color: rgba(54, 54, 54, 0.65);
     }
-  }
-}
-@media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
+    .pic {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
     }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
+    h6 {
+        font-size: 2.07rem;
+        transition: 0.3s;
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .sub {
+        margin: 20px 0 20px 0;
+        font-size: 1.35rem;
+        transition: 0.3s;
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .des {
+        margin-bottom: 40px;
+        font-size: 1.08rem;
+        transition: 0.3s;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .icon {
+        transition: 0.3s;
     }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
+            .el-carousel__container {
+                height: 15rem;
+            }
+            img {
+                height: 15rem;
+            }
+        }
+    }
+    .block {
+        padding: 50px 0;
+        .inner {
+            width: 95%;
+            margin: 0 auto;
+            .card {
+                flex-direction: column;
+                li {
+                    margin-top: 20px;
+                    width: 100%;
+                    height: 27rem;
+                }
+            }
+            .people {
+                li {
+                    padding: 200px 20px 30px;
+                    .left {
+                        width: 100%;
+                    }
+                    .pic {
+                        top: -60px;
+                        right: 13px;
+                        width: 60%;
+                        height: 12.5rem;
+                    }
+                }
+            }
+        }
+    }
+    .shows {
         li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
+            flex-direction: column;
+            align-items: flex-start;
+            height: 16rem;
+            .left {
+                padding: 10px;
+                h6 {
+                    font-size: 1.5rem;
+                }
+                .sub {
+                    margin: 0.5rem;
+                    font-size: 1rem;
+                }
+                .des {
+                    margin-bottom: 1.25rem;
+                }
+                .icon {
+                    width: 3.5rem;
+                    height: 3.5rem;
+                }
+            }
+        }
+    }
+}
+@media (max-width: 320px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .card {
+                li {
+                    flex: none;
+                    height: 25rem;
+                    .pic {
+                        height: 25rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    padding: 10rem 1.25rem 1.5rem;
+                    .pic {
+                        top: -40px;
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .shows {
         li {
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40px;
             height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        h6 {
-          font-size: 1rem;
-        }
-        .sub {
-          font-size: .9rem;
-        }
-        .des {
-          font-size: .88rem;
-          margin-bottom: .5rem;
+            .left {
+                h6 {
+                    font-size: 1rem;
+                }
+                .sub {
+                    font-size: 0.9rem;
+                }
+                .des {
+                    font-size: 0.88rem;
+                    margin-bottom: 0.5rem;
+                }
+                .icon {
+                    width: 2rem;
+                    height: 2rem;
+                }
+            }
         }
-        .icon {
-          width: 2rem;height: 2rem;
-        }
-      }
     }
-  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .card {
+                li {
+                    flex: none;
+                    height: 25rem;
+                    .pic {
+                        height: 25rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    padding: 10rem 1.25rem 1.5rem;
+                    .pic {
+                        top: -40px;
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .shows {
         li {
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40px;
             height: auto;
-          }
+            .left {
+                h6 {
+                    font-size: 1rem;
+                }
+                .sub {
+                    font-size: 0.9rem;
+                }
+                .des {
+                    font-size: 0.88rem;
+                    margin-bottom: 0.5rem;
+                }
+                .icon {
+                    width: 2rem;
+                    height: 2rem;
+                }
+            }
         }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        h6 {
-          font-size: 1rem;
-        }
-        .sub {
-          font-size: .9rem;
-        }
-        .des {
-          font-size: .88rem;
-          margin-bottom: .5rem;
-        }
-        .icon {
-          width: 2rem;height: 2rem;
-        }
-      }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .card {
+                li {
+                    flex: none;
+                    height: 25rem;
+                    .pic {
+                        height: 25rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    padding: 10rem 1.25rem 1.5rem;
+                    .pic {
+                        top: -40px;
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .shows {
         li {
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40px;
             height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        h6 {
-          font-size: 1rem;
-        }
-        .sub {
-          font-size: .9rem;
+            .left {
+                h6 {
+                    font-size: 1rem;
+                }
+                .sub {
+                    font-size: 0.9rem;
+                }
+                .des {
+                    font-size: 0.88rem;
+                    margin-bottom: 0.5rem;
+                }
+                .icon {
+                    width: 2rem;
+                    height: 2rem;
+                }
+            }
         }
-        .des {
-          font-size: .88rem;
-          margin-bottom: .5rem;
-        }
-        .icon {
-          width: 2rem;height: 2rem;
-        }
-      }
     }
-  }
 }
-@media (min-width: 480px) and (max-width: 640px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .card {
+                li {
+                    flex: none;
+                    height: 25rem;
+                    .pic {
+                        height: 25rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    margin-bottom: 15rem;
+                    padding: 10rem 1.25rem 1.5rem;
+                    .pic {
+                        top: -40%;
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .shows {
         li {
-          margin-bottom: 15rem;
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40%;
             height: auto;
-          }
+            .left {
+                padding: 2rem 2rem;
+            }
         }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        padding: 2rem 2rem;
-      }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .card {
+                li {
+                    flex: none;
+                    height: 25rem;
+                    .pic {
+                        height: 25rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    padding: 10rem 1.25rem 1.5rem;
+                    margin-bottom: 15rem;
+                    .pic {
+                        top: -60%;
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .shows {
         li {
-          padding: 10rem 1.25rem 1.5rem;
-          margin-bottom: 15rem;
-          .pic {
-            top: -60%;
             height: auto;
-          }
+            .left {
+                padding: 3rem 2rem;
+            }
         }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        padding: 3rem 2rem;
-      }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .card {
+                li {
+                    flex: none;
+                    height: 25rem;
+                    .pic {
+                        height: 25rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    margin-bottom: 20rem;
+                    padding: 10rem 1.25rem 1.5rem;
+
+                    .pic {
+                        top: -85%;
+                        height: auto;
+                    }
+                }
+            }
+        }
     }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
+    .shows {
         li {
-          margin-bottom: 20rem;
-          padding: 10rem 1.25rem 1.5rem;
-       
-          .pic {
-            top: -85%;
             height: auto;
-          }
+            .left {
+                padding: 4rem 2rem;
+            }
         }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        padding: 4rem 2rem;
-      }
     }
-  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .card {
+                li {
+                    flex: none;
+                    height: 25rem;
+                    .pic {
+                        height: 25rem;
+                    }
+                }
+            }
+            .people {
+                li {
+                    margin-bottom: 30rem;
+                    padding: 10rem 1.25rem 1.5rem;
+                    .pic {
+                        top: -115%;
+                        height: auto;
+                    }
+                }
+            }
+        }
+    }
+    .shows {
         li {
-          margin-bottom: 30rem;
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -115%;
             height: auto;
-          }
+            .left {
+                padding: 4rem 2rem;
+            }
         }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        padding: 4rem 2rem;
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index 663b1e9..5bc0ef4 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -126,7 +126,8 @@
                      :props="defaultProps"
                      node-key="id"
                      icon-class="el-icon-arrow-down"
-                     @node-click="(item) => columnClick(item, 1)">
+                     @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;">
@@ -134,273 +135,336 @@
               </span>
             </el-tree>
 
-            <template v-if="articles.length">
-              <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)">
-                      <template v-if="info.listStyleId === 55">
-                        <div class="releaseTime">
-                          <p class="d">{{ item.date }}</p>
-                          <p class="m">{{ item.month }}</p>
-                        </div>
-                        <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';" />
-                        <div class="texts">
-                          <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                             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>
-                          </template>
-                          <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>
-                            <div v-if="item.activityStartTime"
-                                 class="meta m-b-10">
-                              <img class="icon"
-                                   src="@/assets/images/time.png"
-                                   alt="" />
-                              {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                            </div>
-                            <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>
-                          </template>
-                          <el-button type="primary"
-                                     class="readDetailBtn">{{ $t('column.readDetail') }}</el-button>
-                        </div>
-
-                      </template>
+            <template v-if="articles.length && !loading">
+              <!-- 列表样式选的是列表详情，则直接显示最新一篇文章的详情 -->
+              <div v-if="info.listStyleId === 73"
+                   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>
+                  <ul class="files">
+                    <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>
                     </li>
                   </ul>
-                  <div v-if="articles.length"
-                       class="pagination">
-                    <el-pagination background
-                                   @current-change="currentChange"
-                                   :current-page="page"
-                                   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)">
-                      <template v-if="info.listStyleId === 55">
-                        <div class="releaseTime">
-                          <p class="d">{{ item.date }}</p>
-                          <p class="m">{{ item.month }}</p>
-                        </div>
-                        <div class="news-title">{{ item.title }}</div>
-                      </template>
-                      <template v-else>
-                        <div class="texts leftBox">
-                          <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>
-                          <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
-                            <span class="meta">{{ item.releaseTime }}
-                              <template v-if="item.labelName != ''">
-                                | {{ item.labelName }}
-                              </template>
-                            </span>
-                          </template>
-                          <span v-if="item.listStyleId === 10 "
-                                class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+
+              </div>
+              <template v-else>
+                <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)">
+                        <template v-if="info.listStyleId === 55">
+                          <div class="releaseTime">
+                            <p class="d">{{ item.date }}</p>
+                            <p class="m">{{ item.month }}</p>
+                          </div>
+                          <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';" />
+                          <div class="texts">
+                            <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
+                               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>
+                            </template>
+                            <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>
-                            <div v-if="item.activityStartTime"
-                                 class="meta m-b-10">
-                              <img class="icon"
-                                   src="@/assets/images/time.png"
-                                   alt="" />
-                              {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                            </div>
-                            <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>
-                          </template>
-                        </div>
-                        <img class="pic"
-                             :src="item.titleImg"
-                             alt=""
-                             onerror="javascript:this.src='./images/1.png';" />
-                      </template>
-                    </li>
-                  </ul>
-                  <div v-if="articles.length"
-                       class="pagination">
-                    <el-pagination background
-                                   @current-change="currentChange"
-                                   :current-page="page"
-                                   layout="total, prev, pager, next"
-                                   :total="total"></el-pagination>
+                            <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>
+                              <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>
+                              <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>
+                          </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>
                   </div>
-                </div>
-              </template>
-              <template v-else>
-                <div class="article-wrap">
-                  <ul class="articles">
-                    <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>
-                          <p class="m">{{ item.month }}</p>
-                        </div>
-                        <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';" />
-                        <div class="texts">
-                          <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
-                             class="type">
-                            {{ item.classificationName }}
-                          </p>
-                          <h6 class="titleDes">{{ 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>
-                          </template>
-                          <span v-if="item.listStyleId === 10 "
-                                class="meta">{{ item.releaseTime }} {{ item.labelName && ' | ' +
+                </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)">
+                        <template v-if="info.listStyleId === 55">
+                          <div class="releaseTime">
+                            <p class="d">{{ item.date }}</p>
+                            <p class="m">{{ item.month }}</p>
+                          </div>
+                          <div class="news-title">{{ item.title }}</div>
+                        </template>
+                        <template v-else>
+                          <div class="texts leftBox">
+                            <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>
+                            <template v-if="item.listStyleId === 11 || item.listStyleId == 12">
+                              <span class="meta">{{ item.releaseTime }}
+                                <template v-if="item.labelName != ''">
+                                  | {{ item.labelName }}
+                                </template>
+                              </span>
+                            </template>
+                            <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>
-                            <div v-if="item.activityStartTime"
-                                 class="meta m-b-10">
-                              <img class="icon"
-                                   src="@/assets/images/time.png"
-                                   alt="" />
-                              {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
-                            </div>
-                            <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>
+                            <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>
+                              <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>
+                              <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';" />
+                        </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>
+                  </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)">
+                        <template v-if="info.listStyleId === 55">
+                          <div class="releaseTime">
+                            <p class="d">{{ item.date }}</p>
+                            <p class="m">{{ item.month }}</p>
+                          </div>
+                          <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';" />
+
+                          <template v-else-if="item.fileList">
+                            <!-- <el-image class="media-pic"
+                                      :style="{backgroundImage: 'url(https://huorantech.com/iasf/sysFiles/preview/1706961813193707521)'}"
+                                      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 标签。
+                            </video>
+                            <el-image v-else
+                                      class="media-pic"
+                                      :src="item.fileList[0].filePath"
+                                      :preview-src-list="[item.fileList[0].filePath]">
+                            </el-image>
                           </template>
-                          <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="articles.length"
-                       class="pagination">
-                    <el-pagination background
-                                   @current-change="currentChange"
-                                   :current-page="page"
-                                   layout="total, prev, pager, next"
-                                   :total="total"></el-pagination>
+                          <div class="texts">
+                            <p v-if="(item.listStyleId === 10 || item.listStyleId === 15) && item.classificationName"
+                               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">
+                              <span class="meta">{{ item.releaseTime }}</span>
+                              <div class="des"
+                                   v-html="item.mainBody"></div>
+                            </template>
+                            <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>
+                              <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>
+                              <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>
+                          </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>
                   </div>
-                </div>
+                </template>
               </template>
             </template>
             <div v-else
                  class="none">
               <img src="@/assets/images/none.png"
                    alt="">
-              <p class="text">暂无更多信息，敬请期待。</p>
+              <p class="text">{{ $t('column.comming') }}</p>
             </div>
           </div>
         </div>
-        <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)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-
-          <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)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-        </div>
+        <!-- <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74"> -->
+        <template v-if="info.listStyleId !== 73 && info.listStyleId !== 74">
+          <!-- 选择了“列表样式”，不用显示右侧部分 -->
+          <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)">
+                <p class="text">{{ item.title }}</p>
+                <span class="date">{{ item.releaseTime }}</span>
+              </li>
+            </ul>
+
+            <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)">
+                <p class="text">{{ item.title }}</p>
+                <span class="date">{{ item.releaseTime }}</span>
+              </li>
+            </ul>
+          </div>
+        </template>
+        <div v-else
+             class="right"></div>
       </div>
     </div>
   </div>
@@ -415,8 +479,10 @@ export default {
   mixins: [mixins],
   data () {
     return {
+      Util,
       loaded: false,
       fromColumn: this.$route.query.column,
+      isIphone: false,
       columnId: '',
       info: {},
       columnBanner: '',
@@ -435,7 +501,7 @@ export default {
       sameStyle: 1,
       allColumnId: [],
       showNav: false,
-      showNavIds: [10, 11, 12, 16, 55, 68], // 显示侧导航的模板id
+      showNavIds: [10, 11, 12, 16, 55, 68, 73, 74], // 显示侧导航的模板id
       isFilter: false,
       page: 1,
       pageSize: 10,
@@ -448,7 +514,9 @@ export default {
       news: [],
       hots: [],
       deepestId: '',
-      getAllId: null
+      getAllId: null,
+      article: {},
+      loading: false
     };
   },
   components: {
@@ -468,6 +536,8 @@ export default {
     }
   },
   mounted () {
+    const u = navigator.userAgent;
+    this.isIphone = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
     this.convokeTypes = [
       {
         id: null,
@@ -483,6 +553,7 @@ export default {
       }
     ];
     this.init();
+
   },
   methods: {
     init () {
@@ -493,16 +564,21 @@ export default {
     },
     // 获取栏目详情
     getInfo () {
+      this.loading = true
+      this.loaded = false
       this.id &&
         this.$post(`${this.api.findColumn}?id=${this.id}`)
           .then(({ data }) => {
             this.columnClick(data);
-            if (data.typeId !== 3) this.loaded = true; // 非长页，才展示页面
-            this.info = data;
-            this.showNav = this.showNavIds.includes(data.listStyleId);
-            this.handlePublication();
-            this.getLeftColumn();
-            this.getClassification();
+            if (data.typeId !== 3 && !data.menuVisible) {
+              this.loaded = true; // 非长页，才展示页面
+            }
+            this.info = data
+            this.pageSize = data.pageSize || 10
+            this.showNav = this.showNavIds.includes(data.listStyleId)
+            this.handlePublication()
+            this.getLeftColumn()
+            this.getClassification()
           })
           .catch((res) => { });
     },
@@ -592,31 +668,31 @@ export default {
     },
     // 左边栏目
     getLeftColumn () {
-      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`)
-        .then(({ data }) => {
-          const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
-          const { typeId } = this.info;
-          this.sameStyle = 1;
-          this.allColumnId = [];
-          this.deepestId = '';
-          data.length && this.handleColumn(data);
-          let id = this.sameStyle && typeId === 1 ? this.allColumnId : [+this.$route.query.id];
-          if (typeId === 4 && !fromColumn) {
-            id = [this.deepestId];
-          }
-          this.getAllId = id
-          this.getArticle(id);
-          this.columns = data;
-          // 如果没上传banner
-          if (!this.info.columnBanner) {
-            this.getBanner(data);
-            this.info.columnBanner = this.columnBanner || require('@/assets/images/column-banner.png');
-          }
-          this.$nextTick(() => {
-            const el = this.$refs.leftColumn;
-            el && el.setCurrentKey(this.id);
-          });
-        })
+      this.getAllId = []
+      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
+        const fromColumn = this.$route.query.column; // 有column标识的，说明是通过点击左侧导航跳转过来的，这种情况只查询该栏目下的文章
+        const { typeId } = this.info;
+        this.sameStyle = 1;
+        this.allColumnId = [];
+        this.deepestId = '';
+        data.length && this.handleColumn(data);
+        let id = this.sameStyle && typeId === 1 ? this.allColumnId : [+this.$route.query.id];
+        if (typeId === 4 && !fromColumn) {
+          id = [this.deepestId];
+        }
+        this.getAllId = id
+        this.getArticle(id);
+        this.columns = data;
+        // 如果没上传banner
+        if (!this.info.columnBanner) {
+          this.getBanner(data);
+          this.info.columnBanner = this.columnBanner || require('@/assets/images/column-banner.png');
+        }
+        this.$nextTick(() => {
+          const el = this.$refs.leftColumn;
+          el && el.setCurrentKey(this.id);
+        });
+      })
         .catch((err) => { });
     },
     // 右边资讯
@@ -658,6 +734,7 @@ export default {
     },
     // 点击栏目回调
     columnClick (to, left) {
+      this.page = 1
       const { typeId } = to;
       // 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应
       if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
@@ -724,7 +801,7 @@ export default {
         siteId: this.site,
         columnIds,
         pageNum: this.page,
-        pageSize: this.info.pageSize || 10,
+        pageSize: this.pageSize,
         labelName,
         ...this.form
       })
@@ -740,8 +817,13 @@ export default {
           })
           this.articles = articles
           this.total = +data.total;
-          // 如果栏目那勾选了“只有一篇文章时，以详情方式展示”，并且只有一篇文章，则跳转到详情页
+          this.loading = false
           // this.total == 1 && this.info.showWithDetails && this.$router.push(`/article?articleId=${this.articles[0].id}&id=${this.articles[0].columnId}`)
+          if (this.total) {
+            this.$post(`${this.api.findArticle}?id=${articles[0].id}`).then(async ({ data }) => {
+              this.article = data
+            }).catch(err => { })
+          }
         })
         .catch((res) => { });
     },
@@ -771,10 +853,14 @@ export default {
       if (this.isFilter) {
         this.getIds(this.columns, id);
       } else if (this.columns.length) {
-        id = [this.$refs.leftColumn.getCurrentKey()];
+        id = this.getAllId.length ? this.getAllId : [this.$refs.leftColumn.getCurrentKey()];
       }
       this.getArticle(id);
-    }
+    },
+    // 下载附件
+    download (e) {
+      Util.downloadFile(e.fileName, e.filePath)
+    },
   }
 };
 </script>
@@ -786,11 +872,12 @@ export default {
     color: #fff;
     img {
         height: 24rem;
+        object-fit: cover;
     }
     .texts {
         position: absolute;
-        top: 180px;
-        left: 213px;
+        top: 160px;
+        left: 267px;
     }
 
     .text {
@@ -820,12 +907,12 @@ export default {
 
 .article {
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
+    width: 1200px;
     margin: 0 auto;
 
     .left {
-        width: 66%;
-        margin-right: 1.4rem;
+        width: 83%;
     }
 
     .article-wrap {
@@ -918,6 +1005,9 @@ export default {
     }
 
     /deep/.columns {
+        & + .detail {
+            padding-left: 10px;
+        }
         width: 22%;
         margin-right: 0.6rem;
         overflow: auto;
@@ -1071,6 +1161,43 @@ export default {
         .pic {
             width: 30%;
             height: auto;
+            object-fit: cover;
+        }
+    }
+    .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;
         }
     }
     .news-notice {
@@ -1105,8 +1232,8 @@ export default {
         padding: 15px;
     }
     .right {
-        width: 14%;
-        min-width: 15rem;
+        width: 17%;
+        padding-left: 20px;
         overflow: hidden;
     }
 
@@ -1122,7 +1249,6 @@ export default {
             margin-bottom: 5px;
             font-size: 0.98rem;
             cursor: pointer;
-            @include ellipsis;
 
             &:hover {
                 color: $main-color;
@@ -1147,13 +1273,6 @@ export default {
     }
 
     .article {
-        justify-content: center;
-
-        .left {
-            width: 1136px;
-            margin-right: 36px;
-        }
-
         .forms {
             padding: 30px 0;
         }
@@ -1203,6 +1322,65 @@ export default {
         background-color: $partyTheme !important;
     }
 }
+.detail {
+    flex: 1;
+    padding: 10px 15px;
+    background-color: #fff;
+    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;
+        }
+        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;
+        }
+        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;
@@ -1216,6 +1394,7 @@ export default {
         color: #333;
     }
 }
+
 @media (max-width: 1200px) {
     .banner {
         height: 15rem !important;
@@ -1229,7 +1408,7 @@ export default {
     }
     .article {
         flex-direction: column;
-
+        width: 90%;
         .columns {
             width: 40%;
         }
@@ -1262,7 +1441,7 @@ export default {
         }
 
         .articles {
-            li {
+            li:not(.news-notice) {
                 flex-direction: column;
                 align-items: flex-start;
                 padding: 1rem;
@@ -1273,11 +1452,18 @@ export default {
                 }
             }
             .readDetail {
+                align-items: flex-start;
                 .texts {
+                    width: 100%;
                     padding-left: 0;
                 }
             }
         }
+        .media {
+            li {
+                padding: 0;
+            }
+        }
 
         .right {
             width: 95%;
@@ -1320,6 +1506,19 @@ export default {
                 }
             }
         }
+        .media {
+            margin-left: 0;
+            li {
+                width: calc(50% - 20px);
+                margin-right: 20px;
+                &:nth-child(2n) {
+                    margin-right: 0;
+                }
+                &:nth-child(3n) {
+                    margin-right: 20px;
+                }
+            }
+        }
     }
     .forms {
         .switch {
diff --git a/src/pages/column/result.vue b/src/pages/column/result.vue
index b0eec96..e23a23f 100644
--- a/src/pages/column/result.vue
+++ b/src/pages/column/result.vue
@@ -3,22 +3,30 @@
     <div class="articles">
       <div class="top">
         <div class="search">
-          <input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title">
+          <input ref="search"
+                 type="text"
+                 :placeholder="$t('column.titlePlaceholder')"
+                 v-model="title">
           <i class="el-icon-search icon"></i>
         </div>
-        <p class="result">包含 “{{ title }}” 的搜索结果</p>
+        <p class="result">{{ $i18n.locale === 'en' ? `Search results containing "${ title }"` : `包含 “${ title }” 的搜索结果` }} </p>
       </div>
 
-      <ul v-if="articles.length" class="list">
-        <li v-for="(item, i) in articles" :key="i">
+      <ul v-if="articles.length"
+          class="list">
+        <li v-for="(item, i) in articles"
+            :key="i">
           <h6 @click="toArtice(item)">{{ item.title }}</h6>
-          <div class="des" v-html="item.mainBody"></div>
-          <Breadcrumb :data.sync="item.routes"/>
+          <div class="des"
+               v-html="item.mainBody"></div>
+          <Breadcrumb :data.sync="item.routes" />
         </li>
       </ul>
-      <div v-else class="none">
-        <img src="@/assets/images/none.png" alt="">
-        <p class="text">没有找到您搜索的内容，您可尝试搜索其他关键词。</p>
+      <div v-else
+           class="none">
+        <img src="@/assets/images/none.png"
+             alt="">
+        <p class="text">{{ $t('column.nothing') }}</p>
       </div>
     </div>
   </div>
@@ -32,7 +40,7 @@ import mixins from '@/mixins/article'
 import Breadcrumb from '@/components/breadcrumb'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       title: this.$store.state.content.keyword,
       searchTimer: null,
@@ -42,15 +50,23 @@ export default {
   components: {
     Breadcrumb
   },
+  computed: {
+    ...mapState('content', [
+      'keyword'
+    ]),
+  },
   watch: {
-    title() {
+    keyword () {
+      this.title = this.keyword
+    },
+    title () {
       clearTimeout(this.searchTimer)
       this.searchTimer = setTimeout(() => {
         this.getArticle()
       }, 500)
     }
   },
-  mounted() {
+  mounted () {
     this.getArticle()
   },
   methods: {
@@ -58,8 +74,7 @@ export default {
       'setKeyword'
     ]),
     // 查询文章列表
-    getArticle() {
-      this.setKeyword('')
+    getArticle () {
       this.$post(this.api.newlyPublishedArticles, {
         siteId: this.site,
         pageNum: 1,
@@ -82,7 +97,7 @@ export default {
           ]
         })
         this.articles = list
-      }).catch(res => {})
+      }).catch(res => { })
     },
   }
 };
@@ -90,95 +105,93 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-  background: url(../../assets/images/result-bg1.png) no-repeat,
-              url(../../assets/images/result-bg2.png) bottom right/auto no-repeat;
-  background-color: #fff;
+    background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat;
+    background-color: #fff;
 }
 .articles {
-  width: 100%;
-  padding-top: 47px;
-  margin: 0 auto;
+    width: 70%;
+    padding-top: 47px;
+    margin: 0 auto;
 }
 .top {
-  display: flex;
-  align-items: center;
-  .result {
-    font-size: 18px;
-    color: #969696;
-  }
+    display: flex;
+    align-items: center;
+    .result {
+        font-size: 18px;
+        color: #969696;
+    }
 }
 .search {
-  position: relative;
-  display: inline-flex;
-  height: 62px;
-  margin-right: 30px;
-  border-radius: 6px;
-  overflow: hidden;
-  input {
-    width: 510px;
-    padding: 0 20px;
-    font-size: 18px;
-    color: #333;
-    border: 0;
-    outline: none;
-    background: #F7F7F7;
-  }
-  .icon {
-    position: absolute;
-    top: 17px;
-    right: 15px;
-    font-size: 26px;
-    color: #ccc;
-    border-radius: 0px 6px 6px 0px;
-  }
+    position: relative;
+    display: inline-flex;
+    height: 62px;
+    margin-right: 30px;
+    border-radius: 6px;
+    overflow: hidden;
+    input {
+        width: 510px;
+        padding: 0 20px;
+        font-size: 18px;
+        color: #333;
+        border: 0;
+        outline: none;
+        background: #f7f7f7;
+    }
+    .icon {
+        position: absolute;
+        top: 17px;
+        right: 15px;
+        font-size: 26px;
+        color: #ccc;
+        border-radius: 0px 6px 6px 0px;
+    }
 }
 .list {
-  li {
-    margin-top: 30px;
-    border-bottom: 1px dashed #e3e3e3;
-  }
-  h6 {
-    margin-bottom: 10px;
-    font-size: 22px;
-    color: #1583FF;
-    line-height: 30px;
-    cursor: pointer;
-  }
-  .des {
-    font-size: 18px;
-    line-height: 36px;
-    color: #333;
-    @include mul-ellipsis(2);
-  }
-  .breadcrumb {
-    margin: 15px 0 30px;
-  }
+    li {
+        margin-top: 30px;
+        border-bottom: 1px dashed #e3e3e3;
+    }
+    h6 {
+        margin-bottom: 10px;
+        font-size: 22px;
+        color: #1583ff;
+        line-height: 30px;
+        cursor: pointer;
+    }
+    .des {
+        font-size: 18px;
+        line-height: 36px;
+        color: #333;
+        @include mul-ellipsis(2);
+    }
+    .breadcrumb {
+        margin: 15px 0 30px;
+    }
 }
 .none {
-  margin-top: 118px;
-  text-align: center;
-  .text {
-    margin-top: 59px;
-    font-size: 18px;
-    color: #333;
-  }
+    margin-top: 118px;
+    text-align: center;
+    .text {
+        margin-top: 59px;
+        font-size: 18px;
+        color: #333;
+    }
 }
-@media (min-width: 280px) and (max-width: 750px) {
-  .articles{
-    width: 100%;
-    .top{
-      flex-direction: column;
-      .search{
-        width: 95%;
-        margin: 0 auto;
-      }
+@media (max-width: 640px) {
+    .articles {
+        width: 90%;
     }
-    .none{
-      margin-top: 50px;
-      .text{
-        font-size: .5rem;
-      }
+    .top {
+        flex-direction: column;
+        padding: 0 10px;
+    }
+    .search {
+        width: 100%;
+        margin-right: 0;
+        margin-bottom: 20px;
+        input {
+            width: 100%;
+        }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/contactUs/index.vue b/src/pages/contactUs/index.vue
index 121cbf0..dd4b429 100644
--- a/src/pages/contactUs/index.vue
+++ b/src/pages/contactUs/index.vue
@@ -36,21 +36,22 @@
                              align="center"
                              min-width="100"></el-table-column>
             <el-table-column prop="phone"
-                             label="电话"
                              align="center"
-                             min-width="150"></el-table-column>
+                             min-width="150">
+              <template slot="header"
+                        slot-scope="scope">
+                <img src="@/assets/images/tel1.png"
+                     alt=""> 电话
+              </template>
+            </el-table-column>
             <el-table-column prop="email"
-                             label="邮箱"
                              align="center"
                              min-width="150">
-
-              <template slot-scope="scope">
-                <div class="flex j-center a-center">
-                  <img class="m-r-5"
-                       src="@/assets/images/mall1.png"
-                       alt="">
-                  {{ scope.row.email }}
-                </div>
+              <template slot="header"
+                        slot-scope="scope">
+                <img style="width: 20px"
+                     src="@/assets/images/email-white.png"
+                     alt=""> 邮箱
               </template>
             </el-table-column>
           </el-table>
@@ -85,23 +86,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
     // 获取父级所有栏目名称和id
@@ -156,8 +154,8 @@ export default {
 }
 .block {
     padding: 2rem 0;
-    background: url(http://10.10.11.7/images/contactUs/3.png) 0 130px no-repeat,
-        url(http://10.10.11.7/images/contactUs/4.png) bottom right no-repeat;
+    background: url(https://huorantech.com/images/contactUs/3.png) 0 130px no-repeat,
+        url(https://huorantech.com/images/contactUs/4.png) bottom right no-repeat;
     background-color: #f7f8fa;
 }
 .inner {
diff --git a/src/pages/devHistory/index.vue b/src/pages/devHistory/index.vue
index 6d9007d..e7c4c8d 100644
--- a/src/pages/devHistory/index.vue
+++ b/src/pages/devHistory/index.vue
@@ -28,6 +28,7 @@
 <script>
 import mixins from "@/mixins/page";
 import WOW from "wow.js";
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -42,23 +43,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
   },
@@ -90,12 +88,62 @@ export default {
         max-width: 1200px;
         margin: 30px 0;
         overflow: auto;
+        /deep/ img {
+            width: 100% !important;
+            height: auto;
+        }
     }
 }
-@media (max-width: 1000px) {
-    .history {
+@media (max-width: 1200px) {
+    .tab-content {
+        width: 90%;
+        span {
+            font-size: 1.35rem;
+        }
+    }
+
+    .block {
+        padding: 1.25rem 0;
         .inner {
             width: 90%;
+            h2 {
+                font-size: 1.5rem;
+            }
+            p {
+                font-size: 1rem;
+                margin: 10px 0 1.25rem;
+            }
+            .event {
+                flex-direction: column;
+                .time {
+                    width: 100%;
+                    li {
+                        width: 100%;
+                        justify-content: flex-start;
+                    }
+                }
+                .right {
+                    margin-top: 1.25rem;
+                    width: 100%;
+                    h6 {
+                        font-size: 2rem;
+                    }
+                    .list {
+                        li {
+                            padding: 1.25rem;
+                            flex-direction: column;
+                            align-items: flex-start;
+                            .texts {
+                                width: 100%;
+                            }
+                            .pic {
+                                width: 100%;
+                                height: auto;
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 }
diff --git a/src/pages/deviceIntroBeam/index.vue b/src/pages/deviceIntroBeam/index.vue
index 3bb77cd..c487859 100644
--- a/src/pages/deviceIntroBeam/index.vue
+++ b/src/pages/deviceIntroBeam/index.vue
@@ -17,23 +17,25 @@
     </el-carousel>
 
     <div class="block share">
-      <h6 v-html="modules[1].form.title"></h6>
-      <p class="en"
-         v-html="modules[1].form.des"></p>
-      <div class="sum">{{ modules[2].form.title }}</div>
-      <div class="flex beamBox">
-        <div class="left">
-          <div class="des"
-               v-html="modules[2].form.des"></div>
+      <div class="inner">
+        <h6 v-html="modules[1].form.title"></h6>
+        <p class="en"
+           v-html="modules[1].form.des"></p>
+        <div class="sum">{{ modules[2].form.title }}</div>
+        <div class="flex beamBox">
+          <div class="left">
+            <div class="des"
+                 v-html="modules[2].form.des"></div>
+          </div>
+          <img class="pic"
+               :src="modules[2].form.pic"
+               alt="">
         </div>
-        <img class="pic"
-             :src="modules[2].form.pic"
-             alt="">
       </div>
     </div>
 
     <div class="intro">
-      <div class="intro-inner">
+      <div class="inner intro-inner">
         <img class="pic"
              :src="modules[3].form.pic"
              alt="">
@@ -43,7 +45,8 @@
     </div>
 
     <div class="unit">
-      <h6>{{ modules[4].form.title }}</h6>
+      <div class="title"
+           v-html="modules[4].form.title"></div>
       <img class="pic"
            :src="modules[4].form.pic"
            alt="">
@@ -54,6 +57,7 @@
 <script>
 import mixins from '@/mixins/page'
 import WOW from 'wow.js'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -88,15 +92,16 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+$banner-height: 21.6rem;
 .wrap {
-    background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat;
+    background: url(https://huorantech.com/images/device/4.png) bottom right/auto no-repeat;
     /deep/ .el-carousel {
-        height: 12.6rem;
+        height: $banner-height;
         .el-carousel__container {
-            height: 12.6rem;
+            height: $banner-height;
         }
         img {
-            height: 12.6rem;
+            height: $banner-height;
         }
     }
 }
@@ -144,8 +149,6 @@ export default {
 }
 .share {
     position: relative;
-    width: 80%;
-    padding-left: 14%;
     .beamBox {
         align-items: center;
     }
@@ -190,15 +193,13 @@ export default {
     }
 }
 .intro {
-    width: 80%;
     height: 19.65rem;
-    padding-left: 14%;
     margin-bottom: 67px;
-    background-color: #2e4984;
     .intro-inner {
         display: flex;
         align-items: center;
         height: 100%;
+        background-color: #2e4984;
     }
     .pic {
         width: 50%;
@@ -218,7 +219,7 @@ export default {
     width: 986px;
     padding-bottom: 60px;
     margin: 0 auto;
-    h6 {
+    .title {
         padding-left: 0.93rem;
         margin-bottom: 0.93rem;
         font-size: 0.88rem;
diff --git a/src/pages/deviceIntroLayout/index.vue b/src/pages/deviceIntroLayout/index.vue
index 2be18f5..79c5a80 100644
--- a/src/pages/deviceIntroLayout/index.vue
+++ b/src/pages/deviceIntroLayout/index.vue
@@ -22,11 +22,9 @@
         <p class="en">{{ modules[1].form.subTitle }}</p>
         <div class="card"
              v-html="modules[1].form.des"></div>
-        <div class="flex textBox">
-          <div class="left">
-            <div class="des"
-                 v-html="modules[2].form.des"></div>
-          </div>
+        <div class="texts">
+          <div class="des"
+               v-html="modules[2].form.des"></div>
           <img class="pic"
                :src="modules[2].form.pic"
                alt="">
@@ -34,9 +32,9 @@
       </div>
     </div>
 
-    <div class="intro">
+    <div class="inner intro">
       <img class="bg"
-           src="http://10.10.11.7/images/device/7.png"
+           src="https://huorantech.com/images/device/7.png"
            alt="">
       <img class="pic"
            :src="modules[3].form.pic"
@@ -44,7 +42,8 @@
     </div>
 
     <div class="unit">
-      <h6>{{ modules[4].form.title }}</h6>
+      <div class="title"
+           v-html="modules[4].form.title"></div>
       <img class="pic"
            :src="modules[4].form.pic"
            alt="">
@@ -55,6 +54,7 @@
 <script>
 import mixins from '@/mixins/page'
 import WOW from 'wow.js'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -89,15 +89,16 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+$banner-height: 21.6rem;
 .wrap {
-    background: url(http://10.10.11.7/images/device/4.png) bottom right/auto no-repeat;
+    background: url(https://huorantech.com/images/device/4.png) bottom right/auto no-repeat;
     /deep/ .el-carousel {
-        height: 12.6rem;
+        height: $banner-height;
         .el-carousel__container {
-            height: 12.6rem;
+            height: $banner-height;
         }
         img {
-            height: 12.6rem;
+            height: $banner-height;
         }
     }
 }
@@ -122,31 +123,14 @@ export default {
 }
 .share {
     position: relative;
-    .inner {
-        width: 100%;
-        max-width: 1323px;
-        .textBox {
-            position: absolute;
-            width: 85%;
-            right: 0;
-            top: 26rem;
-            .left {
-                flex-grow: 1;
-            }
-        }
-        h6 {
-            font-weight: bold;
-        }
-    }
-    .left {
-        width: 34.187rem;
-        margin-right: 4.125rem;
+    .texts {
+        display: flex;
     }
     h6 {
         position: relative;
         font-size: 1.76rem;
         font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
+        font-weight: bold;
         color: #333333;
     }
     .en {
@@ -157,25 +141,23 @@ export default {
         color: #e3e3e3;
     }
     .card {
-        position: absolute;
-        left: 0;
-        max-width: 1671px;
-        width: 85%;
-        padding: 1.6rem 2.9rem 1.6rem 14%;
-        font-size: 1.06rem;
+        padding: 1.5rem;
+        margin-bottom: 20px;
+        font-size: 1rem;
         font-family: PingFangSC-Medium, PingFang SC;
         border-radius: 0 6rem 0 0;
         font-weight: 500;
         color: #ffffff;
         line-height: 2.375rem;
-        background: url(http://10.10.11.7/images/device/5.png) 0 0 /100% 100% no-repeat;
+        background: url(https://huorantech.com/images/device/5.png) center center no-repeat;
     }
     .des {
-        margin-top: 25px;
-        font-size: 0.98rem;
+        flex-grow: 1;
+        margin: 25px 4rem 0 0;
+        font-size: 1rem;
         -webkit-line-clamp: inherit;
         color: #333;
-        line-height: 37px;
+        line-height: 2;
         overflow: visible;
     }
     .pic {
@@ -186,15 +168,8 @@ export default {
 }
 .intro {
     position: relative;
-    height: 42.625rem;
-    margin-bottom: 2.3rem;
-    margin-top: 50rem;
-    width: 85%;
+    margin: 60px auto;
     .bg {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 65%;
         height: 35.73rem;
     }
     .pic {
@@ -209,7 +184,7 @@ export default {
     width: 986px;
     padding-bottom: 60px;
     margin: 0 auto;
-    h6 {
+    .title {
         padding-left: 0.93rem;
         margin-bottom: 0.93rem;
         font-size: 0.88rem;
@@ -219,6 +194,7 @@ export default {
         border-left: 4px solid #1583ff;
     }
 }
+
 @media (max-width: 1400px) {
     .share {
         .card {
@@ -228,17 +204,15 @@ export default {
         .inner {
             max-width: none;
             width: 95%;
-            .textBox {
+            .texts {
                 position: static;
                 display: flex;
                 flex-direction: column;
                 align-items: flex-end;
                 margin-left: 15%;
-                .left {
+                .des {
                     width: 100%;
-                    .des {
-                        -webkit-line-clamp: 100;
-                    }
+                    -webkit-line-clamp: 100;
                 }
             }
         }
@@ -277,11 +251,11 @@ export default {
 @media (max-width: 640px) {
     .share {
         .inner {
-            .textBox {
+            .texts {
                 margin: 0 auto;
             }
         }
-        .left {
+        .des {
             margin-right: 0;
         }
     }
diff --git a/src/pages/deviceIntroLinear/index.vue b/src/pages/deviceIntroLinear/index.vue
index 03882d7..0dc728e 100644
--- a/src/pages/deviceIntroLinear/index.vue
+++ b/src/pages/deviceIntroLinear/index.vue
@@ -31,7 +31,7 @@
                  v-html="modules[2].form.des"></div>
           </div>
           <img class="bg"
-               src="http://10.10.11.7/images/device/10.png"
+               src="https://huorantech.com/images/device/10.png"
                alt="" />
         </div>
       </div>
@@ -40,12 +40,14 @@
     <div class="block intro">
       <div class="inner">
         <div class="left">
-          <h5>{{ modules[3].form.title }}</h5>
+          <div class="title1"
+               v-html="modules[3].form.title"></div>
           <img :src="modules[3].form.pic"
                alt="" />
         </div>
         <div class="right">
-          <h6>{{ modules[4].form.title }}</h6>
+          <div class="title2"
+               v-html="modules[4].form.title"></div>
           <img :src="modules[4].form.pic"
                alt="" />
         </div>
@@ -57,6 +59,7 @@
 <script>
 import mixins from '@/mixins/page';
 import WOW from 'wow.js';
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -89,14 +92,15 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+$banner-height: 21.6rem;
 .wrap {
     /deep/ .el-carousel {
-        height: 12.6rem;
+        height: $banner-height;
         .el-carousel__container {
-            height: 12.6rem;
+            height: $banner-height;
         }
         img {
-            height: 12.6rem;
+            height: $banner-height;
         }
     }
 }
@@ -218,7 +222,7 @@ export default {
         width: 68%;
         margin-left: 2%;
     }
-    h5 {
+    .title1 {
         margin-bottom: 0.93rem;
         font-size: 0.88rem;
         font-family: PingFangSC-Medium, PingFang SC;
@@ -226,7 +230,7 @@ export default {
         color: #2a2a2a;
     }
 
-    h6 {
+    .title2 {
         padding-left: 0.93rem;
         margin-bottom: 0.93rem;
         font-size: 0.88rem;
@@ -238,7 +242,7 @@ export default {
 
     img {
         width: 100%;
-        height: 85%;
+        object-fit: cover;
     }
 }
 
@@ -267,7 +271,7 @@ export default {
                 .bg {
                     width: 100%;
                     height: 200px;
-                    margin: -50px 0px 0 0;
+                    margin: 0;
                 }
             }
         }
@@ -275,8 +279,9 @@ export default {
 }
 
 @media (max-width: 1200px) {
-    body {
-        width: 100% !important;
+    .banner {
+        height: 12rem;
+        padding: 6rem 0 0 2rem;
     }
 
     .history {
@@ -313,46 +318,4 @@ export default {
         }
     }
 }
-@media (max-width: 320px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .banner {
-        height: 12rem;
-        padding: 6rem 0 0 2rem;
-    }
-}
 </style>
diff --git a/src/pages/edu/index.vue b/src/pages/edu/index.vue
index e020776..1cd578d 100644
--- a/src/pages/edu/index.vue
+++ b/src/pages/edu/index.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-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'">
+    <el-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">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -14,27 +19,51 @@
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
-        <img class="block-pic br wow fadeInLeft" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" width="100%" height="536" :src="modules[1].form.pic" alt="" @click="openLink(modules[1].form)">
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
+        <img class="block-pic br wow fadeInLeft"
+             data-wow-delay="0.8s"
+             :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+             width="100%"
+             height="536"
+             :src="modules[1].form.pic"
+             alt=""
+             @click="openLink(modules[1].form)">
       </div>
     </div>
-    
+
     <div class="block">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[2].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
-        <img class="block-pic wow fadeInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" width="100%" height="536" :src="modules[2].form.pic" alt="" @click="openLink(modules[2].form)">
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.8s">{{ modules[2].form.des }}</p>
+        <img class="block-pic wow fadeInRight"
+             data-wow-delay="0.8s"
+             :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+             width="100%"
+             height="536"
+             :src="modules[2].form.pic"
+             alt=""
+             @click="openLink(modules[2].form)">
       </div>
     </div>
-    
+
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ 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="wow fadeInUp" data-wow-delay="0.5s">
-              <img class="pic" :src="item.pic" alt="" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
+            <li v-if="item.isEnable"
+                :key="i"
+                class="wow fadeInUp"
+                data-wow-delay="0.5s">
+              <img class="pic"
+                   :src="item.pic"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(item.link.linkName)}"
+                   @click="openLink(item)">
               <div class="texts">
                 <h6>{{ item.title }}</h6>
                 <p class="sub">{{ item.subTitle }}</p>
@@ -55,17 +84,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -76,7 +105,7 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -84,596 +113,591 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 
-.wrap{
-  /deep/ .el-carousel {
-    height: 21.6rem;
-    .el-carousel__container{
-      height: 21.6rem;
-    }
-    img{
-      height: 21.6rem;
+.wrap {
+    /deep/ .el-carousel {
+        height: 21.6rem;
+        .el-carousel__container {
+            height: 21.6rem;
+        }
+        img {
+            height: 21.6rem;
+        }
     }
-  }
 }
 
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.15rem 0;
-  .inner {
-    .b-title  {
-      font-size: 2.25rem;
-      margin-bottom: 2.25rem;
+    .banner-name {
+        font-size: 2.16rem;
     }
-    .intro  {
-      margin-bottom: 2.25rem;
+}
+.block {
+    padding: 3.15rem 0;
+    .inner {
+        .b-title {
+            font-size: 2.25rem;
+            margin-bottom: 2.25rem;
+        }
+        .intro {
+            margin-bottom: 2.25rem;
+        }
     }
-   
-  }
 }
 .block-pic {
-  transition: .3s;
-  height: auto;
-  &.br {
-    border-radius: 270px;
-  }
-  &:hover {
-    transform: scale(1.05);
-  }
-}
-.list {
-  li {
-    position: relative;
-    &:nth-child(even) {
-      text-align: right;
-      .texts {
-        left: 0;
-        text-align: left;
-      }
-    }
-  }
-  .pic {
-    width: 45%;
+    transition: 0.3s;
     height: auto;
-  }
-  .texts {
-    position: absolute;
-    top: 7.59rem;
-    left: 40%;
-    width: 60%;
-    padding: 2.7rem 1.35rem ;
-    background-color: #fff;
-    overflow: hidden;
-    transition: .3s;
+    &.br {
+        border-radius: 270px;
+    }
     &:hover {
-      transform: scale(1.05);
+        transform: scale(1.05);
     }
-  }
-  h6 {
-    font-size: 1.8rem;
-    color: #3C3C3C;
-  }
-  .sub {
-    margin-top: 1.48rem;
-    font-size: 1.08rem;
-    color: #1C1C1C;
-    line-height: 33px;
-  }
-  .des {
-    margin-top: 1.2rem;
-    font-size: 1rem;
-    color: #3C3C3C;
-    line-height: 32px;
-  }
 }
-@media (max-width: 1520px) {
-  .list {
+.list {
+    li {
+        position: relative;
+        &:nth-child(even) {
+            text-align: right;
+            .texts {
+                left: 0;
+                text-align: left;
+            }
+        }
+    }
     .pic {
-      width: 45%;
+        width: 45%;
+        height: auto;
     }
-    li:nth-child(odd) {
-      .texts {
-        width: 50%;
-      }
+    .texts {
+        position: absolute;
+        top: 7.59rem;
+        left: 40%;
+        width: 60%;
+        padding: 2.7rem 1.35rem;
+        background-color: #fff;
+        overflow: hidden;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
     }
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
+    h6 {
+        font-size: 1.8rem;
+        color: #3c3c3c;
     }
-    img{
-      height: 18rem;
+    .sub {
+        margin-top: 1.48rem;
+        font-size: 1.08rem;
+        color: #1c1c1c;
+        line-height: 33px;
     }
-  }
-}
-.banner-item .banner-name {
-  font-size: 1.5rem;
-  bottom: 5.25rem;
-  left: 14.125rem;
-  line-height: 2rem
-}
- .block{ 
-  padding: 50px 0;
-  .inner {
-    width: 95%;margin: 0 auto;
-    .b-title{
-      margin-bottom: 30px;
+    .des {
+        margin-top: 1.2rem;
+        font-size: 1rem;
+        color: #3c3c3c;
+        line-height: 32px;
     }
-    .intro {
-      margin-bottom: 30px;
+}
+
+@media (max-width: 1520px) {
+    .list {
+        .pic {
+            width: 45%;
+        }
+        li:nth-child(odd) {
+            .texts {
+                width: 50%;
+            }
+        }
     }
-    .block-pic{
-      height: 15rem;
+}
+@media (min-width: 280px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 18rem;
+            .el-carousel__container {
+                height: 18rem;
+            }
+            img {
+                height: 18rem;
+            }
+        }
     }
-  }
-  .list{
-    li {
-      margin-top: 20px;
-      .pic{
-        width: 100%;height: 25rem;
-      }
-      .texts{
-        padding: 10px;
-        width: 70%;
-        top: 2rem;
-        height: auto;
-        left: 24%;
-      }
+    .banner-item .banner-name {
+        font-size: 1.5rem;
+        bottom: 5.25rem;
+        left: 14.125rem;
+        line-height: 2rem;
+    }
+    .block {
+        padding: 50px 0;
+        .inner {
+            width: 95%;
+            margin: 0 auto;
+            .b-title {
+                margin-bottom: 30px;
+            }
+            .intro {
+                margin-bottom: 30px;
+            }
+            .block-pic {
+                height: 15rem;
+            }
+        }
+        .list {
+            li {
+                margin-top: 20px;
+                .pic {
+                    width: 100%;
+                    height: 25rem;
+                }
+                .texts {
+                    padding: 10px;
+                    width: 70%;
+                    top: 2rem;
+                    height: auto;
+                    left: 24%;
+                }
+            }
+        }
     }
-  }
- }
 }
 
 @media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            h6 {
-              font-size: 1rem;
-            }
-            .sub {
-              font-size: .85rem;
-              line-height: .85rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: .85rem;
-              line-height: .85rem;
-              margin-top: .5rem;
-
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .block-pic {
+                height: auto;
+            }
+            .list {
+                .wow {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        h6 {
+                            font-size: 1rem;
+                        }
+                        .sub {
+                            font-size: 0.85rem;
+                            line-height: 0.85rem;
+                            margin-top: 0.5rem;
+                        }
+                        .des {
+                            font-size: 0.85rem;
+                            line-height: 0.85rem;
+                            margin-top: 0.5rem;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            top: 5rem;
-            h6 {
-              font-size: 1.5rem;
-            }
-            .sub {
-              font-size: 1.05rem;
-              line-height: 1.05rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: 1.05rem;
-              line-height: 1.05rem;
-              margin-top: .5rem;
-
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .block-pic {
+                height: auto;
+            }
+            .list {
+                .wow {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        top: 5rem;
+                        h6 {
+                            font-size: 1.5rem;
+                        }
+                        .sub {
+                            font-size: 1.05rem;
+                            line-height: 1.05rem;
+                            margin-top: 0.5rem;
+                        }
+                        .des {
+                            font-size: 1.05rem;
+                            line-height: 1.05rem;
+                            margin-top: 0.5rem;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            top: 5rem;
-            h6 {
-              font-size: 1.8rem;
-            }
-            .sub {
-              font-size: 1.25rem;
-              line-height: 1.25rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: 1.25rem;
-              line-height: 1.25rem;
-              margin-top: .5rem;
-
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .block-pic {
+                height: auto;
+            }
+            .list {
+                .wow {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        top: 5rem;
+                        h6 {
+                            font-size: 1.8rem;
+                        }
+                        .sub {
+                            font-size: 1.25rem;
+                            line-height: 1.25rem;
+                            margin-top: 0.5rem;
+                        }
+                        .des {
+                            font-size: 1.25rem;
+                            line-height: 1.25rem;
+                            margin-top: 0.5rem;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            height: auto;
-          }
-          .texts {
-            top: 5rem;
-            padding: 2rem;
-            h6 {
-              font-size: 2rem;
-            }
-            .sub {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .block-pic {
+                height: auto;
+            }
+            .list {
+                .wow {
+                    .pic {
+                        height: auto;
+                    }
+                    .texts {
+                        top: 5rem;
+                        padding: 2rem;
+                        h6 {
+                            font-size: 2rem;
+                        }
+                        .sub {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                        .des {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
-@media (min-width: 640px) and (max-width: 768px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            width: 50%;
-            height: auto;
-          }
-          .texts {
-            top: 2rem;
-            left: 30%;
-            padding: 1.5rem;
-            h6 {
-              font-size: 2rem;
-            }
-            .sub {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .block-pic {
+                height: auto;
+            }
+            .list {
+                .wow {
+                    .pic {
+                        width: 50%;
+                        height: auto;
+                    }
+                    .texts {
+                        top: 2rem;
+                        left: 30%;
+                        padding: 1.5rem;
+                        h6 {
+                            font-size: 2rem;
+                        }
+                        .sub {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                        .des {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            width: 50%;
-            height: auto;
-          }
-          .texts {
-            top: 5rem;
-            left: 30%;
-            padding: 1.5rem;
-            h6 {
-              font-size: 2rem;
-            }
-            .sub {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .block-pic {
+                height: auto;
+            }
+            .list {
+                .wow {
+                    .pic {
+                        width: 50%;
+                        height: auto;
+                    }
+                    .texts {
+                        top: 5rem;
+                        left: 30%;
+                        padding: 1.5rem;
+                        h6 {
+                            font-size: 2rem;
+                        }
+                        .sub {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                        .des {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
-@media (min-width: 980px) and (max-width: 1200px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1rem;
-      line-height: 1.5rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1rem;
+            line-height: 1.5rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .block  {
-    padding: 1.25rem 0;
-    .inner {
-      .intro  {
-        margin-bottom: 1rem;
-      }
-      .b-title {
-        font-size: 1.5rem;
-      }
-      .block-pic {
-        height: auto;
-      }
-      .list {
-        .wow  {
-          .pic {
-            width: 50%;
-            height: auto;
-          }
-          .texts {
-            top: 5rem;
-            left: 30%;
-            padding: 1.5rem;
-            h6 {
-              font-size: 2rem;
-            }
-            .sub {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-            }
-            .des {
-              font-size: 1.55rem;
-              line-height: 1.55rem;
-              margin-top: .5rem;
-
+    .block {
+        padding: 1.25rem 0;
+        .inner {
+            .intro {
+                margin-bottom: 1rem;
+            }
+            .b-title {
+                font-size: 1.5rem;
+            }
+            .block-pic {
+                height: auto;
+            }
+            .list {
+                .wow {
+                    .pic {
+                        width: 50%;
+                        height: auto;
+                    }
+                    .texts {
+                        top: 5rem;
+                        left: 30%;
+                        padding: 1.5rem;
+                        h6 {
+                            font-size: 2rem;
+                        }
+                        .sub {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                        .des {
+                            font-size: 1.55rem;
+                            line-height: 1.55rem;
+                            margin-top: 0.5rem;
+                        }
+                    }
+                }
             }
-          }
         }
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/estate/event/index.vue b/src/pages/estate/event/index.vue
index 704f8a8..2847bac 100644
--- a/src/pages/estate/event/index.vue
+++ b/src/pages/estate/event/index.vue
@@ -45,10 +45,11 @@
                     <p class="date">{{ e.title }}</p>
                     <p class="text">{{ e.des }}</p>
                   </div>
-                  <img v-if="e.pic"
-                       :src="e.pic"
-                       alt=""
-                       class="pic">
+                  <el-image v-if="e.pic"
+                            class="pic"
+                            :src="e.pic"
+                            :preview-src-list="[e.pic]">
+                  </el-image>
                 </li>
               </template>
             </ul>
@@ -86,8 +87,8 @@ export default {
 @import url(../../../plugins/wow/animate.css);
 @import '../../../styles/page/page.scss';
 .wrap {
-    background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
-        url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
+    background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
+        url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
 }
 
 .history {
@@ -135,7 +136,7 @@ export default {
                     content: '';
                     width: 18px;
                     height: 18px;
-                    background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat;
+                    background: url(https://huorantech.com/images/overviewDevHistory/3.png) no-repeat;
                     margin-right: 20px;
                 }
             }
@@ -190,6 +191,7 @@ export default {
         }
     }
 }
+
 @media (max-width: 1200px) {
     .tab-content {
         padding: 20px 0;
diff --git a/src/pages/estate/index/index.vue b/src/pages/estate/index/index.vue
index a83114e..2024d52 100644
--- a/src/pages/estate/index/index.vue
+++ b/src/pages/estate/index/index.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="wrap">
-    <el-carousel :interval="6000"
+    <el-carousel v-if="modules[0].list"
+                 :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">
@@ -216,7 +217,7 @@
       </div>
     </div>
 
-    <div class="tools">
+    <!-- <div class="tools">
       <div class="logo">
         <img src="@/assets/images/logo.png"
              alt="">
@@ -227,7 +228,7 @@
             class="column"
             @click="toAnchor(item)">{{ item.name }}</li>
       </ul>
-    </div>
+    </div> -->
   </div>
 </template>
 
@@ -265,7 +266,7 @@ export default {
           console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)
 
           // 获取文章列表
-          if (json[2].form.column.length) {
+          if (json[2].form.column && json[2].form.column.length) {
             const { column, articleNum } = json[2].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles = Util.removeTag(data.slice(0, articleNum || 7))
@@ -273,13 +274,13 @@ export default {
               this.carouselInterval()
             }).catch(err => { })
           }
-          if (json[6].form.column.length) {
+          if (json[6].form.column && json[6].form.column.length) {
             const { column, articleNum } = json[6].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
             }).catch(err => { })
           }
-          if (json[8].form.column.length) {
+          if (json[8].form.column && json[8].form.column.length) {
             const { column, articleNum } = json[8].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
@@ -332,11 +333,12 @@ export default {
 @import url(../../../plugins/wow/animate.css);
 @import '../../../styles/page/page.scss';
 /deep/ .el-carousel {
-    height: 991px;
+    height: 100vh;
     .el-carousel__container,
     .el-carousel__item,
     img {
-        height: 100%;
+        height: 100vh;
+        object-fit: cover;
     }
 }
 .title {
@@ -382,6 +384,7 @@ export default {
     cursor: pointer;
     .pic {
         transition: 0.5s;
+        object-fit: cover;
         &:hover {
             transform: scale(1.3);
         }
@@ -457,6 +460,7 @@ export default {
     .pic {
         width: 100%;
         // height: 259px;
+        object-fit: cover;
     }
     .texts {
         padding: 40px 30px;
@@ -500,6 +504,7 @@ export default {
         .pic {
             width: 50%;
             min-height: 465px;
+            object-fit: cover;
         }
     }
 }
@@ -531,6 +536,7 @@ export default {
         }
         .pic {
             transition: 0.5s;
+            object-fit: cover;
         }
         &:hover {
             .pic {
@@ -559,6 +565,7 @@ export default {
             width: 167px;
             height: 167px;
             margin-right: 36px;
+            object-fit: cover;
         }
         .texts {
             width: calc(100% - 210px);
@@ -625,6 +632,7 @@ export default {
         width: 100%;
         height: 100%;
         transition: 0.5s;
+        object-fit: cover;
     }
     &:hover {
         .pic {
@@ -698,8 +706,7 @@ export default {
         }
     }
 }
-@media (max-width: 1520px) {
-}
+
 @media (max-width: 1200px) {
     .sfel-banner {
         flex-direction: column;
@@ -813,9 +820,4 @@ export default {
         }
     }
 }
-@media (max-width: 980px) {
-    /deep/ .el-carousel {
-        height: 600px;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/estate/location/index.vue b/src/pages/estate/location/index.vue
index 26bc658..9405fbf 100644
--- a/src/pages/estate/location/index.vue
+++ b/src/pages/estate/location/index.vue
@@ -30,7 +30,8 @@
         </div>
         <div class="texts">
           <h6>{{ modules[1].form.title }}</h6>
-          <div class="des">{{ modules[1].form.des }}</div>
+          <div class="des"
+               v-html="modules[1].form.des"></div>
         </div>
       </div>
       <div class="item wow bounceInRight"
@@ -44,7 +45,8 @@
         </div>
         <div class="texts">
           <h6>{{ modules[2].form.title }}</h6>
-          <div class="des">{{ modules[2].form.des }}</div>
+          <div class="des"
+               v-html="modules[2].form.des"></div>
         </div>
       </div>
       <div class="item wow bounceInLeft"
@@ -58,7 +60,8 @@
         </div>
         <div class="texts">
           <h6>{{ modules[3].form.title }}</h6>
-          <div class="des">{{ modules[3].form.des }}</div>
+          <div class="des"
+               v-html="modules[3].form.des"></div>
         </div>
       </div>
     </div>
@@ -69,6 +72,7 @@
 import mixins from '@/mixins/page'
 import overview from '@/mixins/estate'
 import WOW from 'wow.js'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins, overview],
   data () {
@@ -98,7 +102,7 @@ export default {
         padding: 42px;
         margin-bottom: 36px;
         color: #333;
-        background: #f5f5f5 url(http://10.10.11.7/images/overviewSetup/1.png) right bottom/auto no-repeat;
+        background: #f5f5f5 url(https://huorantech.com/images/overviewSetup/1.png) right bottom/auto no-repeat;
         transition: 0.5s;
         &:nth-child(even) {
             justify-content: space-between;
diff --git a/src/pages/estate/orgSetup/index.vue b/src/pages/estate/orgSetup/index.vue
index ca46f82..cc21dca 100644
--- a/src/pages/estate/orgSetup/index.vue
+++ b/src/pages/estate/orgSetup/index.vue
@@ -22,15 +22,16 @@
       <div class="org">
         <div class="left">
           <h6>{{ modules[1].form.title }}</h6>
-          <p class="text"
-             v-html="modules[1].form.des"></p>
+          <div class="text"
+               v-html="modules[1].form.des"></div>
         </div>
         <img class="pic"
-             src="http://10.10.11.7/images/overviewSetup/1.png"
+             src="https://huorantech.com/images/overviewSetup/1.png"
              alt="">
       </div>
       <div class="lg-bg">
-        <img :src="modules[2].form.pic"
+        <img width="100%"
+             :src="modules[2].form.pic"
              alt="">
       </div>
     </div>
@@ -41,6 +42,7 @@
 import mixins from '@/mixins/page'
 import overview from '@/mixins/estate'
 import WOW from 'wow.js'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins, overview],
   data () {
@@ -93,9 +95,12 @@ export default {
     }
 }
 .lg-bg {
-    max-width: 85%;
+    width: 1200px;
     margin: 0 auto;
     text-align: center;
+    img {
+        object-fit: cover;
+    }
 }
 @media (max-width: 1200px) {
     .tab-content {
@@ -108,10 +113,12 @@ export default {
                 width: 100%;
             }
             img {
-                width: 100%;
-                height: auto;
+                display: none;
             }
         }
     }
+    .lg-bg {
+        width: 90%;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/estate/survey/index.vue b/src/pages/estate/survey/index.vue
index 585b72d..c1423cd 100644
--- a/src/pages/estate/survey/index.vue
+++ b/src/pages/estate/survey/index.vue
@@ -23,15 +23,15 @@
         <h6>
           {{ modules[1].form.title }}
           <img class="title-bg"
-               src="http://10.10.11.7/images/overviewIntro/2.png"
+               src="https://huorantech.com/images/overviewIntro/2.png"
                alt="">
         </h6>
-        <p class="text"
-           v-html="modules[1].form.des"></p>
+        <div class="text"
+             v-html="modules[1].form.des"></div>
       </div>
       <div class="lg-bg">
         <img width="100%"
-             src="http://10.10.11.7/images/estate/3.png"
+             src="https://huorantech.com/images/estate/3.png"
              alt="">
       </div>
     </div>
@@ -42,6 +42,7 @@
 import mixins from '@/mixins/page'
 import overview from '@/mixins/estate'
 import WOW from 'wow.js'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins, overview],
   data () {
@@ -69,7 +70,7 @@ export default {
     min-height: 500px;
     padding: 80px 86px 29px 597px;
     margin: 0 auto 200px;
-    background: url(http://10.10.11.7/images/estate/2.png) 0 0/100% 100% no-repeat;
+    background: url(https://huorantech.com/images/estate/2.png) 0 0/100% 100% no-repeat;
     border-radius: 160px;
     h6 {
         position: relative;
@@ -89,6 +90,7 @@ export default {
         font-size: 1rem;
         color: #020202;
         line-height: 2rem;
+        // @include mul-ellipsis(10);
     }
 }
 .lg-bg {
diff --git a/src/pages/exp/index.vue b/src/pages/exp/index.vue
index b3d713b..ea4ac9e 100644
--- a/src/pages/exp/index.vue
+++ b/src/pages/exp/index.vue
@@ -123,14 +123,16 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+$banner-height: 21.6rem;
 .wrap {
+    padding-bottom: 70px;
     /deep/ .el-carousel {
-        height: 12.6rem;
+        height: $banner-height;
         .el-carousel__container {
-            height: 12.6rem;
+            height: $banner-height;
         }
         img {
-            height: 12.6rem;
+            height: $banner-height;
         }
     }
 }
diff --git a/src/pages/governance/index.vue b/src/pages/governance/index.vue
index d5b71d6..5605197 100644
--- a/src/pages/governance/index.vue
+++ b/src/pages/governance/index.vue
@@ -9,7 +9,8 @@
       </div>
     </div>
 
-    <div class="block history gray">
+    <div class="block history gray"
+         style="padding-bottom: 70px">
       <div class="inner">
         <div class="texts wow fadeInDown"
              data-wow-delay="0.5s">
@@ -38,7 +39,8 @@
       </ul>
     </div>
 
-    <div class="block committee gray">
+    <div class="block committee gray"
+         style="padding-top: 80px">
       <div v-if="modules[2].list[curYear].list[0]"
            class="inner">
         <div class="left">
@@ -57,6 +59,7 @@
 <script>
 import mixins from "@/mixins/page";
 import WOW from "wow.js";
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -71,23 +74,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
     // 部门点击回调
@@ -140,10 +140,11 @@ export default {
     }
     .bg {
         margin: -122px 0 0 0;
+        object-fit: cover;
     }
 }
 .cards {
-    padding: 60px 0;
+    padding-top: 50px;
     ul {
         display: flex;
         justify-content: center;
@@ -159,25 +160,25 @@ export default {
         color: #333;
         text-align: center;
         @include ellipsis();
-        background: url(http://10.10.11.7/images/governance/3.png) 0 0 / cover no-repeat;
+        background: url(https://huorantech.com/images/governance/3.png) 0 0 / cover no-repeat;
         cursor: pointer;
         &:nth-child(2) {
-            background-image: url(http://10.10.11.7/images/governance/4.png);
+            background-image: url(https://huorantech.com/images/governance/4.png);
         }
         &:nth-child(3) {
-            background-image: url(http://10.10.11.7/images/governance/5.png);
+            background-image: url(https://huorantech.com/images/governance/5.png);
         }
         &:nth-child(4) {
-            background-image: url(http://10.10.11.7/images/governance/4.png);
+            background-image: url(https://huorantech.com/images/governance/4.png);
         }
         &:nth-child(5) {
-            background-image: url(http://10.10.11.7/images/governance/7.png);
+            background-image: url(https://huorantech.com/images/governance/7.png);
         }
         &:nth-child(6) {
-            background-image: url(http://10.10.11.7/images/governance/6.png);
+            background-image: url(https://huorantech.com/images/governance/6.png);
         }
         &:nth-child(8) {
-            background-image: url(http://10.10.11.7/images/governance/6.png);
+            background-image: url(https://huorantech.com/images/governance/6.png);
         }
         &:nth-child(3n) {
             margin-right: 0;
@@ -213,8 +214,10 @@ export default {
     .pic {
         width: 48%;
         height: 300px;
+        object-fit: cover;
     }
 }
+
 @media (max-width: 1200px) {
     .history {
         .texts {
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index ff52057..0e4cefb 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -13,6 +13,10 @@
                :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>
@@ -31,7 +35,8 @@
             <div class="texts">
               <h6>{{ modules[2].form.title }}</h6>
               <p class="des">{{ modules[2].form.des }}</p>
-              <img src="@/assets/images/arrow.png"
+              <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)">
@@ -114,10 +119,10 @@
     </div>
 
     <div class="about"
-         :class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}"
+         :class="{'cursor-pointer': modules[8].form.link && isLink(modules[8].form.link.linkName)}"
          @click="openLink(modules[8].form)">
       <div class="inner">
-        <img class="wow fadeInUp"
+        <img class="pic wow fadeInUp"
              src="@/assets/images/about.png"
              alt="">
         <div class="line wow fadeInUp"
@@ -135,8 +140,7 @@
       <div class="inner">
         <h2 class="glance wow fadeInUp">{{ modules[9].form.title }}</h2>
         <ul class="stat">
-          <li class="wow fadeInRight"
-              data-wow-delay="0.2s">
+          <li>
             <!-- <p class="num">{{ modules[10].form.title }}</p> -->
             <animate-number class="num"
                             ref="num1"
@@ -145,8 +149,7 @@
                             duration="3000" />
             <p class="text">{{ modules[10].form.des }}</p>
           </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="0.4s">
+          <li>
             <animate-number class="num"
                             ref="num2"
                             from="0"
@@ -154,8 +157,7 @@
                             duration="3000" />
             <p class="text">{{ modules[11].form.des }}</p>
           </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="0.6s">
+          <li>
             <animate-number class="num"
                             ref="num3"
                             from="0"
@@ -165,11 +167,7 @@
           </li>
           <li class="wow fadeInRight"
               data-wow-delay="0.9s">
-            <animate-number class="num"
-                            ref="num4"
-                            from="0"
-                            :to="modules[13].form.title"
-                            duration="3500" />
+            <p class="num">{{ modules[13].form.title }}</p>
             <p class="text">{{ modules[13].form.des }}</p>
           </li>
           <li class="wow fadeInRight"
@@ -219,7 +217,6 @@ export default {
             data :
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
 
-          console.log('JSON=>', json)
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
 
@@ -254,10 +251,33 @@ export default {
     height: 100vh;
     img {
         height: 100%;
+        object-fit: cover;
     }
     /deep/.el-carousel__container {
         height: 100vh;
     }
+    .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;
+        }
+    }
 }
 .block {
     padding-top: 3.15rem;
@@ -282,6 +302,7 @@ export default {
     .pic {
         width: 100%;
         height: auto;
+        object-fit: cover;
     }
     .texts {
         padding-left: 1.375rem;
@@ -315,7 +336,7 @@ export default {
     flex-wrap: wrap;
     li {
         display: inline-flex;
-        width: calc((100% - 28px) / 2);
+        width: calc((100% - 35px) / 2);
         padding: 2.125rem;
         margin-bottom: 1.75rem;
         background-color: #fff;
@@ -332,6 +353,7 @@ export default {
     img {
         width: 12.5rem;
         height: 7.81rem;
+        object-fit: cover;
     }
     .texts {
         width: calc(100% - 220px);
@@ -380,6 +402,7 @@ export default {
         width: 47%;
         height: auto;
         transition: 0.3s;
+        object-fit: cover;
     }
     .texts {
         width: 48%;
@@ -435,7 +458,10 @@ export default {
 .about {
     padding: 3.848rem 0 9.9rem;
     background: url(../../assets/images/about-bg.png) no-repeat center center;
-    background-size: 100% 100%;
+    // background-size: 100% 100%;
+    .pic {
+        object-fit: cover;
+    }
     .line {
         display: flex;
         align-items: center;
@@ -590,80 +616,6 @@ export default {
     }
 }
 
-@media (max-width: 320px) {
-    .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 {
-            .b-title {
-                font-size: 1.3rem;
-            }
-            .intro {
-                margin-bottom: 1rem;
-                font-size: 0.95rem;
-                line-height: 1rem;
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        margin-top: 1.2rem;
-                        h6 {
-                            font-size: 1.2rem;
-                            margin-bottom: 1rem;
-                        }
-                        img {
-                            width: 3.77rem;
-                            height: 3.77rem;
-                        }
-                    }
-                }
-            }
-            .news {
-                li {
-                    padding: 1.2rem;
-                    img {
-                        width: 8rem;
-                    }
-                }
-            }
-            .people {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        h6 {
-                            font-size: 1.5rem;
-                        }
-                    }
-                }
-            }
-        }
-    }
-    .about {
-        .inner {
-            .des {
-                line-height: 1.2rem;
-            }
-        }
-    }
-}
 @media (min-width: 320px) and (max-width: 375px) {
     .wrap {
         /deep/ .el-carousel {
diff --git a/src/pages/iasf/index.vue b/src/pages/iasf/index.vue
index 1c1e53a..8109e53 100644
--- a/src/pages/iasf/index.vue
+++ b/src/pages/iasf/index.vue
@@ -1,7 +1,8 @@
 <template>
   <div class="wrap">
-    <el-carousel class="carousel"
-                 :style="{height}"
+    <!-- :interval="6000" -->
+    <el-carousel :class="['carousel']"
+                 id="part1"
                  :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'">
@@ -20,262 +21,301 @@
         </el-carousel-item>
       </template>
     </el-carousel>
-
-    <div class="block"
-         style="padding-top: 80px">
-      <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"
-              :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
-              @click="openLink(modules[2].form)">
-            <img class="pic"
-                 :src="modules[2].form.pic"
-                 alt="">
-            <div class="project">SILF</div>
-            <div class="texts">
-              <div class="name">SILF</div>
-              <h6>{{ modules[2].form.title }}</h6>
-              <p class="des">{{ modules[2].form.des }}</p>
-            </div>
-          </li>
-          <li class="wow fadeInDown"
-              data-wow-delay="0.6s"
-              :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
-              @click="openLink(modules[3].form)">
-            <img class="pic"
-                 :src="modules[3].form.pic"
-                 alt="">
-            <div class="project">S³FEL</div>
-            <div class="texts">
-              <div class="name">S³FEL</div>
-              <h6>{{ modules[3].form.title }}</h6>
-              <p class="des">{{ modules[3].form.des }}</p>
-            </div>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="block news-wrap">
-      <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>
-        <div class="all-link"
-             @click="toAll(modules[5].form)">
-          <span>{{$t('column.seeMore')}} <img class="icon"
-                 src="@/assets/images/arrow.png"
-                 alt=""></span>
-        </div>
-        <template v-if="articles.length">
-          <div class="news-banner wow fadeInDown"
-               data-wow-delay="0.5s"
-               @click="toArtice(articles[0], modules[5].form)">
-            <div class="pic-wrap">
+    <div :class="['block-wrap',{active: hide}]"
+         id="part2">
+      <div class="block card-block">
+        <div class="inner">
+          <h2 class="b-title">{{ modules[1].form.title }}</h2>
+          <p class="intro"
+             data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
+          <ul class="card">
+            <li :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+                @click="openLink(modules[2].form)">
               <img class="pic"
-                   width="100%"
-                   height="100%"
-                   :src="articles[0].titleImg"
+                   :src="modules[2].form.pic"
                    alt="">
-              <div class="pic-cover"></div>
-            </div>
-            <div class="right">
-              <h6>{{ articles[0].title }}</h6>
-              <div class="des"
-                   v-html="articles[0].mainBody"></div>
-              <p class="meta">{{ articles[0].releaseTime }} {{ articles[0].classificationName && ' | ' + articles[0].classificationName }}</p>
-            </div>
-          </div>
-
-          <ul class="news">
-            <template v-for="(item, i) in articles">
-              <li v-if="i"
-                  :key="i"
-                  class="wow fadeInDown"
-                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
-                  @click="toArtice(item, modules[5].form)">
-                <div class="pic-wrap">
-                  <img class="pic"
-                       :src="item.titleImg"
-                       alt="">
-                  <div class="pic-cover"></div>
-                </div>
-                <div class="texts">
-                  <h6>{{ item.title }}</h6>
-                  <div class="des"
-                       v-html="item.mainBody"></div>
-                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
-                </div>
-              </li>
-            </template>
+              <div class="project">SILF</div>
+              <div class="texts">
+                <div class="name">SILF</div>
+                <h6>{{ modules[2].form.title }}</h6>
+                <p class="des">{{ modules[2].form.des }}</p>
+              </div>
+            </li>
+            <li :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+                @click="openLink(modules[3].form)">
+              <img class="pic"
+                   :src="modules[3].form.pic"
+                   alt="">
+              <div class="project">S³FEL</div>
+              <div class="texts">
+                <div class="name">S³FEL</div>
+                <h6>{{ modules[3].form.title }}</h6>
+                <p class="des">{{ modules[3].form.des }}</p>
+              </div>
+            </li>
           </ul>
-        </template>
-        <ul class="news-carousel">
-          <li v-if="articles1.length">
-            <img class="pic"
-                 src="http://10.10.11.7/images/iasf/8.png"
-                 alt="">
-            <div class="texts">
-              <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
-              <div class="des-wrap">
-                <p class="meta">{{ curArticle1.source }}</p>
-                <div class="des"
-                     @click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div>
+        </div>
+      </div>
+
+      <div class="block news-wrap">
+        <div class="inner">
+          <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+          <p v-if="modules[4].form.des"
+             class="intro wow fadeInUp"
+             data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+          <div class="all-link"
+               @click="toAll(modules[5].form)">
+            <span>{{$t('column.seeMore')}} <img class="icon"
+                   src="@/assets/images/arrow.png"
+                   alt=""></span>
+          </div>
+          <template v-if="articles.length">
+            <div class="news-banner wow fadeInDown"
+                 data-wow-delay="0.5s"
+                 @click="toArtice(articles[0], modules[5].form)">
+              <div class="pic-wrap">
+                <img class="pic"
+                     width="100%"
+                     height="100%"
+                     :src="articles[0].titleImg"
+                     alt="">
+                <div class="pic-cover"></div>
               </div>
-              <p class="date">{{ curArticle1.releaseTime }}</p>
-            </div>
-            <div class="action">
-              <i class="el-icon-arrow-left dir"
-                 @click.stop="prevCarousel(1)"></i>
-              <ul class="inds">
-                <li v-for="i in articles1.length > 3 ? 4 : articles1.length"
-                    :key="i"
-                    :class="{active: curInd1 == i - 1}"
-                    @click.stop="switchCarousel(1, i - 1)"></li>
-              </ul>
-              <i class="el-icon-arrow-right dir"
-                 @click.stop="nextCarousel(1)"></i>
-            </div>
-          </li>
-          <li v-if="articles2.length">
-            <img class="pic"
-                 src="http://10.10.11.7/images/iasf/9.png"
-                 alt="">
-            <div class="texts">
-              <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
-              <div class="des-wrap">
-                <p class="meta">{{ curArticle2.classificationName }}</p>
+              <div class="right">
+                <h6>{{ articles[0].title }}</h6>
                 <div class="des"
-                     @click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div>
+                     v-html="articles[0].mainBody"></div>
+                <p class="meta">{{ articles[0].releaseTime }} {{ articles[0].classificationName && ' | ' + articles[0].classificationName }}</p>
               </div>
-              <p class="date">{{ curArticle2.releaseTime }}</p>
             </div>
-            <div class="action">
-              <i class="el-icon-arrow-left dir"
-                 @click.stop="prevCarousel(2)"></i>
-              <ul class="inds">
-                <li v-for="i in articles2.length > 3 ? 4 : articles2.length"
+
+            <ul class="news">
+              <template v-for="(item, i) in articles">
+                <li v-if="i"
                     :key="i"
-                    :class="{active: curInd2 == i - 1}"
-                    @click.stop="switchCarousel(2, i - 1)"></li>
-              </ul>
-              <i class="el-icon-arrow-right dir"
-                 @click.stop="nextCarousel(2)"></i>
-            </div>
-          </li>
-          <li v-if="articles3.length">
-            <img class="pic"
-                 src="http://10.10.11.7/images/iasf/10.png"
-                 alt="">
-            <div class="texts">
-              <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
-              <div class="activity">
-                <div v-if="curArticle3.activityStartTime"
-                     class="date-y">
-                  <p class="d">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[2] }}</p>
-                  <p class="y">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[0] + '-' + curArticle3.activityStartTime.split(' ')[0].split('-')[1] }}</p>
+                    class="wow fadeInDown"
+                    :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
+                    @click="toArtice(item, modules[5].form)">
+                  <div class="pic-wrap">
+                    <img class="pic"
+                         :src="item.titleImg"
+                         alt="">
+                    <div class="pic-cover"></div>
+                  </div>
+                  <div class="texts">
+                    <h6>{{ item.title }}</h6>
+                    <div class="des"
+                         v-html="item.mainBody"></div>
+                    <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
+                  </div>
+                </li>
+              </template>
+            </ul>
+          </template>
+          <ul class="news-carousel">
+            <li v-if="articles1.length">
+              <img class="pic"
+                   src="https://huorantech.com/images/iasf/8.png"
+                   alt="">
+              <div class="texts">
+                <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
+                <div class="des-wrap">
+                  <p class="meta">{{ curArticle1.source }}</p>
+                  <div class="des"
+                       @click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div>
                 </div>
+                <p class="date">{{ curArticle1.releaseTime }}</p>
+              </div>
+              <div class="action">
+                <i class="el-icon-arrow-left dir"
+                   @click.stop="prevCarousel(1)"></i>
+                <ul class="inds">
+                  <li v-for="i in articles1.length > 3 ? 4 : articles1.length"
+                      :key="i"
+                      :class="{active: curInd1 == i - 1}"
+                      @click.stop="switchCarousel(1, i - 1)"></li>
+                </ul>
+                <i class="el-icon-arrow-right dir"
+                   @click.stop="nextCarousel(1)"></i>
+              </div>
+            </li>
+            <li v-if="articles2.length">
+              <img class="pic"
+                   src="https://huorantech.com/images/iasf/9.png"
+                   alt="">
+              <div class="texts">
+                <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
                 <div class="des-wrap">
-                  <p class="meta">{{ curArticle3.classificationName }}</p>
+                  <p class="meta">{{ curArticle2.classificationName }}</p>
                   <div class="des"
-                       @click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div>
+                       @click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div>
                 </div>
+                <p class="date">{{ curArticle2.releaseTime }}</p>
               </div>
-            </div>
-            <div class="action">
-              <i class="el-icon-arrow-left dir"
-                 @click.stop="prevCarousel(3)"></i>
-              <ul class="inds">
-                <li v-for="i in articles3.length > 3 ? 4 : articles3.length"
-                    :key="i"
-                    :class="{active: curInd3 == i - 1}"
-                    @click.stop="switchCarousel(3, i - 1)"></li>
-              </ul>
-              <i class="el-icon-arrow-right dir"
-                 @click.stop="nextCarousel(3)"></i>
-            </div>
-          </li>
-        </ul>
+              <div class="action">
+                <i class="el-icon-arrow-left dir"
+                   @click.stop="prevCarousel(2)"></i>
+                <ul class="inds">
+                  <li v-for="i in articles2.length > 3 ? 4 : articles2.length"
+                      :key="i"
+                      :class="{active: curInd2 == i - 1}"
+                      @click.stop="switchCarousel(2, i - 1)"></li>
+                </ul>
+                <i class="el-icon-arrow-right dir"
+                   @click.stop="nextCarousel(2)"></i>
+              </div>
+            </li>
+            <li v-if="articles3.length">
+              <img class="pic"
+                   src="https://huorantech.com/images/iasf/10.png"
+                   alt="">
+              <div class="texts">
+                <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
+                <div class="activity">
+                  <div v-if="curArticle3.activityStartTime"
+                       class="date-y">
+                    <p class="d">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[2] }}</p>
+                    <p class="y">{{ curArticle3.activityStartTime.split(' ')[0].split('-')[0] + '-' + curArticle3.activityStartTime.split(' ')[0].split('-')[1] }}</p>
+                  </div>
+                  <div class="des-wrap">
+                    <p class="meta">{{ curArticle3.classificationName }}</p>
+                    <div class="des"
+                         @click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div>
+                  </div>
+                </div>
+              </div>
+              <div class="action">
+                <i class="el-icon-arrow-left dir"
+                   @click.stop="prevCarousel(3)"></i>
+                <ul class="inds">
+                  <li v-for="i in articles3.length > 3 ? 4 : articles3.length"
+                      :key="i"
+                      :class="{active: curInd3 == i - 1}"
+                      @click.stop="switchCarousel(3, i - 1)"></li>
+                </ul>
+                <i class="el-icon-arrow-right dir"
+                   @click.stop="nextCarousel(3)"></i>
+              </div>
+            </li>
+          </ul>
+        </div>
       </div>
-    </div>
 
-    <div class="block people-block">
-      <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[9].form.des }}</p>
-        <ul v-if="articles4.length"
-            class="people">
-          <li v-for="(item, i) in articles4"
-              :key="i"
-              @click="toArtice(item, modules[10].form)"
-              class="wow fadeInDown">
-            <img class="pic"
-                 :src="item.titleImg"
-                 alt="">
-            <div class="texts">
-              <h6>{{ item.title }}</h6>
-              <p class="job">岗位：{{ item.post }}</p>
-              <p class="hobby">爱好：{{ item.hobby }}</p>
+      <div class="block people-block">
+        <div class="inner">
+          <h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2>
+          <p class="intro wow fadeInUp"
+             data-wow-delay="0.5s">{{ modules[9].form.des }}</p>
+          <ul v-if="articles4.length"
+              class="people">
+            <li v-for="(item, i) in articles4"
+                :key="i"
+                @click="toArtice(item, modules[10].form)"
+                class="wow fadeInDown">
+              <img class="pic"
+                   :src="item.titleImg"
+                   alt="">
+              <div class="texts">
+                <h6>{{ item.title }}</h6>
+                <p class="job">{{ item.post }}</p>
+                <p class="hobby">{{ item.hobby }}</p>
+                <div class="text"
+                     v-html="item.mainBody"></div>
+              </div>
+            </li>
+          </ul>
+          <div class="all-link"
+               @click="toAll(modules[10].form)">
+            <span>{{$t('column.all')}} <img class="icon"
+                   src="@/assets/images/arrow.png"
+                   alt=""></span>
+          </div>
+        </div>
+      </div>
+
+      <div class="block talent-block">
+        <div class="inner">
+          <h2 class="b-title">{{ modules[11].form.title }}</h2>
+          <p class="intro"
+             data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
+          <div class="talent">
+            <div class="left">
+              <h6>{{ modules[12].form.title }}</h6>
+              <p class="sub-title">{{ modules[12].form.subTitle }}</p>
               <div class="text"
-                   v-html="item.mainBody"></div>
+                   v-html="modules[12].form.des"></div>
+              <el-button v-if="isLink(modules[12].form.link.linkName)"
+                         style="background-color: #026BE1;"
+                         type="primary"
+                         round
+                         @click="openLink(modules[12].form)">诚邀海内外人才加入我们 ></el-button>
             </div>
-          </li>
-        </ul>
-        <div class="all-link"
-             @click="toAll(modules[10].form)">
-          <span>{{$t('column.all')}} <img class="icon"
-                 src="@/assets/images/arrow.png"
-                 alt=""></span>
+            <img :src="modules[12].form.pic"
+                 alt=""
+                 class="pic">
+          </div>
         </div>
       </div>
-    </div>
 
-    <div class="block talent-block">
-      <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
-        <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
-        <div class="talent">
-          <div class="left wow fadeInLeft"
-               data-wow-delay="0.5s">
-            <h6>{{ modules[12].form.title }}</h6>
-            <p class="sub-title">{{ modules[12].form.subTitle }}</p>
-            <div class="text"
-                 v-html="modules[12].form.des"></div>
-            <el-button v-if="isLink(modules[12].form.link.linkName)"
-                       style="background-color: #026BE1;"
-                       type="primary"
-                       round
-                       @click="openLink(modules[12].form)">诚邀海内外人才加入我们 ></el-button>
+      <div class="about">
+        <div class="about-bg">
+          <div class="inner">
+            <div class="left">
+              <h6>{{ modules[13].form.title }}</h6>
+              <div class="text"
+                   v-html="modules[13].form.des"></div>
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'arrow': isLink(modules[13].form.link.linkName)}"
+                   @click="openLink(modules[13].form)">
+            </div>
+            <img class="pic"
+                 :src="modules[13].form.pic"
+                 alt="">
           </div>
-          <img :src="modules[12].form.pic"
-               alt=""
-               class="pic wow fadeInRight"
-               data-wow-delay="0.5s">
         </div>
       </div>
-    </div>
 
-    <div class="about">
-      <div class="about-bg">
+      <div class="block"
+           style="margin-top: 100px">
         <div class="inner">
-          <div class="left">
-            <h6>{{ modules[13].form.title }}</h6>
-            <div class="text"
-                 v-html="modules[13].form.des"></div>
-            <img src="@/assets/images/arrow-white.png"
-                 alt=""
-                 :class="{'arrow': isLink(modules[13].form.link.linkName)}"
-                 @click="openLink(modules[13].form)">
-          </div>
-          <img class="pic"
-               :src="modules[13].form.pic"
-               alt="">
+          <ul class="entry">
+            <li :class="{'cursor-pointer': isLink(modules[14].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[15].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[16].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[17].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[18].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>
         </div>
       </div>
     </div>
@@ -295,6 +335,7 @@ import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import WOW from 'wow.js'
+import $ from 'jquery'
 export default {
   mixins: [mixins],
   data () {
@@ -312,11 +353,18 @@ export default {
       curInd3: 0,
       curArticle3: {},
       timer: null,
+      hide: false,
+      lastScrollTop: 0
     }
   },
   mounted () {
     this.height = window.innerHeight + 'px'
-    new WOW().init()
+    this.$store.getters.getModelType && new WOW().init()
+
+    document.onscroll = this.throttle(this.scroll, 200)
+  },
+  beforeDestroy () {
+    document.onscroll = null
   },
   methods: {
     // 获取文章详情
@@ -342,7 +390,7 @@ export default {
 
           if (json[6].form.column.length) {
             const { column, articleNum } = json[6].form
-            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+            this.$post(this.api.queryArticlesByColumnType, Util.rsa(column[column.length - 1])).then(({ data }) => {
               this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
               if (this.articles1.length) this.curArticle1 = this.articles1[0]
             }).catch(err => { })
@@ -367,7 +415,7 @@ export default {
               this.articles4 = Util.removeTag(data.slice(0, articleNum || 3))
             }).catch(err => { })
           }
-          this.carouselInterval()
+          // this.carouselInterval()
         }
       }).catch(err => { })
     },
@@ -410,6 +458,89 @@ export default {
     // 右侧工具栏点击回调
     toLink (item, i) {
       i ? this.openLink(item) : window.scrollTo(0, document.documentElement.scrollHeight)
+    },
+
+    scroll () {
+      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
+
+      if (this.lastScrollTop < scrollTop && !this.hide) {
+        // this.hide = true
+        // document.querySelector(`#part2`).scrollIntoView({
+        //   behavior: 'smooth'
+        // })
+        this.hide = true
+        setTimeout(() => {
+          $(window).scrollTop(100)
+          // window.scrollTo({
+          //   top: window.innerWidth / 2.03,
+          //   behavior: 'smooth' // 平滑滚动
+          // });
+          // this.scrollTop(window.innerWidth / 2.03, 200)
+        }, 300)
+
+      } else if (this.lastScrollTop > scrollTop && scrollTop == 0 && this.hide) {
+        // this.hide = false
+        // document.querySelector(`#part1`).scrollIntoView({
+        //   behavior: 'smooth'
+        // })
+        // window.scrollTo({
+        //   top: 0,
+        //   behavior: 'smooth' // 平滑滚动
+        // });
+        this.hide = false
+        setTimeout(() => {
+          $(window).scrollTop(0)
+          // window.scrollTo({
+          //   top: 0,
+          //   behavior: 'smooth' // 平滑滚动
+          // });
+          // this.scrollTop(0, 200)
+        }, 300)
+      }
+      this.lastScrollTop = scrollTop
+    },
+    scrollTop (number = 0, time) {
+      if (!time) {
+        document.body.scrollTop = document.documentElement.scrollTop = number;
+        return number;
+      }
+      const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
+      let spacingInex = time / spacingTime; // 计算循环的次数
+      let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
+      let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
+      let scrollTimer = setInterval(() => {
+        if (spacingInex > 0) {
+          spacingInex--;
+          this.scrollTop(nowTop += everTop);
+        } else {
+          clearInterval(scrollTimer); // 清除计时器
+        }
+      }, spacingTime);
+    },
+    // 节流
+    throttle (fn, time) {
+      // 上一次的执行时间
+      let pre = 0
+      let timeout = null
+      return function (...args) {
+        const now = Date.now()
+        // 时间差超过了设定的时间间隔
+        if (now - pre > time) {
+          pre = now
+          fn.apply(this, args)
+        } else {
+          // 没有超过设定的时间间隔,则后续的事件会直接清除
+          if (timeout) {
+            clearTimeout(timeout)
+            timeout = null
+          }
+          // 最后一次的事件会触发
+          timeout = setTimeout(() => {
+            pre = now
+            fn.apply(this, args)
+          }, time);
+        }
+      }
     }
   }
 };
@@ -418,18 +549,32 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+$bannerHeight: 100vh;
+$bannerMh: 800px;
 .carousel {
-    height: 100vh;
+    z-index: 1;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: $bannerHeight;
     img {
-        height: 100%;
+        height: $bannerHeight;
+        object-fit: cover;
     }
     /deep/.el-carousel__container {
-        height: 100%;
+        height: $bannerHeight;
+    }
+    /deep/.el-carousel__arrow i {
+        font-size: 30px;
     }
     .texts {
         position: absolute;
         bottom: 20%;
         left: 120px;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
         h6,
         .text {
             padding: 20px 15px;
@@ -447,6 +592,17 @@ export default {
         }
     }
 }
+.block-wrap {
+    z-index: 2;
+    position: relative;
+    top: $bannerHeight;
+    padding: 6rem 0 30px;
+    background-color: #fff;
+    transition: all 0.7s cubic-bezier(0.5, 0, 0.2, 1) 0s;
+    &.active {
+        top: 0;
+    }
+}
 .block {
     padding-top: 3.15rem;
     .b-title {
@@ -456,14 +612,16 @@ export default {
     }
     .intro {
         margin-bottom: 3.6rem;
-        font-size: 30px;
+        font-size: 26px;
         font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1;
         color: #5b5b5e;
     }
 }
 .inner {
-    width: 1444px;
-    // min-width: 70%;
+    width: 1200px;
+}
+.card-block {
+    background: url(https://huorantech.com/images/iasf/14.jpg) 0 0 / cover no-repeat;
 }
 .card {
     display: flex;
@@ -472,7 +630,7 @@ export default {
     li {
         position: relative;
         width: calc((100% - 64px) / 2);
-        height: 488px;
+        height: 402px;
         transition: 0.3s;
         overflow: hidden;
         &:hover {
@@ -487,6 +645,7 @@ export default {
     .pic {
         width: 100%;
         height: 100%;
+        object-fit: cover;
     }
     .project {
         position: absolute;
@@ -513,7 +672,7 @@ export default {
         align-items: center;
         width: 100%;
         height: 100%;
-        padding: 0 128px;
+        padding: 0 60px;
         text-align: center;
         color: #fff;
         background-color: rgba(0, 0, 0, 0.3);
@@ -536,7 +695,7 @@ export default {
     }
 }
 .news-wrap {
-    background: url(http://10.10.11.7/images/iasf/1.png) 0 0/100% 100% no-repeat;
+    background: url(https://huorantech.com/images/iasf/1.png) 0 0 / cover no-repeat;
 }
 .news-title:after {
     display: none;
@@ -570,11 +729,15 @@ export default {
     }
     .pic {
         transition: 0.5s;
+        object-fit: cover;
     }
     .right {
         position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         width: 50%;
-        padding: 42px 71px 90px 58px;
+        padding: 42px 71px 42px 58px;
         background: #026be1;
         color: #fff;
         transition: 0.3s;
@@ -630,6 +793,7 @@ export default {
         width: 100%;
         height: 100%;
         transition: 0.5s;
+        object-fit: cover;
     }
     .pic-cover {
         display: none;
@@ -662,7 +826,6 @@ export default {
         font-size: 16px;
         line-height: 28px;
         color: #333;
-        text-indent: 2em;
     }
 }
 .news-carousel {
@@ -682,6 +845,7 @@ export default {
         width: 100%;
         height: 100%;
         transition: 0.5s;
+        object-fit: cover;
     }
     .texts {
         position: absolute;
@@ -798,30 +962,36 @@ export default {
     }
 }
 .people-block {
-    background: url(../../assets/images/FEL.png) 0 0/100% 100% no-repeat;
+    background: url(../../assets/images/FEL.png) 0 0 / cover no-repeat;
 }
 .people {
     display: flex;
 
     li {
         width: 33.33%;
-        padding: 20px 73px 40px;
+        padding: 20px 70px 40px;
         text-align: center;
         border-right: 1px solid #ddd;
         cursor: pointer;
         &:first-child {
-            padding-left: 0;
+            // width: calc(33.33% - 70px);
+            // padding-left: 0;
+        }
+        &:nth-child(2) {
+            // width: calc(33.33% + 70px);
         }
         &:last-child {
-            padding-right: 0;
+            // width: calc(33.33% - 70px);
+            // padding-right: 0;
             border-right: 0;
         }
     }
     .pic {
-        width: 293px;
-        height: 293px;
+        width: 259px;
+        height: 259px;
         margin-bottom: 28px;
         border-radius: 50%;
+        object-fit: cover;
     }
     h6 {
         font-size: 1.1rem;
@@ -831,7 +1001,6 @@ export default {
     .job {
         margin: 18px 0 12px;
         font-size: 1rem;
-        font-weight: 600;
         font-family: PingFangSC-Medium, PingFang SC;
         color: #333;
     }
@@ -842,12 +1011,13 @@ export default {
     }
     .text {
         font-size: 1rem;
+        text-align: justify;
         line-height: 1.6;
         color: #333;
     }
 }
 .talent-block {
-    background: url(http://10.10.11.7/images/iasf/11.png) 0 0/100% 100% no-repeat;
+    background: url(https://huorantech.com/images/iasf/11.png) 0 0 / cover no-repeat;
 }
 .talent {
     display: flex;
@@ -856,7 +1026,7 @@ export default {
     overflow: hidden;
     .left {
         width: 50%;
-        padding: 120px 80px 0 5%;
+        padding: 50px 80px 0 5%;
         background: #111c43;
     }
     h6 {
@@ -873,17 +1043,17 @@ export default {
         line-height: 2;
     }
     .el-button {
-        font-size: 20px;
+        font-size: 16px;
         border: 0;
     }
     .pic {
         width: 50%;
-        min-height: 465px;
+        object-fit: cover;
     }
 }
 .about {
-    padding: 100px 0 229px;
-    background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat;
+    padding: 100px 0 0;
+    background: url(https://huorantech.com/images/iasf/12.png) 0 450px no-repeat;
     .about-bg {
         background-color: #0a7fec;
     }
@@ -911,8 +1081,32 @@ export default {
         position: absolute;
         top: -60px;
         right: 0;
-        width: 744px;
-        height: 657px;
+        width: 632px;
+        height: 558px;
+        object-fit: cover;
+    }
+}
+
+.entry {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    li {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+    img {
+        max-width: 100px;
+        object-fit: cover;
+    }
+    .text {
+        margin-top: 15px;
+        font-size: 1rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #48525e;
     }
 }
 .tools {
@@ -941,25 +1135,25 @@ export default {
             width: 28px;
             height: 28px;
             margin-right: 7px;
-            background: url(http://10.10.11.7/images/iasf/icon1.png) no-repeat;
+            background: url(https://huorantech.com/images/iasf/icon1.png) no-repeat;
         }
         &:nth-child(2):before {
-            background-image: url(http://10.10.11.7/images/iasf/icon2.png);
+            background-image: url(https://huorantech.com/images/iasf/icon2.png);
         }
         &:nth-child(2):hover:before {
-            background-image: url(http://10.10.11.7/images/iasf/icon2-1.png);
+            background-image: url(https://huorantech.com/images/iasf/icon2-1.png);
         }
         &:nth-child(3):before {
-            background-image: url(http://10.10.11.7/images/iasf/icon3.png);
+            background-image: url(https://huorantech.com/images/iasf/icon3.png);
         }
         &:nth-child(3):hover:before {
-            background-image: url(http://10.10.11.7/images/iasf/icon3-1.png);
+            background-image: url(https://huorantech.com/images/iasf/icon3-1.png);
         }
         &:nth-child(4):before {
-            background-image: url(http://10.10.11.7/images/iasf/icon4.png);
+            background-image: url(https://huorantech.com/images/iasf/icon4.png);
         }
         &:nth-child(4):hover:before {
-            background-image: url(http://10.10.11.7/images/iasf/icon4-1.png);
+            background-image: url(https://huorantech.com/images/iasf/icon4-1.png);
         }
         &:hover {
             justify-content: flex-start;
@@ -968,7 +1162,7 @@ export default {
             color: #fff;
             background-color: rgba(1, 129, 247, 0.94);
             &:before {
-                background-image: url(http://10.10.11.7/images/iasf/icon1-1.png);
+                background-image: url(https://huorantech.com/images/iasf/icon1-1.png);
             }
         }
     }
@@ -976,6 +1170,7 @@ export default {
         margin-right: 10px;
     }
 }
+
 @media (max-width: 1470px) {
     .inner {
         width: 95%;
@@ -1001,6 +1196,7 @@ export default {
     .about {
         .inner {
             height: auto;
+            text-align: center;
         }
         .left {
             width: 100%;
@@ -1059,10 +1255,11 @@ export default {
         }
     }
     .entry {
-        flex-direction: column;
+        // flex-direction: column;
+        flex-wrap: wrap;
         li {
-            width: 100% !important;
-            margin-right: 0;
+            width: 48% !important;
+            margin-bottom: 30px;
         }
     }
 }
diff --git a/src/pages/industrial/index.vue b/src/pages/industrial/index.vue
index 98aae7a..a5fc570 100644
--- a/src/pages/industrial/index.vue
+++ b/src/pages/industrial/index.vue
@@ -32,10 +32,10 @@
 
     <div class="block land">
       <div class="inner">
-        <img class="pic"
+        <img class="pic wow fadeInLeft"
              :src="modules[2].form.pic"
              alt="">
-        <div class="right">
+        <div class="right wow fadeInDown">
           <h6 v-html="modules[2].form.title"></h6>
           <div class="text"
                v-html="modules[2].form.des"></div>
@@ -45,7 +45,7 @@
 
     <div class="block gray">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp"
+        <h2 class="b-title wow fadeInUp plan-title"
             v-html="modules[3].form.title"></h2>
         <p class="intro wow fadeInUp"
            data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
@@ -82,16 +82,16 @@
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp"
+        <h2 class="b-title"
+            :class="{'wow fadeInUp': $store.getters.getModelType}"
             v-html="modules[6].form.title"></h2>
         <p class="intro wow fadeInUp"
            data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
         <ul class="app">
           <li v-for="(item, i) in modules[7].list"
               :key="i"
-              class="wow fadeInDown"
               :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
-              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              :class="{'cursor-pointer': isLink(item.link.linkName),'wow fadeInDown': $store.getters.getModelType}"
               @click="openLink(item)">
             <img class="bg"
                  :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
@@ -107,12 +107,13 @@
 
     <div class="block news-block">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp"
+        <h2 class="b-title"
+            :class="{'wow fadeInUp': $store.getters.getModelType}"
             v-html="modules[8].form.title"></h2>
         <p class="intro wow fadeInUp"
            data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
         <ul class="news">
-          <li class="wow fadeInDown"
+          <li :class="{'wow fadeInDown': $store.getters.getModelType}"
               :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
               v-for="(item, i) in articles"
               :key="i"
@@ -155,31 +156,28 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
 
-            // 获取文章列表
-            const { column, articleNum } = json[9].form
-            if (column.length) {
-              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
-                this.articles = Util.removeTag(data.slice(0, articleNum || 6))
-              }).catch(err => { })
-            }
+          // 获取文章列表
+          const { column, articleNum } = json[9].form
+          if (column.length) {
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data.slice(0, articleNum || 6))
+            }).catch(err => { })
           }
-        })
+        }
+      })
         .catch((err) => { });
     },
   },
@@ -221,6 +219,7 @@ export default {
         width: 560px;
         height: 500px;
         margin: -122px -83px 0 0;
+        // object-fit: cover;
     }
 }
 .land {
@@ -230,6 +229,7 @@ export default {
     .pic {
         width: 50%;
         height: 450px;
+        object-fit: cover;
     }
     .right {
         width: 50%;
@@ -291,6 +291,7 @@ export default {
             height: 423px;
             margin: -20px -20px 0 0;
             border-radius: 100px 0 0 0;
+            object-fit: cover;
         }
     }
 }
@@ -324,6 +325,7 @@ export default {
         left: 0;
         width: 100%;
         height: 100%;
+        object-fit: cover;
     }
     .icon {
         position: relative;
@@ -353,6 +355,7 @@ export default {
     img {
         width: 100%;
         height: 220px;
+        object-fit: cover;
     }
     .texts {
         padding: 20px 24px;
@@ -370,6 +373,7 @@ export default {
         text-shadow: 0px 0px 20px rgba(176, 176, 176, 0.21);
     }
 }
+
 @media (max-width: 1200px) {
     .history {
         .texts {
@@ -439,5 +443,8 @@ export default {
             margin-right: 0;
         }
     }
+    .plan-title:after {
+        display: none;
+    }
 }
 </style>
diff --git a/src/pages/lightSources/index.vue b/src/pages/lightSources/index.vue
index eaa10d6..ba6c88d 100644
--- a/src/pages/lightSources/index.vue
+++ b/src/pages/lightSources/index.vue
@@ -17,7 +17,7 @@
            data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
         <el-image class="block-pic br wow fadeInLeft"
                   data-wow-delay="0.8s"
-                  style="width: 100%; height: 536px"
+                  style="width: 100%;"
                   :src="modules[1].form.pic"
                   :preview-src-list="[modules[1].form.pic]">
         </el-image>
@@ -42,7 +42,7 @@
                 <th>地点</th>
                 <th>能量（GeV）</th>
                 <th>储存环周长(m)</th>
-                <th>光束线/条</th>
+                <th>光束线</th>
                 <th>代际</th>
                 <th>发射度(nm.rad)</th>
                 <th>状态</th>
@@ -81,10 +81,10 @@
                 <th>地点</th>
                 <th>加速器技术</th>
                 <th>能量/GeV</th>
-                <th>波长范围/nm</th>
+                <th>光子能量</th>
                 <th>重复频率/Hz</th>
                 <th>设施长度/m</th>
-                <th>实验站/个</th>
+                <th>实验站</th>
                 <th>状态</th>
                 <th>建成时间</th>
               </tr>
@@ -113,7 +113,8 @@
                   colspan="20">暂无数据</td>
             </tr>
           </table>
-          <div class="copyright">全球先进光源页面所刊载内容，包括图片、文字、数据源自相关设施官方网站、宣传手册，以及国际原子能机构（IAEA）网站公开数据，由深圳综合粒子设施研究院及中国科学学与科技政策研究会科技基础设施专业委员会共同汇总整理而来。相关内容供访问者学习、研究，如需转载或引用，须声明内容来源。</div>
+          <div class="copyright"
+               v-html="modules[4].form.des"></div>
         </div>
       </div>
     </div>
@@ -183,12 +184,15 @@ export default {
         }
     }
 }
-.block-pic {
+/deep/.block-pic {
     transition: 0.3s;
     height: auto;
     &.br {
         border-radius: 270px;
     }
+    img {
+        object-fit: cover;
+    }
     &:hover {
         transform: scale(1.05);
     }
diff --git a/src/pages/mission/index.vue b/src/pages/mission/index.vue
index 9a494e4..2bb6cb7 100644
--- a/src/pages/mission/index.vue
+++ b/src/pages/mission/index.vue
@@ -68,8 +68,8 @@
 <script>
 import mixins from "@/mixins/page";
 import Setting from "@/setting";
-import Util from "@/libs/util";
 import WOW from "wow.js";
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -84,23 +84,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
   },
@@ -110,9 +107,6 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
-.inner {
-    width: 1200px;
-}
 .item {
     position: relative;
     margin-bottom: 58px;
@@ -122,13 +116,14 @@ export default {
     }
     .texts {
         position: absolute;
-        top: 79px;
+        top: 50%;
         left: -34px;
         width: 532px;
         padding: 70px 38px 70px 55px;
         color: #333;
         background: rgba(255, 241, 231, 0.84);
         transition: 0.5s;
+        transform: translateY(-50%);
     }
     &:nth-child(2) .texts {
         left: auto;
@@ -189,9 +184,6 @@ export default {
     }
 }
 @media (max-width: 1200px) {
-    .inner {
-        width: 98%;
-    }
     .item {
         img {
             margin-left: 30px;
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index b8d914c..bdc73ea 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -76,7 +76,7 @@
         </ul>
         <div class="more wow fadeInDown"
              data-wow-delay="0.5s"
-             @click="toMore">More news ></div>
+             @click="toMore">more ></div>
       </div>
     </div>
 
@@ -169,8 +169,8 @@
                  onerror="javascript:this.src='./images/1.png';">
             <div class="texts">
               <div class="meta">
-                <p class="date">09</p>
-                <p class="year">2022-03</p>
+                <p class="date">{{ articles1[0].date }}</p>
+                <p class="year">{{ articles1[0].month }}</p>
               </div>
               <div>
                 <h6>{{ articles1[0].title }}</h6>
@@ -195,28 +195,28 @@
                     <img class="icon"
                          src="@/assets/images/mine.png"
                          alt="">
-                    {{ item.keynoteSpeaker }}
+                    <span>{{ item.keynoteSpeaker }}</span>
                   </p>
                   <p v-if="item.activityStartTime"
                      class="text">
                     <img class="icon"
                          src="@/assets/images/time.png"
                          alt="">
-                    Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
+                    <span>Time: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}</span>
                   </p>
                   <p v-if="item.onlineLocation"
                      class="text">
                     <img class="icon"
                          src="@/assets/images/online.png"
                          alt="">
-                    Onlone: {{ item.onlineLocation }}
+                    <span>Onlone: {{ item.onlineLocation }}</span>
                   </p>
                   <p v-if="item.offlineLocation"
                      class="text">
                     <img class="icon"
                          src="@/assets/images/location.png"
                          alt="">
-                    Address: {{ item.offlineLocation }}
+                    <span>Address: {{ item.offlineLocation }}</span>
                   </p>
                 </div>
               </li>
@@ -294,7 +294,15 @@ export default {
           if (json[5].form.column.length) {
             const { column, site, articleNum } = json[5].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
-              this.articles1 = Util.removeTag(data.slice(0, articleNum || 5))
+              if (data.length) {
+                // 把发布日期分割成年月和日，页面上要展示
+                if (data[0].releaseTime) {
+                  const date = data[0].releaseTime.split('-')
+                  data[0].date = date[2]
+                  data[0].month = date[0] + '-' + date[1]
+                }
+                this.articles1 = Util.removeTag(data.slice(0, articleNum || 5))
+              }
             }).catch(err => { })
           }
 
@@ -430,9 +438,6 @@ export default {
         }
     }
 }
-.lg {
-    width: 85.714rem;
-}
 /deep/.articles {
     width: 50%;
     .el-carousel__indicators--horizontal {
@@ -442,7 +447,7 @@ export default {
 }
 .lg {
     .intro {
-        margin-bottom: 4.57rem;
+        margin-bottom: 4rem;
     }
 }
 .news-banner {
@@ -512,8 +517,8 @@ export default {
     width: 100%;
 
     li {
-        flex: 1;
-        margin-right: 0.88rem;
+        width: 32.5%;
+        margin-right: 1%;
         box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
         border-radius: 6px;
         transition: 0.3s;
@@ -527,6 +532,7 @@ export default {
     .pic {
         width: 100%;
         height: auto;
+        object-fit: cover;
     }
     .texts {
         padding: 2rem 1.5rem;
@@ -536,7 +542,7 @@ export default {
         color: #666;
     }
     .des {
-        height: 3.75rem;
+        height: 3.7rem;
         margin: 10px 0;
         font-size: 1.25rem;
         font-family: SFProDisplay;
@@ -571,6 +577,7 @@ export default {
         .pic {
             transition: 0.3s;
             height: auto;
+            object-fit: cover;
             &:hover {
                 transform: scale(1.05);
             }
@@ -610,6 +617,7 @@ export default {
             width: 25rem;
             height: 12.3125rem;
             transition: 0.3s;
+            object-fit: cover;
             &:hover {
                 transform: scale(1.05);
             }
@@ -645,13 +653,14 @@ export default {
             }
         }
         .pic {
-            width: 8.25rem;
+            width: 8rem;
             height: auto;
-            margin-right: 1.75rem;
+            margin-right: 1.5rem;
+            object-fit: cover;
         }
         .texts {
-            width: 24.5rem;
-            margin-right: 3.75rem;
+            width: calc(100% - 15rem);
+            margin-right: 3.5rem;
         }
         h6 {
             margin-bottom: 10px;
@@ -666,12 +675,12 @@ export default {
         .des {
             font-size: 0.7rem;
             color: #666;
-            line-height: 1.3714rem;
+            line-height: 1.4rem;
             text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
             -webkit-line-clamp: 2;
         }
         .arrow {
-            width: 2.25rem;
+            width: 2rem;
         }
     }
 }
@@ -692,6 +701,7 @@ export default {
         .pic {
             transition: 0.3s;
             height: auto;
+            object-fit: cover;
             &:hover {
                 transform: scale(1.05);
             }
@@ -734,8 +744,8 @@ export default {
         width: 50%;
         li {
             display: flex;
-            padding: 0.8571rem;
-            margin-bottom: 0.7428rem;
+            padding: 0.8rem;
+            margin-bottom: 0.7rem;
             background-color: #fff;
             cursor: pointer;
             align-items: center;
@@ -749,19 +759,19 @@ export default {
             }
         }
         .pic {
-            width: 10.7428rem;
+            width: 10rem;
             height: auto;
-            margin-right: 1.6rem;
+            margin-right: 1.5rem;
+            object-fit: cover;
+        }
+        .texts {
+            width: calc(100% - 11.5rem);
         }
         h6 {
-            margin-bottom: 0.2714rem;
-            font-size: 1.1428rem;
+            margin-bottom: 5px;
+            font-size: 1rem;
             color: #333;
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 1;
-            text-overflow: ellipsis;
-            overflow: hidden;
+            @include ellipsis();
         }
         .text {
             display: flex;
@@ -769,6 +779,9 @@ export default {
             &:last-child {
                 margin-bottom: 0;
             }
+            span {
+                @include ellipsis();
+            }
         }
         .icon {
             margin-right: 5px;
@@ -781,6 +794,25 @@ export default {
         overflow-x: scroll;
         display: -webkit-box;
     }
+    .shop-shows {
+        .left {
+            width: 50%;
+        }
+        .right {
+            width: 48%;
+        }
+        .card-list {
+            .pic {
+                margin-right: 1rem;
+            }
+            .texts {
+                width: calc(100% - 11rem);
+                margin-right: 1rem;
+            }
+        }
+    }
+}
+@media (max-width: 640px) {
     .block {
         padding: 50px 0;
         .inner {
@@ -816,952 +848,40 @@ export default {
                 font-size: 15px;
                 margin-bottom: 50px;
             }
-            .shop-shows {
-                flex-direction: column;
-                .left {
-                    width: 95%;
-                    margin: 0 auto;
-                }
-                .right {
-                    width: 93%;
-                    margin: 20px auto;
-                    .show-card {
-                        flex-direction: column;
-                        li {
-                            width: 100%;
-                            .pic {
-                                width: 100%;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .texts {
-                                margin-right: 30px;
-                            }
-                        }
-                    }
-                }
-            }
         }
     }
-}
-
-@media (min-width: 280px) and (max-width: 1200px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
-            .el-carousel__container {
-                height: 15rem;
-            }
-            img {
-                height: 15rem;
-            }
-        }
-    }
-    .banner-item .banner-name {
-        font-size: 1.5rem;
-    }
-    .newsTab {
-        li {
-            padding: 15px 10px;
-            font-size: 15px;
-            margin: 0;
+    .shop-shows {
+        flex-direction: column;
+        .left {
+            width: 100%;
         }
-    }
-    .block {
-        padding: 20px 0;
-        .inner {
-            width: 90%;
-            .news-banner {
-                img {
-                    height: 20rem;
-                }
-            }
-            .b-title {
-                margin-bottom: 20px;
-            }
-            .intro {
-                margin-bottom: 20px;
-            }
-            .shop-shows {
-                .left {
-                    img {
-                        height: 20rem;
-                    }
-                }
-            }
+        .right {
+            width: 100%;
+            margin: 20px auto;
             .show-card {
-                .text {
-                    font-size: 13px;
-                    line-height: 20px;
-                    white-space: inherit;
-                }
-            }
-            .card-list {
-                padding: 20px 10px;
-                li {
-                    width: 100%;
-                    img {
-                        margin-right: 10px;
-                    }
-                    .texts {
-                        margin-right: 10px;
-                        h6 {
-                            font-size: 15px;
-                            font-weight: bold;
-                            display: -webkit-box;
-                            -webkit-box-orient: vertical;
-                            -webkit-line-clamp: 3;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                            margin-bottom: 5px;
-                        }
-                    }
-                    .des {
-                        line-height: 15px;
-                    }
-                    .arrow {
-                        margin-right: 0;
-                    }
-                }
-            }
-            .shows {
                 flex-direction: column;
-                .left {
-                    width: 100%;
-                    .pic {
-                        height: 20rem;
-                    }
-                }
-                .card-list {
-                    width: 100%;
-                    padding: 20px 0;
-                    li {
-                        .pic {
-                            width: 100px;
-                            height: 7.5rem;
-                        }
-                        .texts {
-                            h6 {
-                                font-size: 15px;
-                                font-weight: bold;
-                                display: -webkit-box;
-                                -webkit-box-orient: vertical;
-                                -webkit-line-clamp: 1;
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                            }
-                            .text {
-                                margin: 2px 0;
-                                font-size: 12px;
-                                display: -webkit-box;
-                                -webkit-box-orient: vertical;
-                                -webkit-line-clamp: 1;
-                                text-overflow: ellipsis;
-                                overflow: hidden;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (max-width: 320px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 6rem;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 6rem;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
                 li {
+                    width: 100%;
                     .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                img {
-                    height: auto;
-                }
-                .right {
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    .show-card {
-                        li {
-                            margin-top: 1.25rem;
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                flex-direction: row;
-                img {
-                    width: 50%;
-                    height: auto;
-                }
-                .right {
-                    margin-top: 0;
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 30% !important;
-                    margin-right: 0.5rem;
-                    margin: 0 0.5rem 0 0 !important;
-                    .pic {
-                        height: auto;
-                    }
-                    &:last-child() {
-                        margin-right: 0 !important;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    margin-right: 0.5rem;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    margin-top: 0;
-                    .show-card {
-                        li {
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                            &:nth-child(2) {
-                                margin-top: 0.5rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .card-list {
-                    padding: 0;
-                }
-            }
-        }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 12rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 12rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                flex-direction: row;
-                img {
-                    width: 50%;
-                    height: auto;
-                }
-                .right {
-                    margin-top: 0;
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 30% !important;
-                    margin-right: 0.5rem;
-                    margin: 0 0.5rem 0 0 !important;
-                    .pic {
-                        height: auto;
-                    }
-                    &:last-child() {
-                        margin-right: 0 !important;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    margin-right: 0.5rem;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    margin-top: 0;
-                    .show-card {
-                        li {
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                            &:nth-child(2) {
-                                margin-top: 0.5rem;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    .pic {
-                        height: auto;
+                        width: 100%;
                     }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .card-list {
-                    padding: 0;
                 }
             }
         }
     }
     .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
+        .shows {
+            flex-direction: column;
         }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 21.6rem;
-        }
-        /deep/ .el-carousel__container {
-            height: 21.6rem;
-        }
-        /deep/ .el-carousel__item {
-            height: 21.6rem;
-        }
-    }
-    .banner-item {
-        img {
-            height: 21.6rem !important;
-        }
-        .banner-name {
-            font-size: 1.5rem;
-            line-height: 1rem;
-            left: 2rem;
-            bottom: 2rem;
-        }
-    }
-    .newsTab {
-        .scollBox {
-            width: auto;
-            li {
-                padding: 1rem;
-                white-space: nowrap;
-            }
-        }
-    }
-    .block {
-        .inner {
-            .news-banner {
-                flex-direction: row;
-                img {
-                    width: 50%;
-                    height: auto;
-                }
-                .right {
-                    margin-top: 0;
-                    padding: 1.25rem 1.25rem 5rem;
-                }
-            }
-            .card {
-                flex-direction: row;
-                li {
-                    width: 30% !important;
-                    margin-right: 0.5rem;
-                    margin: 0 0.5rem 0 0 !important;
-                    .pic {
-                        height: auto;
-                    }
-                    &:last-child() {
-                        margin-right: 0 !important;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    margin-right: 0.5rem;
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .right {
-                    margin-top: 0;
-                    .show-card {
-                        flex-direction: row;
-                        li {
-                            .pic {
-                                height: auto;
-                            }
-                            .text {
-                                font-size: 1rem;
-                            }
-                            &:nth-child(2) {
-                                margin-top: 0;
-                            }
-                        }
-                    }
-                    .card-list {
-                        li {
-                            .pic {
-                                width: 30%;
-                            }
-                        }
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    .pic {
-                        height: auto;
-                    }
-                    .texts {
-                        padding: 1.25rem;
-                    }
-                }
-                .card-list {
-                    padding: 0;
-                }
-            }
+        .left {
+            width: 100%;
+            margin-right: 0;
         }
-    }
-    .conference {
-        .inner {
-            .shows {
-                .card-list {
-                    li {
-                        .pic {
-                            width: 35%;
-                            height: auto !important;
-                        }
-                    }
-                }
+        .card-list {
+            width: 100%;
+            margin-top: 20px;
+            .text {
+                margin-bottom: 4px;
             }
         }
     }
diff --git a/src/pages/newsPress/index.vue b/src/pages/newsPress/index.vue
index ddba4fa..419ab64 100644
--- a/src/pages/newsPress/index.vue
+++ b/src/pages/newsPress/index.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-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'">
+    <el-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">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -12,16 +17,25 @@
     </el-carousel>
 
     <div class="inner">
-      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable" :key="i">
-            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
-            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
+          <li v-if="item.isEnable"
+              :key="i">
+            <img class="pic wow fadeInLeft"
+                 data-wow-delay="0.1s"
+                 :src="item.pic"
+                 alt="">
+            <div class="texts wow fadeInRight"
+                 data-wow-delay="0.1s">
               <h6>{{ item.title }}</h6>
               <p class="sub">{{ item.subTitle }}</p>
               <div class="des">{{ item.des }}</div>
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(item.link.linkName)}"
+                   @click="openLink(item)">
             </div>
           </li>
         </template>
@@ -38,7 +52,7 @@ import Breadcrumb from '@/components/breadcrumb'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: []
     }
@@ -46,13 +60,13 @@ export default {
   components: {
     Breadcrumb
   },
-  mounted() {
+  mounted () {
     new WOW().init()
     this.getColumn()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -63,10 +77,10 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 获取父级所有栏目名称和id
-    getParent(data, id) {
+    getParent (data, id) {
       for (const e of data) {
         if (e.id == id) {
           this.routes.push({
@@ -99,532 +113,476 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
-.wrap{
-  /deep/ .el-carousel {
-    height: 24rem;
-    .el-carousel__container{
-      height: 24rem;
-    }
-    img{
-      height: 24rem;
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 24rem;
+        .el-carousel__container {
+            height: 24rem;
+        }
+        img {
+            height: 24rem;
+        }
     }
-  }
 }
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
+    .banner-name {
+        font-size: 2.16rem;
+    }
 }
-.block  {
-  padding: 3.85rem 0;
+.block {
+    padding: 3.85rem 0;
 }
 .inner {
-  /deep/ .el-breadcrumb__item {
-    font-size: 1.5rem;
-  }
-  padding-top: 35px;
-}
-.list {
-  margin: 2rem 0;
-  li {
-    position: relative;
-    &:nth-child(even) {
-      text-align: right;
-      .texts {
-        left: 0;
-        padding: 3rem 6rem 1.5rem 1.5rem;
-        text-align: left;
-      }
+    /deep/ .el-breadcrumb__item {
+        font-size: 1.5rem;
     }
-  }
-  .pic {
-    width: 47%;
-    height: auto;
-  }
-  .texts {
-    position: absolute;
-    top: 6rem;
-    right: -2rem;
-    width: 61%;
-    // height: 440px;
-    padding: 3rem 1.5rem 1.5rem 5rem;
-    background: rgba(247, 247, 247, .72);
-  }
-  h6 {
-    font-size: 2rem;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    font-weight: bold;
-    color: #3C3C3C;
-  }
-  .sub {
-    margin: 1rem 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    color: #1C1C1C;
-    line-height: 33px;
-  }
-  .des {
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    color: #3C3C3C;
-    line-height: 1.6rem;
-  }
-  img {
-    width: 3.3rem;
-    height: 3.3rem;
-  }
+    padding-top: 35px;
 }
-@media (max-width: 1520px) {
-  .list {
+.list {
+    margin: 2rem 0;
     li {
-      &:nth-child(even) {
-        .texts {
-          left: 25px;
+        position: relative;
+        &:nth-child(even) {
+            text-align: right;
+            .texts {
+                left: 0;
+                padding: 3rem 6rem 1.5rem 1.5rem;
+                text-align: left;
+            }
         }
-      }
     }
-    .texts {
-      right: 25px;
-      width: 55%;
-    }
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
+    .pic {
+        width: 47%;
+        height: auto;
     }
-    img{
-      height: 18rem;
+    .texts {
+        position: absolute;
+        top: 6rem;
+        right: -2rem;
+        width: 61%;
+        // height: 440px;
+        padding: 3rem 1.5rem 1.5rem 5rem;
+        background: rgba(247, 247, 247, 0.72);
+    }
+    h6 {
+        font-size: 2rem;
+        font-family: SFProDisplay-Bold, SFProDisplay;
+        font-weight: bold;
+        color: #3c3c3c;
+    }
+    .sub {
+        margin: 1rem 0;
+        font-size: 1.2rem;
+        font-weight: 600;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #1c1c1c;
+        line-height: 33px;
+    }
+    .des {
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        color: #3c3c3c;
+        line-height: 1.6rem;
     }
-  }
-}
-.banner-item .banner-name[data-v-1525064c] {
-  font-size: 1.5rem;
-}
-  
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 25rem !important;
-        }
-        .texts {
-          padding: 10px 5px 10px  !important;
-          top: 30px;
-          height: auto;
-          h6{
-            font-size: 1.5rem !important;
-          }
-          p {
-            font-size: 1rem;
-            margin: 5px 0 !important;
-            line-height: 1.5rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
-        }
-      }
+    img {
+        width: 3.3rem;
+        height: 3.3rem;
     }
-  }
 }
 
 @media (max-width: 1200px) {
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 500px;
-        }
-        .texts {
-          padding: 20px 10px 10px ;
-          top: 30px;
-          h6{
-            font-size: 2rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
+    .inner {
+        width: 95%;
+        .list {
+            li {
+                margin-top: 20px;
+                .pic {
+                    width: 100%;
+                    height: 500px;
+                }
+                .texts {
+                    padding: 20px 10px 10px;
+                    top: 30px;
+                    h6 {
+                        font-size: 2rem;
+                    }
+                    .sub {
+                        margin: 10px 0;
+                    }
+                    .des {
+                        margin-bottom: 10px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 1rem;
-          h6 {
-            font-size: 1rem !important;
-          }
-          .sub{
-             font-size: .85rem;
-          }
-          .des {
-            font-size: .85rem;
-            line-height: .85rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        /deep/ .el-breadcrumb__item {
+            font-size: 1rem;
+        }
+        .list {
+            li {
+                .pic {
+                    height: auto !important;
+                }
+                .texts {
+                    top: 1rem;
+                    h6 {
+                        font-size: 1rem !important;
+                    }
+                    .sub {
+                        font-size: 0.85rem;
+                    }
+                    .des {
+                        font-size: 0.85rem;
+                        line-height: 0.85rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
+    .inner {
+        /deep/ .el-breadcrumb__item {
             font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
+        .list {
+            li {
+                .pic {
+                    height: auto !important;
+                }
+                .texts {
+                    top: 4rem;
+                    h6 {
+                        font-size: 1.5rem !important;
+                    }
+                    .sub {
+                        font-size: 1.2rem;
+                    }
+                    .des {
+                        font-size: 1rem;
+                        line-height: 1rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
+    .inner {
+        /deep/ .el-breadcrumb__item {
             font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
+        .list {
+            li {
+                .pic {
+                    height: auto !important;
+                }
+                .texts {
+                    top: 4rem;
+                    h6 {
+                        font-size: 1.5rem !important;
+                    }
+                    .sub {
+                        font-size: 1.2rem;
+                    }
+                    .des {
+                        font-size: 1rem;
+                        line-height: 1rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
-    }
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 2rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
+    .inner {
+        /deep/ .el-breadcrumb__item {
             font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 2rem;
+                    h6 {
+                        font-size: 1.5rem !important;
+                    }
+                    .sub {
+                        font-size: 1.2rem;
+                    }
+                    .des {
+                        font-size: 1rem;
+                        line-height: 1rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 4rem;
+                    h6 {
+                        font-size: 2rem !important;
+                    }
+                    .sub {
+                        font-size: 1.5rem;
+                    }
+                    .des {
+                        font-size: 1.3rem;
+                        line-height: 1.3rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 6rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 6rem;
+                    h6 {
+                        font-size: 2rem !important;
+                    }
+                    .sub {
+                        font-size: 1.5rem;
+                    }
+                    .des {
+                        font-size: 1.3rem;
+                        line-height: 1.3rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 980px) and (max-width: 1200px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 8rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 8rem;
+                    h6 {
+                        font-size: 2rem !important;
+                    }
+                    .sub {
+                        font-size: 1.5rem;
+                    }
+                    .des {
+                        font-size: 1.3rem;
+                        line-height: 1.3rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/newsProcurement/index.vue b/src/pages/newsProcurement/index.vue
index 848cc90..2061fdb 100644
--- a/src/pages/newsProcurement/index.vue
+++ b/src/pages/newsProcurement/index.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-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'">
+    <el-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">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -12,16 +17,25 @@
     </el-carousel>
 
     <div class="inner">
-      <Breadcrumb ref="breadcrumb" :data.sync="routes"/>
+      <Breadcrumb ref="breadcrumb"
+                  :data.sync="routes" />
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable" :key="i">
-            <img class="pic wow fadeInLeft" data-wow-delay="0.1s" :src="item.pic" alt="">
-            <div class="texts wow fadeInRight" data-wow-delay="0.1s">
+          <li v-if="item.isEnable"
+              :key="i">
+            <img class="pic wow fadeInLeft"
+                 data-wow-delay="0.1s"
+                 :src="item.pic"
+                 alt="">
+            <div class="texts wow fadeInRight"
+                 data-wow-delay="0.1s">
               <h6>{{ item.title }}</h6>
               <p class="sub">{{ item.subTitle }}</p>
               <div class="des">{{ item.des }}</div>
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+              <img src="@/assets/images/arrow.png"
+                   alt=""
+                   :class="{'arrow': isLink(item.link.linkName)}"
+                   @click="openLink(item)">
             </div>
           </li>
         </template>
@@ -38,7 +52,7 @@ import Breadcrumb from '@/components/breadcrumb'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: []
     }
@@ -46,13 +60,13 @@ export default {
   components: {
     Breadcrumb
   },
-  mounted() {
+  mounted () {
     new WOW().init()
     this.getColumn()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -63,10 +77,10 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 获取父级所有栏目名称和id
-    getParent(data, id) {
+    getParent (data, id) {
       for (const e of data) {
         if (e.id == id) {
           this.routes.push({
@@ -99,533 +113,541 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
-.wrap{
-  /deep/ .el-carousel {
-    height: 24rem;
-    .el-carousel__container{
-      height: 24rem;
-    }
-    img{
-      height: 24rem;
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 24rem;
+        .el-carousel__container {
+            height: 24rem;
+        }
+        img {
+            height: 24rem;
+        }
     }
-  }
 }
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
+    .banner-name {
+        font-size: 2.16rem;
+    }
 }
-.block  {
-  padding: 3.85rem 0;
+.block {
+    padding: 3.85rem 0;
 }
 .inner {
-  padding-top: 35px;
-  /deep/ .el-breadcrumb__item {
-    font-size: 1.5rem;
-  }
+    padding-top: 35px;
+    /deep/ .el-breadcrumb__item {
+        font-size: 1.5rem;
+    }
 }
 .list {
-  margin: 2rem 0;
-  li {
-    position: relative;
-    &:nth-child(even) {
-      text-align: right;
-      .texts {
-        left: 0;
-        padding: 3rem 6rem 1.5rem 1.5rem;
-        text-align: left;
-      }
+    margin: 2rem 0;
+    li {
+        position: relative;
+        &:nth-child(even) {
+            text-align: right;
+            .texts {
+                left: 0;
+                padding: 3rem 6rem 1.5rem 1.5rem;
+                text-align: left;
+            }
+        }
+    }
+    .pic {
+        width: 47%;
+        height: auto;
+    }
+    .texts {
+        position: absolute;
+        top: 6rem;
+        right: -2rem;
+        width: 61%;
+        // height: 440px;
+        padding: 3rem 1.5rem 1.5rem 5rem;
+        background: rgba(247, 247, 247, 0.72);
+    }
+    h6 {
+        font-size: 2rem;
+        font-family: SFProDisplay-Bold, SFProDisplay;
+        font-weight: bold;
+        color: #3c3c3c;
+    }
+    .sub {
+        margin: 1rem 0;
+        font-size: 1.2rem;
+        font-weight: 600;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #1c1c1c;
+        line-height: 33px;
+    }
+    .des {
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        color: #3c3c3c;
+        line-height: 1.6rem;
+    }
+    img {
+        width: 3.3rem;
+        height: 3.3rem;
     }
-  }
-  .pic {
-    width: 47%;
-    height: auto;
-  }
-  .texts {
-    position: absolute;
-    top: 6rem;
-    right: -2rem;
-    width: 61%;
-    // height: 440px;
-    padding: 3rem 1.5rem 1.5rem 5rem;
-    background: rgba(247, 247, 247, .72);
-  }
-  h6 {
-    font-size: 2rem;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    font-weight: bold;
-    color: #3C3C3C;
-  }
-  .sub {
-    margin: 1rem 0;
-    font-size: 1.2rem;
-    font-weight: 600;
-    font-family: PingFangSC-Semibold, PingFang SC;
-    color: #1C1C1C;
-    line-height: 33px;
-  }
-  .des {
-    margin-bottom: 1rem;
-    font-size: 1rem;
-    color: #3C3C3C;
-    line-height: 1.6rem;
-  }
-  img {
-    width: 3.3rem;
-    height: 3.3rem;
-  }
 }
+
 @media (max-width: 1520px) {
-  .list {
-    li {
-      &:nth-child(even) {
+    .list {
+        li {
+            &:nth-child(even) {
+                .texts {
+                    left: 25px;
+                }
+            }
+        }
         .texts {
-          left: 25px;
+            right: 25px;
+            width: 55%;
         }
-      }
     }
-    .texts {
-      right: 25px;
-      width: 55%;
-    }
-  }
 }
 
 @media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 18rem;
+            .el-carousel__container {
+                height: 18rem;
+            }
+            img {
+                height: 18rem;
+            }
+        }
     }
-    img{
-      height: 18rem;
+    .banner-item .banner-name[data-v-1525064c] {
+        font-size: 1.5rem;
     }
-  }
-}
-.banner-item .banner-name[data-v-1525064c] {
-  font-size: 1.5rem;
-}
-  
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 25rem !important;
-        }
-        .texts {
-          padding: 10px 5px 10px  !important;
-          top: 30px;
-          height: auto;
-          h6{
-            font-size: 1.5rem !important;
-          }
-          p {
-            font-size: 1rem;
-            margin: 5px 0 !important;
-            line-height: 1.5rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
+
+    .inner {
+        width: 95%;
+        .list {
+            li {
+                margin-top: 20px;
+                .pic {
+                    width: 100%;
+                    height: 25rem !important;
+                }
+                .texts {
+                    padding: 10px 5px 10px !important;
+                    top: 30px;
+                    height: auto;
+                    h6 {
+                        font-size: 1.5rem !important;
+                    }
+                    p {
+                        font-size: 1rem;
+                        margin: 5px 0 !important;
+                        line-height: 1.5rem;
+                    }
+                    .sub {
+                        margin: 10px 0;
+                    }
+                    .des {
+                        margin-bottom: 10px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 @media (max-width: 1200px) {
-  .inner{
-    width: 95%;
-    .list{
-      li {
-        margin-top: 20px;
-        .pic {
-          width: 100%;
-          height: 500px;
-        }
-        .texts {
-          padding: 20px 10px 10px ;
-          top: 30px;
-          h6{
-            font-size: 2rem;
-          }
-          .sub{
-            margin: 10px 0;
-          }
-          .des{
-            margin-bottom: 10px;
-          }
+    .inner {
+        width: 95%;
+        .list {
+            li {
+                margin-top: 20px;
+                .pic {
+                    width: 100%;
+                    height: 500px;
+                }
+                .texts {
+                    padding: 20px 10px 10px;
+                    top: 30px;
+                    h6 {
+                        font-size: 2rem;
+                    }
+                    .sub {
+                        margin: 10px 0;
+                    }
+                    .des {
+                        margin-bottom: 10px;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
+
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 1rem;
-          h6 {
-            font-size: 1rem !important;
-          }
-          .sub{
-             font-size: .85rem;
-          }
-          .des {
-            font-size: .85rem;
-            line-height: .85rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        /deep/ .el-breadcrumb__item {
+            font-size: 1rem;
+        }
+        .list {
+            li {
+                .pic {
+                    height: auto !important;
+                }
+                .texts {
+                    top: 1rem;
+                    h6 {
+                        font-size: 1rem !important;
+                    }
+                    .sub {
+                        font-size: 0.85rem;
+                    }
+                    .des {
+                        font-size: 0.85rem;
+                        line-height: 0.85rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
+    .inner {
+        /deep/ .el-breadcrumb__item {
             font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
+        .list {
+            li {
+                .pic {
+                    height: auto !important;
+                }
+                .texts {
+                    top: 4rem;
+                    h6 {
+                        font-size: 1.5rem !important;
+                    }
+                    .sub {
+                        font-size: 1.2rem;
+                    }
+                    .des {
+                        font-size: 1rem;
+                        line-height: 1rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-    .list {
-      li {
-        .pic {
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
+    .inner {
+        /deep/ .el-breadcrumb__item {
             font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
+        .list {
+            li {
+                .pic {
+                    height: auto !important;
+                }
+                .texts {
+                    top: 4rem;
+                    h6 {
+                        font-size: 1.5rem !important;
+                    }
+                    .sub {
+                        font-size: 1.2rem;
+                    }
+                    .des {
+                        font-size: 1rem;
+                        line-height: 1rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .inner {
-    /deep/ .el-breadcrumb__item {
-      font-size: 1rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 2rem;
-          h6 {
-            font-size: 1.5rem !important;
-          }
-          .sub{
-             font-size: 1.2rem;
-          }
-          .des {
+    .inner {
+        /deep/ .el-breadcrumb__item {
             font-size: 1rem;
-            line-height: 1rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
         }
-      }
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 2rem;
+                    h6 {
+                        font-size: 1.5rem !important;
+                    }
+                    .sub {
+                        font-size: 1.2rem;
+                    }
+                    .des {
+                        font-size: 1rem;
+                        line-height: 1rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
+        }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 4rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 4rem;
+                    h6 {
+                        font-size: 2rem !important;
+                    }
+                    .sub {
+                        font-size: 1.5rem;
+                    }
+                    .des {
+                        font-size: 1.3rem;
+                        line-height: 1.3rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 6rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 6rem;
+                    h6 {
+                        font-size: 2rem !important;
+                    }
+                    .sub {
+                        font-size: 1.5rem;
+                    }
+                    .des {
+                        font-size: 1.3rem;
+                        line-height: 1.3rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 980px) and (max-width: 1200px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .inner {
-    .list {
-      li {
-        .pic {
-          width: 47%;
-          height: auto !important;
-        }
-        .texts  {
-          top: 8rem;
-          h6 {
-            font-size: 2rem !important;
-          }
-          .sub{
-             font-size: 1.5rem;
-          }
-          .des {
-            font-size: 1.3rem;
-            line-height: 1.3rem;
-          }
-          img {
-            width: 2rem;height: 2rem;
-          }
+    .inner {
+        .list {
+            li {
+                .pic {
+                    width: 47%;
+                    height: auto !important;
+                }
+                .texts {
+                    top: 8rem;
+                    h6 {
+                        font-size: 2rem !important;
+                    }
+                    .sub {
+                        font-size: 1.5rem;
+                    }
+                    .des {
+                        font-size: 1.3rem;
+                        line-height: 1.3rem;
+                    }
+                    img {
+                        width: 2rem;
+                        height: 2rem;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/org/index.vue b/src/pages/org/index.vue
index da7dfb4..8a8de7f 100644
--- a/src/pages/org/index.vue
+++ b/src/pages/org/index.vue
@@ -16,13 +16,14 @@
            v-html="modules[1].form.des"></p>
       </div>
       <img class="pic"
-           src="http://10.10.11.7/images/overviewSetup/1.png"
+           src="https://huorantech.com/images/overviewSetup/1.png"
            alt="">
     </div>
     <div class="lg-bg">
-      <img width="100%"
-           :src="modules[2].form.pic"
-           alt="">
+      <el-image style="width: 100%;"
+                :src="modules[2].form.pic"
+                :preview-src-list="[modules[2].form.pic]">
+      </el-image>
     </div>
   </div>
 </template>
@@ -30,6 +31,7 @@
 <script>
 import mixins from '@/mixins/page'
 import WOW from 'wow.js'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -44,23 +46,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
   }
@@ -74,7 +73,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 1294px;
+    width: 1200px;
     padding: 9px 86px 29px 116px;
     margin: 0 auto 50px;
     background: #fcfcfc;
@@ -100,7 +99,7 @@ export default {
     }
 }
 .lg-bg {
-    width: 65%;
+    width: 1200px;
     margin: 0 auto;
 }
 @media (max-width: 1300px) {
@@ -123,7 +122,7 @@ export default {
     .org {
         flex-direction: column;
         .pic {
-            width: 100%;
+            display: none;
         }
         .left {
             width: 100%;
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
index 5c35fe9..6612b5f 100644
--- a/src/pages/overview/index.vue
+++ b/src/pages/overview/index.vue
@@ -61,7 +61,7 @@
     <div class="block gray fac">
       <div class="inner">
         <div class="event">
-          <img src="http://10.10.11.7/images/overview/16.png"
+          <img src="https://huorantech.com/images/overview/16.png"
                alt=""
                class="pic">
           <div class="texts">
@@ -115,11 +115,11 @@
     </div>
 
     <div class="block scan gray">
-      <h2 class="b-title wow fadeInUp"
+      <h2 class="b-title wow fadeInUp hide-bd"
           v-html="modules[8].form.title"></h2>
       <p class="intro wow fadeInUp"
          data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
-      <div class="scan-inner">
+      <div class="inner scan-inner">
         <div class="left">
           <template v-for="(item, i) in modules[9].list">
             <div v-if="item.isEnable"
@@ -174,23 +174,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
   },
@@ -345,8 +342,6 @@ export default {
 .scan {
     .scan-inner {
         display: flex;
-        justify-content: flex-end;
-        padding-left: 19%;
     }
     .left {
         width: 45%;
@@ -386,81 +381,17 @@ export default {
     }
     .pic {
         width: 50%;
-        // height: 700px;
+        // object-fit: cover;
     }
 }
+
 @media (min-width: 2000px) {
     .scan {
         .scan-inner {
             justify-content: flex-start;
-            padding-left: 22%;
-        }
-        .left {
-            width: 37%;
-        }
-        .pic {
-            width: 800px;
-        }
-    }
-}
-@media (min-width: 2400px) {
-    .scan {
-        .scan-inner {
-            padding-left: 24%;
-        }
-    }
-}
-@media (min-width: 2500px) {
-    .scan {
-        .scan-inner {
-            padding-left: 26%;
-        }
-    }
-}
-@media (min-width: 2800px) {
-    .scan {
-        .scan-inner {
-            padding-left: 29%;
         }
     }
 }
-@media (min-width: 3500px) {
-    .scan {
-        .scan-inner {
-            padding-left: 35%;
-        }
-        .left {
-            width: 32%;
-        }
-    }
-}
-@media (min-width: 5000px) {
-    .scan {
-        .scan-inner {
-            padding-left: 39.5%;
-        }
-        .left {
-            width: 20%;
-        }
-    }
-}
-@media (min-width: 6000px) {
-    .scan {
-        .scan-inner {
-            padding-left: 42%;
-        }
-    }
-}
-@media (max-width: 1800px) {
-    .scan .scan-inner {
-        padding-left: 14%;
-    }
-}
-@media (max-width: 1500px) {
-    .scan .scan-inner {
-        padding-left: 10%;
-    }
-}
 @media (max-width: 1400px) {
     .history {
         .texts {
@@ -479,14 +410,12 @@ export default {
     .scan {
         .scan-inner {
             flex-direction: column;
-            padding: 0 10%;
         }
         .left {
             width: 100%;
         }
         .pic {
             width: 100%;
-            height: auto;
             margin-top: 2rem;
         }
     }
@@ -522,6 +451,12 @@ export default {
     }
 }
 @media (max-width: 750px) {
+    .hide-bd:after {
+        display: none;
+    }
+    .block {
+        padding: 50px 0;
+    }
     .core {
         .texts {
             position: static;
@@ -532,5 +467,12 @@ export default {
             background: #333;
         }
     }
+    .fac {
+        .event {
+            .pic {
+                display: none;
+            }
+        }
+    }
 }
 </style>
diff --git a/src/pages/overviewDevHistory/index.vue b/src/pages/overviewDevHistory/index.vue
index 3bddad6..231c86d 100644
--- a/src/pages/overviewDevHistory/index.vue
+++ b/src/pages/overviewDevHistory/index.vue
@@ -45,10 +45,13 @@
                     <p class="date">{{ e.title }}</p>
                     <p class="text">{{ e.des }}</p>
                   </div>
-                  <img v-if="e.pic"
-                       :src="e.pic"
-                       alt=""
-                       class="pic">
+                  <div class="pic-wrap">
+                    <el-image v-if="e.pic"
+                              class="pic"
+                              :src="e.pic"
+                              :preview-src-list="[e.pic]">
+                    </el-image>
+                  </div>
                 </li>
               </template>
             </ul>
@@ -63,6 +66,7 @@
 import mixins from '@/mixins/page'
 import overview from '@/mixins/overview'
 import WOW from 'wow.js'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins, overview],
   data () {
@@ -86,8 +90,8 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 .wrap {
-    background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
-        url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
+    background: url(https://huorantech.com/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
+        url(https://huorantech.com/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
 }
 .single-banner {
     .texts {
@@ -141,7 +145,7 @@ export default {
                     content: '';
                     width: 18px;
                     height: 18px;
-                    background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat;
+                    background: url(https://huorantech.com/images/overviewDevHistory/3.png) no-repeat;
                     margin-right: 20px;
                 }
             }
@@ -198,12 +202,18 @@ export default {
                 transform: rotate(45deg);
             }
         }
-        .pic {
+        .pic-wrap {
             width: 17.5rem;
             height: 9.75rem;
+            text-align: center;
+        }
+        .pic {
+            // width: 17.5rem;
+            height: 100%;
         }
     }
 }
+
 @media (max-width: 1200px) {
     .tab-content {
         width: 90%;
diff --git a/src/pages/overviewIntro/index.vue b/src/pages/overviewIntro/index.vue
index 8287459..3350382 100644
--- a/src/pages/overviewIntro/index.vue
+++ b/src/pages/overviewIntro/index.vue
@@ -19,15 +19,15 @@
     </ul>
 
     <div class="tab-content">
-      <div class="intro">
+      <div class="inner intro">
         <img class="pic"
-             src="http://10.10.11.7/images/overviewIntro/1.png"
+             :src="modules[1].form.pic"
              alt="">
         <div class="right">
           <div class="relative">
             <h6 v-html="modules[1].form.title"></h6>
             <img class="title-bg"
-                 src="http://10.10.11.7/images/overviewIntro/2.png"
+                 src="https://huorantech.com/images/overviewIntro/2.png"
                  alt="">
           </div>
           <div class="text"
@@ -92,13 +92,14 @@ export default {
     padding-top: 3.85rem;
     .intro {
         display: flex;
+        align-items: center;
         margin-bottom: 5.5rem;
         .pic {
-            width: 40%;
-            margin-right: 2.5rem;
+            width: 49%;
+            margin-right: 2%;
         }
         .right {
-            width: 40%;
+            width: 49%;
         }
         h6 {
             position: relative;
@@ -112,7 +113,7 @@ export default {
         }
         .text {
             margin-top: 2rem;
-            font-size: 0.99rem;
+            font-size: 1rem;
             color: #020202;
             line-height: 2;
         }
@@ -124,7 +125,7 @@ export default {
         padding-bottom: 2rem;
         color: #fff;
         text-align: center;
-        background: url(http://10.10.11.7/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
+        background: url(https://huorantech.com/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
         .mask {
             position: absolute;
             top: 0;
@@ -186,6 +187,7 @@ export default {
         right: 90%;
     }
 }
+
 @media (max-width: 1200px) {
     .tab-content {
         width: 90%;
diff --git a/src/pages/overviewLocation/index.vue b/src/pages/overviewLocation/index.vue
index 6cffa3a..0c9ea01 100644
--- a/src/pages/overviewLocation/index.vue
+++ b/src/pages/overviewLocation/index.vue
@@ -65,6 +65,7 @@ export default {
     }
     /deep/ img {
         width: 100% !important;
+        height: auto;
     }
 }
 .video {
diff --git a/src/pages/overviewSetup/index.vue b/src/pages/overviewSetup/index.vue
index ab25c6e..c9c3ab6 100644
--- a/src/pages/overviewSetup/index.vue
+++ b/src/pages/overviewSetup/index.vue
@@ -25,13 +25,14 @@
              v-html="modules[1].form.des"></p>
         </div>
         <img class="pic"
-             src="http://10.10.11.7/images/overviewSetup/1.png"
+             src="https://huorantech.com/images/overviewSetup/1.png"
              alt="">
       </div>
       <div class="lg-bg">
-        <img width="100%"
-             :src="modules[2].form.pic"
-             alt="">
+        <el-image style="width: 100%;"
+                  :src="modules[2].form.pic"
+                  :preview-src-list="[modules[2].form.pic]">
+        </el-image>
       </div>
 
     </div>
@@ -74,7 +75,7 @@ export default {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    width: 1294px;
+    width: 1200px;
     padding: 9px 86px 29px 116px;
     margin: 0 auto 50px;
     background: #fcfcfc;
@@ -97,10 +98,11 @@ export default {
     .pic {
         width: 320px;
         height: 282px;
+        object-fit: cover;
     }
 }
 .lg-bg {
-    width: 85%;
+    width: 1200px;
     margin: 0 auto;
 }
 @media (max-width: 1200px) {
@@ -111,13 +113,15 @@ export default {
             padding: 15px;
             flex-direction: column;
             .pic {
-                width: 100%;
-                height: auto;
+                display: none;
             }
             .left {
                 width: 100%;
             }
         }
     }
+    .lg-bg {
+        width: 90%;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/overviewTrailer/index.vue b/src/pages/overviewTrailer/index.vue
index 56d6b66..970bec7 100644
--- a/src/pages/overviewTrailer/index.vue
+++ b/src/pages/overviewTrailer/index.vue
@@ -84,6 +84,7 @@ export default {
     color: #020202;
     line-height: 1.6rem;
 }
+
 @media (max-width: 1200px) {
     .tab-content {
         width: 95%;
diff --git a/src/pages/publication/index.vue b/src/pages/publication/index.vue
index 3fb16df..269008d 100644
--- a/src/pages/publication/index.vue
+++ b/src/pages/publication/index.vue
@@ -1,12 +1,11 @@
 <template>
   <div class="wrap">
-    <div class="banner">
-      <img width="100%"
-           height="280"
+    <div class="single-banner">
+      <img class="banner-img"
            :src="info.columnBanner"
            alt="" />
       <div class="texts">
-        <p class="text">{{ info.columnName }}</p>
+        <h6 class="banner-title">{{ info.columnName }}</h6>
       </div>
     </div>
 
@@ -38,6 +37,7 @@ import mixins from '@/mixins/article'
 import Thesis from './thesis'
 import Patent from './patent'
 import Monograph from './monograph'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -112,25 +112,27 @@ export default {
 .wrap {
     background-color: #f9f9f9;
 }
-.banner {
+.single-banner {
     position: relative;
-    height: 280px;
     color: #fff;
+    .banner-img {
+        width: 100%;
+        height: 24rem;
+        object-fit: cover;
+    }
     .texts {
         position: absolute;
-        top: 123px;
-        left: 243px;
+        top: 160px;
+        left: 267px;
     }
-
-    .text {
-        font-size: 3.42rem;
-        font-weight: 600;
-        @include ellipsis;
+    .banner-title {
+        margin-bottom: 19px;
+        font-size: 2.2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
     }
-
-    .sub {
-        margin-top: 10px;
-        font-size: 2rem;
+    .banner-des {
+        font-size: 1.2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
     }
 }
 .tabs {
@@ -158,11 +160,10 @@ export default {
     margin: 0 auto;
 }
 @media (max-width: 1200px) {
-    .banner {
+    .single-banner {
         .texts {
-            .text {
-                font-size: 1.5rem;
-            }
+            top: 10rem;
+            left: 6rem;
         }
     }
     .tabs {
@@ -179,12 +180,4 @@ export default {
         margin: 0 auto;
     }
 }
-@media (max-width: 320px) {
-    .banner {
-        .texts {
-            left: 6rem;
-            top: 6rem;
-        }
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/publication/monograph.vue b/src/pages/publication/monograph.vue
index 451768c..c704856 100644
--- a/src/pages/publication/monograph.vue
+++ b/src/pages/publication/monograph.vue
@@ -3,8 +3,7 @@
     <div class="forms">
       <div class="item">
         <span class="label">{{$t('column.Publicationtime')}}：</span>
-        <el-date-picker style="width: 300px"
-                        v-model="form.publicationYear"
+        <el-date-picker v-model="form.publicationYear"
                         type="year"
                         :placeholder="$t('column.pleaseSelectThePublicationTime')"
                         format="yyyy"
@@ -132,4 +131,18 @@ export default {
         cursor: pointer;
     }
 }
+@media (max-width: 640px) {
+    .forms {
+        flex-direction: column;
+        align-items: flex-start;
+        .item {
+            display: flex;
+            margin-bottom: 20px;
+            margin-right: 0;
+        }
+        .search {
+            width: 100%;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/publication/patent.vue b/src/pages/publication/patent.vue
index 5cd3eaa..5a55759 100644
--- a/src/pages/publication/patent.vue
+++ b/src/pages/publication/patent.vue
@@ -25,15 +25,10 @@
         </el-date-picker>
       </div>
       <div class="search">
-        <el-tooltip class="item"
-                    effect="dark"
-                    :content="$t('column.pleaseEnterPatentOfficer')"
-                    placement="top-start">
-          <input type="text"
-                 :placeholder="$t('column.pleaseEnterPatentOfficer')"
-                 v-model="form.patentQueryKeyWord"
-                 clearable>
-        </el-tooltip>
+        <input type="text"
+               :placeholder="$t('column.pleaseEnterPatentOfficer')"
+               v-model="form.patentQueryKeyWord"
+               clearable>
       </div>
     </div>
 
@@ -59,7 +54,7 @@
                        align="center"
                        min-width="150"></el-table-column>
       <el-table-column prop="applicationDate"
-                       :label="$t('column.ApplicationDate')"
+                       :label="$t('column.applicationDate')"
                        align="center"
                        min-width="150"></el-table-column>
       <el-table-column prop="dateOfAuthorization"
@@ -160,4 +155,18 @@ export default {
         cursor: pointer;
     }
 }
+@media (max-width: 640px) {
+    .forms {
+        flex-direction: column;
+        align-items: flex-start;
+        .item {
+            display: flex;
+            margin-bottom: 20px;
+            margin-right: 0;
+        }
+        .search {
+            width: 100%;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/publication/single.vue b/src/pages/publication/single.vue
index ecebaab..7dfb5a1 100644
--- a/src/pages/publication/single.vue
+++ b/src/pages/publication/single.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="wrap">
     <div class="banner">
-      <img width="100%" height="280" src="@/assets/images/publication-bg.png" alt="" />
+      <img width="100%"
+           height="280"
+           src="@/assets/images/publication-bg.png"
+           alt="" />
       <div class="texts">
         <p class="text">{{ info.columnName }}</p>
       </div>
@@ -11,11 +14,14 @@
       <!-- <Breadcrumb style="margin-bottom: 30px" ref="breadcrumb" :data.sync="routes"/> -->
       <!-- 根据栏目的listStyleId判断是哪个列表样式，这个出版物页面只显示下面三个列表样式 -->
       <!-- 论文 -->
-      <Thesis v-if="type === 46" :id.sync="id" />
+      <Thesis v-if="type === 46"
+              :id.sync="id" />
       <!-- 专利 -->
-      <Patent v-if="type === 44" :id.sync="id" />
+      <Patent v-if="type === 44"
+              :id.sync="id" />
       <!-- 专著 -->
-      <Monograph v-if="type === 45" :id.sync="id" />
+      <Monograph v-if="type === 45"
+                 :id.sync="id" />
     </div>
   </div>
 </template>
@@ -26,9 +32,10 @@ import Thesis from './thesis'
 import Patent from './patent'
 import Monograph from './monograph'
 import Breadcrumb from '@/components/breadcrumb'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: [
         {
@@ -49,13 +56,13 @@ export default {
     Patent,
     Monograph
   },
-  mounted() {
+  mounted () {
     this.getColumn()
     this.getInfo()
   },
   methods: {
     // 获取栏目详情
-    getInfo() {
+    getInfo () {
       this.id &&
         this.$post(`${this.api.findColumn}?id=${this.id}`)
           .then(({ data }) => {
@@ -80,7 +87,7 @@ export default {
         .catch((err) => { });
     },
     // 获取父级
-    getParent(data, parent = {}) {
+    getParent (data, parent = {}) {
       for (const e of data) {
         if (e.id == this.id) {
           this.parent = parent
@@ -95,49 +102,38 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-  background-color: #f9f9f9;
+    background-color: #f9f9f9;
 }
 .banner {
-  position: relative;
-  height: 280px;
-  color: #fff;
-  .texts {
-    position: absolute;
-    top: 123px;
-    left: 243px;
-  }
+    position: relative;
+    height: 280px;
+    color: #fff;
+    .texts {
+        position: absolute;
+        top: 123px;
+        left: 243px;
+    }
 
-  .text {
-    font-size: 3.42rem;
-    font-weight: 600;
-    @include ellipsis;
-  }
+    .text {
+        font-size: 3.42rem;
+        font-weight: 600;
+        @include ellipsis;
+    }
 
-  .sub {
-    margin-top: 10px;
-    font-size: 2rem;
-  }
+    .sub {
+        margin-top: 10px;
+        font-size: 2rem;
+    }
 }
 .tab-content {
-  width: 1000px;
-  padding: 20px 0;
-  margin: 0 auto;
+    width: 1000px;
+    padding: 20px 0;
+    margin: 0 auto;
 }
 @media (max-width: 1200px) {
-  .banner {
-    .texts {
-      .text {
-        font-size: 1.5rem;
-      }
+    .tab-content {
+        width: 90%;
+        margin: 0 auto;
     }
-  }
-}
-@media (max-width: 320px) {
-  .banner {
-    .texts {
-      left: 6rem;
-      top: 6rem;
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/publication/thesis.vue b/src/pages/publication/thesis.vue
index 5452ce4..2014718 100644
--- a/src/pages/publication/thesis.vue
+++ b/src/pages/publication/thesis.vue
@@ -3,30 +3,31 @@
     <div class="forms">
       <div class="item">
         <span class="label">{{$t('column.publicationyear')}}：</span>
-        <el-date-picker
-          style="width: 300px"
-          v-model="form.publicationYear"
-          type="year"
-          :placeholder="$t('column.pleaseSelectThePublicationTime')"
-          format="yyyy"
-          value-format="yyyy"
-          clearable
-          @change="initData">
+        <el-date-picker v-model="form.publicationYear"
+                        type="year"
+                        :placeholder="$t('column.pleaseSelectThePublicationTime')"
+                        format="yyyy"
+                        value-format="yyyy"
+                        clearable
+                        @change="initData">
         </el-date-picker>
       </div>
       <div class="search">
-        <el-tooltip class="item" effect="dark" :content="$t('column.PleaseEnterThePaperName')" placement="top-start">
-          <input type="text" :placeholder="$t('column.PleaseEnterThePaperName')" v-model="form.paperQueryKeyWord" clearable>
-        </el-tooltip>
+        <input type="text"
+               :placeholder="$t('column.PleaseEnterThePaperName')"
+               v-model="form.paperQueryKeyWord"
+               clearable>
       </div>
     </div>
 
     <ul class="list">
-      <li v-for="(item, i) in articles" :key="i" @click="$parent.toArtice(item)">
+      <li v-for="(item, i) in articles"
+          :key="i"
+          @click="$parent.toArtice(item)">
         <h6>{{ item.title }}</h6>
         <p class="meta">{{$t('column.author')}}: {{ item.author }}</p>
         <p class="meta">{{$t('column.journalName')}}: {{ item.periodicalName }}</p>
-        <p class="meta">{{$t('column.yearOfPublication')}}: {{ item.publicationYear }} &nbsp; &nbsp; {{$t('column.rollUp')}}: {{ item.reel }}   &nbsp; &nbsp; {{$t('column.documentNumber')}}: {{ item.documentNumber }}</p>
+        <p class="meta">{{$t('column.yearOfPublication')}}: {{ item.publicationYear }} &nbsp; &nbsp; {{$t('column.rollUp')}}: {{ item.reel }} &nbsp; &nbsp; {{$t('column.documentNumber')}}: {{ item.documentNumber }}</p>
       </li>
     </ul>
   </div>
@@ -36,7 +37,7 @@
 import Util from '@/libs/util';
 export default {
   props: ['id'],
-  data() {
+  data () {
     return {
       searchTimer: null,
       form: {
@@ -51,7 +52,7 @@ export default {
     }
   },
   watch: {
-    id() {
+    id () {
       this.id && this.initData()
     },
     'form.paperQueryKeyWord': function (val) {
@@ -61,7 +62,7 @@ export default {
       }, 500);
     }
   },
-  mounted() {
+  mounted () {
     this.initData()
   },
   methods: {
@@ -89,22 +90,36 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/page/publication.scss";
+@import '../../styles/page/publication.scss';
 .list {
-  li {
-    padding: 30px;
-    margin-bottom: 15px;
-    background-color: #fff;
-    cursor: pointer;
-  }
-  h6 {
-    margin-bottom: 10px;
-    font-size: 1.2rem;
-  }
-  .meta {
-    font-size: 1rem;
-    color: #666;
-    line-height: 30px;
-  }
+    li {
+        padding: 30px;
+        margin-bottom: 15px;
+        background-color: #fff;
+        cursor: pointer;
+    }
+    h6 {
+        margin-bottom: 10px;
+        font-size: 1.2rem;
+    }
+    .meta {
+        font-size: 1rem;
+        color: #666;
+        line-height: 30px;
+    }
+}
+@media (max-width: 640px) {
+    .forms {
+        flex-direction: column;
+        align-items: flex-start;
+        .item {
+            display: flex;
+            margin-bottom: 20px;
+            margin-right: 0;
+        }
+        .search {
+            width: 100%;
+        }
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/publish/show.vue b/src/pages/publish/show.vue
index 8efa097..791a46f 100644
--- a/src/pages/publish/show.vue
+++ b/src/pages/publish/show.vue
@@ -51,27 +51,6 @@
               <p class="name">DOI</p>
               <p class="val">{{ form.doi }}</p>
             </template>
-
-            <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)">
-                <p class="text">{{ item.title }}</p>
-                <span class="date">{{ item.releaseTime }}</span>
-              </li>
-            </ul>
-
-            <p class="l-title">{{$t('column.latestNews')}}</p>
-            <ul class="list">
-              <li v-for="(item, i) in news"
-                  :key="i"
-                  @click="toArtice(item)">
-                <p class="text">{{ item.title }}</p>
-                <span class="date">{{ item.releaseTime }}</span>
-              </li>
-            </ul>
           </div>
         </div>
       </div>
diff --git a/src/pages/research/index.vue b/src/pages/research/index.vue
index e4062b1..537fc49 100644
--- a/src/pages/research/index.vue
+++ b/src/pages/research/index.vue
@@ -1,10 +1,16 @@
 <template>
-  <div class="wrap" v-if="modules.length>=1">
-    <el-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'">
+  <div class="wrap"
+       v-if="modules.length>=1">
+    <el-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">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -13,12 +19,22 @@
 
     <div class="block">
       <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>
+      <p class="intro wow fadeInUp"
+         data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
       <ul class="area">
-        <li v-for="(item, i) in modules[2].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
-          <img :src="item.pic" alt="" class="pic">
+        <li v-for="(item, i) in modules[2].list"
+            :key="i"
+            class="wow fadeInDown"
+            :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+            :class="{'cursor-pointer': isLink(item.link.linkName)}"
+            @click="openLink(item)">
+          <img :src="item.pic"
+               alt=""
+               class="pic">
           <div class="texts">
-            <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')" alt="" class="icon">
+            <img :src="require('@/assets/images/research/res' + (i + 1) + '-1.png')"
+                 alt=""
+                 class="icon">
             <h6>{{ item.title }}</h6>
             <p class="des">{{ item.des }}</p>
           </div>
@@ -29,23 +45,37 @@
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[3].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[3].form.des }}</p>
         <ul class="group">
-          <li v-for="(item, i) in modules[4].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+          <li v-for="(item, i) in modules[4].list"
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="text">{{ item.title }}</p>
           </li>
         </ul>
       </div>
     </div>
-    
+
     <div class="block">
       <div class="inner news-inner">
         <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
         <ul class="news">
-          <li v-for="(item, i) in modules[6].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+          <li v-for="(item, i) in modules[6].list"
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <div class="des">{{ item.des }}</div>
@@ -64,17 +94,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
 
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -85,7 +115,7 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -93,562 +123,974 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
-.wrap{
-  /deep/ .el-carousel {
-    height: 24rem;
-    .el-carousel__container{
-      height: 24rem;
-    }
-    img{
-      height: 24rem;
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 24rem;
+        .el-carousel__container {
+            height: 24rem;
+        }
+        img {
+            height: 24rem;
+        }
     }
-  }
 }
 .banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
+    .banner-name {
+        font-size: 2.16rem;
+    }
 }
-.block  {
-  padding: 3.85rem 0;
-  .intro  {
-    margin-bottom: 4rem;
-  }
+.block {
+    padding: 3.85rem 0;
+    .intro {
+        margin-bottom: 4rem;
+    }
 }
 .area {
-  display: flex;
-  li {
-    position: relative;
-    width: 19%;
-    color: #fff;
-    background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
-    transition: .3s;
-    &:hover {
-      transform: translateY(20px);
-      .icon {
-        transform: rotateY(360deg);
-      }
-    }
-    &:nth-child(2) {
-      width: 21%;
-      margin-top: 70px;
-      .texts {
-        background: #2B1B1C;
-      }
-    }
-    &:nth-child(3) {
-      .texts {
-        background: #009C91;
-      }
-    }
-    &:nth-child(4) {
-      margin-top: 70px;
-      .texts {
-        background: #005388;
-      }
-    }
-    &:nth-child(5) {
-      width: 22%;
-      .texts {
-        background: #9A4E10;
-      }
+    display: flex;
+    li {
+        position: relative;
+        width: 19%;
+        color: #fff;
+        background: url(../../assets/images/research/res1.png) 0 0/100% 100% no-repeat;
+        transition: 0.3s;
+        &:hover {
+            transform: translateY(20px);
+            .icon {
+                transform: rotateY(360deg);
+            }
+        }
+        &:nth-child(2) {
+            width: 21%;
+            margin-top: 70px;
+            .texts {
+                background: #2b1b1c;
+            }
+        }
+        &:nth-child(3) {
+            .texts {
+                background: #009c91;
+            }
+        }
+        &:nth-child(4) {
+            margin-top: 70px;
+            .texts {
+                background: #005388;
+            }
+        }
+        &:nth-child(5) {
+            width: 22%;
+            .texts {
+                background: #9a4e10;
+            }
+        }
+    }
+    .pic {
+        width: 100%;
+        height: 32.65rem;
+        object-fit: cover;
+    }
+    .icon {
+        transition: 0.3s;
+    }
+    .texts {
+        width: 100%;
+        padding: 1rem 2rem;
+        background: #08577b;
+        overflow: hidden;
+    }
+    h6 {
+        font-size: 1.2rem;
+        white-space: nowrap;
+    }
+    .des {
+        font-size: 0.96rem;
+        color: rgba(255, 255, 255, 0.55);
     }
-  }
-  .pic {
-    width: 100%;
-    height: 32.65rem;
-  }
-  .icon {
-    transition: .3s;
-  }
-  .texts {
-    width: 100%;
-    padding: 1rem 2rem;
-    background: #08577B;
-    overflow: hidden;
-  }
-  h6 {
-    font-size: 1.2rem;
-    white-space: nowrap;
-  }
-  .des {
-    font-size: .96rem;
-    color: rgba(255,255,255,0.55);
-  }
 }
 .group {
-  display: flex;
-  flex-wrap: wrap;
-  li {
-    position: relative;
-    width: calc((100% - 56px) / 3);
-    margin: 0 1.4rem 1.95rem 0;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-      .text {
-        color: #fff;
-        background-color: #465f85;
-      }
+    display: flex;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        width: calc((100% - 56px) / 3);
+        margin: 0 1.4rem 1.95rem 0;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+            .text {
+                color: #fff;
+                background-color: #465f85;
+            }
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
     }
-    &:nth-child(3n) {
-      margin-right: 0;
+    img {
+        width: 100%;
+        height: auto;
+    }
+    .text {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 7.15rem;
+        padding: 0 1.5rem;
+        font-size: 1.44rem;
+        font-family: SFProDisplay-Bold, SFProDisplay;
+        font-weight: bold;
+        line-height: 2rem;
+        text-align: center;
+        color: #272727;
+        background-color: #fff;
+        transition: 0.3s;
     }
-  }
-  img {
-    width: 100%;
-    height: auto;
-  }
-  .text {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 7.15rem;
-    padding: 0 1.5rem;
-    font-size: 1.44rem;
-    font-family: SFProDisplay-Bold, SFProDisplay;
-    font-weight: bold;
-    line-height: 2rem;
-    text-align: center;
-    color: #272727;
-    background-color: #fff;
-    transition: .3s;
-  }
 }
 .news {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  li {
-    position: relative;
-    width: calc((100% - 56px) / 3);
-    padding: 11px;
-    margin-right: 1.4rem;
-    color: #333;
-    background-color: #fff;
-    box-shadow: 0px 5px 1rem 0px rgba(98,117,163,0.08);
-    border-radius: 10px;
-    transition: .3s;
-    &:hover {
-      transform: translateY(20px);
-    }
-    &:nth-child(3n) {
-      margin-right: 0;
-    }
-    &:hover {
-      color: #fff;
-      background-color: #0252D9;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    li {
+        position: relative;
+        width: calc((100% - 56px) / 3);
+        padding: 11px;
+        margin-right: 1.4rem;
+        color: #333;
+        background-color: #fff;
+        box-shadow: 0px 5px 1rem 0px rgba(98, 117, 163, 0.08);
+        border-radius: 10px;
+        transition: 0.3s;
+        &:hover {
+            transform: translateY(20px);
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        &:hover {
+            color: #fff;
+            background-color: #0252d9;
+        }
+    }
+    img {
+        width: 100%;
+        height: auto;
+    }
+    .texts {
+        padding: 0 0.9rem 2.5rem;
+    }
+    h6 {
+        margin: 1.75rem 0 0.6rem;
+        font-size: 1.04rem;
+        line-height: 1.65rem;
+    }
+    .des {
+        font-size: 0.88rem;
+        line-height: 1.3rem;
     }
-  }
-  img {
-    width: 100%;
-    height: auto;
-  }
-  .texts {
-    padding: 0 .9rem 2.5rem;
-  }
-  h6 {
-    margin: 1.75rem 0 .6rem;
-    font-size: 1.04rem;
-    line-height: 1.65rem;
-  }
-  .des {
-    font-size: .88rem;
-    line-height: 1.3rem;
-  }
 }
 
 @media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 18rem;
-    .el-carousel__container{
-      height: 18rem;
-    }
-    img{
-      height: 18rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 18rem;
+            .el-carousel__container {
+                height: 18rem;
+            }
+            img {
+                height: 18rem;
+            }
+        }
     }
-  }
-}
- .block{ 
-  padding: 50px 0;
-  .intro {
-    margin-bottom: 30px;
-  }
-  .area{
-    flex-direction: column;
-    li{
-      width: 95%;margin: 1.25rem auto;
+    .block {
+        padding: 50px 0;
+        .intro {
+            margin-bottom: 30px;
+        }
+        .area {
+            flex-direction: column;
+            li {
+                width: 95%;
+                margin: 1.25rem auto;
+            }
+        }
+        .group,
+        .news {
+            flex-direction: column;
+            li {
+                width: 95%;
+                margin: 20px auto;
+            }
+        }
     }
-  }
-  .group,.news{
-    flex-direction: column;
-    li {
-      width: 95%;
-      margin: 20px auto;
+    .area {
+        li {
+            height: auto;
+            .pic {
+                height: 20rem;
+            }
+            .texts {
+                height: 10rem;
+            }
+        }
     }
-  }
- }
- .area {
-  li {
-    height:  auto;
-    .pic{
-      height: 20rem;
+    .group img {
+        height: 20rem;
     }
-    .texts{
-      height: 10rem;
+    .news img {
+        height: 20rem;
     }
-  }
- }
- .group img {
-  height: 20rem;
- }
- .news img{
-  height: 20rem;
- }
 }
 @media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
+    .banner-item {
         img {
-          height: auto;
+            height: 12rem !important;
         }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
         }
-      }
     }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
     }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            li {
+                .pic {
+                    height: 22rem;
+                }
+            }
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+}
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
+    .banner-item {
         img {
-          height: auto;
+            height: 12rem !important;
         }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
+    }
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            li {
+                .pic {
+                    height: auto;
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            flex-direction: row;
+            li {
+                width: 19%;
+                .pic {
+                    height: auto;
+                }
+            }
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+}
+@media (min-width: 768px) and (max-width: 980px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            flex-direction: row;
+            li {
+                width: calc((100% - 3rem) / 3);
+                margin: 0 0.8rem 1.95rem 0;
+                -webkit-transition: 0.3s;
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            flex-direction: row;
+            li {
+                width: 19%;
+                .pic {
+                    height: auto;
+                }
+            }
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
         img {
-          height: auto;
+            height: 12rem !important;
         }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
         }
-      }
     }
-    .area {
-      li {
-        .pic {
-          height: 22rem;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            flex-direction: row;
+            li {
+                width: calc((100% - 3rem) / 3);
+                margin: 0 0.8rem 1.95rem 0;
+                -webkit-transition: 0.3s;
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            flex-direction: row;
+            li {
+                width: 19%;
+                .pic {
+                    height: auto;
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 480px) and (max-width: 640px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
+
+@media (min-width: 280px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 18rem;
+            .el-carousel__container {
+                height: 18rem;
+            }
+            img {
+                height: 18rem;
+            }
+        }
     }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
+    .block {
+        padding: 50px 0;
+        .intro {
+            margin-bottom: 30px;
+        }
+        .area {
+            flex-direction: column;
+            li {
+                width: 95%;
+                margin: 1.25rem auto;
+            }
+        }
+        .group,
+        .news {
+            flex-direction: column;
+            li {
+                width: 95%;
+                margin: 20px auto;
+            }
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .area {
+        li {
+            height: auto;
+            .pic {
+                height: 20rem;
+            }
+            .texts {
+                height: 10rem;
+            }
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .group img {
+        height: 20rem;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .news img {
+        height: 20rem;
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
+}
+@media (max-width: 320px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
+    }
+    .banner-item {
         img {
-          height: auto;
+            height: 12rem !important;
         }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
         }
-      }
     }
-    .area {
-      li {
-        .pic {
-          height: auto;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      li {
+    .banner-item {
         img {
-          height: auto;
+            height: 12rem !important;
         }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
         }
-      }
     }
-    .area {
-      flex-direction: row;;
-      li {
-        width: 19%;
-        .pic {
-          height: auto;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            li {
+                .pic {
+                    height: 22rem;
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
+@media (min-width: 480px) and (max-width: 640px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            li {
+                .pic {
+                    height: auto;
+                }
+            }
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+}
+@media (min-width: 640px) and (max-width: 768px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      flex-direction: row;
-      li {
-        width: calc((100% - 3rem) / 3);
-        margin: 0 .8rem 1.95rem 0;
-        -webkit-transition: .3s;
+    .banner-item {
         img {
-          height: auto;
+            height: 12rem !important;
         }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
         }
-      }
     }
-    .area {
-      flex-direction: row;;
-      li {
-        width: 19%;
-        .pic {
-          height: auto;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            li {
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            flex-direction: row;
+            li {
+                width: 19%;
+                .pic {
+                    height: auto;
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 980px) and (max-width: 1200px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important; 
+@media (min-width: 768px) and (max-width: 980px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    .banner-item {
+        img {
+            height: 12rem !important;
+        }
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
+        }
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            flex-direction: row;
+            li {
+                width: calc((100% - 3rem) / 3);
+                margin: 0 0.8rem 1.95rem 0;
+                -webkit-transition: 0.3s;
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            flex-direction: row;
+            li {
+                width: 19%;
+                .pic {
+                    height: auto;
+                }
+            }
+        }
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+}
+@media (min-width: 980px) and (max-width: 1200px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
+        }
+        /deep/ .el-carousel__item {
+            height: 12rem !important;
+        }
     }
-  }
-  .block {
-    padding: 1.25rem 0 ;
-    .b-title  {
-      font-size: 1.5rem;
-      margin-bottom: 1rem;
-    }
-    .group ,.news{
-      flex-direction: row;
-      li {
-        width: calc((100% - 3rem) / 3);
-        margin: 0 .8rem 1.95rem 0;
-        -webkit-transition: .3s;
+    .banner-item {
         img {
-          height: auto;
+            height: 12rem !important;
         }
-        .text {
-          font-size: 1.5rem;
-          line-height: 1.8rem;
+        .banner-name {
+            font-size: 1.5rem;
+            line-height: 1rem;
+            left: 2rem;
+            bottom: 2rem;
         }
-      }
     }
-    .area {
-      flex-direction: row;;
-      li {
-        width: 19%;
-        .pic {
-          height: auto;
+    .block {
+        padding: 1.25rem 0;
+        .b-title {
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        .group,
+        .news {
+            flex-direction: row;
+            li {
+                width: calc((100% - 3rem) / 3);
+                margin: 0 0.8rem 1.95rem 0;
+                -webkit-transition: 0.3s;
+                img {
+                    height: auto;
+                }
+                .text {
+                    font-size: 1.5rem;
+                    line-height: 1.8rem;
+                }
+            }
+        }
+        .area {
+            flex-direction: row;
+            li {
+                width: 19%;
+                .pic {
+                    height: auto;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/researchTeam/index.vue b/src/pages/researchTeam/index.vue
index 1e423c3..31f7c24 100644
--- a/src/pages/researchTeam/index.vue
+++ b/src/pages/researchTeam/index.vue
@@ -31,20 +31,20 @@
                   :key="i"
                   @click="toArtice(item, modules[1].form)">
                 <div class="line">
-                  <img src="http://10.10.11.7/images/researchTeam/3.png"
+                  <img src="https://huorantech.com/images/researchTeam/3.png"
                        alt=""
                        class="icon">
                   <span class="bold">{{ item.title }}</span>
                   <span class="val">/ {{ item.post }}</span>
                 </div>
                 <div class="line">
-                  <img src="http://10.10.11.7/images/researchTeam/4.png"
+                  <img src="https://huorantech.com/images/researchTeam/4.png"
                        alt=""
                        class="icon">
                   <span class="text">专业 {{ item.major }}</span>
                 </div>
                 <div class="line">
-                  <img src="http://10.10.11.7/images/researchTeam/5.png"
+                  <img src="https://huorantech.com/images/researchTeam/5.png"
                        alt=""
                        class="icon">
                   <span class="text">荣誉 {{ item.honor }}</span>
@@ -209,7 +209,7 @@ export default {
             width: calc((100% - 10px) / 2);
             padding: 20px 30px;
             margin: 0 10px 10px 0;
-            background: url(http://10.10.11.7/images/researchTeam/2.png) 0 0 / cover no-repeat;
+            background: url(https://huorantech.com/images/researchTeam/2.png) 0 0 / cover no-repeat;
             cursor: pointer;
             &:nth-child(even) {
                 margin-right: 0;
diff --git a/src/pages/science/index.vue b/src/pages/science/index.vue
index 6434904..bc6e4bf 100644
--- a/src/pages/science/index.vue
+++ b/src/pages/science/index.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="wrap">
     <div class="single-banner">
-      <img class="banner-img" :src="modules[0].form.pic" alt="" />
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
         <p class="banner-des des">{{ modules[0].form.des }}</p>
@@ -10,37 +12,34 @@
 
     <div class="block">
       <div class="inner">
-        <div
-          class="item wow bounceInLeft"
-          data-wow-delay="0.5s"
-          :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
-          @click="openLink(modules[1].form)"
-        >
-          <img src="@/assets/images/science/1.png" alt="" />
+        <div class="item wow bounceInLeft"
+             data-wow-delay="0.5s"
+             :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }"
+             @click="openLink(modules[1].form)">
+          <img src="@/assets/images/science/1.png"
+               alt="" />
           <div class="texts">
             <h6>{{ modules[1].form.title }}</h6>
             <div class="des">{{ modules[1].form.des }}</div>
           </div>
         </div>
-        <div
-          class="item wow bounceInRight"
-          data-wow-delay="0.8s"
-          :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
-          @click="openLink(modules[2].form)"
-        >
-          <img src="@/assets/images/science/2.png" alt="" />
+        <div class="item wow bounceInRight"
+             data-wow-delay="0.8s"
+             :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }"
+             @click="openLink(modules[2].form)">
+          <img src="@/assets/images/science/2.png"
+               alt="" />
           <div class="texts rightText">
             <h6>{{ modules[2].form.title }}</h6>
             <div class="des">{{ modules[2].form.des }}</div>
           </div>
         </div>
-        <div
-          class="item wow bounceInLeft"
-          data-wow-delay="0.5s"
-          :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
-          @click="openLink(modules[3].form)"
-        >
-          <img src="@/assets/images/science/3.png" alt="" />
+        <div class="item wow bounceInLeft"
+             data-wow-delay="0.5s"
+             :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }"
+             @click="openLink(modules[3].form)">
+          <img src="@/assets/images/science/3.png"
+               alt="" />
           <div class="texts">
             <h6>{{ modules[3].form.title }}</h6>
             <div class="des">{{ modules[3].form.des }}</div>
@@ -58,36 +57,33 @@ import Util from "@/libs/util";
 import WOW from "wow.js";
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       routes: [],
     };
   },
-  mounted() {
+  mounted () {
     new WOW().init();
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                  ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
-        .catch((err) => {});
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
+        .catch((err) => { });
     },
   },
 };
@@ -95,333 +91,334 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 .inner {
-  width: 960px;
+    width: 960px;
 }
 .single-banner {
-  .banner-img {
-    height: 21.6rem;
-  }
-  .texts {
-    h6 {
-      font-size: 2.16rem;
-      margin-bottom: .95rem;
+    .banner-img {
+        height: 21.6rem;
     }
-    .banner-des {
-      font-size: .96rem;
+    .texts {
+        h6 {
+            font-size: 2.16rem;
+            margin-bottom: 0.95rem;
+        }
+        .banner-des {
+            font-size: 0.96rem;
+        }
     }
-  }
 }
-.block  {
-  padding: 3.85rem 0;
+.block {
+    padding: 3.85rem 0;
 }
 .item {
-  position: relative;
-  margin-bottom: 2.9rem;
-  width: 100%;
-  &:hover {
-    .texts {
-      color: #fff;
-      transform: scale(1.05);
-      background: #32b6e9 !important;
-    }
-  }
-  img {
+    position: relative;
+    margin-bottom: 2.9rem;
     width: 100%;
-    height: 22rem;
-  }
-  &:nth-child(2) .texts {
-    color: #fff;
-    background: #33b3c1;
-  }
-  &:nth-child(3) .texts {
-    color: #fff;
-    background: #e47c22;
-  }
-  &:nth-child(even) .texts {
-    left: auto;
-    right: -1.6rem;
-  }
-  .texts {
-    position: absolute;
-    top: 3.9rem;
-    left: -1.4rem;
-    width: 26.6rem;
-    padding: 3.5rem 1.9rem;
-    color: #333;
-    background: #fff6e9;
-    transition: 0.5s;
-  }
-  h6 {
-    margin-bottom: .875rem;
-    font-size: 1.6rem;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-  }
-  .des {
-    font-size: .88rem;
-  }
-}
-@media (max-width: 1200px) {
-  body {
-    width: 100% !important;
-  }
-  .inner {
-    width: 80%;
-  }
-  .item {
+    &:hover {
+        .texts {
+            color: #fff;
+            transform: scale(1.05);
+            background: #32b6e9 !important;
+        }
+    }
     img {
+        width: 100%;
+        height: 22rem;
+    }
+    &:nth-child(2) .texts {
+        color: #fff;
+        background: #33b3c1;
     }
-    .rightText {
-      right: 12px !important;
+    &:nth-child(3) .texts {
+        color: #fff;
+        background: #e47c22;
+    }
+    &:nth-child(even) .texts {
+        left: auto;
+        right: -1.6rem;
     }
     .texts {
-      width: 85%;
-      box-sizing: border-box;
-      left: -1rem;
-      &:nth-child(2) {
-        right: -1.5rem !important;
-      }
-      .des{
-        -webkit-line-clamp: inherit
-      }
+        position: absolute;
+        top: 3.9rem;
+        left: -1.4rem;
+        width: 26.6rem;
+        padding: 3.5rem 1.9rem;
+        color: #333;
+        background: #fff6e9;
+        transition: 0.5s;
+    }
+    h6 {
+        margin-bottom: 0.875rem;
+        font-size: 1.6rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+    }
+    .des {
+        font-size: 0.88rem;
     }
-  }
 }
-@media (max-width: 320px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
+
+@media (max-width: 1200px) {
+    body {
+        width: 100% !important;
     }
-  }
-  .block {
     .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-        h6 {
-          font-size: 1.2rem;
+        width: 80%;
+    }
+    .item {
+        img {
+        }
+        .rightText {
+            right: 12px !important;
         }
-        .des {
-          font-size: .75rem;
+        .texts {
+            width: 85%;
+            box-sizing: border-box;
+            left: -1rem;
+            &:nth-child(2) {
+                right: -1.5rem !important;
+            }
+            .des {
+                -webkit-line-clamp: inherit;
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
+@media (max-width: 320px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 12rem;
+            }
+            .texts {
+                top: 5rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
         }
-        .banner-des{
-          font-size: .85rem;
+    }
+    .block {
+        .inner {
+            img {
+                height: 18rem;
+            }
+            .texts {
+                padding: 1.25rem;
+                top: 1.5rem;
+                h6 {
+                    font-size: 1.2rem;
+                }
+                .des {
+                    font-size: 0.75rem;
+                }
+            }
         }
-      }
     }
-  }
-  .block {
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-        h6 {
-          font-size: 1.4rem;
+}
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 12rem;
+            }
+            .texts {
+                top: 5rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
         }
-        .des {
-          font-size: .75rem;
+    }
+    .block {
+        .inner {
+            img {
+                height: 18rem;
+            }
+            .texts {
+                padding: 1.25rem;
+                top: 1.5rem;
+                h6 {
+                    font-size: 1.4rem;
+                }
+                .des {
+                    font-size: 0.75rem;
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 375px) and (max-width: 480px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
-        }
-        .banner-des{
-          font-size: .85rem;
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 12rem;
+            }
+            .texts {
+                top: 5rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
         }
-      }
     }
-  }
-  .block {
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-        h6 {
-          font-size: 1.4rem;
-        }
-        .des {
-          font-size: .75rem;
+    .block {
+        .inner {
+            img {
+                height: 18rem;
+            }
+            .texts {
+                padding: 1.25rem;
+                top: 1.5rem;
+                h6 {
+                    font-size: 1.4rem;
+                }
+                .des {
+                    font-size: 0.75rem;
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 12rem;
+            }
+            .texts {
+                top: 5rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
         }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
     }
-  }
-  .block {
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-      }
+    .block {
+        .inner {
+            img {
+                height: 18rem;
+            }
+            .texts {
+                padding: 1.25rem;
+                top: 1.5rem;
+            }
+        }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 12rem;
+            }
+            .texts {
+                top: 5rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
         }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
     }
-  }
-  .block {
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-      }
+    .block {
+        .inner {
+            img {
+                height: 18rem;
+            }
+            .texts {
+                padding: 1.25rem;
+                top: 1.5rem;
+            }
+        }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 12rem;
+            }
+            .texts {
+                top: 5rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
         }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
     }
-  }
-  .block {
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-      }
+    .block {
+        .inner {
+            img {
+                height: 18rem;
+            }
+            .texts {
+                padding: 1.25rem;
+                top: 1.5rem;
+            }
+        }
     }
-  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
-  .wrap {
-    .single-banner {
-      .banner-img {
-        height: 12rem;
-      }
-      .texts {
-        top: 5rem;
-        left: 2rem;
-        .banner-title{
-          font-size: 1.5rem;
-          margin-bottom: .5rem;
+    .wrap {
+        .single-banner {
+            .banner-img {
+                height: 12rem;
+            }
+            .texts {
+                top: 5rem;
+                left: 2rem;
+                .banner-title {
+                    font-size: 1.5rem;
+                    margin-bottom: 0.5rem;
+                }
+                .banner-des {
+                    font-size: 0.85rem;
+                }
+            }
         }
-        .banner-des{
-          font-size: .85rem;
-        }
-      }
     }
-  }
-  .block {
-    .inner {
-      img {
-        height: 18rem;
-      }
-      .texts {
-        padding: 1.25rem;
-        top: 1.5rem;
-      }
+    .block {
+        .inner {
+            img {
+                height: 18rem;
+            }
+            .texts {
+                padding: 1.25rem;
+                top: 1.5rem;
+            }
+        }
     }
-  }
 }
 </style>
diff --git a/src/pages/scientific/index.vue b/src/pages/scientific/index.vue
index 395c1dd..c6b3596 100644
--- a/src/pages/scientific/index.vue
+++ b/src/pages/scientific/index.vue
@@ -13,8 +13,6 @@
     <div class="block gray"
          style="padding: 2rem 0;">
       <div class="inner">
-        <Breadcrumb ref="breadcrumb"
-                    :data.sync="routes" />
         <ul class="items">
           <li>
             <img class="pic"
@@ -72,7 +70,6 @@
 <script>
 import mixins from "@/mixins/page";
 import WOW from "wow.js";
-import Breadcrumb from '@/components/breadcrumb'
 import Util from '@/libs/util'
 export default {
   mixins: [mixins],
@@ -81,63 +78,28 @@ export default {
       routes: [],
     };
   },
-  components: {
-    Breadcrumb
-  },
   mounted () {
     new WOW().init();
-    this.getColumn()
   },
   methods: {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
-        .catch((err) => { });
-    },
-    // 获取父级所有栏目名称和id
-    getParent (data, id) {
-      for (const e of data) {
-        if (e.id == id) {
-          this.routes.push({
-            name: e.columnName,
-            query: {
-              id: e.id
-            }
-          })
-          break
-        } else if (e.children.length) {
-          this.routes.push({
-            name: e.columnName,
-            query: {
-              id: e.id
-            }
-          })
-          this.getParent(e.children, id)
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
         }
-      }
-    },
-    // 获取上级面包屑
-    getColumn () {
-      this.$post(`${this.api.oneLevelChecksThemAll}?id=${this.id}&isSort=1&siteId=${this.site}`).then(({ data }) => {
-        this.getParent(data, this.id)
-      }).catch(err => { })
+      })
+        .catch((err) => { });
     },
   },
 };
@@ -161,6 +123,7 @@ export default {
         .pic {
             width: 100%;
             height: 100%;
+            object-fit: cover;
         }
         .texts {
             position: absolute;
@@ -305,7 +268,6 @@ export default {
     height: 643px;
     text-align: center;
     background: url(../../assets/images/about-bg.png) no-repeat center center;
-    background-size: 100% 100%;
     .texts {
         padding: 2.375rem 3.75rem;
         color: #fff;
diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue
index ec84209..7e345e3 100644
--- a/src/pages/sfel/index.vue
+++ b/src/pages/sfel/index.vue
@@ -1,45 +1,74 @@
 <template>
   <div class="wrap">
-    <el-carousel class="topImg" :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'">
+    <el-carousel class="topImg"
+                 :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)">
+        <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)">
         </el-carousel-item>
       </template>
     </el-carousel>
 
-    <div class="block banner-block" id="part1">
+    <div class="block banner-block"
+         id="part1">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[1].form.title }}
             <span class="sub">{{ modules[1].form.subTitle }}</span>
           </h5>
-          <span class="more" @click="toAll(modules[2].form)">MORE</span>
+          <span class="more"
+                @click="toAll(modules[2].form)">MORE</span>
         </div>
         <template v-if="articles.length">
-          <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
-            <div style="width: 50%;height: 20.5rem;overflow: hidden;" class="newBox">
-              <img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
+          <div class="sfel-banner wow fadeInDown"
+               data-wow-delay="0.5s"
+               @click="toArtice(curArticle, modules[2].form)">
+            <div style="width: 50%;height: 20.5rem;overflow: hidden;"
+                 class="newBox">
+              <img class="pic"
+                   width="100%"
+                   height="100%"
+                   :src="curArticle.titleImg"
+                   alt="">
             </div>
             <div class="right">
               <h6>{{ curArticle.title }}</h6>
-              <div class="des" v-html="curArticle.mainBody"></div>
+              <div class="des"
+                   v-html="curArticle.mainBody"></div>
               <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p>
               <ul class="inds">
-                <li v-for="i in articles.length > 3 ? 4 : articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+                <li v-for="i in articles.length > 3 ? 4 : articles.length"
+                    :key="i"
+                    :class="{active: curInd == i - 1}"
+                    @click.stop="switchCarousel(i - 1)"></li>
               </ul>
             </div>
           </div>
-          
+
           <ul class="card">
             <template v-for="(item, i) in articles">
-              <li v-if="i > 3 && i < 7" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
-                <img class="pic" :src="item.titleImg" alt="">
+              <li v-if="i > 3 && i < 7"
+                  :key="i"
+                  class="wow fadeInDown"
+                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+                <img class="pic"
+                     :src="item.titleImg"
+                     alt="">
                 <div class="texts">
                   <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
                   <div class="des">{{ item.title }}</div>
-                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
+                  <img class="arrow"
+                       src="@/assets/images/arrow.png"
+                       alt=""
+                       @click="toArtice(item, modules[2].form)">
                 </div>
               </li>
             </template>
@@ -48,60 +77,85 @@
       </div>
     </div>
 
-    <div class="block notice" id="part2">
+    <div class="block notice"
+         id="part2">
       <div class="inner lg">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[3].form.title }}
             <span class="sub">{{ modules[3].form.subTitle }}</span>
           </h5>
-          <span class="more" @click="toAll(modules[4].form)">MORE</span>
+          <span class="more"
+                @click="toAll(modules[4].form)">MORE</span>
         </div>
-        <div class="shop-shows" v-if="articles1.length">
-          <div class="left wow fadeInLeft" data-wow-delay="0.5s">
+        <div class="shop-shows"
+             v-if="articles1.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s">
             <el-carousel>
               <template v-for="(item, i) in articles1">
-                <el-carousel-item v-if="i < 4" :key="i">
-                  <div class="item" @click="toArtice(item, modules[4].form)">
-                    <img class="pic" :src="item.titleImg" alt="">
+                <el-carousel-item v-if="i < 4"
+                                  :key="i">
+                  <div class="item"
+                       @click="toArtice(item, modules[4].form)">
+                    <img class="pic"
+                         :src="item.titleImg"
+                         alt="">
                     <p class="text">{{ item.title }}</p>
                   </div>
                 </el-carousel-item>
               </template>
             </el-carousel>
-            <div v-if="articles1.length > 4" class="cards" style="margin-top: 18px;" @click="toArtice(articles1[4], modules[4].form)">
+            <div v-if="articles1.length > 4"
+                 class="cards"
+                 style="margin-top: 18px;"
+                 @click="toArtice(articles1[4], modules[4].form)">
               <h6 class="a-line">{{ articles1[4].title }}</h6>
               <div class="sum">{{ articles1[4].mainBody }}</div>
               <p class="date">{{ articles1[4].releaseTime }}</p>
             </div>
             <div class="card-wrap">
-              <div v-if="articles1.length > 5" class="cards" style="margin-right: 18px" @click="toArtice(articles1[5], modules[4].form)">
+              <div v-if="articles1.length > 5"
+                   class="cards"
+                   style="margin-right: 18px"
+                   @click="toArtice(articles1[5], modules[4].form)">
                 <h6>{{ articles1[5].title }}</h6>
                 <p class="date">{{ articles1[5].releaseTime }}</p>
               </div>
-              <div v-if="articles1.length > 6" class="cards" @click="toArtice(articles1[6], modules[4].form)">
+              <div v-if="articles1.length > 6"
+                   class="cards"
+                   @click="toArtice(articles1[6], modules[4].form)">
                 <h6>{{ articles1[6].title }}</h6>
                 <p class="date">{{ articles1[6].releaseTime }}</p>
               </div>
             </div>
           </div>
-          <div v-if="articles1.length > 7" class="right wow fadeInRight" data-wow-delay="0.5s">
+          <div v-if="articles1.length > 7"
+               class="right wow fadeInRight"
+               data-wow-delay="0.5s">
             <ul class="card-list">
               <template v-for="(item, i) in articles1">
-                <li v-if="i > 6 && i < 10" :key="i" @click="toArtice(item, modules[4].form)">
+                <li v-if="i > 6 && i < 10"
+                    :key="i"
+                    @click="toArtice(item, modules[4].form)">
                   <div class="releaseTime">
                     <p class="d">{{ item.date }}</p>
                     <p class="m">{{ item.month }}</p>
                   </div>
                   <div class="texts">
                     <h6>{{ item.title }}</h6>
-                    <div class="des" v-html="item.mainBody"></div>
+                    <div class="des"
+                         v-html="item.mainBody"></div>
                   </div>
                 </li>
               </template>
             </ul>
-            <div v-if="articles1.length > 10" class="slide" @click="toArtice(articles1[10], modules[4].form)">
-              <img class="pic" :src="articles1[10].titleImg" alt="">
+            <div v-if="articles1.length > 10"
+                 class="slide"
+                 @click="toArtice(articles1[10], modules[4].form)">
+              <img class="pic"
+                   :src="articles1[10].titleImg"
+                   alt="">
               <p class="text">{{ articles1[10].title }}</p>
             </div>
           </div>
@@ -109,41 +163,67 @@
       </div>
     </div>
 
-    <div class="block conference" id="part3">
+    <div class="block conference"
+         id="part3">
       <div class="inner lg">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[5].form.title }}
             <span class="sub">{{ modules[5].form.subTitle }}</span>
           </h5>
-          <span class="more" @click="toAll(modules[6].form)">MORE</span>
+          <span class="more"
+                @click="toAll(modules[6].form)">MORE</span>
         </div>
-        <div class="shows" v-if="articles2.length">
-          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
-            <img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
+        <div class="shows"
+             v-if="articles2.length">
+          <div class="left wow fadeInLeft"
+               data-wow-delay="0.5s"
+               @click="toArtice(articles2[0], modules[6].form)">
+            <img class="pic"
+                 width="100%"
+                 height="100%"
+                 :src="articles2[0].titleImg"
+                 alt="">
             <div class="text">{{ articles2[0].title }}</div>
           </div>
-          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
+          <ul class="card-list wow fadeInRight"
+              data-wow-delay="0.5s">
             <template v-for="(item, i) in articles2">
-              <li v-if="i && i < 4" :key="i" @click="toArtice(item, modules[6].form)">
-                <img class="pic" :src="item.titleImg" alt="">
+              <li v-if="i && i < 4"
+                  :key="i"
+                  @click="toArtice(item, modules[6].form)">
+                <img class="pic"
+                     :src="item.titleImg"
+                     alt="">
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
                   <p class="sum">{{ item.mainBody }}</p>
-                  <p v-if="item.keynoteSpeaker" class="text">
-                    <img class="icon" src="@/assets/images/mine.png" alt="">
+                  <p v-if="item.keynoteSpeaker"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/mine.png"
+                         alt="">
                     {{ item.keynoteSpeaker }}
                   </p>
-                  <p v-if="item.activityStartTime" class="text">
-                    <img class="icon" src="@/assets/images/time.png" alt="">
+                  <p v-if="item.activityStartTime"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/time.png"
+                         alt="">
                     会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
                   </p>
-                  <p v-if="item.onlineLocation" class="text">
-                    <img class="icon" src="@/assets/images/online.png" alt="">
+                  <p v-if="item.onlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/online.png"
+                         alt="">
                     {{ item.onlineLocation }}
                   </p>
-                  <p v-if="item.offlineLocation" class="text">
-                    <img class="icon" src="@/assets/images/location.png" alt="">
+                  <p v-if="item.offlineLocation"
+                     class="text">
+                    <img class="icon"
+                         src="@/assets/images/location.png"
+                         alt="">
                     {{ item.offlineLocation }}
                   </p>
                 </div>
@@ -154,39 +234,62 @@
       </div>
     </div>
 
-    <div class="block media" id="part4">
+    <div class="block media"
+         id="part4">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[7].form.title }}
             <span class="sub">{{ modules[7].form.subTitle }}</span>
           </h5>
-          <span class="more" @click="toAll(modules[8].form)">MORE</span>
+          <span class="more"
+                @click="toAll(modules[8].form)">MORE</span>
         </div>
-        <div v-if="articles3.length" class="media-wrap">
+        <div v-if="articles3.length"
+             class="media-wrap">
           <div class="left">
             <div class="slides">
-              <div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px" @click="toArtice(articles3[0], modules[9].form)">
-                <img width="100%" height="100%" :src="articles3[0].titleImg" alt="">
+              <div class="item wow fadeInLeft"
+                   data-wow-delay="0.5s"
+                   style="margin-right: 20px"
+                   @click="toArtice(articles3[0], modules[9].form)">
+                <img width="100%"
+                     height="100%"
+                     :src="articles3[0].titleImg"
+                     alt="">
                 <div class="text">{{ articles3[0].title }}</div>
               </div>
-              <div v-if="articles3.length > 1" class="item wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles3[1], modules[9].form)">
-                <img width="100%" height="100%" :src="articles3[1].titleImg" alt="">
+              <div v-if="articles3.length > 1"
+                   class="item wow fadeInLeft"
+                   data-wow-delay="0.5s"
+                   @click="toArtice(articles3[1], modules[9].form)">
+                <img width="100%"
+                     height="100%"
+                     :src="articles3[1].titleImg"
+                     alt="">
                 <div class="text">{{ articles3[1].title }}</div>
               </div>
             </div>
             <ul class="list">
               <template v-for="(item, i) in articles3">
-                <li v-if="i > 1 && i < 5" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[9].form)">
+                <li v-if="i > 1 && i < 5"
+                    :key="i"
+                    class="wow fadeInDown"
+                    :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
+                    @click="toArtice(item, modules[9].form)">
                   <h6>{{ item.title }}</h6>
                   <div class="des">{{ item.mainBody }}</div>
                 </li>
               </template>
             </ul>
           </div>
-          <div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s" @click="toArtice(articles3[5], modules[9].form)">
+          <div v-if="articles3.length > 5"
+               class="right wow bounceInRight"
+               data-wow-delay="0.8s"
+               @click="toArtice(articles3[5], modules[9].form)">
             <div class="img-wrap">
-              <img :src="articles3[5].titleImg" alt="">
+              <img :src="articles3[5].titleImg"
+                   alt="">
             </div>
             <div class="texts">
               <h6>{{ articles3[5].title }}</h6>
@@ -197,7 +300,8 @@
       </div>
     </div>
 
-    <div class="block news" id="part5">
+    <div class="block news"
+         id="part5">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
@@ -206,8 +310,14 @@
           </h5>
         </div>
         <ul class="news">
-          <li v-for="(item, i) in modules[10].list" :key="i" class="wow fadeInDown" :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{'cursor-pointer': item.link.linkName !== '无'}" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+          <li v-for="(item, i) in modules[10].list"
+              :key="i"
+              class="wow fadeInDown"
+              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
+              :class="{'cursor-pointer': item.link.linkName !== '无'}"
+              @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <div class="des">{{ item.des }}</div>
@@ -216,30 +326,39 @@
         </ul>
       </div>
     </div>
-    
-    <div class="block program" id="part6">
+
+    <div class="block program"
+         id="part6">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[11].form.title }}
             <span class="sub">{{ modules[11].form.subTitle }}</span>
           </h5>
-          <span class="more" @click="toAll(modules[12].form)">MORE</span>
+          <span class="more"
+                @click="toAll(modules[12].form)">MORE</span>
         </div>
         <template v-if="articles4.length">
-          <div class="slide" @click="toArtice(articles4[0], modules[12].form)">
+          <div class="slide"
+               @click="toArtice(articles4[0], modules[12].form)">
             <div class="texts">
               <h6>{{ articles4[0].title }}</h6>
               <div class="des">{{ articles4[0].mainBody }}</div>
               <div class="meta">发表日期：{{ articles4[0].releaseTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div>
             </div>
             <div class="img-wrap">
-              <img class="pic" :src="articles4[0].titleImg" alt="">
+              <img class="pic"
+                   :src="articles4[0].titleImg"
+                   alt="">
             </div>
           </div>
           <ul class="list">
             <template v-for="(item, i) in articles3">
-              <li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'" @click="toArtice(item, modules[12].form)">
+              <li v-if="i && i < 4"
+                  :key="i"
+                  class="wow fadeInDown"
+                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
+                  @click="toArtice(item, modules[12].form)">
                 <div class="des">{{ item.title }}</div>
                 <p class="date">{{ item.releaseTime }}</p>
               </li>
@@ -251,10 +370,14 @@
 
     <div class="tools">
       <div class="logo">
-        <img src="@/assets/images/logo.png" alt="">
+        <img src="@/assets/images/logo.png"
+             alt="">
       </div>
       <ul class="nav">
-        <li v-for="(item, i) in navs" :key="i" class="column" @click="toAnchor(item)">{{ item.name }}</li>
+        <li v-for="(item, i) in navs"
+            :key="i"
+            class="column"
+            @click="toAnchor(item)">{{ item.name }}</li>
       </ul>
     </div>
   </div>
@@ -267,7 +390,7 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
       navs: [],
       articles: [],
@@ -279,12 +402,12 @@ export default {
       curArticle: {},
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -315,7 +438,7 @@ export default {
                 }
               })
               this.articles1 = articles
-            }).catch(err => {})
+            }).catch(err => { })
           }
           if (json[6].form.column.length) {
             const { column, articleNum } = json[6].form
@@ -350,10 +473,10 @@ export default {
           this.modules = json
           this.carouselInterval()
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
     // 自动轮播
-    carouselInterval() {
+    carouselInterval () {
       clearInterval(this.timer)
       this.timer = setInterval(() => {
         this.curInd++
@@ -362,14 +485,14 @@ export default {
       }, 5000)
     },
     // 手动轮播切换
-    switchCarousel(i) {
+    switchCarousel (i) {
       if (this.curInd !== i) {
         this.curInd = i
         this.curArticle = this.articles[this.curInd] || {}
       }
     },
     // 左侧导航点击回调
-    toAnchor(e) {
+    toAnchor (e) {
       const el = document.querySelector(`#part${e.id}`)
       el && el.scrollIntoView()
     }
@@ -379,1723 +502,1742 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
+@import '../../styles/page/page.scss';
 
 .wrap {
-  /deep/ .el-carousel__container {
-    height: 100vh;
-  }
-  /deep/ .el-carousel__container {
-    height: 100vh;
-  }
-  .topImg {
-    height: 100vh;
-    img {
-      height: 100vh;
+    /deep/ .el-carousel__container {
+        height: 100vh;
+    }
+    /deep/ .el-carousel__container {
+        height: 100vh;
+    }
+    .topImg {
+        height: 100vh;
+        img {
+            height: 100vh;
+            object-fit: cover;
+        }
     }
-  }
 }
 .block {
-  padding: 3rem 0;
+    padding: 3rem 0;
 }
 
 .title {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-end;
-  padding-bottom: 1.25rem;
-  margin-bottom: 1.5rem;
-  border-bottom: 1px solid #ddd;
-  align-items: center;
-  h5 {
-    padding-left: .8rem;
-    font-size: 1.62rem;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #333333;
-    line-height: 1;
-    border-left: 6px solid #2B96EF;
-  }
-  .sub {
-    font-size: .88rem;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #AFB7BF;
-  }
-  .more {
-    font-size: .64rem;
-    color: #666;
-    cursor: pointer;
-  }
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 1.25rem;
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid #ddd;
+    align-items: center;
+    h5 {
+        padding-left: 0.8rem;
+        font-size: 1.62rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #333333;
+        line-height: 1;
+        border-left: 6px solid #2b96ef;
+    }
+    .sub {
+        font-size: 0.88rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #afb7bf;
+    }
+    .more {
+        font-size: 0.64rem;
+        color: #666;
+        cursor: pointer;
+    }
 }
 .lg {
-  // width: 1505px;
+    // width: 1505px;
 }
 /deep/.articles {
-  width: 50%;
-  .el-carousel__indicators--horizontal {
-    bottom: 20px;
-    left: 804px;
-  }
+    width: 50%;
+    .el-carousel__indicators--horizontal {
+        bottom: 20px;
+        left: 804px;
+    }
 }
 .banner-block {
-  background: url(../../assets/images/sfel/2.png) 0 0/cover no-repeat;
-
+    background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
 }
 .sfel-banner {
-  display: flex;
-  cursor: pointer;
-  .pic {
-    transition: .5s;
-    &:hover {
-      transform: scale(1.3);
+    display: flex;
+    cursor: pointer;
+    .pic {
+        transition: 0.5s;
+        object-fit: cover;
+        &:hover {
+            transform: scale(1.3);
+        }
+    }
+    .right {
+        position: relative;
+        width: 50%;
+        padding: 50px 50px 30px;
+        background: #1583ff;
+        color: #fff;
+        h6 {
+            font-size: 1.34rem;
+            @include mul-ellipsis(2);
+        }
+        .des {
+            font-size: 1.02rem;
+        }
+        .meta {
+            font-size: 1.04rem;
+        }
+        &:hover {
+            background: #465f85;
+            h6,
+            .des,
+            .meta {
+                color: #fff;
+                transform: translateY(-15px);
+            }
+        }
+    }
+    .inds {
+        position: absolute;
+        bottom: 40px;
+        left: 60px;
+        display: flex;
+        li {
+            width: 10px;
+            height: 10px;
+            margin-right: 12px;
+            background: #ffffff;
+            border-radius: 50%;
+            transition: 0.2s;
+            &.active {
+                width: 30px;
+                background: rgba(255, 255, 255, 0.3);
+                border-radius: 5px;
+            }
+        }
     }
-  }
-  .right {
-    position: relative;
-    width: 50%;
-    padding: 50px 50px 30px;
-    background: #1583FF;
-    color: #fff;
     h6 {
-      font-size: 1.34rem;
+        font-size: 1.3rem;
+        transition: 0.3s;
     }
     .des {
-      font-size: 1.02rem;
+        margin: 30px 0;
+        font-size: 0.9rem;
+        line-height: 24px;
+        transition: 0.3s;
     }
     .meta {
-      font-size: 1.04rem;
-    }
-    &:hover {
-      background: #465f85;
-      h6, .des, .meta {
-        color: #fff;
-        transform: translateY(15px);
-      }
+        font-size: 0.8rem;
+        transition: 0.3s;
     }
-  }
-  .inds {
-    position: absolute;
-    bottom: 40px;
-    left: 60px;
-    display: flex;
+}
+.card {
     li {
-      width: 10px;
-      height: 10px;
-      margin-right: 12px;
-      background: #FFFFFF;
-      border-radius: 50%;
-      transition: .2s;
-      &.active {
-        width: 30px;
-        background: rgba(255,255,255,0.3);
-        border-radius: 5px;
-      }
+        .texts {
+            .des {
+                min-height: 3rem;
+            }
+        }
     }
-  }
-  h6 {
-    font-size: 1.3rem;
-    transition: .3s;
-  }
-  .des {
-    margin: 30px 0;
-    font-size: .9rem;
-    line-height: 24px;
-    transition: .3s;
-  }
-  .meta {
-    font-size: .8rem;
-    transition: .3s;
-  }
 }
 .card {
-  li {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 2rem;
+    li {
+        width: calc((100% - 56px) / 3);
+        margin-right: 28px;
+        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
+        border-radius: 6px;
+        transition: 0.3s;
+        background-color: #fff;
+        &:hover {
+            transform: scale(1.05);
+        }
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+    .pic {
+        width: 100%;
+        height: auto;
+        object-fit: cover;
+    }
     .texts {
-      .des {
-        min-height: 3rem;
-      }
+        padding: 2rem 1.5rem;
     }
-  }
-}
-.card {
-  display: flex;
-  flex-wrap: wrap;
-  margin-top: 2rem;
-  li {
-    width: calc((100% - 56px) / 3);
-    margin-right: 28px;
-    box-shadow: 0px 0px 20px 0px rgba(176,176,176,0.21);
-    border-radius: 6px;
-    transition: .3s;
-    background-color: #fff;
-    &:hover {
-      transform: scale(1.05);
+    .meta {
+        font-size: 0.92rem;
+        color: #666;
+    }
+    .des {
+        margin: 0.5rem 0;
+        font-size: 0.88rem;
+        font-family: SFProDisplay;
+        font-weight: 500;
+        color: #333;
+        line-height: 1.4rem;
+        -webkit-line-clamp: 2;
     }
-    &:last-child {
-      margin-right: 0;
+    .arrow {
+        width: 1.8rem;
     }
-  }
-  .pic {
-    width: 100%;
-    height: auto;
-  }
-  .texts {
-    padding: 2rem 1.5rem;
-  }
-  .meta {
-    font-size: .92rem;
-    color: #666;
-  }
-  .des {
-    margin: .5rem 0;
-    font-size: .88rem;
-    font-family: SFProDisplay;
-    font-weight: 500;
-    color: #333;
-    line-height: 1.4rem;
-    -webkit-line-clamp: 2;
-  }
-  .arrow {
-    width: 1.8rem;
-  }
 }
 
 .notice {
-  background: url(../../assets/images/sfel/3.png) 0 0/cover no-repeat;
+    background: url(../../assets/images/sfel/3.png) 0 0 / cover no-repeat;
 }
 .shop-shows {
-  display: flex;
-  .left {
-    width: 50%;
-    margin-right: 1rem;
-    /deep/ .el-carousel__container {
-      height: 20.65rem;
+    display: flex;
+    .left {
+        width: 50%;
+        margin-right: 1rem;
+        /deep/ .el-carousel__container {
+            height: 20.65rem;
+        }
+        .item {
+            position: relative;
+            height: 100%;
+            cursor: pointer;
+            .pic {
+                width: 100%;
+                height: 100%;
+                transition: 0.5s;
+                object-fit: cover;
+            }
+            .text {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                padding: 0 20px;
+                font-size: 0.96rem;
+                color: #fff;
+                line-height: 3rem;
+                @include ellipsis;
+                background-color: rgba(0, 0, 0, 0.57);
+            }
+            &:hover {
+                .pic {
+                    transform: scale(1.3);
+                }
+            }
+        }
+        .card-wrap {
+            display: flex;
+            margin-top: 0.9rem;
+            .cards {
+                flex: 1;
+            }
+            h6 {
+                @include mul-ellipsis(2);
+            }
+        }
+        .cards {
+            padding: 2.85rem 1rem;
+            background-color: #fff;
+            transition: 0.5s;
+            cursor: pointer;
+            &:hover {
+                transform: translateX(10px);
+            }
+            h6 {
+                margin-bottom: 1.2rem;
+                font-size: 1.08rem;
+                color: #48525e;
+            }
+            .a-line {
+                @include ellipsis;
+            }
+            .sum {
+                font-size: 0.9rem;
+                color: #6d7c8e;
+                @include ellipsis;
+            }
+            .date {
+                margin-top: 1.2rem;
+                font-size: 0.72rem;
+                color: #c4ccd7;
+            }
+        }
+        h6 {
+            font-size: 24px;
+            color: #272727;
+        }
+        .des {
+            margin-top: 10px;
+            font-size: 16px;
+            color: #666;
+            line-height: 30px;
+        }
     }
-    .item {
-      position: relative;
-      height: 100%;
-      cursor: pointer;
-      .pic {
-        width: 100%;
-        height: 100%;
-        transition: .5s;
-      }
-      .text {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        padding: 0 20px;
-        font-size: .96rem;
-        color: #fff;
-        line-height: 3rem;
-        @include ellipsis;
-        background-color: rgba(0, 0, 0, 0.57);
-      }
-      &:hover {
+    .right {
+        width: 50%;
+    }
+    .card-list {
+        li {
+            display: flex;
+            align-items: center;
+            padding: 0.95rem;
+            margin-bottom: 0.9rem;
+            background-color: #fff;
+            transition: 0.3s;
+            cursor: pointer;
+            &:hover {
+                transform: scale(1.05);
+            }
+        }
+        .releaseTime {
+            width: 4.4rem;
+            height: 4.4rem;
+            padding: 0.5rem 0 0.8rem;
+            margin-right: 1.2rem;
+            text-align: center;
+        }
+        .d {
+            font-size: 1.9rem;
+            font-family: DINCondensed-Bold, DINCondensed;
+            font-weight: bold;
+            color: #333333;
+            line-height: 2.15rem;
+        }
+        .m {
+            font-size: 1.02rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #666666;
+            line-height: 1rem;
+        }
+        .texts {
+            width: calc(100% - 110px);
+        }
+        h6 {
+            margin-bottom: 0.5rem;
+            font-size: 1.08rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #1583ff;
+            @include ellipsis;
+        }
+        .des {
+            font-size: 0.9rem;
+            color: #666;
+            line-height: 1.2rem;
+            -webkit-line-clamp: 2;
+        }
+    }
+    .slide {
+        position: relative;
+        height: 24.4rem;
+        overflow: hidden;
+        cursor: pointer;
         .pic {
-          transform: scale(1.3);
+            width: 100%;
+            height: 100%;
+            transition: 0.5s;
+            object-fit: cover;
+        }
+        .text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 0.6rem;
+            line-height: 3rem;
+            font-size: 0.8rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            background-color: rgba(0, 0, 0, 0.57);
+        }
+        &:hover {
+            .pic {
+                transform: scale(1.3);
+            }
         }
-      }
     }
-    .card-wrap {
-      display: flex;
-      margin-top: .9rem;
-      .cards {
-        flex: 1;
-      }
-      h6 {
-        @include mul-ellipsis(2);
-      }
+}
+.conference {
+    background: url(../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
+    .shows {
+        display: flex;
     }
-    .cards {
-      padding: 2.85rem 1rem;
-      background-color: #fff;
-      transition: .5s;
-      cursor: pointer;
-      &:hover {
-        transform: translateX(10px);
-      }
-      h6 {
-        margin-bottom: 1.2rem;
-        font-size: 1.08rem;
-        color: #48525E;
-      }
-      .a-line {
-        @include ellipsis;
-      }
-      .sum {
-        font-size: .9rem;
-        color: #6D7C8E;
-        @include ellipsis;
-      }
-      .date {
-        margin-top: 1.2rem;
-        font-size: .72rem;
-        color: #C4CCD7;
-      }
+    .left {
+        position: relative;
+        width: 34.375rem;
+        height: auto;
+        margin-right: 20px;
+        cursor: pointer;
+        overflow: hidden;
+        .text {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            padding: 0 0.6rem;
+            line-height: 3rem;
+            font-size: 0.8rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            background-color: rgba(0, 0, 0, 0.57);
+        }
+        .pic {
+            transition: 0.5s;
+            object-fit: cover;
+        }
+        &:hover {
+            .pic {
+                transform: scale(1.3);
+            }
+        }
     }
-    h6 {
-      font-size: 24px;
-      color: #272727;
+    .card-list {
+        width: 600px;
+        li {
+            display: flex;
+            align-items: center;
+            padding: 6px;
+            margin-bottom: 7px;
+            background-color: #fff;
+            cursor: pointer;
+            transition: 0.3s;
+            &:last-child {
+                margin-bottom: 0;
+            }
+            &:hover {
+                transform: translateX(20px);
+            }
+        }
+        .pic {
+            width: 10.4375rem;
+            height: 10.4375rem;
+            margin-right: 1.8rem;
+            object-fit: cover;
+        }
+        .texts {
+            width: calc(100% - 12.5rem);
+        }
+        h6 {
+            margin-bottom: 10px;
+            font-size: 0.96rem;
+            color: #333;
+            @include ellipsis;
+        }
+        .sum {
+            margin-bottom: 6px;
+            font-size: 0.8rem;
+            color: #666;
+            @include ellipsis;
+        }
+        .text {
+            display: flex;
+            align-items: center;
+            margin: 0.5rem 0;
+            font-size: 0.72rem;
+            @include ellipsis;
+        }
+        .icon {
+            margin-right: 5px;
+        }
     }
-    .des {
-      margin-top: 10px;
-      font-size: 16px;
-      color: #666;
-      line-height: 30px;
+}
+
+.media {
+    background: #fff;
+    .media-wrap {
+        display: flex;
     }
-  }
-  .right {
-    width: 50%;
-  }
-  .card-list {
+    .left {
+        width: 55%;
+        margin-right: 1%;
+        .slides {
+            display: flex;
+            margin-bottom: 20px;
+        }
+        .item {
+            position: relative;
+            flex: 1;
+            height: 10rem;
+            overflow: hidden;
+            cursor: pointer;
+            img {
+                width: 100%;
+                height: 100%;
+                transition: 0.5s;
+                object-fit: cover;
+            }
+            .text {
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                width: 100%;
+                padding: 0 1.35rem;
+                line-height: 2.5rem;
+                font-size: 0.8rem;
+                color: #ffffff;
+                @include ellipsis;
+                background-color: rgba(0, 0, 0, 0.49);
+            }
+            &:hover {
+                img {
+                    transform: scale(1.3);
+                }
+            }
+        }
+        .list {
+            padding: 1.7rem 1.8rem;
+            background: #fff;
+            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+            li {
+                margin-bottom: 2rem;
+                transition: 0.5s;
+                cursor: pointer;
+                &:last-child {
+                    margin-bottom: 0;
+                }
+                &:hover {
+                    transform: scale(1.05);
+                }
+            }
+            h6 {
+                margin-bottom: 0.85rem;
+                font-size: 0.88rem;
+                font-family: PingFangSC-Medium, PingFang SC;
+                font-weight: 500;
+                color: #272727;
+                line-height: 1rem;
+                text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+                @include ellipsis;
+            }
+            .des {
+                font-size: 0.9rem;
+                color: #666;
+                -webkit-line-clamp: 2;
+            }
+        }
+    }
+    .right {
+        width: 44%;
+        box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+        transition: 0.5s;
+        cursor: pointer;
+        .img-wrap {
+            width: 100%;
+            height: 21.1rem;
+            overflow: hidden;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+            transition: 0.5s;
+            object-fit: cover;
+        }
+        .texts {
+            padding: 2rem 1.4rem;
+        }
+        h6 {
+            font-size: 0.96rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #272727;
+            line-height: 1.95rem;
+            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+            @include ellipsis;
+        }
+        .des {
+            margin-top: 1rem;
+            font-size: 0.8rem;
+            color: #666;
+            -webkit-line-clamp: 2;
+        }
+        &:hover {
+            background: #005388;
+            h6,
+            .des {
+                color: #fff;
+            }
+            img {
+                transform: scale(1.3);
+            }
+        }
+    }
+}
+.news {
+    background: url(../../assets/images/sfel/5.png) (0 504px) / auto no-repeat,
+        url(../../assets/images/sfel/6.png) (bottom right) / auto no-repeat;
+}
+.news {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
     li {
-      display: flex;
-      align-items: center;
-      padding: .95rem;
-      margin-bottom: .9rem;
-      background-color: #fff;
-      transition: .3s;
-      cursor: pointer;
-      &:hover {
-        transform: scale(1.05);
-      }
+        position: relative;
+        // width: calc((100% - 56px) / 3);
+        flex: 1;
+        padding: 0.55rem;
+        margin-right: 1.4rem;
+        color: #333;
+        background-color: #fff;
+        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+        border-radius: 10px;
+        transition: 0.3s;
+        &:hover {
+            transform: translateY(20px);
+        }
+        &:nth-child(3n) {
+            margin-right: 0;
+        }
+        &:hover {
+            color: #fff;
+            background-color: #0252d9;
+        }
     }
-    .releaseTime {
-      width: 4.4rem;
-      height: 4.4rem;
-      padding: .5rem 0 .8rem;
-      margin-right: 1.2rem;
-      text-align: center;
-    }
-    .d {
-      font-size: 1.9rem;
-      font-family: DINCondensed-Bold, DINCondensed;
-      font-weight: bold;
-      color: #333333;
-      line-height: 2.15rem;
-    }
-    .m {
-      font-size: 1.02rem;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #666666;
-      line-height: 1rem;
+    img {
+        width: 100%;
+        height: 24.05rem;
+        object-fit: cover;
     }
     .texts {
-      width: calc(100% - 110px);
+        padding: 0 0.9rem 2.5rem;
     }
     h6 {
-      margin-bottom: .5rem;
-      font-size: 1.08rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #1583FF;
-      @include ellipsis;
+        margin: 1.75rem 0 0.6rem;
+        font-size: 1.05rem;
+        line-height: 1.65rem;
     }
     .des {
-      font-size: .9rem;
-      color: #666;
-      line-height: 1.2rem;
-      -webkit-line-clamp: 2;
+        font-size: 0.8rem;
+        line-height: 1.3rem;
     }
-  }
-  .slide {
-    position: relative;
-    height: 24.4rem;
-    overflow: hidden;
-    cursor: pointer;
-    .pic {
-      width: 100%;
-      height: 100%;
-      transition: .5s;
-    }
-    .text {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      padding: 0 .6rem;
-      line-height: 3rem;
-      font-size: .8rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #FFFFFF;
-      background-color: rgba(0, 0, 0, 0.57);
+}
+.program {
+    background: #fff;
+    .slide {
+        display: flex;
+        margin-bottom: 0.7rem;
+        cursor: pointer;
     }
-    &:hover {
-      .pic {
-        transform: scale(1.3);
-      }
+    .texts {
+        width: 51%;
+        padding: 2.8rem;
+        background: #fbfbfb;
+        h6 {
+            font-size: 1.04rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #333333;
+        }
+        .des {
+            margin: 1.75rem 0 1.25rem;
+            font-size: 1rem;
+            color: #666;
+            line-height: 1.6rem;
+        }
+        .meta {
+            font-size: 0.72rem;
+            color: #666;
+        }
     }
-  }
-}
-.conference {
-  background: url(../../assets/images/sfel/4.png) 0 0/cover no-repeat;
-  .shows {
-    display: flex;
-  }
-  .left {
-    position: relative;
-    width: 34.375rem;
-    height: auto;
-    margin-right: 20px;
-    cursor: pointer;
-    overflow: hidden;
-    .text {
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      width: 100%;
-      padding: 0 .6rem;
-      line-height: 3rem;
-      font-size: .8rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #FFFFFF;
-      background-color: rgba(0, 0, 0, 0.57);
+    .img-wrap {
+        width: 49%;
+        height: auto;
+        overflow: hidden;
     }
     .pic {
-      transition: .5s;
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+        object-fit: cover;
     }
     &:hover {
-      .pic {
-        transform: scale(1.3);
-      }
+        .pic {
+            transform: scale(1.3);
+        }
     }
-  }
-  .card-list {
-    width: 600px;
-    li {
-      display: flex;
-      align-items: center;
-      padding: 6px;
-      margin-bottom: 7px;
-      background-color: #fff;
-      cursor: pointer;
-      transition: .3s;
-      &:last-child {
-        margin-bottom: 0;
-      }
-      &:hover {
-        transform: translateX(20px);
-      }
+    .list {
+        display: flex;
+        li {
+            // width: calc((100% - 28px) / 3);
+            flex: 1;
+            padding: 1.8rem 1.1rem;
+            margin-right: 0.7rem;
+            background: url(../../assets/images/sfel/7.png) no-repeat center;
+            background-size: 100% 100%;
+            transition: 0.5s;
+            cursor: pointer;
+            &:nth-child(2) {
+                background-image: url(../../assets/images/sfel/8.png);
+            }
+            &:nth-child(3) {
+                margin-right: 0;
+                background-image: url(../../assets/images/sfel/9.png);
+            }
+            &:hover {
+                transform: translateY(20px);
+            }
+        }
+        .des {
+            margin-bottom: 1.5rem;
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #ffffff;
+            line-height: 30px;
+            word-break: break-all;
+        }
+        .date {
+            font-size: 0.72rem;
+            font-family: LaoSangamMN;
+            color: #ffffff;
+        }
     }
-    .pic {
-      width: 10.4375rem;
-      height: 10.4375rem;
-      margin-right: 1.8rem;
-    }
-    .texts {
-      width: calc(100% - 12.5rem);
-    }
-    h6 {
-      margin-bottom: 10px;
-      font-size: .96rem;
-      color: #333;
-      @include ellipsis;
-    }
-    .sum {
-      margin-bottom: 6px;
-      font-size: .8rem;
-      color: #666;
-      @include ellipsis;
-    }
-    .text {
-      display: flex;
-      align-items: center;
-      margin: .5rem 0;
-      font-size: .72rem;
-      @include ellipsis;
-    }
-    .icon {
-      margin-right: 5px;
-    }
-  }
-}
-
-.media {
-  background: #fff;
-  .media-wrap {
-    display: flex;
-  }
-  .left {
-    width: 55%;
-    margin-right: 1%;
-    .slides {
-      display: flex;
-      margin-bottom: 20px;
-    }
-    .item {
-      position: relative;
-      flex: 1;
-      height: 10rem;
-      overflow: hidden;
-      cursor: pointer;
-      img {
-        width: 100%;
-        height: 100%;
-        transition: .5s;
-      }
-      .text {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        width: 100%;
-        padding: 0 1.35rem;
-        line-height: 2.5rem;
-        font-size: .8rem;
-        color: #FFFFFF;
-        @include ellipsis;
-        background-color: rgba(0, 0, 0, 0.49);
-      }
-      &:hover {
-        img {
-          transform: scale(1.3);
-        }
-      }
-    }
-    .list {
-      padding: 1.7rem 1.8rem;
-      background: #fff;
-      box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
-      li {
-        margin-bottom: 2rem;
-        transition: .5s;
-        cursor: pointer;
-        &:last-child {
-          margin-bottom: 0;
-        }
-        &:hover {
-          transform: scale(1.05);
-        }
-      }
-      h6 {
-        margin-bottom: .85rem;
-        font-size: .88rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #272727;
-        line-height: 1rem;
-        text-shadow: 0px 0px 30px rgba(48,48,48,0.08);
-        @include ellipsis;
-      }
-      .des {
-        font-size: .9rem;
-        color: #666;
-        -webkit-line-clamp: 2;
-      }
-    }
-  }
-  .right {
-    width: 44%;
-    box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
-    transition: .5s;
-    cursor: pointer;
-    .img-wrap {
-      width: 100%;
-      height: 21.1rem;
-      overflow: hidden;
-    }
-    img {
-      width: 100%;
-      height: 100%;
-      transition: .5s;
-    }
-    .texts {
-      padding: 2rem 1.4rem;
-    }
-    h6 {
-      font-size: .96rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #272727;
-      line-height: 1.95rem;
-      text-shadow: 0px 0px 30px rgba(48,48,48,0.08);
-      @include ellipsis;
-    }
-    .des {
-      margin-top: 1rem;
-      font-size: .8rem;
-      color: #666;
-      -webkit-line-clamp: 2;
-    }
-    &:hover {
-      background: #005388;
-      h6, .des {
-        color: #fff;
-      }
-      img {
-        transform: scale(1.3);
-      }
-    }
-  }
-}
-.news {
-  background: url(../../assets/images/sfel/5.png) (0 504px)/auto no-repeat,
-              url(../../assets/images/sfel/6.png) (bottom right)/auto no-repeat;
-}
-.news {
-  display: flex;
-  justify-content: center;
-  flex-wrap: wrap;
-  li {
-    position: relative;
-    // width: calc((100% - 56px) / 3);
-    flex: 1;
-    padding: .55rem;
-    margin-right: 1.4rem;
-    color: #333;
-    background-color: #fff;
-    box-shadow: 0px 5px 20px 0px rgba(98,117,163,0.08);
-    border-radius: 10px;
-    transition: .3s;
-    &:hover {
-      transform: translateY(20px);
-    }
-    &:nth-child(3n) {
-      margin-right: 0;
-    }
-    &:hover {
-      color: #fff;
-      background-color: #0252D9;
-    }
-  }
-  img {
-    width: 100%;
-    height: 24.05rem;
-  }
-  .texts {
-    padding: 0 .9rem 2.5rem;
-  }
-  h6 {
-    margin: 1.75rem 0 .6rem;
-    font-size: 1.05rem;
-    line-height: 1.65rem;
-  }
-  .des {
-    font-size: .8rem;
-    line-height: 1.3rem;
-  }
-}
-.program {
-  background: #fff;
-  .slide {
-    display: flex;
-    margin-bottom: .7rem;
-    cursor: pointer;
-  }
-  .texts {
-    width: 51%;
-    padding: 2.8rem;
-    background: #FBFBFB;
-    h6 {
-      font-size: 1.04rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #333333;
-    }
-    .des {
-      margin: 1.75rem 0 1.25rem;
-      font-size: 1rem;
-      color: #666;
-      line-height: 1.6rem;
-    }
-    .meta {
-      font-size: .72rem;
-      color: #666;
-    }
-  }
-  .img-wrap {
-    width: 49%;
-    height: auto;
-    overflow: hidden;
-  }
-  .pic {
-    width: 100%;
-    height: 100%;
-    transition: .5s;
-  }
-  &:hover {
-    .pic {
-      transform: scale(1.3);
-    }
-  }
-  .list {
-    display: flex;
-    li {
-      // width: calc((100% - 28px) / 3);
-      flex: 1;
-      padding: 1.8rem 1.1rem;
-      margin-right: .7rem;
-      background: url(../../assets/images/sfel/7.png)  no-repeat center;
-      background-size: 100% 100%;
-      transition: .5s;
-      cursor: pointer;
-      &:nth-child(2) {
-        background-image: url(../../assets/images/sfel/8.png);
-      }
-      &:nth-child(3) {
-        margin-right: 0;
-        background-image: url(../../assets/images/sfel/9.png);
-      }
-      &:hover {
-        transform: translateY(20px);
-      }
-    }
-    .des {
-      margin-bottom: 1.5rem;
-      font-size: 1rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      font-weight: 500;
-      color: #FFFFFF;
-      line-height: 30px;
-      word-break: break-all;
-    }
-    .date {
-      font-size: .72rem;
-      font-family: LaoSangamMN;
-      color: #FFFFFF;
-    }
-  }
 }
 .tools {
-  z-index: 9;
-  position: fixed;
-  top: 12.5rem;
-  left: 0;
-  width: 9.4rem;
-  text-align: center;
-  .logo {
-    padding: 15px 0;
-    background: #0C60BE;
-    box-shadow: 0px 0px 20px 0px rgba(184,191,200,0.3);
-  }
-  .nav {
-    li {
-      padding: 0 10px;
-      font-size: .88rem;
-      line-height: 2.5rem;
-      color: #fff;
-      background-color: #1D1D1D;
-      cursor: pointer;
-      @include ellipsis;
-      &.active {
-        background-color: #1583FF;
-      }
-      &:hover {
-        background-color: #1583FF;
-      }
+    z-index: 9;
+    position: fixed;
+    top: 12.5rem;
+    left: 0;
+    width: 9.4rem;
+    text-align: center;
+    .logo {
+        padding: 15px 0;
+        background: #0c60be;
+        box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
+    }
+    .nav {
+        li {
+            padding: 0 10px;
+            font-size: 0.88rem;
+            line-height: 2.5rem;
+            color: #fff;
+            background-color: #1d1d1d;
+            cursor: pointer;
+            @include ellipsis;
+            &.active {
+                background-color: #1583ff;
+            }
+            &:hover {
+                background-color: #1583ff;
+            }
+        }
     }
-  }
 }
+
 @media (max-width: 1520px) {
-  .conference .card-list {
-    width: 734px;
-    .texts {
-      width: 460px;
+    .conference .card-list {
+        width: 734px;
+        .texts {
+            width: 460px;
+        }
     }
-  }
 }
 @media (max-width: 1200px) {
-  .tools {
-    display: none;
-  }
-  .sfel-banner{
-    flex-direction: column;
-    .newBox{
-      width: 100% !important;
-    }
-    .right{
-      margin-top: 10px;
-      width: 100%;
-      height: 410px;
-    }
-  }
-  .card {
-    flex-direction: column;
-    li {
-      width: 100%;
-      margin-top: 20px;
+    .tools {
+        display: none;
     }
-  }
-  .shop-shows{
-    flex-direction: column;
-    .left{
-       width: 100%;
+    .sfel-banner {
+        flex-direction: column;
+        .newBox {
+            width: 100% !important;
+        }
+        .right {
+            margin-top: 10px;
+            width: 100%;
+            height: 410px;
+        }
     }
-    .right{
-      width: 100%;margin-top: 20px;
+    .card {
+        flex-direction: column;
+        li {
+            width: 100%;
+            margin-top: 20px;
+        }
     }
-    
-  }
-  .shows{
-    flex-direction: column;
-    .left{
-      width: 100%;
-    }
-    .card-list{
-      width: 100%;margin-top: 20px;
-      li {
+    .shop-shows {
         flex-direction: column;
-        .pic{
-          width: 100% !important;
-          margin-right: 0;
+        .left {
+            width: 100%;
         }
-        .texts{
-          margin-top: 20px;
-          width: 100%;
+        .right {
+            width: 100%;
+            margin-top: 20px;
         }
-      }
     }
-  }
-  .media-wrap{
-    flex-direction: column;
-    .left{
-      width: 100%;
+    .shows {
+        flex-direction: column;
+        .left {
+            width: 100%;
+        }
+        .card-list {
+            width: 100%;
+            margin-top: 20px;
+            li {
+                flex-direction: column;
+                .pic {
+                    width: 100% !important;
+                    margin-right: 0;
+                }
+                .texts {
+                    margin-top: 20px;
+                    width: 100%;
+                }
+            }
+        }
     }
-    .right {
-      width: 100%;
-      margin-top: 20px;
+    .media-wrap {
+        flex-direction: column;
+        .left {
+            width: 100%;
+        }
+        .right {
+            width: 100%;
+            margin-top: 20px;
+        }
     }
-  }
-  .news{
-    flex-direction: column;
-    li {
-      margin-top: 30px;
-      width: 100%;
+    .news {
+        flex-direction: column;
+        li {
+            margin-top: 30px;
+            width: 100%;
+        }
     }
-  }
-  .slide , .list{
-    flex-direction: column;
-    .texts , .img-wrap{
-      width: 100%;
+    .slide,
+    .list {
+        flex-direction: column;
+        .texts,
+        .img-wrap {
+            width: 100%;
+        }
     }
-  }
-  .list {
-    li { 
-      width: 100% !important; margin-top: 20px;
+    .list {
+        li {
+            width: 100% !important;
+            margin-top: 20px;
+        }
     }
-  }
-  .slides{
-    div{
-      flex: 1;
+    .slides {
+        div {
+            flex: 1;
+        }
     }
-  }
-  #part6 {
-    .slide{
-      .texts{
-        height: auto;
-      }
+    #part6 {
+        .slide {
+            .texts {
+                height: auto;
+            }
+        }
     }
-  }
 }
 @media (min-width: 280px) and (max-width: 1200px) {
-  .block {
-    padding: 2rem 0;
-  }
-  .shop-shows {
-    .slide {
-      height: 18rem;
-    }
-  }
-  .wrap {
-    /deep/ .el-carousel {
-      height: 18rem;
-      img{
-        height: 18rem;
-      }
-    }
-    /deep/ .el-carousel__container{
-        height: 18rem !important;
-      }
-  }
-  .sfel-banner {
-    .newBox{
-      height: 20rem !important;
-    }
-    .right {
-      padding: 1.25rem;
-      height: 20rem;
-    }
-  }
-  .conference {
-    .left {
-      height: 20rem;
-    }
-  }
-  .card-list  {
-    li {
-      .pic {
-        height: 15rem !important;
-      }
-    }
-  }
-  .slides {
-    .item { 
-      height: 10rem !important;
+    .block {
+        padding: 2rem 0;
     }
-  }
-  .img-wrap {
-    height: 20rem !important;
-  }
-  .news{
-    .wow {
-      img {
-        height: 20rem;
-      }
+    .shop-shows {
+        .slide {
+            height: 18rem;
+        }
     }
-  }
-}
-@media (max-width: 320px) {
-  .wrap {
-   /deep/ .el-carousel{
-    height: 12rem;
-   }
-   /deep/ .el-carousel__container {
-    height: 12rem !important;
-   }
-   /deep/ .el-carousel__item{
-    height: 12rem;
-    img{
-      height: 12rem;
-    }
-   }
-  }
-  .block  {
-    .inner {
-      width: 90%;
-      .title  {
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
-        h5 {
-          font-size: 1rem;
-          span {
-            font-size: .75rem;
-          }
+    .wrap {
+        /deep/ .el-carousel {
+            height: 18rem;
+            img {
+                height: 18rem;
+            }
         }
-        span {
-          font-size: .85rem;
+        /deep/ .el-carousel__container {
+            height: 18rem !important;
         }
-      }
-      .sfel-banner {
+    }
+    .sfel-banner {
         .newBox {
-          height: auto !important;
+            height: 20rem !important;
         }
         .right {
-          h6 {
-            font-size: 1.072rem;
-            word-break: break-all
-          }
-          .des {
-            font-size: .9rem;
-            margin: 1rem 0;
-          }
-          .meta {
-            font-size: .8rem;
-          }
-        }
-      }
-      .card {
-        margin-top: 1.25rem;
-        li {
-          .pic {
-            height: auto;
-          }
-        }
-      }
-      .shop-shows{
-        .slide {
-          height: auto;
-          p {
-            line-height: 1.7rem;
-          }
+            padding: 1.25rem;
+            height: 20rem;
         }
-      }
-      .shows {
-        .left  {
-          height: auto;
-          .text {
-            line-height: 2rem;
-            font-size: .95rem;
-          }
+    }
+    .conference {
+        .left {
+            height: 20rem;
         }
-        .card-list  {
-          li {
+    }
+    .card-list {
+        li {
             .pic {
-              height: auto !important;
+                height: 15rem !important;
             }
-          }
-        }
-      }
-      .media-wrap {
-        .right  {
-          .img-wrap {
-            height: auto !important;
-          }
-        }
-      }
-      .news {
-        li {
-          img {
-            height: auto ;
-          }
-        }
-      }
-      .slide {
-        .img-wrap {
-          height: auto !important;
         }
-      }
     }
-  }
-  .media-wrap {
-    .left {
-      .slides {
+    .slides {
         .item {
-          // height: auto !important;
-          height: 8rem;
+            height: 10rem !important;
         }
-      }
     }
-  }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap {
-   /deep/ .el-carousel{
-    height: 15rem;
-   }
-   /deep/ .el-carousel__container {
-    height: 15rem !important;
-   }
-   /deep/ .el-carousel__item{
-    height: 15rem;
-    img{
-      height: 15rem;
-    }
-   }
-  }
-  .block  {
-    .inner {
-      width: 90%;
-      .title  {
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
-        h5 {
-          font-size: 1rem;
-          span {
-            font-size: .75rem;
-          }
-        }
-        span {
-          font-size: .85rem;
-        }
-      }
-      .sfel-banner {
-        .newBox {
-          height: auto !important;
-        }
-        .right {
-          h6 {
-            font-size: 1.072rem;
-            word-break: break-all
-          }
-          .des {
-            font-size: .9rem;
-            margin: 1rem 0;
-          }
-          .meta {
-            font-size: .8rem;
-          }
+    .img-wrap {
+        height: 20rem !important;
+    }
+    .news {
+        .wow {
+            img {
+                height: 20rem;
+            }
         }
-      }
-      .card {
-        margin-top: 1.25rem;
-        li {
-          .pic {
-            height: auto;
-          }
+    }
+}
+@media (max-width: 320px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 12rem;
         }
-      }
-      .shop-shows{
-        .slide {
-          height: auto;
-          p {
-            line-height: 1.7rem;
-          }
+        /deep/ .el-carousel__container {
+            height: 12rem !important;
         }
-      }
-      .shows {
-        .left  {
-          height: auto;
-          .text {
-            line-height: 2rem;
-            font-size: .95rem;
-          }
+        /deep/ .el-carousel__item {
+            height: 12rem;
+            img {
+                height: 12rem;
+            }
         }
-        .card-list  {
-          li {
-            .pic {
-              height: auto !important;
+    }
+    .block {
+        .inner {
+            width: 90%;
+            .title {
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+                h5 {
+                    font-size: 1rem;
+                    span {
+                        font-size: 0.75rem;
+                    }
+                }
+                span {
+                    font-size: 0.85rem;
+                }
+            }
+            .sfel-banner {
+                .newBox {
+                    height: auto !important;
+                }
+                .right {
+                    h6 {
+                        font-size: 1.072rem;
+                        word-break: break-all;
+                    }
+                    .des {
+                        font-size: 0.9rem;
+                        margin: 1rem 0;
+                    }
+                    .meta {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+            .card {
+                margin-top: 1.25rem;
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .slide {
+                    height: auto;
+                    p {
+                        line-height: 1.7rem;
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    height: auto;
+                    .text {
+                        line-height: 2rem;
+                        font-size: 0.95rem;
+                    }
+                }
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+            .media-wrap {
+                .right {
+                    .img-wrap {
+                        height: auto !important;
+                    }
+                }
+            }
+            .news {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .slide {
+                .img-wrap {
+                    height: auto !important;
+                }
             }
-          }
-        }
-      }
-      .media-wrap {
-        .right  {
-          .img-wrap {
-            height: auto !important;
-          }
-        }
-      }
-      .news {
-        li {
-          img {
-            height: auto ;
-          }
-        }
-      }
-      .slide {
-        .img-wrap {
-          height: auto !important;
         }
-      }
     }
-  }
-  .media-wrap {
-    .left {
-      .slides {
-        .item {
-          // height: auto !important;
-          height: 8rem;
+    .media-wrap {
+        .left {
+            .slides {
+                .item {
+                    // height: auto !important;
+                    height: 8rem;
+                }
+            }
         }
-      }
     }
-  }
 }
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap {
-   /deep/ .el-carousel{
-    height: 15rem;
-   }
-   /deep/ .el-carousel__container {
-    height: 15rem !important;
-   }
-   /deep/ .el-carousel__item{
-    height: 15rem;
-    img{
-      height: 15rem;
-    }
-   }
-  }
-  .block  {
-    .inner {
-      width: 90%;
-      .title  {
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
-        h5 {
-          font-size: 1rem;
-          span {
-            font-size: .75rem;
-          }
+@media (min-width: 320px) and (max-width: 375px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
         }
-        span {
-          font-size: .85rem;
+        /deep/ .el-carousel__container {
+            height: 15rem !important;
         }
-      }
-      .sfel-banner {
-        .newBox {
-          height: auto !important;
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
+            }
         }
-        .right {
-          h6 {
-            font-size: 1.072rem;
-            word-break: break-all
-          }
-          .des {
-            font-size: .9rem;
-            margin: 1rem 0;
-          }
-          .meta {
-            font-size: .8rem;
-          }
+    }
+    .block {
+        .inner {
+            width: 90%;
+            .title {
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+                h5 {
+                    font-size: 1rem;
+                    span {
+                        font-size: 0.75rem;
+                    }
+                }
+                span {
+                    font-size: 0.85rem;
+                }
+            }
+            .sfel-banner {
+                .newBox {
+                    height: auto !important;
+                }
+                .right {
+                    h6 {
+                        font-size: 1.072rem;
+                        word-break: break-all;
+                    }
+                    .des {
+                        font-size: 0.9rem;
+                        margin: 1rem 0;
+                    }
+                    .meta {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+            .card {
+                margin-top: 1.25rem;
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .slide {
+                    height: auto;
+                    p {
+                        line-height: 1.7rem;
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    height: auto;
+                    .text {
+                        line-height: 2rem;
+                        font-size: 0.95rem;
+                    }
+                }
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+            .media-wrap {
+                .right {
+                    .img-wrap {
+                        height: auto !important;
+                    }
+                }
+            }
+            .news {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .slide {
+                .img-wrap {
+                    height: auto !important;
+                }
+            }
         }
-      }
-      .card {
-        margin-top: 1.25rem;
-        li {
-          .pic {
-            height: auto;
-          }
+    }
+    .media-wrap {
+        .left {
+            .slides {
+                .item {
+                    // height: auto !important;
+                    height: 8rem;
+                }
+            }
         }
-      }
-      .shop-shows{
-        .slide {
-          height: auto;
-          p {
-            line-height: 1.7rem;
-          }
+    }
+}
+@media (min-width: 375px) and (max-width: 480px) {
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
         }
-      }
-      .shows {
-        .left  {
-          height: auto;
-          .text {
-            line-height: 2rem;
-            font-size: .95rem;
-          }
+        /deep/ .el-carousel__container {
+            height: 15rem !important;
         }
-        .card-list  {
-          li {
-            .pic {
-              height: auto !important;
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
             }
-          }
-        }
-      }
-      .media-wrap {
-        .right  {
-          .img-wrap {
-            height: auto !important;
-          }
-        }
-      }
-      .news {
-        li {
-          img {
-            height: auto ;
-          }
         }
-      }
-      .slide {
-        .img-wrap {
-          height: auto !important;
+    }
+    .block {
+        .inner {
+            width: 90%;
+            .title {
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+                h5 {
+                    font-size: 1rem;
+                    span {
+                        font-size: 0.75rem;
+                    }
+                }
+                span {
+                    font-size: 0.85rem;
+                }
+            }
+            .sfel-banner {
+                .newBox {
+                    height: auto !important;
+                }
+                .right {
+                    h6 {
+                        font-size: 1.072rem;
+                        word-break: break-all;
+                    }
+                    .des {
+                        font-size: 0.9rem;
+                        margin: 1rem 0;
+                    }
+                    .meta {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+            .card {
+                margin-top: 1.25rem;
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .slide {
+                    height: auto;
+                    p {
+                        line-height: 1.7rem;
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    height: auto;
+                    .text {
+                        line-height: 2rem;
+                        font-size: 0.95rem;
+                    }
+                }
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+            .media-wrap {
+                .right {
+                    .img-wrap {
+                        height: auto !important;
+                    }
+                }
+            }
+            .news {
+                li {
+                    img {
+                        // height: auto;
+                    }
+                }
+            }
+            .slide {
+                .img-wrap {
+                    height: auto !important;
+                }
+            }
         }
-      }
     }
-  }
-  .media-wrap {
-    .left {
-      .slides {
-        .item {
-          height: auto !important;
+    .media-wrap {
+        .left {
+            .slides {
+                .item {
+                    height: auto !important;
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 480px) and (max-width: 640px) {
-  .wrap {
-   /deep/ .el-carousel{
-    height: 15rem;
-   }
-   /deep/ .el-carousel__container {
-    height: 15rem !important;
-   }
-   /deep/ .el-carousel__item{
-    height: 15rem;
-    img{
-      height: 15rem;
-    }
-   }
-  }
-  .block  {
-    .inner {
-      width: 90%;
-      .title  {
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
-        h5 {
-          font-size: 1rem;
-          span {
-            font-size: .75rem;
-          }
-        }
-        span {
-          font-size: .85rem;
-        }
-      }
-      .sfel-banner {
-        .newBox {
-          height: auto !important;
-        }
-        .right {
-          h6 {
-            font-size: 1.072rem;
-            word-break: break-all
-          }
-          .des {
-            font-size: .9rem;
-            margin: 1rem 0;
-          }
-          .meta {
-            font-size: .8rem;
-          }
-        }
-      }
-      .card {
-        margin-top: 1.25rem;
-        li {
-          .pic {
-            height: auto;
-          }
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
         }
-      }
-      .shop-shows{
-        .slide {
-          height: auto;
-          p {
-            line-height: 1.7rem;
-          }
-        }
-      }
-      .shows {
-        .left  {
-          height: auto;
-          .text {
-            line-height: 2rem;
-            font-size: .95rem;
-          }
+        /deep/ .el-carousel__container {
+            height: 15rem !important;
         }
-        .card-list  {
-          li {
-            .pic {
-              height: auto !important;
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
             }
-          }
         }
-      }
-      .media-wrap {
-        .right  {
-          .img-wrap {
-            height: auto !important;
-          }
-        }
-      }
-      .news {
-        li {
-          img {
-            height: auto ;
-          }
-        }
-      }
-      .slide {
-        .img-wrap {
-          height: auto !important;
+    }
+    .block {
+        .inner {
+            width: 90%;
+            .title {
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+                h5 {
+                    font-size: 1rem;
+                    span {
+                        font-size: 0.75rem;
+                    }
+                }
+                span {
+                    font-size: 0.85rem;
+                }
+            }
+            .sfel-banner {
+                .newBox {
+                    height: auto !important;
+                }
+                .right {
+                    h6 {
+                        font-size: 1.072rem;
+                        word-break: break-all;
+                    }
+                    .des {
+                        font-size: 0.9rem;
+                        margin: 1rem 0;
+                    }
+                    .meta {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+            .card {
+                margin-top: 1.25rem;
+                li {
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                .slide {
+                    height: auto;
+                    p {
+                        line-height: 1.7rem;
+                    }
+                }
+            }
+            .shows {
+                .left {
+                    height: auto;
+                    .text {
+                        line-height: 2rem;
+                        font-size: 0.95rem;
+                    }
+                }
+                .card-list {
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+            .media-wrap {
+                .right {
+                    .img-wrap {
+                        height: auto !important;
+                    }
+                }
+            }
+            .news {
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .slide {
+                .img-wrap {
+                    height: auto !important;
+                }
+            }
         }
-      }
     }
-  }
-  .media-wrap {
-    .left {
-      .slides {
-        .item {
-          height: auto !important;
+    .media-wrap {
+        .left {
+            .slides {
+                .item {
+                    height: auto !important;
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 640px) and (max-width: 768px) {
-  .wrap {
-   /deep/ .el-carousel{
-    height: 15rem;
-   }
-   /deep/ .el-carousel__container {
-    height: 15rem !important;
-   }
-   /deep/ .el-carousel__item{
-    height: 15rem;
-    img{
-      height: 15rem;
-    }
-   }
-  }
-  .block  {
-    .inner {
-      width: 90%;
-      .title  {
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
-        h5 {
-          font-size: 1rem;
-          span {
-            font-size: .75rem;
-          }
-        }
-        span {
-          font-size: .85rem;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
         }
-      }
-      .sfel-banner {
-        flex-direction: row;
-        .newBox {
-          height: auto !important;
+        /deep/ .el-carousel__container {
+            height: 15rem !important;
         }
-        .right {
-          margin-top: 0;
-          h6 {
-            font-size: 1.072rem;
-            word-break: break-all
-          }
-          .des {
-            font-size: .9rem;
-            margin: 1rem 0;
-          }
-          .meta {
-            font-size: .8rem;
-          }
-        }
-      }
-      .card {
-        flex-direction: row;
-        margin-top: 1.25rem;
-        li {
-          width: calc((100% - 56px) / 3);
-          .pic {
-            height: auto;
-          }
-        }
-      }
-      .shop-shows{
-        flex-direction: row;
-        .left {
-          width: 50%;
-        }
-        .right  {
-          width: 50%;
-          margin-top: 0;
-        }
-        .slide {
-          height: auto;
-          p {
-            line-height: 1.7rem;
-          }
-        }
-      }
-      .shows {
-        flex-direction: row;
-        .left  {
-          width: 48%;
-          .text {
-            line-height: 2rem;
-            font-size: .95rem;
-          }
-        }
-        .card-list  {
-          width: 50%;
-          margin-top: 0;
-          li {
-            .pic {
-              height: auto !important;
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
             }
-          }
-        }
-      }
-      .media-wrap {
-        .right  {
-          .img-wrap {
-            height: auto !important;
-          }
-        }
-      }
-      .news {
-        flex-direction: row;
-        li {
-          img {
-            height: auto ;
-          }
         }
-      }
-      .slide {
-        flex-direction: row;
-        .img-wrap {
-          height: auto !important;
+    }
+    .block {
+        .inner {
+            width: 90%;
+            .title {
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+                h5 {
+                    font-size: 1rem;
+                    span {
+                        font-size: 0.75rem;
+                    }
+                }
+                span {
+                    font-size: 0.85rem;
+                }
+            }
+            .sfel-banner {
+                flex-direction: row;
+                .newBox {
+                    height: auto !important;
+                }
+                .right {
+                    margin-top: 0;
+                    h6 {
+                        font-size: 1.072rem;
+                        word-break: break-all;
+                    }
+                    .des {
+                        font-size: 0.9rem;
+                        margin: 1rem 0;
+                    }
+                    .meta {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+            .card {
+                flex-direction: row;
+                margin-top: 1.25rem;
+                li {
+                    width: calc((100% - 56px) / 3);
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    width: 50%;
+                }
+                .right {
+                    width: 50%;
+                    margin-top: 0;
+                }
+                .slide {
+                    height: auto;
+                    p {
+                        line-height: 1.7rem;
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    width: 48%;
+                    .text {
+                        line-height: 2rem;
+                        font-size: 0.95rem;
+                    }
+                }
+                .card-list {
+                    width: 50%;
+                    margin-top: 0;
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+            .media-wrap {
+                .right {
+                    .img-wrap {
+                        height: auto !important;
+                    }
+                }
+            }
+            .news {
+                flex-direction: row;
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .slide {
+                flex-direction: row;
+                .img-wrap {
+                    height: auto !important;
+                }
+            }
+            .list {
+                flex-direction: row;
+            }
         }
-      }
-      .list {
-        flex-direction: row;
-      }
     }
-  }
-  .media-wrap {
-    .left {
-      .slides {
-        .item {
-          height: auto !important;
+    .media-wrap {
+        .left {
+            .slides {
+                .item {
+                    height: auto !important;
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 768px) and (max-width: 980px) {
-  .wrap {
-   /deep/ .el-carousel{
-    height: 15rem;
-   }
-   /deep/ .el-carousel__container {
-    height: 15rem !important;
-   }
-   /deep/ .el-carousel__item{
-    height: 15rem;
-    img{
-      height: 15rem;
-    }
-   }
-  }
-  .block  {
-    .inner {
-      width: 90%;
-      .title  {
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
-        h5 {
-          font-size: 1rem;
-          span {
-            font-size: .75rem;
-          }
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
         }
-        span {
-          font-size: .85rem;
+        /deep/ .el-carousel__container {
+            height: 15rem !important;
         }
-      }
-      .sfel-banner {
-        flex-direction: row;
-        .newBox {
-          height: auto !important;
-        }
-        .right {
-          margin-top: 0;
-          h6 {
-            font-size: 1.072rem;
-            word-break: break-all
-          }
-          .des {
-            font-size: .9rem;
-            margin: 1rem 0;
-          }
-          .meta {
-            font-size: .8rem;
-          }
-        }
-      }
-      .card {
-        flex-direction: row;
-        margin-top: 1.25rem;
-        li {
-          width: calc((100% - 56px) / 3);
-          .pic {
-            height: auto;
-          }
-        }
-      }
-      .shop-shows{
-        flex-direction: row;
-        .left {
-          width: 50%;
-        }
-        .right  {
-          width: 50%;
-          margin-top: 0;
-        }
-        .slide {
-          height: auto;
-          p {
-            line-height: 1.7rem;
-          }
-        }
-      }
-      .shows {
-        flex-direction: row;
-        .left  {
-          width: 48%;
-          .text {
-            line-height: 2rem;
-            font-size: .95rem;
-          }
-        }
-        .card-list  {
-          width: 50%;
-          margin-top: 0;
-          li {
-            .pic {
-              height: auto !important;
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
             }
-          }
-        }
-      }
-      .media-wrap {
-        flex-direction: row;
-        .right  {
-          margin-top: 0;
-          .img-wrap {
-            height: auto !important;
-          }
-        }
-      }
-      .news {
-        flex-direction: row;
-        li {
-          img {
-            height: auto ;
-          }
         }
-      }
-      .slide {
-        flex-direction: row;
-        .img-wrap {
-          height: auto !important;
+    }
+    .block {
+        .inner {
+            width: 90%;
+            .title {
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+                h5 {
+                    font-size: 1rem;
+                    span {
+                        font-size: 0.75rem;
+                    }
+                }
+                span {
+                    font-size: 0.85rem;
+                }
+            }
+            .sfel-banner {
+                flex-direction: row;
+                .newBox {
+                    height: auto !important;
+                }
+                .right {
+                    margin-top: 0;
+                    h6 {
+                        font-size: 1.072rem;
+                        word-break: break-all;
+                    }
+                    .des {
+                        font-size: 0.9rem;
+                        margin: 1rem 0;
+                    }
+                    .meta {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+            .card {
+                flex-direction: row;
+                margin-top: 1.25rem;
+                li {
+                    width: calc((100% - 56px) / 3);
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    width: 50%;
+                }
+                .right {
+                    width: 50%;
+                    margin-top: 0;
+                }
+                .slide {
+                    height: auto;
+                    p {
+                        line-height: 1.7rem;
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    width: 48%;
+                    .text {
+                        line-height: 2rem;
+                        font-size: 0.95rem;
+                    }
+                }
+                .card-list {
+                    width: 50%;
+                    margin-top: 0;
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+            .media-wrap {
+                flex-direction: row;
+                .right {
+                    margin-top: 0;
+                    .img-wrap {
+                        height: auto !important;
+                    }
+                }
+            }
+            .news {
+                flex-direction: row;
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .slide {
+                flex-direction: row;
+                .img-wrap {
+                    height: auto !important;
+                }
+            }
+            .list {
+                flex-direction: row;
+            }
         }
-      }
-      .list {
-        flex-direction: row;
-      }
     }
-  }
-  .media-wrap {
-    .left {
-      .slides {
-        .item {
-          height: auto !important;
+    .media-wrap {
+        .left {
+            .slides {
+                .item {
+                    height: auto !important;
+                }
+            }
         }
-      }
     }
-  }
 }
 @media (min-width: 980px) and (max-width: 1200px) {
-  .wrap {
-   /deep/ .el-carousel{
-    height: 15rem;
-   }
-   /deep/ .el-carousel__container {
-    height: 15rem !important;
-   }
-   /deep/ .el-carousel__item{
-    height: 15rem;
-    img{
-      height: 15rem;
-    }
-   }
-  }
-  .block  {
-    .inner {
-      width: 90%;
-      .title  {
-        padding-bottom: 1rem;
-        margin-bottom: 1rem;
-        h5 {
-          font-size: 1rem;
-          span {
-            font-size: .75rem;
-          }
-        }
-        span {
-          font-size: .85rem;
-        }
-      }
-      .sfel-banner {
-        flex-direction: row;
-        .newBox {
-          height: auto !important;
-        }
-        .right {
-          margin-top: 0;
-          h6 {
-            font-size: 1.072rem;
-            word-break: break-all
-          }
-          .des {
-            font-size: .9rem;
-            margin: 1rem 0;
-          }
-          .meta {
-            font-size: .8rem;
-          }
-        }
-      }
-      .card {
-        flex-direction: row;
-        margin-top: 1.25rem;
-        li {
-          width: calc((100% - 56px) / 3);
-          .pic {
-            height: auto;
-          }
-        }
-      }
-      .shop-shows{
-        flex-direction: row;
-        .left {
-          width: 50%;
+    .wrap {
+        /deep/ .el-carousel {
+            height: 15rem;
         }
-        .right  {
-          width: 50%;
-          margin-top: 0;
+        /deep/ .el-carousel__container {
+            height: 15rem !important;
         }
-        .slide {
-          height: auto;
-          p {
-            line-height: 1.7rem;
-          }
-        }
-      }
-      .shows {
-        flex-direction: row;
-        .left  {
-          width: 48%;
-          .text {
-            line-height: 2rem;
-            font-size: .95rem;
-          }
-        }
-        .card-list  {
-          width: 50%;
-          margin-top: 0;
-          li {
-            .pic {
-              height: auto !important;
+        /deep/ .el-carousel__item {
+            height: 15rem;
+            img {
+                height: 15rem;
             }
-          }
-        }
-      }
-      .media-wrap {
-        flex-direction: row;
-        .right  {
-          margin-top: 0;
-          .img-wrap {
-            height: auto !important;
-          }
-        }
-      }
-      .news {
-        flex-direction: row;
-        li {
-          img {
-            height: auto ;
-          }
         }
-      }
-      .slide {
-        flex-direction: row;
-        .img-wrap {
-          height: auto !important;
+    }
+    .block {
+        .inner {
+            width: 90%;
+            .title {
+                padding-bottom: 1rem;
+                margin-bottom: 1rem;
+                h5 {
+                    font-size: 1rem;
+                    span {
+                        font-size: 0.75rem;
+                    }
+                }
+                span {
+                    font-size: 0.85rem;
+                }
+            }
+            .sfel-banner {
+                flex-direction: row;
+                .newBox {
+                    height: auto !important;
+                }
+                .right {
+                    margin-top: 0;
+                    h6 {
+                        font-size: 1.072rem;
+                        word-break: break-all;
+                    }
+                    .des {
+                        font-size: 0.9rem;
+                        margin: 1rem 0;
+                    }
+                    .meta {
+                        font-size: 0.8rem;
+                    }
+                }
+            }
+            .card {
+                flex-direction: row;
+                margin-top: 1.25rem;
+                li {
+                    width: calc((100% - 56px) / 3);
+                    .pic {
+                        height: auto;
+                    }
+                }
+            }
+            .shop-shows {
+                flex-direction: row;
+                .left {
+                    width: 50%;
+                }
+                .right {
+                    width: 50%;
+                    margin-top: 0;
+                }
+                .slide {
+                    height: auto;
+                    p {
+                        line-height: 1.7rem;
+                    }
+                }
+            }
+            .shows {
+                flex-direction: row;
+                .left {
+                    width: 48%;
+                    .text {
+                        line-height: 2rem;
+                        font-size: 0.95rem;
+                    }
+                }
+                .card-list {
+                    width: 50%;
+                    margin-top: 0;
+                    li {
+                        .pic {
+                            height: auto !important;
+                        }
+                    }
+                }
+            }
+            .media-wrap {
+                flex-direction: row;
+                .right {
+                    margin-top: 0;
+                    .img-wrap {
+                        height: auto !important;
+                    }
+                }
+            }
+            .news {
+                flex-direction: row;
+                li {
+                    img {
+                        height: auto;
+                    }
+                }
+            }
+            .slide {
+                flex-direction: row;
+                .img-wrap {
+                    height: auto !important;
+                }
+            }
+            .list {
+                flex-direction: row;
+            }
         }
-      }
-      .list {
-        flex-direction: row;
-      }
     }
-  }
-  .media-wrap {
-    .left {
-      .slides {
-        .item {
-          height: auto !important;
+    .media-wrap {
+        .left {
+            .slides {
+                .item {
+                    height: auto !important;
+                }
+            }
         }
-      }
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/speech/index.vue b/src/pages/speech/index.vue
index 9e48fc8..6bee074 100644
--- a/src/pages/speech/index.vue
+++ b/src/pages/speech/index.vue
@@ -49,23 +49,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
   },
@@ -76,7 +73,7 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 .block {
-    background: url(http://10.10.11.7/images/speech/2.png) no-repeat;
+    background: url(https://huorantech.com/images/speech/2.png) no-repeat;
 }
 .inner {
     display: flex;
@@ -115,11 +112,6 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .inner {
-        width: 95%;
-    }
-}
 @media (max-width: 920px) {
     .inner {
         flex-direction: column;
diff --git a/src/pages/talent/index.vue b/src/pages/talent/index.vue
index f9e2a26..8e4d0bf 100644
--- a/src/pages/talent/index.vue
+++ b/src/pages/talent/index.vue
@@ -298,6 +298,7 @@ export default {
         line-height: 1.5rem;
     }
 }
+
 @media (min-width: 280px) and (max-width: 1200px) {
     .single-banner {
         .texts {
diff --git a/src/pages/talentCenter/index.vue b/src/pages/talentCenter/index.vue
index d67d2d6..674e65d 100644
--- a/src/pages/talentCenter/index.vue
+++ b/src/pages/talentCenter/index.vue
@@ -322,6 +322,7 @@ export default {
         }
     }
 }
+
 @media (max-width: 1200px) {
     .content {
         width: 98%;
diff --git a/src/pages/talentCentre/index.vue b/src/pages/talentCentre/index.vue
index 5949e5f..6c2a611 100644
--- a/src/pages/talentCentre/index.vue
+++ b/src/pages/talentCentre/index.vue
@@ -71,28 +71,6 @@
               <span class="date">{{ item.releaseTime }}</span>
             </li>
           </ul>
-
-          <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)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-
-          <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)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
         </div>
       </div>
     </div>
@@ -136,7 +114,7 @@ export default {
 
           json[4].list = json[4].list.filter(e => e.isEnable)
           json[4].list.unshift({
-            title: '人才中心'
+            title: '加入我们'
           })
           json[4].list.forEach((e, i) => {
             e.id = i
@@ -220,13 +198,13 @@ export default {
                 .texts {
                     left: 50px;
                     right: auto;
-                    background: rgba(255, 255, 255, 0.43);
                 }
             }
         }
         .pic {
             width: 100%;
             height: 100%;
+            object-fit: cover;
         }
         .texts {
             position: absolute;
@@ -292,6 +270,7 @@ export default {
         }
     }
 }
+
 @media (max-width: 1200px) {
     .content {
         width: 90%;
diff --git a/src/pages/team/index.vue b/src/pages/team/index.vue
index 747538d..ad7ba47 100644
--- a/src/pages/team/index.vue
+++ b/src/pages/team/index.vue
@@ -10,9 +10,9 @@
     </div>
 
     <div class="content">
-      <div class="left">
-        <ul class="list">
-          <li v-for="(item, i) in modules[1].list"
+      <ul class="list">
+        <template v-for="(item, i) in modules[1].list">
+          <li v-if="item.isEnable"
               :key="i"
               :class="{'cursor-pointer': isLink(item.link.linkName)}"
               @click="openLink(item)">
@@ -26,10 +26,8 @@
                    v-html="item.des"></div>
             </div>
           </li>
-        </ul>
-      </div>
-
-      <RightColumns />
+        </template>
+      </ul>
     </div>
   </div>
 </template>
@@ -38,6 +36,7 @@
 import mixins from '@/mixins/page'
 import WOW from 'wow.js'
 import RightColumns from '@/components/rightColumns'
+import Util from '@/libs/util'
 export default {
   mixins: [mixins],
   data () {
@@ -55,23 +54,20 @@ export default {
     // 获取文章详情
     getInfo () {
       // 预览/详情
-      this.$post(
-        `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
-      )
-        .then(({ data }) => {
-          if (data.length) {
-            // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
-            const json = JSON.parse(
-              this.preview
-                ? data
-                : data[data.length - 1][
-                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                ]
-            );
-            this.modules = json;
-            console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
-          }
-        })
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(
+            this.preview
+              ? data
+              : data[data.length - 1][
+              data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+              ]
+          );
+          this.modules = json;
+          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
+        }
+      })
         .catch((err) => { });
     },
   }
@@ -103,6 +99,7 @@ export default {
             width: 224px;
             height: 268px;
             margin-right: 25px;
+            object-fit: cover;
         }
         h6 {
             font-size: 1.2rem;
diff --git a/src/pages/userSharing/index.vue b/src/pages/userSharing/index.vue
index c10f8bf..1bb1eb2 100644
--- a/src/pages/userSharing/index.vue
+++ b/src/pages/userSharing/index.vue
@@ -11,23 +11,24 @@
     </div>
 
     <div class="block share">
-      <div class="inner">
+      <div class="inner relative">
         <div class="left">
           <h6 class="wow fadeInUp"
               v-html="modules[1].form.title"></h6>
           <p class="en wow fadeInUp"
              data-wow-delay="0.5s">USERS SHARE</p>
           <div class="des wow fadeInUp"
-               data-wow-delay="0.8s">{{ modules[1].form.des }}</div>
+               data-wow-delay="0.8s"
+               v-html="modules[1].form.des"></div>
         </div>
         <img class="pic wow bounceInRight"
              data-wow-delay="0.8s"
-             src="@/assets/images/userSharing/1.png"
+             :src="modules[1].form.pic"
              alt="">
         <div class="card wow bounceInLeft"
              data-wow-delay="0.8s">
           <p class="title">{{ modules[1].form.subTitle }}</p>
-          <p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p>
+          <p class="en-text">{{ modules[1].form.enTitle }}</p>
         </div>
       </div>
     </div>
@@ -35,7 +36,7 @@
     <div class="block gray">
       <ul class="group">
         <li class="wow bounceInDown"
-            :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+            :class="{'cursor-pointer': modules[2].form.link && isLink(modules[2].form.link.linkName)}"
             @click="openLink(modules[2].form)">
           <img src="@/assets/images/userSharing/2.png"
                alt="">
@@ -44,7 +45,7 @@
         </li>
         <li class="wow bounceInDown"
             data-wow-delay="0.1s"
-            :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+            :class="{'cursor-pointer': modules[3].form.link && isLink(modules[3].form.link.linkName)}"
             @click="openLink(modules[3].form)">
           <img src="@/assets/images/userSharing/3.png"
                alt="">
@@ -53,7 +54,7 @@
         </li>
         <li class="wow bounceInDown"
             data-wow-delay="0.2s"
-            :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
+            :class="{'cursor-pointer': modules[4].form.link && isLink(modules[4].form.link.linkName)}"
             @click="openLink(modules[4].form)">
           <img src="@/assets/images/userSharing/4.png"
                alt="">
@@ -126,6 +127,7 @@ export default {
     }
     .left {
         width: 40%;
+        padding-right: 2%;
     }
     h6 {
         position: relative;
@@ -150,14 +152,14 @@ export default {
     .pic {
         width: 60%;
         height: auto;
-        border-top-left-radius: 20px;
+        border-top-left-radius: 70px;
     }
     .card {
         position: absolute;
-        bottom: 5.2rem;
+        bottom: 0;
         left: 0;
-        width: 66.75rem;
-        padding: 1.875rem 0 1.875rem 21.5%;
+        width: 60%;
+        padding: 1.5rem 0 1.5rem 2%;
         background: #7bacc4;
         border-radius: 0px 100px 0px 0px;
         opacity: 0.88;
@@ -221,6 +223,7 @@ export default {
         line-height: 31px;
     }
 }
+
 @media (max-width: 1200px) {
     body {
         width: 100% !important;