活动简介改成非必填

src/components/menuTree/index.vue

@@ -84,4 +84,14 @@ export default {
     }
   }
 }
+
+@media (max-width: 640px) {
+  .nav {
+    &>.menu-child {
+      &>.el-menu-item {
+        font-size: 1rem;
+      }
+    }
+  }
+}
 </style>

src/i18n/index.js

@@ -22,7 +22,7 @@ export const messages = {
       series: '演讲系列',
       all: '全部',
       readDetail: '阅读详情',
-      offline:'线下',
+      offline: '线下',
       more: '更多',
       author: '作者',
       quote: '引用',
@@ -55,20 +55,20 @@ export const messages = {
       seeMore: '查看更多',
       inventionpatent: '发明专利',
       practicalAppearance: '实用外观',
-      patent:'专利',
+      patent: '专利',
       monograph: '专著',
       paper: '论文',
       scientificResearch: '科学研究',
       sfeLintroduce: 'S³FEL介绍',
-      develHistory:'发展历程',
+      develHistory: '发展历程',
       sfeltrailer: 'S³FEL宣传片',
       geographicLocation: '地理位置',
       organization: '机构设置',
       introduce: '介绍',
       ActivityIntroduction: '活动简介',
       back: '返回',
-			comming: '暂无更多信息，敬请期待。',
+      comming: '暂无更多信息，敬请期待。',
-			nothing: '没有找到您搜索的内容，您可尝试搜索其他关键词。',
+      nothing: '没有找到您搜索的内容，您可尝试搜索其他关键词。',
     }
   },
   'en': {
@@ -114,7 +114,7 @@ export const messages = {
       pleaseEnterPatentOfficer: 'Please enter the patent name/inventor name/application number',
       patentName: 'Patent title',
       patentClassification: 'Patent classification',
-      ApplicationNumber:'Application number',
+      ApplicationNumber: 'Application number',
       AuthorizationDate: 'Authorization Date',
       inventor: 'Inventor',
       Pleaseselect: 'Please select',
@@ -125,21 +125,21 @@ export const messages = {
       authorPersion: 'Author',
       seeMore: 'See more',
       inventionpatent: 'Invention Patent',
-      practicalAppearance:'Practical appearance',
+      practicalAppearance: 'Practical appearance',
       patent: 'Patent',
       monograph: 'Monograph',
       paper: 'Paper',
       scientificResearch: 'Scientific research',
       sfeLintroduce: 'Sfe lintroduce',
-      develHistory:'Development history',
+      develHistory: 'Development history',
       sfeltrailer: 'Sfel trailer',
       geographicLocation: 'geographic location',
       organization: 'Organization',
       introduce: 'Introduce',
       ActivityIntroduction: 'Activity Introduction',
       back: 'Back',
-			comming: 'coming soone',
+      comming: 'coming soone',
-			nothing: `We couldn't find the content you were searching for. You can try searching for other keywords.`,
+      nothing: `We couldn't find the content you were searching for. You can try searching for other keywords.`,
     }
   }
 };

src/layouts/footer/index.vue

@@ -41,7 +41,7 @@
         </div> -->
       </div>
     </div>
-    <div class="copyright">Copyright ©深圳综合粒子设施研究院 粤ICP备2020131940号 粤公安网34565432456765432号</div>
+    <div class="copyright">Copyright ©深圳综合粒子设施研究院 粤ICP备2020131940号-1 粤公网安备44031102000586号</div>
   </div>
 </template>
 <script>

src/pages/article/activity.vue

@@ -10,17 +10,18 @@
         <div class="left">
           <h2>{{ form.title }}</h2>
           <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" class="meta">{{ $t('column.online') }}：{{ form.onlineLocation }}</div>
           <div v-if="form.offlineLocation" class="meta">{{ $t('column.offline') }}：{{ form.offlineLocation }}</div>
           <div v-if="form.keynoteSpeaker" class="meta">{{ $t('column.speaker') }}：{{ form.keynoteSpeaker }}</div>
           <div v-if="form.lectureSeries" class="meta">{{ $t('column.series') }}：{{ form.lectureSeries }}</div>
 
-          <h6>{{ $t('column.ActivityIntroduction') }}</h6>
+          <template v-if="form.eventProfile">
-          <div class="profile"> {{ form.eventProfile }}</div>
+            <h6>{{ $t('column.ActivityIntroduction') }}</h6>
+            <div class="profile"> {{ form.eventProfile }}</div>
+          </template>
 
           <h6>{{ $t('column.content') }}</h6>
-          <div v-html="form.mainBody"></div>
+          <div class="des" v-html="form.mainBody"></div>
           <div v-if="form.fileList && form.fileList.length" class="annex">
             <h6>{{ $t('column.attachmentDownload') }}</h6>
             <ul class="files">
@@ -178,6 +179,24 @@ export default {
     img {
       max-width: 100%;
     }
+
+    ul {
+      padding-left: 40px;
+      list-style: disc;
+
+      li {
+        list-style: inherit;
+      }
+    }
+
+    ol {
+      padding-left: 40px;
+      list-style: decimal;
+
+      li {
+        list-style: inherit;
+      }
+    }
   }
 
   .annex {

src/pages/column/index.vue

@@ -245,16 +245,16 @@
                             <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">
+                            <template v-else-if="item.fileList && item.fileList.length">
                               <!-- <el-image class="media-pic"
-                                      :style="{backgroundImage: 'url(https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521)'}"
+                                      :style="{backgroundImage: 'url(https://www.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521)'}"
-                                      src="https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521"
+                                      src="https://www.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521"
-                                      :preview-src-list="['https://new.iasf.ac.cn/iasf/sysFiles/preview/1706961813193707521']">
+                                      :preview-src-list="['https://www.iasf.ac.cn/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://new.iasf.ac.cn/images/about/12.png' : ''" preload>
+                                :poster="isIphone ? 'https://www.iasf.ac.cn/images/about/12.png' : ''" preload>
                                 <source :src="item.fileList[0].filePath" type="video/mp4">
                                 您的浏览器不支持 video 标签。
                               </video>
@@ -1522,5 +1522,10 @@ export default {
       }
     }
   }
+
+  .detail {
+    max-width: 100%;
+    margin-top: 20px;
+  }
 }
 </style>

src/pages/contactUs/index.vue

