'校园风采ui'

pages/about/contact.vue

@@ -115,7 +115,7 @@
           </div> 
         </div>
         <div class="campus-content-box">
-          <div class="campus-item" v-for="(item, index) in campusList" :key="index">
+          <div :class="['campus-item', item.id == currentId ? 'active' : '']" v-for="(item, index) in campusList" :key="index" @mouseenter="campusEnter(item)">
             <div class="img">
               <img :src="item.imgUrl" alt="" srcset="">
             </div>
@@ -141,24 +141,30 @@ export default {
     return {
       title: '联系我们',
       bgImage: require('~/assets/images/about/about_contact.png'),
+      currentId: 1,
       campusList: [
         {
+          id: 1,
           imgUrl: require('~/assets/images/about/interest_02.png'),
           title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
         },
         {
+          id: 2,
           imgUrl: require('~/assets/images/about/interest_02.png'),
           title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
         },
         {
+          id: 3,
           imgUrl: require('~/assets/images/about/interest_02.png'),
           title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
         },
         {
+          id: 4,
           imgUrl: require('~/assets/images/about/interest_02.png'),
           title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
         },
         {
+          id: 5,
           imgUrl: require('~/assets/images/about/interest_02.png'),
           title: '武商亚贸广场的小小夏令营来啦，参加小小夏令营的小朋友，从此就爱上'
         }
@@ -194,7 +200,12 @@ export default {
     }
   },
   methods: {
-
+    campusEnter(item) {
+      this.currentId = item.id;
+    },
+    handleClick(item) {
+      console.log(item.id);
+    }
   }
 }
 </script>
@@ -435,18 +446,27 @@ export default {
       &:nth-child(3n) {
         margin-right: 0;
       }
-      &:hover {
+      &.active {
         // transform: scale(1.1);
         // padding: 18px 18px 32px 18px;
         background:#ffffff;
         border-bottom: 2px solid rgba(35,106,250,1);
         box-shadow:0px 4px 20px 0px rgba(150,150,150,0.22);
+        transition: 0.5;
         // border-radius: 20px;
         // margin-bottom: 52px;
         .desc {
           transform: scale(1.0);
         }
       }
+      &:hover {
+        // background:#ffffff;
+        // border-bottom: 2px solid rgba(35,106,250,1);
+        // box-shadow:0px 4px 20px 0px rgba(150,150,150,0.22);
+        // .desc {
+        //   transform: scale(1.0);
+        // }
+      }
       img {
         width: 100%;
         height: 192px;

pages/cooperate/index.vue

@@ -133,7 +133,7 @@
         <div class="label-zn wow animate__animated animate__fadeInDown">校园风采</div>
       </div>
       <div class="show-box">
-        <div class="show-item" v-for="item in showImg" :key="item.id">
+        <div :class="['show-item', item.id == currentId ? 'active' : '']" v-for="item in showImg" :key="item.id" @mouseenter="campusEnter(item)">
           <div class="ani-box">
             <img :src="item.imgUrl" alt="">
             <div class="text">{{item.label}}</div>
@@ -354,6 +354,7 @@ export default {
   },
   data() {
     return {
+      currentId: 0,
       form: {},
       bottomform: {},
       advantageImg,
@@ -429,7 +430,10 @@ export default {
           return false;
         }
       });
-    }
+    },
+    campusEnter(item) {
+      this.currentId = item.id;
+    },
   },
 };
 </script>
@@ -868,13 +872,15 @@ export default {
             overflow: hidden;
           }
         }
-      }
-      .ani-box:hover {
-        background-color: #fff;
-        transition: background-color 4s;
-        box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.22);
-        border-bottom: 1px solid blue;
-        box-sizing: border-box;
+        &.active {
+          .ani-box {
+            background-color: #fff;
+            transition: background-color 4s;
+            box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.22);
+            border-bottom: 1px solid blue;
+            box-sizing: border-box;
+          }
+        }
       }
     }
   }

pages/news/index.vue

@@ -2,7 +2,6 @@
 	<div class="container news">
     <div class="banner">
       <div class="banner-content">
-        <h3 class="title">NEWS</h3>
         <h3 class="title">新闻中心</h3>
       </div>
     </div>
@@ -170,10 +169,11 @@ export default {
       align-items: center;
       height: 100%;
       .title {
-        font-size: 80px;
+        font-size: 66px;
+        font-family: PingFangSC-Medium, sans-serif;
+        line-height: 92px;
         font-weight: 500;
         color: #FFFFFF;
-        line-height: 112px;
       }
     }
   }