提交 ee7097ff authored 作者: Anix's avatar Anix

Merge branch 'master' of https://gitee.com/gzcnki/exhibition_page

......@@ -29,6 +29,10 @@
htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
<script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %> -->
<script type="text/javascript" src="./static/js/wow.js"></script>
<script type="text/javascript">
new WOW().init()
</script>
</body>
</html>
\ No newline at end of file
差异被折叠。
......@@ -21,15 +21,6 @@ export default {
headerFixed: false,
};
},
mounted() {
this.$nextTick(() => {
let wow = this.$wow;
wow.init();
});
},
};
</script>
<style lang="scss">
......
......@@ -10,14 +10,6 @@
controls="controls"
></audio>
<!-- 音频播放控件 -->
<!-- <div>-->
<!-- <el-button type="text" @click="startPlayOrPause">{{audio.playing | transPlayPause}}</el-button>-->
<!-- <el-tag type="info">{{ audio.currentTime | formatSecond}}</el-tag>-->
<!-- <el-tag type="info">{{ audio.maxTime | formatSecond}}</el-tag>-->
<!-- </div>-->
</template>
<script>
......@@ -81,8 +73,6 @@ export default {
},
// 当timeupdate事件大概每秒一次,用来更新音频流的当前播放时间
onTimeupdate(res) {
// console.log("timeupdate");
// console.log(res);
this.audio.currentTime = res.target.currentTime;
},
// 当加载语音流元数据完成后,会触发该事件的回调函数
......@@ -93,16 +83,7 @@ export default {
this.audio.maxTime = parseInt(res.target.duration);
},
},
filters: {
// 使用组件过滤器来动态改变按钮的显示
transPlayPause(value) {
return value ? "暂停" : "播放";
},
// 将整数转化成时分秒
formatSecond(second = 0) {
return realFormatSecond(second);
},
},
};
</script>
......
......@@ -11,11 +11,15 @@
<div class="tabs wow animate__animated animate__fadeInUp">
<div
class="tab-item"
:class="{
activeHome: currentTab.name == item.name && isHome,
active: currentTab.name == item.name && !isHome,
}"
v-for="(item, index) in pages"
:key="index"
@click="handleClickTab(item)"
>
<div :class="{ active: currentTab.name == item.name }"></div>
<!-- <div ></div> -->
<router-link :to="item.path">{{ item.name }} </router-link>
</div>
</div>
......@@ -223,6 +227,7 @@ export default {
background-color: #2069c4 !important;
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
top: 0;
}
.nav {
......@@ -268,35 +273,56 @@ export default {
// padding: 15px 50px;
height: 100%;
text-align: center;
a{
a {
font-size: 18px;
white-space: nowrap;
}
&::before {
transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
content: "";
display: inline-block;
width: 0;
height: 4px;
background: #1d549d;
position: absolute;
bottom: 24px;
left: 0;
transition: all 0.5s ease;
}
&:hover:before {
background: #1d549d;
width: 100%;
&:hover {
a {
color: #182f68;
}
.active {
width: 100%;
height: 4px;
background: #1d549d;
position: absolute;
bottom: 24px;
left: 0;
}
.router-link-exact-active {
color: #182f68;
}
// .activeHome {
// a {
// color: #2069c4 !important;
// }
// }
// .active {
// a {
// color: #000 !important;
// }
// }
// &::before {
// transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
// content: "";
// display: inline-block;
// width: 0;
// height: 4px;
// background: #1d549d;
// position: absolute;
// bottom: 24px;
// left: 0;
// }
// &:hover:before {
// background: #1d549d;
// width: 38px;
// }
// .active {
// width: 38px;
// height: 4px;
// background: #1d549d;
// position: absolute;
// bottom: 24px;
// left: 0;
// }
}
}
}
......
......@@ -13,7 +13,7 @@ import animated from 'animate.css';
// 滚动动画 wow.js
import {
WOW
} from 'wowjs'
} from '../public/static/js/wow'
import {
getFullUrl
} from '@/utils/index'
......@@ -25,19 +25,19 @@ Vue.use(ElementUI);
// 全局注册动画效果
Vue.use(animated);
Vue.prototype.$wow = new WOW({
boxClass: 'wow', // default
animateClass: 'animated', // default
offset: 0, // default
mobile: true, // default
live: true,
scrollContainer: null,
resetAnimation: true,
// 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() + ">")
}
})
// Vue.prototype.$wow = new WOW({
// boxClass: 'wow', // default
// animateClass: 'animated', // default
// offset: 0, // default
// mobile: true, // default
// live: true,
// scrollContainer: null,
// resetAnimation: true,
// // 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() + ">")
// }
// })
Vue.prototype.$getFullUrl = getFullUrl
new Vue({
......
......@@ -2,6 +2,15 @@ import router from './router'
import store from './store/index'
router.beforeEach((to, from, next) => {
// if (to.name != 'home') {
// // chrome
// document.body.scrollTop = 0
// // firefox
// document.documentElement.scrollTop = 0
// // safari
// window.pageYOffset = 0
// }
// 监听path 确定navbar下标
store.commit('app/SET_NAV_BAR', to)
next()
......
......@@ -25,17 +25,17 @@ export function debounce(func, wait, immediate = true) {
// 获取完整的url,根据环境进行配置
export function getFullUrl(url) {
if (url) {
let fullUrl = ''
if (url && url.indexOf('http') != -1 && url.indexOf('files') != -1) {
let urlArr = url.split('files')
fullUrl = '/files' + urlArr[1]
return fullUrl
} else {
return ''
fullUrl = url
}
return fullUrl
}
/**
* 预览文件
* @param href 预览地址
......
......@@ -370,7 +370,7 @@ $text-indent: 16px;
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
z-index: 9;
// background-color: rgba(0, 0, 0, 0.1);
height: 28px;
padding: 4px;
......
......@@ -114,7 +114,8 @@
</el-row>
</div>
<div
class="audio wow animate__animated animate__fadeRight"
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
......@@ -165,7 +166,7 @@
</div>
</div>
</div>
<div class="content-item lts wow animate__animated animate__fadeInUp">
<div class="content-item">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
......@@ -451,6 +452,7 @@ export default {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
......
......@@ -138,7 +138,6 @@ export default {
children: "children",
checkStrictly: true, //单选选择任意一级选项
},
culturalRelicYears: [],
onlyShow3d: false,
keyword: "",
type: "",
......@@ -151,10 +150,6 @@ export default {
},
async created() {
await this.$store.dispatch("dict/getDictList", ["display_type"]);
let res = await this.$store.dispatch("dict/getDictTree", [
"culturalRelicYears",
]);
this.culturalRelicYears = res.culturalRelicYears;
},
mounted() {
this.loadData();
......@@ -353,48 +348,6 @@ $text-indent: 16px;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
......
......@@ -2,7 +2,7 @@
<template>
<div class="home-display">
<div class="title wow animate__animated animate__fadeInUp">展览</div>
<div class="wrapper">
<div class="wrapper wow animate__animated animate__fadeInUp">
<!-- <div
class="sliders"
:style="{
......@@ -26,7 +26,7 @@
<div class="content-intro">
{{ item.intro ? item.intro : "" }}
</div>
<EntranceIcon color="#fff" />
<EntranceIcon color="#fff" @click.native="handleClick(item)"/>
</div>
<div class="img" @click="handleClick(item)">
<img
......
......@@ -18,7 +18,7 @@
<span class="entrance-text">点击进入</span>
<img src="@/assets/imgs/home/entrance-black.png" alt="" />
</div> -->
<EntranceIcon color="#000" />
<EntranceIcon color="#000" @click.native="handleClick(curMuseum)"/>
</div>
<div class="map wow animate__animated animate__fadeInRight">
......
......@@ -10,9 +10,9 @@
<div class="en">Virtual Exhibition Hall</div>
</div>
<el-row class="content" :gutter="60">
<el-col :span="6">
<el-col :span="6" class=" wow animate__animated animate__fadeInLeft">
<div
class="intro wow animate__animated animate__fadeInLeft"
class="intro"
v-if="list.length > 0"
>
<div class="name">{{ list[0].name }}</div>
......@@ -20,11 +20,7 @@
<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> -->
<EntranceIcon color="#fff" />
<EntranceIcon color="#fff" @click.native="handleClick(list[0])"/>
</div>
</el-col>
<el-col :span="18">
......
......@@ -328,48 +328,6 @@ $text-indent: 16px;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
......
......@@ -80,47 +80,5 @@ $blue: #2069c4;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
</style>
\ No newline at end of file
......@@ -330,48 +330,6 @@ $text-indent: 16px;
transition: all 0.5s ease;
flex: 1;
}
.showIcon {
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
background-color: rgba(0, 0, 0, 0.1);
border-radius: 4px;
height: 28px;
padding: 4px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
width: 28px;
white-space: nowrap;
overflow: hidden;
&:hover {
.icon {
display: none;
}
.text {
display: block;
}
width: 130px;
padding: 4px 8px;
}
.icon {
width: 20px;
display: inline-block;
}
.text {
font-size: 14px;
color: #000;
padding: 4px 8px;
cursor: pointer;
display: none;
}
img {
width: 100%;
height: 100%;
}
}
}
}
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论