From 495bec4c8d98f4ec94c13d392dd692bbbaacebba Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 12 Aug 2024 13:41:26 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E3=80=90=E5=8D=95=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=8F=E7=9B=AE=E3=80=91=E9=95=BF=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/navbar/index.vue     |    2 +-
 src/pages/sfel/index.vue         | 3855 ++++++++++++++++--------------
 src/pages/singlePage/index.vue   |  476 ++++
 src/pages/team/index.vue         |  141 +-
 src/router/modules/singlePage.js |   14 +
 5 files changed, 2629 insertions(+), 1859 deletions(-)
 create mode 100644 src/pages/singlePage/index.vue
 create mode 100644 src/router/modules/singlePage.js

diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index deddd6d..7b5f283 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -189,7 +189,7 @@ $height: 89px;
     span {
       font-size: 1rem;
       font-weight: 600;
-      text-shadow: 0px 2px 2px rgba(185, 185, 185, .6);
+      text-shadow: 0px 2px 1px rgba(185, 185, 185, .5);
     }
 
     &:hover {
diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue
index 7e345e3..224f5e9 100644
--- a/src/pages/sfel/index.vue
+++ b/src/pages/sfel/index.vue
@@ -1,74 +1,51 @@
 <template>
   <div class="wrap">
-    <el-carousel class="topImg"
-                 :interval="6000"
-                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
-                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel class="topImg" :interval="6000"
+      :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+      :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable"
-                          :key="i">
-          <img :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
-               width="100%"
-               :src="item.pic"
-               alt=""
-               @click="openLink(item)">
+        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+          <img :class="[{ 'cursor-pointer': isLink(item.link.linkName) }]" width="100%" :src="item.pic" alt=""
+            @click="openLink(item)">
         </el-carousel-item>
       </template>
     </el-carousel>
 
-    <div class="block banner-block"
-         id="part1">
+    <div class="block banner-block" id="part1">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[1].form.title }}
             <span class="sub">{{ modules[1].form.subTitle }}</span>
           </h5>
-          <span class="more"
-                @click="toAll(modules[2].form)">MORE</span>
+          <span class="more" @click="toAll(modules[2].form)">MORE</span>
         </div>
         <template v-if="articles.length">
-          <div class="sfel-banner wow fadeInDown"
-               data-wow-delay="0.5s"
-               @click="toArtice(curArticle, modules[2].form)">
-            <div style="width: 50%;height: 20.5rem;overflow: hidden;"
-                 class="newBox">
-              <img class="pic"
-                   width="100%"
-                   height="100%"
-                   :src="curArticle.titleImg"
-                   alt="">
+          <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
+            <div style="width: 50%;height: 20.5rem;overflow: hidden;" class="newBox">
+              <img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
             </div>
             <div class="right">
               <h6>{{ curArticle.title }}</h6>
-              <div class="des"
-                   v-html="curArticle.mainBody"></div>
-              <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p>
+              <div class="des" v-html="curArticle.mainBody"></div>
+              <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' +
+                curArticle.classificationName }}</p>
               <ul class="inds">
-                <li v-for="i in articles.length > 3 ? 4 : articles.length"
-                    :key="i"
-                    :class="{active: curInd == i - 1}"
-                    @click.stop="switchCarousel(i - 1)"></li>
+                <li v-for="i in articles.length > 3 ? 4 : articles.length" :key="i" :class="{ active: curInd == i - 1 }"
+                  @click.stop="switchCarousel(i - 1)"></li>
               </ul>
             </div>
           </div>
 
           <ul class="card">
             <template v-for="(item, i) in articles">
-              <li v-if="i > 3 && i < 7"
-                  :key="i"
-                  class="wow fadeInDown"
-                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
-                <img class="pic"
-                     :src="item.titleImg"
-                     alt="">
+              <li v-if="i > 3 && i < 7" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
+                <img class="pic" :src="item.titleImg" alt="">
                 <div class="texts">
-                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
+                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName
+                    }}</p>
                   <div class="des">{{ item.title }}</div>
-                  <img class="arrow"
-                       src="@/assets/images/arrow.png"
-                       alt=""
-                       @click="toArtice(item, modules[2].form)">
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
                 </div>
               </li>
             </template>
@@ -77,85 +54,62 @@
       </div>
     </div>
 
-    <div class="block notice"
-         id="part2">
+    <div class="block notice" id="part2">
       <div class="inner lg">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[3].form.title }}
             <span class="sub">{{ modules[3].form.subTitle }}</span>
           </h5>
-          <span class="more"
-                @click="toAll(modules[4].form)">MORE</span>
+          <span class="more" @click="toAll(modules[4].form)">MORE</span>
         </div>
-        <div class="shop-shows"
-             v-if="articles1.length">
-          <div class="left wow fadeInLeft"
-               data-wow-delay="0.5s">
+        <div class="shop-shows" v-if="articles1.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s">
             <el-carousel>
               <template v-for="(item, i) in articles1">
-                <el-carousel-item v-if="i < 4"
-                                  :key="i">
-                  <div class="item"
-                       @click="toArtice(item, modules[4].form)">
-                    <img class="pic"
-                         :src="item.titleImg"
-                         alt="">
+                <el-carousel-item v-if="i < 4" :key="i">
+                  <div class="item" @click="toArtice(item, modules[4].form)">
+                    <img class="pic" :src="item.titleImg" alt="">
                     <p class="text">{{ item.title }}</p>
                   </div>
                 </el-carousel-item>
               </template>
             </el-carousel>
-            <div v-if="articles1.length > 4"
-                 class="cards"
-                 style="margin-top: 18px;"
-                 @click="toArtice(articles1[4], modules[4].form)">
+            <div v-if="articles1.length > 4" class="cards" style="margin-top: 18px;"
+              @click="toArtice(articles1[4], modules[4].form)">
               <h6 class="a-line">{{ articles1[4].title }}</h6>
               <div class="sum">{{ articles1[4].mainBody }}</div>
               <p class="date">{{ articles1[4].releaseTime }}</p>
             </div>
             <div class="card-wrap">
-              <div v-if="articles1.length > 5"
-                   class="cards"
-                   style="margin-right: 18px"
-                   @click="toArtice(articles1[5], modules[4].form)">
+              <div v-if="articles1.length > 5" class="cards" style="margin-right: 18px"
+                @click="toArtice(articles1[5], modules[4].form)">
                 <h6>{{ articles1[5].title }}</h6>
                 <p class="date">{{ articles1[5].releaseTime }}</p>
               </div>
-              <div v-if="articles1.length > 6"
-                   class="cards"
-                   @click="toArtice(articles1[6], modules[4].form)">
+              <div v-if="articles1.length > 6" class="cards" @click="toArtice(articles1[6], modules[4].form)">
                 <h6>{{ articles1[6].title }}</h6>
                 <p class="date">{{ articles1[6].releaseTime }}</p>
               </div>
             </div>
           </div>
-          <div v-if="articles1.length > 7"
-               class="right wow fadeInRight"
-               data-wow-delay="0.5s">
+          <div v-if="articles1.length > 7" class="right wow fadeInRight" data-wow-delay="0.5s">
             <ul class="card-list">
               <template v-for="(item, i) in articles1">
-                <li v-if="i > 6 && i < 10"
-                    :key="i"
-                    @click="toArtice(item, modules[4].form)">
+                <li v-if="i > 6 && i < 10" :key="i" @click="toArtice(item, modules[4].form)">
                   <div class="releaseTime">
                     <p class="d">{{ item.date }}</p>
                     <p class="m">{{ item.month }}</p>
                   </div>
                   <div class="texts">
                     <h6>{{ item.title }}</h6>
-                    <div class="des"
-                         v-html="item.mainBody"></div>
+                    <div class="des" v-html="item.mainBody"></div>
                   </div>
                 </li>
               </template>
             </ul>
-            <div v-if="articles1.length > 10"
-                 class="slide"
-                 @click="toArtice(articles1[10], modules[4].form)">
-              <img class="pic"
-                   :src="articles1[10].titleImg"
-                   alt="">
+            <div v-if="articles1.length > 10" class="slide" @click="toArtice(articles1[10], modules[4].form)">
+              <img class="pic" :src="articles1[10].titleImg" alt="">
               <p class="text">{{ articles1[10].title }}</p>
             </div>
           </div>
@@ -163,67 +117,41 @@
       </div>
     </div>
 
-    <div class="block conference"
-         id="part3">
+    <div class="block conference" id="part3">
       <div class="inner lg">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[5].form.title }}
             <span class="sub">{{ modules[5].form.subTitle }}</span>
           </h5>
-          <span class="more"
-                @click="toAll(modules[6].form)">MORE</span>
+          <span class="more" @click="toAll(modules[6].form)">MORE</span>
         </div>
-        <div class="shows"
-             v-if="articles2.length">
-          <div class="left wow fadeInLeft"
-               data-wow-delay="0.5s"
-               @click="toArtice(articles2[0], modules[6].form)">
-            <img class="pic"
-                 width="100%"
-                 height="100%"
-                 :src="articles2[0].titleImg"
-                 alt="">
+        <div class="shows" v-if="articles2.length">
+          <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
+            <img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
             <div class="text">{{ articles2[0].title }}</div>
           </div>
-          <ul class="card-list wow fadeInRight"
-              data-wow-delay="0.5s">
+          <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
             <template v-for="(item, i) in articles2">
-              <li v-if="i && i < 4"
-                  :key="i"
-                  @click="toArtice(item, modules[6].form)">
-                <img class="pic"
-                     :src="item.titleImg"
-                     alt="">
+              <li v-if="i && i < 4" :key="i" @click="toArtice(item, modules[6].form)">
+                <img class="pic" :src="item.titleImg" alt="">
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
                   <p class="sum">{{ item.mainBody }}</p>
-                  <p v-if="item.keynoteSpeaker"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/mine.png"
-                         alt="">
+                  <p v-if="item.keynoteSpeaker" class="text">
+                    <img class="icon" src="@/assets/images/mine.png" alt="">
                     {{ item.keynoteSpeaker }}
                   </p>
-                  <p v-if="item.activityStartTime"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/time.png"
-                         alt="">
+                  <p v-if="item.activityStartTime" class="text">
+                    <img class="icon" src="@/assets/images/time.png" alt="">
                     会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
                   </p>
-                  <p v-if="item.onlineLocation"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/online.png"
-                         alt="">
+                  <p v-if="item.onlineLocation" class="text">
+                    <img class="icon" src="@/assets/images/online.png" alt="">
                     {{ item.onlineLocation }}
                   </p>
-                  <p v-if="item.offlineLocation"
-                     class="text">
-                    <img class="icon"
-                         src="@/assets/images/location.png"
-                         alt="">
+                  <p v-if="item.offlineLocation" class="text">
+                    <img class="icon" src="@/assets/images/location.png" alt="">
                     {{ item.offlineLocation }}
                   </p>
                 </div>
@@ -234,62 +162,43 @@
       </div>
     </div>
 
-    <div class="block media"
-         id="part4">
+    <div class="block media" id="part4">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[7].form.title }}
             <span class="sub">{{ modules[7].form.subTitle }}</span>
           </h5>
-          <span class="more"
-                @click="toAll(modules[8].form)">MORE</span>
+          <span class="more" @click="toAll(modules[8].form)">MORE</span>
         </div>
-        <div v-if="articles3.length"
-             class="media-wrap">
+        <div v-if="articles3.length" class="media-wrap">
           <div class="left">
             <div class="slides">
