Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 2ac77661 by mamingqun
Options

bc

parent 5e16efac
Showing with 80 additions and 367 deletions
src/App.vue
...@@ -71,7 +71,7 @@ export default { ...@@ -71,7 +71,7 @@ export default {
// desc: '@'+ this.pictureInfo.nickname +', ' + _this.pictureInfo.desc, // 分享描述 // desc: '@'+ this.pictureInfo.nickname +', ' + _this.pictureInfo.desc, // 分享描述
// desc: _this.pictureInfo.desc, // 分享描述 // desc: _this.pictureInfo.desc, // 分享描述
desc: '万达招采h5', // 分享描述 desc: '万达招采h5', // 分享描述
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://mr-static.maxrocky.com/zhaocaih5/dist/extra/share.jpg' // 分享图标 imgUrl: 'http://mr-static.maxrocky.com/zhaocaih5/dist/extra/share.jpg' // 分享图标
}, },
function (res) { function (res) {
...@@ -84,7 +84,7 @@ export default { ...@@ -84,7 +84,7 @@ export default {
wx.onMenuShareTimeline( wx.onMenuShareTimeline(
{ {
title: '万达招采', // 分享标题 title: '万达招采', // 分享标题
link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 link: location.href.split('#')[0], // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: 'http://mr-static.maxrocky.com/zhaocaih5/dist/extra/share.jpg' // 分享图标 imgUrl: 'http://mr-static.maxrocky.com/zhaocaih5/dist/extra/share.jpg' // 分享图标
}, },
function (res) { function (res) {
...@@ -120,6 +120,7 @@ li { ...@@ -120,6 +120,7 @@ li {
} }
#app { #app {
width: 100%;
height: 100%; height: 100%;
} }
#nav { #nav {
...@@ -138,6 +139,7 @@ body { ...@@ -138,6 +139,7 @@ body {
padding: 0; padding: 0;
margin: 0; margin: 0;
height: 100%; height: 100%;
// background: #8052d6;
// overflow: hidden !important; // overflow: hidden !important;
// overflow: hidden; // overflow: hidden;
} }
......
src/views/Home.vue
...@@ -167,6 +167,8 @@ export default { ...@@ -167,6 +167,8 @@ export default {
.wrap { .wrap {
height: 100%; height: 100%;
width: 100%;
overflow: hidden;
} }
body, body,
......
src/views/erjiye.vue
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
<div class="close" @click="openSearch"></div> <div class="close" @click="openSearch"></div>
</div> </div>
</div> </div>
<div :class="['up-down', 'up-img' ]"></div> <div :class="['up-down', 'up-img']"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -70,7 +70,8 @@ export default { ...@@ -70,7 +70,8 @@ export default {
searchList: [], searchList: [],
filterList: [], filterList: [],
upAndDown: 'up-img', upAndDown: 'up-img',
lastOpen: null lastOpen: null,
aniLock: true
} }
}, },
activated() { activated() {
...@@ -101,35 +102,49 @@ export default { ...@@ -101,35 +102,49 @@ export default {
// $eventbus.$emit('jumpPage', 'xiangqing') // $eventbus.$emit('jumpPage', 'xiangqing')
}, },
handleDetail(id, title, item) { handleDetail(id, title, item) {
if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id }) if (this.aniLock) {
this.searchButton = false; this.aniLock = false
setTimeout(() => { setTimeout(() => {
$eventbus.$emit('detailData', { id, title }) this.aniLock = true
}); }, 300);
} else {
if (item.module === 2) {
var num = $('#' + item.catname).data('category') $eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
this.searchButton = false;
if (num === 0) { setTimeout(() => {
$('.' + item.catname).animate({ $eventbus.$emit('detailData', { id, title })
display: 'block',
height: 'toggle'
}); });
$('#' + item.catname).data('category', 1)
$('#' + item.catname + ' .xiala').addClass('up')
} else { } else {
$('.' + item.catname).animate({ setTimeout(() => {
display: 'none', this.lastOpen = item.catname
height: 'toggle'
}); });
$('#' + item.catname).data('category', 0) var num = $('#' + item.catname).data('category')
$('#' + item.catname + ' .xiala').removeClass('up') if (num === 0) {
setTimeout(() => {
$('.' + item.catname).animate({
display: 'block',
height: 'toggle'
})
$('#' + item.catname).data('category', 1)
$('#' + item.catname + ' .xiala').addClass('up')
});
} else {
setTimeout(() => {
$('.' + item.catname).animate({
display: 'none',
height: 'toggle'
}, () => {
// this.aniLock = true
});
$('#' + item.catname).data('category', 0)
$('#' + item.catname + ' .xiala').removeClass('up')
});
}
} }
this.lastOpen = item.catname
} }
}, },
resetSearch() { resetSearch() {
this.filterList = [] this.filterList = []
...@@ -196,13 +211,15 @@ export default { ...@@ -196,13 +211,15 @@ export default {
} }
}, },
lastOpen(newVal, oldVal) { lastOpen(newVal, oldVal) {
if (newVal !== oldVal &&newVal&&oldVal) { if (newVal !== oldVal&&oldVal) {
$('.' + oldVal).animate({ setTimeout(() => {
display: 'none', $('.' + oldVal).animate({
height: 'toggle' display: 'none',
height: 'hide'
});
$('#' + oldVal).data('category', 0)
$('#' + oldVal + ' .xiala').removeClass('up')
}); });
$('#' + oldVal).data('category', 0)
$('#' + oldVal + ' .xiala').removeClass('up')
} }
} }
}, },
...@@ -220,8 +237,8 @@ export default { ...@@ -220,8 +237,8 @@ export default {
width: 80 / @r; width: 80 / @r;
height: 80 / @r; height: 80 / @r;
position: absolute; position: absolute;
left: 5%; left: 1%;
bottom: 5%; top: 50%;
// background: red; // background: red;
} }
...@@ -268,6 +285,7 @@ export default { ...@@ -268,6 +285,7 @@ export default {
right: 0; right: 0;
bottom: 0; bottom: 0;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
z-index: 100000000;
.main-contain { .main-contain {
position: absolute; position: absolute;
...@@ -286,14 +304,15 @@ export default { ...@@ -286,14 +304,15 @@ export default {
overflow: auto; overflow: auto;
li { li {
height: 80 / @r; // height: 80 / @r;
line-height: 80 / @r; line-height: 60 / @r;
color: white; color: white;
font-size: 35 / @r; font-size: 35 / @r;
white-space: nowrap; // white-space: nowrap;
text-align: left; text-align: left;
padding-left: 40 / @r; padding-left: 40 / @r;
padding-right: 40 / @r; padding-right: 40 / @r;
margin-bottom: 30 / @r;
} }
} }
......
src/views/shouye.vue
...@@ -52,6 +52,7 @@ export default { ...@@ -52,6 +52,7 @@ export default {
.zindex { .zindex {
z-index: 1000; z-index: 1000;
width: 100%;
} }
#flipbook { #flipbook {
...@@ -66,6 +67,7 @@ export default { ...@@ -66,6 +67,7 @@ export default {
} }
.home { .home {
width: 100%;
height: 100%; height: 100%;
background: url("../assets/images/01/bg01.jpg") no-repeat center bottom; background: url("../assets/images/01/bg01.jpg") no-repeat center bottom;
background-size: 100% auto; background-size: 100% auto;
...@@ -123,12 +125,12 @@ export default { ...@@ -123,12 +125,12 @@ export default {
} }
.cheng { .cheng {
width: 370 / @r; width: 320 / @r;
height: 433 / @r; height: 433 / @r;
background: url("../assets/images/01/cheng.png") no-repeat center center; background: url("../assets/images/01/cheng.png") no-repeat left center;
background-size: contain; background-size: contain;
position: absolute; position: absolute;
right: -2%; right: 0;
bottom: 20%; bottom: 20%;
} }
......
src/views/xiangqing.vue
...@@ -434,6 +434,7 @@ p { ...@@ -434,6 +434,7 @@ p {
overflow: auto; overflow: auto;
font-size: 34 / @r; font-size: 34 / @r;
padding-left: 35 / @r; padding-left: 35 / @r;
padding-right: 35 / @r;
li { li {
margin-bottom: 30 / @r; margin-bottom: 30 / @r;
......
src/views/xu - 副本.vue deleted 100644 → 0
<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/yjml.vue
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<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">
<goBack class="animated pulse"/> <goBack class="animated pulse" />
<div class="cuizi"></div> <div class="cuizi"></div>
<div class="cheng"></div> <div class="cheng"></div>
<div class="animated jackInTheBox main-title"> <div class="animated jackInTheBox main-title">
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,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">
<div class="top-info">仅供万达内部使用</div>
<span>阅读人数</span> <span>阅读人数</span>
：{{$store.state.yudushu}} ：{{$store.state.yudushu}}
</div> </div>
...@@ -67,14 +68,13 @@ export default { ...@@ -67,14 +68,13 @@ export default {
handleJump1(index) { handleJump1(index) {
this.tanceng = true this.tanceng = true
this.tancengIndex = index this.tancengIndex = index
}, },
handleJump(id) { handleJump(id) {
if (id === 3) { if (id === 3) {
var arr = this.$store.state.list.find((ele) => { var arr = this.$store.state.list.find((ele) => {
return ele.catname === "线上线下招采服务指南" return ele.catname === "线上线下招采服务指南"
}) })
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: 18 }) $eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: 18 })
} else { } else {
$eventbus.$emit('jumpPage', { pageName: 'erjiye' }) $eventbus.$emit('jumpPage', { pageName: 'erjiye' })
...@@ -160,6 +160,10 @@ export default { ...@@ -160,6 +160,10 @@ export default {
margin-left: -130 / @r; margin-left: -130 / @r;
text-align: center; text-align: center;
.top-info {
margin-bottom: 20 / @r;
}
span { span {
font-weight: bolder; font-weight: bolder;
} }
...@@ -282,17 +286,20 @@ export default { ...@@ -282,17 +286,20 @@ export default {
} }
.kuang1 { .kuang1 {
background: url("../assets/images/02/01tc.png") no-repeat center center; // background: url("../assets/images/02/01tc.png") no-repeat center center;
background: url("../assets/images/02/04.png") no-repeat center center;
background-size: contain; background-size: contain;
} }
.kuang2 { .kuang2 {
background: url("../assets/images/02/02tc.png") no-repeat center center; // background: url("../assets/images/02/02tc.png") no-repeat center center;
background: url("../assets/images/02/04.png") no-repeat center center;
background-size: contain; background-size: contain;
} }
.kuang3 { .kuang3 {
background: url("../assets/images/02/03tc.png") no-repeat center center; // background: url("../assets/images/02/03tc.png") no-repeat center center;
background: url("../assets/images/02/04.png") no-repeat center center;
background-size: contain; background-size: contain;
} }
} }
......
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