no message

src/assets/css/home.css

@@ -121,6 +121,18 @@ ul,li{
   width: 100%;
 }
 @media (min-width: 300px) {
+  .indexNavxcTM li{
+    padding: 5px 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 15px;
+  }
+  .indexNavxcTM{
+    margin-top: 0px;
+  }
+  .indexNavxcT{
+    padding-top: 50%;
+  }
   .homeContainer{
     max-width: 100%;
     padding-left: 10px;
@@ -219,6 +231,18 @@ ul,li{
   }
 }
 @media (min-width: 768px) {
+  .indexNavxcTM li{
+    padding: 10px 20px;
+    margin-left: 15px;
+    margin-right: 15px;
+    margin-bottom: 15px;
+  }
+  .indexNavxcTM{
+    margin-top: 50px;
+  }
+  .indexNavxcT{
+    padding-top: 20%;
+  }
   .gap-1{
     padding-bottom: 55px;
     padding-top: 55px;
@@ -284,6 +308,9 @@ ul,li{
   }
 }
 @media (min-width: 992px) {
+  .indexNavxcT{
+    padding-top: 20%;
+  }
   .swipercomTvR2Bj{
     top: 100%;
     left: 0;
@@ -355,6 +382,9 @@ ul,li{
   }
 }
 @media (min-width: 1280px) {
+  .indexNavxcT{
+    padding-top: 20%;
+  }
   .homeContainer{
     max-width: 1280px;
     padding-left: 40px;
@@ -387,6 +417,9 @@ ul,li{
   }
 }
 @media (min-width: 1440px) {
+  .indexNavxcT{
+    padding-top: 20%;
+  }
   .swipercomSubEnLenR2{
     font-size: 1.8rem;
   }
@@ -451,6 +484,9 @@ ul,li{
   }
 }
 @media (min-width: 1800px) {
+  .indexNavxcT{
+    padding-top: 20%;
+  }
   .swipercomSubEnLenR2{
     font-size: 2rem;
   }

src/components/home/indexNav.vue

 <template>
   <!--  @mouseleave="ClearData" -->
-  <q-page class="relative  gap-1 overflow-hidden animate__animated" @mouseleave="ClearData"
+  <q-page class="relative  gap-1 overflow-hidden animate__animated duration5" @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.stop.prevent="ClearData">
@@ -40,7 +40,8 @@
               </ul>
               <div class="col">
                 <div class="SubMenuListBox2 full-height full-width"
-                :style="{'z-index': CurrentIndex==null?0:2}">
+                :style="{'z-index': CurrentIndex==null?0:2}"
+                :class="[CurrentIndex==null?'':'full-height full-width animate__fadeInUpBig']">
                   <ul class="MenuListBox row justify-center">
                     <template v-for="(item,index) in plugData.MenuList">
                       <li class="MenuListLi row justify-center cursor-pointer">
@@ -51,8 +52,8 @@
                     </template>
                   </ul>
                   <template v-for="(item,index) in plugData.MenuList">
-                    <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 items-center SubMenuListBox q-py-lg" v-show="CurrentIndex==index"
+                      :class="[CurrentIndex==index?'full-height full-width active':'']" style="overflow: hidden;text-overflow: ellipsis;word-spacing: normal;">
                         <div class="row justify-center">
                           <template v-for="(items,i) in item.SubMenuList">
                             <a class="SubMenuListText relative writing-modes-vertical
@@ -122,9 +123,9 @@
                     <li @click="CurrentIndex=index">{{item.MenuName}}</li>
                   </template>
                 </ul> -->
-                <ul class="row indexNavxcTM">
+                <ul class="row indexNavxcTM justify-center">
                   <template v-for="(item,index) in plugData.MenuList">
-                      <li v-for="(items,i) in item.SubMenuList" @click.stop="OpenNewUrl(items.LinkUrl)">{{items.MenuName}}</li>
+                      <li @click.stop="OpenNewUrl(item.LinkUrl)">{{item.MenuName}}</li>
                   </template>
                 </ul>
                 <ul class="BottomListBox absolute row justify-center" style="bottom: 0;">
@@ -212,7 +213,6 @@ export default {
     margin-left: 10px;
     margin-right: 10px;
     margin-bottom: 10px;
-    padding: 0 5px;
     background: $secondary;
     color: #fff;
   }
@@ -222,9 +222,7 @@ export default {
   .indexNavxcT p:first-child{
     font-size: 18px;
   }
-  .indexNavxcT{
-    padding-top: 50%;
-  }
+
   .indexNavxcIcon{
     color: $secondary;
   }
@@ -289,14 +287,12 @@ export default {
   }
   .SubMenuListBox{
     width: 100%;
-    height: 80%;
-    /* transition: all .4s; */
-    opacity: 1;
+    transition: all .4s;
+    opacity: 0;
     background-color: $primary;
     z-index: 3;
   }
   .SubMenuListBox.active{
-    height: 100%;
     opacity: 1;
   }
  .MenuListItem.active{