Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 49cae3c4 by mamingqun
Options

cb

parent 95a5d81b
Showing with 31 additions and 32 deletions
src/views/Home.vue
...@@ -109,11 +109,11 @@ export default { ...@@ -109,11 +109,11 @@ export default {
}, },
GoOrBack() { GoOrBack() {
this.$navigation.on('forward', (to, from) => { this.$navigation.on('forward', (to, from) => {
console.log('前进') // console.log('前进')
this.transitionName = 'fanye1' this.transitionName = 'fanye1'
}) })
this.$navigation.on('back', (to, from) => { this.$navigation.on('back', (to, from) => {
console.log('后退'); // console.log('后退');
this.transitionName = 'fanye2' this.transitionName = 'fanye2'
}) })
}, },
......
src/views/erjiye.vue
...@@ -22,12 +22,6 @@ ...@@ -22,12 +22,6 @@
<li class="sub-title">第四节：集中采购</li> <li class="sub-title">第四节：集中采购</li>
<li class="sub-title">第五节：直接委托</li> <li class="sub-title">第五节：直接委托</li>
<li class="sub-title">第六节：合同管理</li> <li class="sub-title">第六节：合同管理</li>
<li class="sub-title">第六节：合同管理</li>
<li class="sub-title">第六节：合同管理</li>
<li class="sub-title">第六节：合同管理</li>
<li class="sub-title">第六节：合同管理</li>
<li class="sub-title">第六节：合同管理</li>
<li class="sub-title">第六节：合同管理</li>
</ul> </ul>
<ul id="3"> <ul id="3">
<li class="main-title">三、线上线下招采服务指南</li> <li class="main-title">三、线上线下招采服务指南</li>
...@@ -44,15 +38,16 @@ ...@@ -44,15 +38,16 @@
export default { export default {
mounted() { mounted() {
this.watchMaodian() this.watchMaodian()
}, },
methods: { methods: {
watchMaodian() { watchMaodian() {
$eventbus.$on('maodian', (index) => { $eventbus.$on('maodian', (index) => {
console.log('index')
console.log(index)
console.log('erjiye')
console.log( index )
this.$nextTick(() => { this.$nextTick(() => {
console.log('测试');
var height = $('#'+ index).position().top - 65; var height = $('#'+ index).position().top - 65;
$('#content-box').scrollTop(height) $('#content-box').scrollTop(height)
}) })
......
src/views/shouye.vue
...@@ -3,13 +3,13 @@ ...@@ -3,13 +3,13 @@
<div class="book-page page-front"> <div class="book-page page-front">
<div class="home"> <div class="home">
<div class="animated jackInTheBox main-title"> <div class="animated jackInTheBox main-title">
<div class="stars"></div> <div :class="['stars','animated', flash?'flash':'']"></div>
</div> </div>
<div class="text01 animated lightSpeedIn"></div> <div class="text01 animated zoomInRight"></div>
<div class="cuizi"></div> <div class="cuizi animated bounceInLeft"></div>
<div class="cheng"></div> <div class="cheng animated bounceInRight"></div>
<div class="button01 animated tada"></div> <div class="button01 animated tada"></div>
<div class="num-box"> <div class="num-box animated bounceInUp">
<span>阅读人数</span>：1898256 <span>阅读人数</span>：1898256
</div> </div>
</div> </div>
...@@ -22,9 +22,14 @@ ...@@ -22,9 +22,14 @@
export default { export default {
data() { data() {
return { return {
flash: false
} }
}, },
activated() {
setTimeout(() => {
this.flash = true
}, 1000);
},
mounted() { mounted() {
// this.$nextTick(() => { // this.$nextTick(() => {
// $('#flipbook').turn({ // $('#flipbook').turn({
...@@ -36,9 +41,9 @@ export default { ...@@ -36,9 +41,9 @@ export default {
// }); // });
// }) // })
}, },
methods:{ methods: {
handleJump() { handleJump() {
$eventbus.$emit('jumpPage','xu') $eventbus.$emit('jumpPage', 'xu')
} }
}, },
components: { components: {
...@@ -132,15 +137,17 @@ export default { ...@@ -132,15 +137,17 @@ export default {
} }
.num-box { .num-box {
width: 260 / @r;
height: 25 / @r; height: 25 / @r;
margin-left: -130 / @r;
line-height: 25 / @r; line-height: 25 / @r;
transform: translate(-50%, 0);
color: white; color: white;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 4%; bottom: 4%;
white-space: nowrap; white-space: nowrap;
font-size: 12 / @r; font-size: 12 / @r;
text-align: center;
span { span {
font-weight: bolder; font-weight: bolder;
...@@ -267,7 +274,6 @@ body { ...@@ -267,7 +274,6 @@ body {
/*书的封面*/ /*书的封面*/
.book-page-1 .page-front { .book-page-1 .page-front {
} }
.book-page-1 .page-back { .book-page-1 .page-back {
...@@ -284,7 +290,6 @@ body { ...@@ -284,7 +290,6 @@ body {
background-color: #fff; background-color: #fff;
} }
.flip-animation-2 { .flip-animation-2 {
animation: flipBook2 13s 2s; animation: flipBook2 13s 2s;
} }
...@@ -295,7 +300,6 @@ body { ...@@ -295,7 +300,6 @@ body {
background-color: #fff; background-color: #fff;
} }
.flip-animation-3 { .flip-animation-3 {
animation: flipBook3 10s 3s; animation: flipBook3 10s 3s;
} }
......
src/views/yjml.vue
<template> <template>
<div class="book-page-box book-page-1 preserve-3d zindex" > <div class="book-page-box book-page-1 preserve-3d zindex">
<div class="book-page page-front"> <div class="book-page page-front">
<div class="yjml"> <div class="yjml">
<div class="cuizi"></div> <div class="cuizi"></div>
...@@ -7,17 +7,17 @@ ...@@ -7,17 +7,17 @@
<div class="animated jackInTheBox main-title"> <div class="animated jackInTheBox main-title">
<div class="stars"></div> <div class="stars"></div>
</div> </div>
<ul class="list"> <ul class="list animated zoomInLeft">
<li class="list-item1" @click="handleJump(1)"></li> <li class="list-item1" @click="handleJump(1)"></li>
<li class="list-item2" @click="handleJump(2)"></li> <li class="list-item2" @click="handleJump(2)"></li>
<li class="list-item3" @click="handleJump(3)"></li> <li class="list-item3" @click="handleJump(3)"></li>
</ul> </ul>
<div class="button01 animated tada"> <div class="button01 animated tada">
<div class="num-box"> <div class="num-box animated bounceInUp">
<span>阅读人数</span>：1898256 <span>阅读人数</span>：1898256
</div> </div>
</div> </div>
<div class="yijian"></div> <div class="yijian animated bounceInRight"></div>
<!-- <div class="tanceng"> <!-- <div class="tanceng">
<div class="kuang"></div> <div class="kuang"></div>
</div>--> </div>-->
...@@ -42,7 +42,7 @@ export default { ...@@ -42,7 +42,7 @@ export default {
console.log('一级目录的index'); console.log('一级目录的index');
console.log(index); console.log(index);
$eventbus.$emit('jumpPage', 'erjiye') $eventbus.$emit('jumpPage', 'erjiye')
$eventbus.$emit('maodian',index) $eventbus.$emit('maodian', index)
} }
}, },
components: { components: {
...@@ -54,7 +54,7 @@ export default { ...@@ -54,7 +54,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@r: 75rem; @r: 75rem;
.zindex{ .zindex {
z-index: 98; z-index: 98;
} }
...@@ -94,15 +94,17 @@ export default { ...@@ -94,15 +94,17 @@ export default {
margin-left: -215 / @r; margin-left: -215 / @r;
.num-box { .num-box {
width: 260 / @r;
height: 25 / @r; height: 25 / @r;
line-height: 25 / @r; line-height: 25 / @r;
transform: translate(-50%, 0); // transform: translate(-50%, 0);
color: white; color: white;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: -40 / @r; bottom: -40 / @r;
white-space: nowrap; white-space: nowrap;
font-size: 12 / @r; font-size: 12 / @r;
margin-left: -130 / @r;
span { span {
font-weight: bolder; font-weight: bolder;
...@@ -294,7 +296,6 @@ export default { ...@@ -294,7 +296,6 @@ export default {
} }
} }
.book-page-1 .page-back { .book-page-1 .page-back {
background-color: #fff; background-color: #fff;
} }
...@@ -319,7 +320,6 @@ export default { ...@@ -319,7 +320,6 @@ export default {
background-color: #fff; background-color: #fff;
} }
.flip-animation-3 { .flip-animation-3 {
animation: flipBook3 10s 3s; animation: flipBook3 10s 3s;
} }
......
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