From cf8d6f03d544bc57b3a5fb1febb81e7800df2b2f Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 21 Jun 2023 15:54:07 +0800
Subject: [PATCH] =?UTF-8?q?=E9=95=BF=E9=A1=B5=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/iasf/index.vue         | 101 +++++-
 src/pages/overview/index.vue     | 560 ++++++++++++++++++-------------
 src/pages/talentCentre/index.vue | 135 +++++---
 3 files changed, 515 insertions(+), 281 deletions(-)

diff --git a/src/pages/iasf/index.vue b/src/pages/iasf/index.vue
index 67ea557..69a46dc 100644
--- a/src/pages/iasf/index.vue
+++ b/src/pages/iasf/index.vue
@@ -51,8 +51,7 @@
           <div class="news-banner wow fadeInDown"
                data-wow-delay="0.5s"
                @click="toArtice(articles[0], modules[4].form)">
-            <div style="width: 50%;height: 20.5rem;overflow: hidden;"
-                 class="newBox">
+            <div class="pic-wrap">
               <img class="pic"
                    width="100%"
                    height="100%"
@@ -243,31 +242,36 @@
          style="margin-top: 100px">
       <div class="inner">
         <ul class="entry">
-          <li>
+          <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>
+          <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>
+          <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>
+          <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>
+          <li :class="{'cursor-pointer': isLink(modules[17].form.link.linkName)}"
+              @click="openLink(modules[17].form)">
             <img class="icon"
                  :src="modules[17].form.pic"
                  alt="">
@@ -276,6 +280,12 @@
         </ul>
       </div>
     </div>
+
+    <ul class="tools">
+      <li v-for="(item, i) in modules[18].list"
+          :key="i"
+          @click="openLink(item)">{{ item.title }}</li>
+    </ul>
   </div>
 </template>
 