-              <div class="item wow fadeInLeft"
-                   data-wow-delay="0.5s"
-                   style="margin-right: 20px"
-                   @click="toArtice(articles3[0], modules[9].form)">
-                <img width="100%"
-                     height="100%"
-                     :src="articles3[0].titleImg"
-                     alt="">
+              <div class="item wow fadeInLeft" data-wow-delay="0.5s" style="margin-right: 20px"
+                @click="toArtice(articles3[0], modules[9].form)">
+                <img width="100%" height="100%" :src="articles3[0].titleImg" alt="">
                 <div class="text">{{ articles3[0].title }}</div>
               </div>
-              <div v-if="articles3.length > 1"
-                   class="item wow fadeInLeft"
-                   data-wow-delay="0.5s"
-                   @click="toArtice(articles3[1], modules[9].form)">
-                <img width="100%"
-                     height="100%"
-                     :src="articles3[1].titleImg"
-                     alt="">
+              <div v-if="articles3.length > 1" class="item wow fadeInLeft" data-wow-delay="0.5s"
+                @click="toArtice(articles3[1], modules[9].form)">
+                <img width="100%" height="100%" :src="articles3[1].titleImg" alt="">
                 <div class="text">{{ articles3[1].title }}</div>
               </div>
             </div>
             <ul class="list">
               <template v-for="(item, i) in articles3">
-                <li v-if="i > 1 && i < 5"
-                    :key="i"
-                    class="wow fadeInDown"
-                    :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
-                    @click="toArtice(item, modules[9].form)">
+                <li v-if="i > 1 && i < 5" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
+                  @click="toArtice(item, modules[9].form)">
                   <h6>{{ item.title }}</h6>
                   <div class="des">{{ item.mainBody }}</div>
                 </li>
               </template>
             </ul>
           </div>
-          <div v-if="articles3.length > 5"
-               class="right wow bounceInRight"
-               data-wow-delay="0.8s"
-               @click="toArtice(articles3[5], modules[9].form)">
+          <div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s"
+            @click="toArtice(articles3[5], modules[9].form)">
             <div class="img-wrap">
-              <img :src="articles3[5].titleImg"
-                   alt="">
+              <img :src="articles3[5].titleImg" alt="">
             </div>
             <div class="texts">
               <h6>{{ articles3[5].title }}</h6>
@@ -300,8 +209,7 @@
       </div>
     </div>
 
-    <div class="block news"
-         id="part5">
+    <div class="block news" id="part5">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
@@ -310,14 +218,10 @@
           </h5>
         </div>
         <ul class="news">
-          <li v-for="(item, i) in modules[10].list"
-              :key="i"
-              class="wow fadeInDown"
-              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
-              :class="{'cursor-pointer': item.link.linkName !== '无'}"
-              @click="openLink(item)">
-            <img :src="item.pic"
-                 alt="">
+          <li v-for="(item, i) in modules[10].list" :key="i" class="wow fadeInDown"
+            :data-wow-delay="(0.2 * i).toFixed(1) + 's'" :class="{ 'cursor-pointer': item.link.linkName !== '无' }"
+            @click="openLink(item)">
+            <img :src="item.pic" alt="">
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <div class="des">{{ item.des }}</div>
@@ -327,38 +231,30 @@
       </div>
     </div>
 
-    <div class="block program"
-         id="part6">
+    <div class="block program" id="part6">
       <div class="inner">
         <div class="title wow fadeInUp">
           <h5>
             {{ modules[11].form.title }}
             <span class="sub">{{ modules[11].form.subTitle }}</span>
           </h5>
-          <span class="more"
-                @click="toAll(modules[12].form)">MORE</span>
+          <span class="more" @click="toAll(modules[12].form)">MORE</span>
         </div>
         <template v-if="articles4.length">
-          <div class="slide"
-               @click="toArtice(articles4[0], modules[12].form)">
+          <div class="slide" @click="toArtice(articles4[0], modules[12].form)">
             <div class="texts">
               <h6>{{ articles4[0].title }}</h6>
               <div class="des">{{ articles4[0].mainBody }}</div>
               <div class="meta">发表日期：{{ articles4[0].releaseTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div>
             </div>
             <div class="img-wrap">
-              <img class="pic"
-                   :src="articles4[0].titleImg"
-                   alt="">
+              <img class="pic" :src="articles4[0].titleImg" alt="">
             </div>
           </div>
           <ul class="list">
             <template v-for="(item, i) in articles3">
-              <li v-if="i && i < 4"
-                  :key="i"
-                  class="wow fadeInDown"
-                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
-                  @click="toArtice(item, modules[12].form)">
+              <li v-if="i && i < 4" :key="i" class="wow fadeInDown" :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
+                @click="toArtice(item, modules[12].form)">
                 <div class="des">{{ item.title }}</div>
                 <p class="date">{{ item.releaseTime }}</p>
               </li>
@@ -370,14 +266,10 @@
 
     <div class="tools">
       <div class="logo">
-        <img src="@/assets/images/logo.png"
-             alt="">
+        <img src="@/assets/images/logo.png" alt="">
       </div>
       <ul class="nav">
-        <li v-for="(item, i) in navs"
-            :key="i"
-            class="column"
-            @click="toAnchor(item)">{{ item.name }}</li>
+        <li v-for="(item, i) in navs" :key="i" class="column" @click="toAnchor(item)">{{ item.name }}</li>
       </ul>
     </div>
   </div>
@@ -423,7 +315,7 @@ export default {
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles = Util.removeTag(data.slice(0, articleNum || 7))
               this.curArticle = this.articles[0]
-            }).catch(err => {})
+            }).catch(err => { })
           }
           if (json[4].form.column.length) {
             const { column, articleNum } = json[4].form
@@ -444,19 +336,19 @@ export default {
             const { column, articleNum } = json[6].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
-            }).catch(err => {})
+            }).catch(err => { })
           }
           if (json[8].form.column.length) {
             const { column, articleNum } = json[8].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles3 = Util.removeTag(data.slice(0, articleNum || 6))
-            }).catch(err => {})
+            }).catch(err => { })
           }
           if (json[12].form.column.length) {
             const { column, articleNum } = json[12].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles4 = Util.removeTag(data.slice(0, articleNum || 4))
-            }).catch(err => {})
+            }).catch(err => { })
           }
 
           // 获取页面的所有标题，展示到左侧导航
