提交 45544712 authored 作者: 龙菲's avatar 龙菲

修改菜单

上级 32591ff1
......@@ -29,29 +29,13 @@
v-for="(item, index) in pages"
:key="index"
@click="handleClickTab(item)"
@mouseenter="handleEnterTabItem(item)"
@mouseleave="handleLeaveTabItem(item)"
>
<!-- <div ></div> -->
<router-link :to="item.path">{{ item.name }} </router-link>
<!-- <div class="submenu" :style="{left:currentTabItem}">
<ul
class="submenu-container"
v-if="item.children && item.children.length > 0"
>
<li
v-for="(item, index) in item.children"
:key="index"
class="submenu-item"
>
{{ item.name }}
</li>
</ul>
</div> -->
<span @click="handleToPage(item.path)">{{ item.name }} </span>
</div>
</div>
<!-- <div class="submenu" v-if="currentMenu.name == '陈列展览'">
陈列展览的副菜单
</div> -->
<div class="tools animate__animated animate__fadeInRight">
<div class="wrapper">
<el-dropdown trigger="click">
......@@ -82,7 +66,26 @@
</div>
</div>
</div>
<transition name="el-zoom-in-top">
<div
class="submenu"
v-show="showSubMenu"
@mouseenter="handleEnterSubmenu"
@mouseleave="handleMouseLeaveSubMenu"
>
<ul>
<li>
<span @click="handleToPage('/display', true)">基本陈列</span>
<svg-icon icon-class="wenshi"></svg-icon>
</li>
<li>
<span @click="handleToPage('/boutique', true)">十大精品展</span>
<svg-icon icon-class="wenshi"></svg-icon>
</li>
<li><span @click="handleToPage('/virtual', true)">虚拟展厅</span></li>
</ul>
</div>
</transition>
<el-dialog
:visible.sync="loginVisible"
append-to-body
......@@ -271,36 +274,36 @@ export default {
name: "首页",
path: "/",
},
{
name: "虚拟展厅",
path: "/virtual",
},
{
name: "精品展",
path: "/boutique",
},
// {
// name: "陈列展览",
// path: "",
// children: [
// {
// name: "基本陈列展",
// path: "/display",
// },
// {
// name: "十大精品展",
// path: "/boutique",
// },
// {
// name: "虚拟展厅",
// path: "/virtual",
// },
// ],
// name: "虚拟展厅",
// path: "/virtual",
// },
// {
// name: "精品展",
// path: "/boutique",
// },
{
name: "展览展示",
name: "陈列展览",
path: "/display",
children: [
{
name: "基本陈列展",
path: "/display",
},
{
name: "十大精品展",
path: "/boutique",
},
{
name: "虚拟展厅",
path: "/virtual",
},
],
},
// {
// name: "展览展示",
// path: "/display",
// },
{
name: "文物展示",
path: "/culturalRelic",
......@@ -341,7 +344,7 @@ export default {
},
isLoginByUsername: true,
loadingText: "",
currentHoverMenu: {},
showSubMenu: false,
};
},
mounted() {
......@@ -470,12 +473,41 @@ export default {
}
},
handleEnterImg(item) {
this.currentHoverMenu = item;
handleToPage(path, isOpenNewPage) {
if (path) {
if (isOpenNewPage) {
const newPage = this.$router.resolve({
path,
});
window.open(newPage.href, "_blank");
} else {
this.$router.push(path);
}
}
},
handleEnterTabItem(item) {
if (item.name == "陈列展览") {
this.showSubMenu = true;
}
},
handleLeaveTabItem(item) {
if (item.name == "陈列展览" && this.showSubMenu) {
this.showSubMenu = false;
}
},
handleLeaveImg(item) {
this.currentHoverMenu = null;
handleEnterSubmenu() {
if (!this.showSubMenu) {
this.showSubMenu = true;
}
},
handleMouseLeaveSubMenu() {
if (this.showSubMenu) {
this.showSubMenu = false;
}
},
},
......@@ -486,6 +518,7 @@ export default {
</script>
<style lang="scss" scoped>
$themeColor: #2069c4;
.home-nav {
position: absolute;
top: 0;
......@@ -525,6 +558,7 @@ export default {
width: 100%;
transition: all 0.5s ease;
background-color: #2069c4;
// background-image: url('@/assets/imgs/home/panel-bg.png');
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
.container {
width: 100%;
......@@ -571,27 +605,56 @@ export default {
color: #fff;
display: flex;
align-items: center;
// font-family: "Alibaba-PuHuiTi";
font-family: "Alibaba-PuHuiTi";
position: relative;
height: 100%;
text-align: center;
&::after {
position: absolute;
content: "";
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 0;
height: 0;
border: 8px solid #fff;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid transparent;
opacity: 0;
transition: all ease 0.5s;
}
a {
font-size: 18px;
white-space: nowrap;
transition: all 0.5s ease;
color: #fff;
text-decoration: none;
&:hover::after {
opacity: 1;
}
&:hover {
a {
// color: #182f68;
color: #fff8a3;
// color: #5a4609;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
& > span {
transform: translateY(4px);
font-size: 20px;
display: inline-block;
position: relative;
&:hover {
cursor: pointer;
}
}
// a {
// font-size: 18px;
// white-space: nowrap;
// transition: all 0.5s ease;
// color: #fff;
// text-decoration: none;
// }
// &:hover {
// a {
// // color: #182f68;
// color: #fff8a3;
// // color: #5a4609;
// text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
// }
// }
.router-link-exact-active {
// color: #5a4609;
// color: #182f68;
......@@ -599,26 +662,43 @@ export default {
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
}
}
}
}
}
.submenu {
position: absolute;
top: 100px;
background: #f8f8f8;
color: #666;
width: 10vw;
.submenu-container{
display: flex;
.submenu-item{
margin-right: 10px;
}
.submenu {
background: #f8f8f8;
height: 50px;
display: flex;
justify-content: center;
position: absolute;
width: 100%;
z-index: 99;
border-bottom: 1px solid #f2f2f2;
ul {
display: flex;
align-items: center;
transform: translateX(50%);
li {
margin-right: 40px;
cursor: pointer;
&:hover {
span {
color: $themeColor;
}
}
.svg-icon {
margin-left: 40px;
}
}
}
}
}
::v-deep .tools {
.wrapper {
transform: translateY(4px);
}
.el-button {
background: transparent;
border-color: #fff;
......
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667958560807" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4301" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M228.24 329.99v-47.04c0-3.25-2.63-5.88-5.88-5.88h-89.98c-3.25 0-5.88-2.63-5.88-5.88V136.98c0-3.25 2.63-5.88 5.88-5.88h136.51c3.25 0 5.88 2.63 5.88 5.88v278.65c0 3.25 2.63 5.88 5.88 5.88h47.04c3.25 0 5.88-2.63 5.88-5.88V78.18c0-3.25-2.63-5.88-5.88-5.88H73.58c-3.25 0-5.88 2.63-5.88 5.88v251.8c0 3.25 2.63 5.88 5.88 5.88h148.78c3.25 0.01 5.88-2.63 5.88-5.87zM221.6 698.87h-80.02c-3.25 0-5.88-2.63-5.88-5.88V551.88c0-3.25 2.63-5.88 5.88-5.88h267.15c3.25 0 5.88-2.63 5.88-5.88v-47.04c0-3.25-2.63-5.88-5.88-5.88H82.78c-3.25 0-5.88 2.63-5.88 5.88v258.7c0 3.25 2.63 5.88 5.88 5.88H221.6c3.25 0 5.88-2.63 5.88-5.88v-47.04c0-3.24-2.64-5.87-5.88-5.87z" p-id="4302"></path><path d="M540.88 801.9h-47.04c-3.25 0-5.88 2.63-5.88 5.88v87.68c0 3.25-2.63 5.88-5.88 5.88H339.44c-3.25 0-5.88-2.63-5.88-5.88V608.38c0-3.25-2.63-5.88-5.88-5.88h-47.04c-3.25 0-5.88 2.63-5.88 5.88v345.87c0 3.25 2.63 5.88 5.88 5.88h260.24c3.25 0 5.88-2.63 5.88-5.88V807.78c0-3.25-2.63-5.88-5.88-5.88z" p-id="4303"></path><path d="M631.12 689.67H391.34c-3.25 0-5.88 2.63-5.88 5.88v47.04c0 3.25 2.63 5.88 5.88 5.88h239.79c3.25 0 5.88-2.63 5.88-5.88v-47.04a5.892 5.892 0 0 0-5.89-5.88zM493.85 240.52h47.04c3.25 0 5.88-2.63 5.88-5.88v-106.1c0-3.25 2.63-5.88 5.88-5.88h136.51c3.25 0 5.88 2.63 5.88 5.88v287.08c0 3.25 2.63 5.88 5.88 5.88h47.04c3.25 0 5.88-2.63 5.88-5.88V69.75c0-3.25-2.63-5.88-5.88-5.88H493.85c-3.25 0-5.88 2.63-5.88 5.88v164.89c0 3.24 2.63 5.88 5.88 5.88zM950.42 689.67H813.14c-3.25 0-5.88 2.63-5.88 5.88v47.04c0 3.25 2.63 5.88 5.88 5.88h78.48c3.25 0 5.88 2.63 5.88 5.88v141.11c0 3.25-2.63 5.88-5.88 5.88H759.71c-3.25 0-5.88-2.63-5.88-5.88V608.38c0-3.25-2.63-5.88-5.88-5.88h-47.04c-3.25 0-5.88 2.63-5.88 5.88v345.87c0 3.25 2.63 5.88 5.88 5.88h249.5c3.25 0 5.88-2.63 5.88-5.88v-258.7c0.01-3.25-2.63-5.88-5.87-5.88z" p-id="4304"></path><path d="M950.42 277.07H807c-3.25 0-5.88 2.63-5.88 5.88v47.04c0 3.25 2.63 5.88 5.88 5.88h84.62c3.25 0 5.88 2.63 5.88 5.88v139.58c0 3.25-2.63 5.88-5.88 5.88H607.6c-3.25 0-5.88 2.63-5.88 5.88v47.04c0 3.25 2.63 5.88 5.88 5.88h342.81c3.25 0 5.88-2.63 5.88-5.88V282.95c0.01-3.25-2.63-5.88-5.87-5.88zM493.85 386.23c-3.25 0-5.88 2.63-5.88 5.88V631.9c0 3.25 2.63 5.88 5.88 5.88h47.04c3.25 0 5.88-2.63 5.88-5.88V392.11c0-3.25-2.63-5.88-5.88-5.88h-47.04zM391.34 335.87h239.79c3.25 0 5.88-2.63 5.88-5.88v-47.04c0-3.25-2.63-5.88-5.88-5.88H391.34c-3.25 0-5.88 2.63-5.88 5.88v47.04c0 3.24 2.63 5.88 5.88 5.88z" p-id="4305"></path></svg>
\ No newline at end of file
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1667958566073" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4458" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M150.55 549.55h722.9c7.78 0 14.08-6.3 14.08-14.08v-46.95c0-7.78-6.3-14.08-14.08-14.08h-722.9c-7.78 0-14.08 6.3-14.08 14.08v46.95c0 7.78 6.31 14.08 14.08 14.08z" p-id="4459"></path><path d="M535.47 638.74c0-7.78 6.3-14.09 14.08-14.09h384.82c6.51 0 12.27-4.43 13.75-10.77 7.62-32.73 11.66-66.84 11.66-101.89 0-33.34-3.71-65.8-10.63-97.06-1.42-6.41-7.21-10.91-13.77-10.91H549.55c-7.78 0-14.08-6.3-14.08-14.08v-0.01c0-7.78 6.3-14.08 14.08-14.08h369.31c9.86 0 16.63-9.86 13.21-19.11-55.6-150.4-189.64-262.7-352.48-287.36-8.42-1.28-15.95 5.45-15.95 13.96v198.63c0 7.78 6.3 14.08 14.08 14.08h215.4c11.38 0 17.97-12.76 11.57-22.18-39.58-58.24-98.13-94-136.38-112.59-9.34-4.54-20.17 2.33-20.17 12.71v34.24c0 5.33 3.01 10.21 7.78 12.59l9.39 4.7c6.95 3.48 9.77 11.93 6.3 18.89v0.01c-3.48 6.95-11.93 9.77-18.89 6.3l-24.96-12.48a14.07 14.07 0 0 1-7.78-12.59v-93.89c0-9.5 9.21-16.27 18.28-13.44 6.39 1.99 157.07 50.43 215.29 186.27 3.98 9.29-2.83 19.63-12.94 19.63H549.55c-7.78 0-14.08-6.3-14.08-14.08V78.43c0-7.7-6.19-13.93-13.89-14.1-3.19-0.07-6.38-0.1-9.58-0.1s-6.4 0.04-9.58 0.1c-7.7 0.17-13.89 6.4-13.89 14.1v231.73c0 7.78-6.3 14.08-14.08 14.08H183.41c-10.11 0-16.92-10.33-12.94-19.63 58.22-135.84 208.9-184.28 215.29-186.27 9.07-2.84 18.28 3.94 18.28 13.44v93.89c0 5.33-3.01 10.21-7.78 12.59l-24.96 12.48c-6.95 3.48-15.41 0.66-18.89-6.3v-0.01c-3.48-6.95-0.66-15.41 6.3-18.89l9.39-4.7a14.07 14.07 0 0 0 7.78-12.59v-34.24c0-10.39-10.83-17.25-20.17-12.71-38.26 18.6-96.81 54.35-136.38 112.59-6.4 9.42 0.18 22.18 11.57 22.18h215.4c7.78 0 14.08-6.3 14.08-14.08V83.37c0-8.52-7.53-15.24-15.95-13.96-162.86 24.65-296.89 136.96-352.5 287.35-3.42 9.25 3.35 19.11 13.21 19.11h369.31c7.78 0 14.08 6.3 14.08 14.08v0.01c0 7.78-6.3 14.08-14.08 14.08H88.62c-6.56 0-12.35 4.5-13.77 10.91A448.38 448.38 0 0 0 64.22 512c0 35.05 4.04 69.16 11.66 101.89 1.48 6.34 7.24 10.77 13.75 10.77h384.82c7.78 0 14.08 6.3 14.08 14.08v0.01c0 7.78-6.3 14.08-14.08 14.08H106.98c-9.92 0-16.71 9.98-13.16 19.25 56.67 147.96 189.52 258.13 350.6 282.53 8.42 1.28 15.95-5.45 15.95-13.96V742.01c0-7.78-6.3-14.08-14.08-14.08H238.84c-11.91 0-18.61 14.03-10.86 23.08 42.61 49.72 93.06 82.08 127.21 100.23 9.39 4.99 20.67-1.82 20.67-12.46v-35.75c0-7.78 6.3-14.08 14.08-14.08h0.01c7.78 0 14.08 6.3 14.08 14.08v79.81c0 9.74-9.65 16.53-18.81 13.26-5.56-1.98-136.98-50.04-213.8-174.87-5.77-9.38 0.97-21.46 11.99-21.46h291.04c7.78 0 14.08 6.3 14.08 14.08v231.73c0 7.7 6.19 13.93 13.89 14.1 3.19 0.07 6.38 0.1 9.58 0.1s6.4-0.04 9.58-0.1c7.7-0.17 13.89-6.4 13.89-14.1V713.84c0-7.78 6.3-14.08 14.08-14.08h291.04c11.02 0 17.76 12.08 11.99 21.46-76.82 124.83-208.24 172.88-213.8 174.87-9.17 3.27-18.81-3.52-18.81-13.26v-79.81c0-7.78 6.3-14.08 14.08-14.08h0.01c7.78 0 14.08 6.3 14.08 14.08v35.75c0 10.64 11.28 17.45 20.67 12.46 34.16-18.16 84.6-50.52 127.21-100.23 7.75-9.05 1.06-23.08-10.86-23.08H577.71c-7.78 0-14.08 6.3-14.08 14.08v198.63c0 8.52 7.53 15.24 15.95 13.96 161.08-24.39 293.93-134.57 350.6-282.53 3.55-9.26-3.24-19.25-13.16-19.25H549.55c-7.78 0.01-14.08-6.29-14.08-14.07z m-427.16-75.1V460.36c0-7.78 6.3-14.08 14.08-14.08h779.23c7.78 0 14.08 6.3 14.08 14.08v103.28c0 7.78-6.3 14.08-14.08 14.08H122.39c-7.78 0-14.08-6.31-14.08-14.08z" p-id="4460"></path></svg>
\ No newline at end of file
......@@ -12,12 +12,12 @@ const routes = [
meta: {
keepAlive: true
}
},
},
{
path: '/404',
component: () => import('@/views/404.vue'),
hidden: true
},
},
// 首页
{
path: '/',
......@@ -127,24 +127,24 @@ const routes = [
keepAlive: false
}
},
// 文创
{
path: '/ccProduct',
name: 'ccProduct',
component: () => import('@/views/ccProduct'),
meta: {
keepAlive: true
}
},
// 文创详情
{
path: '/ccProduct/:bccpId',
name: 'ccProductDetail',
component: () => import('@/views/ccProduct/Detail.vue'),
meta: {
keepAlive: false
}
},
// 文创
{
path: '/ccProduct',
name: 'ccProduct',
component: () => import('@/views/ccProduct'),
meta: {
keepAlive: true
}
},
// 文创详情
{
path: '/ccProduct/:bccpId',
name: 'ccProductDetail',
component: () => import('@/views/ccProduct/Detail.vue'),
meta: {
keepAlive: false
}
},
// 404
{
......@@ -152,6 +152,15 @@ const routes = [
redirect: '/404',
}
]
/**
* 解决重复点击同一个路由报错的问题
*/
// 获取原型对象上的push函数
const originalPush = VueRouter.prototype.push
// 修改原型对象中的push方法
VueRouter.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
const router = new VueRouter({
routes,
......
......@@ -978,7 +978,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
font-family: $titleFontFamily;
cursor: pointer;
position: relative;
border: 1px solid $themeColor;
&:hover {
color: $themeColor;
......@@ -1210,8 +1210,8 @@ $titleFontFamily: SourceHanSerifCN-Bold;
// border: 2px solid $themeColor;
padding: 8px;
border-radius: 4px;
background: #999;
color: #fff;
// background: #999;
color: $themeColor;
display: flex;
justify-content: center;
cursor: pointer;
......@@ -1219,10 +1219,12 @@ $titleFontFamily: SourceHanSerifCN-Bold;
overflow: hidden;
width: 100%;
white-space: nowrap;
border: 1px solid $themeColor;
}
.active {
background: $themeColor;
color: #fff;
}
.swiper-button-next,
.swiper-button-prev {
......
<template>
<div class="display">
<!-- <NavBar /> -->
<ListBanner title="展览展示" />
<ListBanner title="基本陈列" />
<div class="content-wrapper">
<div class="content">
<div class="search wow animate__animated animate__fadeIn">
......@@ -120,7 +120,7 @@
<div class="left">
<div class="deptName">
<span>关键词:</span>
<span>{{ item.keyword ||'暂无' }}</span>
<span>{{ item.keyword || "暂无" }}</span>
</div>
<div class="deptName">
<span>展览单位:</span>
......@@ -186,7 +186,6 @@ export default {
value: "code",
label: "name",
children: "children",
},
onlyShow3d: false,
keyword: "",
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论