修改虚拟展厅推荐

src/views/home/components/Virtural.vue

@@ -2,21 +2,17 @@
 <template>
   <div class="home-virtural">
     <div class="content-wrapper">
-      <div
-        class="title wow animate__animated animate__fadeInUp"
-        data-wow-offset="200"
-      >
+      <div class="title wow animate__animated animate__fadeInUp" data-wow-offset="200">
         <div class="ch">虚拟展厅</div>
         <div class="en">Virtual Exhibition Hall</div>
       </div>
       <el-row class="content" :gutter="100">
         <el-col :span="6" class="wow animate__animated animate__fadeInLeft">
-          <div class="intro" v-if="list.length > 0">
-            <div class="name">{{ list[0].name }}</div>
-            <div class="deptName">{{ list[0].deptName }}</div>
-            <div class="intro-content" v-html="list[0].intro"></div>
-            <!-- <EntranceIcon color="#fff" @click.native="handleClick(list[0])" /> -->
-            <div class="entrance" @click="handleClick(list[0])">
+          <div class="intro" v-if="currentItem">
+            <div class="name">{{ currentItem.name }}</div>
+            <div class="deptName">{{ currentItem.deptName }}</div>
+            <div class="intro-content" v-html="currentItem.intro"></div>
+            <div class="entrance" @click="handleClick(currentItem)">
               <svg-icon icon-class="quanjing"></svg-icon>
               <span>点击体验</span>
             </div>
@@ -25,25 +21,40 @@
         <el-col :span="18">
           <div class="virtual-items wow animate__animated animate__fadeInRight">
             <el-row :gutter="10">
-              <el-col
-                :span="12"
-                v-for="(item, index) in list"
-                :key="index"
-                @click.native="handleClick(item)"
-              >
+              <el-col :span="12" v-for="(item, index) in list" :key="index" @click.native="handleClick(item)"
+                @mouseenter.native="handleMouseEnter(item)" @mouseleave.native="handleMouseLeave()">
                 <div class="item">
-                  <img
-                    :src="
-                      $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
-                    "
-                    alt=""
-                  />
+                  <img :src="
+                    $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
+                  " alt="" />
                   <div class="name">{{ item.name }}</div>
                 </div>
               </el-col>
             </el-row>
           </div>
         </el-col>
+
+        <!-- <div class="intro" v-if="currentItem">
+          <div class="name">{{ currentItem.name }}</div>
+          <div class="deptName">{{ currentItem.deptName }}</div>
+          <div class="entrance" @click="handleClick(currentItem)">
+            <svg-icon icon-class="quanjing"></svg-icon>
+            <span>点击体验</span>
+          </div>
+        </div>
+        <div class="virtual-items wow animate__animated animate__fadeInRight">
+          <el-row :gutter="10">
+            <el-col :span="12" v-for="(item, index) in list" :key="index" @click.native="handleClick(item)"
+              @mouseenter.native="handleMouseEnter(item)" @mouseleave.native="handleMouseLeave()">
+              <div class="item">
+                <img :src="
+                  $getFullUrl(item.faceImagePressUrl || item.faceImageUrl)
+                " alt="" />
+                <div class="name">{{ item.name }}</div>
+              </div>
+            </el-col>
+          </el-row>
+        </div> -->
       </el-row>
     </div>
   </div>
@@ -58,6 +69,7 @@ export default {
   data() {
     return {
       list: [],
+      currentItem: null
     };
   },
   mounted() {
@@ -66,8 +78,11 @@ export default {
   methods: {
     async loadData() {
       let res = await getVrRecommend();
+
       if (res.code == 0) {
         this.list = res.data;
+        this.currentItem = this.list[0]
+        console.log(this.currentItem);
       }
     },
     handleClick(item) {
@@ -76,12 +91,21 @@ export default {
         window.open(item.url);
       }, 1000);
     },
+    handleMouseEnter(item) {
+      this.currentItem = item
+    },
+
+    handleMouseLeave() {
+      // this.currentItem = null
+    }
+
   },
 };
 </script>
 
 <style lang="scss" scoped>
 $blue: $themeColor;
+
 .home-virtural {
   display: flex;
   flex-direction: column;
@@ -92,6 +116,7 @@ $blue: $themeColor;
   background-repeat: no-repeat;
   background-position-y: 70%;
   overflow: hidden;
+
   .content-wrapper {
     .title {
       display: flex;
@@ -99,32 +124,39 @@ $blue: $themeColor;
       align-items: center;
       padding: 100px 0 80px 0;
       font-family: "Alibaba PuHuiTi";
+
       .ch {
         font-size: 30px;
         font-weight: bold;
         color: #333333;
         margin-bottom: 12px;
       }
+
       .en {
         font-size: 14px;
         color: #333333;
       }
     }
+
     .content {
-      min-width: 50vw;
+      width: 74vw;
+
       .intro {
         font-family: "Alibaba PuHuiTi";
         color: #ffffff;
         margin-top: 110px;
+        // width: 300px;
         .name {
           margin-bottom: 27px;
           font-size: 26px;
           font-weight: bold;
         }
+
         .deptName {
           font-size: 14px;
           margin-bottom: 50px;
         }
+
         .intro-content {
           margin-bottom: 60px;
           width: 258px;
@@ -136,6 +168,7 @@ $blue: $themeColor;
           -webkit-box-orient: vertical;
           line-height: 2;
         }
+
         .entrance {
           display: flex;
           justify-content: center;
@@ -146,50 +179,59 @@ $blue: $themeColor;
           font-size: 14px;
           cursor: pointer;
           transition: all ease 0.3s;
+
           &:hover {
             box-shadow: 2px 4px 4px 2px rgba(0, 0, 0, 0.3);
           }
-          .svg-icon{
+
+          .svg-icon {
             font-size: 20px;
             margin-right: 4px;
-           
+
           }
         }
       }
+
       .virtual-items {
         .item {
           margin-bottom: 5px;
           cursor: pointer;
           position: relative;
           overflow: hidden;
-          &:hover {
-            .name {
-              transform: translateY(0);
-            }
-            img {
-              transform: scale(1.1);
-            }
-          }
+
+
           img {
             width: 100%;
             height: 25vh;
             max-height: 225px;
             transition: all 0.5s ease;
+            object-fit: cover;
+            filter: grayscale(0.6);
           }
+
           .name {
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
-            background-color: rgba($color: #000000, $alpha: 0.4);
+            // background-color: rgba($color: #000000, $alpha: 0.4);
             color: #fff;
             // height: 80px;
             padding: 16px;
-            transform: translateY(100px);
+            // transform: translateY(100px);
             width: 100%;
             transition: all 0.5s ease;
           }
         }
+
+        .active,
+        .item:hover {
+
+          img {
+            transform: scale(1.1);
+            filter: grayscale(0);
+          }
+        }
       }
     }
   }