Skip to content

M
million
Commit d5214a43 authored by youjie's avatar youjie
Browse files
Options

优化

parent 55bec3be
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 116 deletions
src/assets/css/home.css
View file @ d5214a43
......@@ -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
View file @ d5214a43
......@@ -3,38 +3,56 @@
<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;">
<ul class="column MenuListBox row relative">
<div class="p-x40 row no-wrap justify-center">
<template v-for="(item,index) in plugData.MenuList">
<li class="MenuListLi row justify-center cursor-pointer"
:class="[CurrentIndex>=0&&CurrentIndex==index?' active':'']"
>
<div class="cursor-pointer flex flex-col items-center relative"
<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">
<li class="MenuListLi row justify-center cursor-pointer"
:class="[CurrentIndex>=0&&CurrentIndex==index?' active':'']"
>
<div class="row min-w-50px" v-on:mouseenter="handleMouseEnter($event,index)">
<div class="font-serifEn writing-modes-vertical p text-gray-700">
<span class="inline-block tracking-6 fontW300 remTetil">
{{item.MenuName}}
</span>
<div class="cursor-pointer flex flex-col items-center relative"
>
<div class="row min-w-50px" v-on:mouseenter="handleMouseEnter($event,index)">
<div class="font-serifEn writing-modes-vertical p text-gray-700">
<span class="inline-block tracking-6 fontW300 remTetil">
{{item.MenuName}}
</span>
</div>
<p class="font-serifEn writing-modes-vertical text-s text-secondary mlF5">
<span class="inline-block tracking-normal fontW100 remText">{{item.MenuSubName}}</span>
</p>
</div>
<p class="font-serifEn writing-modes-vertical text-s text-secondary mlF5">
<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?'':'']">
</li>
</template>
</div>
</ul>
<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 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">
<a class="SubMenuListText relative writing-modes-vertical
......@@ -44,34 +62,12 @@
</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;"
:style="{'z-index': CurrentIndex==null?0:2}">
<template v-for="(item,index) in plugData.MenuList">
<div v-show="CurrentIndex==index" class="col row justify-center items-center SubMenuListBox q-py-lg"
: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">
<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>
</template>
</div>
</template>
</ul>
</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;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment