Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 7f5b259b by mamingqun
Options

bc

parent c4947de6
Showing with 818 additions and 75 deletions
package.json
...@@ -28,6 +28,7 @@ ...@@ -28,6 +28,7 @@
"eslint-plugin-vue": "^5.0.0", "eslint-plugin-vue": "^5.0.0",
"less": "^3.0.4", "less": "^3.0.4",
"less-loader": "^4.1.0", "less-loader": "^4.1.0",
"vconsole": "^3.3.2",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
}, },
"eslintConfig": { "eslintConfig": {
......
src/main.js
...@@ -11,6 +11,10 @@ import axios from 'axios'; ...@@ -11,6 +11,10 @@ import axios from 'axios';
window.$axios = axios window.$axios = axios
// import VConsole from 'vconsole';
// var vConsole = new VConsole();
Vue.use(Navigation, {router}) Vue.use(Navigation, {router})
let eventbus = new Vue() let eventbus = new Vue()
......
src/router.js
...@@ -6,6 +6,7 @@ import xu from './views/xu.vue' ...@@ -6,6 +6,7 @@ import xu from './views/xu.vue'
import yjml from './views/yjml.vue' import yjml from './views/yjml.vue'
import erjiye from './views/erjiye.vue' import erjiye from './views/erjiye.vue'
import xiangqing from './views/xiangqing.vue' import xiangqing from './views/xiangqing.vue'
import xiangqing1 from './views/xiangqing1.vue'
Vue.use(Router) Vue.use(Router)
...@@ -40,6 +41,11 @@ export default new Router({ ...@@ -40,6 +41,11 @@ export default new Router({
name: 'xiangqing', name: 'xiangqing',
component: xiangqing component: xiangqing
}, },
{
path: 'xiangqing1/:id',
name: 'xiangqing1',
component: xiangqing1
},
] ]
}, },
{ {
......
src/store.js
...@@ -5,7 +5,8 @@ Vue.use(Vuex) ...@@ -5,7 +5,8 @@ Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
list: null list: null,
yudushu: null
}, },
mutations: { mutations: {
...@@ -16,6 +17,7 @@ export default new Vuex.Store({ ...@@ -16,6 +17,7 @@ export default new Vuex.Store({
console.log('列表') console.log('列表')
console.log(res.data.data.data) console.log(res.data.data.data)
state.list = res.data.data.data state.list = res.data.data.data
state.yudushu = res.data.data.system.number
}) })
}, },
getDetail(state, playload) { getDetail(state, playload) {
......
src/views/Home.vue
...@@ -106,6 +106,10 @@ export default { ...@@ -106,6 +106,10 @@ export default {
// this.xiangqing = !this.xiangqing // this.xiangqing = !this.xiangqing
this.$router.push({ name: 'xiangqing', params: { id: id } }) this.$router.push({ name: 'xiangqing', params: { id: id } })
}, },
handleXiangqing1(id) {
// this.xiangqing = !this.xiangqing
this.$router.push({ name: 'xiangqing1', params: { id: id } })
},
GoOrBack() { GoOrBack() {
this.$navigation.on('forward', (to, from) => { this.$navigation.on('forward', (to, from) => {
console.log('前进') console.log('前进')
...@@ -137,6 +141,9 @@ export default { ...@@ -137,6 +141,9 @@ export default {
case 'xiangqing': case 'xiangqing':
this.handleXiangqing(page.id) this.handleXiangqing(page.id)
break; break;
case 'xiangqing1':
this.handleXiangqing1(page.id)
break;
default: default:
break; break;
} }
...@@ -177,7 +184,7 @@ body { ...@@ -177,7 +184,7 @@ body {
// vue 动画样式 // vue 动画样式
.fanye1-enter-active { .fanye1-enter-active {
animation: fanye1 0.5s ease-in reverse; // animation: fanye1 0.5s ease-in reverse;
} }
.fanye1-leave-active { .fanye1-leave-active {
animation: fanye1 0.5s ease-in; animation: fanye1 0.5s ease-in;
...@@ -187,7 +194,7 @@ body { ...@@ -187,7 +194,7 @@ body {
animation: fanye1 0.5s ease-in reverse; animation: fanye1 0.5s ease-in reverse;
} }
.fanye2-leave-active { .fanye2-leave-active {
animation: fanye1 0.5s ease-in; // animation: fanye1 0.5s ease-in;
} }
@keyframes fanye1 { @keyframes fanye1 {
......
src/views/shouye.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<div class="num-box animated bounceInUp"> <div class="num-box animated bounceInUp">
<div class="top-info">仅供内部使用</div> <div class="top-info">仅供内部使用</div>
<div> <div>
<span>阅读人数</span>：1898256 <span>阅读人数</span>：{{$store.state.yudushu}}
</div> </div>
</div> </div>
</div> </div>
......
src/views/xiangqing.vue
<template> <template>
<div> <!-- <div> -->
<div class="laozhao" @click="showMulu"></div> <!-- <div class="laozhao" @click="showMulu"></div> -->
<!-- 目录 --> <!-- 目录 -->
<div class="mulu-wrap" v-show="mulu"> <!-- <div class="mulu-wrap" v-show="mulu">
<div class="mulu"> <div class="mulu">
<div class="title">万达招采</div> <div class="title">万达招采</div>
<div class="content"> <div class="content">
<div v-shotclick="handleClick"> <div v-shotclick="handleClick">
<li class="main-title" @click="goFengMian">封面</li> <li class="main-title" @click="goFengMian">封面</li>
<li class="main-title" @click="goXu">序</li> <li class="main-title" @click="goXu">序</li>
<!-- <ul v-for="(item, index) in $store.state.list" :key="index">
<li class="main-title">{{item.catname}}</li>
<li
v-for="(ele, num) in item.child"
:key="num"
@click="handleDetail(ele.news_id,ele.title)"
>{{ele.title}}</li>
</ul>-->
<ul :id="index + 1" v-for="(item, index) in $store.state.list" :key="index"> <ul :id="index + 1" v-for="(item, index) in $store.state.list" :key="index">
<li class="main-title">{{item.catname}}</li> <li class="main-title">{{item.catname}}</li>
<div v-for="(ele, num) in item.child" :key="num"> <div v-for="(ele, num) in item.child" :key="num">
...@@ -40,19 +32,20 @@ ...@@ -40,19 +32,20 @@
</div> </div>
<div class="close" @click="closeMulu"></div> <div class="close" @click="closeMulu"></div>
</div> </div>
</div> </div>-->
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump"> <div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}" @click="handleJump">
<div class="book-page page-front"> <div class="book-page page-front">
<div class="xiangqing"> <div class="xiangqing">
<!-- 内容区 --> <div class="top-info"></div>
<!-- <button class="btn" data-clipboard-copy="copy123" data-clipboard-target="button">Copy123</button> --> <!-- 内容区 -->
<!-- <div class="mainTitle">{{mianTitle}}</div> --> <!-- <button class="btn" data-clipboard-copy="copy123" data-clipboard-target="button">Copy123</button> -->
<div class="box" v-if="htmlData" v-html="htmlData"></div> <!-- <div class="mainTitle">{{mianTitle}}</div> -->
</div> <div class="box" v-if="htmlData" v-html="htmlData"></div>
</div> </div>
</div> </div>
</div> </div>
<!-- </div> -->
</template> </template>
<script> <script>
...@@ -63,7 +56,8 @@ export default { ...@@ -63,7 +56,8 @@ export default {
return { return {
mulu: false, mulu: false,
htmlData: null, htmlData: null,
mianTitle: null mianTitle: null,
zIndex: 96
} }
}, },
activated() { activated() {
...@@ -104,16 +98,14 @@ export default { ...@@ -104,16 +98,14 @@ export default {
}, },
getDetail(id) { getDetail(id) {
this.$store.dispatch('getDetail', id).then((res) => { this.$store.dispatch('getDetail', id).then((res) => {
console.log('详情的res');
console.log(res);
this.htmlData = res.data.data.content this.htmlData = res.data.data.content
}) })
}, },
handleDetail(id, title) { handleDetail(id, title, item) {
console.log('id,title详情1目录的点击') console.log('id,title详情1目录的点击')
console.log(id, title) console.log(id, title)
if (item.module === 2) { if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id }) $eventbus.$emit('jumpPage', { pageName: 'xiangqing1', id: id })
setTimeout(() => { setTimeout(() => {
$eventbus.$emit('detailData', { id, title }) $eventbus.$emit('detailData', { id, title })
}); });
...@@ -207,7 +199,7 @@ export default { ...@@ -207,7 +199,7 @@ export default {
} }
.zindex { .zindex {
z-index: 96; z-index: 95;
} }
.box { .box {
...@@ -254,9 +246,19 @@ export default { ...@@ -254,9 +246,19 @@ export default {
.xiangqing { .xiangqing {
height: 100%; height: 100%;
background: url("../assets/images/xiangqing/bg.png") no-repeat top center;
background-size: 100% auto;
padding-top: 500 / @r; padding-top: 500 / @r;
background: white;
.top-info {
width: 100%;
height: 500 / @r;
background: url("../assets/images/xiangqing/bg.png") no-repeat top center;
background-size: 100% auto;
position: absolute;
top: 0;
left: 0;
}
} }
.laozhao { .laozhao {
...@@ -268,7 +270,7 @@ export default { ...@@ -268,7 +270,7 @@ export default {
position: fixed; position: fixed;
right: 3%; right: 3%;
top: 27%; top: 27%;
z-index: 500; z-index: 100;
} }
// 分割线 // 分割线
......
src/views/xiangqing1.vue 0 → 100644
<template>
<!-- <div> -->
<!-- <div class="laozhao" @click="showMulu"></div> -->
<!-- 目录 -->
<!-- <div class="mulu-wrap" v-show="mulu">
<div class="mulu">
<div class="title">万达招采</div>
<div class="content">
<div v-shotclick="handleClick">
<li class="main-title" @click="goFengMian">封面</li>
<li class="main-title" @click="goXu">序</li>
<ul :id="index + 1" v-for="(item, index) in $store.state.list" :key="index">
<li class="main-title">{{item.catname}}</li>
<div v-for="(ele, num) in item.child" :key="num">
<li
:id="ele.catname"
class="sub-title"
@click="handleDetail(ele.news_id,ele.catname,ele)"
data-category="0"
>{{ele.catname}}</li>
<div :class="[ele.catname,'none']">
<li
class="san-title"
v-for="(park, num1) in ele.child"
:key="num1 + '123'"
@click="handleDetail(park.news_id,park.catname,park)"
>{{park.catname}}</li>
</div>
</div>
</ul>
</div>
</div>
<div class="close" @click="closeMulu"></div>
</div>
</div>-->
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}" @click="handleJump">
<div class="book-page page-front">
<div class="xiangqing">
<div class="top-info"></div>
<!-- 内容区 -->
<!-- <button class="btn" data-clipboard-copy="copy123" data-clipboard-target="button">Copy123</button> -->
<!-- <div class="mainTitle">{{mianTitle}}</div> -->
<div class="box" v-if="htmlData" v-html="htmlData"></div>
</div>
</div>
</div>
<!-- </div> -->
</template>
<script>
import Clipboard from 'clipboard';
export default {
data() {
return {
mulu: false,
htmlData: null,
mianTitle: null,
zIndex: 95
}
},
activated() {
this.htmlData = null
this.mianTitle = null
this.mulu = false
this.getDetail(this.$route.params.id)
},
mounted() {
this.watchDetail()
this.getDetail(this.$route.params.id)
var clipboard = new Clipboard('.btn');
clipboard.on('success', function (e) {
console.log(e);
});
clipboard.on('error', function (e) {
console.log(e);
});
},
methods: {
showMulu() {
this.mulu = !this.mulu
},
handleClick() {
},
handleJump() {
console.log(123123)
},
watchDetail() {
$eventbus.$on('detailData', (params) => {
this.mianTitle = params.title
})
},
getDetail(id) {
this.$store.dispatch('getDetail', id).then((res) => {
this.htmlData = res.data.data.content
})
},
handleDetail(id, title, item) {
console.log('id,title详情1目录的点击')
console.log(id, title)
if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
setTimeout(() => {
$eventbus.$emit('detailData', { id, title })
});
} else {
var num = $('#' + item.catname).data('category')
if (num === 0) {
$('.' + item.catname).animate({
display: 'block',
height: 'toggle'
});
$('#' + item.catname).data('category', 1)
} else {
$('.' + item.catname).animate({
display: 'none',
height: 'toggle'
});
$('#' + item.catname).data('category', 0)
}
}
},
closeMulu() {
this.mulu = false;
},
goFengMian() {
$eventbus.$emit('jumpPage', { pageName: 'shouye' })
},
goXu() {
$eventbus.$emit('jumpPage', { pageName: 'xu' })
}
}
}
</script>
<style lang="less">
@r: 75rem;
.mulu-wrap {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 502;
background: rgba(0, 0, 0, 0.7);
.mulu {
width: 600 / @r;
height: 1100 / @r;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// background: rgba(74, 124, 185, 0.8);
background: url("../assets/images/xiangqing/mulu.png") no-repeat top center;
background-size: 100% auto;
border-radius: 5 / @r;
color: white;
font-size: 40 / @r;
display: flex;
flex-direction: column;
padding-bottom: 20 / @r;
user-select: none;
z-index: 501;
.title {
text-align: center;
margin-top: 210 / @r;
margin-bottom: 40 / @r;
}
.content {
flex: 1;
overflow: auto;
font-size: 34 / @r;
padding-left: 35 / @r;
li {
margin-bottom: 30 / @r;
}
.main-title {
font-size: 40 / @r;
}
}
}
}
.xiangqing-wrap {
height: 100%;
overflow: auto;
}
.zindex {
z-index: 95;
}
.box {
overflow: auto;
padding-left: 40 / @r;
padding-right: 40 / @r;
margin-top: 30 / @r;
.da,
.wen {
width: 50 / @r !important;
height: 50 / @r;
display: inline-block;
position: relative;
top: 8 / @r;
right: 8 / @r;
margin: 0;
}
img {
width: 100%;
margin-bottom: 40 / @r;
margin-top: 40 / @r;
}
p {
font-size: 35 / @r;
}
}
.close {
width: 60 / @r;
height: 60 / @r;
position: absolute;
right: 10 / @r;
top: 120 / @r;
}
.mainTitle {
padding-left: 40 / @r;
padding-right: 40 / @r;
margin-top: 60 / @r;
}
.xiangqing {
height: 100%;
padding-top: 500 / @r;
background: white;
.top-info {
width: 100%;
height: 500 / @r;
background: url("../assets/images/xiangqing/bg.png") no-repeat top center;
background-size: 100% auto;
position: absolute;
top: 0;
left: 0;
}
}
.laozhao {
width: 242 / @r;
height: 180 / @r;
background: url("../assets/images/xiangqing/laozhao.png") no-repeat center
center;
background-size: contain;
position: fixed;
right: 3%;
top: 27%;
z-index: 100;
}
// 分割线
// 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>
src/views/xu - 副本.vue 0 → 100644
<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="main-box">
<div class="title"></div>
<div class="content">
<ul class="content-box">
<!-- <li>
<div class="content-title">
实现对招采业务的全面管理方式创新
<br/>——万达招采平台
</div>
<p>万达招采平台，是依托最新的互联网、大数据、移动等技术，以管控、服务为核心，以打通集团招采业务链为目标，倾力打造的互联网招采平台。对内可实现全集团招采业务的全程信息化管控，对外可实现供方一站式服务，完成了招采平台建设目标：实现对集团招采业务全组织架构覆盖、全产业链覆盖、全生命周期贯通，实现对招采业务的全面管理创新。</p>
</li>
<li>
<div class="content-title">5大管理板块实现数据集中管控</div>
<div class="flex w80">
<div>一站式服务</div>
<div>供方管理</div>
<div>招采管理</div>
</div>
<div class="flex w50 mt40">
<div>合同管理</div>
<div>供方评估</div>
</div>
<p>招采平台已平稳运行2年，已实现全集团供方统一管理及招采业务的全程信息化管控，平台通过5大管理板块（一站式服务、供方管理、招采管理、合同管理、供方评估）基本实现数据集中管控：统一业务分类1095个（品牌库507个）、管理供方总数123083个（品牌库6167个），对外供方服务平台累计访问次数137万次，汇总年度招采计划222803个（金额5073亿元），定标数量109969个（金额1219亿元），在线采购1.07亿元，发起履约评估16041次。</p>
</li>
<li>
<div class="content-title">工作目标</div>
<p>为更好的适应集团轻资产战略，满足集团项目开发、商业运营的需求，招采平台拟制定以下工作目标：</p>
</li>
<li>
<div class="content-title">对内部：</div>
<p>改进现有招采管理体系。采购权上收（重要、通用）、选择权下放（菜单、个性）；集中采购、集中支付（材料设备）；打通支付数据，保障供方回款；向合作项目提供采购服务，进行电商化运营，打造资源集聚、供需匹配、质优价廉、阳光高效的供应链体系，保障集团项目开发、运营的需求。</p>
</li>
<li>
<div class="content-title">对外部：</div>
<p>提升供应链管理能力，依托集团品牌影响力，凭借多年积累的供方资源、价格数据、采购信誉，联合知名电商、同行企业，利用互联网先进技术，引入供应链金融，整合产业链上下游资源，以平台投资企业自身采购需求为强驱动支点，必将打造全球领先的工程领域供应链服务平台。让买方放心，卖方安心、以采促产、服务实业，促进产业链共享、共赢，协同发展。</p>
<p>招采平台将逐步实现以上工作目标，将为集团更好的提供招采服务，同时造福整个行业，成为国内行业领先的企业招采平台。</p>
</li>-->
<div class="text-box"></div>
</ul>
</div>
</div>
<div class="bottom-ele"></div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
}
},
mounted() {
},
methods: {
handleJump() {
$eventbus.$emit('jumpPage', { pageName: 'yjml'} )
}
}
}
</script>
<style lang="less" scoped>
@r: 75rem;
.bottom-ele {
background: url("../assets/images/02/bottom.png") no-repeat bottom center;
background-size: contain;
width: 100%;
height: 300 / @r;
position: absolute;
bottom: 0;
}
.zindex {
z-index: 999;
}
.w80 {
width: 80%;
}
.w50 {
width: 50%;
}
.mt40 {
margin-bottom: 40 / @r !important;
}
.flex {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-bottom: 10 / @r;
div {
font-size: 30 / @r;
color: white;
border: 2 / @r solid white;
border-radius: 4 / @r;
padding: 5 / @r;
padding-left: 10 / @r;
padding-right: 10 / @r;
}
}
.xu {
height: 100%;
background: url("../assets/images/02/bg01.png") no-repeat bottom center;
background-size: 100% auto;
.main-box {
width: 670 / @r;
position: absolute;
left: 50%;
bottom: 65 / @r;
transform: translate(-50%, 0);
.title {
background: url("../assets/images/02/title.png") no-repeat center center;
background-size: contain;
height: 115 / @r;
margin-bottom: 60 / @r;
}
.content {
background: url("../assets/images/02/bg.png") no-repeat top center;
background-size: 108% auto;
height: 950 / @r;
// padding-left: 30 / @r;
// padding-right: 30 / @r;
padding-top: 105 / @r;
.content-box {
height: 100%;
overflow: auto;
.text-box {
background: url("../assets/images/02/text02.png") no-repeat top center;
background-size: 90% auto;
height: 2350 / @r;
}
.content-title {
font-size: 38 / @r;
text-align: center;
font-weight: 600;
color: #fdff00;
margin-bottom: 40 / @r;
}
p {
padding: 0;
margin: 0;
color: white;
text-indent: 2em;
text-align: justify;
font-size: 28 / @r;
line-height: 40 / @r;
}
li {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40 / @r;
}
}
}
}
}
.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>
src/views/xu.vue
...@@ -4,46 +4,17 @@ ...@@ -4,46 +4,17 @@
<div class="xu"> <div class="xu">
<div class="main-box"> <div class="main-box">
<div class="title"></div> <div class="title"></div>
<div class="content"> <!-- <div class="content">
<ul class="content-box"> <ul class="content-box">
<!-- <li>
<div class="content-title">
实现对招采业务的全面管理方式创新
<br/>——万达招采平台
</div>
<p>万达招采平台，是依托最新的互联网、大数据、移动等技术，以管控、服务为核心，以打通集团招采业务链为目标，倾力打造的互联网招采平台。对内可实现全集团招采业务的全程信息化管控，对外可实现供方一站式服务，完成了招采平台建设目标：实现对集团招采业务全组织架构覆盖、全产业链覆盖、全生命周期贯通，实现对招采业务的全面管理创新。</p>
</li>
<li>
<div class="content-title">5大管理板块实现数据集中管控</div>
<div class="flex w80">
<div>一站式服务</div>
<div>供方管理</div>
<div>招采管理</div>
</div>
<div class="flex w50 mt40">
<div>合同管理</div>
<div>供方评估</div>
</div>
<p>招采平台已平稳运行2年，已实现全集团供方统一管理及招采业务的全程信息化管控，平台通过5大管理板块（一站式服务、供方管理、招采管理、合同管理、供方评估）基本实现数据集中管控：统一业务分类1095个（品牌库507个）、管理供方总数123083个（品牌库6167个），对外供方服务平台累计访问次数137万次，汇总年度招采计划222803个（金额5073亿元），定标数量109969个（金额1219亿元），在线采购1.07亿元，发起履约评估16041次。</p>
</li>
<li>
<div class="content-title">工作目标</div>
<p>为更好的适应集团轻资产战略，满足集团项目开发、商业运营的需求，招采平台拟制定以下工作目标：</p>
</li>
<li>
<div class="content-title">对内部：</div>
<p>改进现有招采管理体系。采购权上收（重要、通用）、选择权下放（菜单、个性）；集中采购、集中支付（材料设备）；打通支付数据，保障供方回款；向合作项目提供采购服务，进行电商化运营，打造资源集聚、供需匹配、质优价廉、阳光高效的供应链体系，保障集团项目开发、运营的需求。</p>
</li>
<li>
<div class="content-title">对外部：</div>
<p>提升供应链管理能力，依托集团品牌影响力，凭借多年积累的供方资源、价格数据、采购信誉，联合知名电商、同行企业，利用互联网先进技术，引入供应链金融，整合产业链上下游资源，以平台投资企业自身采购需求为强驱动支点，必将打造全球领先的工程领域供应链服务平台。让买方放心，卖方安心、以采促产、服务实业，促进产业链共享、共赢，协同发展。</p>
<p>招采平台将逐步实现以上工作目标，将为集团更好的提供招采服务，同时造福整个行业，成为国内行业领先的企业招采平台。</p>
</li>-->
<div class="text-box"></div> <div class="text-box"></div>
</ul> </ul>
</div>-->
<div class="content1">
<div class="bi"></div>
<div class="content2"></div>
</div> </div>
</div> </div>
<div class="bottom-ele"></div> <!-- <div class="bottom-ele"></div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -61,7 +32,7 @@ export default { ...@@ -61,7 +32,7 @@ export default {
}, },
methods: { methods: {
handleJump() { handleJump() {
$eventbus.$emit('jumpPage', { pageName: 'yjml'} ) $eventbus.$emit('jumpPage', { pageName: 'yjml' })
} }
} }
} }
...@@ -118,11 +89,12 @@ export default { ...@@ -118,11 +89,12 @@ export default {
background-size: 100% auto; background-size: 100% auto;
.main-box { .main-box {
width: 670 / @r; // width: 628 / @r;
width: 100%;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 65 / @r; top: 50%;
transform: translate(-50%, 0); transform: translate(-50%, -50%);
.title { .title {
background: url("../assets/images/02/title.png") no-repeat center center; background: url("../assets/images/02/title.png") no-repeat center center;
...@@ -175,6 +147,31 @@ export default { ...@@ -175,6 +147,31 @@ export default {
} }
} }
} }
.content1 {
overflow: visible;
.content2 {
width: 628 / @r;
height: 750 / @r;
background: url("../assets/images/02/qianbi.png") no-repeat center
center;
background-size: contain;
position: relative;
margin: 0 auto;
}
.bi {
width: 211 / @r;
height: 322 / @r;
background: url("../assets/images/02/bi.png") no-repeat;
background-size: contain;
position: absolute;
bottom: -100 / @r;
right: 1 / @r;
z-index: 1;
}
}
} }
} }
......
src/views/yjml.vue
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
</ul> </ul>
<div class="button01 animated tada"> <div class="button01 animated tada">
<div class="num-box animated bounceInUp"> <div class="num-box animated bounceInUp">
<span>阅读人数</span>：1898256 <span>阅读人数</span>：{{$store.state.yudushu}}
</div> </div>
</div> </div>
<!-- <div class="yijian animated bounceInRight"></div> --> <!-- <div class="yijian animated bounceInRight"></div> -->
...@@ -134,6 +134,7 @@ export default { ...@@ -134,6 +134,7 @@ export default {
white-space: nowrap; white-space: nowrap;
font-size: 30 / @r; font-size: 30 / @r;
margin-left: -130 / @r; margin-left: -130 / @r;
text-align: center;
span { span {
font-weight: bolder; font-weight: bolder;
......
yarn.lock
...@@ -7890,6 +7890,11 @@ vary@~1.1.2: ...@@ -7890,6 +7890,11 @@ vary@~1.1.2:
resolved "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc" resolved "https://registry.npm.taobao.org/vary/download/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw= integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
vconsole@^3.3.2:
version "3.3.2"
resolved "https://registry.npm.taobao.org/vconsole/download/vconsole-3.3.2.tgz#07424f8de2e5e2586c504042093948435ed2de06"
integrity sha1-B0JPjeLl4lhsUEBCCTlIQ17S3gY=
vendors@^1.0.0: vendors@^1.0.0:
version "1.0.3" version "1.0.3"
resolved "https://registry.npm.taobao.org/vendors/download/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0" resolved "https://registry.npm.taobao.org/vendors/download/vendors-1.0.3.tgz#a6467781abd366217c050f8202e7e50cc9eef8c0"
......
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