html部分
<template><div><div class="container demoHome d-flex a-center j-sb"><div class="logo"><img class="obj-auto" src="../assets/1.png" alt="" /></div><div class="flex-1 d-flex top_center"><divclass="ml-6 pointer":class="{ menuActive: menuIndex == index }"v-for="(item, index) in menuList":key="index"@click="changeMenu(index)"><span @mousemove="changeIndex(index)">{{ item }}</span></div></div><div class="userBox">立即登录</div></div><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 1"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">车辆{{ index }}</div></div></div></transition><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 2"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">购车{{ index }}</div></div></div></transition><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 4"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">客户{{ index }}</div></div></div></transition><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 5"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">企业{{ index }}</div></div></div></transition><div class="container d-flex"><div class="img_item" v-for="(item, index) in 5" :key="index"></div></div></div></template>
js部分
<script>export default {name: "",props: {},data() {return {menuIndex: 0,menuList: ["首页","车型","助手","商城","服务","企业天地","招募",],};},created() {},mounted() {},methods: {changeMenu(i) {this.menuIndex = i;},changeIndex(i) {this.menuIndex = i;},leave() {this.menuIndex = -1;},},};</script>
css部分
<style scoped>.demoHome {height: 10rem;}.logo {width: 32rem;height: 6rem;}.top_center {height: 10rem;line-height: 10rem;font-size: 20px;}.userBox {width: 10rem;}.menuActive {color: #435c9e;border-bottom: 0.3rem solid #435c9e;}.menu_xun {position: fixed;left: 50%;transform: translateX(-50%);overflow: hidden;background-color: #fff;}.menu_kuang {width: 100%;display: flex;flex-direction: row !important;flex-wrap: wrap;}.menuSlide-leave-active,.menuSlide-enter-active {transition: max-height 1s;}.menuSlide-enter,.menuSlide-leave-to {max-height: 0;}.menuSlide-enter-to,.menuSlide-leave {max-height: 500px;}.menu_iten {width: 23%;height: 220px;border: 1px solid #435c9e;}.img_item {width: 320px;height: 650px;background-image: url("../assets/g1.png");background-size: cover;background-position: center;}.imgBox {height: 430px;background-color: royalblue;}.title {height: 220px;background-color: pink;}.img_item:hover {animation: ani 1s;animation-fill-mode: forwards;}@keyframes ani {0% {background-size: 320px 650px;}50% {background-size: 350px 750px;}100% {background-size: 320px 650px;}}</style>
