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)
export default new Vuex.Store({
state: {
list: null,
yudushu: null
yudushu: null,
erjiyeScroll: 0
},
mutations: {
chageEjiyeScroll(state,playLoad) {
state.erjiyeScroll = playLoad
}
},
actions: {
getList({state}) {
......
src/views/erjiye.vue
......@@ -2,7 +2,7 @@
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="erjiye">
<goBack class="animated pulse"/>
<goBack class="animated pulse" />
<div class="content">
<div class="title">
<div class="search-button" @click="openSearch"></div>
......@@ -53,6 +53,7 @@
<div class="close" @click="openSearch"></div>
</div>
</div>
<div :class="['up-down', 'up-img' ]"></div>
</div>
</div>
</div>
......@@ -67,18 +68,24 @@ export default {
searchButton: false,
keyWord: '',
searchList: [],
filterList: []
filterList: [],
upAndDown: 'up-img'
}
},
activated() {
this.searchButton = false
this.resetSearch()
$(".content-box").scrollTop(this.$store.state.erjiyeScroll)
},
mounted() {
this.watchMaodian()
setTimeout(() => {
this.setSearchList(this.$store.state.list)
}, 2000);
this.watchBottom();
},
methods: {
watchMaodian() {
......@@ -151,6 +158,29 @@ export default {
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: {
......@@ -170,15 +200,47 @@ export default {
}
}
},
components:{
components: {
goBack
}
},
}
</script>
<style lang="less" scoped>
@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 {
color: white;
font-size: 35 / @r;
......@@ -186,7 +248,7 @@ export default {
}
.magin-box {
height: 50 / @r;
height: 120 / @r;
}
.none {
......@@ -259,7 +321,8 @@ export default {
.erjiye {
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;
.content {
......@@ -331,11 +394,12 @@ export default {
.san-title {
background: url("../assets/images/erjiye/sanji.png") no-repeat center;
background-size: contain;
// color: #004db6;
color: white;
margin-bottom: 20 / @r;
padding-left: 45 / @r;
white-space: nowrap;
overflow: hidden;
text-overflow : ellipsis;
}
}
}
......
src/views/xiangqing.vue
......@@ -36,6 +36,12 @@
<VueActivePreview class="yulan" v-if="yulanButton" :urlList="ulList">
<div class="close1" @click="closeYulan"></div>
</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 page-front">
<div class="xiangqing">
......@@ -130,7 +136,8 @@ export default {
mianTitle: null,
zIndex: 96,
ulList: [],
yulanButton: false
yulanButton: false,
queren: false
}
},
activated() {
......@@ -140,6 +147,8 @@ export default {
this.getDetail(this.$route.params.id)
},
mounted() {
var _this = this
this.watchDetail()
this.getDetail(this.$route.params.id)
......@@ -147,7 +156,8 @@ export default {
var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) {
alert('复制成功')
// alert('复制成功')
_this.queren = true
});
clipboard.on('error', function (e) {
......@@ -221,6 +231,9 @@ export default {
$('body').css('overflow', 'auto')
$eventbus.$emit('maodian', this.tancengIndex)
});
},
closeQueRen() {
this.queren = false
}
},
components: {
......@@ -266,6 +279,43 @@ export default {
<style lang="less">
@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 {
z-index: 100000 !important;
}
......
src/views/xu.vue
......@@ -15,7 +15,7 @@
<div class="content2"></div>
</div>
</div>
<!-- <div class="to-left"></div> -->
<div class="to-left"></div>
<!-- <div class="bottom-ele"></div> -->
</div>
</div>
......@@ -32,38 +32,50 @@ export default {
}
},
mounted() {
// $(function () {
// function judge() {
// var startx;//让startx在touch事件函数里是全局性变量。
// 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();
// })
this.judgeHuaDong()
},
methods: {
handleJump() {
$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: {
......@@ -140,7 +152,7 @@ export default {
.xu {
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-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