Skip to content

E
exhibition_page
提交 0c3020d8 authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

陈列展示右侧增加下拉图标，强调有二级菜单

上级 94b6f454
隐藏空白字符变更
内嵌 并排
正在显示 包含 79 行增加 和 114 行删除
src/components/NavBar/index.vue
浏览文件 @ 0c3020d8
<template>
<div
:class="{
nav: true,
'header-fixed ': isFixed,
'home-nav': isHome || isBoutique,
'show-themeColor':isFixed&&isHome,
isChStyle: navbarStyle == '2' ,
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4'&& isFixed,
isSMGZ: navbarStyle == '5'&& isFixed,
isJYYCC: navbarStyle == '6'&& isFixed,
isYLGDYW: navbarStyle == '7'&& isFixed,
}"
id="navbar"
>
<div :class="{
nav: true,
'header-fixed ': isFixed,
'home-nav': isHome || isBoutique,
'show-themeColor': isFixed && isHome,
isChStyle: navbarStyle == '2',
isRedStyle: navbarStyle == '3',
isSDCS: navbarStyle == '4' && isFixed,
isSMGZ: navbarStyle == '5' && isFixed,
isJYYCC: navbarStyle == '6' && isFixed,
isYLGDYW: navbarStyle == '7' && isFixed,
}" id="navbar">
<div class="container">
<div class="logo-container animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo3.png" />
......@@ -21,19 +18,13 @@
</div>
<div class="right">
<div class="tabs animate__animated animate__fadeInUp">
<div
class="tab-item"
:class="{
activeHome: currentTab.name == item.name && isHome,
active: currentTab.name == item.name,
}"
v-for="(item, index) in pages"
:key="index"
@click="handleClickTab(item)"
@mouseenter="handleEnterTabItem(item)"
@mouseleave="handleLeaveTabItem(item)"
>
<div class="tab-item" :class="{
activeHome: currentTab.name == item.name && isHome,
active: currentTab.name == item.name,
}" v-for="(item, index) in pages" :key="index" @click="handleClickTab(item)"
@mouseenter="handleEnterTabItem(item)" @mouseleave="handleLeaveTabItem(item)">
<span @click="handleToPage(item.path)">{{ item.name }} </span>
<i v-if="item.name == '陈列展览'" class="el-icon-arrow-down" style="transform: translate(30%,30%);cursor: pointer;"></i>
</div>
</div>
......@@ -45,19 +36,10 @@
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
v-if="!hasToken"
@click.native="handleToLogin"
class="operation-item"
>登陆
<el-dropdown-item v-if="!hasToken" @click.native="handleToLogin" class="operation-item">登陆
</el-dropdown-item>
<el-dropdown-item
v-if="hasToken"
class="operation-item"
@click.native="handleToPersonal"
>
个人中心</el-dropdown-item
>
<el-dropdown-item v-if="hasToken" class="operation-item" @click.native="handleToPersonal">
个人中心</el-dropdown-item>
<el-dropdown-item v-if="hasToken" @click.native="handleLogOut">
<span>退出</span>
</el-dropdown-item>
......@@ -68,12 +50,7 @@
</div>
</div>
<transition name="el-zoom-in-top">
<div
class="submenu"
v-show="showSubMenu"
@mouseenter="handleEnterSubmenu"
@mouseleave="handleMouseLeaveSubMenu"
>
<div class="submenu" v-show="showSubMenu" @mouseenter="handleEnterSubmenu" @mouseleave="handleMouseLeaveSubMenu">
<ul>
<li>
<span @click="handleToPage('/display', true)">基本陈列</span>
......@@ -87,92 +64,45 @@
</ul>
</div>
</transition>
<el-dialog
:visible.sync="loginVisible"
append-to-body
v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0.5)"
:element-loading-text="loadingText"
:before-close="handleCloseLogin"
>
<el-dialog :visible.sync="loginVisible" append-to-body v-loading="loading"
element-loading-background="rgba(0, 0, 0, 0.5)" :element-loading-text="loadingText"
:before-close="handleCloseLogin">
<div slot="title" class="login-title">
<div
:class="['title-item', isLoginByUsername ? 'active' : '']"
@click="handleChangeLoginWay('username')"
>
<div :class="['title-item', isLoginByUsername ? 'active' : '']" @click="handleChangeLoginWay('username')">
账号登录
</div>
<div
:class="['title-item', isLoginByUsername ? '' : 'active']"
@click="handleChangeLoginWay('phone')"
>
<div :class="['title-item', isLoginByUsername ? '' : 'active']" @click="handleChangeLoginWay('phone')">
手机号登录
</div>
<div class="line"></div>
</div>
<div class="login">
<el-form
:model="loginForm"
:label-position="labelPosition"
ref="loginForm"
:rules="loginRules"
>
<el-form :model="loginForm" :label-position="labelPosition" ref="loginForm" :rules="loginRules">
<el-form-item :label-width="formLabelWidth" prop="account">
<el-input
v-model="loginForm.account"
autocomplete="off"
clearable
:placeholder="isLoginByUsername ? '账号' : '手机号'"
></el-input>
<el-input v-model="loginForm.account" autocomplete="off" clearable
:placeholder="isLoginByUsername ? '账号' : '手机号'"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" prop="password">
<el-input
v-model="loginForm.password"
autocomplete="off"
type="password"
clearable
show-password
placeholder="密码"
></el-input>
<el-input v-model="loginForm.password" autocomplete="off" type="password" clearable show-password
placeholder="密码"></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item prop="captcha">
<el-input
ref="captcha"
v-model="loginForm.captcha"
placeholder="请输入验证码"
name="captcha"
tabindex="3"
auto-complete="on"
@keyup.enter.native="handleLoginSubmit"
/>
<el-input ref="captcha" v-model="loginForm.captcha" placeholder="请输入验证码" name="captcha" tabindex="3"
auto-complete="on" @keyup.enter.native="handleLoginSubmit" />
</el-form-item>
</el-col>
<el-col :span="12" class="captcha">
<img
v-if="requestCodeSuccess"
:src="captchaImgSrc"
@click="handleGetCaptcha"
/>
<img
v-else
src="@/assets/404_images/checkcode.png"
@click="handleGetCaptcha"
/>
<img v-if="requestCodeSuccess" :src="captchaImgSrc" @click="handleGetCaptcha" />
<img v-else src="@/assets/404_images/checkcode.png" @click="handleGetCaptcha" />
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="opration">
<el-button
round
@click="handleLoginSubmit"
size="small"
class="loginBtn"
>登 陆</el-button
>
<el-button round @click="handleLoginSubmit" size="small" class="loginBtn">登 陆</el-button>
<div class="register" @click="handleToRegister">注册</div>
</div>
</div>
......@@ -202,7 +132,7 @@ export default {
curPath: {
handler: function (value) {
this.isHome = value.name == "home";
this.isBoutique = value.name=='boutique'
this.isBoutique = value.name == 'boutique'
this.currentTab = {
name: value.name,
path: value.path,
......@@ -324,7 +254,7 @@ export default {
path: "/",
},
isHome: true,
isBoutique:false,//是否是精品展页
isBoutique: false,//是否是精品展页
isFixed: false,
offsetTop: 0,
loginVisible: false,
......@@ -530,6 +460,7 @@ export default {
z-index: 9;
background-color: rgba(#000, 0.25) !important;
}
.header-fixed {
position: fixed !important;
background-color: $themeColor !important;
......@@ -537,15 +468,18 @@ export default {
top: 0;
}
.show-themeColor{
.show-themeColor {
background-color: #2069c4 !important;
}
.isChStyle {
background-color: #892325 !important;
}
.isRedStyle {
background-color: #a30e0c !important;
}
.isSDCS {
background-color: #6c0c0d !important;
}
......@@ -561,6 +495,7 @@ export default {
.isYLGDYW {
background-color: #212040 !important;
}
.nav {
height: 100px;
width: 100%;
......@@ -569,6 +504,7 @@ export default {
// background-color: #fff;
// background-image: url('@/assets/imgs/home/panel-bg.png');
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
.container {
width: 100%;
height: 100%;
......@@ -576,12 +512,14 @@ export default {
align-items: center;
justify-content: space-between;
padding: 0 70px 0 100px;
// overflow: hidden;
.logo-container {
// width: 380px;
// height: 74px;
display: flex;
align-items: center;
img {
// width: 100%;
// height: 100%;
......@@ -591,6 +529,7 @@ export default {
// box-shadow: 2px 2px 3px 2px rgb(0 0 0 / 30%);
margin-right: 8px;
}
.name {
font-size: 30px;
font-weight: bold;
......@@ -599,6 +538,7 @@ export default {
margin-left: 8px;
}
}
.right {
display: flex;
height: 100%;
......@@ -609,6 +549,7 @@ export default {
margin-right: 80px;
min-width: 512px;
height: 100%;
.tab-item {
margin-right: 70px;
color: #fff;
......@@ -618,6 +559,7 @@ export default {
position: relative;
height: 100%;
text-align: center;
&::after {
position: absolute;
content: "";
......@@ -638,7 +580,7 @@ export default {
opacity: 1;
}
& > span {
&>span {
transform: translateY(4px);
font-size: 20px;
display: inline-block;
......@@ -648,6 +590,7 @@ export default {
cursor: pointer;
}
}
// a {
// font-size: 18px;
// white-space: nowrap;
......@@ -672,7 +615,7 @@ export default {
}
}
.active::after{
.active::after {
opacity: 1;
}
}
......@@ -681,7 +624,7 @@ export default {
.submenu {
// background: #f8f8f8;
background-color: rgba(0,0,0,0.4);
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
height: 50px;
display: flex;
......@@ -689,19 +632,23 @@ export default {
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: #2069c4;
}
}
.svg-icon {
margin-left: 40px;
}
......@@ -714,10 +661,12 @@ export default {
.wrapper {
transform: translateY(4px);
}
.el-button {
background: transparent;
border-color: #fff;
color: #fff;
i {
font-size: 14px;
}
......@@ -727,14 +676,17 @@ export default {
::v-deep .el-button.is-round {
padding: 10px 20px;
}
.el-dropdown-menu {
background-color: #fff;
// border: 1px solid #8a919f;
}
.el-dropdown-menu__item {
background-color: transparent;
// color: #fff;
color: #8a919f;
a {
text-decoration: none;
color: #8a919f;
......@@ -753,33 +705,39 @@ export default {
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.text {
font-weight: bold;
font-size: 24px;
color: #666;
}
.close {
font-size: 34px;
cursor: pointer;
color: #ccc;
}
}
.login-box {
width: 500px;
margin: auto;
}
}
.opration {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-top: 20px;
.register {
display: flex;
justify-content: center;
margin-top: 20px;
font-size: 14px;
cursor: pointer;
&:hover {
color: #2069c4;
}
......@@ -794,6 +752,7 @@ export default {
.captcha {
display: flex;
justify-content: flex-end;
img {
margin-top: 2px;
height: 40px;
......@@ -807,6 +766,7 @@ export default {
background-color: #2069c4;
color: #fff;
font-size: 14px;
&:hover {
filter: brightness(0.9) !important;
background-color: #2069c4;
......@@ -818,9 +778,11 @@ export default {
font-size: 14px;
}
}
::v-deep .el-dialog {
width: 400px;
border-radius: 0;
.el-dialog__body {
padding: 20px 30px 60px !important;
}
......@@ -846,10 +808,12 @@ export default {
.login-title {
display: flex;
position: relative;
.title-item {
margin-right: 40px;
cursor: pointer;
position: relative;
&:hover {
color: #2069c4;
}
......@@ -858,6 +822,7 @@ export default {
.active {
color: #2069c4;
}
.line {
width: 18px;
height: 4px;
......
src/views/boutique/index.vue
浏览文件 @ 0c3020d8
......@@ -59,7 +59,7 @@ export default {
{ tab: "sdcs", name: "四渡赤水出奇兵" },
{ tab: "lzsg", name: "六枝梭戛" },
{ tab: "zggz", name: "中共贵州省工委斗争纪略展" },
{ tab: "gzjy", name: "贵州教育使馆" },
{ tab: "gzjy", name: "贵州教育史馆" },
],
activeTab: "",
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论