Skip to content

html / zhaocaih5-wanda

Go to a project
Commit dcd9ae05 by mamingqun
Options

cb

parent 41155971
Showing with 887 additions and 258 deletions
package.json
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"jquery": "^3.4.1", "jquery": "^3.4.1",
"turn.js": "^1.0.5", "turn.js": "^1.0.5",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-navigation": "^1.1.4",
"vue-router": "^3.0.3", "vue-router": "^3.0.3",
"vuex": "^3.0.1" "vuex": "^3.0.1"
}, },
......
src/main.js
...@@ -4,14 +4,32 @@ import router from './router' ...@@ -4,14 +4,32 @@ import router from './router'
import store from './store' import store from './store'
import 'animate.css' import 'animate.css'
import './assets/js/amfe-flexible' import './assets/js/amfe-flexible'
import Navigation from 'vue-navigation'
Vue.use(Navigation, {router})
let eventbus = new Vue()
window.$eventbus = eventbus
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.directive('shotclick', function (el, binding) {
el.onmousedown = function () {
var timeNow = new Date().getTime()
document.onmouseup = function (e) {
if (new Date().getTime() - timeNow < 500) {
binding.value(e)
}
}
}
})
new Vue({ new Vue({
router, router,
store, store,
render: h => h(App) render: h => h(App)
}).$mount('#app') }).$mount('#app')
\ No newline at end of file
src/router.js
import Vue from 'vue' import Vue from 'vue'
import Router from 'vue-router' import Router from 'vue-router'
import Home from './views/Home.vue' import Home from './views/Home.vue'
import shouye from './views/shouye.vue'
import xu from './views/xu.vue'
import yjml from './views/yjml.vue'
import erjiye from './views/erjiye.vue'
import xiangqing from './views/xiangqing.vue'
Vue.use(Router) Vue.use(Router)
export default new Router({ export default new Router({
routes: [ routes: [{
{
path: '/', path: '/',
name: 'home', name: 'home',
component: Home component: Home,
redirect: '/shouye',
children: [{
path: 'shouye',
name: 'shouye',
component: shouye
},
{
path: 'xu',
name: 'xu',
component: xu
},
{
path: 'yjml',
name: 'yjml',
component: yjml
},
{
path: 'erjiye',
name: 'erjiye',
component: erjiye
},
{
path: 'xiangqing',
name: 'xiangqing',
component: xiangqing
},
]
}, },
{ {
path: '/about', path: '/about',
...@@ -17,7 +48,7 @@ export default new Router({ ...@@ -17,7 +48,7 @@ export default new Router({
// route level code-splitting // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue') component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
} }
] ]
}) })
\ No newline at end of file
src/views/Home.vue
...@@ -40,13 +40,23 @@ ...@@ -40,13 +40,23 @@
</div> </div>
</div> </div>
</transition> </transition>
</div> --> </div>-->
<!-- <shouye/> --> <!-- <shouye/> -->
<!-- <xu/> --> <!-- <xu/> -->
<!-- <yjml/> --> <!-- <yjml/> -->
<!-- <erjiye/> --> <!-- <erjiye/> -->
<xiangqing/> <!-- <xiangqing /> -->
<div class="book-page-box book-page-1 preserve-3d">
<div class="book-page page-front">
<transition :name="transitionName" mode="in-out">
<keep-alive>
<router-view />
</keep-alive>
</transition>
</div>
</div>
</div> </div>
</template> </template>
...@@ -65,40 +75,87 @@ export default { ...@@ -65,40 +75,87 @@ export default {
xu: true, xu: true,
yjml: true, yjml: true,
erjiye: true, erjiye: true,
xiangqing: true xiangqing: true,
transitionName: 'fanye1',
} }
}, },
created() { created() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
}, },
mounted() { mounted() {
console.log(123); this.GoOrBack()
this.watchPage()
}, },
methods: { methods: {
handleShouye() { handleShouye() {
this.shouye = !this.shouye // this.shouye = !this.shouye
this.$router.push({ name: 'shouye' })
}, },
handleXu() { handleXu() {
this.xu = !this.xu // this.xu = !this.xu
this.$router.push({ name: 'xu' })
}, },
handleYjml() { handleYjml() {
this.yjml = !this.yjml // this.yjml = !this.yjml
this.$router.push({ name: 'yjml' })
}, },
handleErjiye() { handleErjiye() {
this.erjiye = !this.erjiye // this.erjiye = !this.erjiye
this.$router.push({ name: 'erjiye' })
}, },
handleXiangqing() { handleXiangqing() {
// this.xiangqing = !this.xiangqing // this.xiangqing = !this.xiangqing
this.$router.push({ name: 'xiangqing' })
}, },
beforeunloadFn(e) { GoOrBack() {
console.log('刷新或关闭') this.$navigation.on('forward', (to, from) => {
// ... console.log('前进')
} this.transitionName = 'fanye1'
})
this.$navigation.on('back', (to, from) => {
console.log('后退');
this.transitionName = 'fanye2'
})
}, },
destroyed() { watchPage() {
console.log('销毁了组件'); $eventbus.$on('jumpPage', (page) => {
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
console.log(page);
switch (page) {
case 'shouye':
this.handleShouye()
break;
case 'xu':
this.handleXu()
break;
case 'yjml':
this.handleYjml()
break;
case 'erjiye':
this.handleErjiye()
break;
case 'xiangqing':
this.handleXiangqing()
break;
default:
break;
}
})
}
}, },
// beforeRouteLeave(to, from, next) {
// console.log(this);
// this.$navigation.on('forward', (to, from) => {
// console.log('前进')
// this.transitionName = 'fanye1'
// })
// this.$navigation.once('back', (to, from) => {
// console.log('后退');
// this.transitionName = 'fanye2'
// })
// },
components: { components: {
shouye, shouye,
xu, xu,
...@@ -131,10 +188,17 @@ body { ...@@ -131,10 +188,17 @@ body {
// vue 动画样式 // vue 动画样式
.fanye1-enter-active { .fanye1-enter-active {
animation: fanye1 1s ease-in reverse; // animation: fanye1 1s ease-in reverse;
} }
.fanye1-leave-active { .fanye1-leave-active {
animation: fanye1 1s ease-in; animation: fanye1 0.5s ease-in;
}
.fanye2-enter-active {
animation: fanye1 0.5s ease-in reverse;
}
.fanye2-leave-active {
// animation: fanye1 1s ease-in reverse;
} }
@keyframes fanye1 { @keyframes fanye1 {
...@@ -166,11 +230,7 @@ body { ...@@ -166,11 +230,7 @@ body {
} }
.book-page { .book-page {
// width: 300 / @r;
// height: 300 / @r;
height: 100%; height: 100%;
border: 1 / @r solid #1976d2;
text-align: center;
} }
.book-page-box { .book-page-box {
...@@ -226,19 +286,11 @@ body { ...@@ -226,19 +286,11 @@ body {
} }
/*书的封面*/ /*书的封面*/
.book-page-1 .page-front {
background-color: #1976d2;
}
.book-page-1 .page-back { .book-page-1 .page-back {
background-color: #fff; background-color: #fff;
} }
.book-page-1 .page-front p {
// font-size: 30 / @r;
// color: #fff;
// margin-top: 100 / @r;
}
.flip-animation-1 { .flip-animation-1 {
animation: flipBook1 17s; animation: flipBook1 17s;
...@@ -250,11 +302,6 @@ body { ...@@ -250,11 +302,6 @@ body {
background-color: #fff; background-color: #fff;
} }
.book-page-2 .page-front p {
// font-size: 30 / @r;
// color: #1976d2;
// margin-top: 100 / @r;
}
.flip-animation-2 { .flip-animation-2 {
animation: flipBook2 13s 2s; animation: flipBook2 13s 2s;
...@@ -266,11 +313,6 @@ body { ...@@ -266,11 +313,6 @@ body {
background-color: #fff; background-color: #fff;
} }
.book-page-3 .page-front p {
// font-size: 30 / @r;
// color: #1976d2;
// margin-top: 100 / @r;
}
.flip-animation-3 { .flip-animation-3 {
animation: flipBook3 10s 3s; animation: flipBook3 10s 3s;
......
src/views/erjiye.vue
<template> <template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="erjiye"> <div class="erjiye">
<div class="content"> <div class="content">
<div class="title"></div> <div class="title"></div>
...@@ -28,17 +30,27 @@ ...@@ -28,17 +30,27 @@
</div> </div>
<div class="bottom11"></div> <div class="bottom11"></div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
methods: {
handleJump() {
$eventbus.$emit('jumpPage', 'xiangqing')
}
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@r: 75rem; @r: 75rem;
.zindex{
z-index: 97;
}
.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;
...@@ -104,4 +116,134 @@ export default { ...@@ -104,4 +116,134 @@ export default {
background-size: 100% auto; background-size: 100% auto;
} }
} }
// 分割线
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style> </style>
src/views/index.html deleted 100644 → 0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3-flip-book</title>
<style>
/*
flip-book样式
*/
* {
padding: 0;
margin: 0;
}
body,
html {
height: 100%;
}
body {
/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
perspective: 1000px;
background-color: #212121;
font-family: '微软雅黑';
}
.book {
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
width: 300px;
height: 300px;
background-color: #fff;
transform: rotateX(30deg);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 300px;
border: 1px solid #1976D2;
text-align: center;
}
.book-page-box {
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-front {
background-color: #1976D2;
}
.book-page-1 .page-back {
background-color: #fff;
}
.book-page-1 .page-front p {
font-size: 30px;
color: #fff;
margin-top: 100px;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.book-page-2 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.book-page-3 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
/*书的第四页*/
.book-page-4 .page-front p {
font-size: 30px;
color: #1976D2;
margin-top: 100px;
}
</style>
</head>
<body>
<!-- 书的主体 -->
<div class="book preserve-3d">
<!-- 书的最后一页 -->
<div class="book-page-box book-page-4 preserve-3d">
<div class="book-page page-front">
<p>第三页</p>
</div>
</div>
<!-- 书的第三页 -->
<div class="book-page-box book-page-3 preserve-3d flip-animation-3">
<div class="book-page page-front">
<p>第二页</p>
</div>
</div>
<!-- 书的第二页 -->
<div class="book-page-box book-page-2 preserve-3d flip-animation-2">
<div class="book-page page-front">
<p>第一页</p>
</div>
</div>
<!-- 书的封面 -->
<div class="book-page-box book-page-1 preserve-3d flip-animation-1">
<div class="book-page page-front">
<p>
翻页特效
<br>
flip-book
</p>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
src/views/shouye.vue
<template> <template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<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"></div>
...@@ -11,6 +13,8 @@ ...@@ -11,6 +13,8 @@
<span>阅读人数</span>：1898256 <span>阅读人数</span>：1898256
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -32,6 +36,11 @@ export default { ...@@ -32,6 +36,11 @@ export default {
// }); // });
// }) // })
}, },
methods:{
handleJump() {
$eventbus.$emit('jumpPage','xu')
}
},
components: { components: {
} }
...@@ -41,6 +50,10 @@ export default { ...@@ -41,6 +50,10 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@r: 75rem; @r: 75rem;
.zindex {
z-index: 100;
}
#flipbook { #flipbook {
width: 800 / @r; width: 800 / @r;
height: 400 / @r; height: 400 / @r;
...@@ -142,5 +155,149 @@ export default { ...@@ -142,5 +155,149 @@ export default {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
} }
.wrap {
height: 100%;
}
body,
html {
height: 100%;
}
body {
/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
perspective: 1000 / @r;
background-color: #212121;
font-family: "微软雅黑";
}
// vue 动画样式
/* .fanye1-enter-active {
animation: fanye1 1s ease-in reverse;
}
.fanye1-leave-active {
animation: fanye1 1s ease-in;
} */
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-front {
}
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style> </style>
src/views/xiangqing.vue
<template> <template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="xiangqing"> <div class="xiangqing">
<div class="laozhao" @click="showMulu"></div> <div class="laozhao" @click="showMulu"></div>
<div class="mulu"> <div class="mulu" v-show="mulu">
<div class="title">万达招采</div> <div class="title">万达招采</div>
<div class="content"> <div class="content">
<ul> <ul v-shotclick="handleClick">
<li class="main-title">封面</li> <li class="main-title">封面</li>
<li class="main-title">序</li> <li class="main-title">序</li>
<li class="main-title">一、集团招采管理制度要点</li> <li class="main-title">一、集团招采管理制度要点</li>
...@@ -33,6 +35,8 @@ ...@@ -33,6 +35,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -45,6 +49,12 @@ export default { ...@@ -45,6 +49,12 @@ export default {
methods: { methods: {
showMulu() { showMulu() {
this.mulu = !this.mulu this.mulu = !this.mulu
},
handleClick() {
console.log(123);
},
handleJump() {
console.log(123123)
} }
} }
} }
...@@ -53,6 +63,11 @@ export default { ...@@ -53,6 +63,11 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@r: 75rem; @r: 75rem;
.zindex{
z-index: 96;
}
.xiangqing { .xiangqing {
height: 100%; height: 100%;
background: url("../assets/images/xiangqing/bg.png") no-repeat top center; background: url("../assets/images/xiangqing/bg.png") no-repeat top center;
...@@ -77,13 +92,14 @@ export default { ...@@ -77,13 +92,14 @@ export default {
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: rgba(74, 124, 185, 0.5); background: rgba(74, 124, 185, 0.8);
border-radius: 5 / @r; border-radius: 5 / @r;
color: white; color: white;
font-size: 40 / @r; font-size: 40 / @r;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 20 / @r; padding-bottom: 20 / @r;
user-select: none;
.title { .title {
text-align: center; text-align: center;
...@@ -107,4 +123,130 @@ export default { ...@@ -107,4 +123,130 @@ export default {
} }
} }
} }
// 分割线
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style> </style>
src/views/xu.vue
<template> <template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="xu"> <div class="xu">
<div class="main-box"> <div class="main-box">
<div class="title"></div> <div class="title"></div>
...@@ -41,6 +43,8 @@ ...@@ -41,6 +43,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script> <script>
...@@ -49,6 +53,14 @@ export default { ...@@ -49,6 +53,14 @@ export default {
return { return {
} }
},
mounted(){
},
methods: {
handleJump() {
$eventbus.$emit('jumpPage', 'yjml')
}
} }
} }
</script> </script>
...@@ -56,6 +68,10 @@ export default { ...@@ -56,6 +68,10 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@r: 75rem; @r: 75rem;
.zindex{
z-index: 99;
}
.w80 { .w80 {
width: 80%; width: 80%;
} }
...@@ -144,4 +160,146 @@ export default { ...@@ -144,4 +160,146 @@ export default {
} }
} }
} }
.wrap {
height: 100%;
}
body,
html {
height: 100%;
}
body {
/*perspective 属性指定了观察者与z=0平面的距离，使具有三维位置变换的元素产生透视效果。z>0的三维元素比正常大，而z<0时则比正常小，大小程度由该属性的值决定。默认情况下，消失点位于元素的中心，但是可以通过设置perspective-origin属性来改变其位置。*/
perspective: 1000 / @r;
background-color: #212121;
font-family: "微软雅黑";
}
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
/*书的封面*/
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style> </style>
src/views/yjml.vue
<template> <template>
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="yjml"> <div class="yjml">
<div class="cuizi"></div> <div class="cuizi"></div>
<div class="cheng"></div> <div class="cheng"></div>
...@@ -18,7 +20,9 @@ ...@@ -18,7 +20,9 @@
<div class="yijian"></div> <div class="yijian"></div>
<!-- <div class="tanceng"> <!-- <div class="tanceng">
<div class="kuang"></div> <div class="kuang"></div>
</div> --> </div>-->
</div>
</div>
</div> </div>
</template> </template>
...@@ -31,15 +35,12 @@ export default { ...@@ -31,15 +35,12 @@ export default {
} }
}, },
mounted() { mounted() {
// this.$nextTick(() => {
// $('#flipbook').turn({ },
// width: 300, methods: {
// height: 600, handleJump() {
// autoCenter: true, $eventbus.$emit('jumpPage', 'erjiye')
// acceleration: true, }
// duration: 600
// });
// })
}, },
components: { components: {
...@@ -50,6 +51,10 @@ export default { ...@@ -50,6 +51,10 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@r: 75rem; @r: 75rem;
.zindex{
z-index: 98;
}
.yjml { .yjml {
height: 100%; height: 100%;
background: url("../assets/images/01/bg01.jpg") no-repeat center center; background: url("../assets/images/01/bg01.jpg") no-repeat center center;
...@@ -187,9 +192,133 @@ export default { ...@@ -187,9 +192,133 @@ export default {
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
background: greenyellow; background: greenyellow;
background: url('../assets/images/02/tanceng.png') no-repeat center center; background: url("../assets/images/02/tanceng.png") no-repeat center center;
background-size: contain; background-size: contain;
} }
} }
// 分割线
// vue 动画样式
// .fanye1-enter-active {
// animation: fanye1 1s ease-in reverse;
// }
// .fanye1-leave-active {
// animation: fanye1 1s ease-in;
// }
@keyframes fanye1 {
0% {
transform: rotateY(0deg) skewY(0deg);
}
100% {
transform: rotateY(-160deg) skewY(-20deg);
}
}
//翻页样式
.book {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
// height: 121%;
height: 100%;
background-color: #fff;
// transform: rotateX(30deg) translate(-50%, -60%);
transform: rotateX(0deg) translate(-50%, -50%);
}
.preserve-3d {
/*transform-style属性指定了，该元素的子元素是（看起来）位于三维空间内，还是在该元素所在的平面内被扁平化。*/
transform-style: preserve-3d;
}
.book-page {
height: 100%;
}
.book-page-box {
position: absolute;
top: 0;
left: 0;
width: 750 / @r;
height: 100%;
transform-origin: 0 50%;
transform: rotateY(0deg);
}
@keyframes flipBook1 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-160deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook2 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-150deg);
}
100% {
transform: rotateY(0deg);
}
}
@keyframes flipBook3 {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(-140deg);
}
100% {
transform: rotateY(0deg);
}
}
.book-page-1 .page-back {
background-color: #fff;
}
.flip-animation-1 {
animation: flipBook1 17s;
}
/*书的第二页*/
.book-page-2 .page-back,
.book-page-2 .page-front {
background-color: #fff;
}
.flip-animation-2 {
animation: flipBook2 13s 2s;
}
/*书的第三页*/
.book-page-3 .page-back,
.book-page-3 .page-front {
background-color: #fff;
}
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
</style> </style>
yarn.lock
...@@ -7891,6 +7891,11 @@ vue-loader@^15.7.0: ...@@ -7891,6 +7891,11 @@ vue-loader@^15.7.0:
vue-hot-reload-api "^2.3.0" vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0" vue-style-loader "^4.1.0"
vue-navigation@^1.1.4:
version "1.1.4"
resolved "https://registry.npm.taobao.org/vue-navigation/download/vue-navigation-1.1.4.tgz#be990190624647daa34b8cd525fad4fb6d472542"
integrity sha1-vpkBkGJGR9qjS4zVJfrU+21HJUI=
vue-router@^3.0.3: vue-router@^3.0.3:
version "3.0.6" version "3.0.6"
resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3" resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.0.6.tgz#2e4f0f9cbb0b96d0205ab2690cfe588935136ac3"
......
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