样式修复

src/components/menuTree/index.vue

@@ -1,16 +1,26 @@
 <template>
   <div class="menu-child">
     <template v-for="item in this.menuList">
-      <el-submenu :popper-class="isHome ? 'home-menu-popup' : ''" :class="{active: $route.query.id == item.id}" :key="item.id" :index="String(item.id)" :id="item.id" v-if="item.children && item.children.length && item.children.find(i=>i.menuVisible !==1)">
+      <el-submenu :popper-class="isHome ? 'home-menu-popup' : ''"
+                  :class="{active: $route.query.id == item.id}"
+                  :key="item.id"
+                  :index="String(item.id)"
+                  :id="item.id"
+                  v-if="item.children && item.children.length && item.children.find(i=>i.menuVisible !==1)">
         <template slot="title">
-          <span slot="title" :id="item.id">{{item.columnName}}</span>
+          <span slot="title"
+                :id="item.id">{{item.columnName}}</span>
         </template>
         <menuTree :menuList="item.children"></menuTree>
       </el-submenu>
       <template v-else>
-        <template v-if="item.menuVisible!==1" >
-          <el-menu-item :key="item.id" :id="item.id" :index="String(item.id)" :class="{active: $route.query.id == item.id}" >
-          <span slot="title" :id="item.id">{{item.columnName}}</span>
+        <template v-if="item.menuVisible!==1">
+          <el-menu-item :key="item.id"
+                        :id="item.id"
+                        :index="String(item.id)"
+                        :class="{active: $route.query.id == item.id}">
+            <span slot="title"
+                  :id="item.id">{{item.columnName}}</span>
           </el-menu-item>
         </template>
       </template>
@@ -29,20 +39,19 @@ export default {
     }
   },
   computed: {
-    isHome() {
+    isHome () {
       return Util.isIndex()
     },
   },
   data () {
     return {}
   },
-  mounted () {},
+  mounted () { },
   methods: {}
 }
 </script>
 <style lang="scss" scoped>
-
-.menu-child{
+.menu-child {
     /deep/ .el-menu-item {
         background-color: transparent !important;
     }
@@ -50,11 +59,14 @@ export default {
     &:hover {
         background-color: transparent !important;
     }
-  }
-@media (min-width: 280px) and (max-width: 1200px) {
-  .menu-child{
+}
+@media (max-width: 1200px) {
+    .menu-child {
         /deep/ .el-menu-item {
-      height: 40px;line-height: 40px;color: black !important;background-color: transparent !important;
+            height: 40px;
+            line-height: 40px;
+            color: black !important;
+            background-color: transparent !important;
         }
 
         &:hover {
@@ -62,8 +74,11 @@ export default {
         }
     }
 
-  .el-submenu{
-    /deep/ .el-submenu__title{
+    .el-submenu {
+        &:focus-visible {
+            outline: none;
+        }
+        /deep/ .el-submenu__title {
             height: 40px;
             line-height: 40px;
             font-size: 1rem;

src/i18n/index.js

@@ -5,7 +5,6 @@ export const messages = {
       label: '主题',
       titlePlaceholder: '请输入搜索内容',
       selectPlaceholder: '请选择',
-      all: '不限',
       hot: '热点内容',
       latestNews: '最新资讯',
       views: '浏览',
@@ -77,7 +76,6 @@ export const messages = {
       label: 'Topic',
       titlePlaceholder: 'Please enter the search content',
       selectPlaceholder: 'Please Select',
-      all: 'All',
       hot: 'Most View',
       latestNews: 'Latest News',
       views: 'Views',

src/layouts/footer/index.vue

@@ -1,7 +1,46 @@
 <template>
   <div>
     <div v-if="showDefaultPath.includes($route.path)"
-         class="footer">
+         :class="['footer', {iasf: isIasf}]">
+      <ul v-if="isIasf"
+          class="entry">
+        <li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
+            @click="openLink(modules[14].form)">
+          <img class="icon"
+               :src="modules[14].form.pic"
+               alt="">
+          <p class="text">{{ modules[14].form.title }}</p>
+        </li>
+        <li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}"
+            @click="openLink(modules[15].form)">
+          <img class="icon"
+               :src="modules[15].form.pic"
+               alt="">
+          <p class="text">{{ modules[15].form.title }}</p>
+        </li>
+        <li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}"
+            @click="openLink(modules[16].form)">
+          <img class="icon"
+               :src="modules[16].form.pic"
+               alt="">
+          <p class="text">{{ modules[16].form.title }}</p>
+        </li>
+        <li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
+            @click="openLink(modules[17].form)">
+          <img class="icon"
+               :src="modules[17].form.pic"
+               alt="">
+          <p class="text">{{ modules[17].form.title }}</p>
+        </li>
+        <li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
+            @click="openLink(modules[18].form)">
+          <img class="icon"
+               :src="modules[18].form.pic"
+               alt="">
+          <p class="text">{{ modules[18].form.title }}</p>
+        </li>
+      </ul>
+
       <div class="info">
         <div class="leftBox">
           <img class="m-b-20"
@@ -79,9 +118,11 @@ export default {
   mixins: [mixins],
   data () {
     return {
+      isIasf: false,
       showDefaultPath: ['/home', '/iasf'], // 展示默认页脚的页面
       showContactPath: ['/news', '/sfel', '/talent', '/about', '/careers', '/edu', '/news'], // 展示联系我们页脚的页面
       columns: [],
+      modules: []
     };
   },
   computed: {
@@ -91,6 +132,18 @@ export default {
       return id == 3
     }
   },
+  watch: {
+    '$route': {
+      handler () {
+        if (this.$route.path === '/iasf') {
+          this.isIasf = true
+          this.getInfo()
+        }
+      },
+      deep: true,
+      immediate: true
+    },
+  },
   mounted () {
     this.getColumn()
   },
@@ -104,9 +157,87 @@ export default {
         typeId: '',
         isSort: 1
       }).then(({ data }) => {
-        this.columns = data.slice(0, 6)
+        this.columns = data.slice(0, 5)
+      }).catch(err => { })
+    },
+    // 获取iasf中文首页应用模块数据
+    getInfo () {
+      // 预览/详情
+      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.$route.query.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:177 ~ this.$post ~ json:", json)
+        }
       }).catch(err => { })
     },
+    // 判断是否有添加链接
+    isLink (linkName) {
+      return linkName !== '无' && linkName !== ''
+    },
+    // 打开链接
+    async openLink (item) {
+      const { link } = item
+      if (link.linkName === '无' || link.linkName === '') return false
+      let href = link.linkAddress
+      const type = link.connectionType
+      if (type === 1) { // 站内链接
+        if (link.articleId) { // 文章
+          // 查询文章详情。禁用的文章要提示
+          const data = await this.$post(`${this.api.findArticle}?id=${link.articleId}`)
+          if (data.data.isDisable) {
+            return Util.errorMsg('该文章已禁用！')
+          } else {
+            href = '/article?articleId=' + link.articleId
+          }
+        } else { // 栏目
+          href = '/column?id=' + link.columnId[link.columnId.length - 1]
+        }
+        href += '&siteId=' + (this.site)
+        if (!link.articleId) href = this.$router.resolve(href).href
+      } else if (type === 3) { // 站外链接
+        if (link.otherArticleId) { // 文章
+          // 查询文章详情。禁用的文章要提示
+          const data = await this.$post(`${this.api.findArticle}?id=${link.otherArticleId}`)
+          if (data.data.isDisable) {
+            return Util.errorMsg('该文章已禁用！')
+          } else {
+            href = '/article?articleId=' + link.otherArticleId
+          }
+        } else { // 栏目
+          href = '/column?id=' + link.otherColumnId[link.otherColumnId.length - 1]
+        }
+        href += '&siteId=' + link.site
+        if (!link.otherArticleId) href = this.$router.resolve(href).href
+      }
+      // 如果是站内/站外链接，并且选择的是文章，则要获取当前长页名称传到文章详情里，面包屑点返回的时候需要返回到当前长页
+      if ((type === 1 && link.articleId) || (type === 3 && link.otherArticleId)) {
+        this.$post(`${this.api.findColumn}?id=${this.id}`).then(({ data }) => {
+          href = this.$router.resolve(href + '&id=' + this.id + '&columnName=' + data.columnName + '&path=' + this.$route.path.replace('/', '')).href
+          this.toHref(link.isOpen, href)
+        }).catch(res => { })
+      } else {
+        this.toHref(link.isOpen, href)
+      }
+    },
+    // 跳转地址
+    toHref (isOpen, href) {
+      if (isOpen) {
+        var userAgent = navigator.userAgent;
+        var isSafari = /Safari/.test(userAgent) && !/Chrome/.test(userAgent);
+        if (isSafari) {
+          window.location.href = href
+        } else {
+          window.open(href)
+        }
+      } else {
+        window.location.href = href
+      }
+    },
   },
 };
 </script>
@@ -115,10 +246,13 @@ export default {
     margin-right: 100px;
 }
 .footer {
-    padding: 64px 10% 25px;
+    padding: 64px 20% 25px;
     color: #fff;
     background-color: #091733;
     overflow: hidden;
+    &.iasf {
+        padding-top: 50px;
+    }
     .info {
         display: flex;
     }
@@ -149,6 +283,27 @@ export default {
         color: #6d7384;
     }
 }
+.entry {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 100px;
+    li {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+    }
+    img {
+        max-width: 100px;
+    }
+    .text {
+        margin-top: 15px;
+        font-size: 1rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #fff;
+    }
+}
 .contact {
     position: relative;
     padding: 0 0 73px 0;
@@ -224,6 +379,8 @@ export default {
     body {
         width: 100% !important;
     }
+}
+@media (max-width: 750px) {
     .inner {
         width: 100% !important;
         .title {
@@ -238,8 +395,6 @@ export default {
             margin-top: 90px;
         }
     }
-}
-@media (min-width: 280px) and (max-width: 750px) {
     .footer {
         .info {
             flex-direction: column;
@@ -249,32 +404,10 @@ export default {
             }
         }
     }
-}
-
-@media (min-width: 751px) and (max-width: 1200px) {
-    .footer {
-        .info {
+    .entry {
         flex-direction: column;
-            .column {
-                margin-top: 20px;
-                margin-left: 0;
-            }
-        }
-    }
-}
-
-@media (max-width: 320px) {
-    .contact {
-        .inner {
-            .title {
-                h6 {
-                    font-size: 1.5rem;
-                }
-                .text {
-                    font-size: 2rem;
-                    margin-top: -1.25rem;
-                }
-            }
+        li {
+            margin-bottom: 30px;
         }
     }
 }

src/layouts/navbar/index.vue

@@ -235,13 +235,7 @@ $height: 90px;
         }
     }
 }
-@media (max-width: 1500px) {
-    /deep/.nav {
-        .el-menu-item {
-        }
-    }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
+@media (max-width: 1200px) {
     /deep/.nav {
         .el-menu-item {
             padding: 0 8px;

src/pages/column/index.vue

@@ -692,10 +692,10 @@ export default {
         }
       } else if (typeId === 3) {
         // 长页栏目直接获取path
-        this.$router.push(`/${to.path}?id=${to.id}`).catch((err) => { });
+        this.$router.push(`/${to.path}?id=${to.id}&siteId=${this.site}`).catch((err) => { });
       } else if (left && (typeId === 1 || (typeId === 4 && !to.children.length))) {
         // 常规栏目，或者没有子级的子级优先栏目，跳转到column页
-        this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}`).catch((err) => { });
+        this.$router.push(`/column?id=${to.id + (to.level !== 1 || !this.sameStyle ? '&column=1' : '')}&siteId=${this.site}`).catch((err) => { });
       } else if (left && typeId === 4 && to.children.length) {
         // 子级优先栏目，并且有子级
         const el = this.$refs.leftColumn;

src/pages/iasf/index.vue

@@ -21,35 +21,38 @@
     </el-carousel>
 
     <div class="block"
-         style="padding-top: 110px">
+         style="padding-top: 80px">
       <div class="inner">
+        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
         <ul class="card">
           <li class="wow fadeInDown"
-              data-wow-delay="0.2s">
+              data-wow-delay="0.2s"
+              :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+              @click="openLink(modules[2].form)">
             <img class="pic"
-                 :src="modules[1].form.pic"
+                 :src="modules[2].form.pic"
                  alt="">
+            <div class="project">SILF</div>
             <div class="texts">
-              <h6>{{ modules[1].form.title }}</h6>
-              <p class="des">{{ modules[1].form.des }}</p>
-              <img src="@/assets/images/arrow.png"
-                   alt=""
-                   :class="{'arrow': isLink(modules[1].form.link.linkName)}"
-                   @click="openLink(modules[1].form)">
+              <div class="name">SILF</div>
+              <h6>{{ modules[2].form.title }}</h6>
+              <p class="des">{{ modules[2].form.des }}</p>
             </div>
           </li>
           <li class="wow fadeInDown"
-              data-wow-delay="0.6s">
+              data-wow-delay="0.6s"
+              :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+              @click="openLink(modules[3].form)">
             <img class="pic"
-                 :src="modules[2].form.pic"
+                 :src="modules[3].form.pic"
                  alt="">
+            <div class="project">S³FEL</div>
             <div class="texts">
-              <h6>{{ modules[2].form.title }}</h6>
-              <p class="des">{{ modules[2].form.des }}</p>
-              <img src="@/assets/images/arrow.png"
-                   alt=""
-                   :class="{'arrow': isLink(modules[2].form.link.linkName)}"
-                   @click="openLink(modules[2].form)">
+              <div class="name">S³FEL</div>
+              <h6>{{ modules[3].form.title }}</h6>
+              <p class="des">{{ modules[3].form.des }}</p>
             </div>
           </li>
         </ul>
@@ -58,11 +61,19 @@
 
     <div class="block news-wrap">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp news-title">{{ modules[3].form.title }}</h2>
+        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
+        <div class="all-link"
+             @click="toAll(modules[5].form)">
+          <span>{{$t('column.seeMore')}} <img class="icon"
+                 src="@/assets/images/arrow.png"
+                 alt=""></span>
+        </div>
         <template v-if="articles.length">
           <div class="news-banner wow fadeInDown"
                data-wow-delay="0.5s"
-               @click="toArtice(articles[0], modules[4].form)">
+               @click="toArtice(articles[0], modules[5].form)">
             <div class="pic-wrap">
               <img class="pic"
                    width="100%"
@@ -84,10 +95,12 @@
                   :key="i"
                   class="wow fadeInDown"
                   :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
-                  @click="toArtice(item, modules[4].form)">
+                  @click="toArtice(item, modules[5].form)">
+                <div class="pic-wrap">
                   <img class="pic"
                        :src="item.titleImg"
                        alt="">
+                </div>
                 <div class="texts">
                   <h6>{{ item.title }}</h6>
                   <div class="des"
@@ -104,10 +117,12 @@
                  src="http://10.10.11.7/images/iasf/8.png"
                  alt="">
             <div class="texts">
-              <h6 @click="toAll(modules[5].form)">{{ getColumnTitle(modules[5].form) }}</h6>
+              <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }} <i class="el-icon-arrow-right"></i></h6>
+              <div class="des-wrap">
                 <p class="meta">{{ curArticle1.source }}</p>
                 <div class="des"
-                   @click="toArtice(curArticle1, modules[5].form)">{{ curArticle1.title }}</div>
+                     @click="toArtice(curArticle1, modules[6].form)">{{ curArticle1.title }}</div>
+              </div>
               <p class="date">{{ curArticle1.releaseTime }}</p>
             </div>
             <div class="action">
@@ -128,10 +143,12 @@
                  src="http://10.10.11.7/images/iasf/9.png"
                  alt="">
             <div class="texts">
-              <h6 @click="toAll(modules[6].form)">{{ getColumnTitle(modules[6].form) }}</h6>
+              <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }} <i class="el-icon-arrow-right"></i></h6>
+              <div class="des-wrap">
                 <p class="meta">{{ curArticle2.classificationName }}</p>
                 <div class="des"
-                   @click="toArtice(curArticle2, modules[6].form)">{{ curArticle2.title }}</div>
+                     @click="toArtice(curArticle2, modules[7].form)">{{ curArticle2.title }}</div>
+              </div>
               <p class="date">{{ curArticle2.releaseTime }}</p>
             </div>
             <div class="action">
@@ -152,9 +169,12 @@
                  src="http://10.10.11.7/images/iasf/10.png"
                  alt="">
             <div class="texts">
-              <h6 @click="toAll(modules[7].form)">{{ getColumnTitle(modules[7].form) }}</h6>
-              <div class="des m-t-8"
-                   @click="toArtice(curArticle3, modules[7].form)">{{ curArticle3.title }}</div>
+              <h6 @click="toAll(modules[8].form)">{{ getColumnTitle(modules[8].form) }} <i class="el-icon-arrow-right"></i></h6>
+              <div class="des-wrap"
+                   style="margin-top: 16px">
+                <div class="des"
+                     @click="toArtice(curArticle3, modules[8].form)">{{ curArticle3.title }}</div>
+              </div>
               <p class="date">{{ curArticle3.releaseTime }}</p>
             </div>
             <div class="action">
@@ -176,14 +196,14 @@
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[8].form.title }}</h2>
+        <h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2>
         <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[8 ].form.des }}</p>
+           data-wow-delay="0.5s">{{ modules[9].form.des }}</p>
         <ul v-if="articles4.length"
             class="people">
           <li v-for="(item, i) in articles4"
               :key="i"
-              @click="toArtice(item, modules[9].form)"
+              @click="toArtice(item, modules[10].form)"
               class="wow fadeInDown">
             <img class="pic"
                  :src="item.titleImg"
@@ -191,14 +211,14 @@
             <div class="texts">
               <h6>{{ item.title }}</h6>
               <p class="job">岗位：{{ item.post }}</p>
-              <p class="hobby">爱好：{{ item.post }}</p>
+              <p class="hobby">爱好：{{ item.hobby }}</p>
               <div class="text"
                    v-html="item.mainBody"></div>
             </div>
           </li>
         </ul>
         <div class="all-link"
-             @click="toAll(modules[9].form)">
+             @click="toAll(modules[10].form)">
           <span>{{$t('column.all')}} <img class="icon"
                  src="@/assets/images/arrow.png"
                  alt=""></span>
@@ -206,98 +226,57 @@
       </div>
     </div>
 
-    <div class="block">
+    <div class="block talent-block">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[10].form.title }}</h2>
+        <h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
         <p class="intro wow fadeInUp"
-           data-wow-delay="0.5s">{{ modules[10].form.des }}</p>
+           data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
         <div class="talent">
           <div class="left wow fadeInLeft"
                data-wow-delay="0.5s">
-            <h6>{{ modules[11].form.title }}</h6>
-            <p class="sub-title">{{ modules[11].form.subTitle }}</p>
+            <h6>{{ modules[12].form.title }}</h6>
+            <p class="sub-title">{{ modules[12].form.subTitle }}</p>
             <div class="text"
-                 v-html="modules[11].form.des"></div>
-            <el-button v-if="isLink(modules[11].form.link.linkName)"
+                 v-html="modules[12].form.des"></div>
+            <el-button v-if="isLink(modules[12].form.link.linkName)"
+                       style="background-color: #026BE1;"
                        type="primary"
                        round
-                       @click="openLink(modules[11].form)">这里跳转 ></el-button>
+                       @click="openLink(modules[12].form)">诚邀海内外人才加入我们 ></el-button>
           </div>
-          <img :src="modules[11].form.pic"
+          <img :src="modules[12].form.pic"
                alt=""
                class="pic">
         </div>
       </div>
     </div>
 
-    <div class="about"
-         style="margin-top: 100px">
+    <div class="about">
+      <div class="about-bg">
         <div class="inner">
           <div class="left">
-          <h6>{{ modules[12].form.title }}</h6>
+            <h6>{{ modules[13].form.title }}</h6>
             <div class="text"
-               v-html="modules[12].form.des"></div>
+                 v-html="modules[13].form.des"></div>
             <img src="@/assets/images/arrow-white.png"
                  alt=""
-               :class="{'arrow': isLink(modules[12].form.link.linkName)}"
-               @click="openLink(modules[12].form)">
+                 :class="{'arrow': isLink(modules[13].form.link.linkName)}"
+                 @click="openLink(modules[13].form)">
           </div>
           <img class="pic"
-             :src="modules[12].form.pic"
-             alt="">
-      </div>
-    </div>
-
-    <div class="block"
-         style="margin-top: 100px">
-      <div class="inner">
-        <ul class="entry">
-          <li :class="{'cursor-pointer': isLink(modules[13].form.link.linkName)}"
-              @click="openLink(modules[13].form)">
-            <img class="icon"
                :src="modules[13].form.pic"
                alt="">
-            <p class="text">{{ modules[13].form.title }}</p>
-          </li>
-          <li :class="{'cursor-pointer': isLink(modules[14].form.link.linkName)}"
-              @click="openLink(modules[14].form)">
-            <img class="icon"
-                 :src="modules[14].form.pic"
-                 alt="">
-            <p class="text">{{ modules[14].form.title }}</p>
-          </li>
-          <li :class="{'cursor-pointer': isLink(modules[15].form.link.linkName)}"
-              @click="openLink(modules[15].form)">
-            <img class="icon"
-                 :src="modules[15].form.pic"
-                 alt="">
-            <p class="text">{{ modules[15].form.title }}</p>
-          </li>
-          <li :class="{'cursor-pointer': isLink(modules[16].form.link.linkName)}"
-              @click="openLink(modules[16].form)">
-            <img class="icon"
-                 :src="modules[16].form.pic"
-                 alt="">
-            <p class="text">{{ modules[16].form.title }}</p>
-          </li>
-          <li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
-              @click="openLink(modules[17].form)">
-            <img class="icon"
-                 :src="modules[17].form.pic"
-                 alt="">
-            <p class="text">{{ modules[17].form.title }}</p>
-          </li>
-        </ul>
+        </div>
       </div>
     </div>
 
     <ul class="tools">
-      <li v-for="(item, i) in modules[18].list"
+      <li v-for="(item, i) in modules[19].list"
           :key="i"
-          @click="openLink(item)">
-        <img :src="'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'"
+          @click="toLink(item, i)">
+        <!-- <img :src="'http://10.10.11.7/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'"
              alt=""
-             class="icon">
+             class="icon"> -->
         {{ item.title }}
       </li>
     </ul>
@@ -341,41 +320,40 @@ export default {
             data :
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
 
-          console.log('JSON=>', json)
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", this.modules)
 
           // 获取文章列表
-          if (json[4].form.column.length) {
-            const { column, articleNum } = json[4].form
+          if (json[5].form.column.length) {
+            const { column, articleNum } = json[5].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles = Util.removeTag(data.slice(0, articleNum || 4))
             }).catch(err => { })
           }
 
-          if (json[5].form.column.length) {
-            const { column, articleNum } = json[5].form
+          if (json[6].form.column.length) {
+            const { column, articleNum } = json[6].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
               if (this.articles1.length) this.curArticle1 = this.articles1[0]
             }).catch(err => { })
           }
-          if (json[6].form.column.length) {
-            const { column, articleNum } = json[6].form
+          if (json[7].form.column.length) {
+            const { column, articleNum } = json[7].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
               if (this.articles2.length) this.curArticle2 = this.articles2[0]
             }).catch(err => { })
           }
-          if (json[7].form.column.length) {
-            const { column, articleNum } = json[7].form
+          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 || 4))
               if (this.articles3.length) this.curArticle3 = this.articles3[0]
             }).catch(err => { })
           }
-          if (json[9].form.column.length) {
-            const { column, articleNum } = json[9].form
+          if (json[10].form.column.length) {
+            const { column, articleNum } = json[10].form
             this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
               this.articles4 = Util.removeTag(data.slice(0, articleNum || 3))
             }).catch(err => { })
@@ -420,6 +398,10 @@ export default {
       if (this['curInd' + k] > this['articles' + k].length - 1) this['curInd' + k] = 0
       this['curArticle' + k] = this['articles' + k][this['curInd' + k]] || {}
     },
+    // 右侧工具栏点击回调
+    toLink (item, i) {
+      i ? this.openLink(item) : window.scrollTo(0, document.documentElement.scrollHeight)
+    }
   }
 };
 </script>
@@ -459,46 +441,86 @@ export default {
 .block {
     padding-top: 3.15rem;
     .b-title {
-        font-size: 2.25rem;
+        font-size: 35px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        color: #333;
     }
     .intro {
-        font-size: 1.35rem;
         margin-bottom: 3.6rem;
+        font-size: 30px;
+        font-family: FZLTXHK--GBK1-0, FZLTXHK--GBK1;
+        color: #5b5b5e;
     }
 }
 .inner {
-    width: 1370px;
+    width: 1444px;
     min-width: 70%;
 }
 .card {
     display: flex;
     justify-content: space-between;
     li {
+        position: relative;
         width: 47%;
+        height: 366px;
         transition: 0.3s;
+        overflow: hidden;
         &:hover {
-            margin-top: -0.9375rem;
+            .project {
+                top: -100%;
+            }
+            .texts {
+                top: 0;
+            }
         }
     }
     .pic {
         width: 100%;
-        height: auto;
+        height: 100%;
+    }
+    .project {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        font-size: 2.4rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: 0.3s;
     }
     .texts {
-        padding-left: 1.375rem;
-        margin-top: 3rem;
-        border-left: 2px solid #dfe4e9;
+        position: absolute;
+        top: 100%;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+        height: 100%;
+        padding: 0 1rem;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.3);
+        transition: 0.3s;
+    }
+    .name {
+        font-size: 2rem;
+        font-family: PingFangSC-Medium, PingFang SC;
     }
     h6 {
-        margin-bottom: 1.56rem;
+        margin: 1rem 0;
         line-height: 2rem;
-        font-size: 1.368rem;
-        color: #333;
+        font-size: 1.6rem;
+        font-family: PingFangSC-Medium, PingFang SC;
         @include mul-ellipsis(2);
     }
     .des {
-        font-size: 1.024rem;
-        color: #222;
+        font-size: 1.2rem;
         line-height: 30px;
     }
 }
@@ -510,100 +532,93 @@ export default {
 }
 .news-banner {
     display: flex;
+    margin-top: 20px;
     cursor: pointer;
     .pic-wrap {
         width: 50%;
-        height: 20.5rem;
+        height: 24.5rem;
         overflow: hidden;
     }
     .pic {
         transition: 0.5s;
-        &:hover {
-            transform: scale(1.3);
-        }
     }
     .right {
         position: relative;
         width: 50%;
-        padding: 50px 50px 30px;
-        background: #1583ff;
+        padding: 42px 71px 90px 58px;
+        background: #026be1;
         color: #fff;
         h6 {
-            font-size: 1.34rem;
+            font-size: 24px;
+            font-family: PingFangSC-Semibold, PingFang SC;
+            line-height: 43px;
+            @include mul-ellipsis(2);
         }
         .des {
-            font-size: 1.02rem;
+            margin: 28px 0 25px;
+            font-size: 18px;
+            line-height: 32px;
         }
         .meta {
-            font-size: 1.04rem;
-        }
-        &:hover {
-            background: #465f85;
-            h6,
-            .des,
-            .meta {
-                color: #fff;
-                transform: translateY(15px);
-            }
-        }
-    }
-    h6 {
-        font-size: 1.3rem;
-        transition: 0.3s;
+            font-size: 16px;
         }
-    .des {
-        margin: 30px 0;
-        font-size: 0.9rem;
-        line-height: 24px;
-        transition: 0.3s;
-    }
-    .meta {
-        font-size: 0.8rem;
-        transition: 0.3s;
     }
 }
 .news {
     display: flex;
     flex-wrap: wrap;
-    margin: 10px 0;
+    margin: 20px 0;
     li {
-        width: calc((100% - 18px) / 3);
-        margin-right: 9px;
+        width: calc((100% - 40px) / 3);
+        margin-right: 20px;
         background-color: #fff;
         cursor: pointer;
         &:nth-child(3n) {
             margin-right: 0;
         }
     }
-    .pic {
+    .pic-wrap {
         width: 100%;
         height: 220px;
+        overflow: hidden;
+    }
+    .pic {
+        width: 100%;
+        height: 100%;
+        transition: 0.5s;
     }
     .texts {
-        padding: 20px 24px 50px;
+        padding: 24px 28px;
         background-color: #fff;
+        box-shadow: 2px 2px 2px rgba(241, 241, 241, 0.8);
     }
     .meta {
-        font-size: 0.9rem;
+        font-size: 16px;
         color: #666;
     }
     h6 {
-        font-size: 1.1rem;
+        font-size: 20px;
         font-family: PingFangSC-Semibold, PingFang SC;
         color: #333;
-        @include mul-ellipsis(2);
+        @include ellipsis;
     }
     .des {
-        margin: 15px 0;
+        height: 84px;
+        margin: 14px 0 16px;
+        font-size: 16px;
+        line-height: 28px;
+        color: #333;
+        text-indent: 2em;
     }
 }
 .news-carousel {
     display: flex;
     li {
         position: relative;
-        width: calc((100% - 18px) / 3);
+        width: calc((100% - 40px) / 3);
         height: 284px;
-        margin-right: 9px;
+        margin-right: 20px;
+        overflow: hidden;
         &:nth-child(3n) {
             margin-right: 0;
         }
@@ -611,6 +626,7 @@ export default {
     .pic {
         width: 100%;
         height: 100%;
+        transition: 0.5s;
     }
     .texts {
         position: absolute;
@@ -623,23 +639,28 @@ export default {
         background-color: rgba(0, 0, 0, 0.3);
     }
     h6 {
-        font-size: 1.2rem;
+        font-size: 24px;
         font-family: PingFangSC-Medium, PingFang SC;
         cursor: pointer;
     }
+    .des-wrap {
+        height: 101px;
+        margin: 11px 0 25px;
+    }
     .meta {
-        margin: 14px 0;
-        font-size: 0.9rem;
+        margin-bottom: 16px;
+        font-size: 18px;
         color: rgba(255, 255, 255, 0.86);
     }
     .des {
-        margin-bottom: 14px;
-        font-size: 1rem;
+        font-size: 20px;
         font-family: PingFangSC-Medium, PingFang SC;
+        -webkit-line-clamp: 2;
+        line-height: 30px;
         cursor: pointer;
     }
     .date {
-        font-size: 0.8rem;
+        font-size: 16px;
     }
     .action {
         position: absolute;
@@ -689,9 +710,9 @@ export default {
         }
     }
     .pic {
-        width: 260px;
-        height: 260px;
-        margin-bottom: 10px;
+        width: 293px;
+        height: 293px;
+        margin-bottom: 28px;
         border-radius: 50%;
     }
     h6 {
@@ -700,8 +721,9 @@ export default {
         color: #333;
     }
     .job {
-        margin: 10px 0;
+        margin: 18px 0 12px;
         font-size: 1rem;
+        font-weight: 600;
         font-family: PingFangSC-Medium, PingFang SC;
         color: #333;
     }
@@ -716,17 +738,22 @@ export default {
         color: #333;
     }
 }
+.talent-block {
+    background: url(http://10.10.11.7/images/iasf/11.png) 0 0/100% 100% no-repeat;
+}
 .talent {
     display: flex;
     color: #fff;
-    background: #1583ff;
     border-radius: 0px 100px 0px 100px;
+    overflow: hidden;
     .left {
         width: 50%;
-        padding: 120px 0 0 5%;
+        padding: 120px 80px 0 5%;
+        background: #111c43;
     }
     h6 {
-        font-size: 1.6rem;
+        font-size: 30px;
+        font-family: PingFangSC-Medium, PingFang SC;
     }
     .sub-title {
         margin: 8px 0 20px;
@@ -737,78 +764,47 @@ export default {
         font-size: 1rem;
         line-height: 2;
     }
+    .el-button {
+        font-size: 20px;
+        border: 0;
+    }
     .pic {
         width: 50%;
         min-height: 465px;
     }
 }
 .about {
-    background: #0a7fec;
+    padding: 100px 0 229px;
+    background: url(http://10.10.11.7/images/iasf/12.png) 0 450px no-repeat;
+    .about-bg {
+        background-color: #0a7fec;
+    }
     .inner {
         position: relative;
-        height: 350px;
-        padding: 50px;
+        height: 465px;
+        padding: 73px 50px 58px;
     }
     .left {
-        width: 48%;
+        width: 44%;
     }
     h6 {
-        font-size: 1.8rem;
+        font-size: 36px;
         font-family: PingFangSC-Semibold, PingFang SC;
         color: #fff;
     }
     .text {
-        margin: 20px 0;
-        font-size: 1rem;
+        margin: 24px 0 37px;
+        font-size: 20px;
+        line-height: 35px;
         color: #fff;
+        @include mul-ellipsis(4);
     }
     .pic {
         position: absolute;
         top: -60px;
         right: 0;
-        max-width: 48%;
-        height: 460px;
-    }
-}
-.entry {
-    display: flex;
-    flex-wrap: wrap;
-    li {
-        display: inline-flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        height: 220px;
-        margin: 0 20px 20px 0;
-        text-align: center;
-        &:first-child {
-            width: calc((100% - 20px) / 2);
-            background-color: rgba(201, 102, 2, 0.83);
-        }
-        &:nth-child(2) {
-            width: calc((100% - 20px) / 2);
-            margin-right: 0;
-            background: #4fbc72;
-        }
-        &:nth-child(3) {
-            width: calc((100% - 40px) / 3);
-            background-color: rgba(237, 196, 95, 0.93);
-        }
-        &:nth-child(4) {
-            width: calc((100% - 40px) / 3);
-            background-color: rgba(8, 156, 218, 0.73);
-        }
-        &:nth-child(5) {
-            width: calc((100% - 40px) / 3);
-            margin-right: 0;
-            background: #2172e3;
-        }
-    }
-    .text {
-        margin-top: 15px;
-        font-size: 1rem;
-        font-family: PingFangSC-Medium, PingFang SC;
-        color: #fff;
+        width: 744px;
+        height: 657px;
     }
 }
 .tools {
@@ -816,33 +812,96 @@ export default {
     position: fixed;
     top: 60vh;
     right: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
     li {
+        position: relative;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 160px;
+        // width: 160px;
+        padding: 0 1.2rem;
         margin-bottom: 1px;
         font-size: 1rem;
         color: #0084ff;
         line-height: 56px;
-        background-color: rgba(57, 59, 59, 0.94);
+        background-color: rgba(19, 18, 19, 0.94);
         cursor: pointer;
-        &.active {
-            width: 192px;
+        transition: 0.3s;
+        &:before {
+            content: '';
+            width: 28px;
+            height: 28px;
+            margin-right: 5px;
+            background: url(http://10.10.11.7/images/iasf/icon1.png) no-repeat;
+        }
+        &:nth-child(2):before {
+            background-image: url(http://10.10.11.7/images/iasf/icon2.png);
+        }
+        &:nth-child(2):hover:before {
+            background-image: url(http://10.10.11.7/images/iasf/icon2-1.png);
+        }
+        &:nth-child(3):before {
+            background-image: url(http://10.10.11.7/images/iasf/icon3.png);
+        }
+        &:nth-child(3):hover:before {
+            background-image: url(http://10.10.11.7/images/iasf/icon3-1.png);
+        }
+        &:nth-child(4):before {
+            background-image: url(http://10.10.11.7/images/iasf/icon4.png);
+        }
+        &:nth-child(4):hover:before {
+            background-image: url(http://10.10.11.7/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(http://10.10.11.7/images/iasf/icon1-1.png);
+            }
         }
     }
     .icon {
         margin-right: 10px;
     }
 }
-@media (max-width: 1450px) {
+@media (max-width: 1470px) {
     .inner {
         width: 95%;
     }
+    .about {
+        .pic {
+            width: 700px;
+            height: auto;
+        }
+    }
+}
+@media (max-width: 1370px) {
+    .about {
+        .inner {
+            height: auto;
+        }
+        .left {
+            width: 100%;
+        }
+        .pic {
+            position: static;
+            width: auto;
+            max-width: 100%;
+            height: auto;
+            margin-top: 10px;
+        }
+    }
 }
 @media (max-width: 1200px) {
+    .carousel .texts {
+        left: 5%;
+        right: 5%;
+    }
     .card {
         flex-direction: column;
         li {
@@ -878,23 +937,10 @@ export default {
             width: 100%;
         }
         .left {
+            padding-bottom: 50px;
             margin-bottom: 10px;
         }
     }
-    .about {
-        .inner {
-            height: auto;
-        }
-        .left {
-            width: 100%;
-        }
-        .pic {
-            position: static;
-            max-width: 100%;
-            height: auto;
-            margin-top: 10px;
-        }
-    }
     .entry {
         flex-direction: column;
         li {
@@ -903,6 +949,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-}
 </style>