Skip to content

E
exhibition_page
提交 664acb4a authored 作者: JSHorse's avatar JSHorse
浏览文件
操作

修复header优化而影响的其他页面

上级 7de7613c
隐藏空白字符变更
内嵌 并排
正在显示 包含 78 行增加 和 142 行删除
src/components/NavBar/index.vue
浏览文件 @ 664acb4a
<template>
<div
:class="{
<div :class="{
nav: true,
'header-absolute': true,
'header-absolute': isAbsolute,
'header-fixed ': isFixed,
// 'header-absolute': isHome || isBoutique,
//'show-themeColor': isFixed && isHome,
......@@ -12,9 +11,7 @@
isSMGZ: navbarStyle == '5' && isFixed,
isJYYCC: navbarStyle == '6' && isFixed,
isYLGDYW: navbarStyle == '7' && isFixed,
}"
id="navbar"
>
}" id="navbar">
<div class="container">
<div class="logo-container animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo3.png" />
......@@ -22,24 +19,12 @@
</div>
<div class="right">
<div class="tabs animate__animated animate__fadeInUp">
<div
class="tab-item"
:class="{
<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)"
>
}" 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>
<i v-if="item.name == '陈列展览'" class="el-icon-arrow-down" style="transform: translate(30%, 30%); cursor: pointer"></i>
</div>
</div>
<div class="tools animate__animated animate__fadeInRight">
......@@ -51,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>
......@@ -74,23 +50,11 @@
</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
v-for="(item, index) in typeList"
:key="index"
@click="handleToPage('/display/', item.value, true)"
>
<li v-for="(item, index) in typeList" :key="index" @click="handleToPage('/display/', item.value, true)">
<span>{{ item.label }}</span>
<svg-icon
icon-class="wenshi"
v-if="index != typeList.length - 1"
></svg-icon>
<svg-icon icon-class="wenshi" v-if="index != typeList.length - 1"></svg-icon>
</li>
<!-- <li>
<span @click="handleToPage('/display', true)">基本陈列</span>
......@@ -104,92 +68,40 @@
</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>
......@@ -212,7 +124,7 @@ export default {
"showLoginDialog",
"navbarStyle",
]),
hasToken() {
hasToken () {
return this.token;
},
},
......@@ -261,19 +173,22 @@ export default {
},
immediate: true,
},
navBarFixed(value) {
navBarFixed (value) {
console.log("navBarFixed", value);
},
showLoginDialog(value) {
showLoginDialog (value) {
this.loginVisible = value;
},
loginVisible(value) {
loginVisible (value) {
if (value) {
this.handleGetCaptcha();
}
},
'$route.path' (cur) {
this.getAbsolute(cur)
}
},
data() {
data () {
var validateAccout = (rule, value, callback) => {
if (value === "") {
let text = this.isLoginByUsername ? "账号" : "手机号";
......@@ -375,9 +290,10 @@ export default {
value: "",
},
],
isAbsolute: true
};
},
mounted() {
mounted () {
window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => {
......@@ -386,9 +302,21 @@ export default {
this.$store.commit("app/SET_NAVBAR_HEIGHT", navBarHeight);
});
this.loadDisplayTypeList();
let path = this.$route.path
this.getAbsolute(path)
},
methods: {
initHeight() {
getAbsolute (path) {
let arr = path.split('/')
console.log('path', path)
if (path.indexOf('/display') === 0 && arr.length === 4) {
this.isAbsolute = false
} else {
this.isAbsolute = true
}
},
initHeight () {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
......@@ -396,20 +324,20 @@ export default {
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
handleToRegister() {
handleToRegister () {
this.$router.push("/register?redirect=" + this.$route.fullPath);
this.handleCloseLogin();
},
handleToLogin() {
handleToLogin () {
this.loginVisible = true;
},
handleToPersonal() {
handleToPersonal () {
this.$router.push("/personal");
},
async handleLogOut() {
async handleLogOut () {
this.$confirm("是否确定退出?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
......@@ -428,11 +356,11 @@ export default {
});
},
handleClickTab(tab) {
handleClickTab (tab) {
this.currentTab = tab;
},
handleLoginSubmit() {
handleLoginSubmit () {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// debugger
......@@ -473,7 +401,7 @@ export default {
});
},
handleCloseLogin() {
handleCloseLogin () {
this.loginVisible = false;
this.$refs["loginForm"].resetFields;
if (this.showLoginDialog) {
......@@ -481,7 +409,7 @@ export default {
}
},
handleGetCaptcha() {
handleGetCaptcha () {
this.currdatetime = new Date().getTime();
getVerify()
.then((res) => {
......@@ -494,7 +422,7 @@ export default {
});
},
handleChangeLoginWay(type) {
handleChangeLoginWay (type) {
this.isLoginByUsername = type === "username";
let line = document.getElementsByClassName("line")[0];
if (this.isLoginByUsername) {
......@@ -504,7 +432,7 @@ export default {
}
},
handleToPage(path, type, isOpenNewPage) {
handleToPage (path, type, isOpenNewPage) {
if (path) {
if (isOpenNewPage) {
const newPage = this.$router.resolve({
......@@ -520,40 +448,41 @@ export default {
}
},
handleEnterTabItem(item) {
handleEnterTabItem (item) {
if (item.name == "陈列展览") {
this.showSubMenu = true;
}
},
handleLeaveTabItem(item) {
handleLeaveTabItem (item) {
if (item.name == "陈列展览" && this.showSubMenu) {
this.showSubMenu = false;
}
},
handleEnterSubmenu() {
handleEnterSubmenu () {
if (!this.showSubMenu) {
this.showSubMenu = true;
}
},
handleMouseLeaveSubMenu() {
handleMouseLeaveSubMenu () {
if (this.showSubMenu) {
this.showSubMenu = false;
}
},
async loadDisplayTypeList() {
async loadDisplayTypeList () {
let res = await getDisplayExistDict();
// debugger
this.typeList = [...this.typeList, ...res.data.typeList];
},
},
destroyed() {
destroyed () {
window.removeEventListener("scroll", this.initHeight);
},
};
</script>
......@@ -608,8 +537,8 @@ export default {
height: 120px;
width: 100%;
transition: all 0.5s ease;
// background-color: rgba($themeColor, 0.5);
background-color: rgba(0, 0, 0, 0.3);
background-color: $themeColor;
// background-color: rgba(0, 0, 0, 0.3);
position: relative;
z-index: 99;
// background-color: #fff;
......@@ -639,7 +568,7 @@ export default {
.name {
font-size: 30px;
font-weight: bold;
font-family: "SourceHanSerifCN-Bold";
font-family: 'SourceHanSerifCN-Bold';
color: #fff;
margin-left: 8px;
}
......@@ -662,14 +591,14 @@ 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: "";
content: '';
left: 50%;
bottom: 0;
transform: translateX(-50%);
......
src/views/boutique/components/sdcs/index.vue
浏览文件 @ 664acb4a
......@@ -1279,7 +1279,7 @@ export default {
height: 900px;
.vr-content {
width: 100%;
height: 100%;
// height: 100%;
position: absolute;
// top: -100px;
background-repeat: no-repeat;
......
src/views/boutique/index.vue
浏览文件 @ 664acb4a
......@@ -63,5 +63,11 @@ export default {
};
</script>
<style>
<style lang="scss" scoped>
.botique {
margin-bottom: -$nav-height;
> div {
transform: translateY(-$nav-height);
}
}
</style>
\ No newline at end of file
src/views/culturalRelic/detail-bp.vue
浏览文件 @ 664acb4a
......@@ -711,7 +711,7 @@
.isFixed {
position: fixed;
left: 0;
top: 100px;
top: $nav-height;
z-index: 99;
}
/**公共样式结束 */
......
src/views/display/components/NormalStyle.vue
浏览文件 @ 664acb4a
......@@ -737,7 +737,7 @@ $titleFontFamily: SourceHanSerifCN-Bold;
.isFixed {
position: fixed;
left: 0;
top: 100px;
top: $nav-height;
z-index: 99;
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论