From ad5d81c0b3c0aa111fa465285682f8eb196b2170 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Tue, 31 Oct 2023 11:40:51 +0800
Subject: [PATCH] fix

---
 src/pages/article/activity.vue   |  20 -
 src/pages/article/index.vue      |  75 ---
 src/pages/careers/index.vue      | 933 ++++++++-----------------------
 src/pages/column/index.vue       |   8 +-
 src/pages/industrial/index.vue   |  11 +-
 src/pages/newsPress/index.vue    |  63 ---
 src/pages/overview/index.vue     | 144 -----
 src/pages/publication/patent.vue |  13 +-
 src/pages/publication/thesis.vue |  72 +--
 src/pages/publish/show.vue       |  21 -
 src/pages/researchTeam/index.vue |  56 --
 src/pages/talentCentre/index.vue |  22 -
 src/pages/team/index.vue         |  22 -
 src/styles/page/publication.scss | 108 ++--
 14 files changed, 343 insertions(+), 1225 deletions(-)

diff --git a/src/pages/article/activity.vue b/src/pages/article/activity.vue
index 16ac024..13f8729 100644
--- a/src/pages/article/activity.vue
+++ b/src/pages/article/activity.vue
@@ -202,24 +202,4 @@ export default {
         font-size: 18px;
     }
 }
-@media (max-width: 1420px) {
-    .content {
-        width: 98%;
-    }
-}
-
-@media (max-width: 1200px) {
-    .banner {
-        height: 15rem;
-    }
-    .article {
-        flex-direction: column;
-        .left {
-            width: 100%;
-            h2 {
-                font-size: 1.5rem;
-            }
-        }
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/article/index.vue b/src/pages/article/index.vue
index cdfe64d..9e252b7 100644
--- a/src/pages/article/index.vue
+++ b/src/pages/article/index.vue
@@ -258,79 +258,4 @@ export default {
         }
     }
 }
