Skip to content

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

首页添加动画

上级 7cdf0a76
隐藏空白字符变更
内嵌 并排
正在显示 包含 691 行增加 和 292 行删除
package-lock.json
浏览文件 @ 050a04dd
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"@xunlei/vue-lazy-component": "^1.1.3", "@xunlei/vue-lazy-component": "^1.1.3",
"animate.css": "^4.1.1",
"animejs": "^3.2.1", "animejs": "^3.2.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
...@@ -22,6 +23,7 @@ ...@@ -22,6 +23,7 @@
"sass-loader": "^13.0.2", "sass-loader": "^13.0.2",
"svgo": "^2.8.0", "svgo": "^2.8.0",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
...@@ -42,7 +44,8 @@ ...@@ -42,7 +44,8 @@
"sass": "^1.32.7", "sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3", "terser-webpack-plugin": "^5.3.3",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14",
"wowjs": "^1.1.3"
} }
}, },
"node_modules/@achrinza/node-ipc": { "node_modules/@achrinza/node-ipc": {
...@@ -3227,6 +3230,11 @@ ...@@ -3227,6 +3230,11 @@
"ajv": "^6.9.1" "ajv": "^6.9.1"
} }
}, },
"node_modules/animate.css": {
"version": "4.1.1",
"resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
},
"node_modules/animejs": { "node_modules/animejs": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz", "resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz",
...@@ -5288,6 +5296,19 @@ ...@@ -5288,6 +5296,19 @@
"entities": "^2.0.0" "entities": "^2.0.0"
} }
}, },
"node_modules/dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"dependencies": {
"ssr-window": "^2.0.0"
}
},
"node_modules/dom7/node_modules/ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
},
"node_modules/domelementtype": { "node_modules/domelementtype": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
...@@ -12585,6 +12606,11 @@ ...@@ -12585,6 +12606,11 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"node_modules/ssri": { "node_modules/ssri": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz", "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
...@@ -13208,6 +13234,19 @@ ...@@ -13208,6 +13234,19 @@
"node": ">= 10" "node": ">= 10"
} }
}, },
"node_modules/swiper": {
"version": "4.5.1",
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"hasInstallScript": true,
"dependencies": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
},
"engines": {
"node": ">= 4.7.0"
}
},
"node_modules/table": { "node_modules/table": {
"version": "6.8.0", "version": "6.8.0",
"resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz", "resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",
...@@ -13931,6 +13970,19 @@ ...@@ -13931,6 +13970,19 @@
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz", "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==" "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
}, },
"node_modules/vue-awesome-swiper": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"dependencies": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
},
"node_modules/vue-eslint-parser": { "node_modules/vue-eslint-parser": {
"version": "8.3.0", "version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
...@@ -14650,6 +14702,15 @@ ...@@ -14650,6 +14702,15 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/wowjs": {
"version": "1.1.3",
"resolved": "https://registry.npmmirror.com/wowjs/-/wowjs-1.1.3.tgz",
"integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==",
"dev": true,
"dependencies": {
"animate.css": "latest"
}
},
"node_modules/wrap-ansi": { "node_modules/wrap-ansi": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
...@@ -17275,6 +17336,11 @@ ...@@ -17275,6 +17336,11 @@
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"requires": {} "requires": {}
}, },
"animate.css": {
"version": "4.1.1",
"resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
},
"animejs": { "animejs": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz", "resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz",
...@@ -18910,6 +18976,21 @@ ...@@ -18910,6 +18976,21 @@
"entities": "^2.0.0" "entities": "^2.0.0"
} }
}, },
"dom7": {
"version": "2.1.5",
"resolved": "https://registry.npmmirror.com/dom7/-/dom7-2.1.5.tgz",
"integrity": "sha512-xnhwVgyOh3eD++/XGtH+5qBwYTgCm0aW91GFgPJ3XG+jlsRLyJivnbP0QmUBFhI+Oaz9FV0s7cxgXHezwOEBYA==",
"requires": {
"ssr-window": "^2.0.0"
},
"dependencies": {
"ssr-window": {
"version": "2.0.0",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-2.0.0.tgz",
"integrity": "sha512-NXzN+/HPObKAx191H3zKlYomE5WrVIkoCB5IaSdvKokxTpjBdWfr0RaP+1Z5KOfDT0ZVz+2tdtiBkhsEQ9p+0A=="
}
}
},
"domelementtype": { "domelementtype": {
"version": "2.3.0", "version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz", "resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
...@@ -24672,6 +24753,11 @@ ...@@ -24672,6 +24753,11 @@
"tweetnacl": "~0.14.0" "tweetnacl": "~0.14.0"
} }
}, },
"ssr-window": {
"version": "1.0.1",
"resolved": "https://registry.npmmirror.com/ssr-window/-/ssr-window-1.0.1.tgz",
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
},
"ssri": { "ssri": {
"version": "8.0.1", "version": "8.0.1",
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz", "resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
...@@ -25182,6 +25268,15 @@ ...@@ -25182,6 +25268,15 @@
} }
} }
}, },
"swiper": {
"version": "4.5.1",
"resolved": "https://registry.npmmirror.com/swiper/-/swiper-4.5.1.tgz",
"integrity": "sha512-se6I7PWWu950NAMXXT+ENtF/6SVb8mPyO+bTfNxbQBILSeLqsYp3Ndap+YOA0EczOIUlea274PKejT6gKZDseA==",
"requires": {
"dom7": "^2.1.3",
"ssr-window": "^1.0.1"
}
},
"table": { "table": {
"version": "6.8.0", "version": "6.8.0",
"resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz", "resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",
...@@ -25765,6 +25860,15 @@ ...@@ -25765,6 +25860,15 @@
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz", "resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
"integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ==" "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
}, },
"vue-awesome-swiper": {
"version": "3.1.3",
"resolved": "https://registry.npmmirror.com/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
"requires": {
"object-assign": "^4.1.1",
"swiper": "^4.0.7"
}
},
"vue-eslint-parser": { "vue-eslint-parser": {
"version": "8.3.0", "version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
...@@ -26343,6 +26447,15 @@ ...@@ -26343,6 +26447,15 @@
"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==", "integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
"dev": true "dev": true
}, },
"wowjs": {
"version": "1.1.3",
"resolved": "https://registry.npmmirror.com/wowjs/-/wowjs-1.1.3.tgz",
"integrity": "sha512-HQp1gi56wYmjOYYOMZ08TnDGpT+AO21RJVa0t1NJ3jU8l3dMyP+sY7TO/lilzVp4JFjW88bBY87RnpxdpSKofA==",
"dev": true,
"requires": {
"animate.css": "latest"
}
},
"wrap-ansi": { "wrap-ansi": {
"version": "7.0.0", "version": "7.0.0",
"resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
package.json
浏览文件 @ 050a04dd
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
}, },
"dependencies": { "dependencies": {
"@xunlei/vue-lazy-component": "^1.1.3", "@xunlei/vue-lazy-component": "^1.1.3",
"animate.css": "^4.1.1",
"animejs": "^3.2.1", "animejs": "^3.2.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"core-js": "^3.8.3", "core-js": "^3.8.3",
...@@ -23,6 +24,7 @@ ...@@ -23,6 +24,7 @@
"sass-loader": "^13.0.2", "sass-loader": "^13.0.2",
"svgo": "^2.8.0", "svgo": "^2.8.0",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2"
}, },
...@@ -43,7 +45,8 @@ ...@@ -43,7 +45,8 @@
"sass": "^1.32.7", "sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11", "svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3", "terser-webpack-plugin": "^5.3.3",
"vue-template-compiler": "^2.6.14" "vue-template-compiler": "^2.6.14",
"wowjs": "^1.1.3"
}, },
"eslintConfig": { "eslintConfig": {
"root": true, "root": true,
......
src/App.vue
浏览文件 @ 050a04dd
<template> <template>
<div id="app"> <div id="app">
<NavBar /> <NavBar />
<!-- 开发阶段暂停使用keepAlive -->
<!-- <router-view :key="$route.fullPath" v-if="isRouterAlive" /> --> <!-- <router-view :key="$route.fullPath" v-if="isRouterAlive" /> -->
<keep-alive> <router-view ></router-view>
<!-- <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> -->
<Footer /> <Footer />
</div> </div>
</template> </template>
......
src/assets/imgs/home/logo.png
查看替换文件 @ 7cdf0a76 浏览文件 @ 050a04dd
src/assets/imgs/home/logo.png

17.4 KB | W: | H:

src/assets/imgs/home/logo.png

20.4 KB | W: | H:

src/assets/imgs/home/logo.png
src/assets/imgs/home/logo.png
src/assets/imgs/home/logo.png
src/assets/imgs/home/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/styles/animations.scss 0 → 100644
浏览文件 @ 050a04dd
// 从上往下
.fadeInDown {
animation: fadeInDown 1s;
-webkit-animation: fadeInDown 1s;
}
// 从下往上
.fadeInUp {
animation: fadeInUp 1s;
-webkit-animation: fadeInUp 1s;
}
@keyframes fadeInDown {
0% {
margin-top: -200px;
opacity: 0;
}
100% {
margin-top: 0px;
opacity: 1;
}
}
@-webkit-keyframes fadeInDown {
0% {
margin-top: -200px;
opacity: 0;
}
100% {
margin-top: 0px;
opacity: 1;
}
}
@keyframes fadeInUp {
0% {
margin-top: 200px;
opacity: 0;
}
100% {
margin-top: 0px;
opacity: 1;
}
}
@-webkit-keyframes fadeInUp {
0% {
margin-top: 200px;
opacity: 0;
}
100% {
margin-top: 0px;
opacity: 1;
}
}
\ No newline at end of file
src/assets/styles/index.scss
浏览文件 @ 050a04dd
@import url('@/assets/fonts/font.css'); @import url('@/assets/fonts/font.css');
@import url('./animations.scss');
/**适应移动端 */ /**适应移动端 */
@media screen and (max-width: 500px) { @media screen and (max-width: 500px) {
...@@ -58,4 +59,14 @@ li { ...@@ -58,4 +59,14 @@ li {
.view-text { .view-text {
color: #61666d color: #61666d
} }
} }
\ No newline at end of file
.content-wrapper{
// width: 1200px;
width: 100%;
padding: 0 13%;
display: flex;
flex-direction: column;
align-items: center;
}
src/components/Footer/index.vue
浏览文件 @ 050a04dd
...@@ -21,6 +21,10 @@ export default { ...@@ -21,6 +21,10 @@ export default {
align-items: center; align-items: center;
background-color: #2069C4; background-color: #2069C4;
color: #fff; color: #fff;
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
span{ span{
margin-right: 16px; margin-right: 16px;
} }
......
src/components/NavBar/index.vue
浏览文件 @ 050a04dd
<template> <template>
<div class="nav"> <div class="nav">
<div class="container"> <div class="container">
<div class="logo-container"> <div class="logo-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo.png" /> <img src="@/assets/imgs/home/logo.png" />
</div> </div>
<div class="right"> <div class="right wow animate__animated animate__fadeInUp">
<div class="tabs"> <div class="tabs">
<div <div
class="tab-item" class="tab-item"
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
></svg-icon> ></svg-icon>
</div> </div>
</div> </div>
<div class="tools"> <div class="tools wow animate__animated animate__fadeInRight">
<div class="wrapper"> <div class="wrapper">
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<el-button round> <el-button round>
......
src/main.js
浏览文件 @ 050a04dd
...@@ -5,13 +5,15 @@ import store from './store/index' ...@@ -5,13 +5,15 @@ import store from './store/index'
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/styles/index.scss";//全局样式 import "@/assets/styles/index.scss"; //全局样式
// import * as echarts from 'echarts' // import * as echarts from 'echarts'
import './icons' import './icons'
import dict from '@/components/Dict' import dict from '@/components/Dict'
import VueLazyComponent from '@xunlei/vue-lazy-component' import VueLazyComponent from '@xunlei/vue-lazy-component'
import '@/rem' import animated from 'animate.css';
// import '@/rem'
// 全局混入 // 全局混入
// import { common } from '@/mixins' // import { common } from '@/mixins'
...@@ -27,11 +29,29 @@ Vue.use(dict); ...@@ -27,11 +29,29 @@ Vue.use(dict);
// 全局注册组件懒加载方案 // 全局注册组件懒加载方案
Vue.use(VueLazyComponent) Vue.use(VueLazyComponent)
// 全局注册动画效果
Vue.use(animated);
// // 全局混入浏览器缩放适配组件 // // 全局混入浏览器缩放适配组件
// Vue.mixin(common) // Vue.mixin(common)
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 150, // default
mobile: true, // default
live: false,
// live为true时，控制台会提示：MutationObserver is not supported by your browser. & WOW.js cannot detect dom mutations, please call .sync() after loading new content.
callback: function (box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
})
new Vue({ new Vue({
......
src/router/index.js
浏览文件 @ 050a04dd
...@@ -47,7 +47,7 @@ const routes = [ ...@@ -47,7 +47,7 @@ const routes = [
name: 'displayDetail', name: 'displayDetail',
component: () => import('@/views/display/Detail.vue'), component: () => import('@/views/display/Detail.vue'),
meta:{ meta:{
keepAlive:true keepAlive:false
} }
}, },
// 文物展 // 文物展
...@@ -65,7 +65,7 @@ const routes = [ ...@@ -65,7 +65,7 @@ const routes = [
name: 'culturalRelicDetail', name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue'), component: () => import('@/views/culturalRelic/Detail.vue'),
meta:{ meta:{
keepAlive:true keepAlive:false
} }
}, },
// 个人中心 // 个人中心
...@@ -111,7 +111,7 @@ const routes = [ ...@@ -111,7 +111,7 @@ const routes = [
name: 'museum', name: 'museum',
component: () => import('@/views/museum/Detail.vue'), component: () => import('@/views/museum/Detail.vue'),
meta:{ meta:{
keepAlive:true keepAlive:false
} }
}, },
] ]
......
src/views/home/components/Boutique.vue
浏览文件 @ 050a04dd
<template> <template>
<el-carousel class="slider"> <el-carousel class="slider" autoplay arrow="nerver">
<el-carousel-item> <el-carousel-item>
<div> <div>
<img src="@/assets/imgs/boutique/1.jpg" width="100%" /> <img src="@/assets/imgs/boutique/1.jpg" width="100%" />
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 050a04dd
<!-- --> <!-- -->
<template> <template>
<div class="home-cr"> <div class="home-cr">
<div class="title"> <div class="title wow animate__animated animate__fadeInUp">
<div class="ch">每日推送</div> <div class="ch">每日推送</div>
<div class="en">Daily Exhibition Push</div> <div class="en">Daily Exhibition Push</div>
</div> </div>
<div class="text">文物</div> <div class="text wow animate__animated animate__fadeInUp">文物</div>
<div class="list"> <div class="list wow animate__animated animate__zoomIn">
<!-- 1231 <!-- 1231
<el-carousel> <el-carousel>
<el-carousel-item v-for="(item,index) in length" :key="index"> <el-carousel-item v-for="(item,index) in length" :key="index">
...@@ -16,8 +16,13 @@ ...@@ -16,8 +16,13 @@
<el-carousel indicator-position="outside" :autoplay="false" arrow="never"> <el-carousel indicator-position="outside" :autoplay="false" arrow="never">
<el-carousel-item v-for="(item, index) in list" :key="index"> <el-carousel-item v-for="(item, index) in list" :key="index">
<el-row :gutter="14"> <el-row :gutter="14">
<el-col :span="6" v-for="i in item" :key="i.crId" class="container"> <el-col :span="6" v-for="i in item" :key="i.crId" class="container" >
<img :src="i.faceImageUrl" alt="" width="100%" /> <img
v-if="i.faceImagePressUrl"
:src="i.faceImagePressUrl"
alt=""
/>
<img v-else :src="index.faceImageUrl" alt="" />
<div class="info" v-show='i.faceImageUrl'> <div class="info" v-show='i.faceImageUrl'>
<div class="name">{{ i.name }}</div> <div class="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWay }}</div> <div class="sourceWay">{{ i.sourceWay }}</div>
...@@ -45,6 +50,7 @@ ...@@ -45,6 +50,7 @@
<script> <script>
import { getRecommendCr } from "@/api/culturalRelic"; import { getRecommendCr } from "@/api/culturalRelic";
export default { export default {
name:'CulturalRelic',
data() { data() {
return { return {
list: [], list: [],
...@@ -122,13 +128,13 @@ export default { ...@@ -122,13 +128,13 @@ export default {
} }
.list { .list {
width: 100%; width: 100%;
padding: 0 14% 0 14%; padding: 0 13%;
height: 492px; height: 492px;
} }
.container { .container {
// width: 339px; // width: 339px;
height: 226px; height: 20%;
margin-bottom: 40px; margin-bottom: 40px;
cursor: pointer; cursor: pointer;
position: relative; position: relative;
......
src/views/home/components/Display.vue
浏览文件 @ 050a04dd
<!-- --> <!-- -->
<template> <template>
<div class="home-display"> <div class="home-display">
<div class="title">展览</div> <div class="title wow animate__animated animate__fadeInUp">展览</div>
<transition name="el-fade-in-linear"> <div class="wrapper" v-show="currentItem">
<div class="wrapper" v-show="currentItem"> <div class="content wow animate__animated animate__fadeInLeft">
<div class="content"> <div class="content-name">{{ currentItem.title }}</div>
<div class="content-name">{{ currentItem.title }}</div> <div class="content-intro">
<div class="content-intro"> {{ currentItem.intro ? currentItem.intro : "" }}
{{ currentItem.intro ? currentItem.intro : "" }}
</div>
</div>
<div class="img">
<img :src="currentItem.faceImageUrl" />
<div class="img-name">{{ currentItem.title }}</div>
</div>
<div class="pagination">
<ul>
<li
v-for="(item, index) in list"
:key="index"
:class="currentItem == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ index + 1 }}
</li>
</ul>
</div> </div>
</div> </div>
</transition> <div class="img wow animate__animated animate__fadeInRight">
<img
v-if="currentItem.faceImagePressUrl"
:src="currentItem.faceImagePressUrl"
alt=""
/>
<img v-else :src="currentItem.faceImageUrl" alt="" />
<div class="img-name">{{ currentItem.title }}</div>
</div>
<div class="pagination wow animate__animated animate__fadeInUp">
<ul>
<li
v-for="(item, index) in list"
:key="index"
:class="currentItem == item ? 'active' : ''"
@click="handleChangePage(item)"
>
{{ index + 1 }}
</li>
</ul>
</div>
</div>
<!-- <el-carousel indicator-position="none" :autoplay="false" arrow="never"> <!-- <el-carousel indicator-position="none" :autoplay="false" arrow="never">
<el-carousel-item v-for="item in list" :key="item.exhibitionId"> <el-carousel-item v-for="item in list" :key="item.exhibitionId">
<div class="wrapper"> <div class="wrapper">
...@@ -62,6 +65,7 @@ ...@@ -62,6 +65,7 @@
<script> <script>
import { getRecommendDisplay } from "@/api/display"; import { getRecommendDisplay } from "@/api/display";
export default { export default {
name: "Display",
data() { data() {
return { return {
list: [], list: [],
...@@ -109,7 +113,7 @@ export default { ...@@ -109,7 +113,7 @@ export default {
position: relative; position: relative;
flex: 1; flex: 1;
.content { .content {
width: 800px; width: 600px;
.content-name { .content-name {
font-size: 20px; font-size: 20px;
font-family: Microsoft YaHei; font-family: Microsoft YaHei;
...@@ -132,7 +136,7 @@ export default { ...@@ -132,7 +136,7 @@ export default {
top: 20%; top: 20%;
// transform: translateY(-50%); // transform: translateY(-50%);
right: 0; right: 0;
width: 550px; width: 380px;
height: 480px; height: 480px;
img { img {
width: 100%; width: 100%;
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 050a04dd
<template> <template>
<div class="home-museum-map"> <div class="home-museum-map">
<div class="title"> <div class="title wow animate__animated animate__fadeInUp">
<div class="ch">文博地图</div> <div class="ch">文博地图</div>
<div class="en">Museum Map</div> <div class="en">Museum Map</div>
</div> </div>
<div class="wrapper"> <div class="wrapper">
<div class="content"> <div class="content wow animate__animated animate__fadeIn">
<div class="name">{{ curMuseum.name }}</div> <div class="name">{{ curMuseum.name }}</div>
<div class="intro"> <div class="intro">
{{ curMuseum.intro }} {{ curMuseum.intro }}
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
<img src="@/assets/imgs/home/entrance-black.png" alt="" /> <img src="@/assets/imgs/home/entrance-black.png" alt="" />
</div> </div>
</div> </div>
<div class="map" id="map"></div> <div class="map wow animate__animated animate__fadeInRight" id="map" ></div>
</div> </div>
</div> </div>
</template> </template>
...@@ -44,6 +44,7 @@ export default { ...@@ -44,6 +44,7 @@ export default {
this.$nextTick(() => { this.$nextTick(() => {
this.init(); this.init();
}); });
// this.initAnimate(); // this.initAnimate();
}, },
methods: { methods: {
...@@ -56,6 +57,7 @@ export default { ...@@ -56,6 +57,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]
let seriesList = [{ data: [] }]; let seriesList = [{ data: [] }];
this.museumList.forEach((item) => { this.museumList.forEach((item) => {
// debugger; // debugger;
...@@ -112,7 +114,7 @@ export default { ...@@ -112,7 +114,7 @@ export default {
faceImageUrl = `<div> faceImageUrl = `<div>
<div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name} <div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
<div/> <div/>
<img width="400px" src="${item.faceImageUrl}" /> <img width="400px" src="${item.faceImagePressUrl}" />
</div>`; </div>`;
that.curMuseum = item; that.curMuseum = item;
return; return;
...@@ -135,7 +137,7 @@ export default { ...@@ -135,7 +137,7 @@ export default {
series, // 打的那些点数据 series, // 打的那些点数据
geo: { geo: {
map: name || "china", // 引入地图 省份或者 国家 map: name || "china", // 引入地图 省份或者 国家
layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效 layoutCenter: ["66%", "50%"], //设置后left/right/top/bottom等属性无效
layoutSize: "45%", layoutSize: "45%",
roam: false, //关闭鼠标缩放和漫 roam: false, //关闭鼠标缩放和漫
zoom: 2, zoom: 2,
...@@ -153,75 +155,78 @@ export default { ...@@ -153,75 +155,78 @@ export default {
// }, // },
// }, // },
// ], // ],
// label: {
// normal: {
// show: true,
// textStyle: {
// color: "#fff",
// },
// },
// emphasis: {
// textStyle: {
// color: "#fff",
// },
// },
// },
// itemStyle: {
// normal: {
// areaColor: "#013C62",
// shadowColor: "#182f68",
// shadowOffsetX: 0,
// shadowOffsetY: 25,
// borderColor: "#2ab8ff",
// borderWidth: 1.5,
// areaColor: "#12235c",
// },
// emphasis: {
// areaColor: "#2069c4",
// borderWidth: 0,
// color: "green",
// },
// },
label: { label: {
normal: { normal: {
show: true, //静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: { textStyle: {
color: "#fff", color: "#fff",
fontSize: 10,
fontFamily: "Arial",
}, },
}, },
emphasis: { emphasis: {
textStyle: { // 高亮状态下的样式
color: "#fff", //动态展示的样式
}, color: "#fff",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
}, },
}, },
itemStyle: { itemStyle: {
// 地图区域的多边形 图形样式。
normal: { normal: {
areaColor: "#013C62", borderColor: "#fff", // 边框颜色
shadowColor: "#182f68", areaColor: "#2759af", // 区域颜色
shadowColor: "#182f68",
shadowOffsetX: 0, shadowOffsetX: 0,
shadowOffsetY: 25, shadowOffsetY: 25,
borderColor: "#2ab8ff", textStyle: {
borderWidth: 1.5, // 文字颜色
areaColor: "#12235c", color: "#fff",
},
// shadowBlur: 10, // 图形阴影的模糊大小
// shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
}, },
emphasis: { emphasis: {
areaColor: "#2069c4", areaColor: "#7b39e2",
borderWidth: 0, color: "#fff",
color: "green",
}, },
}, },
// label: {
// normal: {
// //静态的时候展示样式
// show: true, //是否显示地图省份得名称
// textStyle: {
// color: "#fff",
// fontSize: 10,
// fontFamily: "Arial",
// },
// },
// emphasis: {
// // 高亮状态下的样式
// //动态展示的样式
// color: "#fff",
// shadowOffsetX: 0,
// shadowOffsetY: 0,
// shadowBlur: 20,
// borderWidth: 0,
// shadowColor: "rgba(0, 0, 0, 0.5)",
// },
// },
// itemStyle: {
// // 地图区域的多边形 图形样式。
// normal: {
// borderColor: "#fff", // 边框颜色
// areaColor: "#2759af", // 区域颜色
// textStyle: {
// // 文字颜色
// color: "#fff",
// },
// // shadowBlur: 10, // 图形阴影的模糊大小
// // shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
// },
// emphasis: {
// areaColor: "#7b39e2",
// color: "#fff",
// },
// },
}, },
}; };
}, },
...@@ -291,6 +296,7 @@ export default { ...@@ -291,6 +296,7 @@ export default {
} }
} }
.wrapper { .wrapper {
width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
...@@ -303,6 +309,7 @@ export default { ...@@ -303,6 +309,7 @@ export default {
font-size: 20px; font-size: 20px;
font-weight: 400; font-weight: 400;
margin-bottom: 48px; margin-bottom: 48px;
font-weight: bold;
} }
.intro { .intro {
font-size: 14px; font-size: 14px;
......
src/views/home/components/Virtural.vue
浏览文件 @ 050a04dd
<!-- --> <!-- -->
<template> <template>
<div class="home-virtural"> <div class="home-virtural">
<div class="title"> <div class="content-wrapper">
<div class="ch">虚拟展厅</div> <div class="title wow animate__animated animate__fadeInUp" data-wow-offset="200" >
<div class="en">Virtual Exhibition Hall</div> <div class="ch">虚拟展厅</div>
</div> <div class="en">Virtual Exhibition Hall</div>
<div class="bar">
<img
src="@/assets/imgs/home/virtual-bg.png"
alt=""
class="bg"
width="100%"
/>
<div class="intro" v-if="list.length > 0">
<div class="name">{{ list[0].name }}</div>
<div class="deptName">{{ list[0].deptName }}</div>
<div class="intro-content">
{{ list[0].intro }}
</div>
<div class="entrance" @click="handleClick(list[0])">
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div>
<div class="virtual-items">
<el-row :gutter="10">
<el-col
:span="8"
v-for="(item, index) in list"
:key="index"
class="item"
@click.native="handleClick(item)"
>
<img :src="item.faceImageUrl" alt="" />
</el-col>
</el-row>
</div> </div>
<el-row class="content" :gutter="60">
<el-col :span="6">
<div class="intro wow animate__animated animate__fadeInLeft" v-if="list.length > 0" >
<div class="name">{{ list[0].name }}</div>
<div class="deptName">{{ list[0].deptName }}</div>
<div class="intro-content">
{{ list[0].intro }}
</div>
<div class="entrance" @click="handleClick(list[0])">
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance.png" alt="" />
</div>
</div>
</el-col>
<el-col :span="18">
<div class="virtual-items wow animate__animated animate__fadeInRight">
<el-row :gutter="10">
<el-col
:span="8"
v-for="(item, index) in list"
:key="index"
class="item"
@click.native="handleClick(item)"
>
<img
v-if="item.faceImagePressUrl"
:src="item.faceImagePressUrl"
alt=""
/>
<img v-else :src="item.faceImageUrl" alt="" />
<div class="cover"></div>
</el-col>
</el-row>
</div>
</el-col>
</el-row>
</div> </div>
</div> </div>
</template> </template>
...@@ -43,12 +49,16 @@ ...@@ -43,12 +49,16 @@
<script> <script>
import { getVrRecommend } from "@/api/vitual"; import { getVrRecommend } from "@/api/vitual";
export default { export default {
name: "Virtural",
data() { data() {
return { return {
list: [], list: [],
}; };
}, },
mounted() { mounted() {
this.$nextTick(() => {
this.$wow.init();
});
this.loadData(); this.loadData();
}, },
methods: { methods: {
...@@ -69,73 +79,82 @@ export default { ...@@ -69,73 +79,82 @@ export default {
.home-virtural { .home-virtural {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center;
.title { // background: url("@/assets/imgs/home/virtual-bg.png") 100% 50% 0% center no-repeat;
display: flex; background-image: url("@/assets/imgs/home/virtual-bg.png");
flex-direction: column; background-size: 100% 50%;
align-items: center; background-repeat: no-repeat;
padding: 60px 0 120px 0; background-position-y: 70%;
font-family: "Alibaba PuHuiTi"; .content-wrapper {
.ch { .title {
font-size: 30px; display: flex;
font-weight: bold; flex-direction: column;
color: #333333; align-items: center;
margin-bottom: 12px; padding: 60px 0 80px 0;
}
.en {
font-size: 14px;
color: #333333;
}
}
.bar {
height: 524px;
position: relative;
.bg {
height: 100%;
}
.intro {
position: absolute;
left: 13%;
top: 45px;
width: 323px;
font-family: "Alibaba PuHuiTi"; font-family: "Alibaba PuHuiTi";
color: #ffffff; .ch {
.name { font-size: 30px;
margin-bottom: 27px;
font-size: 20px;
font-weight: bold; font-weight: bold;
color: #333333;
margin-bottom: 12px;
} }
.deptName { .en {
font-size: 16px; font-size: 14px;
margin-bottom: 50px; color: #333333;
}
.intro-content {
width: 324px;
margin-bottom: 85px;
}
.entrance {
font-size: 16px;
cursor: pointer;
.entrance-text{
margin-right: 12px;
}
} }
} }
.virtual-items { .content {
position: absolute; .intro {
width: 965px; font-family: "Alibaba PuHuiTi";
top: -58px; color: #ffffff;
right: 13%; margin-top: 74px;
img { .name {
width: 316px; margin-bottom: 27px;
height: 238px; font-size: 20px;
font-weight: bold;
}
.deptName {
font-size: 16px;
margin-bottom: 50px;
}
.intro-content {
margin-bottom: 60px;
width: 258px;
overflow: hidden;
-webkit-line-clamp: 3;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
}
.entrance {
font-size: 16px;
cursor: pointer;
.entrance-text {
margin-right: 12px;
}
}
} }
.item { .virtual-items {
margin-bottom: 5px; .item {
cursor: pointer; margin-bottom: 5px;
cursor: pointer;
img {
width: 100%;
height: 25vh;
max-height: 225px;
}
}
} }
} }
} }
// .bar {
// height: 524px;
// // position: relative;
// .bg {
// height: 100%;
// }
// }
} }
</style> </style>
src/views/home/index-new.vue → src/views/home/index-manual.vue
浏览文件 @ 050a04dd
<template> <template>
<div id="wrap" :style="{ height: screenHeight + 'px' }"> <div id="wrap" :style="{ height: screenHeight + 'px' }">
<div id="main" :style="{ top: nowTop + 'px' }"> <div id="main" :style="{ top: nowTop + 'px' }">
<ul id="pageUl" type="circle"> <ul
<li id="pageUlLi1" class="pageUlLi" :class="{ active: curIndex == 1 }"> id="pageUl"
&nbsp; type="circle"
</li> v-for="(item, index) in buttons"
<li id="pageUlLi2" class="pageUlLi" :class="{ active: curIndex == 2 }"> :key="index"
&nbsp; >
</li> <li :id="item" :class="{ item, active: curIndex == index + 1 }">
<li id="pageUlLi3" class="pageUlLi" :class="{ active: curIndex == 3 }">
&nbsp;
</li>
<li id="pageUlLi4" class="pageUlLi" :class="{ active: curIndex == 4 }">
&nbsp;
</li>
<li id="pageUlLi5" class="pageUlLi" :class="{ active: curIndex == 5 }">
&nbsp; &nbsp;
</li> </li>
</ul> </ul>
<div style="background-color: #1b6d85" id="page1" class="page"> <div id="page1" class="page">
<NavBar class="navBar" /> <!-- <NavBar :class="[curIndex != 1 ? 'navBarFixed' : 'navBar']" /> -->
<el-carousel height="100vh" style="width: 100%"> <NavBar class='navBar'/>
<el-carousel-item v-for="(img, index) in boutiqueImgs" :key="index"> <Boutique class="home-item" ref="Boutique" />
<h3 </div>
class="small" <div id="page2" class="page">
style=" <Virtural class="home-item" ref="Virtural" />
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
{{ img }}
</h3>
</el-carousel-item>
</el-carousel>
</div> </div>
<div style="background-color: #869b94" id="page2" class="page"> <div id="page3" class="page">
<h1 <CulturalRelic class="home-item" ref="CulturalRelic" />
style="
height: 100%;
display: flex;
justify-self: center;
align-items: center;
"
>
虚拟展厅推荐
</h1>
</div> </div>
<div style="background-color: #f3ecef" id="page3" class="page"> <div id="page4" class="page">
展览推荐 <Display class="home-item" ref="Display" />
</div> </div>
<div style="background-color: #607271" id="page4" class="page"> <div id="page5" class="page">
文物推荐 <MuseumMap class="home-item" ref="MuseumMap" />
</div> </div>
<div style="background-color: #f3ecef" id="page5" class="page"> <!-- <div id="page6" class="page">
文博地图 <Footer />
</div> -->
<div class="down-arrow">
<img src="@/assets/imgs/home/down.png" alt="" />
</div> </div>
<Footer />
</div> </div>
</div> </div>
</template> </template>
...@@ -65,8 +41,21 @@ ...@@ -65,8 +41,21 @@
<script> <script>
import NavBar from "@/components/NavBar"; import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
export default { export default {
components: { NavBar, Footer }, components: {
NavBar,
Footer,
MuseumMap,
Boutique,
Virtural,
Display,
CulturalRelic,
},
name: "Home", name: "Home",
data() { data() {
return { return {
...@@ -80,7 +69,14 @@ export default { ...@@ -80,7 +69,14 @@ export default {
pageNum: 0, // 一共有多少页 pageNum: 0, // 一共有多少页
main: Object, main: Object,
obj: Object, obj: Object,
boutiqueImgs: ["精品展图片1", "精品展图片2"], buttons: [
"pageUlLi1",
"pageUlLi2",
"pageUlLi3",
"pageUlLi4",
"pageUlLi5",
],
navBarFixed: false,
}; };
}, },
mounted() { mounted() {
...@@ -113,7 +109,7 @@ export default { ...@@ -113,7 +109,7 @@ export default {
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动 // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || -event.wheelDelta; let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果 // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 1500) { if (this.startTime - this.endTime > 1000) {
if ( if (
delta > 0 && delta > 0 &&
parseInt(this.main.offsetTop) >= parseInt(this.main.offsetTop) >=
...@@ -191,7 +187,44 @@ div { ...@@ -191,7 +187,44 @@ div {
.navBar { .navBar {
position: absolute; position: absolute;
top: 0; top: 0;
// left: 0; background: rgba(0, 0, 0, 0.25); // left: 0;
transition: all 1s ease;
}
.navBarFixed {
position: fixed;
top: 0;
z-index: 999;
background: #2069c4;
transition: all 1s ease;
}
}
.home-item {
height: 100%;
}
.down-arrow {
position: fixed;
bottom: 20px;
left: 0;
right: 0;
display: flex;
justify-content: center;
animation: arrowBounce 2s infinite;
z-index: 999;
}
@keyframes arrowBounce {
0%,
20%,
50%,
80%,
100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
} }
} }
</style> </style>
\ No newline at end of file
src/views/home/index-swiper.vue 0 → 100644
浏览文件 @ 050a04dd
<template>
<div>
<swiper id="swiperBox" :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-slide">
<NavBar class="NavBar"/>
<Boutique class="home-item" ref="Boutique" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<Virtural class="home-item" ref="Virtural" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<CulturalRelic class="home-item" ref="CulturalRelic" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<Display class="home-item" ref="Display" />
</swiper-slide>
<swiper-slide class="swiper-slide">
<MuseumMap class="home-item" ref="MuseumMap" />
</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
<Footer/>
</div>
</template>
<script>
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
import Boutique from "./components/Boutique.vue";
import MuseumMap from "./components/MuseumMap.vue";
import Virtural from "./components/Virtural.vue";
import Display from "./components/Display.vue";
import CulturalRelic from "./components/CulturalRelic.vue";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
components: {
NavBar,
Footer,
swiper,
swiperSlide,
MuseumMap,
Boutique,
Virtural,
Display,
CulturalRelic,
},
name: "Home",
data() {
return {
list: [1, 2, 3, 4],
swiperOption: {
notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
direction: "vertical", //垂直方向移动
grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
mousewheelControl: true, //同上
height: window.innerHeight, // 高度设置，占满设备高度
resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
// 分页器
pagination: {
el: ".swiper-pagination",
bulletClass: "my-bullet", //自定义分页器样式
bulletActiveClass: "my-bullet-active", //自定义当前选中样式
clickable: true, //点击切换轮播
},
},
};
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
},
},
};
</script>
<style lang="scss" scoped>
.my-bullet {
display: block;
width: 11px;
height: 11px;
background: rgba(255, 255, 255, 0.5);
border-radius: 50%;
margin: 10px 0;
}
.my-bullet-active {
width: 11px;
height: 25px;
background: #fff;
border-radius: 20px;
margin: 10px 0;
}
.home-item {
height: 100vh;
width: 100%;
}
.navBar {
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.25); // left: 0;
transition: all 1s ease;
}
</style>
\ No newline at end of file
src/views/home/index.vue
浏览文件 @ 050a04dd
<template> <template>
<!-- <child1 slot="skeleton" /> --> <!-- <child1 slot="skeleton" /> -->
<div class="home"> <div class="home">
<!-- <Boutique class="home-item" ref="Boutique" v-if="boutiqueShow" /> <Boutique class="home-item wow animate__animated animate__fadeIn" ref="Boutique" />
<Virtural class="home-item" ref="Virtural" v-if="virtualShow" /> <Virtural class="home-item" ref="Virtural" />
<CulturalRelic class="home-item" ref="CulturalRelic" v-if="crShow" /> <CulturalRelic class="home-item" ref="CulturalRelic" />
<Display class="home-item" ref="Display" v-if="displayShow" /> <Display class="home-item" ref="Display" />
<MuseumMap class="home-item" ref="MuseumMap" v-if="mapShow" /> --> <MuseumMap class="home-item" ref="MuseumMap" />
<vue-lazy-component> <!-- <vue-lazy-component>
<Boutique class="home-item" ref="Boutique" /> <Boutique class="home-item wow" ref="Boutique" />
</vue-lazy-component> </vue-lazy-component>
<vue-lazy-component> <vue-lazy-component>
<Virtural class="home-item" ref="Virtural" /> <Virtural class="home-item" ref="Virtural" />
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
</vue-lazy-component> </vue-lazy-component>
<vue-lazy-component> <vue-lazy-component>
<MuseumMap class="home-item" ref="MuseumMap" /> <MuseumMap class="home-item" ref="MuseumMap" />
</vue-lazy-component> </vue-lazy-component> -->
</div> </div>
</template> </template>
...@@ -51,34 +51,35 @@ export default { ...@@ -51,34 +51,35 @@ export default {
crShow: true, crShow: true,
displayShow: true, displayShow: true,
mapShow: true, mapShow: true,
currentScroll:'' currentScroll: "",
}; };
}, },
mounted() { mounted() {
// window.addEventListener("scroll", this.handleScrollbox, true); // window.addEventListener("scroll", this.handleScrollbox, true);
this.$nextTick(() => {
this.$wow.init();
});
}, },
methods: { methods: {
// handleScrollbox() { // handleScrollbox() {
// this.currentScroll = window.pageYOffset; //表示当前滚动的位置 // this.currentScroll = window.pageYOffset; //表示当前滚动的位置
// if (this.currentScroll >= this.$refs.testref.offsetTop - 600) {
// if (this.currentScroll >= this.$refs.testref.offsetTop - 600) { // //当前滚动位置到达testref的时候，显示div（100作为调整用）
// //当前滚动位置到达testref的时候，显示div（100作为调整用） // this.testShow = true;
// this.testShow = true; // }
// } // if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) {
// if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) { // this.testShow2 = true;
// this.testShow2 = true; // }
// } // if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) {
// if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) { // this.testShow3 = true;
// this.testShow3 = true; // }
// } // if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) {
// this.testShow4 = true;
// if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) { // }
// this.testShow4 = true; // },
// } // },
// }, // beforeDestroy() {
// }, // window.removeEventListener("scroll", this.handleScrollbox, true);
// beforeDestroy() {
// window.removeEventListener("scroll", this.handleScrollbox, true);
}, },
}; };
</script> </script>
......
src/views/login/index.vue
浏览文件 @ 050a04dd
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<div class="empty-space"></div> <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>
<div class="close" @click="handleCloseLogin">×</div> <div class="close" @click="handleCloseLogin">×</div>
</div> </div>
<el-form <el-form
...@@ -64,11 +64,11 @@ ...@@ -64,11 +64,11 @@
</el-form> </el-form>
<div class="opration"> <div class="opration">
<div class="register"> <div class="register">
<router-link to="/register"> 注册 </router-link> <!-- <router-link to="/register"> 注册 </router-link> -->
<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 @click="handleLogin" size="small" :loading="loading" <el-button round @click="handleLogin" size="small" :loading="loading" class="loginBtn"
>登 陆</el-button >登 陆</el-button
> >
</div> </div>
...@@ -194,4 +194,10 @@ export default { ...@@ -194,4 +194,10 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.login-button,.el-button{
width: 100%;
background-color: #2069c4;
color: #fff;
font-size: 22px;
}
</style> </style>
src/views/virtual/index.vue
浏览文件 @ 050a04dd
...@@ -3,9 +3,9 @@ ...@@ -3,9 +3,9 @@
<!-- <NavBar /> --> <!-- <NavBar /> -->
<!-- <h1>虚拟展厅</h1> --> <!-- <h1>虚拟展厅</h1> -->
<!-- <Footer /> --> <!-- <Footer /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div> <div class="empty-space"></div>
<div class="main"> <div class="main">
<div class="content"> <div class="content-wrapper">
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="24" class="rclist"> <el-col :span="24" class="rclist">
<div class="search"> <div class="search">
......
vue.config.js
浏览文件 @ 050a04dd
...@@ -42,14 +42,14 @@ module.exports = defineConfig({ ...@@ -42,14 +42,14 @@ module.exports = defineConfig({
transpileDependencies: true, transpileDependencies: true,
lintOnSave: false, //关闭eslint检查 lintOnSave: false, //关闭eslint检查
devServer: { devServer: {
host: 'localhost', host: 'http://172.24.100.18',
port: '8080', port: '8080',
open: true, open: true,
hot: true, hot: true,
proxy: { proxy: {
'/api': { '/api': {
// target: 'http://172.24.100.189:8080', target: 'http://192.168.1.230:9562/api',
target: 'http://222.85.214.245:9062/api', // target: 'http://222.85.214.245:9062/api',
changeOrigin: true, changeOrigin: true,
pathRewrite: { pathRewrite: {
'^/api': '' '^/api': ''
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论