@@ -299,7 +309,7 @@ export default {
       curArticle2: {},
       curInd3: 0,
       curArticle3: {},
-      timer: null
+      timer: null,
     }
   },
   mounted () {
@@ -485,6 +495,11 @@ export default {
 .news-banner {
     display: flex;
     cursor: pointer;
+    .pic-wrap {
+        width: 50%;
+        height: 20.5rem;
+        overflow: hidden;
+    }
     .pic {
         transition: 0.5s;
         &:hover {
@@ -772,6 +787,31 @@ export default {
         color: #fff;
     }
 }
+.tools {
+    position: fixed;
+    top: 430px;
+    right: 0;
+    li {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 160px;
+        margin-bottom: 1px;
+        font-size: 1rem;
+        color: #0084ff;
+        line-height: 56px;
+        background-color: rgba(57, 59, 59, 0.94);
+        cursor: pointer;
+        &.active {
+            width: 192px;
+            color: #fff;
+            background-color: rgba(1, 129, 247, 0.94);
+        }
+    }
+    .icon {
+        margin-right: 10px;
+    }
+}
 @media (max-width: 1200px) {
     .block {
         padding: 3.125rem 0;
@@ -788,4 +828,49 @@ export default {
         }
     }
 }
+@media (max-width: 920px) {
+    .news-banner {
+        flex-direction: column;
+        .pic-wrap,
+        .right {
+            width: 100%;
+        }
+    }
+    .news-carousel,
+    .people {
+        flex-direction: column;
+        li {
+            width: 100%;
+            margin-bottom: 10px;
+        }
+    }
+    .talent {
+        flex-direction: column;
+        .left,
+        .pic {
+            width: 100%;
+        }
+    }
+    .about {
+        .inner {
+            height: auto;
+        }
+        .left {
+            width: 100%;
+        }
+        .pic {
+            position: static;
+            max-width: 100%;
+            height: auto;
+            margin-top: 10px;
+        }
+    }
+    .entry {
+        flex-direction: column;
+        li {
+            width: 100% !important;
+            margin-right: 0;
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
index 252a98c..3b78a0f 100644
--- a/src/pages/overview/index.vue
+++ b/src/pages/overview/index.vue
@@ -1,66 +1,107 @@
 <template>
   <div class="wrap">
     <div class="single-banner">
-      <img class="banner-img" :src="modules[0].form.pic" alt="" />
+      <img class="banner-img"
+           :src="modules[0].form.pic"
+           alt="" />
       <div class="texts">
         <h6 class="banner-title">{{ modules[0].form.title }}</h6>
       </div>
     </div>
 
-    <div class="block about gray">
+    <div class="block history gray">
+      <div :class="['inner', {'cursor-pointer': isLink(modules[1].form.link.linkName)}]"
+           @click="openLink(modules[1].form)">
+        <div class="texts wow fadeInDown"
+             data-wow-delay="0.5s">
+          <div class="left">
+            <h2>{{ modules[1].form.title }}</h2>
+            <div class="line"></div>
+            <div class="des">{{ modules[1].form.des }}</div>
+          </div>
+          <img class="bg"
+               width="562"
+               height="506"
+               :src="modules[1].form.pic"
+               alt="">
+        </div>
+      </div>
+    </div>
+
+    <div class="block">
       <div class="inner">
-        <img :src="modules[1].form.pic" alt="" class="pic" />
-        <div class="texts">
-          <h6>{{ modules[2].form.title }}</h6>
-          <div class="des" v-html="modules[2].form.des"></div>
-          <h6>{{ modules[3].form.title }}</h6>
-          <div class="des" v-html="modules[3].form.des"></div>
+        <div :class="['core', {'cursor-pointer': isLink(modules[2].form.link.linkName)}]"
+             @click="openLink(modules[2].form)">
+          <img :src="modules[2].form.pic"
+               alt=""
+               class="pic">
+          <div class="texts">
+            <h6>{{ modules[2].form.title }}</h6>
+            <div class="line"></div>
+            <div class="text"
+                 v-html="modules[2].form.des"></div>
+          </div>
+        </div>
+        <div :class="['core', {'cursor-pointer': isLink(modules[3].form.link.linkName)}]"
+             @click="openLink(modules[3].form)">
+          <img :src="modules[3].form.pic"
+               alt=""
+               class="pic">
+          <div class="texts">
+            <h6>{{ modules[3].form.title }}</h6>
+            <div class="line"></div>
+            <div class="text"
+                 v-html="modules[3].form.des"></div>
+          </div>
         </div>
       </div>
     </div>
-    
-    <div class="block fac">
+
+    <div class="block gray fac">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp">{{ modules[4].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
-        <ul class="card">
-          <li>
-            <img :src="modules[5].form.pic" alt="" class="pic" />
+        <div class="event">
+          <h6>{{ modules[4].form.title }}</h6>
+          <p class="en">{{ modules[4].form.subTitle }}</p>
+          <div class="text"
+               v-html="modules[4].form.des"></div>
+          <img v-if="isLink(modules[4].form.link.linkName)"
+               class="arrow"
+               src="@/assets/images/arrow.png"
+               alt=""
+               @click="openLink(modules[4].form)">
+        </div>
+        <ul class="l-card">
+          <li :class="{'cursor-pointer': isLink(modules[5].form.link.linkName)}"
+              @click="openLink(modules[5].form)">
+            <img :src="modules[5].form.pic"
+                 alt=""
+                 class="pic" />
             <div class="texts">
               <h6>{{ modules[5].form.title }}</h6>
-              <div class="text" v-html="modules[5].form.des"></div>
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[5].form.link.linkName)}" @click="openLink(modules[5].form)">
+              <div class="text"
+                   v-html="modules[5].form.des"></div>
             </div>
           </li>
-          <li>
-            <img :src="modules[6].form.pic" alt="" class="pic" />
+          <li :class="{'cursor-pointer': isLink(modules[6].form.link.linkName)}"
+              @click="openLink(modules[6].form)">
+            <img :src="modules[6].form.pic"
+                 alt=""
+                 class="pic" />
             <div class="texts">
               <h6>{{ modules[6].form.title }}</h6>
-              <div class="text" v-html="modules[6].form.des"></div>
-              <img src="@/assets/images/arrow.png" alt="" :class="{'arrow': isLink(modules[6].form.link.linkName)}" @click="openLink(modules[6].form)">
+              <div class="text"
+                   v-html="modules[6].form.des"></div>
             </div>
           </li>
-        </ul>
-        <ul class="l-card">
-          <li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}" @click="openLink(modules[7].form)">
-            <img :src="modules[7].form.pic" alt="" class="pic" />
+          <li :class="{'cursor-pointer': isLink(modules[7].form.link.linkName)}"
+              @click="openLink(modules[7].form)">
+            <img :src="modules[7].form.pic"
+                 alt=""
+                 class="pic" />
             <div class="texts">
               <h6>{{ modules[7].form.title }}</h6>
-              <div class="text" v-html="modules[7].form.des"></div>
-            </div>
-          </li>
-          <li :class="{'cursor-pointer': isLink(modules[8].form.link.linkName)}" @click="openLink(modules[8].form)">
-            <img :src="modules[8].form.pic" alt="" class="pic" />
-            <div class="texts">
-              <h6>{{ modules[8].form.title }}</h6>
-              <div class="text" v-html="modules[8].form.des"></div>
-            </div>
-          </li>
-          <li :class="{'cursor-pointer': isLink(modules[9].form.link.linkName)}" @click="openLink(modules[9].form)">
-            <img :src="modules[9].form.pic" alt="" class="pic" />
-            <div class="texts">
-              <h6>{{ modules[9].form.title }}</h6>
-              <div class="text" v-html="modules[9].form.des"></div>
+              <div class="text"
+                   v-html="modules[7].form.des"></div>
             </div>
           </li>
         </ul>
@@ -68,29 +109,34 @@
     </div>
 
     <div class="block scan gray">
-      <h2 class="b-title wow fadeInUp">{{ modules[10].form.title }}</h2>
-      <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[10].form.des }}</p>
+      <h2 class="b-title wow fadeInUp">{{ modules[8].form.title }}</h2>
+      <p class="intro wow fadeInUp"
+         data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
       <div class="scan-inner">
         <div class="left">
-          <div class="line" v-for="(item, i) in modules[11].list" :key="i">
+          <div class="line"
+               v-for="(item, i) in modules[9].list"
+               :key="i">
             <p class="text">{{ item.title }}</p>
           </div>
           <ul class="total">
             <li>
-              <p class="num">{{ modules[12].form.title }}</p>
-              <p class="text">{{ modules[12].form.des }}</p>
+              <p class="num">{{ modules[10].form.title }}</p>
+              <p class="text">{{ modules[10].form.des }}</p>
             </li>
             <li>
-              <p class="num">{{ modules[13].form.title }}</p>
-              <p class="text">{{ modules[13].form.des }}</p>
+              <p class="num">{{ modules[11].form.title }}</p>
+              <p class="text">{{ modules[11].form.des }}</p>
             </li>
             <li>
-              <p class="num">{{ modules[14].form.title }}</p>
-              <p class="text">{{ modules[14].form.des }}</p>
+              <p class="num">{{ modules[12].form.title }}</p>
+              <p class="text">{{ modules[12].form.des }}</p>
             </li>
           </ul>
         </div>
-        <img :src="modules[15].form.pic" alt="" class="pic" />
+        <img :src="modules[13].form.pic"
+             alt=""
+             class="pic" />
       </div>
     </div>
   </div>
@@ -103,17 +149,17 @@ import Util from "@/libs/util";
 import WOW from "wow.js";
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
-      
+
     };
   },
-  mounted() {
+  mounted () {
     new WOW().init();
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(
         `${this.api[this.preview ? "getRedisCache" : "findPage"]}?columnId=${this.id}`
@@ -125,14 +171,14 @@ export default {
               this.preview
                 ? data
                 : data[data.length - 1][
-                    data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
-                  ]
+                data[data.length - 1].state ? "theEditedJson" : "jsonBeforeEditing"
+                ]
             );
             this.modules = json;
             console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json);
           }
         })
-        .catch((err) => {});
+        .catch((err) => { });
     },
   },
 };
@@ -140,208 +186,266 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
-.about {
-  padding-top: 0;
-  .inner {
-    position: relative;
-    display: flex;
-    padding: 20px;
-    margin-top: -50px;
-    background-color: #fff;
-  }
-  .pic {
-    width: 40%;
-    height: 330px;
-    margin-right: 30px;
-  }
-  h6 {
-    font-size: 1.2rem;
-    font-family: PingFangSC-Medium, PingFang SC;
-    color: #333;
-    &:before {
-      content: '';
-      display: block;
-      width: 28px;
-      height: 4px;
-      margin-bottom: 12px;
-      background: #0280F1;
+@import '../../styles/page/page.scss';
+.history {
+    h2 {
+        font-size: 1rem;
+        color: #333;
     }
-  }
-  .des {
-    margin: 20px 0;
-    font-size: 1rem;
-    color: #666;
-    line-height: 2;
-  }
-}
-.fac {
-  .card {
-    display: flex;
-    li {
-      width: calc((100% - 20px) / 2);
-      color: #333;
-      background-color: #FCFBFB;
-      &:first-child {
-        margin-right: 20px;
-      }
+    .texts {
+        display: flex;
+        justify-content: space-between;
+        padding: 5.125rem 3.5625rem 1.875rem;
+        margin-top: 20px;
+        background-color: #fff;
+        border-radius: 6.25rem 0px 0px 0px;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
     }
-    .pic {
-      width: 100%;
-      height: 350px;
+    .left {
+        width: 43.4375rem;
     }
-    .texts {
-      padding: 20px;
+    .line {
+        width: 53px;
+        height: 3px;
+        margin: 18px 0;
+        background: #0280f1;
     }
-    h6 {
-      margin-bottom: 10px;
-      font-size: 1.2rem;
-      font-family: PingFangSC-Medium, PingFang SC;
+    .des {
+        font-size: 0.9rem;
+        color: #181818;
+        line-height: 31px;
+        -webkit-line-clamp: 6;
     }
-    .text {
-      font-size: 1rem;
+    .bg {
+        margin: -122px 0 0 0;
+        border-top-right-radius: 40px;
     }
-  }
-  .l-card {
-    display: flex;
-    margin-top: 20px;
-    li {
-      position: relative;
-      width: calc((100% - 40px) / 3);
-      height: 380px;
-      margin-right: 20px;
-      &:last-child {
-        margin-right: 0;
-      }
+}
+.core {
+    position: relative;
+    height: 370px;
+    margin-bottom: 40px;
+    &:last-child {
+        .texts {
+            left: 40px;
+            right: auto;
+        }
     }
     .pic {
-      width: 100%;
-      height: 100%;
+        width: 100%;
+        height: 100%;
     }
     .texts {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      padding: 140px 30px 0;
-      color: #fff;
-      background-color: rgba(0, 0, 0, .5);
+        position: absolute;
+        top: 80px;
+        right: 40px;
+        width: 500px;
+        color: #fff;
     }
     h6 {
-      margin-bottom: 15px;
-      font-size: 1.6rem;
-      font-family: PingFangSC-Medium, PingFang SC;
+        font-size: 1.4rem;
+        font-family: PingFangSC-Medium, PingFang SC;
+    }
+    .line {
+        width: 136px;
+        height: 3px;
+        margin: 20px 0;
+        background: #ffffff;
+        opacity: 0.56;
     }
     .text {
-      font-size: 1rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      line-height: 2;
-      @include mul-ellipsis(4);
+        font-size: 1rem;
+        line-height: 1.6;
     }
-  }
 }
-.scan {
-  .scan-inner {
-    display: flex;
-    padding-left: 20%;
-  }
-  .left {
-    width: 30%;
-    margin-right: 80px;
-  }
-  .line {
-    display: flex;
-    align-items: center;
-    margin-bottom: 30px;
-    &:before {
-      content: '';
-      min-width: 50px;
-      width: 50px;
-      height: 50px;
-      margin-right: 20px;
-      background: url(http://10.10.11.7/images/overview/7.png) 0 0/100% 100% no-repeat;
-    }
-    &:nth-child(2):before {
-      background-image: url(http://10.10.11.7/images/overview/8.png);
+.fac {
+    .event {
+        position: relative;
+        padding: 70px 250px 70px 60px;
+        background: url(http://10.10.11.7/images/overview/16.png) 0 0/100% 100% no-repeat;
+        h6 {
+            font-size: 2.2rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+        }
+        .en {
+            margin-top: -10px;
+            font-size: 2rem;
+            font-family: AppleSystemUIFont;
+            color: #e4e4e4;
+        }
+        .text {
+            margin: 15px 0;
+            font-size: 1rem;
+            color: #333;
+        }
     }
-    &:nth-child(3):before {
-      background-image: url(http://10.10.11.7/images/overview/9.png);
+    .l-card {
+        display: flex;
+        margin-top: 20px;
+        li {
+            position: relative;
+            width: calc((100% - 40px) / 3);
+            height: 380px;
+            margin-right: 20px;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+        .pic {
+            width: 100%;
+            height: 100%;
+        }
+        .texts {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            padding: 140px 30px 0;
+            color: #fff;
+            background-color: rgba(0, 0, 0, 0.5);
+        }
+        h6 {
+            margin-bottom: 15px;
+            font-size: 1.6rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+        }
+        .text {
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            line-height: 2;
+            @include mul-ellipsis(4);
+        }
     }
-    &:nth-child(4):before {
-      background-image: url(http://10.10.11.7/images/overview/10.png);
+}
+.scan {
+    .scan-inner {
+        display: flex;
+        padding-left: 20%;
     }
-    &:nth-child(5):before {
-      background-image: url(http://10.10.11.7/images/overview/11.png);
+    .left {
+        width: 30%;
+        margin-right: 80px;
     }
-    &:nth-child(6):before {
-      background-image: url(http://10.10.11.7/images/overview/12.png);
+    .line {
+        display: flex;
+        align-items: center;
+        margin-bottom: 30px;
+        &:before {
+            content: '';
+            min-width: 50px;
+            width: 50px;
+            height: 50px;
+            margin-right: 20px;
+            background: url(http://10.10.11.7/images/overview/7.png) 0 0/100% 100% no-repeat;
+        }
+        &:nth-child(2):before {
+            background-image: url(http://10.10.11.7/images/overview/8.png);
+        }
+        &:nth-child(3):before {
+            background-image: url(http://10.10.11.7/images/overview/9.png);
+        }
+        &:nth-child(4):before {
+            background-image: url(http://10.10.11.7/images/overview/10.png);
+        }
+        &:nth-child(5):before {
+            background-image: url(http://10.10.11.7/images/overview/11.png);
+        }
+        &:nth-child(6):before {
+            background-image: url(http://10.10.11.7/images/overview/12.png);
+        }
+        &:nth-child(7):before {
+            background-image: url(http://10.10.11.7/images/overview/13.png);
+        }
+        .text {
+            font-size: 1rem;
+            font-family: PingFangSC-Medium, PingFang SC;
+            color: #333;
+            line-height: 1.6;
+            @include mul-ellipsis(2);
+        }
     }
-    &:nth-child(7):before {
-      background-image: url(http://10.10.11.7/images/overview/13.png);
+    .total {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 50px;
+        .num {
+            margin-bottom: 10px;
+            font-size: 2rem;
+            font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
+            font-weight: 800;
+            color: #1583ff;
+        }
+        .text {
+            font-size: 1rem;
+            color: #333;
+        }
     }
-    .text {
-      font-size: 1rem;
-      font-family: PingFangSC-Medium, PingFang SC;
-      color: #333;
-      line-height: 1.6;
-      @include mul-ellipsis(2);
+    .pic {
+        width: 70%;
+        height: 700px;
     }
-  }
-  .total {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 50px;
-    .num {
-      margin-bottom: 10px;
-      font-size: 2rem;
-      font-family: ToppanBunkyuMidashiMinchoStdN-ExtraBold, ToppanBunkyuMidashiMinchoStdN;
-      font-weight: 800;
-      color: #1583FF;
+}
+@media (max-width: 1400px) {
+    .history {
+        .texts {
+            flex-direction: column;
+        }
+        .left {
+            width: 100%;
+        }
+        .bg {
+            width: auto;
+            max-width: 100%;
+            height: auto;
+            margin-top: 20px;
+        }
     }
-    .text {
-      font-size: 1rem;
-      color: #333;
+    .scan {
+        .scan-inner {
+            flex-direction: column;
+            padding: 0 10%;
+        }
+        .left {
+            width: 100%;
+        }
+        .pic {
+            width: 100%;
+            margin-top: 2rem;
+        }
     }
-  }
-  .pic {
-    width: 70%;
-    height: 700px;
-  }
 }
 @media (max-width: 920px) {
-  .fac {
-    .card, .l-card {
-      flex-direction: column;
-      li {
-        width: 100%;
-        margin-bottom: 1rem;
-      }
+    .core {
+        .texts {
+            top: 20px;
+            left: 20px;
+            right: auto;
+        }
     }
-  }
-  .scan {
-    .scan-inner {
-      flex-direction: column;
-      padding: 0 10%;
-    }
-    .left {
-      width: 100%;
+    .fac {
+        .l-card {
+            flex-direction: column;
+            li {
+                width: 100%;
+                margin-bottom: 1rem;
+            }
+        }
     }
-    .pic {
-      width: 100%;
-      margin-top: 2rem;
-    }
-  }
 }
 @media (max-width: 640px) {
-  .about {
-    .inner {
-      flex-direction: column;
-    }
-    .pic {
-      width: 100%;
-      margin-bottom: 2rem;
+    .about {
+        .inner {
+            flex-direction: column;
+        }
+        .pic {
+            width: 100%;
+            margin-bottom: 2rem;
+        }
     }
-  }
 }
 </style>
diff --git a/src/pages/talentCentre/index.vue b/src/pages/talentCentre/index.vue
index a14249d..4a9ffbc 100644
--- a/src/pages/talentCentre/index.vue
+++ b/src/pages/talentCentre/index.vue
@@ -51,7 +51,27 @@
           </ul>
         </div>
 
-        <RightColumns />
+        <div class="right">
+          <el-tree class="column"
+                   ref="column"
+                   :data="modules[4].list"
+                   highlight-current
+                   :expand-on-click-node="false"
+                   :props="defaultProps"
+                   node-key="id"
+                   @node-click="columnClick"></el-tree>
+
+          <p class="l-title">人才资讯</p>
+          <ul class="list">
+            <li v-for="(item, i) in articles"
+                :key="i"
+                :title="item.title"
+                @click="toArtice(item)">
+              <p class="text">{{ item.title }}</p>
+              <span class="date">{{ item.releaseTime }}</span>
+            </li>
+          </ul>
+        </div>
       </div>
     </div>
   </div>
@@ -63,18 +83,19 @@ import articleMixins from '@/mixins/article';
 import Setting from '@/setting'
 import Util from '@/libs/util'
 import WOW from 'wow.js'
-import RightColumns from '@/components/rightColumns'
 export default {
   mixins: [mixins, articleMixins],
   data () {
     return {
       columnId: '',
       form: {},
+      defaultProps: {
+        value: 'id',
+        label: 'title'
+      },
+      articles: []
     }
   },
-  components: {
-    RightColumns
-  },
   mounted () {
 
   },
@@ -90,9 +111,22 @@ export default {
             data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
+
+          // 获取文章列表
+          const { column } = json[5].form
+          if (column.length) {
+            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
+              this.articles = Util.removeTag(data)
+            }).catch(err => { })
+          }
         }
       }).catch(err => { })
     },
+    columnClick (row) {
+      this.openLink(row)
+      console.log("🚀 ~ file: index.vue:126 ~ columnClick ~ row:", row)
+
+    }
   }
 };
 </script>
@@ -130,47 +164,46 @@ export default {
     .people {
         margin-top: 4rem;
         li {
-            display: flex;
-            align-items: center;
+            position: relative;
+            height: 450px;
             margin-bottom: 2rem;
             &:nth-child(even) {
-                flex-direction: row-reverse;
                 .texts {
-                    padding: 75px 83px 75px 40px;
-                    margin: 0 -50px 0 0;
+                    left: 50px;
+                    right: auto;
+                    background: rgba(255, 255, 255, 0.43);
                 }
             }
         }
         .pic {
-            width: 430px;
-            height: 430px;
+            width: 100%;
+            height: 100%;
         }
         .texts {
-            position: relative;
-            width: 530px;
-            height: 330px;
-            padding: 75px 41px 75px 83px;
-            margin-left: -50px;
-            background-color: rgba(247, 247, 247, 0.72);
+            position: absolute;
+            top: 60px;
+            right: 50px;
+            width: 380px;
+            padding: 50px 25px;
+            background: rgba(243, 251, 255, 0.82);
         }
         h6 {
             font-size: 1.2rem;
-
             font-family: PingFangSC-Semibold, PingFang SC;
             font-weight: 600;
-            color: #333;
+            color: #2a4b65;
         }
         .line {
             width: 93px;
             height: 1px;
             margin: 1rem 0;
-            background: #d8d8d8;
+            background: #3e6473;
         }
         .text {
+            margin-bottom: 1rem;
             font-size: 1rem;
-
             font-family: PingFangSC-Regular, PingFang SC;
-            color: #666;
+            color: #2a4b65;
             line-height: 1.6;
         }
     }
@@ -210,34 +243,46 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
+@media (max-width: 1400px) {
     .content {
-        .article {
-            flex-direction: column;
-            .left {
-                width: 100%;
-                .recruit {
-                    li {
-                        flex-direction: column;
-                        .pic {
-                            width: 100%;
-                        }
-                        .texts {
-                            margin-top: 0.8rem;
-                        }
-                    }
-                }
-                .notice {
+        width: 90%;
+    }
+    .article {
+        flex-direction: column;
+        .left {
+            width: 100%;
+            .recruit {
+                li {
                     flex-direction: column;
-                    li {
+                    .pic {
                         width: 100%;
                     }
+                    .texts {
+                        margin-top: 0.8rem;
+                    }
+                }
+            }
+            .notice {
+                flex-direction: column;
+                li {
+                    width: 100%;
                 }
             }
-            .right {
-                width: 100%;
-                .el-tree {
-                    display: none;
+        }
+        .right {
+            width: 100%;
+        }
+    }
+}
+@media (max-width: 480px) {
+    .article {
+        .left {
+            .people {
+                li {
+                    .texts {
+                        left: 10px;
+                        right: auto;
+                    }
                 }
             }
         }