Skip to content

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

首页添加动画

上级 7cdf0a76
隐藏空白字符变更
内嵌 并排
正在显示 包含 691 行增加 和 292 行删除
package-lock.json
浏览文件 @ 050a04dd
......@@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"@xunlei/vue-lazy-component": "^1.1.3",
"animate.css": "^4.1.1",
"animejs": "^3.2.1",
"axios": "^0.27.2",
"core-js": "^3.8.3",
......@@ -22,6 +23,7 @@
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
"vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
......@@ -42,7 +44,8 @@
"sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11",
"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": {
......@@ -3227,6 +3230,11 @@
"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": {
"version": "3.2.1",
"resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz",
......@@ -5288,6 +5296,19 @@
"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": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
......@@ -12585,6 +12606,11 @@
"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": {
"version": "8.0.1",
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
......@@ -13208,6 +13234,19 @@
"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": {
"version": "6.8.0",
"resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",
......@@ -13931,6 +13970,19 @@
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
"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": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
......@@ -14650,6 +14702,15 @@
"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": {
"version": "7.0.0",
"resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
......@@ -17275,6 +17336,11 @@
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"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": {
"version": "3.2.1",
"resolved": "https://registry.npmmirror.com/animejs/-/animejs-3.2.1.tgz",
......@@ -18910,6 +18976,21 @@
"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": {
"version": "2.3.0",
"resolved": "https://registry.npmmirror.com/domelementtype/-/domelementtype-2.3.0.tgz",
......@@ -24672,6 +24753,11 @@
"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": {
"version": "8.0.1",
"resolved": "https://registry.npmmirror.com/ssri/-/ssri-8.0.1.tgz",
......@@ -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": {
"version": "6.8.0",
"resolved": "https://registry.npmmirror.com/table/-/table-6.8.0.tgz",
......@@ -25765,6 +25860,15 @@
"resolved": "https://registry.npmmirror.com/vue/-/vue-2.6.14.tgz",
"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": {
"version": "8.3.0",
"resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz",
......@@ -26343,6 +26447,15 @@
"integrity": "sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==",
"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": {
"version": "7.0.0",
"resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
package.json
浏览文件 @ 050a04dd
......@@ -10,6 +10,7 @@
},
"dependencies": {
"@xunlei/vue-lazy-component": "^1.1.3",
"animate.css": "^4.1.1",
"animejs": "^3.2.1",
"axios": "^0.27.2",
"core-js": "^3.8.3",
......@@ -23,6 +24,7 @@
"sass-loader": "^13.0.2",
"svgo": "^2.8.0",
"vue": "^2.6.14",
"vue-awesome-swiper": "^3.1.3",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
},
......@@ -43,7 +45,8 @@
"sass": "^1.32.7",
"svg-sprite-loader": "^6.0.11",
"terser-webpack-plugin": "^5.3.3",
"vue-template-compiler": "^2.6.14"
"vue-template-compiler": "^2.6.14",
"wowjs": "^1.1.3"
},
"eslintConfig": {
"root": true,
......
src/App.vue
浏览文件 @ 050a04dd
<template>
<div id="app">
<NavBar />
<!-- 开发阶段暂停使用keepAlive -->
<!-- <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>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
<router-view v-if="!$route.meta.keepAlive"></router-view> -->
<Footer />
</div>
</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('./animations.scss');
/**适应移动端 */
@media screen and (max-width: 500px) {
......@@ -58,4 +59,14 @@ li {
.view-text {
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 {
align-items: center;
background-color: #2069C4;
color: #fff;
// position: fixed;
// bottom: 0;
// left: 0;
// right: 0;
span{
margin-right: 16px;
}
......
src/components/NavBar/index.vue
浏览文件 @ 050a04dd
<template>
<div class="nav">
<div class="container">
<div class="logo-container">
<div class="logo-container wow animate__animated animate__fadeInLeft">
<img src="@/assets/imgs/home/logo.png" />
</div>
<div class="right">
<div class="right wow animate__animated animate__fadeInUp">
<div class="tabs">
<div
class="tab-item"
......@@ -19,7 +19,7 @@
></svg-icon>
</div>
</div>
<div class="tools">
<div class="tools wow animate__animated animate__fadeInRight">
<div class="wrapper">
<el-dropdown trigger="click">
<el-button round>
......
src/main.js
浏览文件 @ 050a04dd
......@@ -5,13 +5,15 @@ import store from './store/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import "@/assets/styles/index.scss";//全局样式
import "@/assets/styles/index.scss"; //全局样式
// import * as echarts from 'echarts'
import './icons'
import dict from '@/components/Dict'
import VueLazyComponent from '@xunlei/vue-lazy-component'
import '@/rem'
import animated from 'animate.css';
// import '@/rem'
// 全局混入
// import { common } from '@/mixins'
......@@ -27,11 +29,29 @@ Vue.use(dict);
// 全局注册组件懒加载方案
Vue.use(VueLazyComponent)
// 全局注册动画效果
Vue.use(animated);
// // 全局混入浏览器缩放适配组件
// 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({
......
src/router/index.js
浏览文件 @ 050a04dd
......@@ -47,7 +47,7 @@ const routes = [
name: 'displayDetail',
component: () => import('@/views/display/Detail.vue'),
meta:{
keepAlive:true
keepAlive:false
}
},
// 文物展
......@@ -65,7 +65,7 @@ const routes = [
name: 'culturalRelicDetail',
component: () => import('@/views/culturalRelic/Detail.vue'),
meta:{
keepAlive:true
keepAlive:false
}
},
// 个人中心
......@@ -111,7 +111,7 @@ const routes = [
name: 'museum',
component: () => import('@/views/museum/Detail.vue'),
meta:{
keepAlive:true
keepAlive:false
}
},
]
......
src/views/home/components/Boutique.vue
浏览文件 @ 050a04dd
<template>
<el-carousel class="slider">
<el-carousel class="slider" autoplay arrow="nerver">
<el-carousel-item>
<div>
<img src="@/assets/imgs/boutique/1.jpg" width="100%" />
......
src/views/home/components/CulturalRelic.vue
浏览文件 @ 050a04dd
<!-- -->
<template>
<div class="home-cr">
<div class="title">
<div class="title wow animate__animated animate__fadeInUp">
<div class="ch">每日推送</div>
<div class="en">Daily Exhibition Push</div>
</div>
<div class="text">文物</div>
<div class="list">
<div class="text wow animate__animated animate__fadeInUp">文物</div>
<div class="list wow animate__animated animate__zoomIn">
<!-- 1231
<el-carousel>
<el-carousel-item v-for="(item,index) in length" :key="index">
......@@ -16,8 +16,13 @@
<el-carousel indicator-position="outside" :autoplay="false" arrow="never">
<el-carousel-item v-for="(item, index) in list" :key="index">
<el-row :gutter="14">
<el-col :span="6" v-for="i in item" :key="i.crId" class="container">
<img :src="i.faceImageUrl" alt="" width="100%" />
<el-col :span="6" v-for="i in item" :key="i.crId" class="container" >
<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="name">{{ i.name }}</div>
<div class="sourceWay">{{ i.sourceWay }}</div>
......@@ -45,6 +50,7 @@
<script>
import { getRecommendCr } from "@/api/culturalRelic";
export default {
name:'CulturalRelic',
data() {
return {
list: [],
......@@ -122,13 +128,13 @@ export default {
}
.list {
width: 100%;
padding: 0 14% 0 14%;
padding: 0 13%;
height: 492px;
}
.container {
// width: 339px;
height: 226px;
height: 20%;
margin-bottom: 40px;
cursor: pointer;
position: relative;
......
src/views/home/components/Display.vue
浏览文件 @ 050a04dd
<!-- -->
<template>
<div class="home-display">
<div class="title">展览</div>
<transition name="el-fade-in-linear">
<div class="wrapper" v-show="currentItem">
<div class="content">
<div class="content-name">{{ currentItem.title }}</div>
<div class="content-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 class="title wow animate__animated animate__fadeInUp">展览</div>
<div class="wrapper" v-show="currentItem">
<div class="content wow animate__animated animate__fadeInLeft">
<div class="content-name">{{ currentItem.title }}</div>
<div class="content-intro">
{{ currentItem.intro ? currentItem.intro : "" }}
</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-item v-for="item in list" :key="item.exhibitionId">
<div class="wrapper">
......@@ -62,6 +65,7 @@
<script>
import { getRecommendDisplay } from "@/api/display";
export default {
name: "Display",
data() {
return {
list: [],
......@@ -109,7 +113,7 @@ export default {
position: relative;
flex: 1;
.content {
width: 800px;
width: 600px;
.content-name {
font-size: 20px;
font-family: Microsoft YaHei;
......@@ -132,7 +136,7 @@ export default {
top: 20%;
// transform: translateY(-50%);
right: 0;
width: 550px;
width: 380px;
height: 480px;
img {
width: 100%;
......
src/views/home/components/MuseumMap.vue
浏览文件 @ 050a04dd
<template>
<div class="home-museum-map">
<div class="title">
<div class="title wow animate__animated animate__fadeInUp">
<div class="ch">文博地图</div>
<div class="en">Museum Map</div>
</div>
<div class="wrapper">
<div class="content">
<div class="content wow animate__animated animate__fadeIn">
<div class="name">{{ curMuseum.name }}</div>
<div class="intro">
{{ curMuseum.intro }}
......@@ -19,7 +19,7 @@
<img src="@/assets/imgs/home/entrance-black.png" alt="" />
</div>
</div>
<div class="map" id="map"></div>
<div class="map wow animate__animated animate__fadeInRight" id="map" ></div>
</div>
</div>
</template>
......@@ -44,6 +44,7 @@ export default {
this.$nextTick(() => {
this.init();
});
// this.initAnimate();
},
methods: {
......@@ -56,6 +57,7 @@ export default {
// 获取博物馆列表，并构造经纬度
let res = await getMuseumListPage(params);
this.museumList = res.data.records;
this.curMuseum = this.museumList[0]
let seriesList = [{ data: [] }];
this.museumList.forEach((item) => {
// debugger;
......@@ -112,7 +114,7 @@ export default {
faceImageUrl = `<div>
<div style="text-align:center;line-height:26px;color:#000;font-weight:bold">${item.name}
<div/>
<img width="400px" src="${item.faceImageUrl}" />
<img width="400px" src="${item.faceImagePressUrl}" />
</div>`;
that.curMuseum = item;
return;
......@@ -135,7 +137,7 @@ export default {
series, // 打的那些点数据
geo: {
map: name || "china", // 引入地图 省份或者 国家
layoutCenter: ["50%", "50%"], //设置后left/right/top/bottom等属性无效
layoutCenter: ["66%", "50%"], //设置后left/right/top/bottom等属性无效
layoutSize: "45%",
roam: false, //关闭鼠标缩放和漫
zoom: 2,
......@@ -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: {
normal: {
show: true,
//静态的时候展示样式
show: true, //是否显示地图省份得名称
textStyle: {
color: "#fff",
fontSize: 10,
fontFamily: "Arial",
},
},
emphasis: {
textStyle: {
color: "#fff",
},
// 高亮状态下的样式
//动态展示的样式
color: "#fff",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
itemStyle: {
// 地图区域的多边形 图形样式。
normal: {
areaColor: "#013C62",
shadowColor: "#182f68",
borderColor: "#fff", // 边框颜色
areaColor: "#2759af", // 区域颜色
shadowColor: "#182f68",
shadowOffsetX: 0,
shadowOffsetY: 25,
borderColor: "#2ab8ff",
borderWidth: 1.5,
areaColor: "#12235c",
textStyle: {
// 文字颜色
color: "#fff",
},
// shadowBlur: 10, // 图形阴影的模糊大小
// shadowOffsetX: 10, // 阴影水平方向上的偏移距离。
},
emphasis: {
areaColor: "#2069c4",
borderWidth: 0,
color: "green",
areaColor: "#7b39e2",
color: "#fff",
},
},
// 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 {
}
}
.wrapper {
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
......@@ -303,6 +309,7 @@ export default {
font-size: 20px;
font-weight: 400;
margin-bottom: 48px;
font-weight: bold;
}
.intro {
font-size: 14px;
......
src/views/home/components/Virtural.vue
浏览文件 @ 050a04dd
<!-- -->
<template>
<div class="home-virtural">
<div class="title">
<div class="ch">虚拟展厅</div>
<div class="en">Virtual Exhibition Hall</div>
</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 class="content-wrapper">
<div class="title wow animate__animated animate__fadeInUp" data-wow-offset="200" >
<div class="ch">虚拟展厅</div>
<div class="en">Virtual Exhibition Hall</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>
</template>
......@@ -43,12 +49,16 @@
<script>
import { getVrRecommend } from "@/api/vitual";
export default {
name: "Virtural",
data() {
return {
list: [],
};
},
mounted() {
this.$nextTick(() => {
this.$wow.init();
});
this.loadData();
},
methods: {
......@@ -69,73 +79,82 @@ export default {
.home-virtural {
display: flex;
flex-direction: column;
.title {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0 120px 0;
font-family: "Alibaba PuHuiTi";
.ch {
font-size: 30px;
font-weight: bold;
color: #333333;
margin-bottom: 12px;
}
.en {
font-size: 14px;
color: #333333;
}
}
.bar {
height: 524px;
position: relative;
.bg {
height: 100%;
}
.intro {
position: absolute;
left: 13%;
top: 45px;
width: 323px;
align-items: center;
// background: url("@/assets/imgs/home/virtual-bg.png") 100% 50% 0% center no-repeat;
background-image: url("@/assets/imgs/home/virtual-bg.png");
background-size: 100% 50%;
background-repeat: no-repeat;
background-position-y: 70%;
.content-wrapper {
.title {
display: flex;
flex-direction: column;
align-items: center;
padding: 60px 0 80px 0;
font-family: "Alibaba PuHuiTi";
color: #ffffff;
.name {
margin-bottom: 27px;
font-size: 20px;
.ch {
font-size: 30px;
font-weight: bold;
color: #333333;
margin-bottom: 12px;
}
.deptName {
font-size: 16px;
margin-bottom: 50px;
}
.intro-content {
width: 324px;
margin-bottom: 85px;
}
.entrance {
font-size: 16px;
cursor: pointer;
.entrance-text{
margin-right: 12px;
}
.en {
font-size: 14px;
color: #333333;
}
}
.virtual-items {
position: absolute;
width: 965px;
top: -58px;
right: 13%;
img {
width: 316px;
height: 238px;
.content {
.intro {
font-family: "Alibaba PuHuiTi";
color: #ffffff;
margin-top: 74px;
.name {
margin-bottom: 27px;
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 {
margin-bottom: 5px;
cursor: pointer;
.virtual-items {
.item {
margin-bottom: 5px;
cursor: pointer;
img {
width: 100%;
height: 25vh;
max-height: 225px;
}
}
}
}
}
// .bar {
// height: 524px;
// // position: relative;
// .bg {
// height: 100%;
// }
// }
}
</style>
src/views/home/index-new.vue → src/views/home/index-manual.vue
浏览文件 @ 050a04dd
<template>
<div id="wrap" :style="{ height: screenHeight + 'px' }">
<div id="main" :style="{ top: nowTop + 'px' }">
<ul id="pageUl" type="circle">
<li id="pageUlLi1" class="pageUlLi" :class="{ active: curIndex == 1 }">
&nbsp;
</li>
<li id="pageUlLi2" class="pageUlLi" :class="{ active: curIndex == 2 }">
&nbsp;
</li>
<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 }">
<ul
id="pageUl"
type="circle"
v-for="(item, index) in buttons"
:key="index"
>
<li :id="item" :class="{ item, active: curIndex == index + 1 }">
&nbsp;
</li>
</ul>
<div style="background-color: #1b6d85" id="page1" class="page">
<NavBar class="navBar" />
<el-carousel height="100vh" style="width: 100%">
<el-carousel-item v-for="(img, index) in boutiqueImgs" :key="index">
<h3
class="small"
style="
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
{{ img }}
</h3>
</el-carousel-item>
</el-carousel>
<div id="page1" class="page">
<!-- <NavBar :class="[curIndex != 1 ? 'navBarFixed' : 'navBar']" /> -->
<NavBar class='navBar'/>
<Boutique class="home-item" ref="Boutique" />
</div>
<div id="page2" class="page">
<Virtural class="home-item" ref="Virtural" />
</div>
<div style="background-color: #869b94" id="page2" class="page">
<h1
style="
height: 100%;
display: flex;
justify-self: center;
align-items: center;
"
>
虚拟展厅推荐
</h1>
<div id="page3" class="page">
<CulturalRelic class="home-item" ref="CulturalRelic" />
</div>
<div style="background-color: #f3ecef" id="page3" class="page">
展览推荐
<div id="page4" class="page">
<Display class="home-item" ref="Display" />
</div>
<div style="background-color: #607271" id="page4" class="page">
文物推荐
<div id="page5" class="page">
<MuseumMap class="home-item" ref="MuseumMap" />
</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>
<Footer />
</div>
</div>
</template>
......@@ -65,8 +41,21 @@
<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";
export default {
components: { NavBar, Footer },
components: {
NavBar,
Footer,
MuseumMap,
Boutique,
Virtural,
Display,
CulturalRelic,
},
name: "Home",
data() {
return {
......@@ -80,7 +69,14 @@ export default {
pageNum: 0, // 一共有多少页
main: Object,
obj: Object,
boutiqueImgs: ["精品展图片1", "精品展图片2"],
buttons: [
"pageUlLi1",
"pageUlLi2",
"pageUlLi3",
"pageUlLi4",
"pageUlLi5",
],
navBarFixed: false,
};
},
mounted() {
......@@ -113,7 +109,7 @@ export default {
// DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
let delta = event.detail || -event.wheelDelta;
// 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
if (this.startTime - this.endTime > 1500) {
if (this.startTime - this.endTime > 1000) {
if (
delta > 0 &&
parseInt(this.main.offsetTop) >=
......@@ -191,7 +187,44 @@ div {
.navBar {
position: absolute;
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>
\ 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>
<!-- <child1 slot="skeleton" /> -->
<div class="home">
<!-- <Boutique class="home-item" ref="Boutique" v-if="boutiqueShow" />
<Virtural class="home-item" ref="Virtural" v-if="virtualShow" />
<CulturalRelic class="home-item" ref="CulturalRelic" v-if="crShow" />
<Display class="home-item" ref="Display" v-if="displayShow" />
<MuseumMap class="home-item" ref="MuseumMap" v-if="mapShow" /> -->
<Boutique class="home-item wow animate__animated animate__fadeIn" ref="Boutique" />
<Virtural class="home-item" ref="Virtural" />
<CulturalRelic class="home-item" ref="CulturalRelic" />
<Display class="home-item" ref="Display" />
<MuseumMap class="home-item" ref="MuseumMap" />
<vue-lazy-component>
<Boutique class="home-item" ref="Boutique" />
<!-- <vue-lazy-component>
<Boutique class="home-item wow" ref="Boutique" />
</vue-lazy-component>
<vue-lazy-component>
<Virtural class="home-item" ref="Virtural" />
......@@ -21,7 +21,7 @@
</vue-lazy-component>
<vue-lazy-component>
<MuseumMap class="home-item" ref="MuseumMap" />
</vue-lazy-component>
</vue-lazy-component> -->
</div>
</template>
......@@ -51,34 +51,35 @@ export default {
crShow: true,
displayShow: true,
mapShow: true,
currentScroll:''
currentScroll: "",
};
},
mounted() {
// window.addEventListener("scroll", this.handleScrollbox, true);
this.$nextTick(() => {
this.$wow.init();
});
},
methods: {
// handleScrollbox() {
// this.currentScroll = window.pageYOffset; //表示当前滚动的位置
// if (this.currentScroll >= this.$refs.testref.offsetTop - 600) {
// //当前滚动位置到达testref的时候，显示div（100作为调整用）
// this.testShow = true;
// }
// if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) {
// this.testShow2 = true;
// }
// if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) {
// this.testShow3 = true;
// }
// if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) {
// this.testShow4 = true;
// }
// },
// },
// beforeDestroy() {
// window.removeEventListener("scroll", this.handleScrollbox, true);
// handleScrollbox() {
// this.currentScroll = window.pageYOffset; //表示当前滚动的位置
// if (this.currentScroll >= this.$refs.testref.offsetTop - 600) {
// //当前滚动位置到达testref的时候，显示div（100作为调整用）
// this.testShow = true;
// }
// if (this.currentScroll >= this.$refs.test2ref.offsetTop - 440) {
// this.testShow2 = true;
// }
// if (this.currentScroll >= this.$refs.test3ref.offsetTop - 440) {
// this.testShow3 = true;
// }
// if (this.currentScroll >= this.$refs.test4ref.offsetTop - 440) {
// this.testShow4 = true;
// }
// },
// },
// beforeDestroy() {
// window.removeEventListener("scroll", this.handleScrollbox, true);
},
};
</script>
......
src/views/login/index.vue
浏览文件 @ 050a04dd
......@@ -4,7 +4,7 @@
<div class="empty-space"></div>
<div class="login">
<div class="title">
<div class="text">登录</div>
<div class="text">登 陆</div>
<div class="close" @click="handleCloseLogin">×</div>
</div>
<el-form
......@@ -64,11 +64,11 @@
</el-form>
<div class="opration">
<div class="register">
<router-link to="/register"> 注册 </router-link>
<span style="margin: 0 10px"> | </span>
<router-link to="/register"> 忘记密码 </router-link>
<!-- <router-link to="/register"> 注册 </router-link> -->
<!-- <span style="margin: 0 10px"> | </span> -->
<!-- <router-link to="/register"> 忘记密码 </router-link> -->
</div>
<el-button @click="handleLogin" size="small" :loading="loading"
<el-button round @click="handleLogin" size="small" :loading="loading" class="loginBtn"
>登 陆</el-button
>
</div>
......@@ -194,4 +194,10 @@ export default {
display: flex;
justify-content: center;
}
.login-button,.el-button{
width: 100%;
background-color: #2069c4;
color: #fff;
font-size: 22px;
}
</style>
src/views/virtual/index.vue
浏览文件 @ 050a04dd
......@@ -3,9 +3,9 @@
<!-- <NavBar /> -->
<!-- <h1>虚拟展厅</h1> -->
<!-- <Footer /> -->
<div style="height: 100px; background-color: #2069c4; width: 100%"></div>
<div class="empty-space"></div>
<div class="main">
<div class="content">
<div class="content-wrapper">
<el-row :gutter="20">
<el-col :span="24" class="rclist">
<div class="search">
......
vue.config.js
浏览文件 @ 050a04dd
......@@ -42,14 +42,14 @@ module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false, //关闭eslint检查
devServer: {
host: 'localhost',
host: 'http://172.24.100.18',
port: '8080',
open: true,
hot: true,
proxy: {
'/api': {
// target: 'http://172.24.100.189:8080',
target: 'http://222.85.214.245:9062/api',
target: 'http://192.168.1.230:9562/api',
// target: 'http://222.85.214.245:9062/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论