@@ -505,1739 +397,2118 @@ export default {
 @import '../../styles/page/page.scss';
 
 .wrap {
-    /deep/ .el-carousel__container {
-        height: 100vh;
-    }
-    /deep/ .el-carousel__container {
-        height: 100vh;
-    }
-    .topImg {
-        height: 100vh;
-        img {
-            height: 100vh;
-            object-fit: cover;
-        }
+  /deep/ .el-carousel__container {
+    height: 100vh;
+  }
+
+  /deep/ .el-carousel__container {
+    height: 100vh;
+  }
+
+  .topImg {
+    height: 100vh;
+
+    img {
+      height: 100vh;
+      object-fit: cover;
     }
+  }
 }
+
 .block {
-    padding: 3rem 0;
+  padding: 3rem 0;
 }
 
 .title {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-    padding-bottom: 1.25rem;
-    margin-bottom: 1.5rem;
-    border-bottom: 1px solid #ddd;
-    align-items: center;
-    h5 {
-        padding-left: 0.8rem;
-        font-size: 1.62rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #333333;
-        line-height: 1;
-        border-left: 6px solid #2b96ef;
-    }
-    .sub {
-        font-size: 0.88rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        font-weight: 500;
-        color: #afb7bf;
-    }
-    .more {
-        font-size: 0.64rem;
-        color: #666;
-        cursor: pointer;
-    }
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  padding-bottom: 1.25rem;
+  margin-bottom: 1.5rem;
+  border-bottom: 1px solid #ddd;
+  align-items: center;
+
+  h5 {
+    padding-left: 0.8rem;
+    font-size: 1.62rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #333333;
+    line-height: 1;
+    border-left: 6px solid #2b96ef;
+  }
+
+  .sub {
+    font-size: 0.88rem;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #afb7bf;
+  }
+
+  .more {
+    font-size: 0.64rem;
+    color: #666;
+    cursor: pointer;
+  }
 }
+
 .lg {
-    // width: 1505px;
+  // width: 1505px;
 }
+
 /deep/.articles {
-    width: 50%;
-    .el-carousel__indicators--horizontal {
-        bottom: 20px;
-        left: 804px;
-    }
+  width: 50%;
+
+  .el-carousel__indicators--horizontal {
+    bottom: 20px;
+    left: 804px;
+  }
 }
+
 .banner-block {
-    background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
+  background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
 }
+
 .sfel-banner {
-    display: flex;
-    cursor: pointer;
-    .pic {
-        transition: 0.5s;
-        object-fit: cover;
-        &:hover {
-            transform: scale(1.3);
-        }
-    }
-    .right {
-        position: relative;
-        width: 50%;
-        padding: 50px 50px 30px;
-        background: #1583ff;
-        color: #fff;
-        h6 {
-            font-size: 1.34rem;
-            @include mul-ellipsis(2);
-        }
-        .des {
-            font-size: 1.02rem;
-        }
-        .meta {
-            font-size: 1.04rem;
-        }
-        &:hover {
-            background: #465f85;
-            h6,
-            .des,
-            .meta {
-                color: #fff;
-                transform: translateY(-15px);
-            }
-        }
-    }
-    .inds {
-        position: absolute;
-        bottom: 40px;
-        left: 60px;
-        display: flex;
-        li {
-            width: 10px;
-            height: 10px;
-            margin-right: 12px;
-            background: #ffffff;
-            border-radius: 50%;
-            transition: 0.2s;
-            &.active {
-                width: 30px;
-                background: rgba(255, 255, 255, 0.3);
-                border-radius: 5px;
-            }
-        }
+  display: flex;
+  cursor: pointer;
+
+  .pic {
+    transition: 0.5s;
+    object-fit: cover;
+
+    &:hover {
+      transform: scale(1.3);
     }
+  }
+
+  .right {
+    position: relative;
+    width: 50%;
+    padding: 50px 50px 30px;
+    background: #1583ff;
+    color: #fff;
+
     h6 {
-        font-size: 1.3rem;
-        transition: 0.3s;
+      font-size: 1.34rem;
+      @include mul-ellipsis(2);
     }
+
     .des {
-        margin: 30px 0;
-        font-size: 0.9rem;
-        line-height: 24px;
-        transition: 0.3s;
+      font-size: 1.02rem;
     }
+
     .meta {
-        font-size: 0.8rem;
-        transition: 0.3s;
+      font-size: 1.04rem;
     }
-}
-.card {
-    li {
-        .texts {
-            .des {
-                min-height: 3rem;
-            }
-        }
+
+    &:hover {
+      background: #465f85;
+
+      h6,
+      .des,
+      .meta {
+        color: #fff;
+        transform: translateY(-15px);
+      }
     }
-}
-.card {
+  }
+
+  .inds {
+    position: absolute;
+    bottom: 40px;
+    left: 60px;
     display: flex;
-    flex-wrap: wrap;
-    margin-top: 2rem;
+
     li {
-        width: calc((100% - 56px) / 3);
-        margin-right: 28px;
-        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
-        border-radius: 6px;
-        transition: 0.3s;
-        background-color: #fff;
-        &:hover {
-            transform: scale(1.05);
-        }
-        &:last-child {
-            margin-right: 0;
-        }
-    }
-    .pic {
-        width: 100%;
-        height: auto;
-        object-fit: cover;
+      width: 10px;
+      height: 10px;
+      margin-right: 12px;
+      background: #ffffff;
+      border-radius: 50%;
+      transition: 0.2s;
+
+      &.active {
+        width: 30px;
+        background: rgba(255, 255, 255, 0.3);
+        border-radius: 5px;
+      }
     }
+  }
+
+  h6 {
+    font-size: 1.3rem;
+    transition: 0.3s;
+  }
+
+  .des {
+    margin: 30px 0;
+    font-size: 0.9rem;
+    line-height: 24px;
+    transition: 0.3s;
+  }
+
+  .meta {
+    font-size: 0.8rem;
+    transition: 0.3s;
+  }
+}
+
+.card {
+  li {
     .texts {
-        padding: 2rem 1.5rem;
-    }
-    .meta {
-        font-size: 0.92rem;
-        color: #666;
+      .des {
+        min-height: 3rem;
+      }
     }
-    .des {
-        margin: 0.5rem 0;
-        font-size: 0.88rem;
-        font-family: SFProDisplay;
-        font-weight: 500;
-        color: #333;
-        line-height: 1.4rem;
-        -webkit-line-clamp: 2;
+  }
+}
+
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 2rem;
+
+  li {
+    width: calc((100% - 56px) / 3);
+    margin-right: 28px;
+    box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
+    border-radius: 6px;
+    transition: 0.3s;
+    background-color: #fff;
+
+    &:hover {
+      transform: scale(1.05);
     }
-    .arrow {
-        width: 1.8rem;
+
+    &:last-child {
+      margin-right: 0;
     }
+  }
+
+  .pic {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+  }
+
+  .texts {
+    padding: 2rem 1.5rem;
+  }
+
+  .meta {
+    font-size: 0.92rem;
+    color: #666;
+  }
+
+  .des {
+    margin: 0.5rem 0;
+    font-size: 0.88rem;
+    font-family: SFProDisplay;
+    font-weight: 500;
+    color: #333;
+    line-height: 1.4rem;
+    -webkit-line-clamp: 2;
+  }
+
+  .arrow {
+    width: 1.8rem;
+  }
 }
 
 .notice {
-    background: url(../../assets/images/sfel/3.png) 0 0 / cover no-repeat;
+  background: url(../../assets/images/sfel/3.png) 0 0 / cover no-repeat;
 }
+
 .shop-shows {
-    display: flex;
-    .left {
-        width: 50%;
-        margin-right: 1rem;
-        /deep/ .el-carousel__container {
-            height: 20.65rem;
-        }
-        .item {
-            position: relative;
-            height: 100%;
-            cursor: pointer;
-            .pic {
-                width: 100%;
-                height: 100%;
-                transition: 0.5s;
-                object-fit: cover;
-            }
-            .text {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                padding: 0 20px;
-                font-size: 0.96rem;
-                color: #fff;
-                line-height: 3rem;
-                @include ellipsis;
-                background-color: rgba(0, 0, 0, 0.57);
-            }
-            &:hover {
-                .pic {
-                    transform: scale(1.3);
-                }
-            }
-        }
-        .card-wrap {
-            display: flex;
-            margin-top: 0.9rem;
-            .cards {
-                flex: 1;
-            }
-            h6 {
-                @include mul-ellipsis(2);
-            }
-        }
-        .cards {
-            padding: 2.85rem 1rem;
-            background-color: #fff;
-            transition: 0.5s;
-            cursor: pointer;
-            &:hover {
-                transform: translateX(10px);
-            }
-            h6 {
-                margin-bottom: 1.2rem;
-                font-size: 1.08rem;
-                color: #48525e;
-            }
-            .a-line {
-                @include ellipsis;
-            }
-            .sum {
-                font-size: 0.9rem;
-                color: #6d7c8e;
-                @include ellipsis;
-            }
-            .date {
-                margin-top: 1.2rem;
-                font-size: 0.72rem;
-                color: #c4ccd7;
-            }
-        }
-        h6 {
-            font-size: 24px;
-            color: #272727;
-        }
-        .des {
-            margin-top: 10px;
-            font-size: 16px;
-            color: #666;
-            line-height: 30px;
-        }
-    }
-    .right {
-        width: 50%;
-    }
-    .card-list {
-        li {
-            display: flex;
-            align-items: center;
-            padding: 0.95rem;
-            margin-bottom: 0.9rem;
-            background-color: #fff;
-            transition: 0.3s;
-            cursor: pointer;
-            &:hover {
-                transform: scale(1.05);
-            }
-        }
-        .releaseTime {
-            width: 4.4rem;
-            height: 4.4rem;
-            padding: 0.5rem 0 0.8rem;
-            margin-right: 1.2rem;
-            text-align: center;
-        }
-        .d {
-            font-size: 1.9rem;
-            font-family: DINCondensed-Bold, DINCondensed;
-            font-weight: bold;
-            color: #333333;
-            line-height: 2.15rem;
-        }
-        .m {
-            font-size: 1.02rem;
-            font-family: PingFangSC-Regular, PingFang SC;
-            font-weight: 400;
-            color: #666666;
-            line-height: 1rem;
-        }
-        .texts {
-            width: calc(100% - 110px);
-        }
-        h6 {
-            margin-bottom: 0.5rem;
-            font-size: 1.08rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #1583ff;
-            @include ellipsis;
-        }
-        .des {
-            font-size: 0.9rem;
-            color: #666;
-            line-height: 1.2rem;
-            -webkit-line-clamp: 2;
-        }
+  display: flex;
+
+  .left {
+    width: 50%;
+    margin-right: 1rem;
+
+    /deep/ .el-carousel__container {
+      height: 20.65rem;
     }
-    .slide {
-        position: relative;
-        height: 24.4rem;
-        overflow: hidden;
-        cursor: pointer;
+
+    .item {
+      position: relative;
+      height: 100%;
+      cursor: pointer;
+
+      .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+        object-fit: cover;
+      }
+
+      .text {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 20px;
+        font-size: 0.96rem;
+        color: #fff;
+        line-height: 3rem;
+        @include ellipsis;
+        background-color: rgba(0, 0, 0, 0.57);
+      }
+
+      &:hover {
         .pic {
-            width: 100%;
-            height: 100%;
-            transition: 0.5s;
-            object-fit: cover;
-        }
-        .text {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            padding: 0 0.6rem;
-            line-height: 3rem;
-            font-size: 0.8rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
-            background-color: rgba(0, 0, 0, 0.57);
-        }
-        &:hover {
-            .pic {
-                transform: scale(1.3);
-            }
+          transform: scale(1.3);
         }
+      }
     }
-}
-.conference {
-    background: url(../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
-    .shows {
-        display: flex;
+
+    .card-wrap {
+      display: flex;
+      margin-top: 0.9rem;
+
+      .cards {
+        flex: 1;
+      }
+
+      h6 {
+        @include mul-ellipsis(2);
+      }
     }
-    .left {
-        position: relative;
-        width: 34.375rem;
-        height: auto;
-        margin-right: 20px;
-        cursor: pointer;
-        overflow: hidden;
-        .text {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            padding: 0 0.6rem;
-            line-height: 3rem;
-            font-size: 0.8rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
-            background-color: rgba(0, 0, 0, 0.57);
-        }
-        .pic {
-            transition: 0.5s;
-            object-fit: cover;
-        }
-        &:hover {
-            .pic {
-                transform: scale(1.3);
-            }
-        }
+
+    .cards {
+      padding: 2.85rem 1rem;
+      background-color: #fff;
+      transition: 0.5s;
+      cursor: pointer;
+
+      &:hover {
+        transform: translateX(10px);
+      }
+
+      h6 {
+        margin-bottom: 1.2rem;
+        font-size: 1.08rem;
+        color: #48525e;
+      }
+
+      .a-line {
+        @include ellipsis;
+      }
+
+      .sum {
+        font-size: 0.9rem;
+        color: #6d7c8e;
+        @include ellipsis;
+      }
+
+      .date {
+        margin-top: 1.2rem;
+        font-size: 0.72rem;
+        color: #c4ccd7;
+      }
     }
-    .card-list {
-        width: 600px;
-        li {
-            display: flex;
-            align-items: center;
-            padding: 6px;
-            margin-bottom: 7px;
-            background-color: #fff;
-            cursor: pointer;
-            transition: 0.3s;
-            &:last-child {
-                margin-bottom: 0;
-            }
-            &:hover {
-                transform: translateX(20px);
-            }
-        }
-        .pic {
-            width: 10.4375rem;
-            height: 10.4375rem;
-            margin-right: 1.8rem;
-            object-fit: cover;
-        }
-        .texts {
-            width: calc(100% - 12.5rem);
-        }
-        h6 {
-            margin-bottom: 10px;
-            font-size: 0.96rem;
-            color: #333;
-            @include ellipsis;
-        }
-        .sum {
-            margin-bottom: 6px;
-            font-size: 0.8rem;
-            color: #666;
-            @include ellipsis;
-        }
-        .text {
-            display: flex;
-            align-items: center;
-            margin: 0.5rem 0;
-            font-size: 0.72rem;
-            @include ellipsis;
-        }
-        .icon {
-            margin-right: 5px;
-        }
+
+    h6 {
+      font-size: 24px;
+      color: #272727;
     }
-}
 
-.media {
-    background: #fff;
-    .media-wrap {
-        display: flex;
+    .des {
+      margin-top: 10px;
+      font-size: 16px;
+      color: #666;
+      line-height: 30px;
     }
-    .left {
-        width: 55%;
-        margin-right: 1%;
-        .slides {
-            display: flex;
-            margin-bottom: 20px;
-        }
-        .item {
-            position: relative;
-            flex: 1;
-            height: 10rem;
-            overflow: hidden;
-            cursor: pointer;
-            img {
-                width: 100%;
-                height: 100%;
-                transition: 0.5s;
-                object-fit: cover;
-            }
-            .text {
-                position: absolute;
-                bottom: 0;
-                left: 0;
-                width: 100%;
-                padding: 0 1.35rem;
-                line-height: 2.5rem;
-                font-size: 0.8rem;
-                color: #ffffff;
-                @include ellipsis;
-                background-color: rgba(0, 0, 0, 0.49);
-            }
-            &:hover {
-                img {
-                    transform: scale(1.3);
-                }
-            }
-        }
-        .list {
-            padding: 1.7rem 1.8rem;
-            background: #fff;
-            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
-            li {
-                margin-bottom: 2rem;
-                transition: 0.5s;
-                cursor: pointer;
-                &:last-child {
-                    margin-bottom: 0;
-                }
-                &:hover {
-                    transform: scale(1.05);
-                }
-            }
-            h6 {
-                margin-bottom: 0.85rem;
-                font-size: 0.88rem;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #272727;
-                line-height: 1rem;
-                text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
-                @include ellipsis;
-            }
-            .des {
-                font-size: 0.9rem;
-                color: #666;
-                -webkit-line-clamp: 2;
-            }
-        }
+  }
+
+  .right {
+    width: 50%;
+  }
+
+  .card-list {
+    li {
+      display: flex;
+      align-items: center;
+      padding: 0.95rem;
+      margin-bottom: 0.9rem;
+      background-color: #fff;
+      transition: 0.3s;
+      cursor: pointer;
+
+      &:hover {
+        transform: scale(1.05);
+      }
     }
-    .right {
-        width: 44%;
-        box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
-        transition: 0.5s;
-        cursor: pointer;
-        .img-wrap {
-            width: 100%;
-            height: 21.1rem;
-            overflow: hidden;
-        }
-        img {
-            width: 100%;
-            height: 100%;
-            transition: 0.5s;
-            object-fit: cover;
-        }
-        .texts {
-            padding: 2rem 1.4rem;
-        }
-        h6 {
-            font-size: 0.96rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #272727;
-            line-height: 1.95rem;
-            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
-            @include ellipsis;
-        }
-        .des {
-            margin-top: 1rem;
-            font-size: 0.8rem;
-            color: #666;
-            -webkit-line-clamp: 2;
-        }
-        &:hover {
-            background: #005388;
-            h6,
-            .des {
-                color: #fff;
-            }
-            img {
-                transform: scale(1.3);
-            }
-        }
+
+    .releaseTime {
+      width: 4.4rem;
+      height: 4.4rem;
+      padding: 0.5rem 0 0.8rem;
+      margin-right: 1.2rem;
+      text-align: center;
     }
-}
-.news {
-    background: url(../../assets/images/sfel/5.png) (0 504px) / auto no-repeat,
-        url(../../assets/images/sfel/6.png) (bottom right) / auto no-repeat;
-}
-.news {
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    li {
-        position: relative;
-        // width: calc((100% - 56px) / 3);
-        flex: 1;
-        padding: 0.55rem;
-        margin-right: 1.4rem;
-        color: #333;
-        background-color: #fff;
-        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
-        border-radius: 10px;
-        transition: 0.3s;
-        &:hover {
-            transform: translateY(20px);
-        }
-        &:nth-child(3n) {
-            margin-right: 0;
-        }
-        &:hover {
-            color: #fff;
-            background-color: #0252d9;
-        }
+
+    .d {
+      font-size: 1.9rem;
+      font-family: DINCondensed-Bold, DINCondensed;
+      font-weight: bold;
+      color: #333333;
+      line-height: 2.15rem;
     }
-    img {
-        width: 100%;
-        height: 24.05rem;
-        object-fit: cover;
+
+    .m {
+      font-size: 1.02rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #666666;
+      line-height: 1rem;
     }
+
     .texts {
-        padding: 0 0.9rem 2.5rem;
+      width: calc(100% - 110px);
     }
+
     h6 {
-        margin: 1.75rem 0 0.6rem;
-        font-size: 1.05rem;
-        line-height: 1.65rem;
+      margin-bottom: 0.5rem;
+      font-size: 1.08rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #1583ff;
+      @include ellipsis;
     }
+
     .des {
-        font-size: 0.8rem;
-        line-height: 1.3rem;
-    }
-}
-.program {
-    background: #fff;
-    .slide {
-        display: flex;
-        margin-bottom: 0.7rem;
-        cursor: pointer;
-    }
-    .texts {
-        width: 51%;
-        padding: 2.8rem;
-        background: #fbfbfb;
-        h6 {
-            font-size: 1.04rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #333333;
-        }
-        .des {
-            margin: 1.75rem 0 1.25rem;
-            font-size: 1rem;
-            color: #666;
-            line-height: 1.6rem;
-        }
-        .meta {
-            font-size: 0.72rem;
-            color: #666;
-        }
-    }
-    .img-wrap {
-        width: 49%;
-        height: auto;
-        overflow: hidden;
+      font-size: 0.9rem;
+      color: #666;
+      line-height: 1.2rem;
+      -webkit-line-clamp: 2;
     }
+  }
+
+  .slide {
+    position: relative;
+    height: 24.4rem;
+    overflow: hidden;
+    cursor: pointer;
+
     .pic {
-        width: 100%;
-        height: 100%;
-        transition: 0.5s;
-        object-fit: cover;
-    }
-    &:hover {
-        .pic {
-            transform: scale(1.3);
-        }
-    }
-    .list {
-        display: flex;
-        li {
-            // width: calc((100% - 28px) / 3);
-            flex: 1;
-            padding: 1.8rem 1.1rem;
-            margin-right: 0.7rem;
-            background: url(../../assets/images/sfel/7.png) no-repeat center;
-            background-size: 100% 100%;
-            transition: 0.5s;
-            cursor: pointer;
-            &:nth-child(2) {
-                background-image: url(../../assets/images/sfel/8.png);
-            }
-            &:nth-child(3) {
-                margin-right: 0;
-                background-image: url(../../assets/images/sfel/9.png);
-            }
-            &:hover {
-                transform: translateY(20px);
-            }
-        }
-        .des {
-            margin-bottom: 1.5rem;
-            font-size: 1rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
-            line-height: 30px;
-            word-break: break-all;
-        }
-        .date {
-            font-size: 0.72rem;
-            font-family: LaoSangamMN;
-            color: #ffffff;
-        }
+      width: 100%;
+      height: 100%;
+      transition: 0.5s;
+      object-fit: cover;
     }
-}
-.tools {
-    z-index: 9;
-    position: fixed;
-    top: 12.5rem;
-    left: 0;
-    width: 9.4rem;
-    text-align: center;
-    .logo {
-        padding: 15px 0;
-        background: #0c60be;
-        box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
-    }
-    .nav {
-        li {
-            padding: 0 10px;
-            font-size: 0.88rem;
-            line-height: 2.5rem;
-            color: #fff;
-            background-color: #1d1d1d;
-            cursor: pointer;
-            @include ellipsis;
-            &.active {
-                background-color: #1583ff;
-            }
-            &:hover {
-                background-color: #1583ff;
-            }
-        }
+
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 0.6rem;
+      line-height: 3rem;
+      font-size: 0.8rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      background-color: rgba(0, 0, 0, 0.57);
     }
-}
 
-@media (max-width: 1520px) {
-    .conference .card-list {
-        width: 734px;
-        .texts {
-            width: 460px;
-        }
+    &:hover {
+      .pic {
+        transform: scale(1.3);
+      }
     }
+  }
 }
-@media (max-width: 1200px) {
-    .tools {
-        display: none;
-    }
-    .sfel-banner {
-        flex-direction: column;
-        .newBox {
-            width: 100% !important;
-        }
-        .right {
-            margin-top: 10px;
-            width: 100%;
-            height: 410px;
-        }
+
+.conference {
+  background: url(../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
+
+  .shows {
+    display: flex;
+  }
+
+  .left {
+    position: relative;
+    width: 34.375rem;
+    height: auto;
+    margin-right: 20px;
+    cursor: pointer;
+    overflow: hidden;
+
+    .text {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 0 0.6rem;
+      line-height: 3rem;
+      font-size: 0.8rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      background-color: rgba(0, 0, 0, 0.57);
     }
-    .card {
-        flex-direction: column;
-        li {
-            width: 100%;
-            margin-top: 20px;
-        }
+
+    .pic {
+      transition: 0.5s;
+      object-fit: cover;
     }
-    .shop-shows {
-        flex-direction: column;
-        .left {
-            width: 100%;
-        }
-        .right {
-            width: 100%;
-            margin-top: 20px;
-        }
+
+    &:hover {
+      .pic {
+        transform: scale(1.3);
+      }
     }
-    .shows {
-        flex-direction: column;
-        .left {
-            width: 100%;
-        }
-        .card-list {
-            width: 100%;
-            margin-top: 20px;
-            li {
-                flex-direction: column;
-                .pic {
-                    width: 100% !important;
-                    margin-right: 0;
-                }
-                .texts {
-                    margin-top: 20px;
-                    width: 100%;
-                }
-            }
-        }
+  }
+
+  .card-list {
+    width: 600px;
+
+    li {
+      display: flex;
+      align-items: center;
+      padding: 6px;
+      margin-bottom: 7px;
+      background-color: #fff;
+      cursor: pointer;
+      transition: 0.3s;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      &:hover {
+        transform: translateX(20px);
+      }
     }
-    .media-wrap {
-        flex-direction: column;
-        .left {
-            width: 100%;
-        }
-        .right {
-            width: 100%;
-            margin-top: 20px;
-        }
+
+    .pic {
+      width: 10.4375rem;
+      height: 10.4375rem;
+      margin-right: 1.8rem;
+      object-fit: cover;
     }
-    .news {
-        flex-direction: column;
-        li {
-            margin-top: 30px;
-            width: 100%;
-        }
+
+    .texts {
+      width: calc(100% - 12.5rem);
     }
-    .slide,
-    .list {
-        flex-direction: column;
-        .texts,
-        .img-wrap {
-            width: 100%;
-        }
+
+    h6 {
+      margin-bottom: 10px;
+      font-size: 0.96rem;
+      color: #333;
+      @include ellipsis;
     }
-    .list {
-        li {
-            width: 100% !important;
-            margin-top: 20px;
-        }
+
+    .sum {
+      margin-bottom: 6px;
+      font-size: 0.8rem;
+      color: #666;
+      @include ellipsis;
     }
-    .slides {
-        div {
-            flex: 1;
-        }
+
+    .text {
+      display: flex;
+      align-items: center;
+      margin: 0.5rem 0;
+      font-size: 0.72rem;
+      @include ellipsis;
     }
-    #part6 {
-        .slide {
-            .texts {
-                height: auto;
-            }
-        }
+
+    .icon {
+      margin-right: 5px;
     }
+  }
 }
-@media (min-width: 280px) and (max-width: 1200px) {
-    .block {
-        padding: 2rem 0;
+
+.media {
+  background: #fff;
+
+  .media-wrap {
+    display: flex;
+  }
+
+  .left {
+    width: 55%;
+    margin-right: 1%;
+
+    .slides {
+      display: flex;
+      margin-bottom: 20px;
     }
-    .shop-shows {
-        .slide {
-            height: 18rem;
+
+    .item {
+      position: relative;
+      flex: 1;
+      height: 10rem;
+      overflow: hidden;
+      cursor: pointer;
+
+      img {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
+        object-fit: cover;
+      }
+
+      .text {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        padding: 0 1.35rem;
+        line-height: 2.5rem;
+        font-size: 0.8rem;
+        color: #ffffff;
+        @include ellipsis;
+        background-color: rgba(0, 0, 0, 0.49);
+      }
+
+      &:hover {
+        img {
+          transform: scale(1.3);
         }
+      }
     }
-    .wrap {
-        /deep/ .el-carousel {
-            height: 18rem;
-            img {
-                height: 18rem;
-            }
+
+    .list {
+      padding: 1.7rem 1.8rem;
+      background: #fff;
+      box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+
+      li {
+        margin-bottom: 2rem;
+        transition: 0.5s;
+        cursor: pointer;
+
+        &:last-child {
+          margin-bottom: 0;
         }
-        /deep/ .el-carousel__container {
-            height: 18rem !important;
+
+        &:hover {
+          transform: scale(1.05);
         }
+      }
+
+      h6 {
+        margin-bottom: 0.85rem;
+        font-size: 0.88rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #272727;
+        line-height: 1rem;
+        text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+        @include ellipsis;
+      }
+
+      .des {
+        font-size: 0.9rem;
+        color: #666;
+        -webkit-line-clamp: 2;
+      }
     }
-    .sfel-banner {
-        .newBox {
-            height: 20rem !important;
-        }
-        .right {
-            padding: 1.25rem;
-            height: 20rem;
-        }
+  }
+
+  .right {
+    width: 44%;
+    box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
+    transition: 0.5s;
+    cursor: pointer;
+
+    .img-wrap {
+      width: 100%;
+      height: 21.1rem;
+      overflow: hidden;
     }
-    .conference {
-        .left {
-            height: 20rem;
-        }
+
+    img {
+      width: 100%;
+      height: 100%;
+      transition: 0.5s;
+      object-fit: cover;
     }
-    .card-list {
-        li {
-            .pic {
-                height: 15rem !important;
-            }
-        }
+
+    .texts {
+      padding: 2rem 1.4rem;
     }
-    .slides {
-        .item {
-            height: 10rem !important;
-        }
+
+    h6 {
+      font-size: 0.96rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #272727;
+      line-height: 1.95rem;
+      text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
+      @include ellipsis;
     }
-    .img-wrap {
-        height: 20rem !important;
+
+    .des {
+      margin-top: 1rem;
+      font-size: 0.8rem;
+      color: #666;
+      -webkit-line-clamp: 2;
     }
-    .news {
-        .wow {
-            img {
-                height: 20rem;
-            }
-        }
+
+    &:hover {
+      background: #005388;
+
+      h6,
+      .des {
+        color: #fff;
+      }
+
+      img {
+        transform: scale(1.3);
+      }
     }
+  }
+}
+
+.news {
+  background: url(../../assets/images/sfel/5.png) (0 504px) / auto no-repeat,
+    url(../../assets/images/sfel/6.png) (bottom right) / auto no-repeat;
+}
+
+.news {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  li {
+    position: relative;
+    // width: calc((100% - 56px) / 3);
+    flex: 1;
+    padding: 0.55rem;
+    margin-right: 1.4rem;
+    color: #333;
+    background-color: #fff;
+    box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+    border-radius: 10px;
+    transition: 0.3s;
+
+    &:hover {
+      transform: translateY(20px);
+    }
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+
+    &:hover {
+      color: #fff;
+      background-color: #0252d9;
+    }
+  }
+
+  img {
+    width: 100%;
+    height: 24.05rem;
+    object-fit: cover;
+  }
+
+  .texts {
+    padding: 0 0.9rem 2.5rem;
+  }
+
+  h6 {
+    margin: 1.75rem 0 0.6rem;
+    font-size: 1.05rem;
+    line-height: 1.65rem;
+  }
+
+  .des {
+    font-size: 0.8rem;
+    line-height: 1.3rem;
+  }
+}
+
+.program {
+  background: #fff;
+
+  .slide {
+    display: flex;
+    margin-bottom: 0.7rem;
+    cursor: pointer;
+  }
+
+  .texts {
+    width: 51%;
+    padding: 2.8rem;
+    background: #fbfbfb;
+
+    h6 {
+      font-size: 1.04rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #333333;
+    }
+
+    .des {
+      margin: 1.75rem 0 1.25rem;
+      font-size: 1rem;
+      color: #666;
+      line-height: 1.6rem;
+    }
+
+    .meta {
+      font-size: 0.72rem;
+      color: #666;
+    }
+  }
+
+  .img-wrap {
+    width: 49%;
+    height: auto;
+    overflow: hidden;
+  }
+
+  .pic {
+    width: 100%;
+    height: 100%;
+    transition: 0.5s;
+    object-fit: cover;
+  }
+
+  &:hover {
+    .pic {
+      transform: scale(1.3);
+    }
+  }
+
+  .list {
+    display: flex;
+
+    li {
+      // width: calc((100% - 28px) / 3);
+      flex: 1;
+      padding: 1.8rem 1.1rem;
+      margin-right: 0.7rem;
+      background: url(../../assets/images/sfel/7.png) no-repeat center;
+      background-size: 100% 100%;
+      transition: 0.5s;
+      cursor: pointer;
+
+      &:nth-child(2) {
+        background-image: url(../../assets/images/sfel/8.png);
+      }
+
+      &:nth-child(3) {
+        margin-right: 0;
+        background-image: url(../../assets/images/sfel/9.png);
+      }
+
+      &:hover {
+        transform: translateY(20px);
+      }
+    }
+
+    .des {
+      margin-bottom: 1.5rem;
+      font-size: 1rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 30px;
+      word-break: break-all;
+    }
+
+    .date {
+      font-size: 0.72rem;
+      font-family: LaoSangamMN;
+      color: #ffffff;
+    }
+  }
+}
+
+.tools {
+  z-index: 9;
+  position: fixed;
+  top: 12.5rem;
+  left: 0;
+  width: 9.4rem;
+  text-align: center;
+
+  .logo {
+    padding: 15px 0;
+    background: #0c60be;
+    box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
+  }
+
+  .nav {
+    li {
+      padding: 0 10px;
+      font-size: 0.88rem;
+      line-height: 2.5rem;
+      color: #fff;
+      background-color: #1d1d1d;
+      cursor: pointer;
+      @include ellipsis;
+
+      &.active {
+        background-color: #1583ff;
+      }
+
+      &:hover {
+        background-color: #1583ff;
+      }
+    }
+  }
+}
+
+@media (max-width: 1520px) {
+  .conference .card-list {
+    width: 734px;
+
+    .texts {
+      width: 460px;
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .tools {
+    display: none;
+  }
+
+  .sfel-banner {
+    flex-direction: column;
+
+    .newBox {
+      width: 100% !important;
+    }
+
+    .right {
+      margin-top: 10px;
+      width: 100%;
+      height: 410px;
+    }
+  }
+
+  .card {
+    flex-direction: column;
+
+    li {
+      width: 100%;
+      margin-top: 20px;
+    }
+  }
+
+  .shop-shows {
+    flex-direction: column;
+
+    .left {
+      width: 100%;
+    }
+
+    .right {
+      width: 100%;
+      margin-top: 20px;
+    }
+  }
+
+  .shows {
+    flex-direction: column;
+
+    .left {
+      width: 100%;
+    }
+
+    .card-list {
+      width: 100%;
+      margin-top: 20px;
+
+      li {
+        flex-direction: column;
+
+        .pic {
+          width: 100% !important;
+          margin-right: 0;
+        }
+
+        .texts {
+          margin-top: 20px;
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .media-wrap {
+    flex-direction: column;
+
+    .left {
+      width: 100%;
+    }
+
+    .right {
+      width: 100%;
+      margin-top: 20px;
+    }
+  }
+
+  .news {
+    flex-direction: column;
+
+    li {
+      margin-top: 30px;
+      width: 100%;
+    }
+  }
+
+  .slide,
+  .list {
+    flex-direction: column;
+
+    .texts,
+    .img-wrap {
+      width: 100%;
+    }
+  }
+
+  .list {
+    li {
+      width: 100% !important;
+      margin-top: 20px;
+    }
+  }
+
+  .slides {
+    div {
+      flex: 1;
+    }
+  }
+
+  #part6 {
+    .slide {
+      .texts {
+        height: auto;
+      }
+    }
+  }
+}
+
+@media (min-width: 280px) and (max-width: 1200px) {
+  .block {
+    padding: 2rem 0;
+  }
+
+  .shop-shows {
+    .slide {
+      height: 18rem;
+    }
+  }
+
+  .wrap {
+    /deep/ .el-carousel {
+      height: 18rem;
+
+      img {
+        height: 18rem;
+      }
+    }
+
+    /deep/ .el-carousel__container {
+      height: 18rem !important;
+    }
+  }
+
+  .sfel-banner {
+    .newBox {
+      height: 20rem !important;
+    }
+
+    .right {
+      padding: 1.25rem;
+      height: 20rem;
+    }
+  }
+
+  .conference {
+    .left {
+      height: 20rem;
+    }
+  }
+
+  .card-list {
+    li {
+      .pic {
+        height: 15rem !important;
+      }
+    }
+  }
+
+  .slides {
+    .item {
+      height: 10rem !important;
+    }
+  }
+
+  .img-wrap {
+    height: 20rem !important;
+  }
+
+  .news {
+    .wow {
+      img {
+        height: 20rem;
+      }
+    }
+  }
 }
+
 @media (max-width: 320px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 12rem;
+  .wrap {
+    /deep/ .el-carousel {
+      height: 12rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 12rem !important;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 12rem;
+
+      img {
+        height: 12rem;
+      }
+    }
+  }
+
+  .block {
+    .inner {
+      width: 90%;
+
+      .title {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+
+        h5 {
+          font-size: 1rem;
+
+          span {
+            font-size: 0.75rem;
+          }
+        }
+
+        span {
+          font-size: 0.85rem;
+        }
+      }
+
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
+        }
+
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all;
+          }
+
+          .des {
+            font-size: 0.9rem;
+            margin: 1rem 0;
+          }
+
+          .meta {
+            font-size: 0.8rem;
+          }
+        }
+      }
+
+      .card {
+        margin-top: 1.25rem;
+
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+
+      .shop-shows {
+        .slide {
+          height: auto;
+
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+
+      .shows {
+        .left {
+          height: auto;
+
+          .text {
+            line-height: 2rem;
+            font-size: 0.95rem;
+          }
+        }
+
+        .card-list {
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+
+      .media-wrap {
+        .right {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+
+      .news {
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+
+      .slide {
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+    }
+  }
+
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          // height: auto !important;
+          height: 8rem;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 320px) and (max-width: 375px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 15rem !important;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    .inner {
+      width: 90%;
+
+      .title {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+
+        h5 {
+          font-size: 1rem;
+
+          span {
+            font-size: 0.75rem;
+          }
+        }
+
+        span {
+          font-size: 0.85rem;
+        }
+      }
+
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
+        }
+
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all;
+          }
+
+          .des {
+            font-size: 0.9rem;
+            margin: 1rem 0;
+          }
+
+          .meta {
+            font-size: 0.8rem;
+          }
+        }
+      }
+
+      .card {
+        margin-top: 1.25rem;
+
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+
+      .shop-shows {
+        .slide {
+          height: auto;
+
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+
+      .shows {
+        .left {
+          height: auto;
+
+          .text {
+            line-height: 2rem;
+            font-size: 0.95rem;
+          }
+        }
+
+        .card-list {
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+
+      .media-wrap {
+        .right {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+
+      .news {
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+
+      .slide {
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+    }
+  }
+
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          // height: auto !important;
+          height: 8rem;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 375px) and (max-width: 480px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 15rem !important;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    .inner {
+      width: 90%;
+
+      .title {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+
+        h5 {
+          font-size: 1rem;
+
+          span {
+            font-size: 0.75rem;
+          }
+        }
+
+        span {
+          font-size: 0.85rem;
+        }
+      }
+
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
+        }
+
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all;
+          }
+
+          .des {
+            font-size: 0.9rem;
+            margin: 1rem 0;
+          }
+
+          .meta {
+            font-size: 0.8rem;
+          }
+        }
+      }
+
+      .card {
+        margin-top: 1.25rem;
+
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+
+      .shop-shows {
+        .slide {
+          height: auto;
+
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+
+      .shows {
+        .left {
+          height: auto;
+
+          .text {
+            line-height: 2rem;
+            font-size: 0.95rem;
+          }
+        }
+
+        .card-list {
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
+        }
+      }
+
+      .media-wrap {
+        .right {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+
+      .news {
+        li {
+          img {
+            // height: auto;
+          }
+        }
+      }
+
+      .slide {
+        .img-wrap {
+          height: auto !important;
+        }
+      }
+    }
+  }
+
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
+        }
+      }
+    }
+  }
+}
+
+@media (min-width: 480px) and (max-width: 640px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 15rem !important;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    .inner {
+      width: 90%;
+
+      .title {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+
+        h5 {
+          font-size: 1rem;
+
+          span {
+            font-size: 0.75rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 12rem !important;
+
+        span {
+          font-size: 0.85rem;
         }
-        /deep/ .el-carousel__item {
-            height: 12rem;
-            img {
-                height: 12rem;
-            }
+      }
+
+      .sfel-banner {
+        .newBox {
+          height: auto !important;
         }
-    }
-    .block {
-        .inner {
-            width: 90%;
-            .title {
-                padding-bottom: 1rem;
-                margin-bottom: 1rem;
-                h5 {
-                    font-size: 1rem;
-                    span {
-                        font-size: 0.75rem;
-                    }
-                }
-                span {
-                    font-size: 0.85rem;
-                }
-            }
-            .sfel-banner {
-                .newBox {
-                    height: auto !important;
-                }
-                .right {
-                    h6 {
-                        font-size: 1.072rem;
-                        word-break: break-all;
-                    }
-                    .des {
-                        font-size: 0.9rem;
-                        margin: 1rem 0;
-                    }
-                    .meta {
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-            .card {
-                margin-top: 1.25rem;
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .slide {
-                    height: auto;
-                    p {
-                        line-height: 1.7rem;
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    height: auto;
-                    .text {
-                        line-height: 2rem;
-                        font-size: 0.95rem;
-                    }
-                }
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-            .media-wrap {
-                .right {
-                    .img-wrap {
-                        height: auto !important;
-                    }
-                }
-            }
-            .news {
-                li {
-                    img {
-                        height: auto;
-                    }
-                }
-            }
-            .slide {
-                .img-wrap {
-                    height: auto !important;
-                }
-            }
+
+        .right {
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all;
+          }
+
+          .des {
+            font-size: 0.9rem;
+            margin: 1rem 0;
+          }
+
+          .meta {
+            font-size: 0.8rem;
+          }
         }
-    }
-    .media-wrap {
+      }
+
+      .card {
+        margin-top: 1.25rem;
+
+        li {
+          .pic {
+            height: auto;
+          }
+        }
+      }
+
+      .shop-shows {
+        .slide {
+          height: auto;
+
+          p {
+            line-height: 1.7rem;
+          }
+        }
+      }
+
+      .shows {
         .left {
-            .slides {
-                .item {
-                    // height: auto !important;
-                    height: 8rem;
-                }
+          height: auto;
+
+          .text {
+            line-height: 2rem;
+            font-size: 0.95rem;
+          }
+        }
+
+        .card-list {
+          li {
+            .pic {
+              height: auto !important;
             }
+          }
         }
-    }
-}
-@media (min-width: 320px) and (max-width: 375px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
+      }
+
+      .media-wrap {
+        .right {
+          .img-wrap {
+            height: auto !important;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 15rem !important;
+      }
+
+      .news {
+        li {
+          img {
+            height: auto;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
-            }
+      }
+
+      .slide {
+        .img-wrap {
+          height: auto !important;
         }
+      }
     }
-    .block {
-        .inner {
-            width: 90%;
-            .title {
-                padding-bottom: 1rem;
-                margin-bottom: 1rem;
-                h5 {
-                    font-size: 1rem;
-                    span {
-                        font-size: 0.75rem;
-                    }
-                }
-                span {
-                    font-size: 0.85rem;
-                }
-            }
-            .sfel-banner {
-                .newBox {
-                    height: auto !important;
-                }
-                .right {
-                    h6 {
-                        font-size: 1.072rem;
-                        word-break: break-all;
-                    }
-                    .des {
-                        font-size: 0.9rem;
-                        margin: 1rem 0;
-                    }
-                    .meta {
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-            .card {
-                margin-top: 1.25rem;
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .slide {
-                    height: auto;
-                    p {
-                        line-height: 1.7rem;
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    height: auto;
-                    .text {
-                        line-height: 2rem;
-                        font-size: 0.95rem;
-                    }
-                }
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-            .media-wrap {
-                .right {
-                    .img-wrap {
-                        height: auto !important;
-                    }
-                }
-            }
-            .news {
-                li {
-                    img {
-                        height: auto;
-                    }
-                }
-            }
-            .slide {
-                .img-wrap {
-                    height: auto !important;
-                }
-            }
+  }
+
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
         }
+      }
+    }
+  }
+}
+
+@media (min-width: 640px) and (max-width: 768px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
     }
-    .media-wrap {
+
+    /deep/ .el-carousel__container {
+      height: 15rem !important;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    .inner {
+      width: 90%;
+
+      .title {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+
+        h5 {
+          font-size: 1rem;
+
+          span {
+            font-size: 0.75rem;
+          }
+        }
+
+        span {
+          font-size: 0.85rem;
+        }
+      }
+
+      .sfel-banner {
+        flex-direction: row;
+
+        .newBox {
+          height: auto !important;
+        }
+
+        .right {
+          margin-top: 0;
+
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all;
+          }
+
+          .des {
+            font-size: 0.9rem;
+            margin: 1rem 0;
+          }
+
+          .meta {
+            font-size: 0.8rem;
+          }
+        }
+      }
+
+      .card {
+        flex-direction: row;
+        margin-top: 1.25rem;
+
+        li {
+          width: calc((100% - 56px) / 3);
+
+          .pic {
+            height: auto;
+          }
+        }
+      }
+
+      .shop-shows {
+        flex-direction: row;
+
         .left {
-            .slides {
-                .item {
-                    // height: auto !important;
-                    height: 8rem;
-                }
-            }
+          width: 50%;
         }
-    }
-}
-@media (min-width: 375px) and (max-width: 480px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
+
+        .right {
+          width: 50%;
+          margin-top: 0;
+        }
+
+        .slide {
+          height: auto;
+
+          p {
+            line-height: 1.7rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 15rem !important;
+      }
+
+      .shows {
+        flex-direction: row;
+
+        .left {
+          width: 48%;
+
+          .text {
+            line-height: 2rem;
+            font-size: 0.95rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
+
+        .card-list {
+          width: 50%;
+          margin-top: 0;
+
+          li {
+            .pic {
+              height: auto !important;
             }
+          }
+        }
+      }
+
+      .media-wrap {
+        .right {
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+
+      .news {
+        flex-direction: row;
+
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+
+      .slide {
+        flex-direction: row;
+
+        .img-wrap {
+          height: auto !important;
         }
+      }
+
+      .list {
+        flex-direction: row;
+      }
     }
-    .block {
-        .inner {
-            width: 90%;
-            .title {
-                padding-bottom: 1rem;
-                margin-bottom: 1rem;
-                h5 {
-                    font-size: 1rem;
-                    span {
-                        font-size: 0.75rem;
-                    }
-                }
-                span {
-                    font-size: 0.85rem;
-                }
-            }
-            .sfel-banner {
-                .newBox {
-                    height: auto !important;
-                }
-                .right {
-                    h6 {
-                        font-size: 1.072rem;
-                        word-break: break-all;
-                    }
-                    .des {
-                        font-size: 0.9rem;
-                        margin: 1rem 0;
-                    }
-                    .meta {
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-            .card {
-                margin-top: 1.25rem;
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .slide {
-                    height: auto;
-                    p {
-                        line-height: 1.7rem;
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    height: auto;
-                    .text {
-                        line-height: 2rem;
-                        font-size: 0.95rem;
-                    }
-                }
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-            .media-wrap {
-                .right {
-                    .img-wrap {
-                        height: auto !important;
-                    }
-                }
-            }
-            .news {
-                li {
-                    img {
-                        // height: auto;
-                    }
-                }
-            }
-            .slide {
-                .img-wrap {
-                    height: auto !important;
-                }
-            }
+  }
+
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
         }
+      }
     }
-    .media-wrap {
-        .left {
-            .slides {
-                .item {
-                    height: auto !important;
-                }
-            }
+  }
+}
+
+@media (min-width: 768px) and (max-width: 980px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 15rem !important;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    .inner {
+      width: 90%;
+
+      .title {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+
+        h5 {
+          font-size: 1rem;
+
+          span {
+            font-size: 0.75rem;
+          }
+        }
+
+        span {
+          font-size: 0.85rem;
+        }
+      }
+
+      .sfel-banner {
+        flex-direction: row;
+
+        .newBox {
+          height: auto !important;
+        }
+
+        .right {
+          margin-top: 0;
+
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all;
+          }
+
+          .des {
+            font-size: 0.9rem;
+            margin: 1rem 0;
+          }
+
+          .meta {
+            font-size: 0.8rem;
+          }
         }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
+      }
+
+      .card {
+        flex-direction: row;
+        margin-top: 1.25rem;
+
+        li {
+          width: calc((100% - 56px) / 3);
+
+          .pic {
+            height: auto;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 15rem !important;
+      }
+
+      .shop-shows {
+        flex-direction: row;
+
+        .left {
+          width: 50%;
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
-            }
+
+        .right {
+          width: 50%;
+          margin-top: 0;
         }
-    }
-    .block {
-        .inner {
-            width: 90%;
-            .title {
-                padding-bottom: 1rem;
-                margin-bottom: 1rem;
-                h5 {
-                    font-size: 1rem;
-                    span {
-                        font-size: 0.75rem;
-                    }
-                }
-                span {
-                    font-size: 0.85rem;
-                }
-            }
-            .sfel-banner {
-                .newBox {
-                    height: auto !important;
-                }
-                .right {
-                    h6 {
-                        font-size: 1.072rem;
-                        word-break: break-all;
-                    }
-                    .des {
-                        font-size: 0.9rem;
-                        margin: 1rem 0;
-                    }
-                    .meta {
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-            .card {
-                margin-top: 1.25rem;
-                li {
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                .slide {
-                    height: auto;
-                    p {
-                        line-height: 1.7rem;
-                    }
-                }
-            }
-            .shows {
-                .left {
-                    height: auto;
-                    .text {
-                        line-height: 2rem;
-                        font-size: 0.95rem;
-                    }
-                }
-                .card-list {
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-            .media-wrap {
-                .right {
-                    .img-wrap {
-                        height: auto !important;
-                    }
-                }
-            }
-            .news {
-                li {
-                    img {
-                        height: auto;
-                    }
-                }
-            }
-            .slide {
-                .img-wrap {
-                    height: auto !important;
-                }
-            }
+
+        .slide {
+          height: auto;
+
+          p {
+            line-height: 1.7rem;
+          }
         }
-    }
-    .media-wrap {
+      }
+
+      .shows {
+        flex-direction: row;
+
         .left {
-            .slides {
-                .item {
-                    height: auto !important;
-                }
-            }
+          width: 48%;
+
+          .text {
+            line-height: 2rem;
+            font-size: 0.95rem;
+          }
         }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
+
+        .card-list {
+          width: 50%;
+          margin-top: 0;
+
+          li {
+            .pic {
+              height: auto !important;
+            }
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 15rem !important;
+      }
+
+      .media-wrap {
+        flex-direction: row;
+
+        .right {
+          margin-top: 0;
+
+          .img-wrap {
+            height: auto !important;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
-            }
+      }
+
+      .news {
+        flex-direction: row;
+
+        li {
+          img {
+            height: auto;
+          }
         }
-    }
-    .block {
-        .inner {
-            width: 90%;
-            .title {
-                padding-bottom: 1rem;
-                margin-bottom: 1rem;
-                h5 {
-                    font-size: 1rem;
-                    span {
-                        font-size: 0.75rem;
-                    }
-                }
-                span {
-                    font-size: 0.85rem;
-                }
-            }
-            .sfel-banner {
-                flex-direction: row;
-                .newBox {
-                    height: auto !important;
-                }
-                .right {
-                    margin-top: 0;
-                    h6 {
-                        font-size: 1.072rem;
-                        word-break: break-all;
-                    }
-                    .des {
-                        font-size: 0.9rem;
-                        margin: 1rem 0;
-                    }
-                    .meta {
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-            .card {
-                flex-direction: row;
-                margin-top: 1.25rem;
-                li {
-                    width: calc((100% - 56px) / 3);
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    width: 50%;
-                }
-                .right {
-                    width: 50%;
-                    margin-top: 0;
-                }
-                .slide {
-                    height: auto;
-                    p {
-                        line-height: 1.7rem;
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    width: 48%;
-                    .text {
-                        line-height: 2rem;
-                        font-size: 0.95rem;
-                    }
-                }
-                .card-list {
-                    width: 50%;
-                    margin-top: 0;
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-            .media-wrap {
-                .right {
-                    .img-wrap {
-                        height: auto !important;
-                    }
-                }
-            }
-            .news {
-                flex-direction: row;
-                li {
-                    img {
-                        height: auto;
-                    }
-                }
-            }
-            .slide {
-                flex-direction: row;
-                .img-wrap {
-                    height: auto !important;
-                }
-            }
-            .list {
-                flex-direction: row;
-            }
+      }
+
+      .slide {
+        flex-direction: row;
+
+        .img-wrap {
+          height: auto !important;
         }
+      }
+
+      .list {
+        flex-direction: row;
+      }
     }
-    .media-wrap {
-        .left {
-            .slides {
-                .item {
-                    height: auto !important;
-                }
-            }
+  }
+
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
         }
+      }
     }
+  }
 }
-@media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
+
+@media (min-width: 980px) and (max-width: 1200px) {
+  .wrap {
+    /deep/ .el-carousel {
+      height: 15rem;
+    }
+
+    /deep/ .el-carousel__container {
+      height: 15rem !important;
+    }
+
+    /deep/ .el-carousel__item {
+      height: 15rem;
+
+      img {
+        height: 15rem;
+      }
+    }
+  }
+
+  .block {
+    .inner {
+      width: 90%;
+
+      .title {
+        padding-bottom: 1rem;
+        margin-bottom: 1rem;
+
+        h5 {
+          font-size: 1rem;
+
+          span {
+            font-size: 0.75rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 15rem !important;
+
+        span {
+          font-size: 0.85rem;
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
-            }
+      }
+
+      .sfel-banner {
+        flex-direction: row;
+
+        .newBox {
+          height: auto !important;
         }
-    }
-    .block {
-        .inner {
-            width: 90%;
-            .title {
-                padding-bottom: 1rem;
-                margin-bottom: 1rem;
-                h5 {
-                    font-size: 1rem;
-                    span {
-                        font-size: 0.75rem;
-                    }
-                }
-                span {
-                    font-size: 0.85rem;
-                }
-            }
-            .sfel-banner {
-                flex-direction: row;
-                .newBox {
-                    height: auto !important;
-                }
-                .right {
-                    margin-top: 0;
-                    h6 {
-                        font-size: 1.072rem;
-                        word-break: break-all;
-                    }
-                    .des {
-                        font-size: 0.9rem;
-                        margin: 1rem 0;
-                    }
-                    .meta {
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-            .card {
-                flex-direction: row;
-                margin-top: 1.25rem;
-                li {
-                    width: calc((100% - 56px) / 3);
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    width: 50%;
-                }
-                .right {
-                    width: 50%;
-                    margin-top: 0;
-                }
-                .slide {
-                    height: auto;
-                    p {
-                        line-height: 1.7rem;
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    width: 48%;
-                    .text {
-                        line-height: 2rem;
-                        font-size: 0.95rem;
-                    }
-                }
-                .card-list {
-                    width: 50%;
-                    margin-top: 0;
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-            .media-wrap {
-                flex-direction: row;
-                .right {
-                    margin-top: 0;
-                    .img-wrap {
-                        height: auto !important;
-                    }
-                }
-            }
-            .news {
-                flex-direction: row;
-                li {
-                    img {
-                        height: auto;
-                    }
-                }
-            }
-            .slide {
-                flex-direction: row;
-                .img-wrap {
-                    height: auto !important;
-                }
-            }
-            .list {
-                flex-direction: row;
-            }
+
+        .right {
+          margin-top: 0;
+
+          h6 {
+            font-size: 1.072rem;
+            word-break: break-all;
+          }
+
+          .des {
+            font-size: 0.9rem;
+            margin: 1rem 0;
+          }
+
+          .meta {
+            font-size: 0.8rem;
+          }
         }
-    }
-    .media-wrap {
+      }
+
+      .card {
+        flex-direction: row;
+        margin-top: 1.25rem;
+
+        li {
+          width: calc((100% - 56px) / 3);
+
+          .pic {
+            height: auto;
+          }
+        }
+      }
+
+      .shop-shows {
+        flex-direction: row;
+
         .left {
-            .slides {
-                .item {
-                    height: auto !important;
-                }
-            }
+          width: 50%;
         }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 15rem;
+
+        .right {
+          width: 50%;
+          margin-top: 0;
+        }
+
+        .slide {
+          height: auto;
+
+          p {
+            line-height: 1.7rem;
+          }
         }
-        /deep/ .el-carousel__container {
-            height: 15rem !important;
+      }
+
+      .shows {
+        flex-direction: row;
+
+        .left {
+          width: 48%;
+
+          .text {
+            line-height: 2rem;
+            font-size: 0.95rem;
+          }
         }
-        /deep/ .el-carousel__item {
-            height: 15rem;
-            img {
-                height: 15rem;
+
+        .card-list {
+          width: 50%;
+          margin-top: 0;
+
+          li {
+            .pic {
+              height: auto !important;
             }
+          }
         }
-    }
-    .block {
-        .inner {
-            width: 90%;
-            .title {
-                padding-bottom: 1rem;
-                margin-bottom: 1rem;
-                h5 {
-                    font-size: 1rem;
-                    span {
-                        font-size: 0.75rem;
-                    }
-                }
-                span {
-                    font-size: 0.85rem;
-                }
-            }
-            .sfel-banner {
-                flex-direction: row;
-                .newBox {
-                    height: auto !important;
-                }
-                .right {
-                    margin-top: 0;
-                    h6 {
-                        font-size: 1.072rem;
-                        word-break: break-all;
-                    }
-                    .des {
-                        font-size: 0.9rem;
-                        margin: 1rem 0;
-                    }
-                    .meta {
-                        font-size: 0.8rem;
-                    }
-                }
-            }
-            .card {
-                flex-direction: row;
-                margin-top: 1.25rem;
-                li {
-                    width: calc((100% - 56px) / 3);
-                    .pic {
-                        height: auto;
-                    }
-                }
-            }
-            .shop-shows {
-                flex-direction: row;
-                .left {
-                    width: 50%;
-                }
-                .right {
-                    width: 50%;
-                    margin-top: 0;
-                }
-                .slide {
-                    height: auto;
-                    p {
-                        line-height: 1.7rem;
-                    }
-                }
-            }
-            .shows {
-                flex-direction: row;
-                .left {
-                    width: 48%;
-                    .text {
-                        line-height: 2rem;
-                        font-size: 0.95rem;
-                    }
-                }
-                .card-list {
-                    width: 50%;
-                    margin-top: 0;
-                    li {
-                        .pic {
-                            height: auto !important;
-                        }
-                    }
-                }
-            }
-            .media-wrap {
-                flex-direction: row;
-                .right {
-                    margin-top: 0;
-                    .img-wrap {
-                        height: auto !important;
-                    }
-                }
-            }
-            .news {
-                flex-direction: row;
-                li {
-                    img {
-                        height: auto;
-                    }
-                }
-            }
-            .slide {
-                flex-direction: row;
-                .img-wrap {
-                    height: auto !important;
-                }
-            }
-            .list {
-                flex-direction: row;
-            }
+      }
+
+      .media-wrap {
+        flex-direction: row;
+
+        .right {
+          margin-top: 0;
+
+          .img-wrap {
+            height: auto !important;
+          }
+        }
+      }
+
+      .news {
+        flex-direction: row;
+
+        li {
+          img {
+            height: auto;
+          }
+        }
+      }
+
+      .slide {
+        flex-direction: row;
+
+        .img-wrap {
+          height: auto !important;
         }
+      }
+
+      .list {
+        flex-direction: row;
+      }
     }
-    .media-wrap {
-        .left {
-            .slides {
-                .item {
-                    height: auto !important;
-                }
-            }
+  }
+
+  .media-wrap {
+    .left {
+      .slides {
+        .item {
+          height: auto !important;
         }
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/singlePage/index.vue b/src/pages/singlePage/index.vue
new file mode 100644
index 0000000..7fe5b23
--- /dev/null
+++ b/src/pages/singlePage/index.vue
@@ -0,0 +1,476 @@
+<template>
+  <div class="wrap">
+    <template v-if="modules.length">
+      <el-carousel class="carousel fadeInUp" :interval="6000" height="230px"
+        :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+        :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+        <template v-for="(item, i) in modules[0].list">
+          <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
+            <div v-if="!item.mediaType || isImg(item.mediaType)" class="pic"
+              :style="{ backgroundImage: 'url(' + item.pic + ')' }"></div>
+            <video v-else class="pic" width="100%" height="100%" autoplay muted loop>
+              <source :src="item.pic" type="video/mp4">
+              您的浏览器不支持 video 标签。
+            </video>
+            <div class="text-wrap">
+              <div class="qrcodes fadeInUp">
+                <div v-if="item.weixinPic1" class="qrcode">
+                  <img width="103" :src="item.weixinPic1" alt="">
+                  <p v-if="item.weixinText1" class="text">{{ item.weixinText1 }}</p>
+                </div>
+                <div v-if="item.weixinPic2" class="qrcode m-l-30">
+                  <img width="103" :src="item.weixinPic2" alt="">
+                  <p v-if="item.weixinText2" class="text">{{ item.weixinText2 }}</p>
+                </div>
+              </div>
+              <div class="text" v-html="item.des"></div>
+            </div>
+          </el-carousel-item>
+        </template>
+      </el-carousel>
+
+      <div class="block-bg">
+        <div class="block">
+          <div class="inner column-wrap">
+            <div class="item m-r-20">
+              <div class="title wow fadeInUp">
+                <h5>
+                  {{ modules[1].form.title }}
+                  <span class="sub">{{ modules[1].form.subTitle }}</span>
+                </h5>
+                <span class="more" @click="toAll(modules[2].form)">MORE</span>
+              </div>
+              <ul class="columns">
+                <li v-for="(item, i) in articles" :key="i">
+                  <p class="column-name" @click="toArtice(item, modules[2].form)">{{ item.title }}</p>
+                  <span class="meta">{{ item.releaseTime }}</span>
+                </li>
+              </ul>
+            </div>
+            <div class="item">
+              <div class="title wow fadeInUp">
+                <h5>
+                  {{ modules[3].form.title }}
+                  <span class="sub">{{ modules[3].form.subTitle }}</span>
+                </h5>
+                <span class="more" @click="toAll(modules[4].form)">MORE</span>
+              </div>
+              <ul class="columns">
+                <li v-for="(item, i) in articles1" :key="i">
+                  <p class="column-name" @click="toArtice(item, modules[4].form)">{{ item.title }}</p>
+                  <span class="meta">{{ item.releaseTime }}</span>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="block m-t-10 m-b-10">
+          <div class="inner">
+            <ul class="entry">
+              <template v-for="(item, i) in modules[5].list">
+                <li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }"
+                  @click="openLink(item, i)">
+                  <img class="icon" :src="item.pic" alt="">
+                  <p class="text">{{ item.title }}</p>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+
+        <div class="block">
+          <div class="inner links-inner">
+            <h6 class="link-title">友情链接</h6>
+            <ul class="links">
+              <template v-for="(item, i) in modules[6].list">
+                <li v-if="item.isEnable" :key="i">
+                  <el-link class="link" type="primary" @click="openLink(item, i)">{{ item.title }}</el-link>
+                </li>
+              </template>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import mixins from '@/mixins/page'
+import Setting from '@/setting'
+import Util from '@/libs/util'
+import WOW from 'wow.js'
+import $ from 'jquery'
+export default {
+  mixins: [mixins],
+  data () {
+    return {
+      isImg: Util.isImg,
+      articles: [],
+      articles1: [],
+    }
+  },
+  mounted () { },
+  methods: {
+    // 获取文章详情
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
+        if (data.length) {
+          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
+          const json = JSON.parse(this.preview ?
+            data :
+            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
+
+          this.modules = json
+          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
+
+          const promises = []
+          // 获取文章列表
+          if (json[2].form.column.length) {
+            const { column, articleNum } = json[2].form
+            promises.push(new Promise((resolve) => {
+              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+                this.articles = data.slice(0, articleNum || 8)
+                resolve()
+              }).catch(err => { })
+            }))
+          }
+
+          if (json[4].form.column.length) {
+            const { column, articleNum } = json[4].form
+            promises.push(new Promise((resolve) => {
+              this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+                this.articles1 = data.slice(0, articleNum || 8)
+                resolve()
+              }).catch(err => { })
+            }))
+          }
+
+          // 恢复上次从本页面跳转出去时的位置
+          Promise.all(promises).then(_ => {
+            this.$nextTick(() => {
+              const { scrollTop } = this.$store.state.content
+              if (scrollTop) {
+                this.hide = true
+                $(window).scrollTop(scrollTop)
+                this.$store.commit('content/setScrollTop', 0)
+              }
+            })
+          })
+          // this.carouselInterval()
+        }
+      }).catch(err => { })
+    },
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import url(../../plugins/wow/animate.css);
+@import '../../styles/page/page.scss';
+
+.carousel {
+  .pic {
+    height: 100%;
+    background-position: center center;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+  }
+
+  /deep/.el-carousel__container {
+    height: 100%;
+  }
+
+  .text-wrap {
+    position: absolute;
+    top: 55%;
+    left: 12%;
+    display: flex;
+    align-items: center;
+    color: #fff;
+    transform: translateY(-50%);
+  }
+
+  .qrcodes {
+    display: flex;
+    margin-right: 50px;
+  }
+
+  .qrcode {
+    text-align: center;
+
+    .text {
+      margin-top: 10px;
+      font-size: 12px;
+      color: #fff;
+      white-space: nowrap;
+    }
+  }
+}
+
+
+.block {
+  padding: 10px 0;
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.9rem;
+    border-bottom: 1px solid #ddd;
+    align-items: center;
+
+    h5 {
+      padding-left: 6px;
+      font-size: 1.2rem;
+      font-weight: 500;
+      color: #333;
+      line-height: 1;
+      border-left: 3px solid #2b96ef;
+    }
+
+    .sub {
+      font-size: 0.88rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      font-weight: 500;
+      color: #afb7bf;
+    }
+
+    .more {
+      font-size: 0.6rem;
+      color: #666;
+      cursor: pointer;
+    }
+  }
+}
+
+.block-bg {
+  min-height: calc(100vh - 320px);
+  background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
+}
+
+.column-wrap {
+  display: flex;
+
+  .item {
+    width: calc(100% - 20px);
+    padding: 14px;
+    background-color: #fff;
+    box-shadow: 0 0 7px rgba(239, 239, 239, .8);
+  }
+
+  li {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 15px;
+    margin-bottom: 10px;
+    border-bottom: 1px dashed #cbcbcb;
+  }
+
+  .column-name {
+    font-size: .9rem;
+    color: #333;
+    cursor: pointer;
+
+    &:hover {
+      color: $main-color;
+    }
+  }
+
+  .meta {
+    font-size: .8rem;
+  }
+}
+
+.links-inner {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  background-color: #fbfbfb;
+  border-radius: 4px;
+
+  .link-title {
+    position: relative;
+    padding: 10px 12px;
+    font-size: 1rem;
+    line-height: 1;
+    white-space: nowrap;
+    color: #fff;
+    background-color: $main-color;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 100%;
+      border: 18px solid transparent;
+      border-left-color: $main-color;
+    }
+  }
+
+  .links {
+    display: inline-flex;
+    flex: 1;
+    justify-content: space-around;
+    align-items: center;
+    flex-wrap: wrap;
+    margin-left: 20px;
+    font-size: .9rem;
+
+    .link {
+      display: block;
+      max-width: 200px;
+      @include ellipsis;
+    }
+  }
+}
+
+.inner {
+  width: 1200px;
+}
+
+.entry {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+
+  li {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  img {
+    max-width: 40px;
+    object-fit: cover;
+  }
+
+  .text {
+    margin-top: 10px;
+    font-size: 0.9rem;
+    color: #48525e;
+  }
+}
+
+.tools {
+  z-index: 10;
+  position: fixed;
+  top: 30vh;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  li {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 22px;
+    margin-bottom: 1px;
+    font-size: 20px;
+    color: #0084ff;
+    line-height: 56px;
+    background-color: rgba(19, 18, 19, 0.94);
+    cursor: pointer;
+    transition: 0.3s;
+
+    &:before {
+      content: '';
+      width: 28px;
+      height: 28px;
+      margin-right: 7px;
+      background: url(https://huorantech.com/images/iasf/icon1.png) no-repeat;
+    }
+
+    &:nth-child(2):before {
+      background-image: url(https://huorantech.com/images/iasf/icon2.png);
+    }
+
+    &:nth-child(2):hover:before {
+      background-image: url(https://huorantech.com/images/iasf/icon2-1.png);
+    }
+
+    &:nth-child(3):before {
+      background-image: url(https://huorantech.com/images/iasf/icon3.png);
+    }
+
+    &:nth-child(3):hover:before {
+      background-image: url(https://huorantech.com/images/iasf/icon3-1.png);
+    }
+
+    &:nth-child(4):before {
+      background-image: url(https://huorantech.com/images/iasf/icon4.png);
+    }
+
+    &:nth-child(4):hover:before {
+      background-image: url(https://huorantech.com/images/iasf/icon4-1.png);
+    }
+
+    &:hover {
+      justify-content: flex-start;
+      // width: 192px;
+      padding-right: 4rem;
+      color: #fff;
+      background-color: rgba(1, 129, 247, 0.94);
+
+      &:before {
+        background-image: url(https://huorantech.com/images/iasf/icon1-1.png);
+      }
+    }
+  }
+
+  .icon {
+    margin-right: 10px;
+  }
+}
+
+
+@media (max-width: 1200px) {
+  .carousel .texts {
+    left: 5%;
+    right: 5%;
+  }
+
+  .card {
+    flex-direction: column;
+
+    li {
+      margin-top: 1.25rem;
+      width: 100%;
+    }
+  }
+
+  .news {
+    flex-direction: column;
+
+    li {
+      width: 100%;
+    }
+  }
+
+  .news-banner {
+    flex-direction: column;
+
+    .pic-wrap,
+    .right {
+      width: 100%;
+    }
+  }
+
+  .entry {
+    // flex-direction: column;
+    flex-wrap: wrap;
+
+    li {
+      width: 48% !important;
+      margin-bottom: 30px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/team/index.vue b/src/pages/team/index.vue
index ad7ba47..9f2b3d1 100644
--- a/src/pages/team/index.vue
+++ b/src/pages/team/index.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="wrap p-b-30">
     <div class="single-banner single-banner-overview">
-      <img class="banner-img"
-           :src="modules[0].form.pic"
-           alt="">
+      <img class="banner-img" :src="modules[0].form.pic" alt="">
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
@@ -12,18 +10,13 @@
     <div class="content">
       <ul class="list">
         <template v-for="(item, i) in modules[1].list">
-          <li v-if="item.isEnable"
-              :key="i"
-              :class="{'cursor-pointer': isLink(item.link.linkName)}"
-              @click="openLink(item)">
-            <img :src="item.pic"
-                 alt=""
-                 class="pic">
+          <li v-if="item.isEnable" :key="i" :class="{ 'cursor-pointer': isLink(item.link.linkName) }"
+            @click="openLink(item)">
+            <img :src="item.pic" alt="" class="pic">
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <p class="job">{{ item.subTitle }}</p>
-              <div class="text"
-                   v-html="item.des"></div>
+              <div class="text" v-html="item.des"></div>
             </div>
           </li>
         </template>
@@ -77,68 +70,84 @@ export default {
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
 @import '../../styles/page/page.scss';
+
 .content {
-    display: flex;
-    width: 1200px;
-    justify-content: space-between;
-    .left {
-        width: calc(100% - 300px);
+  display: flex;
+  width: 1200px;
+  justify-content: space-between;
+
+  .left {
+    width: calc(100% - 300px);
+  }
+
+  .list {
+    li {
+      display: flex;
+      align-items: center;
+      padding-bottom: 30px;
+      margin-bottom: 30px;
+      border-bottom: 1px solid #ddd;
+
+      &:last-child {
+        border-bottom: 0;
+      }
     }
-    .list {
-        li {
-            display: flex;
-            align-items: center;
-            padding-bottom: 30px;
-            margin-bottom: 30px;
-            border-bottom: 1px solid #ddd;
-            &:last-child {
-                border-bottom: 0;
-            }
-        }
-        .pic {
-            width: 224px;
-            height: 268px;
-            margin-right: 25px;
-            object-fit: cover;
-        }
-        h6 {
-            font-size: 1.2rem;
-            font-family: PingFangSC-Medium, PingFang SC;
-            color: #333;
-        }
-        .job {
-            margin: 16px 0;
-            font-size: 1rem;
-            font-family: PingFangSC-Regular, PingFang SC;
-            color: #333;
-        }
-        .text {
-            font-size: 1rem;
-            font-family: PingFangSC-Regular, PingFang SC;
-            color: #333;
-        }
+
+    .pic {
+      width: 224px;
+      height: 268px;
+      margin-right: 25px;
+      object-fit: cover;
+    }
+
+    .texts {
+      width: calc(100% - 249px);
+    }
+
+    h6 {
+      font-size: 1.2rem;
+      font-family: PingFangSC-Medium, PingFang SC;
+      color: #333;
     }
+
+    .job {
+      margin: 16px 0;
+      font-size: 1rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+    }
+
+    .text {
+      font-size: 1rem;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #333;
+    }
+  }
 }
+
 @media (max-width: 1200px) {
-    .content {
-        width: 95%;
-        flex-direction: column;
-        .left,
-        .right {
-            width: 100%;
-        }
+  .content {
+    width: 95%;
+    flex-direction: column;
+
+    .left,
+    .right {
+      width: 100%;
     }
+  }
 }
+
 @media (max-width: 640px) {
-    .content {
-        .list {
-            li {
-                flex-direction: column;
-            }
-            .pic {
-                margin: 0 0 20px 0;
-            }
-        }
+  .content {
+    .list {
+      li {
+        flex-direction: column;
+      }
+
+      .pic {
+        margin: 0 0 20px 0;
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/router/modules/singlePage.js b/src/router/modules/singlePage.js
new file mode 100644
index 0000000..e92b744
--- /dev/null
+++ b/src/router/modules/singlePage.js
@@ -0,0 +1,14 @@
+import BasicLayout from '@/layouts/home'
+const name = 'singlePage'
+export default {
+  path: `/${name}`,
+  component: BasicLayout,
+  children: [
+    {
+      name,
+      path: `/${name}`,
+      component: () => import(`@/pages/${name}`),
+      meta: { title: '' }
+    }
+  ]
+};