Skip to content

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

更新

上级 b42f6f89
隐藏空白字符变更
内嵌 并排
正在显示 包含 615 行增加 和 199 行删除
src/App.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div id="app"> <div id="app">
<NavBar /> <NavBar :headerFixed="headerFixed" />
<!-- 开发阶段暂停使用keepAlive --> <!-- 开发阶段暂停使用keepAlive -->
<!-- <router-view :key="$route.fullPath" v-if="isRouterAlive" /> -->
<router-view></router-view> <router-view></router-view>
<!-- <keep-alive> <!-- <keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view> <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive> </keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> --> <router-view v-if="!$route.meta.keepAlive"></router-view> -->
<el-backtop :bottom="100" :right="80"></el-backtop>
<Footer /> <Footer />
</div> </div>
</template> </template>
...@@ -18,22 +18,24 @@ export default { ...@@ -18,22 +18,24 @@ export default {
components: { NavBar, Footer }, components: { NavBar, Footer },
data() { data() {
return { return {
// isRouterAlive: true, headerFixed: false,
}; };
}, },
methods: {
// reload() {
// this.isRouterAlive = false;
// this.$nextTick(() => (this.isRouterAlive = true));
// },
},
mounted() { mounted() {
this.$nextTick(() => { this.$nextTick(() => {
let wow = this.$wow let wow = this.$wow;
wow.init() wow.init();
}); });
}, },
}; };
</script> </script>
<style lang="scss"> <style lang="scss">
html,
body,
#app {
height: 100%;
}
</style> </style>
src/components/EntranceIcon/index.vue 0 → 100644
浏览文件 @ 0a56a4f4
<!-- -->
<template>
<div class="entrance">
<div class="entrance-text" :style="{ color }">点击进入</div>
<div class="entrance-icon" :style="{ background: color }">
<span class="entrance-arrow" :style="{ background: color }"></span>
</div>
</div>
</template>
<script>
export default {
name: "EntranceIcon",
props: {
color: String,
},
data() {
return {};
},
mounted() {},
methods: {},
};
</script>
<style lang="scss" scoped>
.entrance {
display: flex;
font-size: 16px;
cursor: pointer;
align-items: center;
.entrance-text {
margin-right: 12px;
font-size: 14px;
}
&:hover {
.entrance-icon {
width: 100px;
}
}
}
.entrance-icon {
width: 50px;
height: 2px;
background: #000;
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
position: relative;
transform: translateY(3px);
.entrance-arrow {
display: inline-block;
width: 16px;
height: 2px;
transform: rotate(45deg);
position: absolute;
right: -3px;
top: -5px;
}
}
</style>
src/components/Footer/index.vue
浏览文件 @ 0a56a4f4
...@@ -15,7 +15,7 @@ export default { ...@@ -15,7 +15,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.footer{ .footer{
display: flex; display: flex;
height: 100px; height: 200px;
padding: 0 24px; padding: 0 24px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
...@@ -25,6 +25,7 @@ export default { ...@@ -25,6 +25,7 @@ export default {
// bottom: 0; // bottom: 0;
// left: 0; // left: 0;
// right: 0; // right: 0;
span{ span{
margin-right: 16px; margin-right: 16px;
} }
......
src/components/NavBar/index.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="nav"> <div
:class="{ nav: true, 'header-fixed ': isFixed, 'home-nav': isHome }"
id="navbar"
>
<div class="container"> <div class="container">
<div class="logo-container wow animate__animated animate__fadeInLeft"> <div class="logo-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo.png" /> <img src="@/assets/imgs/home/logo.png" />
...@@ -12,11 +15,8 @@ ...@@ -12,11 +15,8 @@
:key="index" :key="index"
@click="handleClickTab(item)" @click="handleClickTab(item)"
> >
<div :class="{ active: currentTab.name == item.name }"></div>
<router-link :to="item.path">{{ item.name }} </router-link> <router-link :to="item.path">{{ item.name }} </router-link>
<svg-icon
icon-class="subscript"
v-show="currentTab.name == item.name"
></svg-icon>
</div> </div>
</div> </div>
<div class="tools wow animate__animated animate__fadeInRight"> <div class="tools wow animate__animated animate__fadeInRight">
...@@ -85,11 +85,45 @@ import { mapGetters } from "vuex"; ...@@ -85,11 +85,45 @@ import { mapGetters } from "vuex";
export default { export default {
name: "NavBar", name: "NavBar",
computed: { computed: {
...mapGetters(["token", "userInfo", "curPath"]), ...mapGetters(["token", "userInfo", "curPath", "navBarFixed"]),
hasToken() { hasToken() {
return this.token; return this.token;
}, },
}, },
watch: {
curPath: {
handler: function (value) {
this.isHome = value.name == "home";
this.currentTab = {
name: value.name,
path: value.path,
};
if (value.name.indexOf("display") != -1) {
this.currentTab = {
name: "展览",
path: "/display",
};
}
if (value.name.indexOf("culturalRelic") != -1) {
this.currentTab = {
name: "文物展",
path: "/culturalRelic",
};
}
if (value.name.indexOf("museum") != -1) {
this.currentTab = {
name: "博物馆",
path: "/museum",
};
}
},
immediate: true,
},
navBarFixed(value) {
console.log("navBarFixed", value);
},
},
data() { data() {
return { return {
pages: [ pages: [
...@@ -124,56 +158,47 @@ export default { ...@@ -124,56 +158,47 @@ export default {
name: "首页", name: "首页",
path: "/", path: "/",
}, },
isHome: true,
isFixed: false,
offsetTop: 0,
}; };
}, },
watch: { mounted() {
curPath: { window.addEventListener("scroll", this.initHeight);
handler: function (value) { this.$nextTick(() => {
this.currentTab = { this.offsetTop = document.querySelector("#navbar").offsetTop;
name: value.name, });
path: value.path,
};
if (value.name.indexOf("display") != -1) {
this.currentTab = {
name: "展览",
path: "/display",
};
}
if (value.name.indexOf("culturalRelic") != -1) {
this.currentTab = {
name: "文物展",
path: "/culturalRelic",
};
}
if (value.name.indexOf("museum") != -1) {
this.currentTab = {
name: "博物馆",
path: "/museum",
};
}
},
immediate: true,
},
}, },
methods: { methods: {
initHeight() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
handleToLogin() { handleToLogin() {
this.$router.push("/login?redirect=" + this.$route.fullPath); this.$router.push("/login?redirect=" + this.$route.fullPath);
}, },
async handleLogOut() { async handleLogOut() {
await this.$store.dispatch("user/logout"); await this.$store.dispatch("user/logout");
this.logoutDialogVisible = false; this.logoutDialogVisible = false;
// 如果当前的path为/personal，需跳转到首页
let path = this.$route.fullPath; let path = this.$route.fullPath;
if (path.indexOf("/personal") != -1) { if (path.indexOf("/personal") != -1) {
this.$router.push("/"); this.$router.push("/");
} }
// this.$router.push(`/login?redirect=${this.$route.fullPath}`);
}, },
handleClickTab(tab) { handleClickTab(tab) {
this.currentTab = tab; this.currentTab = tab;
}, },
}, },
destroyed() {
window.removeEventListener("scroll", this.initHeight);
},
}; };
</script> </script>
...@@ -185,13 +210,27 @@ export default { ...@@ -185,13 +210,27 @@ export default {
} }
} }
.nav { .home-nav {
height: 100px;
width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 9; z-index: 9;
// background-color: transparent !important;
background-color: rgba(#000, 0.25) !important;
}
.header-fixed {
position: fixed !important;
background-color: #2069c4 !important;
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
}
.nav {
height: 100px;
width: 100%;
transition: all 0.5s ease;
background-color: #2069c4;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
.container { .container {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -213,10 +252,12 @@ export default { ...@@ -213,10 +252,12 @@ export default {
.tabs { .tabs {
display: flex; display: flex;
margin-right: 100px; margin-right: 80px;
min-width: 512px; min-width: 512px;
// height: 100%;
// transform: translateY(200px); // transform: translateY(200px);
// animation: fadeUp ease 1s forwards; // animation: fadeUp ease 1s forwards;
height: 100%;
.tab-item { .tab-item {
margin-right: 70px; margin-right: 70px;
color: #fff; color: #fff;
...@@ -224,11 +265,37 @@ export default { ...@@ -224,11 +265,37 @@ export default {
align-items: center; align-items: center;
font-family: "Alibaba-PuHuiTi"; font-family: "Alibaba-PuHuiTi";
position: relative; position: relative;
.svg-icon { // padding: 15px 50px;
height: 100%;
text-align: center;
a{
font-size: 18px;
white-space: nowrap;
}
&::before {
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
content: "";
display: inline-block;
width: 0;
height: 4px;
background: #1d549d;
position: absolute;
bottom: 24px;
left: 0;
}
&:hover:before {
background: #1d549d;
width: 100%;
}
.active {
width: 100%;
height: 4px;
background: #1d549d;
position: absolute; position: absolute;
bottom: -16px; bottom: 24px;
left: 24%; left: 0;
transform: scale(1.5);
} }
} }
} }
......
src/router/index.js
浏览文件 @ 0a56a4f4
...@@ -5,13 +5,18 @@ import Home from '../views/home' ...@@ -5,13 +5,18 @@ import Home from '../views/home'
Vue.use(VueRouter) Vue.use(VueRouter)
// keepAlive先全部为true 后期根据每个页面需求调整 // keepAlive先全部为true 后期根据每个页面需求调整
const routes = [ const routes = [
{
path: '/404',
component: () => import('@/views/404.vue'),
hidden: true
},
// 首页 // 首页
{ {
path: '/', path: '/',
name: 'home', name: 'home',
component: Home, component: Home,
meta:{ meta: {
keepAlive:false keepAlive: false
} }
}, },
// 精品展 // 精品展
...@@ -19,8 +24,8 @@ const routes = [ ...@@ -19,8 +24,8 @@ const routes = [
path: '/boutique', path: '/boutique',
name: 'about', name: 'about',
component: () => import('@/views/boutique'), component: () => import('@/views/boutique'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
// 虚拟展厅 // 虚拟展厅
...@@ -28,8 +33,8 @@ const routes = [ ...@@ -28,8 +33,8 @@ const routes = [
path: '/virtual', path: '/virtual',
name: 'virtual', name: 'virtual',
component: () => import('@/views/virtual'), component: () => import('@/views/virtual'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
// 布展 // 布展
...@@ -37,8 +42,8 @@ const routes = [ ...@@ -37,8 +42,8 @@ const routes = [
path: '/display', path: '/display',
name: 'display', name: 'display',
component: () => import('@/views/display'), component: () => import('@/views/display'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
// 布展详情页 // 布展详情页
...@@ -46,8 +51,8 @@ const routes = [ ...@@ -46,8 +51,8 @@ const routes = [
path: '/display/:exhibitionId', path: '/display/:exhibitionId',
name: 'displayDetail', name: 'displayDetail',
component: () => import('@/views/display/Detail.vue'), component: () => import('@/views/display/Detail.vue'),
meta:{ meta: {
keepAlive:false keepAlive: false
} }
}, },
// 文物展 // 文物展
...@@ -55,8 +60,8 @@ const routes = [ ...@@ -55,8 +60,8 @@ const routes = [
path: '/culturalRelic', path: '/culturalRelic',
name: 'culturalRelic', name: 'culturalRelic',
component: () => import('@/views/culturalRelic'), component: () => import('@/views/culturalRelic'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
// 文物详情页 // 文物详情页
...@@ -64,8 +69,8 @@ const routes = [ ...@@ -64,8 +69,8 @@ const routes = [
path: '/culturalRelic/:crId', path: '/culturalRelic/:crId',
name: 'culturalRelicDetail', name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue'), component: () => import('@/views/culturalRelic/Detail.vue'),
meta:{ meta: {
keepAlive:false keepAlive: false
} }
}, },
// 个人中心 // 个人中心
...@@ -73,8 +78,8 @@ const routes = [ ...@@ -73,8 +78,8 @@ const routes = [
path: '/personal', path: '/personal',
name: 'personal', name: 'personal',
component: () => import('@/views/personal'), component: () => import('@/views/personal'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
// 登录 // 登录
...@@ -82,8 +87,8 @@ const routes = [ ...@@ -82,8 +87,8 @@ const routes = [
path: '/login', path: '/login',
name: 'login', name: 'login',
component: () => import('@/views/login'), component: () => import('@/views/login'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
...@@ -92,8 +97,8 @@ const routes = [ ...@@ -92,8 +97,8 @@ const routes = [
path: '/register', path: '/register',
name: 'register', name: 'register',
component: () => import('@/views/register'), component: () => import('@/views/register'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
// 博物馆 // 博物馆
...@@ -101,8 +106,8 @@ const routes = [ ...@@ -101,8 +106,8 @@ const routes = [
path: '/museum', path: '/museum',
name: 'museum', name: 'museum',
component: () => import('@/views/museum'), component: () => import('@/views/museum'),
meta:{ meta: {
keepAlive:true keepAlive: true
} }
}, },
// 博物馆详情 // 博物馆详情
...@@ -110,10 +115,16 @@ const routes = [ ...@@ -110,10 +115,16 @@ const routes = [
path: '/museum/:id', path: '/museum/:id',
name: 'museum', name: 'museum',
component: () => import('@/views/museum/Detail.vue'), component: () => import('@/views/museum/Detail.vue'),
meta:{ meta: {
keepAlive:false keepAlive: false
} }
}, },
// 404
{
path: '*',
redirect: '/404',
}
] ]
const router = new VueRouter({ const router = new VueRouter({
......
src/store/getters.js
浏览文件 @ 0a56a4f4
...@@ -3,8 +3,12 @@ const getters = { ...@@ -3,8 +3,12 @@ const getters = {
userInfo: state => state.user.userInfo, userInfo: state => state.user.userInfo,
avatar: state => state.user.avatar, avatar: state => state.user.avatar,
name: state => state.user.name, name: state => state.user.name,
dicts: state => state.dict.dicts, dicts: state => state.dict.dicts,
museumTree: state => state.org.museumTree, museumTree: state => state.org.museumTree,
curPath: state => state.app.curPath
curPath: state => state.app.curPath,
navBarFixed: state => state.app.navBarFixed
} }
export default getters export default getters
src/store/modules/app.js
浏览文件 @ 0a56a4f4
// import { // import {
// getToken, // getToken,
// } from '@/utils/auth' // } from '@/utils/auth'
const getDefaultState = () => { const getDefaultState = () => {
return { return {
curPath:null, curPath: null,
navBarFixed: false
} }
} }
// const getCurPath= function(){}
const state = getDefaultState() const state = getDefaultState()
const mutations = { const mutations = {
...@@ -18,6 +19,9 @@ const mutations = { ...@@ -18,6 +19,9 @@ const mutations = {
SET_NAV_BAR: (state, path) => { SET_NAV_BAR: (state, path) => {
state.curPath = path state.curPath = path
}, },
SET_NAVBAR_FIXED: (state, isFixed) => {
state.navBarFixed = isFixed
}
} }
const actions = { const actions = {
......
src/views/404.vue 0 → 100644
浏览文件 @ 0a56a4f4
<template>
<div class="wscn-http404-container">
<div class="wscn-http404">
<div class="pic-404">
<img
class="pic-404__parent"
src="@/assets/404_images/404.png"
alt="404"
/>
<img
class="pic-404__child left"
src="@/assets/404_images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child mid"
src="@/assets/404_images/404_cloud.png"
alt="404"
/>
<img
class="pic-404__child right"
src="@/assets/404_images/404_cloud.png"
alt="404"
/>
</div>
<div class="bullshit">
<div class="bullshit__oops">OOPS!</div>
<div class="bullshit__info">
All rights reserved
<a
style="color: #20a0ff"
href="https://wallstreetcn.com"
target="_blank"
>wallstreetcn</a
>
</div>
<div class="bullshit__headline">{{ message }}</div>
<div class="bullshit__info">
Please check that the URL you entered is correct, or click the button
below to return to the homepage.
</div>
<a href="" class="bullshit__return-home">回到首页</a>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Page404",
computed: {
message() {
return "The webmaster said that you can not enter this page...";
},
},
};
</script>
<style lang="scss" scoped>
.wscn-http404-container {
// transform: translate(-50%,-50%);
// position: absolute;
// top: 40%;
// left: 50%;
display: flex;
flex-direction: column;
align-items: center;
padding: 200px 0;
}
.wscn-http404 {
position: relative;
width: 1200px;
padding: 0 50px;
overflow: hidden;
.pic-404 {
position: relative;
float: left;
width: 600px;
overflow: hidden;
&__parent {
width: 100%;
}
&__child {
position: absolute;
&.left {
width: 80px;
top: 17px;
left: 220px;
opacity: 0;
animation-name: cloudLeft;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
&.mid {
width: 46px;
top: 10px;
left: 420px;
opacity: 0;
animation-name: cloudMid;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1.2s;
}
&.right {
width: 62px;
top: 100px;
left: 500px;
opacity: 0;
animation-name: cloudRight;
animation-duration: 2s;
animation-timing-function: linear;
animation-fill-mode: forwards;
animation-delay: 1s;
}
@keyframes cloudLeft {
0% {
top: 17px;
left: 220px;
opacity: 0;
}
20% {
top: 33px;
left: 188px;
opacity: 1;
}
80% {
top: 81px;
left: 92px;
opacity: 1;
}
100% {
top: 97px;
left: 60px;
opacity: 0;
}
}
@keyframes cloudMid {
0% {
top: 10px;
left: 420px;
opacity: 0;
}
20% {
top: 40px;
left: 360px;
opacity: 1;
}
70% {
top: 130px;
left: 180px;
opacity: 1;
}
100% {
top: 160px;
left: 120px;
opacity: 0;
}
}
@keyframes cloudRight {
0% {
top: 100px;
left: 500px;
opacity: 0;
}
20% {
top: 120px;
left: 460px;
opacity: 1;
}
80% {
top: 180px;
left: 340px;
opacity: 1;
}
100% {
top: 200px;
left: 300px;
opacity: 0;
}
}
}
}
.bullshit {
position: relative;
float: left;
width: 300px;
padding: 30px 0;
overflow: hidden;
&__oops {
font-size: 32px;
font-weight: bold;
line-height: 40px;
color: #1482f0;
opacity: 0;
margin-bottom: 20px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-fill-mode: forwards;
}
&__headline {
font-size: 20px;
line-height: 24px;
color: #222;
font-weight: bold;
opacity: 0;
margin-bottom: 10px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.1s;
animation-fill-mode: forwards;
}
&__info {
font-size: 13px;
line-height: 21px;
color: grey;
opacity: 0;
margin-bottom: 30px;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.2s;
animation-fill-mode: forwards;
}
&__return-home {
display: block;
float: left;
width: 110px;
height: 36px;
background: #1482f0;
border-radius: 100px;
text-align: center;
color: #ffffff;
opacity: 0;
font-size: 14px;
line-height: 36px;
cursor: pointer;
animation-name: slideUp;
animation-duration: 0.5s;
animation-delay: 0.3s;
animation-fill-mode: forwards;
}
@keyframes slideUp {
0% {
transform: translateY(60px);
opacity: 0;
}
100% {
transform: translateY(0);
opacity: 1;
}
}
}
}
</style>
src/views/culturalRelic/Detail.vue
浏览文件 @ 0a56a4f4
<!-- --> <!-- -->
<template> <template>
<div class="display-detail"> <div class="display-detail">
<!-- <div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div> -->
<div class="empty-space"></div>
<div class="wrapper"> <div class="wrapper">
<div class="back"> <div class="back">
<el-button <el-button
......
src/views/culturalRelic/index.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="cultural-relic"> <div class="cultural-relic">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="40"> <el-row :gutter="40">
...@@ -49,6 +48,7 @@ ...@@ -49,6 +48,7 @@
filterable filterable
@change="handleYearsChange" @change="handleYearsChange"
clearable clearable
ref="years"
> >
</el-cascader> </el-cascader>
<div class="threeD item" @click="handleClickThreeD"> <div class="threeD item" @click="handleClickThreeD">
...@@ -69,7 +69,10 @@ ...@@ -69,7 +69,10 @@
> >
<div <div
class="container wow animate__animated animate__fadeInUp" class="container wow animate__animated animate__fadeInUp"
v-if="$getFullUrl(item.faceImagePressUrl) ||$getFullUrl(item.faceImageUrl)" v-if="
$getFullUrl(item.faceImagePressUrl) ||
$getFullUrl(item.faceImageUrl)
"
> >
<div class="img"> <div class="img">
<img <img
...@@ -107,7 +110,10 @@ ...@@ -107,7 +110,10 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty description="暂无数据" v-if="list.records.length==0"></el-empty> <el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
...@@ -237,6 +243,7 @@ export default { ...@@ -237,6 +243,7 @@ export default {
handleYearsChange(value) { handleYearsChange(value) {
this.years = value; this.years = value;
this.loadData(); this.loadData();
this.$refs.years.dropDownVisible = false;
}, },
handleKeyWordChange(value) { handleKeyWordChange(value) {
this.keyword = value; this.keyword = value;
...@@ -380,7 +387,6 @@ $text-indent: 16px; ...@@ -380,7 +387,6 @@ $text-indent: 16px;
} }
.text { .text {
display: block; display: block;
} }
width: 130px; width: 130px;
padding: 4px 8px; padding: 4px 8px;
...@@ -392,11 +398,10 @@ $text-indent: 16px; ...@@ -392,11 +398,10 @@ $text-indent: 16px;
} }
.text { .text {
font-size: 14px; font-size: 14px;
color: #FFF; color: #fff;
padding: 4px 8px; padding: 4px 8px;
cursor: pointer; cursor: pointer;
display: none; display: none;
} }
img { img {
width: 100%; width: 100%;
......
src/views/display/Detail.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="display-detail"> <div class="display-detail">
<div class="empty-space"></div>
<div class="content" id="content"> <div class="content" id="content">
<div <div
class="content-item sliders" class="content-item sliders"
...@@ -286,6 +285,13 @@ export default { ...@@ -286,6 +285,13 @@ export default {
]); ]);
this.loadDetail(); this.loadDetail();
}, },
destroyed() {
//同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
methods: { methods: {
async loadDetail() { async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId; let exhibitionId = this.$route.params.exhibitionId;
...@@ -346,29 +352,6 @@ export default { ...@@ -346,29 +352,6 @@ export default {
}, },
addImgsEventListener(e) { addImgsEventListener(e) {
let firefoxListenFun = function (e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
}
};
e = e || window.event; e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) { if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE // IE
...@@ -380,7 +363,30 @@ export default { ...@@ -380,7 +363,30 @@ export default {
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) { if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel //firefox支持onmousewheel
addEventListener("DOMMouseScroll", firefoxListenFun, false); addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
}
},
firefoxListenFun(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
} }
}, },
......
src/views/display/detail/ChStyle.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="display-detail"> <div class="display-detail">
<div class="empty-space"></div>
<div class="content" id="content"> <div class="content" id="content">
<div class="content-item sliders" ref="imgs"> <div class="content-item sliders" ref="imgs">
<div class="view-box"> <div class="view-box">
......
src/views/display/index.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="display"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="40"> <el-row :gutter="40">
...@@ -90,7 +89,10 @@ ...@@ -90,7 +89,10 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty description="暂无数据" v-if="list.records.length==0"></el-empty> <el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
...@@ -140,7 +142,7 @@ export default { ...@@ -140,7 +142,7 @@ export default {
onlyShow3d: false, onlyShow3d: false,
keyword: "", keyword: "",
type: "", type: "",
regionCode:[], regionCode: [],
regionTree: [], regionTree: [],
}; };
}, },
...@@ -174,7 +176,7 @@ export default { ...@@ -174,7 +176,7 @@ export default {
limit: this.list.size, limit: this.list.size,
name: this.keyword, name: this.keyword,
type: this.type, type: this.type,
regionCode: this.regionCode[this.regionCode.length-1], regionCode: this.regionCode[this.regionCode.length - 1],
}; };
let res = await getList(params); let res = await getList(params);
if (res.code == 0) { if (res.code == 0) {
...@@ -215,7 +217,7 @@ export default { ...@@ -215,7 +217,7 @@ export default {
handleRegionChange(value) { handleRegionChange(value) {
this.regionCode = value; this.regionCode = value;
// this.$refs.region this.$refs.region.dropDownVisible = false;
this.loadData(); this.loadData();
}, },
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 0a56a4f4
...@@ -130,6 +130,7 @@ $blue: #2069c4; ...@@ -130,6 +130,7 @@ $blue: #2069c4;
color: #fff; color: #fff;
margin-bottom: 36px; margin-bottom: 36px;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
font-size: 22px;
} }
.list { .list {
width: 100%; width: 100%;
......
src/views/home/components/Display.vue
浏览文件 @ 0a56a4f4
...@@ -14,24 +14,21 @@ ...@@ -14,24 +14,21 @@
:style="{ :style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`, transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}" }"
v-if="list.length > 0"
> >
<div <div
:class="['slide-item', currentIndex == index ? 'active' : '']" :class="['slide-item', currentIndex == index ? 'active' : '']"
v-for="(item, index) in list" v-for="(item, index) in list"
:key="index" :key="index"
> >
<div class="content wow animate__animated animate__fadeInLeft"> <div class="content">
<div class="content-name">{{ item.title }}</div> <div class="content-name">{{ item.title }}</div>
<div class="content-intro"> <div class="content-intro">
{{ item.intro ? item.intro : "" }} {{ item.intro ? item.intro : "" }}
</div> </div>
<div class="entrance" @click="handleClick(item)"> <EntranceIcon color="#fff" />
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div> </div>
<div class="img wow animate__animated animate__fadeInRight" @click="handleClick(item)"> <div class="img" @click="handleClick(item)">
<img <img
v-if="$getFullUrl(item.faceImagePressUrl)" v-if="$getFullUrl(item.faceImagePressUrl)"
:src="$getFullUrl(item.faceImagePressUrl)" :src="$getFullUrl(item.faceImagePressUrl)"
...@@ -60,8 +57,12 @@ ...@@ -60,8 +57,12 @@
<script> <script>
import { getRecommendDisplay } from "@/api/display"; import { getRecommendDisplay } from "@/api/display";
import EntranceIcon from "@/components/EntranceIcon";
export default { export default {
name: "Display", name: "Display",
components: {
EntranceIcon,
},
data() { data() {
return { return {
list: [], list: [],
...@@ -71,23 +72,17 @@ export default { ...@@ -71,23 +72,17 @@ export default {
}, },
mounted() { mounted() {
this.loadList(); this.loadList();
this.getSlideItemWidth();
}, },
methods: { methods: {
async loadList() { async loadList() {
let res = await getRecommendDisplay(); let res = await getRecommendDisplay();
this.list = res.data; this.list = res.data;
// this.currentItem = this.list[0]; this.getSlideItemWidth();
}, },
handleChangePage(page) { handleChangePage(page) {
let index = this.list.indexOf(page); let index = this.list.indexOf(page);
this.currentIndex = index; this.currentIndex = index;
// this.currentItem = page; console.log(-this.currentIndex * this.sliderItemWidth);
console.log(
"currentIndex * sliderItemWidth",
this.currentIndex * this.sliderItemWidth
);
}, },
handleClick(item) { handleClick(item) {
console.log(item); console.log(item);
...@@ -99,8 +94,9 @@ export default { ...@@ -99,8 +94,9 @@ export default {
getSlideItemWidth() { getSlideItemWidth() {
setTimeout(() => { setTimeout(() => {
let slideItem = document.getElementsByClassName("slide-item"); let slideItem = document.getElementsByClassName("slide-item");
this.sliderItemWidth = slideItem[0].offsetWidth; if (slideItem[0]) {
console.log(" this.sliderItemWidth", this.sliderItemWidth); this.sliderItemWidth = slideItem[0].offsetWidth;
}
}, 500); }, 500);
}, },
}, },
...@@ -122,6 +118,7 @@ export default { ...@@ -122,6 +118,7 @@ export default {
margin-bottom: 90px; margin-bottom: 90px;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
flex-basis: auto; flex-basis: auto;
font-size: 22px;
} }
.wrapper { .wrapper {
...@@ -136,8 +133,7 @@ export default { ...@@ -136,8 +133,7 @@ export default {
display: flex; display: flex;
min-width: 100%; min-width: 100%;
height: 100%; height: 100%;
// transition: all 0.5s ease-in-out; transition: all 0.5s ease;
.slide-item { .slide-item {
min-width: 100%; min-width: 100%;
position: relative; position: relative;
...@@ -145,7 +141,6 @@ export default { ...@@ -145,7 +141,6 @@ export default {
justify-content: space-between; justify-content: space-between;
height: 100%; height: 100%;
padding: 0 10px; padding: 0 10px;
opacity: 0;
transition: all 1s ease; transition: all 1s ease;
.content { .content {
...@@ -164,16 +159,9 @@ export default { ...@@ -164,16 +159,9 @@ export default {
line-height: 40px; line-height: 40px;
margin-bottom: 40px; margin-bottom: 40px;
} }
.entrance {
font-size: 16px;
cursor: pointer;
.entrance-text {
margin-right: 12px;
}
}
} }
.img { .img {
margin-top: 100px; margin-top: 240px;
width: 380px; width: 380px;
height: 480px; height: 480px;
cursor: pointer; cursor: pointer;
...@@ -190,9 +178,6 @@ export default { ...@@ -190,9 +178,6 @@ export default {
} }
} }
} }
.active {
opacity: 1;
}
} }
.pagination { .pagination {
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 0a56a4f4
...@@ -10,16 +10,20 @@ ...@@ -10,16 +10,20 @@
<div class="intro"> <div class="intro">
{{ curMuseum.intro }} {{ curMuseum.intro }}
</div> </div>
<div <!-- <div
class="entrance" class="entrance"
@click="handleClick(curMuseum)" @click="handleClick(curMuseum)"
v-show="curMuseum.name" v-show="curMuseum.name"
> >
<span class="entrance-text">点击进入</span> <span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance-black.png" alt="" /> <img src="@/assets/imgs/home/entrance-black.png" alt="" />
</div> </div> -->
<EntranceIcon color="#000" />
</div> </div>
<div class="map wow animate__animated animate__fadeInRight" id="map" ></div> <div
class="map wow animate__animated animate__fadeInRight"
id="map"
></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -28,8 +32,12 @@ ...@@ -28,8 +32,12 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
import guizhou from "../../../../public/geoData/guizhou.json"; import guizhou from "../../../../public/geoData/guizhou.json";
import { getMuseumListPage } from "@/api/org"; import { getMuseumListPage } from "@/api/org";
import EntranceIcon from "@/components/EntranceIcon";
export default { export default {
name: "MuseumMap", name: "MuseumMap",
components: {
EntranceIcon,
},
data() { data() {
return { return {
myChart: "", myChart: "",
...@@ -44,7 +52,7 @@ export default { ...@@ -44,7 +52,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.init(); this.init();
}); });
// this.initAnimate(); // this.initAnimate();
}, },
methods: { methods: {
...@@ -57,7 +65,7 @@ export default { ...@@ -57,7 +65,7 @@ export default {
// 获取博物馆列表，并构造经纬度 // 获取博物馆列表，并构造经纬度
let res = await getMuseumListPage(params); let res = await getMuseumListPage(params);
this.museumList = res.data.records; this.museumList = res.data.records;
this.curMuseum = this.museumList[0] this.curMuseum = this.museumList[0];
let seriesList = [{ data: [] }]; let seriesList = [{ data: [] }];
this.museumList.forEach((item) => { this.museumList.forEach((item) => {
// debugger; // debugger;
...@@ -212,7 +220,7 @@ export default { ...@@ -212,7 +220,7 @@ export default {
normal: { normal: {
borderColor: "#fff", // 边框颜色 borderColor: "#fff", // 边框颜色
areaColor: "#2759af", // 区域颜色 areaColor: "#2759af", // 区域颜色
shadowColor: "#182f68", shadowColor: "#182f68",
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 25, shadowOffsetY: 25,
textStyle: { textStyle: {
...@@ -278,6 +286,7 @@ export default { ...@@ -278,6 +286,7 @@ export default {
align-items: center; align-items: center;
position: relative; position: relative;
padding: 70px 13% 114px 13%; padding: 70px 13% 114px 13%;
overflow: hidden;
.title { .title {
color: #333; color: #333;
// margin-bottom: 43px; // margin-bottom: 43px;
...@@ -321,7 +330,7 @@ export default { ...@@ -321,7 +330,7 @@ export default {
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-content: flex-end; align-content: flex-end;
.entrance-text{ .entrance-text {
margin-right: 12px; margin-right: 12px;
} }
img { img {
......
src/views/home/components/Virtural.vue
浏览文件 @ 0a56a4f4
...@@ -20,10 +20,11 @@ ...@@ -20,10 +20,11 @@
<div class="intro-content"> <div class="intro-content">
{{ list[0].intro }} {{ list[0].intro }}
</div> </div>
<div class="entrance" @click="handleClick(list[0])"> <!-- <div class="entrance" @click="handleClick(list[0])">
<span class="entrance-text">点击进入</span> <span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" /> <img src="@/assets/imgs/home/entrance.png" alt="" />
</div> </div> -->
<EntranceIcon color="#fff" />
</div> </div>
</el-col> </el-col>
<el-col :span="18"> <el-col :span="18">
...@@ -54,9 +55,11 @@ ...@@ -54,9 +55,11 @@
</template> </template>
<script> <script>
import EntranceIcon from "@/components/EntranceIcon";
import { getVrRecommend } from "@/api/virtual"; import { getVrRecommend } from "@/api/virtual";
export default { export default {
name: "Virtural", name: "Virtural",
components: { EntranceIcon },
data() { data() {
return { return {
list: [], list: [],
...@@ -90,6 +93,7 @@ $blue: #2069c4; ...@@ -90,6 +93,7 @@ $blue: #2069c4;
background-size: 100% 50%; background-size: 100% 50%;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-y: 70%; background-position-y: 70%;
overflow: hidden;
.content-wrapper { .content-wrapper {
.title { .title {
display: flex; display: flex;
...@@ -148,11 +152,9 @@ $blue: #2069c4; ...@@ -148,11 +152,9 @@ $blue: #2069c4;
&:hover { &:hover {
.name { .name {
transform: translateY(0); transform: translateY(0);
} }
img { img {
transform: scale(1.1); transform: scale(1.1);
} }
} }
img { img {
...@@ -172,7 +174,7 @@ $blue: #2069c4; ...@@ -172,7 +174,7 @@ $blue: #2069c4;
padding: 16px; padding: 16px;
transform: translateY(100px); transform: translateY(100px);
width: 100%; width: 100%;
transition:all 0.5s ease; transition: all 0.5s ease;
} }
} }
} }
......
src/views/home/index.vue
浏览文件 @ 0a56a4f4
...@@ -27,6 +27,12 @@ export default { ...@@ -27,6 +27,12 @@ export default {
Display, Display,
CulturalRelic, CulturalRelic,
}, },
// data() {
// return {
// headerFixed: false,
// };
// },
}; };
</script> </script>
......
src/views/login/index.vue
浏览文件 @ 0a56a4f4
<!-- --> <!-- -->
<template> <template>
<div class="wrapper"> <div class="wrapper">
<div class="empty-space"></div>
<div class="login"> <div class="login">
<div class="title"> <div class="title">
<div class="text">登 陆</div> <div class="text">登 陆</div>
...@@ -68,7 +67,12 @@ ...@@ -68,7 +67,12 @@
<!-- <span style="margin: 0 10px"> | </span> --> <!-- <span style="margin: 0 10px"> | </span> -->
<!-- <router-link to="/register"> 忘记密码 </router-link> --> <!-- <router-link to="/register"> 忘记密码 </router-link> -->
</div> </div>
<el-button round @click="handleLogin" size="small" :loading="loading" class="loginBtn" <el-button
round
@click="handleLogin"
size="small"
:loading="loading"
class="loginBtn"
>登 陆</el-button >登 陆</el-button
> >
</div> </div>
...@@ -155,10 +159,16 @@ export default { ...@@ -155,10 +159,16 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 100%; width: 100%;
background: url("@/assets/imgs/home/display-bg.png") no-repeat center;
padding: 100px 0;
display: flex;
justify-content: center;
align-items: center;
} }
.login { .login {
width: 500px; width: 500px;
margin: 50px auto; // margin: 50px auto;
background-color: #fff; background-color: #fff;
border-radius: 16px; border-radius: 16px;
padding: 48px 32px; padding: 48px 32px;
...@@ -194,10 +204,11 @@ export default { ...@@ -194,10 +204,11 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.login-button,.el-button{ .login-button,
width: 100%; .el-button {
background-color: #2069c4; width: 100%;
color: #fff; background-color: #2069c4;
font-size: 22px; color: #fff;
} font-size: 22px;
}
</style> </style>
src/views/museum/Detail.vue
浏览文件 @ 0a56a4f4
<!-- --> <!-- -->
<template> <template>
<div class="display-detail"> <div class="display-detail">
<!-- <div class="search">
<SearchBar
:options="options"
:selectValue="selectValue"
:keyword="keyword"
/>
</div> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="wrapper"> <div class="wrapper">
<div class="back"> <div class="back">
<el-button <el-button
......
src/views/museum/index.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="display"> <div class="display">
<!-- <NavBar /> --> <!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="40"> <el-row :gutter="40">
...@@ -72,6 +71,10 @@ ...@@ -72,6 +71,10 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
......
src/views/personal/index.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="personal"> <div class="personal">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="main"> <div class="main">
<el-tabs :tab-position="'left'" type="card" class="wrapper"> <el-tabs :tab-position="'left'" type="card" class="wrapper">
......
src/views/virtual/index.vue
浏览文件 @ 0a56a4f4
<template> <template>
<div class="display"> <div class="display">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper"> <div class="content-wrapper">
<div class="content"> <div class="content">
<el-row :gutter="40"> <el-row :gutter="40">
...@@ -32,6 +30,7 @@ ...@@ -32,6 +30,7 @@
filterable filterable
@change="handleRegionChange" @change="handleRegionChange"
clearable clearable
ref="region"
> >
</el-cascader> </el-cascader>
...@@ -72,6 +71,10 @@ ...@@ -72,6 +71,10 @@
</div> </div>
</el-col> </el-col>
</el-row> </el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination"> <div class="pagination">
<el-pagination <el-pagination
@size-change="handleSizeChange" @size-change="handleSizeChange"
...@@ -121,7 +124,7 @@ export default { ...@@ -121,7 +124,7 @@ export default {
onlyShow3d: false, onlyShow3d: false,
keyword: "", keyword: "",
type: "", type: "",
regionCode:[], regionCode: [],
regionTree: [], regionTree: [],
}; };
}, },
...@@ -154,7 +157,7 @@ export default { ...@@ -154,7 +157,7 @@ export default {
page: this.list.current, page: this.list.current,
limit: this.list.size, limit: this.list.size,
name: this.keyword, name: this.keyword,
regionCode: this.regionCode[this.regionCode.length-1], regionCode: this.regionCode[this.regionCode.length - 1],
}; };
let res = await getVirtualList(params); let res = await getVirtualList(params);
if (res.code == 0) { if (res.code == 0) {
...@@ -174,7 +177,7 @@ export default { ...@@ -174,7 +177,7 @@ export default {
}, },
handleClick(item) { handleClick(item) {
window.open(item.url,'_blank') window.open(item.url, "_blank");
}, },
defImg(e) { defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png"); e.target.src = require("@/assets/404_images/no-pic.png");
...@@ -190,9 +193,8 @@ export default { ...@@ -190,9 +193,8 @@ export default {
}, },
handleRegionChange(value) { handleRegionChange(value) {
console.log(value);
console.log(value[value.length - 1]);
this.regionCode = value; this.regionCode = value;
this.$refs.region.dropDownVisible = false
this.loadData(); this.loadData();
}, },
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论