From 3da320db774e76fc11eae350ff7e0be786294c3a Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Wed, 8 Feb 2023 17:14:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AD=E6=96=87=E7=B3=BB=E7=BB=9F=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/navbar/index.vue    |   2 +-
 src/pages/exp/index.vue         |  11 ++-
 src/pages/news/index.vue        |   9 +-
 src/pages/science/index.vue     |  18 ++--
 src/pages/sfel/index.vue        | 170 +++++++++++++++++++-------------
 src/pages/talent/index.vue      |  75 ++++++++++----
 src/pages/userSharing/index.vue |  23 +++--
 src/setting.js                  |   4 +-
 8 files changed, 203 insertions(+), 109 deletions(-)

diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index 022e270..31d7df2 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -63,7 +63,7 @@ export default {
       }).then(({ data }) => {
         this.menus = data
         if (data.length) {
-          if (!this.$route.query.id && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
+          if (!this.$route.query.id && !this.$route.query.articleId && this.$route.path !== '/column/result') this.$router.replace(`/column?id=${data[0].id}&siteId=${data[0].siteId}`)
           if (!this.active) this.active = data[0].id
           this.$nextTick(() => {
             const menu = document.querySelectorAll('.el-submenu')
diff --git a/src/pages/exp/index.vue b/src/pages/exp/index.vue
index 894e4ca..c5a6d43 100644
--- a/src/pages/exp/index.vue
+++ b/src/pages/exp/index.vue
@@ -13,8 +13,8 @@
 
     <div class="block station">
       <div class="inner">
-        <h6>实验线站</h6>
-        <p class="en">EXPERIMENT STATIONS</p>
+        <h6 class="wow fadeInUp">实验线站</h6>
+        <p class="en wow fadeInUp" data-wow-delay="0.5s">EXPERIMENT STATIONS</p>
         <img class="pic" :src="modules[1].form.pic" alt="">
         <div class="des">{{ modules[1].form.des }}</div>
       </div>
@@ -124,10 +124,17 @@ export default {
   li {
     position: relative;
     height: 542px;
+    overflow: hidden;
+    &:hover {
+      img {
+        transform: scale(1.3);
+      }
+    }
   }
   img {
     width: 100%;
     height: 100%;
+    transition: .5s;
   }
   h6 {
     position: absolute;
diff --git a/src/pages/news/index.vue b/src/pages/news/index.vue
index d36fd7a..5350c61 100644
--- a/src/pages/news/index.vue
+++ b/src/pages/news/index.vue
@@ -17,8 +17,8 @@
       </template>
     </ul>
 
-    <div class="block">
-      <div class="inner" v-if="modules[1].list[curColumn].articles.length">
+    <div class="block">{{curColumn}}
+      <div class="inner" v-if="modules[1].list[curColumn].articles && modules[1].list[curColumn].articles.length">
         <div class="news-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[1].list[curColumn])">
           <img width="50%" height="410" :src="curArticle.titleImg" alt="" onerror="javascript:this.src='./images/3.png';">
           <div class="right">
@@ -26,7 +26,7 @@
             <div class="des" v-html="curArticle.mainBody"></div>
             <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
             <ul class="inds">
-              <li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+              <li v-for="i in modules[1].list[curColumn].articles.length > 2 ? 3 : modules[1].list[curColumn].articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
             </ul>
           </div>
         </div>
@@ -264,7 +264,10 @@ export default {
             // 长页栏目直接获取path
             this.$router.push(`/${data.path}?id=${id}`).catch(err => {})
           } else {
+            this.curInd = 0
             this.curColumn = i
+            this.curArticle = this.modules[1].list[i].articles[0] || {}
+            this.carouselInterval()
           }
         }).catch(err => {})
       } else {
diff --git a/src/pages/science/index.vue b/src/pages/science/index.vue
index 0d4454a..c402025 100644
--- a/src/pages/science/index.vue
+++ b/src/pages/science/index.vue
@@ -13,21 +13,21 @@
 
     <div class="block">
       <div class="inner">
-        <div class="item" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+        <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
           <img src="@/assets/images/science/1.png" alt="">
           <div class="texts">
             <h6>{{ modules[1].form.title }}</h6>
             <div class="des">{{ modules[1].form.des }}</div>
           </div>
         </div>
-        <div class="item" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
+        <div class="item wow bounceInRight" data-wow-delay="0.8s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
           <img src="@/assets/images/science/2.png" alt="">
           <div class="texts">
             <h6>{{ modules[2].form.title }}</h6>
             <div class="des">{{ modules[2].form.des }}</div>
           </div>
         </div>
-        <div class="item" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
+        <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
           <img src="@/assets/images/science/3.png" alt="">
           <div class="texts">
             <h6>{{ modules[3].form.title }}</h6>
@@ -43,7 +43,6 @@
 import mixins from '@/mixins/page'
 import Setting from '@/setting'
 import Util from '@/libs/util'
-import Breadcrumb from '@/components/breadcrumb'
 import WOW from 'wow.js'
 export default {
   mixins: [mixins],
@@ -52,9 +51,6 @@ export default {
       routes: []
     }
   },
-  components: {
-    Breadcrumb
-  },
   mounted() {
     new WOW().init()
   },
@@ -86,6 +82,13 @@ export default {
 .item {
   position: relative;
   margin-bottom: 58px;
+  &:hover {
+    .texts {
+      color: #fff;
+      transform: scale(1.05);
+      background: #32b6e9 !important;
+    }
+  }
   img {
     width: 100%;
     height: 508px;
@@ -110,6 +113,7 @@ export default {
     padding: 70px 38px;
     color: #333;
     background: #FFF6E9;
+    transition: .5s;
   }
   h6 {
     margin-bottom: 14px;
diff --git a/src/pages/sfel/index.vue b/src/pages/sfel/index.vue
index f1a891e..0d74c1c 100644
--- a/src/pages/sfel/index.vue
+++ b/src/pages/sfel/index.vue
@@ -10,7 +10,7 @@
 
     <div class="block banner-block">
       <div class="inner">
-        <div class="title">
+        <div class="title wow fadeInUp">
           <h5>
             {{ modules[1].form.title }}
             <span class="sub">{{ modules[1].form.subTitle }}</span>
@@ -19,13 +19,15 @@
         </div>
         <template v-if="articles.length">
           <div class="sfel-banner wow fadeInDown" data-wow-delay="0.5s" @click="toArtice(curArticle, modules[2].form)">
-            <img width="50%" height="410" :src="curArticle.titleImg" alt="">
+            <div style="width: 50%;height: 410px;overflow: hidden;">
+              <img class="pic" width="100%" height="100%" :src="curArticle.titleImg" alt="">
+            </div>
             <div class="right">
               <h6>{{ curArticle.title }}</h6>
               <div class="des" v-html="curArticle.mainBody"></div>
               <p class="meta">{{ curArticle.createTime }} {{ curArticle.author && ' | ' + curArticle.author }}</p>
               <ul class="inds">
-                <li v-for="i in 3" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
+                <li v-for="i in articles.length > 2 ? 3 : articles.length" :key="i" :class="{active: curInd == i - 1}" @click.stop="switchCarousel(i - 1)"></li>
               </ul>
             </div>
           </div>
@@ -37,7 +39,7 @@
                 <div class="texts">
                   <p class="meta">{{ item.createTime }} {{ item.author && ' | ' + item.author }}</p>
                   <div class="des">{{ item.title }}</div>
-                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].list[curColumn])">
+                  <img class="arrow" src="@/assets/images/arrow.png" alt="" @click="toArtice(item, modules[2].form)">
                 </div>
               </li>
             </template>
@@ -48,7 +50,7 @@
 
     <div class="block notice">
       <div class="inner lg">
-        <div class="title">
+        <div class="title wow fadeInUp">
           <h5>
             {{ modules[3].form.title }}
             <span class="sub">{{ modules[3].form.subTitle }}</span>
@@ -61,7 +63,7 @@
               <template v-for="(item, i) in articles1">
                 <el-carousel-item v-if="i < 4" :key="i">
                   <div class="item">
-                    <img :src="item.titleImg" alt="">
+                    <img class="pic" :src="item.titleImg" alt="">
                     <p class="text">{{ item.title }}</p>
                   </div>
                 </el-carousel-item>
@@ -96,7 +98,7 @@
               </template>
             </ul>
             <div v-if="articles1.length > 10" class="slide">
-              <img :src="articles1[10].titleImg" alt="">
+              <img class="pic" :src="articles1[10].titleImg" alt="">
               <p class="text">{{ articles1[10].title }}</p>
             </div>
           </div>
@@ -106,7 +108,7 @@
 
     <div class="block conference">
       <div class="inner lg">
-        <div class="title">
+        <div class="title wow fadeInUp">
           <h5>
             {{ modules[5].form.title }}
             <span class="sub">{{ modules[5].form.subTitle }}</span>
@@ -115,7 +117,7 @@
         </div>
         <div class="shows" v-if="articles2.length">
           <div class="left wow fadeInLeft" data-wow-delay="0.5s" @click="toArtice(articles2[0], modules[6].form)">
-            <img width="100%" height="100%" :src="articles2[0].titleImg" alt="">
+            <img class="pic" width="100%" height="100%" :src="articles2[0].titleImg" alt="">
             <div class="text">{{ articles2[0].title }}</div>
           </div>
           <ul class="card-list wow fadeInRight" data-wow-delay="0.5s">
@@ -147,7 +149,7 @@
 
     <div class="block media">
       <div class="inner">
-        <div class="title">
+        <div class="title wow fadeInUp">
           <h5>
             {{ modules[7].form.title }}
             <span class="sub">{{ modules[7].form.subTitle }}</span>
@@ -175,8 +177,10 @@
               </template>
             </ul>
           </div>
-          <div v-if="articles3.length > 5" class="right">
-            <img :src="articles3[5].titleImg" alt="">
+          <div v-if="articles3.length > 5" class="right wow bounceInRight" data-wow-delay="0.8s">
+            <div class="img-wrap">
+              <img :src="articles3[5].titleImg" alt="">
+            </div>
             <div class="texts">
               <h6>{{ articles3[5].title }}</h6>
               <div class="des">{{ articles3[5].mainBody }}</div>
@@ -188,7 +192,7 @@
 
     <div class="block news">
       <div class="inner">
-        <div class="title">
+        <div class="title wow fadeInUp">
           <h5>
             {{ modules[9].form.title }}
             <span class="sub">{{ modules[9].form.subTitle }}</span>
@@ -209,7 +213,7 @@
     
     <div class="block program">
       <div class="inner">
-        <div class="title">
+        <div class="title wow fadeInUp">
           <h5>
             {{ modules[11].form.subTitle }}
             <span class="sub">{{ modules[11].form.subTitle }}</span>
@@ -223,7 +227,9 @@
               <div class="des">{{ articles4[0].title }}</div>
               <div class="meta">发表日期：{{ articles4[0].createTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div>
             </div>
-            <img class="pic" :src="articles4[0].titleImg" alt="">
+            <div class="img-wrap">
+              <img class="pic" :src="articles4[0].titleImg" alt="">
+            </div>
           </div>
           <ul class="list">
             <template v-for="(item, i) in articles3">
@@ -258,7 +264,6 @@ export default {
   data() {
     return {
       columns: [],
-      curColumn: 0,
       articles: [],
       articles1: [],
       articles2: [],
@@ -337,49 +342,6 @@ export default {
         this.curArticle = this.articles[this.curInd] || {}
       }
     },
-    // tab回调
-    tabChange(i) {
-      const { column } = this.modules[1].list[i]
-      if (column && column.length) {
-        const id = column[column.length - 1]
-        // 查询栏目详情
-        this.$post(`${this.api.findColumn}?id=${id}`).then(({ data }) => {
-          const { typeId } = data
-          // 跳转链接
-          if (typeId === 2) {
-            let href = data.linkAddress
-            const cType = data.connectionType
-            if (cType !== 2) { // 非站外链接
-              const ids = href.split('-') // 栏目文章是用-分割的，栏目是必选，文章不是必选。选择了文章则跳转到文章页，否则跳转到栏目页
-              // 站点id：站内链接取当前站点，其他站点链接取siteSelection
-              const site = cType === 1 ?
-                (this.$route.query.siteId || this.site) :
-                data.siteSelection
-              if (ids[1]) { // 文章
-                href = '/article?id=' + ids[1]
-              } else { // 栏目
-                const columnIds = ids[0].split(',')
-                href = '/column?id=' + columnIds[columnIds.length - 1]
-              }
-              href = this.$router.resolve(href + '&siteId=' + site).href
-            }
-            // 是否新窗口打开
-            if (data.isOpen) {
-              window.open(href)
-            } else {
-              location.href = href
-            }
-          } else if (typeId === 3) {
-            // 长页栏目直接获取path
-            this.$router.push(`/${data.path}?id=${id}`).catch(err => {})
-          } else {
-            this.curColumn = i
-          }
-        }).catch(err => {})
-      } else {
-        this.curColumn = i
-      }
-    },
   }
 };
 </script>
@@ -432,8 +394,10 @@ export default {
   display: flex;
   cursor: pointer;
   .pic {
-    width: 700px;
-    height: 380px;
+    transition: .5s;
+    &:hover {
+      transform: scale(1.3);
+    }
   }
   .right {
     position: relative;
@@ -535,9 +499,10 @@ export default {
     .item {
       position: relative;
       height: 100%;
-      img {
+      .pic {
         width: 100%;
         height: 100%;
+        transition: .5s;
       }
       .text {
         position: absolute;
@@ -550,22 +515,36 @@ export default {
         line-height: 59px;
         background-color: rgba(0, 0, 0, 0.57);
       }
+      &:hover {
+        .pic {
+          transform: scale(1.3);
+        }
+      }
     }
     .card-wrap {
       display: flex;
       margin-top: 18px;
+      .cards {
+        flex: 1;
+      }
     }
     .cards {
       padding: 20px;
       background-color: #fff;
+      transition: .5s;
+      &:hover {
+        transform: translateX(10px);
+      }
       h6 {
         margin-bottom: 10px;
         font-size: 18px;
         color: #48525E;
+        @include mul-ellipsis(2);
       }
       .sum {
         font-size: 14px;
         color: #6D7C8E;
+        @include mul-ellipsis(2);
       }
       .date {
         margin-top: 24px;
@@ -625,9 +604,11 @@ export default {
   .slide {
     position: relative;
     height: 284px;
-    img {
+    overflow: hidden;
+    .pic {
       width: 100%;
       height: 100%;
+      transition: .5s;
     }
     .text {
       position: absolute;
@@ -642,6 +623,11 @@ export default {
       color: #FFFFFF;
       background-color: rgba(0, 0, 0, 0.57);
     }
+    &:hover {
+      .pic {
+        transform: scale(1.3);
+      }
+    }
   }
 }
 .conference {
@@ -655,6 +641,7 @@ export default {
     height: 688px;
     margin-right: 20px;
     cursor: pointer;
+    overflow: hidden;
     .text {
       position: absolute;
       bottom: 0;
@@ -668,6 +655,14 @@ export default {
       color: #FFFFFF;
       background-color: rgba(0, 0, 0, 0.57);
     }
+    .pic {
+      transition: .5s;
+    }
+    &:hover {
+      .pic {
+        transform: scale(1.3);
+      }
+    }
   }
   .card-list {
     width: 784px;
@@ -695,10 +690,12 @@ export default {
       margin-bottom: 10px;
       font-size: 20px;
       color: #333;
+      @include mul-ellipsis(2);
     }
     .sum {
       font-size: 16px;
       color: #666;
+      @include mul-ellipsis(2);
     }
     .text {
       display: flex;
@@ -727,9 +724,11 @@ export default {
       position: relative;
       width: 366px;
       height: 197px;
+      overflow: hidden;
       img {
         width: 100%;
         height: 100%;
+        transition: .5s;
       }
       .text {
         position: absolute;
@@ -743,6 +742,11 @@ export default {
         @include ellipsis;
         background-color: rgba(0, 0, 0, 0.49);
       }
+      &:hover {
+        img {
+          transform: scale(1.3);
+        }
+      }
     }
     .list {
       padding: 34px 36px;
@@ -750,9 +754,13 @@ export default {
       box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
       li {
         margin-bottom: 41px;
+        transition: .5s;
         &:last-child {
           margin-bottom: 0;
         }
+        &:hover {
+          transform: scale(1.05);
+        }
       }
       h6 {
         margin-bottom: 17px;
@@ -772,13 +780,19 @@ export default {
   .right {
     width: 44%;
     box-shadow: 0px 0px 30px 0px rgba(48,48,48,0.08);
-    img {
+    transition: .5s;
+    .img-wrap {
       width: 100%;
       height: 422px;
+      overflow: hidden;
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      transition: .5s;
     }
     .texts {
       padding: 40px 28px;
-      background: #fff;
     }
     h6 {
       font-size: 24px;
@@ -793,6 +807,15 @@ export default {
       font-size: 16px;
       color: #666;
     }
+    &:hover {
+      background: #005388;
+      h6, .des {
+        color: #fff;
+      }
+      img {
+        transform: scale(1.3);
+      }
+    }
   }
 }
 .news {
@@ -871,9 +894,20 @@ export default {
       color: #666;
     }
   }
-  .pic {
+  .img-wrap {
     width: 49%;
     height: 430px;
+    overflow: hidden;
+  }
+  .pic {
+    width: 100%;
+    height: 100%;
+    transition: .5s;
+  }
+  &:hover {
+    .pic {
+      transform: scale(1.3);
+    }
   }
   .list {
     display: flex;
@@ -882,6 +916,7 @@ export default {
       padding: 36px 22px;
       margin-right: 14px;
       background: url(../../assets/images/sfel/7.png) 0 0/cover no-repeat;
+      transition: .5s;
       &:nth-child(2) {
         background-image: url(../../assets/images/sfel/8.png);
       }
@@ -889,6 +924,9 @@ export default {
         margin-right: 0;
         background-image: url(../../assets/images/sfel/9.png);
       }
+      &:hover {
+        transform: translateY(20px);
+      }
     }
     .des {
       margin-bottom: 30px;
diff --git a/src/pages/talent/index.vue b/src/pages/talent/index.vue
index e083ade..16f803e 100644
--- a/src/pages/talent/index.vue
+++ b/src/pages/talent/index.vue
@@ -13,15 +13,19 @@
 
     <div class="block talent">
       <div class="inner">
-        <div class="item" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
-          <img class="pic" :src="modules[1].form.pic" alt="">
+        <div class="item wow bounceInLeft" data-wow-delay="0.5s" :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}" @click="openLink(modules[1].form)">
+          <div class="img-wrap">
+            <img class="pic" :src="modules[1].form.pic" alt="">
+          </div>
           <div class="texts">
             <h6>{{ modules[1].form.title }}</h6>
             <div class="des">{{ modules[1].form.des }}</div>
           </div>
         </div>
-        <div class="item" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
-          <img class="pic" :src="modules[2].form.pic" alt="">
+        <div class="item wow bounceInRight" data-wow-delay="0.6s" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
+          <div class="img-wrap">
+            <img class="pic" :src="modules[2].form.pic" alt="">
+          </div>
           <div class="texts">
             <h6>{{ modules[2].form.title }}</h6>
             <div class="des">{{ modules[2].form.des }}</div>
@@ -31,7 +35,7 @@
     </div>
 
     <div class="style">
-      <h6>{{ modules[3].form.title }}</h6>
+      <h6 class="wow fadeInUp">{{ modules[3].form.title }}</h6>
       <el-carousel :interval="4000" type="card" height="510px">
         <template v-for="(item, i) in modules[4].list">
           <el-carousel-item v-if="item.isEnable" :key="i">
@@ -46,8 +50,10 @@
 
     <div class="block intro">
       <div class="inner">
-        <div class="item">
-          <img class="pic" :src="modules[5].form.pic" alt="">
+        <div class="item wow fadeInDown" data-wow-delay="0.1s">
+          <div class="img-wrap">
+            <img class="pic" :src="modules[5].form.pic" alt="">
+          </div>
           <div class="texts">
             <p class="type">{{ modules[5].form.subTitle }}</p>
             <h6>{{ modules[5].form.title }}</h6>
@@ -55,8 +61,10 @@
             <el-button v-if="isLink(modules[5].form.link.linkName)" type="primary" @click="openLink(modules[5].form)">查看更多</el-button>
           </div>
         </div>
-        <div class="item">
-          <img class="pic" :src="modules[6].form.pic" alt="">
+        <div class="item wow fadeInDown" data-wow-delay="0.3s">
+          <div class="img-wrap">
+            <img class="pic" :src="modules[6].form.pic" alt="">
+          </div>
           <div class="texts">
             <p class="type">{{ modules[6].form.subTitle }}</p>
             <h6>{{ modules[6].form.title }}</h6>
@@ -115,13 +123,16 @@ export default {
 }
 .talent {
   .inner {
-    width: 1504px;
+    width: 100%;
+    max-width: 1504px;
   }
   .item {
     display: flex;
     padding: 42px;
     margin-bottom: 36px;
+    color: #333;
     background: #fff;
+    transition: .5s;
     &:nth-child(even) {
       justify-content: space-between;
       flex-direction: row-reverse;
@@ -129,12 +140,25 @@ export default {
         padding-left: 0;
       }
     }
+    &:hover {
+      color: #fff;
+      background: #005388;
+      .pic {
+        transform: scale(1.1);
+      }
+    }
   }
-  .pic {
-    width: 602px;
+  .img-wrap {
     height: 465px;
+    overflow: hidden;
+  }
+  .pic {
+    width: 100%;
+    height: 100%;
+    transition: .5s;
   }
   .texts {
+    width: 707px;
     padding: 98px 72px 30px 80px;
   }
   h6 {
@@ -142,11 +166,9 @@ export default {
     font-size: 50px;
     font-family: PingFangSC-Light, PingFang SC;
     font-weight: 300;
-    color: #333333;
   }
   .des {
     font-size: 18px;
-    color: #333;
     line-height: 33px;
   }
 }
@@ -182,39 +204,52 @@ export default {
 }
 .intro {
   .inner {
-    width: 1504px;
+    width: 100%;
+    max-width: 1504px;
   }
   .item {
     display: flex;
     align-items: center;
     margin-bottom: 36px;
+    color: #333;
     background: #fff;
+    transition: .5s;
     &:nth-child(even) {
       flex-direction: row-reverse;
     }
+    &:hover {
+      color: #fff;
+      background: #465f85;
+      .pic {
+        transform: scale(1.1);
+      }
+    }
   }
-  .pic {
-    width: 848px;
+  .img-wrap {
     height: 505px;
+    overflow: hidden;
+  }
+  .pic {
+    width: 100%;
+    height: 100%;
+    transition: .5s;
   }
   .texts {
+    width: 45%;
     padding: 0 58px;
   }
   .type {
     font-size: 18px;
-    color: #333;
   }
   h6 {
     margin: 20px 0;
     font-size: 28px;
     font-family: PingFangSC-Medium, PingFang SC;
     font-weight: 500;
-    color: #333333;
   }
   .des {
     margin-bottom: 30px;
     font-size: 16px;
-    color: #333;
     line-height: 30px;
   }
 }
diff --git a/src/pages/userSharing/index.vue b/src/pages/userSharing/index.vue
index 3501810..5403b0b 100644
--- a/src/pages/userSharing/index.vue
+++ b/src/pages/userSharing/index.vue
@@ -14,12 +14,12 @@
     <div class="block share">
       <div class="inner">
         <div class="left">
-          <h6>用户共享</h6>
-          <p class="en">USERS SHARE</p>
-          <div class="des">{{ modules[1].form.des }}</div>
+          <h6 class="wow fadeInUp">用户共享</h6>
+          <p class="en wow fadeInUp" data-wow-delay="0.5s">USERS SHARE</p>
+          <div class="des wow fadeInUp" data-wow-delay="0.8s">{{ modules[1].form.des }}</div>
         </div>
-        <img class="pic" src="@/assets/images/userSharing/1.png" alt="">
-        <div class="card">
+        <img class="pic wow bounceInRight" data-wow-delay="0.8s" src="@/assets/images/userSharing/1.png" alt="">
+        <div class="card wow bounceInLeft" data-wow-delay="0.8s">
           <p class="title">高效运行、分类开放</p>
           <p class="en-text">EFFICIENT OPERATION, CLASSIFICATION OPEN</p>
         </div>
@@ -28,17 +28,17 @@
 
     <div class="block gray">
       <ul class="group">
-        <li :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
+        <li class="wow bounceInDown" :class="{'cursor-pointer': isLink(modules[2].form.link.linkName)}" @click="openLink(modules[2].form)">
           <img src="@/assets/images/userSharing/2.png" alt="">
           <h6>{{ modules[2].form.title }}</h6>
           <div class="des">{{ modules[2].form.des }}</div>
         </li>
-        <li :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
+        <li class="wow bounceInDown" data-wow-delay="0.1s" :class="{'cursor-pointer': isLink(modules[3].form.link.linkName)}" @click="openLink(modules[3].form)">
           <img src="@/assets/images/userSharing/3.png" alt="">
           <h6>{{ modules[3].form.title }}</h6>
           <div class="des">{{ modules[3].form.des }}</div>
         </li>
-        <li :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
+        <li class="wow bounceInDown" data-wow-delay="0.2s" :class="{'cursor-pointer': isLink(modules[4].form.link.linkName)}" @click="openLink(modules[4].form)">
           <img src="@/assets/images/userSharing/4.png" alt="">
           <h6>{{ modules[4].form.title }}</h6>
           <div class="des">{{ modules[4].form.des }}</div>
@@ -154,6 +154,12 @@ export default {
     padding: 195px 0 0 32px;
     margin-right: 20px;
     color: #fff;
+    overflow: hidden;
+    &:hover {
+      img {
+        transform: scale(1.3);
+      }
+    }
   }
   img {
     position: absolute;
@@ -161,6 +167,7 @@ export default {
     left: 0;
     width: 100%;
     height: 100%;
+    transition: .5s;
   }
   h6 {
     position: relative;
diff --git a/src/setting.js b/src/setting.js
index 5588148..48d4d16 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -6,8 +6,8 @@ let host = `${location.origin}/`
 if (isDev) {
     host = 'http://192.168.31.136:10000/' // 测试服
   //  host = 'https://31k70639y6.zicp.fun/' // 测试服
-  //  host = 'http://192.168.31.51:10000/' // 榕
-    // host = 'http://192.168.31.116:10000/' // 赓
+   host = 'http://192.168.31.51:10000/' // 榕
+    // host = 'http://192.168.31.116/' // 赓
 }
 
 const Setting = {