@@ -137,8 +137,8 @@ export default {
 
 .block {
   padding: 2rem 0;
-  background: url(https://new.iasf.ac.cn/images/contactUs/3.png) 0 130px no-repeat,
+  background: url(https://www.iasf.ac.cn/images/contactUs/3.png) 0 130px no-repeat,
-    url(https://new.iasf.ac.cn/images/contactUs/4.png) bottom right no-repeat;
+    url(https://www.iasf.ac.cn/images/contactUs/4.png) bottom right no-repeat;
   background-color: #f7f8fa;
 }
 

src/pages/deviceIntroBeam/index.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="wrap">
     <el-carousel :interval="6000"
-                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+      :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'">
+      :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"
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-                          :key="i">
+          <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+            <img :src="item.pic" alt="">
-               @click="openLink(item)">
-            <img :src="item.pic"
-                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -19,37 +16,27 @@
     <div class="block share">
       <div class="inner">
         <h6 v-html="modules[1].form.title"></h6>
-        <p class="en"
+        <p class="en" v-html="modules[1].form.des"></p>
-           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"
+            <div class="des" v-html="modules[2].form.des"></div>
-                 v-html="modules[2].form.des"></div>
           </div>
-          <img class="pic"
+          <img class="pic" :src="modules[2].form.pic" alt="">
-               :src="modules[2].form.pic"
-               alt="">
         </div>
       </div>
     </div>
 
     <div class="intro">
       <div class="inner intro-inner">
-        <img class="pic"
+        <img class="pic" :src="modules[3].form.pic" alt="">
-             :src="modules[3].form.pic"
+        <div class="des" v-html="modules[3].form.des"></div>
-             alt="">
-        <div class="des"
-             v-html="modules[3].form.des"></div>
       </div>
     </div>
 
     <div class="unit">
-      <div class="title"
+      <div class="title" v-html="modules[4].form.title"></div>
-           v-html="modules[4].form.title"></div>
+      <img class="pic" :src="modules[4].form.pic" alt="">
-      <img class="pic"
-           :src="modules[4].form.pic"
-           alt="">
     </div>
   </div>
 </template>
@@ -93,198 +80,235 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 $banner-height: 21.6rem;
+
 .wrap {
-    background: url(https://new.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat;
+  background: url(https://www.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat;
-    /deep/ .el-carousel {
+
-        height: $banner-height;
+  /deep/ .el-carousel {
-        .el-carousel__container {
+    height: $banner-height;
-            height: $banner-height;
+
-        }
+    .el-carousel__container {
-        img {
+      height: $banner-height;
-            height: $banner-height;
-        }
     }
+
+    img {
+      height: $banner-height;
+    }
+  }
 }
+
 .banner-item {
-    .banner-name {
+  .banner-name {
-        font-size: 2.16rem;
+    font-size: 2.16rem;
-        left: 17%;
+    left: 17%;
-        bottom: 20%;
+    bottom: 20%;
-    }
+  }
 }
+
 .block {
-    padding: 3.85rem 0;
+  padding: 3.85rem 0;
-    .inner {
+
-        h6 {
+  .inner {
-            font-size: 1.76rem;
+    h6 {
-        }
+      font-size: 1.76rem;
-        .en {
-            font-size: 1.76rem;
-            margin: 0px 0 2rem;
-        }
-        .sum {
-            margin-top: 3rem;
-            font-size: 0.96rem;
-        }
     }
+
+    .en {
+      font-size: 1.76rem;
+      margin: 0px 0 2rem;
+    }
+
+    .sum {
+      margin-top: 3rem;
+      font-size: 0.96rem;
+    }
+  }
 }
+
 .beamBox {
-    position: relative;
+  position: relative;
-    .imgText {
+
-        position: absolute;
+  .imgText {
-        right: 2rem;
+    position: absolute;
-        bottom: 2.25rem;
+    right: 2rem;
-        display: flex;
+    bottom: 2.25rem;
-        font-size: 0.9rem;
+    display: flex;
-        font-weight: 400;
+    font-size: 0.9rem;
-        .readio {
+    font-weight: 400;
-            width: 7px;
+
-            height: 7px;
+    .readio {
-            background-color: #2a2a2a;
+      width: 7px;
-            border-radius: 50%;
+      height: 7px;
-            margin-right: 10px;
+      background-color: #2a2a2a;
-            margin-top: 8px;
+      border-radius: 50%;
-        }
+      margin-right: 10px;
+      margin-top: 8px;
     }
+  }
 }
+
 .share {
+  position: relative;
+
+  .beamBox {
+    align-items: center;
+  }
+
+  .left {
+    width: 50%;
+    padding-right: 66px;
+  }
+
+  h6 {
     position: relative;
-    .beamBox {
+    font-size: 1.92rem;
-        align-items: center;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: bold;
+    color: #333333;
+  }
+
+  .en {
+    margin-top: -25px;
+    font-size: 2.4rem;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #e3e3e3;
+  }
+
+  .sum {
+    margin-top: 60px;
+    font-size: 1.2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 44px;
+  }
+
+  .des {
+    margin-top: 1.25rem;
+    font-size: 0.88rem;
+    color: #333;
+    line-height: 1.85rem;
+    -webkit-line-clamp: inherit;
+    overflow: visible;
+  }
+
+  .pic {
+    width: 50%;
+    margin-top: 10px;
+    border-top-left-radius: 20px;
+  }
+}
+
+.intro {
+  height: 19.65rem;
+  margin-bottom: 67px;
+
+  .intro-inner {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    background-color: #2e4984;
+  }
+
+  .pic {
+    width: 50%;
+    height: 100%;
+  }
+
+  .des {
+    width: 50%;
+    height: 19.65rem;
+    padding: 2.85rem 3rem 1rem 3rem;
+    font-size: 0.96rem;
+    color: #fff;
+    line-height: 2rem;
+    -webkit-line-clamp: 7; //设定一共3行，超出的部分隐藏，并用省略号来表示
+  }
+}
+
+.unit {
+  width: 986px;
+  padding-bottom: 60px;
+  margin: 0 auto;
+
+  .title {
+    padding-left: 0.93rem;
+    margin-bottom: 0.93rem;
+    font-size: 0.88rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2a2a2a;
+    border-left: 4px solid #1583ff;
+  }
+}
+
+@media (max-width: 1200px) {
+  .banner {
+    height: 12rem;
+    padding: 6rem 0 0 2rem;
+  }
+
+  .beamBox {
+    .imgText {
+      bottom: 4rem;
+      right: 4rem;
     }
+  }
+
+  .share {
+    width: 90%;
+    padding-left: 0;
+    margin: 0 auto;
+  }
+
+  .beamBox {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
     .left {
-        width: 50%;
+      width: 100%;
-        padding-right: 66px;
-    }
-    h6 {
-        position: relative;
-        font-size: 1.92rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: bold;
-        color: #333333;
-    }
-    .en {
-        margin-top: -25px;
-        font-size: 2.4rem;
-        font-family: PingFangSC-Light, PingFang SC;
-        font-weight: 300;
-        color: #e3e3e3;
-    }
-    .sum {
-        margin-top: 60px;
-        font-size: 1.2rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #333333;
-        line-height: 44px;
     }
+
     .des {
-        margin-top: 1.25rem;
+      -webkit-line-clamp: 100;
-        font-size: 0.88rem;
-        color: #333;
-        line-height: 1.85rem;
-        -webkit-line-clamp: inherit;
-        overflow: visible;
     }
+
     .pic {
-        width: 50%;
+      margin-top: 10px;
-        margin-top: 10px;
+      width: 100%;
-        border-top-left-radius: 20px;
+      height: auto;
     }
-}
+  }
-.intro {
+
-    height: 19.65rem;
+  .intro {
-    margin-bottom: 67px;
+    width: 90%;
+    padding: 1rem 0;
+    height: auto;
+
     .intro-inner {
-        display: flex;
+      flex-direction: column;
-        align-items: center;
-        height: 100%;
-        background-color: #2e4984;
     }
+
     .pic {
-        width: 50%;
+      width: 80%;
-        height: 100%;
     }
+
     .des {
-        width: 50%;
+      width: 80%;
-        height: 19.65rem;
+      height: auto;
-        padding: 2.85rem 3rem 1rem 3rem;
+      padding: 2rem 0 0;
-        font-size: 0.96rem;
+      -webkit-line-clamp: 100;
-        color: #fff;
-        line-height: 2rem;
-        -webkit-line-clamp: 7; //设定一共3行，超出的部分隐藏，并用省略号来表示
-    }
-}
-.unit {
-    width: 986px;
-    padding-bottom: 60px;
-    margin: 0 auto;
-    .title {
-        padding-left: 0.93rem;
-        margin-bottom: 0.93rem;
-        font-size: 0.88rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #2a2a2a;
-        border-left: 4px solid #1583ff;
     }
-}
+  }
 
-@media (max-width: 1200px) {
+  .unit {
-    .banner {
+    width: 95%;
-        height: 12rem;
+
-        padding: 6rem 0 0 2rem;
+    img {
-    }
+      width: 100%;
-    .beamBox {
-        .imgText {
-            bottom: 4rem;
-            right: 4rem;
-        }
-    }
-    .share {
-        width: 90%;
-        padding-left: 0;
-        margin: 0 auto;
-    }
-    .beamBox {
-        display: flex;
-        flex-direction: column;
-        position: relative;
-
-        .left {
-            width: 100%;
-        }
-        .des {
-            -webkit-line-clamp: 100;
-        }
-        .pic {
-            margin-top: 10px;
-            width: 100%;
-            height: auto;
-        }
-    }
-    .intro {
-        width: 90%;
-        padding: 1rem 0;
-        height: auto;
-        .intro-inner {
-            flex-direction: column;
-        }
-        .pic {
-            width: 80%;
-        }
-        .des {
-            width: 80%;
-            height: auto;
-            padding: 2rem 0 0;
-            -webkit-line-clamp: 100;
-        }
-    }
-    .unit {
-        width: 95%;
-        img {
-            width: 100%;
-        }
     }
+  }
 }
 </style>

src/pages/deviceIntroLayout/index.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="wrap">
     <el-carousel :interval="6000"
-                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+      :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'">
+      :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"
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-                          :key="i">
+          <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+            <img :src="item.pic" alt="">
-               @click="openLink(item)">
-            <img :src="item.pic"
-                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -20,33 +17,22 @@
       <div class="inner">
         <h6 v-html="modules[1].form.title"></h6>
         <p class="en">{{ modules[1].form.subTitle }}</p>
-        <div class="card"
+        <div class="card" v-html="modules[1].form.des"></div>
-             v-html="modules[1].form.des"></div>
         <div class="texts">
-          <div class="des"
+          <div class="des" v-html="modules[2].form.des"></div>
-               v-html="modules[2].form.des"></div>
+          <img class="pic" :src="modules[2].form.pic" alt="">
-          <img class="pic"
-               :src="modules[2].form.pic"
-               alt="">
         </div>
       </div>
     </div>
 
     <div class="inner intro">
-      <img class="bg"
+      <img class="bg" src="https://www.iasf.ac.cn/images/device/7.png" alt="">
-           src="https://new.iasf.ac.cn/images/device/7.png"
+      <img class="pic" :src="modules[3].form.pic" alt="">
-           alt="">
-      <img class="pic"
-           :src="modules[3].form.pic"
-           alt="">
     </div>
 
     <div class="unit">
-      <div class="title"
+      <div class="title" v-html="modules[4].form.title"></div>
-           v-html="modules[4].form.title"></div>
+      <img class="pic" :src="modules[4].form.pic" alt="">
-      <img class="pic"
-           :src="modules[4].form.pic"
-           alt="">
     </div>
   </div>
 </template>
@@ -90,183 +76,216 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 $banner-height: 21.6rem;
+
 .wrap {
-    background: url(https://new.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat;
+  background: url(https://www.iasf.ac.cn/images/device/4.png) bottom right/auto no-repeat;
-    /deep/ .el-carousel {
+
-        height: $banner-height;
+  /deep/ .el-carousel {
-        .el-carousel__container {
+    height: $banner-height;
-            height: $banner-height;
+
-        }
+    .el-carousel__container {
-        img {
+      height: $banner-height;
-            height: $banner-height;
+    }
-        }
+
+    img {
+      height: $banner-height;
     }
+  }
 }
+
 .banner-item {
-    .banner-name {
+  .banner-name {
-        font-size: 2.16rem;
+    font-size: 2.16rem;
-        left: 17%;
+    left: 17%;
-        bottom: 20%;
+    bottom: 20%;
-    }
+  }
 }
+
 .block {
-    padding: 3.85rem 0;
+  padding: 3.85rem 0;
-    .inner {
+
-        h6 {
+  .inner {
-            font-size: 2.16rem;
-        }
-        .en {
-            font-size: 1.76rem;
-            margin: 0px 0 2rem;
-        }
-    }
-}
-.share {
-    position: relative;
-    .texts {
-        display: flex;
-    }
     h6 {
-        position: relative;
+      font-size: 2.16rem;
-        font-size: 1.76rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: bold;
-        color: #333333;
     }
+
     .en {
-        margin: -25px 0 40px;
+      font-size: 1.76rem;
-        font-size: 2.2rem;
+      margin: 0px 0 2rem;
-        font-family: PingFangSC-Light, PingFang SC;
-        font-weight: 300;
-        color: #e3e3e3;
-    }
-    .card {
-        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(https://new.iasf.ac.cn/images/device/5.png) center center no-repeat;
-    }
-    .des {
-        flex-grow: 1;
-        margin: 25px 4rem 0 0;
-        font-size: 1rem;
-        -webkit-line-clamp: inherit;
-        color: #333;
-        line-height: 2;
-        overflow: visible;
-    }
-    .pic {
-        width: 44.375rem;
-        height: auto;
-        border-top-left-radius: 20px;
     }
+  }
 }
-.intro {
+
+.share {
+  position: relative;
+
+  .texts {
+    display: flex;
+  }
+
+  h6 {
     position: relative;
-    margin: 60px auto;
+    font-size: 1.76rem;
-    .bg {
+    font-family: PingFangSC-Medium, PingFang SC;
-        height: 35.73rem;
+    font-weight: bold;
-    }
+    color: #333333;
-    .pic {
+  }
-        position: absolute;
+
-        top: 3.015rem;
+  .en {
-        left: 30%;
+    margin: -25px 0 40px;
-        width: 71%;
+    font-size: 2.2rem;
-        height: 29.74rem;
+    font-family: PingFangSC-Light, PingFang SC;
-    }
+    font-weight: 300;
+    color: #e3e3e3;
+  }
+
+  .card {
+    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(https://www.iasf.ac.cn/images/device/5.png) center center no-repeat;
+  }
+
+  .des {
+    flex-grow: 1;
+    margin: 25px 4rem 0 0;
+    font-size: 1rem;
+    -webkit-line-clamp: inherit;
+    color: #333;
+    line-height: 2;
+    overflow: visible;
+  }
+
+  .pic {
+    width: 44.375rem;
+    height: auto;
+    border-top-left-radius: 20px;
+  }
+}
+
+.intro {
+  position: relative;
+  margin: 60px auto;
+
+  .bg {
+    height: 35.73rem;
+  }
+
+  .pic {
+    position: absolute;
+    top: 3.015rem;
+    left: 30%;
+    width: 71%;
+    height: 29.74rem;
+  }
 }
+
 .unit {
-    width: 986px;
+  width: 986px;
-    padding-bottom: 60px;
+  padding-bottom: 60px;
-    margin: 0 auto;
+  margin: 0 auto;
-    .title {
+
-        padding-left: 0.93rem;
+  .title {
-        margin-bottom: 0.93rem;
+    padding-left: 0.93rem;
-        font-size: 0.88rem;
+    margin-bottom: 0.93rem;
-        font-family: PingFangSC-Medium, PingFang SC;
+    font-size: 0.88rem;
-        font-weight: 500;
+    font-family: PingFangSC-Medium, PingFang SC;
-        color: #2a2a2a;
+    font-weight: 500;
-        border-left: 4px solid #1583ff;
+    color: #2a2a2a;
-    }
+    border-left: 4px solid #1583ff;
+  }
 }
 
 @media (max-width: 1400px) {
-    .share {
+  .share {
-        .card {
+    .card {
-            position: relative;
+      position: relative;
-            margin-left: -2.5%;
+      margin-left: -2.5%;
-        }
+    }
-        .inner {
+
-            max-width: none;
+    .inner {
-            width: 95%;
+      max-width: none;
-            .texts {
+      width: 95%;
-                position: static;
+
-                display: flex;
+      .texts {
-                flex-direction: column;
+        position: static;
-                align-items: flex-end;
+        display: flex;
-                margin-left: 15%;
+        flex-direction: column;
-                .des {
+        align-items: flex-end;
-                    width: 100%;
+        margin-left: 15%;
-                    -webkit-line-clamp: 100;
+
-                }
+        .des {
-            }
+          width: 100%;
-        }
+          -webkit-line-clamp: 100;
-        .pic {
-            width: 50%;
-            margin-top: 20px;
         }
+      }
     }
 
-    .bg {
+    .pic {
-        width: 100%;
+      width: 50%;
+      margin-top: 20px;
     }
-    .intro {
+  }
-        height: 36rem;
+
-        margin-top: 0;
+  .bg {
-        .pic {
+    width: 100%;
-            width: 100%;
+  }
-            left: 0;
+
-            top: 6%;
+  .intro {
-        }
+    height: 36rem;
+    margin-top: 0;
+
+    .pic {
+      width: 100%;
+      left: 0;
+      top: 6%;
     }
-    .unit {
+  }
-        width: 95%;
+
-        img {
+  .unit {
-            width: 100%;
+    width: 95%;
-        }
+
+    img {
+      width: 100%;
     }
+  }
 }
+
 @media (max-width: 980px) {
-    .share {
+  .share {
-        .pic {
+    .pic {
-            width: 80%;
+      width: 80%;
-        }
     }
+  }
 }
+
 @media (max-width: 640px) {
-    .share {
+  .share {
-        .inner {
+    .inner {
-            .texts {
+      .texts {
-                margin: 0 auto;
+        margin: 0 auto;
-            }
+      }
-        }
-        .des {
-            margin-right: 0;
-        }
     }
-    .intro {
+
-        height: auto;
+    .des {
-        .bg,
+      margin-right: 0;
-        .pic {
-            position: static;
-            width: 100%;
-            height: auto;
-        }
     }
+  }
+
+  .intro {
+    height: auto;
+
+    .bg,
+    .pic {
+      position: static;
+      width: 100%;
+      height: auto;
+    }
+  }
 }
 </style>

src/pages/deviceIntroLinear/index.vue

@@ -1,15 +1,12 @@
 <template>
   <div class="wrap">
     <el-carousel :interval="6000"
-                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+      :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'">
+      :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"
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-                          :key="i">
+          <div :class="['banner-item', { 'cursor-pointer': isLink(item.link.linkName) }]" @click="openLink(item)">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+            <img :src="item.pic" alt="">
-               @click="openLink(item)">
-            <img :src="item.pic"
-                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -18,21 +15,15 @@
 
     <div class="block history gray">
       <div class="inner">
-        <h2 class="wow fadeInLeft"
+        <h2 class="wow fadeInLeft" v-html="modules[1].form.title"></h2>
-            v-html="modules[1].form.title"></h2>
+        <p class="en" v-html="modules[1].form.des"></p>
-        <p class="en"
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
-           v-html="modules[1].form.des"></p>
-        <div class="texts wow fadeInDown"
-             data-wow-delay="0.5s">
           <div class="left">
             <h6>{{ modules[2].form.title }}</h6>
             <div class="line"></div>
-            <div class="text"
+            <div class="text" v-html="modules[2].form.des"></div>
-                 v-html="modules[2].form.des"></div>
           </div>
-          <img class="bg"
+          <img class="bg" src="https://www.iasf.ac.cn/images/device/10.png" alt="" />
-               src="https://new.iasf.ac.cn/images/device/10.png"
-               alt="" />
         </div>
       </div>
     </div>
@@ -40,16 +31,12 @@
     <div class="block intro">
       <div class="inner">
         <div class="left">
-          <div class="title1"
+          <div class="title1" v-html="modules[3].form.title"></div>
-               v-html="modules[3].form.title"></div>
+          <img :src="modules[3].form.pic" alt="" />
-          <img :src="modules[3].form.pic"
-               alt="" />
         </div>
         <div class="right">
-          <div class="title2"
+          <div class="title2" v-html="modules[4].form.title"></div>
-               v-html="modules[4].form.title"></div>
+          <img :src="modules[4].form.pic" alt="" />
-          <img :src="modules[4].form.pic"
-               alt="" />
         </div>
       </div>
     </div>
@@ -93,229 +80,249 @@ export default {
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
 $banner-height: 21.6rem;
+
 .wrap {
-    /deep/ .el-carousel {
+  /deep/ .el-carousel {
-        height: $banner-height;
+    height: $banner-height;
-        .el-carousel__container {
+
-            height: $banner-height;
+    .el-carousel__container {
-        }
+      height: $banner-height;
-        img {
+    }
-            height: $banner-height;
+
-        }
+    img {
+      height: $banner-height;
     }
+  }
 }
+
 .banner-item {
-    .banner-name {
+  .banner-name {
-        font-size: 2.16rem;
+    font-size: 2.16rem;
-        left: 17%;
+    left: 17%;
-        bottom: 20%;
+    bottom: 20%;
-    }
+  }
 }
+
 .block {
-    padding: 3.85rem 0;
+  padding: 3.85rem 0;
-    .inner {
-        h2 {
-            font-size: 1.76rem;
-        }
-        .en {
-            font-size: 1.76rem;
-            margin: 0px 0 2rem;
-        }
-    }
-}
-.history {
-    .inner {
-        width: 1200px;
-        max-width: 1504px;
-    }
 
+  .inner {
     h2 {
-        position: relative;
+      font-size: 1.76rem;
-        font-size: 1.76rem;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        font-weight: 600;
-        color: #1c1c1c;
     }
 
     .en {
-        margin: -25px 0 40px;
+      font-size: 1.76rem;
-        font-size: 2.2rem;
+      margin: 0px 0 2rem;
-        font-family: PingFangSC-Light, PingFang SC;
-        font-weight: 300;
-        color: #e3e3e3;
     }
+  }
+}
 
-    .texts {
+.history {
-        display: flex;
+  .inner {
-        justify-content: space-between;
+    width: 1200px;
-        padding: 5.125rem 0 1.875rem 2.375rem;
+    max-width: 1504px;
-        margin-top: 20px;
+  }
-        background: #1583ff;
-        border-radius: 65px 100px 0px 0px;
-        transition: 0.3s;
-        position: relative;
-        .imgText {
-            position: absolute;
-            right: 0rem;
-            bottom: 4.25rem;
-            display: flex;
-            font-size: 0.9rem;
-            color: #ffffff;
-            font-weight: 400;
-            .readio {
-                width: 7px;
-                height: 7px;
-                background-color: #ffffff;
-                border-radius: 50%;
-                margin-right: 10px;
-                margin-top: 8px;
-            }
-        }
 
-        &:hover {
+  h2 {
-            transform: scale(1.05);
+    position: relative;
-        }
+    font-size: 1.76rem;
-    }
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #1c1c1c;
+  }
 
-    .left {
+  .en {
-        width: 50%;
+    margin: -25px 0 40px;
-    }
+    font-size: 2.2rem;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+    color: #e3e3e3;
+  }
 
-    h6 {
+  .texts {
-        font-size: 1.4rem;
+    display: flex;
-        font-family: PingFangSC-Medium, PingFang SC;
+    justify-content: space-between;
-        font-weight: 500;
+    padding: 5.125rem 0 1.875rem 2.375rem;
-        color: #ffffff;
+    margin-top: 20px;
-    }
+    background: #1583ff;
+    border-radius: 65px 100px 0px 0px;
+    transition: 0.3s;
+    position: relative;
 
-    .line {
+    .imgText {
-        width: 214px;
+      position: absolute;
-        height: 5px;
+      right: 0rem;
-        margin: 54px 0 44px;
+      bottom: 4.25rem;
-        background: #ffffff;
+      display: flex;
-        opacity: 0.52;
+      font-size: 0.9rem;
-    }
+      color: #ffffff;
+      font-weight: 400;
 
-    .text {
+      .readio {
-        font-size: 1.1rem;
+        width: 7px;
-        font-family: PingFangSC-Regular, PingFang SC;
+        height: 7px;
-        font-weight: 400;
+        background-color: #ffffff;
-        color: #ffffff;
+        border-radius: 50%;
-        line-height: 1.6;
+        margin-right: 10px;
+        margin-top: 8px;
+      }
     }
 
-    .bg {
+    &:hover {
-        width: 50%;
+      transform: scale(1.05);
-        margin: -8.875rem -3.125rem 0 0;
-        border-top-left-radius: 30px;
     }
+  }
+
+  .left {
+    width: 50%;
+  }
+
+  h6 {
+    font-size: 1.4rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+  }
+
+  .line {
+    width: 214px;
+    height: 5px;
+    margin: 54px 0 44px;
+    background: #ffffff;
+    opacity: 0.52;
+  }
+
+  .text {
+    font-size: 1.1rem;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #ffffff;
+    line-height: 1.6;
+  }
+
+  .bg {
+    width: 50%;
+    margin: -8.875rem -3.125rem 0 0;
+    border-top-left-radius: 30px;
+  }
 }
 
 .intro {
-    .inner {
+  .inner {
-        display: flex;
+    display: flex;
-    }
+  }
-    .left {
-        width: 30%;
-    }
-    .right {
-        width: 68%;
-        margin-left: 2%;
-    }
-    .title1 {
-        margin-bottom: 0.93rem;
-        font-size: 0.88rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #2a2a2a;
-    }
 
-    .title2 {
+  .left {
-        padding-left: 0.93rem;
+    width: 30%;
-        margin-bottom: 0.93rem;
+  }
-        font-size: 0.88rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #2a2a2a;
-        border-left: 4px solid #1583ff;
-    }
 
-    img {
+  .right {
-        width: 100%;
+    width: 68%;
-        object-fit: cover;
+    margin-left: 2%;
-    }
+  }
+
+  .title1 {
+    margin-bottom: 0.93rem;
+    font-size: 0.88rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2a2a2a;
+  }
+
+  .title2 {
+    padding-left: 0.93rem;
+    margin-bottom: 0.93rem;
+    font-size: 0.88rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #2a2a2a;
+    border-left: 4px solid #1583ff;
+  }
+
+  img {
+    width: 100%;
+    object-fit: cover;
+  }
 }
 
 @media (min-width: 280px) and (max-width: 620px) {
-    .inner {
+  .inner {
-        flex-direction: column;
+    flex-direction: column;
 
-        .left,
+    .left,
-        .right {
+    .right {
-            width: 50%;
+      width: 50%;
-            margin: 20px auto;
+      margin: 20px auto;
-        }
     }
+  }
 
-    .history {
+  .history {
-        .left {
+    .left {
-            .line {
+      .line {
-                width: 100%;
+        width: 100%;
-            }
+      }
-        }
     }
-    .block {
+  }
-        padding: 50px 0;
+
-        .inner {
+  .block {
-            .texts {
+    padding: 50px 0;
-                .bg {
+
-                    width: 100%;
+    .inner {
-                    height: 200px;
+      .texts {
-                    margin: 0;
+        .bg {
-                }
+          width: 100%;
-            }
+          height: 200px;
+          margin: 0;
         }
+      }
     }
+  }
 }
 
 @media (max-width: 1200px) {
-    .banner {
+  .banner {
-        height: 12rem;
+    height: 12rem;
-        padding: 6rem 0 0 2rem;
+    padding: 6rem 0 0 2rem;
+  }
+
+  .history {
+    .inner {
+      width: 95%;
     }
 
-    .history {
+    .texts {
-        .inner {
+      flex-direction: column;
-            width: 95%;
-        }
-        .texts {
-            flex-direction: column;
-        }
-        .bg {
-            margin: 0 auto;
-        }
     }
 
-    .inner {
+    .bg {
-        flex-direction: column;
+      margin: 0 auto;
-        width: 95%;
-        .left,
-        .right {
-            width: 95%;
-            margin: 20px auto;
-        }
     }
-    .intro {
+  }
-        img {
+
-            height: auto;
+  .inner {
-        }
+    flex-direction: column;
+    width: 95%;
+
+    .left,
+    .right {
+      width: 95%;
+      margin: 20px auto;
+    }
+  }
+
+  .intro {
+    img {
+      height: auto;
     }
+  }
 }
+
 @media (max-width: 980px) {
-    .history {
+  .history {
-        .bg {
+    .bg {
-            width: 100%;
+      width: 100%;
-        }
     }
+  }
 }
 </style>

src/pages/estate/event/index.vue

@@ -2,9 +2,7 @@
   <!-- 产业光源-大事记 -->
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,9 +10,7 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}"
+        <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
-            :key="i"
-            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
@@ -23,32 +19,24 @@
         <h2 class="wow fadeInLeft">大事记</h2>
         <p class="en">DEVELOPMENT HISTORY</p>
 
-        <div v-if="modules[1].list.length"
+        <div v-if="modules[1].list.length" class="event">
-             class="event">
           <ul class="time">
             <template v-for="(item, i) in modules[1].list">
-              <li v-if="item.isEnable"
+              <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }" @click="yearClick(i)">{{ item.title }}
-                  :key="i"
+              </li>
-                  :class="{active: curYear == i}"
-                  @click="yearClick(i)">{{ item.title }}</li>
             </template>
           </ul>
           <div class="right">
             <h6 class="year">{{ modules[1].list[curYear].title }}</h6>
             <ul class="list">
               <template v-for="(e, j) in modules[1].list[curYear].list">
-                <li v-if="e.isEnable"
+                <li v-if="e.isEnable" :key="j" :class="{ 'cursor-pointer': isLink(e.link.linkName) }"
-                    :key="j"
+                  @click="openLink(e)">
-                    :class="{'cursor-pointer': isLink(e.link.linkName)}"
-                    @click="openLink(e)">
                   <div class="texts">
                     <p class="date">{{ e.title }}</p>
                     <p class="text">{{ e.des }}</p>
                   </div>
-                  <el-image v-if="e.pic"
+                  <el-image v-if="e.pic" class="pic" :src="e.pic" :preview-src-list="[e.pic]">
-                            class="pic"
-                            :src="e.pic"
-                            :preview-src-list="[e.pic]">
                   </el-image>
                 </li>
               </template>
@@ -86,156 +74,183 @@ export default {
 <style lang="scss" scoped>
 @import url(../../../plugins/wow/animate.css);
 @import '../../../styles/page/page.scss';
+
 .wrap {
-    background: url(https://new.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
+  background: url(https://www.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
-        url(https://new.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
+    url(https://www.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
 }
 
 .history {
-    h2 {
+  h2 {
-        position: relative;
+    position: relative;
-        font-size: 2rem;
+    font-size: 2rem;
-        font-family: PingFangSC-Semibold, PingFang SC;
+    font-family: PingFangSC-Semibold, PingFang SC;
-        font-weight: 600;
+    font-weight: 600;
-        color: #1c1c1c;
+    color: #1c1c1c;
-    }
+  }
-    .en {
+
-        margin: -15px 0 40px;
+  .en {
-        font-size: 2rem;
+    margin: -15px 0 40px;
-        font-family: PingFangSC-Light, PingFang SC;
+    font-size: 2rem;
-        font-weight: 300;
+    font-family: PingFangSC-Light, PingFang SC;
-        color: #e3e3e3;
+    font-weight: 300;
-    }
+    color: #e3e3e3;
+  }
 }
+
 .event {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    .time {
+
-        width: 200px;
+  .time {
-        padding-right: 10px;
+    width: 200px;
-        margin-right: 20px;
+    padding-right: 10px;
-        border-right: 1px solid #ddd;
+    margin-right: 20px;
-        li {
+    border-right: 1px solid #ddd;
-            display: flex;
+
-            justify-content: flex-end;
+    li {
-            align-items: center;
+      display: flex;
-            width: 190px;
+      justify-content: flex-end;
-            padding-right: 45px;
+      align-items: center;
-            line-height: 60px;
+      width: 190px;
-            font-size: 1.4rem;
+      padding-right: 45px;
-            font-weight: 600;
+      line-height: 60px;
-            font-family: SFProDisplay-Semibold, SFProDisplay;
+      font-size: 1.4rem;
-            color: #666;
+      font-weight: 600;
-            box-shadow: inset 0px -1px 0px 0px #dddddd;
+      font-family: SFProDisplay-Semibold, SFProDisplay;
-            cursor: pointer;
+      color: #666;
-            &.active {
+      box-shadow: inset 0px -1px 0px 0px #dddddd;
-                font-weight: 800;
+      cursor: pointer;
-                color: #1a81f4;
+
-                background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
+      &.active {
-                &:before {
+        font-weight: 800;
-                    content: '';
+        color: #1a81f4;
-                    width: 18px;
+        background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
-                    height: 18px;
+
-                    background: url(https://new.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat;
+        &:before {
-                    margin-right: 20px;
+          content: '';
-                }
+          width: 18px;
-            }
+          height: 18px;
+          background: url(https://www.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat;
+          margin-right: 20px;
         }
+      }
     }
-    .right {
+  }
-        width: 1000px;
+
+  .right {
+    width: 1000px;
+  }
+
+  .year {
+    margin: 0 0 20px 20px;
+    font-size: 3.2rem;
+    font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+    font-weight: 800;
+    color: #1a81f4;
+  }
+
+  .list {
+    border-top: 1px solid #ddd;
+
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 30px;
+      border-bottom: 1px solid #ddd;
     }
-    .year {
+
-        margin: 0 0 20px 20px;
+    .texts {
-        font-size: 3.2rem;
+      width: 500px;
-        font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
-        font-weight: 800;
-        color: #1a81f4;
     }
-    .list {
+
-        border-top: 1px solid #ddd;
+    .date {
-        li {
+      margin-bottom: 15px;
-            display: flex;
+      font-size: 1.2rem;
-            justify-content: space-between;
+      font-family: PingFangSC-Semibold, PingFang SC;
-            align-items: center;
+      font-weight: 600;
-            padding: 30px;
+      color: #333;
-            border-bottom: 1px solid #ddd;
+    }
-        }
+
-        .texts {
+    .text {
-            width: 500px;
+      font-size: 1.1rem;
-        }
+      color: #333;
-        .date {
+      @include mul-ellipsis(3);
-            margin-bottom: 15px;
+
-            font-size: 1.2rem;
+      &:before {
-            font-family: PingFangSC-Semibold, PingFang SC;
+        content: '';
-            font-weight: 600;
+        display: inline-block;
-            color: #333;
+        width: 7px;
-        }
+        height: 7px;
-        .text {
+        margin: 0 10px;
-            font-size: 1.1rem;
+        background-color: #666;
-            color: #333;
+        transform: rotate(45deg);
-            @include mul-ellipsis(3);
+      }
-            &:before {
+    }
-                content: '';
+
-                display: inline-block;
+    .pic {
-                width: 7px;
+      width: 300px;
-                height: 7px;
+      height: 195px;
-                margin: 0 10px;
-                background-color: #666;
-                transform: rotate(45deg);
-            }
-        }
-        .pic {
-            width: 300px;
-            height: 195px;
-        }
     }
+  }
 }
 
 @media (max-width: 1200px) {
-    .tab-content {
+  .tab-content {
-        padding: 20px 0;
+    padding: 20px 0;
-        .org {
+
+    .org {
+      width: 100%;
+      padding: 15px;
+      flex-direction: column;
+
+      .left {
+        width: 100%;
+      }
+    }
+  }
+
+  .block {
+    padding: 2rem 0;
+
+    .inner {
+      width: 90%;
+
+      .event {
+        flex-direction: column;
+
+        .time {
+          width: 100%;
+
+          li {
             width: 100%;
-            padding: 15px;
+            justify-content: flex-start;
-            flex-direction: column;
+          }
-            .left {
-                width: 100%;
-            }
         }
-    }
+
-    .block {
+        .right {
-        padding: 2rem 0;
+          width: 100%;
-        .inner {
+
-            width: 90%;
+          .list {
-            .event {
+            li {
-                flex-direction: column;
+              padding: 1.25rem;
-                .time {
+              flex-direction: column;
-                    width: 100%;
+
-                    li {
+              .texts {
-                        width: 100%;
+                width: 100%;
-                        justify-content: flex-start;
+              }
-                    }
+
-                }
+              .pic {
-                .right {
+                width: 100%;
-                    width: 100%;
+                height: auto;
-                    .list {
+                margin-top: 1rem;
-                        li {
+              }
-                            padding: 1.25rem;
-                            flex-direction: column;
-                            .texts {
-                                width: 100%;
-                            }
-                            .pic {
-                                width: 100%;
-                                height: auto;
-                                margin-top: 1rem;
-                            }
-                        }
-                    }
-                }
             }
+          }
         }
+      }
     }
+  }
 }
 </style>

src/pages/estate/location/index.vue

@@ -2,9 +2,7 @@
   <!-- 产业光源-地理位置 -->
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,56 +10,39 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}"
+        <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
-            :key="i"
-            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
     <div class="tab-content">
-      <div class="item wow bounceInLeft"
+      <div class="item wow bounceInLeft" data-wow-delay="0.5s"
-           data-wow-delay="0.5s"
+        :class="{ 'cursor-pointer': isLink(modules[1].form.link.linkName) }" @click="openLink(modules[1].form)">
-           :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
-           @click="openLink(modules[1].form)">
         <div class="img-wrap">
-          <img class="pic"
+          <img class="pic" :src="modules[1].form.pic" alt="">
-               :src="modules[1].form.pic"
-               alt="">
         </div>
         <div class="texts">
           <h6>{{ modules[1].form.title }}</h6>
-          <div class="des"
+          <div class="des" v-html="modules[1].form.des"></div>
-               v-html="modules[1].form.des"></div>
         </div>
       </div>
-      <div class="item wow bounceInRight"
+      <div class="item wow bounceInRight" data-wow-delay="0.6s"
-           data-wow-delay="0.6s"
+        :class="{ 'cursor-pointer': isLink(modules[2].form.link.linkName) }" @click="openLink(modules[2].form)">
-           :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
-           @click="openLink(modules[2].form)">
         <div class="img-wrap">
-          <img class="pic"
+          <img class="pic" :src="modules[2].form.pic" alt="">
-               :src="modules[2].form.pic"
-               alt="">
         </div>
         <div class="texts">
           <h6>{{ modules[2].form.title }}</h6>
-          <div class="des"
+          <div class="des" v-html="modules[2].form.des"></div>
-               v-html="modules[2].form.des"></div>
         </div>
       </div>
-      <div class="item wow bounceInLeft"
+      <div class="item wow bounceInLeft" data-wow-delay="0.5s"
-           data-wow-delay="0.5s"
+        :class="{ 'cursor-pointer': isLink(modules[3].form.link.linkName) }" @click="openLink(modules[3].form)">
-           :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
-           @click="openLink(modules[3].form)">
         <div class="img-wrap">
-          <img class="pic"
+          <img class="pic" :src="modules[3].form.pic" alt="">
-               :src="modules[3].form.pic"
-               alt="">
         </div>
         <div class="texts">
           <h6>{{ modules[3].form.title }}</h6>
-          <div class="des"
+          <div class="des" v-html="modules[3].form.des"></div>
-               v-html="modules[3].form.des"></div>
         </div>
       </div>
     </div>
@@ -92,73 +73,87 @@ export default {
 <style lang="scss" scoped>
 @import url(../../../plugins/wow/animate.css);
 @import '../../../styles/page/page.scss';
+
 .tab-content {
-    width: 70%;
+  width: 70%;
-    max-width: 1504px;
+  max-width: 1504px;
-    padding-bottom: 100px;
+  padding-bottom: 100px;
-    margin: 30px auto 0;
+  margin: 30px auto 0;
-    .item {
+
-        display: flex;
+  .item {
-        padding: 42px;
+    display: flex;
-        margin-bottom: 36px;
+    padding: 42px;
-        color: #333;
+    margin-bottom: 36px;
-        background: #f5f5f5 url(https://new.iasf.ac.cn/images/overviewSetup/1.png) right bottom/auto no-repeat;
+    color: #333;
-        transition: 0.5s;
+    background: #f5f5f5 url(https://www.iasf.ac.cn/images/overviewSetup/1.png) right bottom/auto no-repeat;
-        &:nth-child(even) {
+    transition: 0.5s;
-            justify-content: space-between;
+
-            flex-direction: row-reverse;
+    &:nth-child(even) {
-            background-position: 30% 100%;
+      justify-content: space-between;
-            .texts {
+      flex-direction: row-reverse;
-                padding-left: 0;
+      background-position: 30% 100%;
-            }
+
-        }
+      .texts {
-        &:hover {
+        padding-left: 0;
-            .pic {
+      }
-                transform: scale(1.1);
-            }
-        }
-    }
-    .img-wrap {
-        height: 383px;
-        overflow: hidden;
-    }
-    .pic {
-        width: 100%;
-        height: 100%;
-        transition: 0.5s;
-    }
-    .texts {
-        width: 707px;
-        padding: 98px 72px 30px 80px;
-    }
-    h6 {
-        margin-bottom: 24px;
-        font-size: 2rem;
-        font-family: PingFangSC-Light, PingFang SC;
-        font-weight: 300;
     }
-    .des {
+
-        font-size: 1rem;
+    &:hover {
-        line-height: 33px;
+      .pic {
-        -webkit-line-clamp: 8;
+        transform: scale(1.1);
+      }
     }
+  }
+
+  .img-wrap {
+    height: 383px;
+    overflow: hidden;
+  }
+
+  .pic {
+    width: 100%;
+    height: 100%;
+    transition: 0.5s;
+  }
+
+  .texts {
+    width: 707px;
+    padding: 98px 72px 30px 80px;
+  }
+
+  h6 {
+    margin-bottom: 24px;
+    font-size: 2rem;
+    font-family: PingFangSC-Light, PingFang SC;
+    font-weight: 300;
+  }
+
+  .des {
+    font-size: 1rem;
+    line-height: 33px;
+    -webkit-line-clamp: 8;
+  }
 }
+
 @media (max-width: 1200px) {
-    .tab-content {
+  .tab-content {
-        width: 80%;
+    width: 80%;
-        padding: 1.25rem 0;
+    padding: 1.25rem 0;
-        .item {
+
-            padding: 0.85rem;
+    .item {
-            flex-direction: column !important;
+      padding: 0.85rem;
-            .texts {
+      flex-direction: column !important;
-                margin-top: 0.5rem;
+
-                width: 100%;
+      .texts {
-                padding: 0;
+        margin-top: 0.5rem;
-            }
+        width: 100%;
-        }
+        padding: 0;
-        .img-wrap {
+      }
-            height: auto;
-        }
     }
+
+    .img-wrap {
+      height: auto;
+    }
+  }
 }
 </style>

src/pages/estate/orgSetup/index.vue

@@ -2,9 +2,7 @@
   <!-- 产业光源-机构设置 -->
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,9 +10,7 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}"
+        <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
-            :key="i"
-            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
@@ -22,17 +18,12 @@
       <div class="org">
         <div class="left">
           <h6>{{ modules[1].form.title }}</h6>
-          <div class="text"
+          <div class="text" v-html="modules[1].form.des"></div>
-               v-html="modules[1].form.des"></div>
         </div>
-        <img class="pic"
+        <img class="pic" src="https://www.iasf.ac.cn/images/overviewSetup/1.png" alt="">
-             src="https://new.iasf.ac.cn/images/overviewSetup/1.png"
-             alt="">
       </div>
       <div class="lg-bg">
-        <img width="100%"
+        <img width="100%" :src="modules[2].form.pic" alt="">
-             :src="modules[2].form.pic"
-             alt="">
       </div>
     </div>
   </div>
@@ -62,63 +53,76 @@ export default {
 <style lang="scss" scoped>
 @import url(../../../plugins/wow/animate.css);
 @import '../../../styles/page/page.scss';
+
 .tab-content {
-    padding: 77px 0;
+  padding: 77px 0;
 }
+
 .org {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: center;
+  align-items: center;
-    width: 1294px;
+  width: 1294px;
-    padding: 9px 86px 29px 116px;
+  padding: 9px 86px 29px 116px;
-    margin: 0 auto 50px;
+  margin: 0 auto 50px;
-    background: #fcfcfc;
+  background: #fcfcfc;
-    border-radius: 160px;
+  border-radius: 160px;
-    .left {
+
-        width: 705px;
+  .left {
-    }
+    width: 705px;
-    h6 {
+  }
-        font-size: 1.4rem;
+
-        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+  h6 {
-        font-weight: bold;
+    font-size: 1.4rem;
-        color: #333;
+    font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
-    }
+    font-weight: bold;
-    .text {
+    color: #333;
-        margin-top: 10px;
+  }
-        font-size: 1rem;
+
-        color: #020202;
+  .text {
-        line-height: 2rem;
+    margin-top: 10px;
-    }
+    font-size: 1rem;
-    .pic {
+    color: #020202;
-        width: 320px;
+    line-height: 2rem;
-        height: 282px;
+  }
-    }
+
+  .pic {
+    width: 320px;
+    height: 282px;
+  }
 }
+
 .lg-bg {
-    width: 1200px;
+  width: 1200px;
-    margin: 0 auto;
+  margin: 0 auto;
-    text-align: center;
+  text-align: center;
-    img {
+
-        object-fit: cover;
+  img {
-    }
+    object-fit: cover;
+  }
 }
+
 @media (max-width: 1200px) {
-    .tab-content {
+  .tab-content {
-        padding: 20px 0;
+    padding: 20px 0;
-        .org {
+
-            width: 100%;
+    .org {
-            padding: 15px;
+      width: 100%;
-            flex-direction: column;
+      padding: 15px;
-            .left {
+      flex-direction: column;
-                width: 100%;
+
-            }
+      .left {
-            img {
+        width: 100%;
-                display: none;
+      }
-            }
+
-        }
+      img {
-    }
+        display: none;
-    .lg-bg {
+      }
-        width: 90%;
     }
+  }
+
+  .lg-bg {
+    width: 90%;
+  }
 }
 </style>

src/pages/estate/survey/index.vue

@@ -2,9 +2,7 @@
   <!-- 产业光源-产业光源概况 -->
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,9 +10,7 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}"
+        <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
-            :key="i"
-            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
@@ -22,17 +18,12 @@
       <div class="survey">
         <h6>
           {{ modules[1].form.title }}
-          <img class="title-bg"
+          <img class="title-bg" src="https://www.iasf.ac.cn/images/overviewIntro/2.png" alt="">
-               src="https://new.iasf.ac.cn/images/overviewIntro/2.png"
-               alt="">
         </h6>
-        <div class="text"
+        <div class="text" v-html="modules[1].form.des"></div>
-             v-html="modules[1].form.des"></div>
       </div>
       <div class="lg-bg">
-        <img width="100%"
+        <img width="100%" src="https://www.iasf.ac.cn/images/estate/3.png" alt="">
-             src="https://new.iasf.ac.cn/images/estate/3.png"
-             alt="">
       </div>
     </div>
   </div>
@@ -62,57 +53,67 @@ export default {
 <style lang="scss" scoped>
 @import url(../../../plugins/wow/animate.css);
 @import '../../../styles/page/page.scss';
+
 .tab-content {
-    padding-top: 70px;
+  padding-top: 70px;
 }
+
 .survey {
-    width: 1294px;
+  width: 1294px;
-    min-height: 500px;
+  min-height: 500px;
-    padding: 80px 86px 29px 597px;
+  padding: 80px 86px 29px 597px;
-    margin: 0 auto 200px;
+  margin: 0 auto 200px;
-    background: url(https://new.iasf.ac.cn/images/estate/2.png) 0 0/100% 100% no-repeat;
+  background: url(https://www.iasf.ac.cn/images/estate/2.png) 0 0/100% 100% no-repeat;
-    border-radius: 160px;
+  border-radius: 160px;
-    h6 {
+
-        position: relative;
+  h6 {
-        margin-bottom: 30px;
+    position: relative;
-        font-size: 1.2rem;
+    margin-bottom: 30px;
-        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+    font-size: 1.2rem;
-        font-weight: bold;
+    font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
-        color: #333;
+    font-weight: bold;
-    }
+    color: #333;
-    .title-bg {
+  }
-        position: absolute;
+
-        top: -40px;
+  .title-bg {
-        left: -20px;
+    position: absolute;
-    }
+    top: -40px;
-    .text {
+    left: -20px;
-        margin-top: 10px;
+  }
-        font-size: 1rem;
+
-        color: #020202;
+  .text {
-        line-height: 2rem;
+    margin-top: 10px;
-        // @include mul-ellipsis(10);
+    font-size: 1rem;
-    }
+    color: #020202;
+    line-height: 2rem;
+    // @include mul-ellipsis(10);
+  }
 }
+
 .lg-bg {
-    width: 40%;
+  width: 40%;
 }
+
 @media (max-width: 1300px) {
-    .tab-content {
+  .tab-content {
-        padding: 20px 0;
+    padding: 20px 0;
-    }
+  }
-    .lg-bg {
+
-        width: 100%;
+  .lg-bg {
-    }
+    width: 100%;
-    .survey {
+  }
-        width: 95%;
+
-        padding: 80px 86px 29px 47%;
+  .survey {
-        margin-bottom: 2rem;
+    width: 95%;
-    }
+    padding: 80px 86px 29px 47%;
+    margin-bottom: 2rem;
+  }
 }
+
 @media (max-width: 768px) {
-    .survey {
+  .survey {
-        padding: 30px;
+    padding: 30px;
-        background: none;
+    background: none;
-    }
+  }
 }
 </style>

src/pages/governance/index.vue

@@ -1,29 +1,20 @@
 <template>
   <div class="wrap">
     <div class="single-banner">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="" />
-           :src="modules[0].form.pic"
-           alt="" />
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
     </div>
 
-    <div class="block history gray"
+    <div class="block history gray" style="padding-bottom: 70px">
-         style="padding-bottom: 70px">
       <div class="inner">
-        <div class="texts wow fadeInDown"
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
-             data-wow-delay="0.5s">
           <div class="left">
             <h2 v-html="modules[1].form.title"></h2>
-            <div class="text"
+            <div class="text" v-html="modules[1].form.des"></div>
-                 v-html="modules[1].form.des"></div>
           </div>
-          <img class="bg"
+          <img class="bg" width="562" height="467" :src="modules[1].form.pic" alt="">
-               width="562"
-               height="467"
-               :src="modules[1].form.pic"
-               alt="">
         </div>
       </div>
     </div>
@@ -31,26 +22,18 @@
     <div class="cards">
       <ul>
         <template v-for="(item, i) in modules[2].list">
-          <li v-if="item.isEnable"
+          <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }" @click="depClick(i)">{{ item.title }}</li>
-              :key="i"
-              :class="{active: curYear == i}"
-              @click="depClick(i)">{{ item.title }}</li>
         </template>
       </ul>
     </div>
 
-    <div class="block committee gray"
+    <div class="block committee gray" style="padding-top: 80px">
-         style="padding-top: 80px">
+      <div v-if="modules[2].list[curYear].list[0]" class="inner">
-      <div v-if="modules[2].list[curYear].list[0]"
-           class="inner">
         <div class="left">
           <h2>{{ modules[2].list[curYear].list[0].title }}</h2>
-          <div class="text"
+          <div class="text" v-html="modules[2].list[curYear].list[0].des"></div>
-               v-html="modules[2].list[curYear].list[0].des"></div>
         </div>
-        <img class="pic"
+        <img class="pic" :src="modules[2].list[curYear].list[0].pic" alt="">
-             :src="modules[2].list[curYear].list[0].pic"
-             alt="">
       </div>
     </div>
   </div>
@@ -101,158 +84,188 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .history {
-    h2 {
+  h2 {
-        padding-bottom: 15px;
+    padding-bottom: 15px;
-        font-size: 1.2rem;
+    font-size: 1.2rem;
-        color: #333;
+    color: #333;
-        &:after {
+
-            content: '';
+    &:after {
-            display: block;
+      content: '';
-            width: 65px;
+      display: block;
-            height: 3px;
+      width: 65px;
-            margin-top: 20px;
+      height: 3px;
-            background: #0280f1;
+      margin-top: 20px;
-        }
+      background: #0280f1;
     }
-    .texts {
+  }
-        display: flex;
+
-        justify-content: space-between;
+  .texts {
-        padding: 82px 0 50px 30px;
+    display: flex;
-        margin-top: 20px;
+    justify-content: space-between;
-        background-color: #fff;
+    padding: 82px 0 50px 30px;
-        border-radius: 100px 0px 0px 0px;
+    margin-top: 20px;
-        transition: 0.3s;
+    background-color: #fff;
-        &:hover {
+    border-radius: 100px 0px 0px 0px;
-            transform: scale(1.05);
+    transition: 0.3s;
-        }
+
+    &:hover {
+      transform: scale(1.05);
     }
-    .left {
+  }
-        width: 600px;
+
-        padding-right: 20px;
+  .left {
+    width: 600px;
+    padding-right: 20px;
+  }
+
+  .text {
+    margin: 20px 0;
+    font-size: 1.2rem;
+    color: #181818;
+    line-height: 31px;
+    @include mul-ellipsis(10);
+  }
+
+  .bg {
+    margin: -122px 0 0 0;
+    object-fit: cover;
+  }
+}
+
+.cards {
+  padding-top: 50px;
+
+  ul {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 1200px;
+    margin: 0 auto;
+  }
+
+  li {
+    width: 368px;
+    margin: 0 30px 50px 0;
+    line-height: 84px;
+    font-size: 1.2rem;
+    color: #333;
+    text-align: center;
+    @include ellipsis();
+    background: url(https://www.iasf.ac.cn/images/governance/3.png) 0 0 / cover no-repeat;
+    cursor: pointer;
+
+    &:nth-child(2) {
+      background-image: url(https://www.iasf.ac.cn/images/governance/4.png);
     }
-    .text {
+
-        margin: 20px 0;
+    &:nth-child(3) {
-        font-size: 1.2rem;
+      background-image: url(https://www.iasf.ac.cn/images/governance/5.png);
-        color: #181818;
-        line-height: 31px;
-        @include mul-ellipsis(10);
     }
-    .bg {
+
-        margin: -122px 0 0 0;
+    &:nth-child(4) {
-        object-fit: cover;
+      background-image: url(https://www.iasf.ac.cn/images/governance/4.png);
     }
-}
+
-.cards {
+    &:nth-child(5) {
-    padding-top: 50px;
+      background-image: url(https://www.iasf.ac.cn/images/governance/7.png);
-    ul {
-        display: flex;
-        justify-content: center;
-        flex-wrap: wrap;
-        width: 1200px;
-        margin: 0 auto;
     }
-    li {
+
-        width: 368px;
+    &:nth-child(6) {
-        margin: 0 30px 50px 0;
+      background-image: url(https://www.iasf.ac.cn/images/governance/6.png);
-        line-height: 84px;
+    }
-        font-size: 1.2rem;
+
-        color: #333;
+    &:nth-child(8) {
-        text-align: center;
+      background-image: url(https://www.iasf.ac.cn/images/governance/6.png);
-        @include ellipsis();
+    }
-        background: url(https://new.iasf.ac.cn/images/governance/3.png) 0 0 / cover no-repeat;
+
-        cursor: pointer;
+    &:nth-child(3n) {
-        &:nth-child(2) {
+      margin-right: 0;
-            background-image: url(https://new.iasf.ac.cn/images/governance/4.png);
-        }
-        &:nth-child(3) {
-            background-image: url(https://new.iasf.ac.cn/images/governance/5.png);
-        }
-        &:nth-child(4) {
-            background-image: url(https://new.iasf.ac.cn/images/governance/4.png);
-        }
-        &:nth-child(5) {
-            background-image: url(https://new.iasf.ac.cn/images/governance/7.png);
-        }
-        &:nth-child(6) {
-            background-image: url(https://new.iasf.ac.cn/images/governance/6.png);
-        }
-        &:nth-child(8) {
-            background-image: url(https://new.iasf.ac.cn/images/governance/6.png);
-        }
-        &:nth-child(3n) {
-            margin-right: 0;
-        }
-        &:hover,
-        &.active {
-            color: #fff;
-            background: #0d84f2;
-        }
     }
+
+    &:hover,
+    &.active {
+      color: #fff;
+      background: #0d84f2;
+    }
+  }
 }
+
 .committee {
-    .inner {
+  .inner {
-        display: flex;
+    display: flex;
-        align-items: center;
+    align-items: center;
+  }
+
+  .left {
+    width: 50%;
+    margin-right: 2%;
+  }
+
+  h2 {
+    margin-bottom: 20px;
+    font-size: 1.2rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    color: #333;
+  }
+
+  .text {
+    font-size: 1rem;
+    font-family: PingFangSC-Regular, PingFang SC;
+    line-height: 1.5;
+    color: #333;
+  }
+
+  .pic {
+    width: 48%;
+    height: 300px;
+    object-fit: cover;
+  }
+}
+
+@media (max-width: 1200px) {
+  .history {
+    .texts {
+      flex-direction: column;
     }
+
     .left {
-        width: 50%;
+      width: 90%;
-        margin-right: 2%;
     }
-    h2 {
+
-        margin-bottom: 20px;
+    .bg {
-        font-size: 1.2rem;
+      width: 100%;
-        font-family: PingFangSC-Medium, PingFang SC;
+      margin-top: 2rem;
-        color: #333;
     }
-    .text {
+  }
-        font-size: 1rem;
+
-        font-family: PingFangSC-Regular, PingFang SC;
+  .cards {
-        line-height: 1.5;
+    ul {
-        color: #333;
+      width: 98%;
     }
-    .pic {
+
-        width: 48%;
+    li {
-        height: 300px;
+      width: 100%;
-        object-fit: cover;
+      margin: 0 0 20px 0;
     }
+  }
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 640px) {
-    .history {
+  .committee {
-        .texts {
+    .inner {
-            flex-direction: column;
+      flex-direction: column;
-        }
-        .left {
-            width: 90%;
-        }
-        .bg {
-            width: 100%;
-            margin-top: 2rem;
-        }
     }
-    .cards {
+
-        ul {
+    .left {
-            width: 98%;
+      width: 100%;
-        }
-        li {
-            width: 100%;
-            margin: 0 0 20px 0;
-        }
     }
-}
+
-@media (max-width: 640px) {
+    .pic {
-    .committee {
+      width: 100%;
-        .inner {
+      margin-top: 2rem;
-            flex-direction: column;
-        }
-        .left {
-            width: 100%;
-        }
-        .pic {
-            width: 100%;
-            margin-top: 2rem;
-        }
     }
+  }
 }
 </style>

src/pages/iasf/index.vue

@@ -88,7 +88,7 @@
             </template>
             <ul class="news-carousel">
               <li v-if="articles1.length">
-                <img class="pic" src="https://new.iasf.ac.cn/images/iasf/8.png" alt="">
+                <img class="pic" src="https://www.iasf.ac.cn/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>
@@ -108,7 +108,7 @@
                 </div>
               </li>
               <li v-if="articles2.length">
-                <img class="pic" src="https://new.iasf.ac.cn/images/iasf/9.png" alt="">
+                <img class="pic" src="https://www.iasf.ac.cn/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>
@@ -128,7 +128,7 @@
                 </div>
               </li>
               <li v-if="articles3.length">
-                <img class="pic" src="https://new.iasf.ac.cn/images/iasf/10.png" alt="">
+                <img class="pic" src="https://www.iasf.ac.cn/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>
@@ -547,7 +547,7 @@ $bannerMh: 800px;
 }
 
 .card-block {
-  background: url(https://new.iasf.ac.cn/images/iasf/14.jpg) 0 0 / cover no-repeat;
+  background: url(https://www.iasf.ac.cn/images/iasf/14.jpg) 0 0 / cover no-repeat;
 }
 
 .card {
@@ -632,7 +632,7 @@ $bannerMh: 800px;
 }
 
 .news-wrap {
-  background: url(https://new.iasf.ac.cn/images/iasf/1.png) 0 0 / cover no-repeat;
+  background: url(https://www.iasf.ac.cn/images/iasf/1.png) 0 0 / cover no-repeat;
 }
 
 .news-title:after {
@@ -1015,7 +1015,7 @@ $bannerMh: 800px;
 }
 
 .talent-block {
-  background: url(https://new.iasf.ac.cn/images/iasf/11.png) 0 0 / cover no-repeat;
+  background: url(https://www.iasf.ac.cn/images/iasf/11.png) 0 0 / cover no-repeat;
 }
 
 .talent {
@@ -1059,7 +1059,7 @@ $bannerMh: 800px;
 
 .about {
   padding: 100px 0 0;
-  background: url(https://new.iasf.ac.cn/images/iasf/12.png) 0 450px no-repeat;
+  background: url(https://www.iasf.ac.cn/images/iasf/12.png) 0 450px no-repeat;
 
   .about-bg {
     background-color: #0a7fec;
@@ -1153,31 +1153,31 @@ $bannerMh: 800px;
       width: 28px;
       height: 28px;
       margin-right: 7px;
-      background: url(https://new.iasf.ac.cn/images/iasf/icon1.png) no-repeat;
+      background: url(https://www.iasf.ac.cn/images/iasf/icon1.png) no-repeat;
     }
 
     &:nth-child(2):before {
-      background-image: url(https://new.iasf.ac.cn/images/iasf/icon2.png);
+      background-image: url(https://www.iasf.ac.cn/images/iasf/icon2.png);
     }
 
     &:nth-child(2):hover:before {
-      background-image: url(https://new.iasf.ac.cn/images/iasf/icon2-1.png);
+      background-image: url(https://www.iasf.ac.cn/images/iasf/icon2-1.png);
     }
 
     &:nth-child(3):before {
-      background-image: url(https://new.iasf.ac.cn/images/iasf/icon3.png);
+      background-image: url(https://www.iasf.ac.cn/images/iasf/icon3.png);
     }
 
     &:nth-child(3):hover:before {
-      background-image: url(https://new.iasf.ac.cn/images/iasf/icon3-1.png);
+      background-image: url(https://www.iasf.ac.cn/images/iasf/icon3-1.png);
     }
 
     &:nth-child(4):before {
-      background-image: url(https://new.iasf.ac.cn/images/iasf/icon4.png);
+      background-image: url(https://www.iasf.ac.cn/images/iasf/icon4.png);
     }
 
     &:nth-child(4):hover:before {
-      background-image: url(https://new.iasf.ac.cn/images/iasf/icon4-1.png);
+      background-image: url(https://www.iasf.ac.cn/images/iasf/icon4-1.png);
     }
 
     &:hover {
@@ -1188,7 +1188,7 @@ $bannerMh: 800px;
       background-color: rgba(1, 129, 247, 0.94);
 
       &:before {
-        background-image: url(https://new.iasf.ac.cn/images/iasf/icon1-1.png);
+        background-image: url(https://www.iasf.ac.cn/images/iasf/icon1-1.png);
       }
     }
   }

src/pages/org/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="wrap p-b-30">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,17 +10,12 @@
     <div class="org">
       <div class="left">
         <h6>{{ modules[1].form.title }}</h6>
-        <p class="text"
+        <p class="text" v-html="modules[1].form.des"></p>
-           v-html="modules[1].form.des"></p>
       </div>
-      <img class="pic"
+      <img class="pic" src="https://www.iasf.ac.cn/images/overviewSetup/1.png" alt="">
-           src="https://new.iasf.ac.cn/images/overviewSetup/1.png"
-           alt="">
     </div>
     <div class="lg-bg">
-      <el-image style="width: 100%;"
+      <el-image style="width: 100%;" :src="modules[2].form.pic" :preview-src-list="[modules[2].form.pic]">
-                :src="modules[2].form.pic"
-                :preview-src-list="[modules[2].form.pic]">
       </el-image>
     </div>
   </div>
@@ -69,64 +62,77 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .org {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: center;
+  align-items: center;
-    width: 1200px;
+  width: 1200px;
-    padding: 9px 86px 29px 116px;
+  padding: 9px 86px 29px 116px;
-    margin: 0 auto 50px;
+  margin: 0 auto 50px;
-    background: #fcfcfc;
+  background: #fcfcfc;
-    border-radius: 160px;
+  border-radius: 160px;
-    .left {
+
-        width: 705px;
+  .left {
-    }
+    width: 705px;
-    h6 {
+  }
-        font-size: 1.4rem;
+
-        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+  h6 {
-        font-weight: bold;
+    font-size: 1.4rem;
-        color: #333;
+    font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
-    }
+    font-weight: bold;
-    .text {
+    color: #333;
-        margin-top: 10px;
+  }
-        font-size: 1rem;
+
-        color: #020202;
+  .text {
-        line-height: 2rem;
+    margin-top: 10px;
-    }
+    font-size: 1rem;
-    .pic {
+    color: #020202;
-        width: 320px;
+    line-height: 2rem;
-        height: 282px;
+  }
-    }
+
+  .pic {
+    width: 320px;
+    height: 282px;
+  }
 }
+
 .lg-bg {
-    width: 1200px;
+  width: 1200px;
-    margin: 0 auto;
+  margin: 0 auto;
 }
+
 @media (max-width: 1300px) {
-    .org {
+  .org {
-        width: 100%;
+    width: 100%;
-        padding: 15px;
+    padding: 15px;
-        .left {
+
-            width: 60%;
+    .left {
-        }
+      width: 60%;
-        .pic {
-            width: 30%;
-            height: auto;
-        }
     }
-    .lg-bg {
+
-        width: 85%;
+    .pic {
+      width: 30%;
+      height: auto;
     }
+  }
+
+  .lg-bg {
+    width: 85%;
+  }
 }
+
 @media (max-width: 980px) {
-    .org {
+  .org {
-        flex-direction: column;
+    flex-direction: column;
-        .pic {
+
-            display: none;
+    .pic {
-        }
+      display: none;
-        .left {
-            width: 100%;
-        }
     }
+
+    .left {
+      width: 100%;
+    }
+  }
 }
 </style>

src/pages/overview/index.vue

@@ -1,60 +1,44 @@
 <template>
   <div class="wrap">
     <div class="single-banner">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="" />
-           :src="modules[0].form.pic"
-           alt="" />
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
     </div>
 
     <div class="block history gray">
-      <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]"
+      <div :class="['inner', { 'cursor-pointer': isLink(modules[1].form.link.linkName) }]"
-           @click="openLink(modules[1].form)">
+        @click="openLink(modules[1].form)">
-        <div class="texts wow fadeInDown"
+        <div class="texts wow fadeInDown" data-wow-delay="0.5s">
-             data-wow-delay="0.5s">
           <div class="left">
             <h2 v-html="modules[1].form.title"></h2>
             <div class="line"></div>
-            <div class="des"
+            <div class="des" v-html="modules[1].form.des"></div>
-                 v-html="modules[1].form.des"></div>
           </div>
-          <img class="bg"
+          <img class="bg" width="562" height="418" :src="modules[1].form.pic" alt="">
-               width="562"
-               height="418"
-               :src="modules[1].form.pic"
-               alt="">
         </div>
       </div>
     </div>
 
     <div class="block">
       <div class="inner">
-        <div :class="['core', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
+        <div :class="['core', { 'cursor-pointer': isLink(modules[2].form.link.linkName) }]"
-             @click="openLink(modules[2].form)">
+          @click="openLink(modules[2].form)">
-          <img :src="modules[2].form.pic"
+          <img :src="modules[2].form.pic" alt="" class="pic">
-               alt=""
-               class="pic">
           <div class="texts">
-            <div class="core-title"
+            <div class="core-title" v-html="modules[2].form.title"></div>
-                 v-html="modules[2].form.title"></div>
             <div class="line"></div>
-            <div class="text"
+            <div class="text" v-html="modules[2].form.des"></div>
-                 v-html="modules[2].form.des"></div>
           </div>
         </div>
-        <div :class="['core', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
+        <div :class="['core', { 'cursor-pointer': isLink(modules[3].form.link.linkName) }]"
-             @click="openLink(modules[3].form)">
+          @click="openLink(modules[3].form)">
-          <img :src="modules[3].form.pic"
+          <img :src="modules[3].form.pic" alt="" class="pic">
-               alt=""
-               class="pic">
           <div class="texts">
-            <div class="core-title"
+            <div class="core-title" v-html="modules[3].form.title"></div>
-                 v-html="modules[3].form.title"></div>
             <div class="line"></div>
-            <div class="text"
+            <div class="text" v-html="modules[3].form.des"></div>
-                 v-html="modules[3].form.des"></div>
           </div>
         </div>
       </div>
@@ -63,53 +47,35 @@
     <div class="block gray fac">
       <div class="inner">
         <div class="event">
-          <img src="https://new.iasf.ac.cn/images/overview/16.png"
+          <img src="https://www.iasf.ac.cn/images/overview/16.png" alt="" class="pic">
-               alt=""
-               class="pic">
           <div class="texts">
             <h6 v-html="modules[4].form.title"></h6>
             <p class="en">{{ modules[4].form.subTitle }}</p>
-            <div class="text"
+            <div class="text" v-html="modules[4].form.des"></div>
-                 v-html="modules[4].form.des"></div>
+            <img v-if="isLink(modules[4].form.link.linkName)" class="arrow" src="@/assets/images/arrow.png" alt=""
-            <img v-if="isLink(modules[4].form.link.linkName)"
+              @click="openLink(modules[4].form)">
-                 class="arrow"
-                 src="@/assets/images/arrow.png"
-                 alt=""
-                 @click="openLink(modules[4].form)">
           </div>
         </div>
         <ul class="l-card">
-          <li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
+          <li :class="{ 'cursor-pointer': isLink(modules[5].form.link.linkName) }" @click="openLink(modules[5].form)">
-              @click="openLink(modules[5].form)">
+            <img :src="modules[5].form.pic" alt="" class="pic" />
-            <img :src="modules[5].form.pic"
-                 alt=""
-                 class="pic" />
             <div class="texts">
               <h6>{{ modules[5].form.title }}</h6>
-              <div class="text"
+              <div class="text" v-html="modules[5].form.des"></div>
-                   v-html="modules[5].form.des"></div>
             </div>
           </li>
-          <li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}"
+          <li :class="{ 'cursor-pointer': isLink(modules[6].form.link.linkName) }" @click="openLink(modules[6].form)">
-              @click="openLink(modules[6].form)">
+            <img :src="modules[6].form.pic" alt="" class="pic" />
-            <img :src="modules[6].form.pic"
-                 alt=""
-                 class="pic" />
             <div class="texts">
               <h6>{{ modules[6].form.title }}</h6>
-              <div class="text"
+              <div class="text" v-html="modules[6].form.des"></div>
-                   v-html="modules[6].form.des"></div>
             </div>
           </li>
-          <li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}"
+          <li :class="{ 'cursor-pointer': isLink(modules[7].form.link.linkName) }" @click="openLink(modules[7].form)">
-              @click="openLink(modules[7].form)">
+            <img :src="modules[7].form.pic" alt="" class="pic" />
-            <img :src="modules[7].form.pic"
-                 alt=""
-                 class="pic" />
             <div class="texts">
               <h6>{{ modules[7].form.title }}</h6>
-              <div class="text"
+              <div class="text" v-html="modules[7].form.des"></div>
-                   v-html="modules[7].form.des"></div>
             </div>
           </li>
         </ul>
@@ -117,20 +83,13 @@
     </div>
 
     <div class="block scan gray">
-      <h2 class="b-title wow fadeInUp hide-bd"
+      <h2 class="b-title wow fadeInUp hide-bd" v-html="modules[8].form.title"></h2>
-          v-html="modules[8].form.title"></h2>
+      <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
-      <p class="intro wow fadeInUp"
-         data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
       <div class="inner scan-inner">
         <div class="left">
           <template v-for="(item, i) in modules[9].list">
-            <div v-if="item.isEnable"
+            <div v-if="item.isEnable" class="line" :key="i">
-                 class="line"
+              <img v-if="item.pic" :src="item.pic" alt="" class="icon">
-                 :key="i">
-              <img v-if="item.pic"
-                   :src="item.pic"
-                   alt=""
-                   class="icon">
               <p class="text">{{ item.title }}</p>
             </div>
           </template>
@@ -149,9 +108,7 @@
             </li>
           </ul>
         </div>
-        <img :src="modules[13].form.pic"
+        <img :src="modules[13].form.pic" alt="" class="pic" />
-             alt=""
-             class="pic" />
       </div>
     </div>
   </div>
@@ -199,282 +156,334 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .history {
-    h2 {
+  h2 {
-        font-size: 1rem;
+    font-size: 1rem;
-        color: #333;
+    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: 0.3s;
+
+    &:hover {
+      transform: scale(1.05);
     }
+  }
+
+  .left {
+    width: 43.4375rem;
+  }
+
+  .line {
+    width: 53px;
+    height: 3px;
+    margin: 18px 0;
+    background: #0280f1;
+  }
+
+  .des {
+    font-size: 0.9rem;
+    color: #181818;
+    line-height: 31px;
+    -webkit-line-clamp: 6;
+  }
+
+  .bg {
+    margin: -115px -80px 0 30px;
+    border-top-right-radius: 40px;
+  }
+}
+
+.core {
+  position: relative;
+  margin-bottom: 40px;
+
+  &:last-child {
     .texts {
-        display: flex;
+      left: 40px;
-        justify-content: space-between;
+      right: auto;
-        padding: 5.125rem 3.5625rem 1.875rem;
-        margin-top: 20px;
-        background-color: #fff;
-        border-radius: 6.25rem 0px 0px 0px;
-        transition: 0.3s;
-        &:hover {
-            transform: scale(1.05);
-        }
-    }
-    .left {
-        width: 43.4375rem;
-    }
-    .line {
-        width: 53px;
-        height: 3px;
-        margin: 18px 0;
-        background: #0280f1;
-    }
-    .des {
-        font-size: 0.9rem;
-        color: #181818;
-        line-height: 31px;
-        -webkit-line-clamp: 6;
-    }
-    .bg {
-        margin: -115px -80px 0 30px;
-        border-top-right-radius: 40px;
     }
+  }
+
+  .pic {
+    width: 100%;
+  }
+
+  .texts {
+    position: absolute;
+    top: 80px;
+    right: 40px;
+    width: 500px;
+    color: #fff;
+  }
+
+  .core-title {
+    font-size: 1.4rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+  }
+
+  .line {
+    width: 136px;
+    height: 3px;
+    margin: 20px 0;
+    background: #ffffff;
+    opacity: 0.56;
+  }
+
+  .text {
+    font-size: 1rem;
+    line-height: 1.6;
+  }
 }
-.core {
+
+.fac {
+  .event {
     position: relative;
-    margin-bottom: 40px;
+
-    &:last-child {
-        .texts {
-            left: 40px;
-            right: auto;
-        }
-    }
     .pic {
-        width: 100%;
+      width: 100%;
     }
+
     .texts {
-        position: absolute;
+      position: absolute;
-        top: 80px;
+      top: 70px;
-        right: 40px;
+      right: 300px;
-        width: 500px;
+      bottom: 70px;
-        color: #fff;
+      left: 60px;
     }
-    .core-title {
+
-        font-size: 1.4rem;
+    h6 {
-        font-family: PingFangSC-Medium, PingFang SC;
+      position: relative;
+      font-size: 2.2rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      color: #333;
     }
-    .line {
+
-        width: 136px;
+    .en {
-        height: 3px;
+      margin-top: -30px;
-        margin: 20px 0;
+      font-size: 2rem;
-        background: #ffffff;
+      font-family: AppleSystemUIFont;
-        opacity: 0.56;
+      color: #e4e4e4;
     }
+
     .text {
-        font-size: 1rem;
+      margin: 15px 0;
-        line-height: 1.6;
+      font-size: 1rem;
+      color: #333;
     }
-}
+  }
-.fac {
+
-    .event {
+  .l-card {
-        position: relative;
+    display: flex;
-        .pic {
+    margin-top: 20px;
-            width: 100%;
+
-        }
+    li {
-        .texts {
+      position: relative;
-            position: absolute;
+      width: calc((100% - 40px) / 3);
-            top: 70px;
+      height: 359px;
-            right: 300px;
+      margin-right: 20px;
-            bottom: 70px;
+
-            left: 60px;
+      &:last-child {
-        }
+        margin-right: 0;
-        h6 {
+      }
-            position: relative;
-            font-size: 2.2rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            color: #333;
-        }
-        .en {
-            margin-top: -30px;
-            font-size: 2rem;
-            font-family: AppleSystemUIFont;
-            color: #e4e4e4;
-        }
-        .text {
-            margin: 15px 0;
-            font-size: 1rem;
-            color: #333;
-        }
     }
-    .l-card {
+
-        display: flex;
+    .pic {
-        margin-top: 20px;
+      width: 100%;
-        li {
+      height: 100%;
-            position: relative;
-            width: calc((100% - 40px) / 3);
-            height: 359px;
-            margin-right: 20px;
-            &:last-child {
-                margin-right: 0;
-            }
-        }
-        .pic {
-            width: 100%;
-            height: 100%;
-        }
-        .texts {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            padding: 140px 30px 0;
-            color: #fff;
-            background-color: rgba(0, 0, 0, 0.5);
-        }
-        h6 {
-            margin-bottom: 15px;
-            font-size: 1.6rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-        }
-        .text {
-            font-size: 1rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            line-height: 2;
-            @include mul-ellipsis(4);
-        }
     }
+
+    .texts {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      padding: 140px 30px 0;
+      color: #fff;
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+
+    h6 {
+      margin-bottom: 15px;
+      font-size: 1.6rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+    }
+
+    .text {
+      font-size: 1rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      line-height: 2;
+      @include mul-ellipsis(4);
+    }
+  }
 }
+
 .scan {
-    .scan-inner {
+  .scan-inner {
-        display: flex;
+    display: flex;
-    }
+  }
-    .left {
+
-        width: 45%;
+  .left {
-        margin-right: 80px;
+    width: 45%;
+    margin-right: 80px;
+  }
+
+  .line {
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+
+    .icon {
+      width: 50px;
+      height: 50px;
+      margin-right: 20px;
     }
-    .line {
+
-        display: flex;
+    .text {
-        align-items: center;
+      font-size: 1rem;
-        margin-bottom: 30px;
+      font-family: PingFangSC-Medium, PingFang SC;
-        .icon {
+      color: #333;
-            width: 50px;
+      line-height: 1.6;
-            height: 50px;
-            margin-right: 20px;
-        }
-        .text {
-            font-size: 1rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            color: #333;
-            line-height: 1.6;
-        }
     }
-    .total {
+  }
-        display: flex;
+
-        justify-content: space-between;
+  .total {
-        margin-top: 50px;
+    display: flex;
-        .num {
+    justify-content: space-between;
-            margin-bottom: 10px;
+    margin-top: 50px;
-            font-size: 2rem;
+
-            font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
+    .num {
-            font-weight: 800;
+      margin-bottom: 10px;
-            color: #1583ff;
+      font-size: 2rem;
-        }
+      font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
-        .text {
+      font-weight: 800;
-            font-size: 1rem;
+      color: #1583ff;
-            color: #333;
-        }
     }
-    .pic {
+
-        width: 50%;
+    .text {
-        // object-fit: cover;
+      font-size: 1rem;
+      color: #333;
     }
+  }
+
+  .pic {
+    width: 50%;
+    // object-fit: cover;
+  }
 }
 
 @media (min-width: 2000px) {
-    .scan {
+  .scan {
-        .scan-inner {
+    .scan-inner {
-            justify-content: flex-start;
+      justify-content: flex-start;
-        }
     }
+  }
 }
+
 @media (max-width: 1400px) {
-    .history {
+  .history {
-        .texts {
+    .texts {
-            flex-direction: column;
+      flex-direction: column;
-        }
-        .left {
-            width: 100%;
-        }
-        .bg {
-            width: auto;
-            max-width: 100%;
-            height: auto;
-            margin: 20px 0 0 0;
-        }
     }
-    .scan {
+
-        .scan-inner {
+    .left {
-            flex-direction: column;
+      width: 100%;
-        }
-        .left {
-            width: 100%;
-        }
-        .pic {
-            width: 100%;
-            margin-top: 2rem;
-        }
     }
-    .fac {
+
-        .event {
+    .bg {
-            .texts {
+      width: auto;
-                position: static;
+      max-width: 100%;
-                margin-top: 20px;
+      height: auto;
-            }
+      margin: 20px 0 0 0;
-        }
+    }
+  }
+
+  .scan {
+    .scan-inner {
+      flex-direction: column;
     }
+
+    .left {
+      width: 100%;
+    }
+
+    .pic {
+      width: 100%;
+      margin-top: 2rem;
+    }
+  }
+
+  .fac {
+    .event {
+      .texts {
+        position: static;
+        margin-top: 20px;
+      }
+    }
+  }
 }
+
 @media (max-width: 920px) {
-    .core {
+  .core {
-        .texts {
+    .texts {
-            top: 20px !important;
+      top: 20px !important;
-            left: 20px !important;
+      left: 20px !important;
-            right: 20px !important;
+      right: 20px !important;
-            width: auto;
+      width: auto;
-        }
-    }
-    .scan {
-        padding: 20px;
     }
-    .fac {
+  }
-        .l-card {
+
-            flex-direction: column;
+  .scan {
-            li {
+    padding: 20px;
-                width: 100%;
+  }
-                margin-bottom: 1rem;
+
-            }
+  .fac {
-        }
+    .l-card {
+      flex-direction: column;
+
+      li {
+        width: 100%;
+        margin-bottom: 1rem;
+      }
     }
+  }
 }
+
 @media (max-width: 750px) {
-    .hide-bd:after {
+  .hide-bd:after {
-        display: none;
+    display: none;
-    }
+  }
-    .block {
+
-        padding: 50px 0;
+  .block {
+    padding: 50px 0;
+  }
+
+  .core {
+    .texts {
+      position: static;
+      padding: 20px;
+      color: #333;
     }
-    .core {
+
-        .texts {
+    .line {
-            position: static;
+      background: #333;
-            padding: 20px;
-            color: #333;
-        }
-        .line {
-            background: #333;
-        }
     }
-    .fac {
+  }
-        .event {
+
-            .pic {
+  .fac {
-                display: none;
+    .event {
-            }
+      .pic {
-        }
+        display: none;
+      }
     }
+  }
 }
 </style>

src/pages/overviewDevHistory/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -11,45 +9,33 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}"
+        <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
-            :key="i"
-            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
     <div class="block history">
       <div class="inner">
-        <h2 class="wow fadeInLeft"
+        <h2 class="wow fadeInLeft" v-html="modules[1].form.title"></h2>
-            v-html="modules[1].form.title"></h2>
         <p class="en">{{ modules[1].form.des }}</p>
-        <div v-if="modules[2].list.length"
+        <div v-if="modules[2].list.length" class="event">
-             class="event">
           <ul class="time">
             <template v-for="(item, i) in modules[2].list">
-              <li v-if="item.isEnable"
+              <li v-if="item.isEnable" :key="i" :class="{ active: curYear == i }" @click="yearClick(i)">{{ item.title }}
-                  :key="i"
+              </li>
-                  :class="{active: curYear == i}"
-                  @click="yearClick(i)">{{ item.title }}</li>
             </template>
           </ul>
-          <div v-if="modules[2].list[curYear]"
+          <div v-if="modules[2].list[curYear]" class="right">
-               class="right">
             <h6 class="year">{{ modules[2].list[curYear].title }}</h6>
             <ul class="list">
               <template v-for="(e, j) in modules[2].list[curYear].list">
-                <li v-if="e.isEnable"
+                <li v-if="e.isEnable" :key="j" :class="{ 'cursor-pointer': isLink(e.link.linkName) }"
-                    :key="j"
+                  @click="openLink(e)">
-                    :class="{'cursor-pointer': isLink(e.link.linkName)}"
-                    @click="openLink(e)">
                   <div class="texts">
                     <p class="date">{{ e.title }}</p>
                     <p class="text">{{ e.des }}</p>
                   </div>
                   <div class="pic-wrap">
-                    <el-image v-if="e.pic"
+                    <el-image v-if="e.pic" class="pic" :src="e.pic" :preview-src-list="[e.pic]">
-                              class="pic"
-                              :src="e.pic"
-                              :preview-src-list="[e.pic]">
                     </el-image>
                   </div>
                 </li>
@@ -89,182 +75,214 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .wrap {
-    background: url(https://new.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
+  background: url(https://www.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
-        url(https://new.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
+    url(https://www.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
 }
+
 .single-banner {
-    .texts {
+  .texts {
-        top: auto !important;
+    top: auto !important;
-        bottom: 2rem;
+    bottom: 2rem;
-    }
+  }
 }
+
 .history {
-    padding: 3.85rem 0;
+  padding: 3.85rem 0;
-    h2 {
+
-        position: relative;
+  h2 {
-        font-size: 1.75rem;
+    position: relative;
-        font-family: PingFangSC-Semibold, PingFang SC;
+    font-size: 1.75rem;
-        font-weight: 600;
+    font-family: PingFangSC-Semibold, PingFang SC;
-        color: #1c1c1c;
+    font-weight: 600;
-    }
+    color: #1c1c1c;
-    .en {
+  }
-        margin: 0 0 2rem;
+
-        font-size: 1.75rem;
+  .en {
-        font-family: PingFangSC-Light, PingFang SC;
+    margin: 0 0 2rem;
-        font-weight: 300;
+    font-size: 1.75rem;
-        color: #e3e3e3;
+    font-family: PingFangSC-Light, PingFang SC;
-    }
+    font-weight: 300;
+    color: #e3e3e3;
+  }
 }
+
 .event {
-    display: flex;
+  display: flex;
-    justify-content: center;
+  justify-content: center;
-    .time {
+
-        width: 12.5rem;
+  .time {
-        padding-right: 0.625rem;
+    width: 12.5rem;
-        margin-right: 1.25rem;
+    padding-right: 0.625rem;
-        flex-shrink: 1;
+    margin-right: 1.25rem;
-        border-right: 1px solid #ddd;
+    flex-shrink: 1;
-        li {
+    border-right: 1px solid #ddd;
-            display: flex;
+
-            justify-content: center;
+    li {
-            align-items: center;
+      display: flex;
-            padding-right: 2.25rem;
+      justify-content: center;
-            line-height: 3rem;
+      align-items: center;
-            font-size: 1.32rem;
+      padding-right: 2.25rem;
-            font-weight: 600;
+      line-height: 3rem;
-            font-family: SFProDisplay-Semibold, SFProDisplay;
+      font-size: 1.32rem;
-            color: #666;
+      font-weight: 600;
-            box-shadow: inset 0px -1px 0px 0px #dddddd;
+      font-family: SFProDisplay-Semibold, SFProDisplay;
-            cursor: pointer;
+      color: #666;
-            &.active {
+      box-shadow: inset 0px -1px 0px 0px #dddddd;
-                font-weight: 800;
+      cursor: pointer;
-                color: #1a81f4;
+
-                background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
+      &.active {
-                &:before {
+        font-weight: 800;
-                    content: '';
+        color: #1a81f4;
-                    width: 18px;
+        background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
-                    height: 18px;
+
-                    background: url(https://new.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat;
+        &:before {
-                    margin-right: 20px;
+          content: '';
-                }
+          width: 18px;
-            }
+          height: 18px;
+          background: url(https://www.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat;
+          margin-right: 20px;
         }
+      }
     }
-    .right {
+  }
-        // width: 1000px;
+
-        flex-grow: 1;
+  .right {
+    // width: 1000px;
+    flex-grow: 1;
+  }
+
+  .year {
+    margin: 0 0 1rem 1rem;
+    font-size: 2.35rem;
+    font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+    font-weight: 800;
+    color: #1a81f4;
+  }
+
+  .list {
+    border-top: 1px solid #ddd;
+
+    li {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1.5rem;
+      border-bottom: 1px solid #ddd;
     }
-    .year {
+
-        margin: 0 0 1rem 1rem;
+    .texts {
-        font-size: 2.35rem;
+      width: 31.25rem;
-        font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
-        font-weight: 800;
-        color: #1a81f4;
     }
-    .list {
+
-        border-top: 1px solid #ddd;
+    .date {
-        li {
+      width: 31.25rem;
-            display: flex;
+      margin-bottom: 0.75rem;
-            justify-content: space-between;
+      font-size: 1.26rem;
-            align-items: center;
+      font-family: PingFangSC-Semibold, PingFang SC;
-            padding: 1.5rem;
+      font-weight: 600;
-            border-bottom: 1px solid #ddd;
+      color: #333;
-        }
+      display: -webkit-box;
-        .texts {
+      -webkit-box-orient: vertical;
-            width: 31.25rem;
+      -webkit-line-clamp: 3;
-        }
+      text-overflow: ellipsis;
-        .date {
+      overflow: hidden;
-            width: 31.25rem;
+      word-break: break-all;
-            margin-bottom: 0.75rem;
+    }
-            font-size: 1.26rem;
+
-            font-family: PingFangSC-Semibold, PingFang SC;
+    .text {
-            font-weight: 600;
+      font-size: 1.08rem;
-            color: #333;
+      color: #333;
-            display: -webkit-box;
+      @include mul-ellipsis(3);
-            -webkit-box-orient: vertical;
+
-            -webkit-line-clamp: 3;
+      &:before {
-            text-overflow: ellipsis;
+        content: '';
-            overflow: hidden;
+        display: inline-block;
-            word-break: break-all;
+        width: 7px;
-        }
+        height: 7px;
-        .text {
+        margin: 0 10px;
-            font-size: 1.08rem;
+        background-color: #666;
-            color: #333;
+        transform: rotate(45deg);
-            @include mul-ellipsis(3);
+      }
-            &:before {
+    }
-                content: '';
+
-                display: inline-block;
+    .pic-wrap {
-                width: 7px;
+      width: 17.5rem;
-                height: 7px;
+      height: 9.75rem;
-                margin: 0 10px;
+      text-align: center;
-                background-color: #666;
+    }
-                transform: rotate(45deg);
+
-            }
+    .pic {
-        }
+      // width: 17.5rem;
-        .pic-wrap {
+      height: 100%;
-            width: 17.5rem;
-            height: 9.75rem;
-            text-align: center;
-        }
-        .pic {
-            // width: 17.5rem;
-            height: 100%;
-        }
     }
+  }
 }
 
 @media (max-width: 1200px) {
-    .tab-content {
+  .tab-content {
-        width: 90%;
+    width: 90%;
-        span {
+
-            font-size: 1.35rem;
+    span {
-        }
+      font-size: 1.35rem;
     }
+  }
 
-    .block {
+  .block {
-        padding: 1.25rem 0;
+    padding: 1.25rem 0;
-        .inner {
+
-            width: 90%;
+    .inner {
-            h2 {
+      width: 90%;
-                font-size: 1.5rem;
+
-            }
+      h2 {
-            p {
+        font-size: 1.5rem;
-                font-size: 1rem;
+      }
-                margin: 10px 0 1.25rem;
+
-            }
+      p {
-            .event {
+        font-size: 1rem;
-                flex-direction: column;
+        margin: 10px 0 1.25rem;
-                .time {
+      }
-                    width: 100%;
+
-                    li {
+      .event {
-                        width: 100%;
+        flex-direction: column;
-                        justify-content: flex-start;
+
-                    }
+        .time {
-                }
+          width: 100%;
-                .right {
+
-                    margin-top: 1.25rem;
+          li {
-                    width: 100%;
+            width: 100%;
-                    h6 {
+            justify-content: flex-start;
-                        font-size: 2rem;
+          }
-                    }
+        }
-                    .list {
+
-                        li {
+        .right {
-                            padding: 1.25rem;
+          margin-top: 1.25rem;
-                            flex-direction: column;
+          width: 100%;
-                            align-items: flex-start;
+
-                            .texts {
+          h6 {
-                                width: 100%;
+            font-size: 2rem;
-                            }
+          }
-                            .pic {
+
-                                width: 100%;
+          .list {
-                                height: auto;
+            li {
-                            }
+              padding: 1.25rem;
-                        }
+              flex-direction: column;
-                    }
+              align-items: flex-start;
-                }
+
+              .texts {
+                width: 100%;
+              }
+
+              .pic {
+                width: 100%;
+                height: auto;
+              }
             }
+          }
         }
+      }
     }
+  }
 }
 </style>

src/pages/overviewIntro/index.vue

@@ -1,10 +1,7 @@
 <template>
-  <div class="wrap"
+  <div class="wrap" v-if="modules.length >= 1">
-       v-if="modules.length>=1">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,35 +9,26 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}"
+        <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
-            :key="i"
-            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
     <div class="tab-content">
       <div class="inner intro">
-        <img class="pic"
+        <img class="pic" :src="modules[1].form.pic" alt="">
-             :src="modules[1].form.pic"
-             alt="">
         <div class="right">
           <div class="relative">
             <h6 v-html="modules[1].form.title"></h6>
-            <img class="title-bg"
+            <img class="title-bg" src="https://www.iasf.ac.cn/images/overviewIntro/2.png" alt="">
-                 src="https://new.iasf.ac.cn/images/overviewIntro/2.png"
-                 alt="">
           </div>
-          <div class="text"
+          <div class="text" v-html="modules[1].form.des"></div>
-               v-html="modules[1].form.des"></div>
         </div>
       </div>
-      <div class="intro-bg"
+      <div class="intro-bg" v-if="modules[2]">
-           v-if="modules[2]">
         <div class="mask"></div>
         <div class="texts">
           <h6>{{ modules[2].form.title }}</h6>
-          <div class="des"
+          <div class="des" v-html="modules[2].form.des"></div>
-               v-html="modules[2].form.des"></div>
         </div>
       </div>
     </div>
@@ -79,144 +67,171 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .wrap {
-    background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
+  background: url(../../assets/images/survey2.png) (bottom right) / auto no-repeat;
 }
+
 .single-banner {
-    .texts {
+  .texts {
-        top: auto !important;
+    top: auto !important;
-        bottom: 2rem;
+    bottom: 2rem;
-    }
+  }
 }
+
 .tab-content {
-    padding-top: 3.85rem;
+  padding-top: 3.85rem;
-    .intro {
+
-        display: flex;
+  .intro {
-        align-items: center;
+    display: flex;
-        margin-bottom: 5.5rem;
+    align-items: center;
-        .pic {
+    margin-bottom: 5.5rem;
-            width: 49%;
+
-            margin-right: 2%;
+    .pic {
-        }
+      width: 49%;
-        .right {
+      margin-right: 2%;
-            width: 49%;
-        }
-        h6 {
-            position: relative;
-            font-size: 1.36rem;
-            color: #333;
-        }
-        .title-bg {
-            position: absolute;
-            top: -2rem;
-            left: -1rem;
-        }
-        .text {
-            margin-top: 2rem;
-            font-size: 1rem;
-            color: #020202;
-            line-height: 2;
-        }
     }
-    .intro-bg {
+
-        position: relative;
+    .right {
-        height: auto;
+      width: 49%;
-        padding-top: 4.5rem;
+    }
-        padding-bottom: 2rem;
+
-        color: #fff;
+    h6 {
-        text-align: center;
+      position: relative;
-        background: url(https://new.iasf.ac.cn/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
+      font-size: 1.36rem;
-        .mask {
+      color: #333;
-            position: absolute;
-            top: 0;
-            right: 0;
-            bottom: 0;
-            left: 0;
-            content: '';
-            background-color: rgba(0, 0, 0, 0.3);
-        }
-        .texts {
-            position: relative;
-        }
-        h6 {
-            margin-bottom: 1.5rem;
-            font-size: 1.6rem;
-            font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
-            font-weight: 800;
-        }
-        .des {
-            font-size: 1.2rem;
-        }
     }
+
+    .title-bg {
+      position: absolute;
+      top: -2rem;
+      left: -1rem;
+    }
+
+    .text {
+      margin-top: 2rem;
+      font-size: 1rem;
+      color: #020202;
+      line-height: 2;
+    }
+  }
+
+  .intro-bg {
+    position: relative;
+    height: auto;
+    padding-top: 4.5rem;
+    padding-bottom: 2rem;
+    color: #fff;
+    text-align: center;
+    background: url(https://www.iasf.ac.cn/images/overviewIntro/3.png) 0 0/100% 100% no-repeat;
+
+    .mask {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      content: '';
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+
+    .texts {
+      position: relative;
+    }
+
+    h6 {
+      margin-bottom: 1.5rem;
+      font-size: 1.6rem;
+      font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
+      font-weight: 800;
+    }
+
+    .des {
+      font-size: 1.2rem;
+    }
+  }
 }
+
 .ads {
-    position: fixed;
+  position: fixed;
-    top: 30%;
+  top: 30%;
-    right: 1%;
+  right: 1%;
-    padding: 20px;
+  padding: 20px;
-    animation: move 20s linear infinite alternate;
+  animation: move 20s linear infinite alternate;
-    li {
+
-        display: flex;
+  li {
-        align-items: center;
+    display: flex;
-        padding-left: 20px;
+    align-items: center;
-        line-height: 26px;
+    padding-left: 20px;
-        font-weight: 600;
+    line-height: 26px;
-        font-size: 16px;
+    font-weight: 600;
-        color: #1583ff;
+    font-size: 16px;
-        &:before {
+    color: #1583ff;
-            content: '';
+
-            width: 4px;
+    &:before {
-            height: 4px;
+      content: '';
-            margin-right: 8px;
+      width: 4px;
-            border-radius: 50%;
+      height: 4px;
-            background-color: #1583ff;
+      margin-right: 8px;
-        }
+      border-radius: 50%;
+      background-color: #1583ff;
     }
+  }
 }
+
 @keyframes move {
-    0% {
+  0% {
-        top: 30%;
+    top: 30%;
-        right: 1%;
+    right: 1%;
-    }
+  }
-    50% {
+
-        top: 40%;
+  50% {
-        right: 40%;
+    top: 40%;
-    }
+    right: 40%;
-    100% {
+  }
-        top: 90%;
+
-        right: 90%;
+  100% {
-    }
+    top: 90%;
+    right: 90%;
+  }
 }
 
 @media (max-width: 1200px) {
-    .tab-content {
+  .tab-content {
-        width: 90%;
+    width: 90%;
-        margin: auto;
+    margin: auto;
-        padding-top: 1.25rem;
+    padding-top: 1.25rem;
-        .intro {
+
-            flex-direction: column;
+    .intro {
-            .pic {
+      flex-direction: column;
-                width: 100%;
+
-            }
+      .pic {
-        }
+        width: 100%;
-        .intro-bg {
+      }
-            padding-top: 3rem;
+    }
-            .texts {
+
-                h6 {
+    .intro-bg {
-                    font-size: 1.6rem;
+      padding-top: 3rem;
-                }
+
-            }
+      .texts {
-        }
+        h6 {
-        .right {
+          font-size: 1.6rem;
-            width: 100% !important;
-            margin-top: 1.25rem;
-            .text {
-                margin-top: 1.25rem;
-            }
-        }
-        span {
-            font-size: 1.35rem;
         }
+      }
     }
+
+    .right {
+      width: 100% !important;
+      margin-top: 1.25rem;
+
+      .text {
+        margin-top: 1.25rem;
+      }
+    }
+
+    span {
+      font-size: 1.35rem;
+    }
+  }
 }
 </style>

src/pages/overviewSetup/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="wrap">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
-           :src="modules[0].form.pic"
-           alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -11,9 +9,7 @@
 
     <ul class="tabs wow fadeInLeft">
       <template v-for="(item, i) in tabs">
-        <li :class="{active: item.id == active}"
+        <li :class="{ active: item.id == active }" :key="i" @click="tabChange(item)">{{ item.columnName }}</li>
-            :key="i"
-            @click="tabChange(item)">{{ item.columnName }}</li>
       </template>
     </ul>
 
@@ -21,17 +17,12 @@
       <div class="org">
         <div class="left">
           <h6 v-html="modules[1].form.title"></h6>
-          <p class="text"
+          <p class="text" v-html="modules[1].form.des"></p>
-             v-html="modules[1].form.des"></p>
         </div>
-        <img class="pic"
+        <img class="pic" src="https://www.iasf.ac.cn/images/overviewSetup/1.png" alt="">
-             src="https://new.iasf.ac.cn/images/overviewSetup/1.png"
-             alt="">
       </div>
       <div class="lg-bg">
-        <el-image style="width: 100%;"
+        <el-image style="width: 100%;" :src="modules[2].form.pic" :preview-src-list="[modules[2].form.pic]">
-                  :src="modules[2].form.pic"
-                  :preview-src-list="[modules[2].form.pic]">
         </el-image>
       </div>
 
@@ -62,66 +53,79 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .single-banner {
-    .texts {
+  .texts {
-        top: auto !important;
+    top: auto !important;
-        bottom: 2rem;
+    bottom: 2rem;
-    }
+  }
 }
+
 .tab-content {
-    padding: 77px 0;
+  padding: 77px 0;
 }
+
 .org {
-    display: flex;
+  display: flex;
-    justify-content: space-between;
+  justify-content: space-between;
-    align-items: center;
+  align-items: center;
-    width: 1200px;
+  width: 1200px;
-    padding: 9px 86px 29px 116px;
+  padding: 9px 86px 29px 116px;
-    margin: 0 auto 50px;
+  margin: 0 auto 50px;
-    background: #fcfcfc;
+  background: #fcfcfc;
-    border-radius: 160px;
+  border-radius: 160px;
-    .left {
+
-        width: 705px;
+  .left {
-    }
+    width: 705px;
-    h6 {
+  }
-        font-size: 1.4rem;
+
-        font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
+  h6 {
-        font-weight: bold;
+    font-size: 1.4rem;
-        color: #333;
+    font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
-    }
+    font-weight: bold;
-    .text {
+    color: #333;
-        margin-top: 10px;
+  }
-        font-size: 1rem;
+
-        color: #020202;
+  .text {
-        line-height: 2rem;
+    margin-top: 10px;
-    }
+    font-size: 1rem;
-    .pic {
+    color: #020202;
-        width: 320px;
+    line-height: 2rem;
-        height: 282px;
+  }
-        object-fit: cover;
+
-    }
+  .pic {
+    width: 320px;
+    height: 282px;
+    object-fit: cover;
+  }
 }
+
 .lg-bg {
-    width: 1200px;
+  width: 1200px;
-    margin: 0 auto;
+  margin: 0 auto;
 }
+
 @media (max-width: 1200px) {
-    .tab-content {
+  .tab-content {
-        padding: 20px 0;
+    padding: 20px 0;
-        .org {
+
-            width: 95%;
+    .org {
-            padding: 15px;
+      width: 95%;
-            flex-direction: column;
+      padding: 15px;
-            .pic {
+      flex-direction: column;
-                display: none;
+
-            }
+      .pic {
-            .left {
+        display: none;
-                width: 100%;
+      }
-            }
+
-        }
+      .left {
-    }
+        width: 100%;
-    .lg-bg {
+      }
-        width: 90%;
     }
+  }
+
+  .lg-bg {
+    width: 90%;
+  }
 }
 </style>

src/pages/researchTeam/index.vue

@@ -22,16 +22,16 @@
             <ul class="teams">
               <li v-for="(item, i) in articles" :key="i" @click="toArtice(item, modules[1].form)">
                 <div class="line">
-                  <img src="https://new.iasf.ac.cn/images/researchTeam/3.png" alt="" class="icon">
+                  <img src="https://www.iasf.ac.cn/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="https://new.iasf.ac.cn/images/researchTeam/4.png" alt="" class="icon">
+                  <img src="https://www.iasf.ac.cn/images/researchTeam/4.png" alt="" class="icon">
                   <span class="text">专业 {{ item.major }}</span>
                 </div>
                 <div class="line">
-                  <img src="https://new.iasf.ac.cn/images/researchTeam/5.png" alt="" class="icon">
+                  <img src="https://www.iasf.ac.cn/images/researchTeam/5.png" alt="" class="icon">
                   <span class="text">荣誉 {{ item.honor }}</span>
                 </div>
               </li>
@@ -208,7 +208,7 @@ export default {
       width: calc((100% - 10px) / 2);
       padding: 20px 30px;
       margin: 0 10px 10px 0;
-      background: url(https://new.iasf.ac.cn/images/researchTeam/2.png) 0 0 / cover no-repeat;
+      background: url(https://www.iasf.ac.cn/images/researchTeam/2.png) 0 0 / cover no-repeat;
       cursor: pointer;
 
       &:nth-child(even) {

src/pages/speech/index.vue

@@ -68,7 +68,7 @@ export default {
 @import '../../styles/page/page.scss';
 
 .block {
-  background: url(https://new.iasf.ac.cn/images/speech/2.png) no-repeat;
+  background: url(https://www.iasf.ac.cn/images/speech/2.png) no-repeat;
 }
 
 .inner {

src/styles/lib/_reset.scss

@@ -36,8 +36,6 @@ input,
 textarea,
 p,
 blockquote,
-th,
-td,
 hr,
 button,
 article,