-@media (max-width: 1420px) {
-    .content {
-        width: 98%;
-    }
-}
-@media (max-width: 1200px) {
-    .article {
-        /deep/.des {
-            img {
-                max-width: 100%;
-                height: 15rem;
-            }
-        }
-    }
-    .banner {
-        font-size: 1.5rem;
-    }
-    .article {
-        flex-direction: column;
-        .left {
-            width: 100%;
-            h2 {
-                font-size: 1.5rem;
-            }
-        }
-    }
-    .article {
-        .des {
-            img {
-                height: 15rem !important;
-            }
-        }
-    }
-}
-
-@media (max-width: 480px) {
-    .wrap {
-        .banner {
-            padding: 8rem 0 0 10rem;
-            height: 17rem;
-        }
-    }
-}
-@media (min-width: 480px) and (max-width: 640px) {
-    .wrap {
-        .banner {
-            padding: 12rem 0 0 10rem;
-            height: 20rem;
-        }
-    }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-    .wrap {
-        .banner {
-            padding: 14rem 0 0 10rem;
-            height: 22rem;
-        }
-    }
-}
-@media (min-width: 768px) and (max-width: 980px) {
-    .wrap {
-        .banner {
-            padding: 16rem 0 0 10rem;
-            height: 26rem;
-        }
-    }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-    .wrap {
-        .banner {
-            padding: 18rem 0 0 10rem;
-            height: 30rem;
-        }
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/careers/index.vue b/src/pages/careers/index.vue
index 22007fe..d37edf5 100644
--- a/src/pages/careers/index.vue
+++ b/src/pages/careers/index.vue
@@ -1,10 +1,15 @@
 <template>
   <div class="wrap">
-    <el-carousel :interval="6000" :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'" :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
+    <el-carousel :interval="6000"
+                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
+                 :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
       <template v-for="(item, i) in modules[0].list">
-        <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
-          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]" @click="openLink(item)">
-            <img :src="item.pic" alt="">
+        <el-carousel-item v-if="item.pic && item.isEnable"
+                          :key="i">
+          <div :class="['banner-item', {'cursor-pointer': isLink(item.link.linkName)}]"
+               @click="openLink(item)">
+            <img :src="item.pic"
+                 alt="">
             <p class="banner-name">{{ item.title }}</p>
           </div>
         </el-carousel-item>
@@ -14,44 +19,68 @@
     <div class="block">
       <div class="inner">
         <ul class="card">
-          <li class="wow fadeInDown" data-wow-delay="0.1s">
-            <img class="pic" :src="modules[1].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.1s">
+            <img class="pic"
+                 :src="modules[1].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[1].form.title }}</h6>
               <p class="text">{{ modules[1].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
+                   @click="openLink(modules[1].form)">
             </div>
           </li>
-          <li class="wow fadeInDown" data-wow-delay="0.3s">
-            <img class="pic" :src="modules[2].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.3s">
+            <img class="pic"
+                 :src="modules[2].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[2].form.title }}</h6>
               <p class="text">{{ modules[2].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}"
+                   @click="openLink(modules[2].form)">
             </div>
           </li>
-          <li class="wow fadeInDown" data-wow-delay="0.5s">
-            <img class="pic" :src="modules[3].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.5s">
+            <img class="pic"
+                 :src="modules[3].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[3].form.title }}</h6>
               <p class="text">{{ modules[3].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}"
+                   @click="openLink(modules[3].form)">
             </div>
           </li>
-          <li class="wow fadeInDown" data-wow-delay="0.7s">
-            <img class="pic" :src="modules[4].form.pic" alt="">
+          <li class="wow fadeInDown"
+              data-wow-delay="0.7s">
+            <img class="pic"
+                 :src="modules[4].form.pic"
+                 alt="">
             <div class="texts">
               <h6>{{ modules[4].form.title }}</h6>
               <p class="text">{{ modules[4].form.des }}</p>
             </div>
             <div class="arrow">
-              <img src="@/assets/images/arrow-white.png" alt="" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
+              <img src="@/assets/images/arrow-white.png"
+                   alt=""
+                   :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}"
+                   @click="openLink(modules[4].form)">
             </div>
           </li>
         </ul>
@@ -61,16 +90,26 @@
     <div class="block gray">
       <div class="inner">
         <h2 class="b-title wow fadeInUp">{{ modules[5].form.title }}</h2>
-        <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
+        <p class="intro wow fadeInUp"
+           data-wow-delay="0.5s">{{ modules[5].form.des }}</p>
         <ul class="people">
           <template v-for="(item, i) in modules[6].list">
-            <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(item.link.linkName)}" @click="openLink(item)">
-              <img class="comma" src="@/assets/images/comma.png" alt="">
+            <li v-if="item.isEnable"
+                :key="i"
+                class="wow fadeInDown"
+                data-wow-delay="0.5s"
+                :class="{'cursor-pointer': isLink(item.link.linkName)}"
+                @click="openLink(item)">
+              <img class="comma"
+                   src="@/assets/images/comma.png"
+                   alt="">
               <div class="left">
                 <h6>{{ item.title }}</h6>
                 <div class="des">{{ item.des }}</div>
               </div>
-              <img class="pic" :src="item.pic" alt="">
+              <img class="pic"
+                   :src="item.pic"
+                   alt="">
             </li>
           </template>
         </ul>
@@ -79,14 +118,23 @@
 
     <ul class="shows">
       <template v-for="(item, i) in modules[7].list">
-        <li v-if="item.isEnable" :key="i" class="wow fadeInDown" data-wow-delay="0.3s">
+        <li v-if="item.isEnable"
+            :key="i"
+            class="wow fadeInDown"
+            data-wow-delay="0.3s">
           <div class="left">
             <h6>{{ item.title }}</h6>
             <div class="sub">{{ item.subTitle }}</div>
             <div class="des">{{ item.des }}</div>
-            <img src="@/assets/images/arrow-white.png" alt="" class="icon" :class="{'arrow': isLink(item.link.linkName)}" @click="openLink(item)">
+            <img src="@/assets/images/arrow-white.png"
+                 alt=""
+                 class="icon"
+                 :class="{'arrow': isLink(item.link.linkName)}"
+                 @click="openLink(item)">
           </div>
-          <img class="pic" :src="item.pic" alt="">
+          <img class="pic"
+               :src="item.pic"
+               alt="">
         </li>
       </template>
     </ul>
@@ -100,17 +148,17 @@ import Util from '@/libs/util'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
-  data() {
+  data () {
     return {
-      
+
     }
   },
-  mounted() {
+  mounted () {
     new WOW().init()
   },
   methods: {
     // 获取文章详情
-    getInfo() {
+    getInfo () {
       // 预览/详情
       this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
         if (data.length) {
@@ -121,7 +169,7 @@ export default {
           this.modules = json
           console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
         }
-      }).catch(err => {})
+      }).catch(err => { })
     },
   }
 };
@@ -129,697 +177,200 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../plugins/wow/animate.css);
-@import "../../styles/page/page.scss";
-.wrap{
-  /deep/ .el-carousel {
-    height: 21.6rem;
-    .el-carousel__container{
-      height: 21.6rem;
-    }
-    img{
-      height: 21.6rem;
-    }
-  }
-}
-
-.banner-item {
-  .banner-name {
-    font-size: 2.16rem;
-  }
-}
-.block  {
-  padding: 3.15rem 0;
-  .inner {
-    .b-title  {
-      font-size: 2.25rem;
-      margin-bottom: 2.25rem;
-    }
-    .intro  {
-      margin-bottom: 6.9rem;
-    }
-   
-  }
-}
-.card {
-  display: flex;
-  justify-content: center;
-  li {
-    position: relative;
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    flex: 1;
-    height: 23.67rem;
-    color: #fff;
-    &:hover {
-      .arrow {
-        opacity: 1;
-      }
-    }
-    .pic {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .texts {
-      position: relative;
-    }
-    h6 {
-      margin-bottom: 10px;
-      font-size: 1.57rem;
-    }
-    .text {
-      font-size: 1.08rem;
-      text-align: center;
-    }
-    .arrow {
-      position: absolute;
-      bottom: 0;
-      width: 100%;
-      height: 7.9rem;
-      text-align: center;
-      background: #36404A;
-      opacity: 0;
-      transition: .3s;
-      cursor: default;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-}
-.people {
-  position: relative;
-  li {
-    position: relative;
-    padding: 4.5rem 3.15rem 4.5rem 2.565rem;
-    margin-bottom: 100px;
-    background-color: #fff;
-    transition: .3s;
-    &:hover {
-      transform: scale(1.05);
-    }
-    &:nth-child(even) {
-      display: flex;
-      justify-content: flex-end;
-      .comma {
-        left: 70%;
-      }
-      .pic {
-        left: 0;
-        right: auto;
-      }
-    }
-  }
-  .comma {
-    position: absolute;
-    top: -22px;
-    left: 57px;
-  }
-  .left {
-    width: 50%;
-  }
-  h6 {
-    font-size: 1.4rem;
-    color: #333;
-  }
-  .des {
-    margin-top: 20px;
-    font-size: 1.2rem;
-    color: #666;
-    line-height: 32px;
-  }
-  .pic {
-    position: absolute;
-    top: -60px;
-    right: 43px;
-    width: 40%;
-    height: auto;
-  }
-}
-.shows {
-  position: relative;
-  li {
-    position: relative;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: auto;
-    margin-bottom: 40px;
-    color: #fff;
-    &:hover .left {
-      h6, .sub, .des, .icon {
-        transform: translateY(20px);
-      }
-    }
-    &:nth-child(even) {
-      flex-direction: row-reverse;
-    }
-    &:nth-child(2) {
-      .left {
-        background-color: rgba(47, 79, 23, .65);
-      }
-    }
-    &:nth-child(3) {
-      .left {
-        width: 43%;
-        background-color: rgba(91, 58, 35, .65);
-      }
-    }
-  }
-  .left {
-    position: relative;
-    z-index: 1;
-    width: 43.333%;
-    height: 100%;
-    padding: 138px 30px 130px 103px;
-    background-color: rgba(54, 54, 54, .65);
-  }
-  .pic {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 100%;
-    height: 100%;
-  }
-  h6 {
-    font-size: 2.07rem;
-    transition: .3s;
-  }
-  .sub {
-    margin: 20px 0 20px 0;
-    font-size: 1.35rem;
-    transition: .3s;
-  }
-  .des {
-    margin-bottom: 40px;
-    font-size: 1.08rem;
-    transition: .3s;
-  }
-  .icon {
-    transition: .3s;
-  }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-  .wrap{
-  /deep/ .el-carousel {
-    height: 15rem;
-    .el-carousel__container{
-      height: 15rem;
-    }
-    img{
-      height: 15rem;
-    }
-  }
-}
- .block{ 
-  padding: 50px 0;
-  .inner {
-    width: 95%;margin: 0 auto;
-    .card{
-      flex-direction: column;
-      li{
-        margin-top: 20px;
-        width: 100%;
-        height: 27rem;
-      }
-    }
-    .people{
-      li {
-        padding: 200px 20px 30px;
-        .left {
-          width: 100%;
+@import '../../styles/page/page.scss';
+.wrap {
+    /deep/ .el-carousel {
+        height: 21.6rem;
+        .el-carousel__container {
+            height: 21.6rem;
         }
-        .pic{
-          top: -60px;
-          right: 13px;
-          width: 60%;
-          height: 12.5rem;
+        img {
+            height: 21.6rem;
         }
-      }
     }
-    
-  }
- }
- .shows{
-    li {
-      flex-direction: column;
-      align-items:flex-start;
-      height: 16rem;
-      .left {
-        padding: 10px ;
-        h6{
-          font-size: 1.5rem ;
-        }
-        .sub {
-          margin: .5rem;
-          font-size: 1rem;
-        }
-        .des{
-          margin-bottom: 1.25rem;
-        }
-        .icon {
-          width: 3.5rem;
-          height: 3.5rem;
-        }
-      }
-    }
-  }
 }
-@media (max-width: 320px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
+
+.banner-item {
     .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
-        li {
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40px;
-            height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        h6 {
-          font-size: 1rem;
-        }
-        .sub {
-          font-size: .9rem;
-        }
-        .des {
-          font-size: .88rem;
-          margin-bottom: .5rem;
-        }
-        .icon {
-          width: 2rem;height: 2rem;
-        }
-      }
+        font-size: 2.16rem;
     }
-  }
 }
-@media (min-width: 320px) and (max-width: 375px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
-        li {
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40px;
-            height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        h6 {
-          font-size: 1rem;
-        }
-        .sub {
-          font-size: .9rem;
-        }
-        .des {
-          font-size: .88rem;
-          margin-bottom: .5rem;
+.block {
+    padding: 3.15rem 0;
+    .inner {
+        .b-title {
+            font-size: 2.25rem;
+            margin-bottom: 2.25rem;
         }
-        .icon {
-          width: 2rem;height: 2rem;
+        .intro {
+            margin-bottom: 6.9rem;
         }
-      }
     }
-  }
 }
-@media (min-width: 375px) and (max-width: 480px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
-        li {
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40px;
-            height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
+.card {
+    display: flex;
+    justify-content: center;
     li {
-      height: auto;
-      .left {
-        h6 {
-          font-size: 1rem;
-        }
-        .sub {
-          font-size: .9rem;
+        position: relative;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        flex: 1;
+        height: 23.67rem;
+        color: #fff;
+        &:hover {
+            .arrow {
+                opacity: 1;
+            }
+        }
+        .pic {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+        .texts {
+            position: relative;
         }
-        .des {
-          font-size: .88rem;
-          margin-bottom: .5rem;
-        }
-        .icon {
-          width: 2rem;height: 2rem;
+        h6 {
+            margin-bottom: 10px;
+            font-size: 1.57rem;
+        }
+        .text {
+            font-size: 1.08rem;
+            text-align: center;
+        }
+        .arrow {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 7.9rem;
+            text-align: center;
+            background: #36404a;
+            opacity: 0;
+            transition: 0.3s;
+            cursor: default;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
-      }
     }
-  }
 }
-@media (min-width: 480px) and (max-width: 640px)  {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
-        li {
-          margin-bottom: 15rem;
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -40%;
-            height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
+.people {
+    position: relative;
     li {
-      height: auto;
-      .left {
-        padding: 2rem 2rem;
-      }
+        position: relative;
+        padding: 4.5rem 3.15rem 4.5rem 2.565rem;
+        margin-bottom: 100px;
+        background-color: #fff;
+        transition: 0.3s;
+        &:hover {
+            transform: scale(1.05);
+        }
+        &:nth-child(even) {
+            display: flex;
+            justify-content: flex-end;
+            .comma {
+                left: 70%;
+            }
+            .pic {
+                left: 0;
+                right: auto;
+            }
+        }
+    }
+    .comma {
+        position: absolute;
+        top: -22px;
+        left: 57px;
+    }
+    .left {
+        width: 50%;
     }
-  }
-}
-@media (min-width: 640px) and (max-width: 768px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    h6 {
+        font-size: 1.4rem;
+        color: #333;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .des {
+        margin-top: 20px;
+        font-size: 1.2rem;
+        color: #666;
+        line-height: 32px;
     }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
-        li {
-          padding: 10rem 1.25rem 1.5rem;
-          margin-bottom: 15rem;
-          .pic {
-            top: -60%;
-            height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        padding: 3rem 2rem;
-      }
+    .pic {
+        position: absolute;
+        top: -60px;
+        right: 43px;
+        width: 40%;
+        height: auto;
     }
-  }
 }
-@media (min-width: 768px) and (max-width: 980px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
-    }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
-    }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
-    }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
-    }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
-    }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
-        li {
-          margin-bottom: 20rem;
-          padding: 10rem 1.25rem 1.5rem;
-       
-          .pic {
-            top: -85%;
-            height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
+.shows {
+    position: relative;
     li {
-      height: auto;
-      .left {
-        padding: 4rem 2rem;
-      }
-    }
-  }
-}
-@media (min-width: 980px) and (max-width: 1200px) {
-  .wrap  {
-    /deep/ .el-carousel{
-      height: 12rem !important;
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: auto;
+        margin-bottom: 40px;
+        color: #fff;
+        &:hover .left {
+            h6,
+            .sub,
+            .des,
+            .icon {
+                transform: translateY(20px);
+            }
+        }
+        &:nth-child(even) {
+            flex-direction: row-reverse;
+        }
+        &:nth-child(2) {
+            .left {
+                background-color: rgba(47, 79, 23, 0.65);
+            }
+        }
+        &:nth-child(3) {
+            .left {
+                width: 43%;
+                background-color: rgba(91, 58, 35, 0.65);
+            }
+        }
+    }
+    .left {
+        position: relative;
+        z-index: 1;
+        width: 43.333%;
+        height: 100%;
+        padding: 138px 30px 130px 103px;
+        background-color: rgba(54, 54, 54, 0.65);
     }
-    /deep/ .el-carousel__container{
-      height: 12rem !important;
+    .pic {
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 100%;
+        height: 100%;
     }
-    /deep/  .el-carousel__item {
-      height: 12rem !important;
+    h6 {
+        font-size: 2.07rem;
+        transition: 0.3s;
     }
-  }
-  .banner-item{
-    img {
-      height: 12rem !important;
+    .sub {
+        margin: 20px 0 20px 0;
+        font-size: 1.35rem;
+        transition: 0.3s;
     }
-    .banner-name {
-      font-size: 1.5rem;
-      line-height: 1rem;
-      left: 2rem;
-      bottom: 2rem;
+    .des {
+        margin-bottom: 40px;
+        font-size: 1.08rem;
+        transition: 0.3s;
     }
-  }
-  .block {
-     padding: 1.25rem 0;
-     .inner {
-      .card {
-        li {
-          flex: none;
-          height: 25rem;
-          .pic {
-            height: 25rem;
-          }
-        }
-      }
-      .people {
-        li {
-          margin-bottom: 30rem;
-          padding: 10rem 1.25rem 1.5rem;
-          .pic {
-            top: -115%;
-            height: auto;
-          }
-        }
-      }
-      
-     }
-  }
-  .shows {
-    li {
-      height: auto;
-      .left {
-        padding: 4rem 2rem;
-      }
+    .icon {
+        transition: 0.3s;
     }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/column/index.vue b/src/pages/column/index.vue
index 7a99b67..4266a96 100644
--- a/src/pages/column/index.vue
+++ b/src/pages/column/index.vue
@@ -126,7 +126,8 @@
                      :props="defaultProps"
                      node-key="id"
                      icon-class="el-icon-arrow-down"
-                     @node-click="(item) => columnClick(item, 1)">
+                     @node-click="(item) => columnClick(item, 1)"
+                     @current-change="(item) => columnClick(item, 1)">
               <span class="custom-tree-node"
                     slot-scope="{ node, data }"
                     style="padding-left: 10px;">
@@ -367,7 +368,8 @@
                                class="type">
                               {{ item.classificationName }}
                             </p>
-                            <h6 class="titleDes">{{ item.title }}</h6>
+                            <h6 class="titleDes"
+                                :title="item.title">{{ item.title }}</h6>
                             <template v-if="item.listStyleId === 11 || item.listStyleId == 12 || item.listStyleId == 68">
                               <span class="meta">{{ item.releaseTime }}</span>
                               <div class="des"
@@ -746,6 +748,7 @@ export default {
     },
     // 点击栏目回调
     columnClick (to, left) {
+      console.log("🚀 ~ file: index.vue:749 ~ columnClick ~ to, left:", to, left)
       const { typeId } = to;
       // 如果是左边的栏目，并且是第一级，并且长页/链接，则不作反应
       if (left && to.level === 1 && (typeId === 2 || typeId === 3)) return false;
@@ -1206,6 +1209,7 @@ export default {
             margin-bottom: 0;
             font-size: 1rem;
             text-align: center;
+            -webkit-line-clamp: 1;
         }
     }
     .news-notice {
diff --git a/src/pages/industrial/index.vue b/src/pages/industrial/index.vue
index c1ba679..362a21c 100644
--- a/src/pages/industrial/index.vue
+++ b/src/pages/industrial/index.vue
@@ -82,16 +82,16 @@
 
     <div class="block">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp"
+        <h2 class="b-title"
+            :class="{'wow fadeInUp': $store.getters.getModelType}"
             v-html="modules[6].form.title"></h2>
         <p class="intro wow fadeInUp"
            data-wow-delay="0.5s">{{ modules[6].form.des }}</p>
         <ul class="app">
           <li v-for="(item, i) in modules[7].list"
               :key="i"
-              class="wow fadeInDown"
               :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
-              :class="{'cursor-pointer': isLink(item.link.linkName)}"
+              :class="{'cursor-pointer': isLink(item.link.linkName),'wow fadeInDown': $store.getters.getModelType}"
               @click="openLink(item)">
             <img class="bg"
                  :src="require('@/assets/images/industrial/app' + (i + 1) + '.png')"
@@ -107,12 +107,13 @@
 
     <div class="block news-block">
       <div class="inner">
-        <h2 class="b-title wow fadeInUp"
+        <h2 class="b-title"
+            :class="{'wow fadeInUp': $store.getters.getModelType}"
             v-html="modules[8].form.title"></h2>
         <p class="intro wow fadeInUp"
            data-wow-delay="0.5s">{{ modules[8].form.des }}</p>
         <ul class="news">
-          <li class="wow fadeInDown"
+          <li :class="{'wow fadeInDown': $store.getters.getModelType}"
               :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
               v-for="(item, i) in articles"
               :key="i"
diff --git a/src/pages/newsPress/index.vue b/src/pages/newsPress/index.vue
index 7af0dc5..38b7bb4 100644
--- a/src/pages/newsPress/index.vue
+++ b/src/pages/newsPress/index.vue
@@ -190,67 +190,4 @@ export default {
         height: 3.3rem;
     }
 }
-@media (max-width: 1520px) {
-    .list {
-        li {
-            &:nth-child(even) {
-                .texts {
-                    left: 25px;
-                }
-            }
-        }
-        .texts {
-            right: 25px;
-            width: 55%;
-        }
-    }
-}
-@media (min-width: 280px) and (max-width: 1200px) {
-    .wrap {
-        /deep/ .el-carousel {
-            height: 18rem;
-            .el-carousel__container {
-                height: 18rem;
-            }
-            img {
-                height: 18rem;
-            }
-        }
-    }
-    .banner-item .banner-name[data-v-1525064c] {
-        font-size: 1.5rem;
-    }
-
-    .inner {
-        width: 95%;
-        .list {
-            li {
-                margin-top: 20px;
-                .pic {
-                    width: 100%;
-                    height: 25rem !important;
-                }
-                .texts {
-                    padding: 10px 5px 10px !important;
-                    top: 30px;
-                    height: auto;
-                    h6 {
-                        font-size: 1.5rem !important;
-                    }
-                    p {
-                        font-size: 1rem;
-                        margin: 5px 0 !important;
-                        line-height: 1.5rem;
-                    }
-                    .sub {
-                        margin: 10px 0;
-                    }
-                    .des {
-                        margin-bottom: 10px;
-                    }
-                }
-            }
-        }
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/overview/index.vue b/src/pages/overview/index.vue
index 5c35fe9..8a7e416 100644
--- a/src/pages/overview/index.vue
+++ b/src/pages/overview/index.vue
@@ -389,148 +389,4 @@ export default {
         // height: 700px;
     }
 }
-@media (min-width: 2000px) {
-    .scan {
-        .scan-inner {
-            justify-content: flex-start;
-            padding-left: 22%;
-        }
-        .left {
-            width: 37%;
-        }
-        .pic {
-            width: 800px;
-        }
-    }
-}
-@media (min-width: 2400px) {
-    .scan {
-        .scan-inner {
-            padding-left: 24%;
-        }
-    }
-}
-@media (min-width: 2500px) {
-    .scan {
-        .scan-inner {
-            padding-left: 26%;
-        }
-    }
-}
-@media (min-width: 2800px) {
-    .scan {
-        .scan-inner {
-            padding-left: 29%;
-        }
-    }
-}
-@media (min-width: 3500px) {
-    .scan {
-        .scan-inner {
-            padding-left: 35%;
-        }
-        .left {
-            width: 32%;
-        }
-    }
-}
-@media (min-width: 5000px) {
-    .scan {
-        .scan-inner {
-            padding-left: 39.5%;
-        }
-        .left {
-            width: 20%;
-        }
-    }
-}
-@media (min-width: 6000px) {
-    .scan {
-        .scan-inner {
-            padding-left: 42%;
-        }
-    }
-}
-@media (max-width: 1800px) {
-    .scan .scan-inner {
-        padding-left: 14%;
-    }
-}
-@media (max-width: 1500px) {
-    .scan .scan-inner {
-        padding-left: 10%;
-    }
-}
-@media (max-width: 1400px) {
-    .history {
-        .texts {
-            flex-direction: column;
-        }
-        .left {
-            width: 100%;
-        }
-        .bg {
-            width: auto;
-            max-width: 100%;
-            height: auto;
-            margin: 20px 0 0 0;
-        }
-    }
-    .scan {
-        .scan-inner {
-            flex-direction: column;
-            padding: 0 10%;
-        }
-        .left {
-            width: 100%;
-        }
-        .pic {
-            width: 100%;
-            height: auto;
-            margin-top: 2rem;
-        }
-    }
-    .fac {
-        .event {
-            .texts {
-                position: static;
-                margin-top: 20px;
-            }
-        }
-    }
-}
-@media (max-width: 920px) {
-    .core {
-        .texts {
-            top: 20px !important;
-            left: 20px !important;
-            right: 20px !important;
-            width: auto;
-        }
-    }
-    .scan {
-        padding: 20px;
-    }
-    .fac {
-        .l-card {
-            flex-direction: column;
-            li {
-                width: 100%;
-                margin-bottom: 1rem;
-            }
-        }
-    }
-}
-@media (max-width: 750px) {
-    .core {
-        .texts {
-            position: static;
-            padding: 20px;
-            color: #333;
-        }
-        .line {
-            background: #333;
-        }
-    }
-}
 </style>
diff --git a/src/pages/publication/patent.vue b/src/pages/publication/patent.vue
index 5cd3eaa..8b9f95e 100644
--- a/src/pages/publication/patent.vue
+++ b/src/pages/publication/patent.vue
@@ -25,15 +25,10 @@
         </el-date-picker>
       </div>
       <div class="search">
-        <el-tooltip class="item"
-                    effect="dark"
-                    :content="$t('column.pleaseEnterPatentOfficer')"
-                    placement="top-start">
-          <input type="text"
-                 :placeholder="$t('column.pleaseEnterPatentOfficer')"
-                 v-model="form.patentQueryKeyWord"
-                 clearable>
-        </el-tooltip>
+        <input type="text"
+               :placeholder="$t('column.pleaseEnterPatentOfficer')"
+               v-model="form.patentQueryKeyWord"
+               clearable>
       </div>
     </div>
 
diff --git a/src/pages/publication/thesis.vue b/src/pages/publication/thesis.vue
index 5452ce4..bf9c7c2 100644
--- a/src/pages/publication/thesis.vue
+++ b/src/pages/publication/thesis.vue
@@ -3,30 +3,32 @@
     <div class="forms">
       <div class="item">
         <span class="label">{{$t('column.publicationyear')}}：</span>
-        <el-date-picker
-          style="width: 300px"
-          v-model="form.publicationYear"
-          type="year"
-          :placeholder="$t('column.pleaseSelectThePublicationTime')"
-          format="yyyy"
-          value-format="yyyy"
-          clearable
-          @change="initData">
+        <el-date-picker style="width: 300px"
+                        v-model="form.publicationYear"
+                        type="year"
+                        :placeholder="$t('column.pleaseSelectThePublicationTime')"
+                        format="yyyy"
+                        value-format="yyyy"
+                        clearable
+                        @change="initData">
         </el-date-picker>
       </div>
       <div class="search">
-        <el-tooltip class="item" effect="dark" :content="$t('column.PleaseEnterThePaperName')" placement="top-start">
-          <input type="text" :placeholder="$t('column.PleaseEnterThePaperName')" v-model="form.paperQueryKeyWord" clearable>
-        </el-tooltip>
+        <input type="text"
+               :placeholder="$t('column.PleaseEnterThePaperName')"
+               v-model="form.paperQueryKeyWord"
+               clearable>
       </div>
     </div>
 
     <ul class="list">
-      <li v-for="(item, i) in articles" :key="i" @click="$parent.toArtice(item)">
+      <li v-for="(item, i) in articles"
+          :key="i"
+          @click="$parent.toArtice(item)">
         <h6>{{ item.title }}</h6>
         <p class="meta">{{$t('column.author')}}: {{ item.author }}</p>
         <p class="meta">{{$t('column.journalName')}}: {{ item.periodicalName }}</p>
-        <p class="meta">{{$t('column.yearOfPublication')}}: {{ item.publicationYear }} &nbsp; &nbsp; {{$t('column.rollUp')}}: {{ item.reel }}   &nbsp; &nbsp; {{$t('column.documentNumber')}}: {{ item.documentNumber }}</p>
+        <p class="meta">{{$t('column.yearOfPublication')}}: {{ item.publicationYear }} &nbsp; &nbsp; {{$t('column.rollUp')}}: {{ item.reel }} &nbsp; &nbsp; {{$t('column.documentNumber')}}: {{ item.documentNumber }}</p>
       </li>
     </ul>
   </div>
@@ -36,7 +38,7 @@
 import Util from '@/libs/util';
 export default {
   props: ['id'],
-  data() {
+  data () {
     return {
       searchTimer: null,
       form: {
@@ -51,7 +53,7 @@ export default {
     }
   },
   watch: {
-    id() {
+    id () {
       this.id && this.initData()
     },
     'form.paperQueryKeyWord': function (val) {
@@ -61,12 +63,12 @@ export default {
       }, 500);
     }
   },
-  mounted() {
+  mounted () {
     this.initData()
   },
   methods: {
     // 查询文章列表
-    getArticle() {
+    getArticle () {
       this.id && this.$post(this.api.newlyPublishedArticles, {
         siteId: this.$route.query.siteId || this.$store.state.content.site,
         columnIds: this.id,
@@ -80,7 +82,7 @@ export default {
         })
         .catch((res) => { });
     },
-    initData() {
+    initData () {
       this.page = 1
       this.getArticle()
     },
@@ -89,22 +91,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import "../../styles/page/publication.scss";
+@import '../../styles/page/publication.scss';
 .list {
-  li {
-    padding: 30px;
-    margin-bottom: 15px;
-    background-color: #fff;
-    cursor: pointer;
-  }
-  h6 {
-    margin-bottom: 10px;
-    font-size: 1.2rem;
-  }
-  .meta {
-    font-size: 1rem;
-    color: #666;
-    line-height: 30px;
-  }
+    li {
+        padding: 30px;
+        margin-bottom: 15px;
+        background-color: #fff;
+        cursor: pointer;
+    }
+    h6 {
+        margin-bottom: 10px;
+        font-size: 1.2rem;
+    }
+    .meta {
+        font-size: 1rem;
+        color: #666;
+        line-height: 30px;
+    }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/publish/show.vue b/src/pages/publish/show.vue
index 37807fa..d72f54d 100644
--- a/src/pages/publish/show.vue
+++ b/src/pages/publish/show.vue
@@ -51,27 +51,6 @@
               <p class="name">DOI</p>
               <p class="val">{{ form.doi }}</p>
             </template>
-
-            <p class="l-title">{{$t('column.hot')}}</p>
-            <ul class="list">
-              <li v-for="(item, i) in hots"
-                  :key="i"
-                  :title="item.title"
-                  @click="toArtice(item)">
-                <p class="text">{{ item.title }}</p>
-                <span class="date">{{ item.releaseTime }}</span>
-              </li>
-            </ul>
-
-            <p class="l-title">{{$t('column.latestNews')}}</p>
-            <ul class="list">
-              <li v-for="(item, i) in news"
-                  :key="i"
-                  @click="toArtice(item)">
-                <p class="text">{{ item.title }}</p>
-                <span class="date">{{ item.releaseTime }}</span>
-              </li>
-            </ul>
           </div>
         </div>
       </div>
diff --git a/src/pages/researchTeam/index.vue b/src/pages/researchTeam/index.vue
index 1e423c3..f47ba9c 100644
--- a/src/pages/researchTeam/index.vue
+++ b/src/pages/researchTeam/index.vue
@@ -238,60 +238,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .content {
-        width: 95%;
-    }
-    .article {
-        flex-direction: column;
-        .left,
-        .right {
-            width: 100%;
-        }
-        .left {
-            margin-bottom: 30px;
-        }
-    }
-}
-@media (max-width: 980px) {
-    .article {
-        .team-wrap {
-            display: flex;
-            align-items: flex-start;
-        }
-        .letter {
-            flex-direction: column;
-            margin: 16px 10px 0 0;
-            .item {
-                border: 1px solid #dbdbdb;
-                border-top: 0;
-                &:first-child {
-                    border-top: 1px solid #dbdbdb;
-                    border-radius: 4px 4px 0 0;
-                }
-                &:last-child {
-                    border-radius: 0 0 4px 4px;
-                }
-            }
-        }
-        .teams {
-            flex: 1;
-        }
-    }
-}
-@media (max-width: 640px) {
-    .article {
-        .left {
-            .search {
-                width: 50%;
-            }
-        }
-        .teams {
-            flex-direction: column;
-            li {
-                width: 100%;
-            }
-        }
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/pages/talentCentre/index.vue b/src/pages/talentCentre/index.vue
index e0d085c..ce92f9d 100644
--- a/src/pages/talentCentre/index.vue
+++ b/src/pages/talentCentre/index.vue
@@ -71,28 +71,6 @@
               <span class="date">{{ item.releaseTime }}</span>
             </li>
           </ul>
-
-          <p class="l-title">{{$t('column.hot')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in hots"
-                :key="i"
-                :title="item.title"
-                @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
-
-          <p class="l-title">{{$t('column.latestNews')}}</p>
-          <ul class="list">
-            <li v-for="(item, i) in news"
-                :key="i"
-                :title="item.title"
-                @click="toArtice(item)">
-              <p class="text">{{ item.title }}</p>
-              <span class="date">{{ item.releaseTime }}</span>
-            </li>
-          </ul>
         </div>
       </div>
     </div>
diff --git a/src/pages/team/index.vue b/src/pages/team/index.vue
index 15cb983..104136d 100644
--- a/src/pages/team/index.vue
+++ b/src/pages/team/index.vue
@@ -124,26 +124,4 @@ export default {
         }
     }
 }
-@media (max-width: 1200px) {
-    .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;
-            }
-        }
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/styles/page/publication.scss b/src/styles/page/publication.scss
index e32f15a..478448b 100644
--- a/src/styles/page/publication.scss
+++ b/src/styles/page/publication.scss
@@ -1,64 +1,52 @@
 .forms {
-  display: flex;
-  align-items: center;
-  padding: 15px;
-  margin-bottom: 20px;
-  background-color: #fff;
-  .item {
-    display: inline-flex;
+    display: flex;
     align-items: center;
-    margin-right: 30px;
-  }
-  .label {
-    font-size: 16px;
-    color: #333;
-    white-space: nowrap;
-  }
-  /deep/.el-input__inner {
-    width: 100%;
-    height: 38px;
-    line-height: 38px;
-    border: 0;
-    background: #F7F7F7;
-  }
-  .search {
-    display: inline-flex;
-    width: 34%;
-    input {
-      width: 100%;
-      height: 38px;
-      padding: 0 15px;
-      font-size: 14px;
-      color: #333;
-      background: #F7F7F7;
-      border: 0;
-      border-top-left-radius: 6px;
-      border-bottom-left-radius: 6px;
-      &:focus {
-        outline: none;
-      }
+    padding: 15px;
+    margin-bottom: 20px;
+    background-color: #fff;
+    .item {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 30px;
     }
-  }
-  .icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 62px;
-    height: 38px;
-    background: #1583FF;
-    border-radius: 0px 6px 6px 0px;
-    cursor: pointer;
-  }
-}
-
-@media (max-width: 1200px) {
-  .forms {
-    padding: 1.25rem;
-    flex-direction: column;
-    .item, .search,div {
-      width: 80%;margin: 0 auto;
-      justify-content: center;
-      margin-top: 20px;
+    .label {
+        font-size: 16px;
+        color: #333;
+        white-space: nowrap;
+    }
+    /deep/.el-input__inner {
+        width: 100%;
+        height: 38px;
+        line-height: 38px;
+        border: 0;
+        background: #f7f7f7;
     }
-  } 
-}
\ No newline at end of file
+    .search {
+        display: inline-flex;
+        width: 34%;
+        input {
+            width: 100%;
+            height: 38px;
+            padding: 0 15px;
+            font-size: 14px;
+            color: #333;
+            background: #f7f7f7;
+            border: 0;
+            border-top-left-radius: 6px;
+            border-bottom-left-radius: 6px;
+            &:focus {
+                outline: none;
+            }
+        }
+    }
+    .icon {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        width: 62px;
+        height: 38px;
+        background: #1583ff;
+        border-radius: 0px 6px 6px 0px;
+        cursor: pointer;
+    }
+}