Skip to content

html / zhaocaih5-wanda

Go to a project
Commit c661902b by mamingqun
Options

cb

parent 6c76191d
Showing with 170 additions and 41 deletions
src/assets/mp3/music.mp3
No preview for this file type
src/store.js
...@@ -6,10 +6,13 @@ Vue.use(Vuex) ...@@ -6,10 +6,13 @@ Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
list: null, list: null,
yudushu: null yudushu: null,
erjiyeScroll: 0
}, },
mutations: { mutations: {
chageEjiyeScroll(state,playLoad) {
state.erjiyeScroll = playLoad
}
}, },
actions: { actions: {
getList({state}) { getList({state}) {
......
src/views/erjiye.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump"> <div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front"> <div class="book-page page-front">
<div class="erjiye"> <div class="erjiye">
<goBack class="animated pulse"/> <goBack class="animated pulse" />
<div class="content"> <div class="content">
<div class="title"> <div class="title">
<div class="search-button" @click="openSearch"></div> <div class="search-button" @click="openSearch"></div>
...@@ -53,6 +53,7 @@ ...@@ -53,6 +53,7 @@
<div class="close" @click="openSearch"></div> <div class="close" @click="openSearch"></div>
</div> </div>
</div> </div>
<div :class="['up-down', 'up-img' ]"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -67,18 +68,24 @@ export default { ...@@ -67,18 +68,24 @@ export default {
searchButton: false, searchButton: false,
keyWord: '', keyWord: '',
searchList: [], searchList: [],
filterList: [] filterList: [],
upAndDown: 'up-img'
} }
}, },
activated() { activated() {
this.searchButton = false this.searchButton = false
this.resetSearch() this.resetSearch()
$(".content-box").scrollTop(this.$store.state.erjiyeScroll)
}, },
mounted() { mounted() {
this.watchMaodian() this.watchMaodian()
setTimeout(() => { setTimeout(() => {
this.setSearchList(this.$store.state.list) this.setSearchList(this.$store.state.list)
}, 2000); }, 2000);
this.watchBottom();
}, },
methods: { methods: {
watchMaodian() { watchMaodian() {
...@@ -151,6 +158,29 @@ export default { ...@@ -151,6 +158,29 @@ export default {
console.log(error); console.log(error);
} }
}) })
},
watchBottom() {
var _this = this;
var nScrollHight = 0; //滚动距离总长(注意不是滚动条的长度)
var nScrollTop = 0; //滚动到的当前位置
var nDivHight = $(".content-box").height();
$(".content-box").scroll(function () {
nScrollHight = $(this)[0].scrollHeight;
nScrollTop = $(this)[0].scrollTop;
console.log(nScrollTop);
_this.$store.commit('chageEjiyeScroll',nScrollTop)
// if (nScrollTop === 0) {
// _this.upAndDown = 'up-img'
// }
// if (nScrollTop + nDivHight >= nScrollHight) {
// // alert("以到底")
// _this.upAndDown = 'down-img'
// }
});
} }
}, },
watch: { watch: {
...@@ -170,15 +200,47 @@ export default { ...@@ -170,15 +200,47 @@ export default {
} }
} }
}, },
components:{ components: {
goBack goBack
} },
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@r: 75rem; @r: 75rem;
.up-down {
// background: url('../assets/images/')
width: 80 / @r;
height: 80 / @r;
position: absolute;
left: 5%;
bottom: 5%;
// background: red;
}
.up-img {
background: url("../assets/images/02/up.png") no-repeat;
background-size: contain;
animation: left infinite alternate 0.5s linear;
}
.down-img {
background: url("../assets/images/02/down.png") no-repeat;
background-size: contain;
animation: left infinite alternate 0.5s linear;
}
@keyframes left {
0% {
transform: translateX(0);
}
100% {
transform: translateY(-5px);
}
}
.jieguo { .jieguo {
color: white; color: white;
font-size: 35 / @r; font-size: 35 / @r;
...@@ -186,7 +248,7 @@ export default { ...@@ -186,7 +248,7 @@ export default {
} }
.magin-box { .magin-box {
height: 50 / @r; height: 120 / @r;
} }
.none { .none {
...@@ -259,7 +321,8 @@ export default { ...@@ -259,7 +321,8 @@ export default {
.erjiye { .erjiye {
height: 100%; height: 100%;
background: url("../assets/images/erjiye/bg.png") no-repeat bottom center; // background: url("../assets/images/erjiye/bg.png") no-repeat bottom center;
background: url("../assets/images/01/bg01.jpg") no-repeat center bottom;
background-size: 100% auto; background-size: 100% auto;
.content { .content {
...@@ -331,11 +394,12 @@ export default { ...@@ -331,11 +394,12 @@ export default {
.san-title { .san-title {
background: url("../assets/images/erjiye/sanji.png") no-repeat center; background: url("../assets/images/erjiye/sanji.png") no-repeat center;
background-size: contain; background-size: contain;
// color: #004db6;
color: white; color: white;
margin-bottom: 20 / @r; margin-bottom: 20 / @r;
padding-left: 45 / @r; padding-left: 45 / @r;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow : ellipsis;
} }
} }
} }
......
src/views/xiangqing.vue
...@@ -36,6 +36,12 @@ ...@@ -36,6 +36,12 @@
<VueActivePreview class="yulan" v-if="yulanButton" :urlList="ulList"> <VueActivePreview class="yulan" v-if="yulanButton" :urlList="ulList">
<div class="close1" @click="closeYulan"></div> <div class="close1" @click="closeYulan"></div>
</VueActivePreview> </VueActivePreview>
<div class="queren" v-show="queren">
<div class="content">
<div class="top"></div>
<div class="bottom" @click="closeQueRen"></div>
</div>
</div>
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}"> <div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}">
<div class="book-page page-front"> <div class="book-page page-front">
<div class="xiangqing"> <div class="xiangqing">
...@@ -130,7 +136,8 @@ export default { ...@@ -130,7 +136,8 @@ export default {
mianTitle: null, mianTitle: null,
zIndex: 96, zIndex: 96,
ulList: [], ulList: [],
yulanButton: false yulanButton: false,
queren: false
} }
}, },
activated() { activated() {
...@@ -140,6 +147,8 @@ export default { ...@@ -140,6 +147,8 @@ export default {
this.getDetail(this.$route.params.id) this.getDetail(this.$route.params.id)
}, },
mounted() { mounted() {
var _this = this
this.watchDetail() this.watchDetail()
this.getDetail(this.$route.params.id) this.getDetail(this.$route.params.id)
...@@ -147,7 +156,8 @@ export default { ...@@ -147,7 +156,8 @@ export default {
var clipboard = new Clipboard('.btn'); var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) { clipboard.on('success', function (e) {
alert('复制成功') // alert('复制成功')
_this.queren = true
}); });
clipboard.on('error', function (e) { clipboard.on('error', function (e) {
...@@ -221,6 +231,9 @@ export default { ...@@ -221,6 +231,9 @@ export default {
$('body').css('overflow', 'auto') $('body').css('overflow', 'auto')
$eventbus.$emit('maodian', this.tancengIndex) $eventbus.$emit('maodian', this.tancengIndex)
}); });
},
closeQueRen() {
this.queren = false
} }
}, },
components: { components: {
...@@ -266,6 +279,43 @@ export default { ...@@ -266,6 +279,43 @@ export default {
<style lang="less"> <style lang="less">
@r: 75rem; @r: 75rem;
.queren {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000000000;
.content {
width: 400 / @r;
height: 500 / @r;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
.top {
width: 100%;
height: 200 / @r;
background: url("../assets/images/erjiye/success.png") no-repeat;
background-size: contain;
}
.bottom {
width: 100%;
height: 200 / @r;
background: url("../assets/images/erjiye/queding.png") no-repeat center center;
background-size: 70% auto;
}
}
}
p {
font-size: 14px;
}
.yulan { .yulan {
z-index: 100000 !important; z-index: 100000 !important;
} }
......
src/views/xu.vue
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<div class="content2"></div> <div class="content2"></div>
</div> </div>
</div> </div>
<!-- <div class="to-left"></div> --> <div class="to-left"></div>
<!-- <div class="bottom-ele"></div> --> <!-- <div class="bottom-ele"></div> -->
</div> </div>
</div> </div>
...@@ -32,38 +32,50 @@ export default { ...@@ -32,38 +32,50 @@ export default {
} }
}, },
mounted() { mounted() {
// $(function () {
// function judge() {
// var startx;//让startx在touch事件函数里是全局性变量。 this.judgeHuaDong()
// var endx;
// var el = document.getElementById('io');//触摸区域。
// function cons() { //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。
// if (startx > endx) { //判断左右移动程序
// alert("left");
// } else {
// alert("right");
// }
// }
// el.addEventListener('touchstart', function (e) {
// var touch = e.changedTouches;
// startx = touch[0].clientX;
// starty = touch[0].clientY;
// });
// el.addEventListener('touchend', function (e) {
// var touch = e.changedTouches;
// endx = touch[0].clientX;
// endy = touch[0].clientY;
// cons(); //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。
// });
// }
// judge();
// })
}, },
methods: { methods: {
handleJump() { handleJump() {
$eventbus.$emit('jumpPage', { pageName: 'yjml' }) $eventbus.$emit('jumpPage', { pageName: 'yjml' })
},
judgeHuaDong() {
var _this = this;
$(function () {
function judge() {
var startx;//让startx在touch事件函数里是全局性变量。
var endx;
var starty;
var endy;
var el = document.getElementById('io');//触摸区域。
function cons() { //独立封装这个事件可以保证执行顺序，从而能够访问得到应该访问的数据。
if (startx > endx) { //判断左右移动程序
// alert("left");
_this.handleJump()
} else {
// alert("right");
}
}
el.addEventListener('touchstart', function (e) {
var touch = e.changedTouches;
startx = touch[0].clientX;
starty = touch[0].clientY;
});
el.addEventListener('touchend', function (e) {
var touch = e.changedTouches;
endx = touch[0].clientX;
endy = touch[0].clientY;
cons(); //startx endx 的数据收集应该放在touchend事件后执行，而不是放在touchstart事件里执行，这样才能访问到touchstart和touchend这2个事件产生的startx和endx数据。另外startx和endx在_touch事件函数里是全局性的，所以在此函数中都可以访问得到，所以只需要注意事件执行的先后顺序即可。
});
}
judge();
})
} }
}, },
components: { components: {
...@@ -140,7 +152,7 @@ export default { ...@@ -140,7 +152,7 @@ export default {
.xu { .xu {
height: 100%; height: 100%;
background: url("../assets/images/02/bg01.png") no-repeat bottom center; background: url("../assets/images/02/bg01.jpg") no-repeat bottom center;
// background: url("../assets/images/01/bg01.jpg") no-repeat bottom center; // background: url("../assets/images/01/bg01.jpg") no-repeat bottom center;
background-size: 100% auto; background-size: 100% auto;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment