Skip to content

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

更新

上级 b42f6f89
显示空白字符变更
内嵌 并排
正在显示 包含 599 行增加 和 183 行删除
src/App.vue
浏览文件 @ 0a56a4f4
<template>
<div id="app">
<NavBar />
<NavBar :headerFixed="headerFixed" />
<!-- 开发阶段暂停使用keepAlive -->
<!-- <router-view :key="$route.fullPath" v-if="isRouterAlive" /> -->
<router-view></router-view>
<!-- <keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view> -->
<el-backtop :bottom="100" :right="80"></el-backtop>
<Footer />
</div>
</template>
......@@ -18,22 +18,24 @@ export default {
components: { NavBar, Footer },
data() {
return {
// isRouterAlive: true,
headerFixed: false,
};
},
methods: {
// reload() {
// this.isRouterAlive = false;
// this.$nextTick(() => (this.isRouterAlive = true));
// },
},
mounted() {
this.$nextTick(() => {
let wow = this.$wow
wow.init()
let wow = this.$wow;
wow.init();
});
},
};
</script>
<style lang="scss">
html,
body,
#app {
height: 100%;
}
</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 {
<style lang="scss" scoped>
.footer{
display: flex;
height: 100px;
height: 200px;
padding: 0 24px;
justify-content: center;
align-items: center;
......@@ -25,6 +25,7 @@ export default {
// bottom: 0;
// left: 0;
// right: 0;
span{
margin-right: 16px;
}
......
src/components/NavBar/index.vue
浏览文件 @ 0a56a4f4
<template>
<div class="nav">
<div
:class="{ nav: true, 'header-fixed ': isFixed, 'home-nav': isHome }"
id="navbar"
>
<div class="container">
<div class="logo-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo.png" />
......@@ -12,11 +15,8 @@
:key="index"
@click="handleClickTab(item)"
>
<div :class="{ active: currentTab.name == item.name }"></div>
<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 class="tools wow animate__animated animate__fadeInRight">
......@@ -85,11 +85,45 @@ import { mapGetters } from "vuex";
export default {
name: "NavBar",
computed: {
...mapGetters(["token", "userInfo", "curPath"]),
...mapGetters(["token", "userInfo", "curPath", "navBarFixed"]),
hasToken() {
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() {
return {
pages: [
......@@ -124,56 +158,47 @@ export default {
name: "首页",
path: "/",
},
isHome: true,
isFixed: false,
offsetTop: 0,
};
},
watch: {
curPath: {
handler: function (value) {
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,
},
mounted() {
window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => {
this.offsetTop = document.querySelector("#navbar").offsetTop;
});
},
methods: {
initHeight() {
let scrollTop =
window.pageYOffset ||
document.documentElement.scrollTop ||
document.body.scrollTop;
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
handleToLogin() {
this.$router.push("/login?redirect=" + this.$route.fullPath);
},
async handleLogOut() {
await this.$store.dispatch("user/logout");
this.logoutDialogVisible = false;
// 如果当前的path为/personal，需跳转到首页
let path = this.$route.fullPath;
if (path.indexOf("/personal") != -1) {
this.$router.push("/");
}
// this.$router.push(`/login?redirect=${this.$route.fullPath}`);
},
handleClickTab(tab) {
this.currentTab = tab;
},
},
destroyed() {
window.removeEventListener("scroll", this.initHeight);
},
};
</script>
......@@ -185,13 +210,27 @@ export default {
}
}
.nav {
height: 100px;
width: 100%;
.home-nav {
position: absolute;
top: 0;
left: 0;
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 {
width: 100%;
height: 100%;
......@@ -213,10 +252,12 @@ export default {
.tabs {
display: flex;
margin-right: 100px;
margin-right: 80px;
min-width: 512px;
// height: 100%;
// transform: translateY(200px);
// animation: fadeUp ease 1s forwards;
height: 100%;
.tab-item {
margin-right: 70px;
color: #fff;
......@@ -224,11 +265,37 @@ export default {
align-items: center;
font-family: "Alibaba-PuHuiTi";
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: -16px;
left: 24%;
transform: scale(1.5);
bottom: 24px;
left: 0;
}
&:hover:before {
background: #1d549d;
width: 100%;
}
.active {
width: 100%;
height: 4px;
background: #1d549d;
position: absolute;
bottom: 24px;
left: 0;
}
}
}
......
src/router/index.js
浏览文件 @ 0a56a4f4
......@@ -5,13 +5,18 @@ import Home from '../views/home'
Vue.use(VueRouter)
// keepAlive先全部为true 后期根据每个页面需求调整
const routes = [
{
path: '/404',
component: () => import('@/views/404.vue'),
hidden: true
},
// 首页
{
path: '/',
name: 'home',
component: Home,
meta:{
keepAlive:false
meta: {
keepAlive: false
}
},
// 精品展
......@@ -19,8 +24,8 @@ const routes = [
path: '/boutique',
name: 'about',
component: () => import('@/views/boutique'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
// 虚拟展厅
......@@ -28,8 +33,8 @@ const routes = [
path: '/virtual',
name: 'virtual',
component: () => import('@/views/virtual'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
// 布展
......@@ -37,8 +42,8 @@ const routes = [
path: '/display',
name: 'display',
component: () => import('@/views/display'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
// 布展详情页
......@@ -46,8 +51,8 @@ const routes = [
path: '/display/:exhibitionId',
name: 'displayDetail',
component: () => import('@/views/display/Detail.vue'),
meta:{
keepAlive:false
meta: {
keepAlive: false
}
},
// 文物展
......@@ -55,8 +60,8 @@ const routes = [
path: '/culturalRelic',
name: 'culturalRelic',
component: () => import('@/views/culturalRelic'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
// 文物详情页
......@@ -64,8 +69,8 @@ const routes = [
path: '/culturalRelic/:crId',
name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue'),
meta:{
keepAlive:false
meta: {
keepAlive: false
}
},
// 个人中心
......@@ -73,8 +78,8 @@ const routes = [
path: '/personal',
name: 'personal',
component: () => import('@/views/personal'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
// 登录
......@@ -82,8 +87,8 @@ const routes = [
path: '/login',
name: 'login',
component: () => import('@/views/login'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
......@@ -92,8 +97,8 @@ const routes = [
path: '/register',
name: 'register',
component: () => import('@/views/register'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
// 博物馆
......@@ -101,8 +106,8 @@ const routes = [
path: '/museum',
name: 'museum',
component: () => import('@/views/museum'),
meta:{
keepAlive:true
meta: {
keepAlive: true
}
},
// 博物馆详情
......@@ -110,10 +115,16 @@ const routes = [
path: '/museum/:id',
name: 'museum',
component: () => import('@/views/museum/Detail.vue'),
meta:{
keepAlive:false
meta: {
keepAlive: false
}
},
// 404
{
path: '*',
redirect: '/404',
}
]
const router = new VueRouter({
......
src/store/getters.js
浏览文件 @ 0a56a4f4
......@@ -3,8 +3,12 @@ const getters = {
userInfo: state => state.user.userInfo,
avatar: state => state.user.avatar,
name: state => state.user.name,
dicts: state => state.dict.dicts,
museumTree: state => state.org.museumTree,
curPath: state => state.app.curPath
curPath: state => state.app.curPath,
navBarFixed: state => state.app.navBarFixed
}
export default getters
src/store/modules/app.js
浏览文件 @ 0a56a4f4
// import {
// getToken,
// } from '@/utils/auth'
const getDefaultState = () => {
return {
curPath:null,
curPath: null,
navBarFixed: false
}
}
// const getCurPath= function(){}
const state = getDefaultState()
const mutations = {
......@@ -18,6 +19,9 @@ const mutations = {
SET_NAV_BAR: (state, path) => {
state.curPath = path
},
SET_NAVBAR_FIXED: (state, isFixed) => {
state.navBarFixed = isFixed
}
}
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>
<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="back">
<el-button
......
src/views/culturalRelic/index.vue
浏览文件 @ 0a56a4f4
<template>
<div class="cultural-relic">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
......@@ -49,6 +48,7 @@
filterable
@change="handleYearsChange"
clearable
ref="years"
>
</el-cascader>
<div class="threeD item" @click="handleClickThreeD">
......@@ -69,7 +69,10 @@
>
<div
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">
<img
......@@ -107,7 +110,10 @@
</div>
</el-col>
</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">
<el-pagination
@size-change="handleSizeChange"
......@@ -237,6 +243,7 @@ export default {
handleYearsChange(value) {
this.years = value;
this.loadData();
this.$refs.years.dropDownVisible = false;
},
handleKeyWordChange(value) {
this.keyword = value;
......@@ -380,7 +387,6 @@ $text-indent: 16px;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
......@@ -392,11 +398,10 @@ $text-indent: 16px;
}
.text {
font-size: 14px;
color: #FFF;
color: #fff;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
......
src/views/display/Detail.vue
浏览文件 @ 0a56a4f4
<template>
<div class="display-detail">
<div class="empty-space"></div>
<div class="content" id="content">
<div
class="content-item sliders"
......@@ -286,6 +285,13 @@ export default {
]);
this.loadDetail();
},
destroyed() {
//同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
methods: {
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
......@@ -346,7 +352,21 @@ export default {
},
addImgsEventListener(e) {
let firefoxListenFun = function (e) {
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE
e.returnValue = false;
} else {
// Chrome
e.preventDefault();
}
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
}
},
firefoxListenFun(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
......@@ -368,20 +388,6 @@ export default {
obj.onmousewheel(e);
}, 1);
}
};
e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE
e.returnValue = false;
} else {
// Chrome
e.preventDefault();
}
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
addEventListener("DOMMouseScroll", firefoxListenFun, false);
}
},
pageUpOrDown(e) {
......
src/views/display/detail/ChStyle.vue
浏览文件 @ 0a56a4f4
<template>
<div class="display-detail">
<div class="empty-space"></div>
<div class="content" id="content">
<div class="content-item sliders" ref="imgs">
<div class="view-box">
......
src/views/display/index.vue
浏览文件 @ 0a56a4f4
<template>
<div class="display">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
......@@ -90,7 +89,10 @@
</div>
</el-col>
</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">
<el-pagination
@size-change="handleSizeChange"
......@@ -140,7 +142,7 @@ export default {
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionCode: [],
regionTree: [],
};
},
......@@ -174,7 +176,7 @@ export default {
limit: this.list.size,
name: this.keyword,
type: this.type,
regionCode: this.regionCode[this.regionCode.length-1],
regionCode: this.regionCode[this.regionCode.length - 1],
};
let res = await getList(params);
if (res.code == 0) {
......@@ -215,7 +217,7 @@ export default {
handleRegionChange(value) {
this.regionCode = value;
// this.$refs.region
this.$refs.region.dropDownVisible = false;
this.loadData();
},
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 0a56a4f4
......@@ -130,6 +130,7 @@ $blue: #2069c4;
color: #fff;
margin-bottom: 36px;
font-family: "Alibaba PuHuiTi";
font-size: 22px;
}
.list {
width: 100%;
......
src/views/home/components/Display.vue
浏览文件 @ 0a56a4f4
......@@ -14,24 +14,21 @@
:style="{
transform: `translateX(-${currentIndex * sliderItemWidth}px)`,
}"
v-if="list.length > 0"
>
<div
:class="['slide-item', currentIndex == index ? 'active' : '']"
v-for="(item, index) in list"
:key="index"
>
<div class="content wow animate__animated animate__fadeInLeft">
<div class="content">
<div class="content-name">{{ item.title }}</div>
<div class="content-intro">
{{ item.intro ? item.intro : "" }}
</div>
<div class="entrance" @click="handleClick(item)">
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
<EntranceIcon color="#fff" />
</div>
<div class="img wow animate__animated animate__fadeInRight" @click="handleClick(item)">
<div class="img" @click="handleClick(item)">
<img
v-if="$getFullUrl(item.faceImagePressUrl)"
:src="$getFullUrl(item.faceImagePressUrl)"
......@@ -60,8 +57,12 @@
<script>
import { getRecommendDisplay } from "@/api/display";
import EntranceIcon from "@/components/EntranceIcon";
export default {
name: "Display",
components: {
EntranceIcon,
},
data() {
return {
list: [],
......@@ -71,23 +72,17 @@ export default {
},
mounted() {
this.loadList();
this.getSlideItemWidth();
},
methods: {
async loadList() {
let res = await getRecommendDisplay();
this.list = res.data;
// this.currentItem = this.list[0];
this.getSlideItemWidth();
},
handleChangePage(page) {
let index = this.list.indexOf(page);
this.currentIndex = index;
// this.currentItem = page;
console.log(
"currentIndex * sliderItemWidth",
this.currentIndex * this.sliderItemWidth
);
console.log(-this.currentIndex * this.sliderItemWidth);
},
handleClick(item) {
console.log(item);
......@@ -99,8 +94,9 @@ export default {
getSlideItemWidth() {
setTimeout(() => {
let slideItem = document.getElementsByClassName("slide-item");
if (slideItem[0]) {
this.sliderItemWidth = slideItem[0].offsetWidth;
console.log(" this.sliderItemWidth", this.sliderItemWidth);
}
}, 500);
},
},
......@@ -122,6 +118,7 @@ export default {
margin-bottom: 90px;
font-family: "Alibaba PuHuiTi";
flex-basis: auto;
font-size: 22px;
}
.wrapper {
......@@ -136,8 +133,7 @@ export default {
display: flex;
min-width: 100%;
height: 100%;
// transition: all 0.5s ease-in-out;
transition: all 0.5s ease;
.slide-item {
min-width: 100%;
position: relative;
......@@ -145,7 +141,6 @@ export default {
justify-content: space-between;
height: 100%;
padding: 0 10px;
opacity: 0;
transition: all 1s ease;
.content {
......@@ -164,16 +159,9 @@ export default {
line-height: 40px;
margin-bottom: 40px;
}
.entrance {
font-size: 16px;
cursor: pointer;
.entrance-text {
margin-right: 12px;
}
}
}
.img {
margin-top: 100px;
margin-top: 240px;
width: 380px;
height: 480px;
cursor: pointer;
......@@ -190,9 +178,6 @@ export default {
}
}
}
.active {
opacity: 1;
}
}
.pagination {
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 0a56a4f4
......@@ -10,16 +10,20 @@
<div class="intro">
{{ curMuseum.intro }}
</div>
<div
<!-- <div
class="entrance"
@click="handleClick(curMuseum)"
v-show="curMuseum.name"
>
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance-black.png" alt="" />
</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>
</template>
......@@ -28,8 +32,12 @@
import * as echarts from "echarts";
import guizhou from "../../../../public/geoData/guizhou.json";
import { getMuseumListPage } from "@/api/org";
import EntranceIcon from "@/components/EntranceIcon";
export default {
name: "MuseumMap",
components: {
EntranceIcon,
},
data() {
return {
myChart: "",
......@@ -57,7 +65,7 @@ export default {
// 获取博物馆列表，并构造经纬度
let res = await getMuseumListPage(params);
this.museumList = res.data.records;
this.curMuseum = this.museumList[0]
this.curMuseum = this.museumList[0];
let seriesList = [{ data: [] }];
this.museumList.forEach((item) => {
// debugger;
......@@ -278,6 +286,7 @@ export default {
align-items: center;
position: relative;
padding: 70px 13% 114px 13%;
overflow: hidden;
.title {
color: #333;
// margin-bottom: 43px;
......@@ -321,7 +330,7 @@ export default {
cursor: pointer;
display: flex;
align-content: flex-end;
.entrance-text{
.entrance-text {
margin-right: 12px;
}
img {
......
src/views/home/components/Virtural.vue
浏览文件 @ 0a56a4f4
......@@ -20,10 +20,11 @@
<div class="intro-content">
{{ list[0].intro }}
</div>
<div class="entrance" @click="handleClick(list[0])">
<!-- <div class="entrance" @click="handleClick(list[0])">
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div> -->
<EntranceIcon color="#fff" />
</div>
</el-col>
<el-col :span="18">
......@@ -54,9 +55,11 @@
</template>
<script>
import EntranceIcon from "@/components/EntranceIcon";
import { getVrRecommend } from "@/api/virtual";
export default {
name: "Virtural",
components: { EntranceIcon },
data() {
return {
list: [],
......@@ -90,6 +93,7 @@ $blue: #2069c4;
background-size: 100% 50%;
background-repeat: no-repeat;
background-position-y: 70%;
overflow: hidden;
.content-wrapper {
.title {
display: flex;
......@@ -148,11 +152,9 @@ $blue: #2069c4;
&:hover {
.name {
transform: translateY(0);
}
img {
transform: scale(1.1);
}
}
img {
......@@ -172,7 +174,7 @@ $blue: #2069c4;
padding: 16px;
transform: translateY(100px);
width: 100%;
transition:all 0.5s ease;
transition: all 0.5s ease;
}
}
}
......
src/views/home/index.vue
浏览文件 @ 0a56a4f4
......@@ -27,6 +27,12 @@ export default {
Display,
CulturalRelic,
},
// data() {
// return {
// headerFixed: false,
// };
// },
};
</script>
......
src/views/login/index.vue
浏览文件 @ 0a56a4f4
<!-- -->
<template>
<div class="wrapper">
<div class="empty-space"></div>
<div class="login">
<div class="title">
<div class="text">登 陆</div>
......@@ -68,7 +67,12 @@
<!-- <span style="margin: 0 10px"> | </span> -->
<!-- <router-link to="/register"> 忘记密码 </router-link> -->
</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
>
</div>
......@@ -155,10 +159,16 @@ export default {
<style lang="scss" scoped>
.wrapper {
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 {
width: 500px;
margin: 50px auto;
// margin: 50px auto;
background-color: #fff;
border-radius: 16px;
padding: 48px 32px;
......@@ -194,10 +204,11 @@ export default {
display: flex;
justify-content: center;
}
.login-button,.el-button{
.login-button,
.el-button {
width: 100%;
background-color: #2069c4;
color: #fff;
font-size: 22px;
}
}
</style>
src/views/museum/Detail.vue
浏览文件 @ 0a56a4f4
<!-- -->
<template>
<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="back">
<el-button
......
src/views/museum/index.vue
浏览文件 @ 0a56a4f4
<template>
<div class="display">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
......@@ -72,6 +71,10 @@
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
......
src/views/personal/index.vue
浏览文件 @ 0a56a4f4
<template>
<div class="personal">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="main">
<el-tabs :tab-position="'left'" type="card" class="wrapper">
......
src/views/virtual/index.vue
浏览文件 @ 0a56a4f4
<template>
<div class="display">
<!-- <NavBar /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="content-wrapper">
<div class="content">
<el-row :gutter="40">
......@@ -32,6 +30,7 @@
filterable
@change="handleRegionChange"
clearable
ref="region"
>
</el-cascader>
......@@ -72,6 +71,10 @@
</div>
</el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
<div class="pagination">
<el-pagination
@size-change="handleSizeChange"
......@@ -121,7 +124,7 @@ export default {
onlyShow3d: false,
keyword: "",
type: "",
regionCode:[],
regionCode: [],
regionTree: [],
};
},
......@@ -154,7 +157,7 @@ export default {
page: this.list.current,
limit: this.list.size,
name: this.keyword,
regionCode: this.regionCode[this.regionCode.length-1],
regionCode: this.regionCode[this.regionCode.length - 1],
};
let res = await getVirtualList(params);
if (res.code == 0) {
......@@ -174,7 +177,7 @@ export default {
},
handleClick(item) {
window.open(item.url,'_blank')
window.open(item.url, "_blank");
},
defImg(e) {
e.target.src = require("@/assets/404_images/no-pic.png");
......@@ -190,9 +193,8 @@ export default {
},
handleRegionChange(value) {
console.log(value);
console.log(value[value.length - 1]);
this.regionCode = value;
this.$refs.region.dropDownVisible = false
this.loadData();
},
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论