优化

src/assets/css/home.css

@@ -355,22 +355,6 @@ ul,li{
   }
 }
 @media (min-width: 1280px) {
-  .MenuListItem{
-    /* bottom: 65px; */
-  }
-  .MenuListLi.active .MenuListItem{
-    /* opacity: 1; */
-    /* bottom: 70px; */
-  }
-  .SubMenuListBox{
-    /* height: 166px; */
-  }
-  .MenuListLi.active .SubMenuListBox{
-    /* height: 186px; */
-  }
-  .carousel1-leftImg{
-    /* width: 100px */
-  }
   .homeContainer{
     max-width: 1280px;
     padding-left: 40px;
@@ -402,31 +386,7 @@ ul,li{
     left: -1.5rem;
   }
 }
-@media (min-width: 1366px) {
-  .MenuListItem{
-    /* bottom: 0; */
-  }
-  .MenuListLi.active .MenuListItem{
-    /* bottom: 0px; */
-  }
-}
 @media (min-width: 1440px) {
-  .MenuListItem{
-    /* bottom: 49px; */
-  }
-  .MenuListLi.active .MenuListItem{
-    /* opacity: 1; */
-    /* bottom: 70px; */
-  }
-  .SubMenuListBox{
-    /* height: 186px; */
-  }
-  .MenuListLi.active .SubMenuListBox{
-    /* height: 206px; */
-  }
-  .carousel1-leftImg{
-    /* width: 101px; */
-  }
   .swipercomSubEnLenR2{
     font-size: 1.8rem;
   }
@@ -491,18 +451,6 @@ ul,li{
   }
 }
 @media (min-width: 1800px) {
-  .MenuListItem{
-    /* bottom: -116px; */
-  }
-  .MenuListLi.active .MenuListItem{
-    /* bottom: -16px; */
-  }
-  .MenuListLi.active .SubMenuListBox{
-    /* height: 296px; */
-  }
-  .MenuListBox li{
-    padding-top: 40px;
-  }
   .swipercomSubEnLenR2{
     font-size: 2rem;
   }

src/components/home/indexNav.vue

@@ -3,14 +3,15 @@
   <q-page class="relative  gap-1 overflow-hidden animate__animated" @mouseleave="ClearData"
   :style="{'background-color':plugData.BgColor?plugData.BgColor:'#fff'}" style="height: 100vh;">
     <div class="absolute top0 right0 bottom0 left0 indexNavFormP row">
-        <div class="col column carousel1-left relative" @mouseenter="ClearData">
+        <div class="col column carousel1-left relative" @mouseenter.stop.prevent="ClearData">
           <!-- <div class="row justify-center" @mouseenter="ClearData">
             <q-img class="carousel1-leftImg" :src="plugData.Logo"/>
           </div> -->
-          <div class="text-center" style="padding-top: 5rem;">
+          <div class="text-center col" style="padding-top: 5rem;" @mouseenter.stop.prevent="ClearData">
             <img class="carousel1-leftImg inline-block" :src="plugData.Logo"/>
           </div>
-          <div class="col column" @mouseenter="ClearData" style="padding-top: 40px;flex-grow: 1;">
+          <div class="col column" style="position: relative; z-index: 2;">
+            <div class="column col" @mouseenter.stop.prevent="ClearData" style="padding-top: 40px;flex-grow: 1;">
               <ul class="column MenuListBox row relative">
                 <div class="p-x40 row no-wrap justify-center">
                   <template v-for="(item,index) in plugData.MenuList">
@@ -30,33 +31,27 @@
                             <span class="inline-block tracking-normal fontW100 remText">{{item.MenuSubName}}</span>
                           </p>
                         </div>
-                      <div class="MenuListItem"
-                      :class="[CurrentIndex==index?'':'']"></div>
                       </div>
-                    <!-- <div class="row justify-center items-center SubMenuListBox q-py-lg"
-                      :class="[CurrentIndex==index?'':'']">
-                        <div class="row justify-center">
-                          <template v-for="(items,i) in item.SubMenuList">
-                            <a class="SubMenuListText relative writing-modes-vertical
-                            remSubText font-serifEn tracking-2 q-px-xs cursor-pointer inline-block row items-center"
-                            @click="OpenNewUrl(items.LinkUrl)">
-                              <span>{{items.MenuName}}</span>
-                            </a>
-                            <div v-if="(item.SubMenuList.length-1)!=i" class="SubMenuListLin q-ma-xs row">&nbsp;</div>
-                          </template>
-
-                        </div>
-                    </div> -->
                     </li>
                   </template>
                 </div>
 
 
               </ul>
-            <ul class="col SubMenuListBox2" style="flex: 1;position: relative;"
+              <div class="col">
+                <div class="SubMenuListBox2 full-height full-width"
                 :style="{'z-index': CurrentIndex==null?0:2}">
+                  <ul class="MenuListBox row justify-center">
+                    <template v-for="(item,index) in plugData.MenuList">
+                      <li class="MenuListLi row justify-center cursor-pointer">
+                        <div class="cursor-pointer flex flex-col items-center relative">
+                            <div class="MenuListItem" :class="[CurrentIndex==index?'active':'']"></div>
+                        </div>
+                      </li>
+                    </template>
+                  </ul>
                   <template v-for="(item,index) in plugData.MenuList">
-                <div v-show="CurrentIndex==index" class="col row justify-center items-center SubMenuListBox q-py-lg"
+                    <div class="row justify-center items-center SubMenuListBox q-py-lg" v-if="CurrentIndex==index"
                       :class="[CurrentIndex==index?'active':'']" style="overflow: hidden;text-overflow: ellipsis;word-spacing: normal;">
                         <div class="row justify-center">
                           <template v-for="(items,i) in item.SubMenuList">
@@ -70,8 +65,9 @@
                         </div>
                     </div>
                   </template>
-            </ul>
-
+                </div>
+              </div>
+            </div>
             <ul class="BottomListBox absolute row justify-center">
               <li class="q-py-sm q-px-lg relative cursor-pointer" v-for="(item,index) in plugData.BottomList"
               @click.stop="OpenNewUrl(item.LinkUrl)" v-if="item.LinkUrl">
@@ -83,9 +79,9 @@
           </div>
         </div>
         <div class="carousel1-right overflow-hidden relative"
-        :class="[windowWidth>1280?'col':'col-12']" @mouseenter="ClearData">
+        :class="[windowWidth>1280?'col':'col-12']" @mouseenter.stop.prevent="ClearData">
           <template v-if="windowWidth>=768">
-            <q-img v-if="ImgObj.FileType!=2" class="carousel1-rightImg" @mouseenter="ClearData"
+            <q-img v-if="ImgObj.FileType!=2" class="carousel1-rightImg" @mouseenter.stop.prevent="ClearData"
             :class="[oldCoverImg!=coverImg?'active':'']"
             :src="coverImg" fill="contain"/>
             <q-img v-else alt="" :ratio="16/9" fill="cover">
@@ -267,26 +263,20 @@ export default {
   }
   .carousel1-leftImg{
     display: block;
-    /* margin-top: 6rem; */
   }
   .MenuListBox{
     padding: 0 40px;
-    /* min-height: 16rem; */
   }
   .MenuListBox li{
     width: 81px;
     padding-bottom: 15px;
   }
-  .MenuListLi{
-    /* height: 14rem; */
-    /* margin-top: 3rem; */
-  }
   .MenuListItem{
     position: absolute;
-    left: 10px;
-    bottom: -30px;
+    left: -5px;
+    bottom: -17px;
     opacity: 0;
-    transition: all .4s;
+    /* transition: all .4s; */
     z-index: 3;
   }
   .MenuListItem::after{
@@ -300,17 +290,16 @@ export default {
   .SubMenuListBox{
     width: 100%;
     height: 80%;
-    transition: all .4s;
-    opacity: 0;
+    /* transition: all .4s; */
+    opacity: 1;
     background-color: $primary;
     z-index: 3;
-
   }
   .SubMenuListBox.active{
     height: 100%;
     opacity: 1;
   }
-  .MenuListLi.active .MenuListItem{
+ .MenuListItem.active{
     opacity: 1;
     bottom: -8px;
   }
@@ -357,7 +346,8 @@ export default {
     left: 0;
     right: 0;
     bottom: 15px;
-    z-index: 0;
+    z-index: -1
+    ;
   }
   .BottomListBox li:hover a{
     color: $secondary;