Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 41155971 by mamingqun
Options

cb

parent 7235f62e
Showing with 425 additions and 57 deletions
src/App.vue
......@@ -20,6 +20,7 @@ export default {
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
......@@ -44,6 +45,7 @@ body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden !important;
}
* {
......
src/assets/images/02/bg01.png
src/assets/images/02/bg01.png

305 KB | W: | H:

src/assets/images/02/bg01.png

503 KB | W: | H:

src/assets/images/02/bg01.png
src/assets/images/02/bg01.png
src/assets/images/02/bg01.png
src/assets/images/02/bg01.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/02/t01.png
src/assets/images/02/t01.png

28.1 KB | W: | H:

src/assets/images/02/t01.png

29.2 KB | W: | H:

src/assets/images/02/t01.png
src/assets/images/02/t01.png
src/assets/images/02/t01.png
src/assets/images/02/t01.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/02/t02.png
src/assets/images/02/t02.png

30.8 KB | W: | H:

src/assets/images/02/t02.png

31.3 KB | W: | H:

src/assets/images/02/t02.png
src/assets/images/02/t02.png
src/assets/images/02/t02.png
src/assets/images/02/t02.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/02/t03.png
src/assets/images/02/t03.png

32 KB | W: | H:

src/assets/images/02/t03.png

31.7 KB | W: | H:

src/assets/images/02/t03.png
src/assets/images/02/t03.png
src/assets/images/02/t03.png
src/assets/images/02/t03.png
  • 2-up
  • Swipe
  • Onion skin
src/main.js
......@@ -14,3 +14,4 @@ new Vue({
store,
render: h => h(App)
}).$mount('#app')
src/views/Home.vue
<template>
<div class="wrap">
<div class="book preserve-3d">
<!-- 书的最后一页 -->
<div class="book-page-box book-page-4 preserve-3d">
<!-- <div class="book preserve-3d">
<transition name="fanye1">
<div
v-if="xiangqing"
class="book-page-box book-page-4 preserve-3d"
@click="handleXiangqing"
>
<div class="book-page page-front">
<p>第三页</p>
<xiangqing />
</div>
</div>
<!-- 书的第三页 -->
<div class="book-page-box book-page-3 preserve-3d flip-animation">
</transition>
<transition name="fanye1">
<div v-if="erjiye" class="book-page-box book-page-4 preserve-3d" @click="handleErjiye">
<div class="book-page page-front">
<erjiye />
</div>
</div>
</transition>
<transition name="fanye1">
<div v-if="yjml" class="book-page-box book-page-3 preserve-3d" @click="handleYjml">
<div class="book-page page-front">
<yjml />
</div>
</div>
<!-- 书的第二页 -->
<div class="book-page-box book-page-2 preserve-3d flip-animation" @click="test01">
</transition>
<transition name="fanye1">
<div v-if="xu" class="book-page-box book-page-2 preserve-3d" @click="handleXu">
<div class="book-page page-front">
<xu />
</div>
</div>
<!-- 书的封面 -->
</transition>
<transition name="fanye1">
<div
v-if="page1"
class="book-page-box book-page-1 preserve-3d flip-animation"
@click="test01"
>
<div v-if="shouye" class="book-page-box book-page-1 preserve-3d" @click="handleShouye">
<div class="book-page page-front">
<shouye />
</div>
</div>
</transition>
</div>
</div> -->
<!-- <shouye /> -->
<!-- <xu /> -->
<!-- <yjml /> -->
<!-- <shouye/> -->
<!-- <xu/> -->
<!-- <yjml/> -->
<!-- <erjiye/> -->
<xiangqing/>
</div>
</template>
......@@ -43,26 +54,57 @@
import shouye from './shouye';
import xu from './xu';
import yjml from './yjml';
import erjiye from './erjiye';
import xiangqing from './xiangqing';
export default {
name: 'home',
data() {
return {
page1: true
shouye: true,
xu: true,
yjml: true,
erjiye: true,
xiangqing: true
}
},
created() {
window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
},
mounted() {
console.log(123);
},
methods: {
test01() {
this.page1 = !this.page1
handleShouye() {
this.shouye = !this.shouye
},
handleXu() {
this.xu = !this.xu
},
handleYjml() {
this.yjml = !this.yjml
},
handleErjiye() {
this.erjiye = !this.erjiye
},
handleXiangqing() {
// this.xiangqing = !this.xiangqing
},
beforeunloadFn(e) {
console.log('刷新或关闭')
// ...
}
},
destroyed() {
console.log('销毁了组件');
window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
},
components: {
shouye,
xu,
yjml
yjml,
erjiye,
xiangqing
}
}
</script>
......@@ -233,13 +275,5 @@ body {
.flip-animation-3 {
animation: flipBook3 10s 3s;
}
/*书的第四页*/
.book-page-4 .page-front p {
// font-size: 30 / @r;
// color: #1976d2;
// margin-top: 100 / @r;
}
</style
</style>
src/views/erjiye.vue 0 → 100644
<template>
<div class="erjiye">
<div class="content">
<div class="title"></div>
<div class="content-box">
<ul>
<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>
</ul>
<ul>
<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>
</ul>
<ul>
<li class="main-title">三、线上线下招采服务指南</li>
</ul>
</div>
</div>
<div class="bottom11"></div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
@r: 75rem;
.erjiye {
height: 100%;
background: url("../assets/images/erjiye/bg.png") no-repeat bottom center;
background-size: 100% auto;
.content {
// border: 1px solid white;
width: 600 / @r;
height: 980 / @r;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
.title {
height: 116 / @r;
background: url("../assets/images/erjiye/title.png") no-repeat center
center;
background-size: contain;
}
.content-box {
flex: 1;
// background: red;
overflow: auto;
.main-title {
height: 98 / @r;
}
li {
height: 98 / @r;
line-height: 98 / @r;
font-size: 40 / @r;
}
.main-title {
color: #f7f5f1;
margin-bottom: 40 / @r;
padding-left: 40 / @r;
}
.sub-title {
background: url("../assets/images/erjiye/sub.png") no-repeat center;
background-size: contain;
color: #004db6;
margin-bottom: 20 / @r;
padding-left: 80 / @r;
}
}
}
.bottom11 {
position: absolute;
bottom: 0;
width: 100%;
height: 250 / @r;
background: url("../assets/images/erjiye/bottom.png") no-repeat bottom
center;
background-size: 100% auto;
}
}
</style>
src/views/shouye.vue
<template>
<div class="home">
<!-- <div class="bottom-box"></div> -->
<div class="animated jackInTheBox main-title">
<div class="stars"></div>
</div>
......@@ -70,7 +69,7 @@ export default {
background-size: contain;
.stars {
width: 100%;
width: 80%;
height: 100%;
background: url("../assets/images/01/star01.png") no-repeat center center;
background-size: contain;
......
src/views/xiangqing.vue 0 → 100644
<template>
<div class="xiangqing">
<div class="laozhao" @click="showMulu"></div>
<div class="mulu">
<div class="title">万达招采</div>
<div class="content">
<ul>
<li class="main-title">封面</li>
<li class="main-title">序</li>
<li class="main-title">一、集团招采管理制度要点</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>什么情况下可废标</li>
<li>什么情况下可清标</li>
<li>标函分析主要分析哪些内容</li>
<li>多标段中标人为同一家，如何处理</li>
<li>有品牌库的项目，可否单项库招标</li>
<li>直接委托操作要求和定价原则</li>
<li>什么情况下需要签订合同</li>
<li>可采用直委方式的项目有哪些</li>
<li>定标详评会的标准流程</li>
<li class="main-title">三、线上线下招采服务指南</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
mulu: false
}
},
methods: {
showMulu() {
this.mulu = !this.mulu
}
}
}
</script>
<style lang="less" scoped>
@r: 75rem;
.xiangqing {
height: 100%;
background: url("../assets/images/xiangqing/bg.png") no-repeat top center;
background-size: 100% auto;
padding-top: 500 / @r;
.laozhao {
width: 142 / @r;
height: 210 / @r;
background: url("../assets/images/xiangqing/laozhao.png") no-repeat center
center;
background-size: contain;
position: absolute;
right: 0;
top: 27%;
}
.mulu {
width: 600 / @r;
height: 900 / @r;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: rgba(74, 124, 185, 0.5);
border-radius: 5 / @r;
color: white;
font-size: 40 / @r;
display: flex;
flex-direction: column;
padding-bottom: 20 / @r;
.title {
text-align: center;
margin-top: 20 / @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;
}
}
}
}
</style>
src/views/xu.vue
......@@ -3,14 +3,41 @@
<div class="main-box">
<div class="title"></div>
<div class="content">
<div 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>
<p>对内部：改进现有招采管理体系。采购权上收（重要、通用）、选择权下放（菜单、个性）；集中采购、集中支付（材料设备）；打通支付数据，保障供方回款；向合作项目提供采购服务，进行电商化运营，打造资源集聚、供需匹配、质优价廉、阳光高效的供应链体系，保障集团项目开发、运营的需求。</p>
<p>对外部：提升供应链管理能力，依托集团品牌影响力，凭借多年积累的供方资源、价格数据、采购信誉，联合知名电商、同行企业，利用互联网先进技术，引入供应链金融，整合产业链上下游资源，以平台投资企业自身采购需求为强驱动支点，必将打造全球领先的工程领域供应链服务平台。让买方放心，卖方安心、以采促产、服务实业，促进产业链共享、共赢，协同发展。</p>
</li>
<li>
<div class="content-title">对内部：</div>
<p>改进现有招采管理体系。采购权上收（重要、通用）、选择权下放（菜单、个性）；集中采购、集中支付（材料设备）；打通支付数据，保障供方回款；向合作项目提供采购服务，进行电商化运营，打造资源集聚、供需匹配、质优价廉、阳光高效的供应链体系，保障集团项目开发、运营的需求。</p>
</li>
<li>
<div class="content-title">对外部：</div>
<p>提升供应链管理能力，依托集团品牌影响力，凭借多年积累的供方资源、价格数据、采购信誉，联合知名电商、同行企业，利用互联网先进技术，引入供应链金融，整合产业链上下游资源，以平台投资企业自身采购需求为强驱动支点，必将打造全球领先的工程领域供应链服务平台。让买方放心，卖方安心、以采促产、服务实业，促进产业链共享、共赢，协同发展。</p>
<p>招采平台将逐步实现以上工作目标，将为集团更好的提供招采服务，同时造福整个行业，成为国内行业领先的企业招采平台。</p>
</div>
</li>
</ul>
</div>
</div>
</div>
......@@ -29,9 +56,38 @@ export default {
<style lang="less" scoped>
@r: 75rem;
.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;
background: url("../assets/images/02/bg01.png") no-repeat bottom center;
background-size: 100% auto;
.main-box {
......@@ -51,23 +107,38 @@ export default {
.content {
background: url("../assets/images/02/bg.png") no-repeat center center;
background-size: 100% auto;
height: 800 / @r;
padding-left: 20 / @r;
padding-right: 20 / @r;
height: 850 / @r;
padding-left: 30 / @r;
padding-right: 30 / @r;
padding-top: 70 / @r;
.content-box {
height: 710 / @r;
overflow: auto;
.content-title {
font-size: 38 / @r;
text-align: center;
font-weight: 600;
color: #fdff00;
margin-bottom: 40 / @r;
}
p {
padding: 0;
margin: 0;
color: #ffff00;
color: white;
text-indent: 2em;
text-justify: auto;
font-size: 35 / @r;
line-height: 60 / @r;
text-align: justify;
font-size: 28 / @r;
line-height: 40 / @r;
}
li {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 40 / @r;
}
}
}
......
src/views/yjml.vue
<template>
<div class="yjml">
<!-- <div class="bottom-box"></div> -->
<div class="cuizi"></div>
<div class="cheng"></div>
<div class="animated jackInTheBox main-title">
<div class="stars"></div>
</div>
......@@ -8,14 +9,16 @@
<li class="list-item1"></li>
<li class="list-item2"></li>
<li class="list-item3"></li>
<li class="list-item4"></li>
<li class="list-item5"></li>
</ul>
<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>
</template>
......@@ -65,7 +68,7 @@ export default {
background-size: contain;
.stars {
width: 100%;
width: 80%;
height: 100%;
background: url("../assets/images/01/star01.png") no-repeat center center;
background-size: contain;
......@@ -102,7 +105,7 @@ export default {
.list {
position: absolute;
left: 50%;
top: 28%;
top: 42%;
width: 506 / @r;
margin-left: -253 / @r;
......@@ -110,7 +113,7 @@ export default {
width: 100%;
height: 90 / @r;
// border: 1px solid white;
margin-bottom: 15 /@r;
margin-bottom: 45 / @r;
}
.list-item1 {
......@@ -127,16 +130,36 @@ export default {
background: url("../assets/images/02/t03.png") no-repeat center center;
background-size: contain;
}
}
.list-item4 {
background: url("../assets/images/02/t04.png") no-repeat center center;
.cuizi {
width: 402 / @r;
height: 328 / @r;
background: url("../assets/images/01/chuizi.png") no-repeat center center;
background-size: contain;
}
position: absolute;
left: 0%;
bottom: 1%;
}
.list-item5 {
background: url("../assets/images/02/t05.png") no-repeat center center;
.cheng {
width: 370 / @r;
height: 433 / @r;
background: url("../assets/images/01/cheng.png") no-repeat center center;
background-size: contain;
}
position: absolute;
right: -2%;
bottom: -5%;
}
.yijian {
width: 140 / @r;
height: 60 / @r;
background: url("../assets/images/02/yijian.png") no-repeat center center;
background-size: contain;
position: absolute;
right: 0%;
top: 3%;
}
.bottom-box {
......@@ -147,5 +170,26 @@ export default {
position: absolute;
bottom: -150 / @r;
}
.tanceng {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
.kuang {
width: 600 / @r;
height: 700 / @r;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: greenyellow;
background: url('../assets/images/02/tanceng.png') no-repeat center center;
background-size: contain;
}
}
</style>
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