Skip to content

html / zhaocaih5-wanda

Go to a project
Commit dcd9ae05 by mamingqun
Options

cb

parent 41155971
Showing with 1011 additions and 382 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' })
},
GoOrBack() {
this.$navigation.on('forward', (to, from) => {
console.log('前进')
this.transitionName = 'fanye1'
})
this.$navigation.on('back', (to, from) => {
console.log('后退');
this.transitionName = 'fanye2'
})
}, },
beforeunloadFn(e) { watchPage() {
console.log('刷新或关闭') $eventbus.$on('jumpPage', (page) => {
// ...
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;
}
})
} }
}, },
destroyed() { // beforeRouteLeave(to, from, next) {
console.log('销毁了组件'); // console.log(this);
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e)) // 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="erjiye"> <div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="content"> <div class="book-page page-front">
<div class="title"></div> <div class="erjiye">
<div class="content-box"> <div class="content">
<ul> <div class="title"></div>
<li class="main-title">一、集团招采管理制度要点</li> <div class="content-box">
<li class="sub-title">第一节：总则</li> <ul>
<li class="sub-title">第二节：供方管理</li> <li class="main-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> <li class="sub-title">第五节：直接委托</li>
<ul> <li class="sub-title">第六节：合同管理</li>
<li class="main-title">二、招采常见问题百问百答</li> </ul>
<li class="sub-title">第一节：总则</li> <ul>
<li class="sub-title">第二节：供方管理</li> <li class="main-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> <li class="sub-title">第五节：直接委托</li>
<ul> <li class="sub-title">第六节：合同管理</li>
<li class="main-title">三、线上线下招采服务指南</li> </ul>
</ul> <ul>
<li class="main-title">三、线上线下招采服务指南</li>
</ul>
</div>
</div>
<div class="bottom11"></div>
</div> </div>
</div> </div>
<div class="bottom11"></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="home"> <div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="animated jackInTheBox main-title"> <div class="book-page page-front">
<div class="stars"></div> <div class="home">
</div> <div class="animated jackInTheBox main-title">
<div class="text01 animated lightSpeedIn"></div> <div class="stars"></div>
<div class="cuizi"></div> </div>
<div class="cheng"></div> <div class="text01 animated lightSpeedIn"></div>
<div class="button01 animated tada"></div> <div class="cuizi"></div>
<div class="num-box"> <div class="cheng"></div>
<span>阅读人数</span>：1898256 <div class="button01 animated tada"></div>
<div class="num-box">
<span>阅读人数</span>：1898256
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -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="xiangqing"> <div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="laozhao" @click="showMulu"></div> <div class="book-page page-front">
<div class="mulu"> <div class="xiangqing">
<div class="title">万达招采</div> <div class="laozhao" @click="showMulu"></div>
<div class="content"> <div class="mulu" v-show="mulu">
<ul> <div class="title">万达招采</div>
<li class="main-title">封面</li> <div class="content">
<li class="main-title">序</li> <ul v-shotclick="handleClick">
<li class="main-title">一、集团招采管理制度要点</li> <li class="main-title">封面</li>
<li>第一节：总则</li> <li class="main-title">序</li>
<li>第二节：供方管理</li> <li class="main-title">一、集团招采管理制度要点</li>
<li>第三节：招标过程管理</li> <li>第一节：总则</li>
<li>第四节：集中采购</li> <li>第二节：供方管理</li>
<li>第五节：直接委托</li> <li>第三节：招标过程管理</li>
<li>第六节：合同管理</li> <li>第四节：集中采购</li>
<li class="main-title">二、招采常见问题百问百答</li> <li>第五节：直接委托</li>
<li>供方表示不参与招标</li> <li>第六节：合同管理</li>
<li>供方不满足实际需求</li> <li class="main-title">二、招采常见问题百问百答</li>
<li>评标办法不合理，如何处理</li> <li>供方表示不参与招标</li>
<li>紧急业务如何招标</li> <li>供方不满足实际需求</li>
<li>什么情况下可废标</li> <li>评标办法不合理，如何处理</li>
<li>什么情况下可清标</li> <li>紧急业务如何招标</li>
<li>标函分析主要分析哪些内容</li> <li>什么情况下可废标</li>
<li>多标段中标人为同一家，如何处理</li> <li>什么情况下可清标</li>
<li>有品牌库的项目，可否单项库招标</li> <li>标函分析主要分析哪些内容</li>
<li>直接委托操作要求和定价原则</li> <li>多标段中标人为同一家，如何处理</li>
<li>什么情况下需要签订合同</li> <li>有品牌库的项目，可否单项库招标</li>
<li>可采用直委方式的项目有哪些</li> <li>直接委托操作要求和定价原则</li>
<li>定标详评会的标准流程</li> <li>什么情况下需要签订合同</li>
<li class="main-title">三、线上线下招采服务指南</li> <li>可采用直委方式的项目有哪些</li>
</ul> <li>定标详评会的标准流程</li>
<li class="main-title">三、线上线下招采服务指南</li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -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="xu"> <div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="main-box"> <div class="book-page page-front">
<div class="title"></div> <div class="xu">
<div class="content"> <div class="main-box">
<ul class="content-box"> <div class="title"></div>
<li> <div class="content">
<div class="content-title"> <ul class="content-box">
实现对招采业务的全面管理方式创新 <li>
<br />——万达招采平台 <div class="content-title">
</div> 实现对招采业务的全面管理方式创新
<p>万达招采平台，是依托最新的互联网、大数据、移动等技术，以管控、服务为核心，以打通集团招采业务链为目标，倾力打造的互联网招采平台。对内可实现全集团招采业务的全程信息化管控，对外可实现供方一站式服务，完成了招采平台建设目标：实现对集团招采业务全组织架构覆盖、全产业链覆盖、全生命周期贯通，实现对招采业务的全面管理创新。</p> <br />——万达招采平台
</li> </div>
<li> <p>万达招采平台，是依托最新的互联网、大数据、移动等技术，以管控、服务为核心，以打通集团招采业务链为目标，倾力打造的互联网招采平台。对内可实现全集团招采业务的全程信息化管控，对外可实现供方一站式服务，完成了招采平台建设目标：实现对集团招采业务全组织架构覆盖、全产业链覆盖、全生命周期贯通，实现对招采业务的全面管理创新。</p>
<div class="content-title">5大管理板块实现数据集中管控</div> </li>
<div class="flex w80"> <li>
<div>一站式服务</div> <div class="content-title">5大管理板块实现数据集中管控</div>
<div>供方管理</div> <div class="flex w80">
<div>招采管理</div> <div>一站式服务</div>
</div> <div>供方管理</div>
<div class="flex w50 mt40"> <div>招采管理</div>
<div>合同管理</div> </div>
<div>供方评估</div> <div class="flex w50 mt40">
</div> <div>合同管理</div>
<p>招采平台已平稳运行2年，已实现全集团供方统一管理及招采业务的全程信息化管控，平台通过5大管理板块（一站式服务、供方管理、招采管理、合同管理、供方评估）基本实现数据集中管控：统一业务分类1095个（品牌库507个）、管理供方总数123083个（品牌库6167个），对外供方服务平台累计访问次数137万次，汇总年度招采计划222803个（金额5073亿元），定标数量109969个（金额1219亿元），在线采购1.07亿元，发起履约评估16041次。</p> <div>供方评估</div>
</li> </div>
<li> <p>招采平台已平稳运行2年，已实现全集团供方统一管理及招采业务的全程信息化管控，平台通过5大管理板块（一站式服务、供方管理、招采管理、合同管理、供方评估）基本实现数据集中管控：统一业务分类1095个（品牌库507个）、管理供方总数123083个（品牌库6167个），对外供方服务平台累计访问次数137万次，汇总年度招采计划222803个（金额5073亿元），定标数量109969个（金额1219亿元），在线采购1.07亿元，发起履约评估16041次。</p>
<div class="content-title">工作目标</div> </li>
<p>为更好的适应集团轻资产战略，满足集团项目开发、商业运营的需求，招采平台拟制定以下工作目标：</p> <li>
</li> <div class="content-title">工作目标</div>
<li> <p>为更好的适应集团轻资产战略，满足集团项目开发、商业运营的需求，招采平台拟制定以下工作目标：</p>
<div class="content-title">对内部：</div> </li>
<p>改进现有招采管理体系。采购权上收（重要、通用）、选择权下放（菜单、个性）；集中采购、集中支付（材料设备）；打通支付数据，保障供方回款；向合作项目提供采购服务，进行电商化运营，打造资源集聚、供需匹配、质优价廉、阳光高效的供应链体系，保障集团项目开发、运营的需求。</p> <li>
</li> <div class="content-title">对内部：</div>
<li> <p>改进现有招采管理体系。采购权上收（重要、通用）、选择权下放（菜单、个性）；集中采购、集中支付（材料设备）；打通支付数据，保障供方回款；向合作项目提供采购服务，进行电商化运营，打造资源集聚、供需匹配、质优价廉、阳光高效的供应链体系，保障集团项目开发、运营的需求。</p>
<div class="content-title">对外部：</div> </li>
<p>提升供应链管理能力，依托集团品牌影响力，凭借多年积累的供方资源、价格数据、采购信誉，联合知名电商、同行企业，利用互联网先进技术，引入供应链金融，整合产业链上下游资源，以平台投资企业自身采购需求为强驱动支点，必将打造全球领先的工程领域供应链服务平台。让买方放心，卖方安心、以采促产、服务实业，促进产业链共享、共赢，协同发展。</p> <li>
<p>招采平台将逐步实现以上工作目标，将为集团更好的提供招采服务，同时造福整个行业，成为国内行业领先的企业招采平台。</p> <div class="content-title">对外部：</div>
</li> <p>提升供应链管理能力，依托集团品牌影响力，凭借多年积累的供方资源、价格数据、采购信誉，联合知名电商、同行企业，利用互联网先进技术，引入供应链金融，整合产业链上下游资源，以平台投资企业自身采购需求为强驱动支点，必将打造全球领先的工程领域供应链服务平台。让买方放心，卖方安心、以采促产、服务实业，促进产业链共享、共赢，协同发展。</p>
</ul> <p>招采平台将逐步实现以上工作目标，将为集团更好的提供招采服务，同时造福整个行业，成为国内行业领先的企业招采平台。</p>
</li>
</ul>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -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="yjml"> <div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="cuizi"></div> <div class="book-page page-front">
<div class="cheng"></div> <div class="yjml">
<div class="animated jackInTheBox main-title"> <div class="cuizi"></div>
<div class="stars"></div> <div class="cheng"></div>
</div> <div class="animated jackInTheBox main-title">
<ul class="list"> <div class="stars"></div>
<li class="list-item1"></li> </div>
<li class="list-item2"></li> <ul class="list">
<li class="list-item3"></li> <li class="list-item1"></li>
</ul> <li class="list-item2"></li>
<div class="button01 animated tada"> <li class="list-item3"></li>
<div class="num-box"> </ul>
<span>阅读人数</span>：1898256 <div class="button01 animated tada">
<div class="num-box">
<span>阅读人数</span>：1898256
</div>
</div>
<div class="yijian"></div>
<!-- <div class="tanceng">
<div class="kuang"></div>
</div>-->
</div> </div>
</div> </div>
<div class="yijian"></div>
<!-- <div class="tanceng">
<div class="kuang"></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