Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 98b40e69 by mamingqun
Options

cb

parent 7f5b259b
Showing with 122 additions and 65 deletions
public/index.html
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>万达招采</title> <title>万达招采</title>
<script src="./extras/jquery.min.js"></script>
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/assets/images/02/01tc.png
src/assets/images/02/01tc.png

165 KB | W: | H:

src/assets/images/02/01tc.png

84.6 KB | W: | H:

src/assets/images/02/01tc.png
src/assets/images/02/01tc.png
src/assets/images/02/01tc.png
src/assets/images/02/01tc.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/02/02tc.png
src/assets/images/02/02tc.png

130 KB | W: | H:

src/assets/images/02/02tc.png

80.2 KB | W: | H:

src/assets/images/02/02tc.png
src/assets/images/02/02tc.png
src/assets/images/02/02tc.png
src/assets/images/02/02tc.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/images/02/03tc.png
src/assets/images/02/03tc.png

134 KB | W: | H:

src/assets/images/02/03tc.png

115 KB | W: | H:

src/assets/images/02/03tc.png
src/assets/images/02/03tc.png
src/assets/images/02/03tc.png
src/assets/images/02/03tc.png
  • 2-up
  • Swipe
  • Onion skin
src/components/music.vue
...@@ -8,13 +8,20 @@ ...@@ -8,13 +8,20 @@
</template> </template>
<script> <script>
import music1 from '@/assets/mp3/music.mp3';
import start1 from '@/assets/mp3/start.png';
import pause1 from '@/assets/mp3/pause.png';
export default { export default {
data() { data() {
return { return {
map3Src: require('../assets/mp3/music.mp3'),
isPlaying: true, isPlaying: true,
imgStart: require('../assets/images/01/start.png'), // map3Src: require('@/assets/mp3/music.mp3'),
imgEnd: require('../assets/images/01/pause.png') // imgStart: require('@/assets/images/01/start.png'),
// imgEnd: require('@/assets/images/01/pause.png'),
map3Src: music1,
imgStart: start1,
imgEnd: pause1
} }
}, },
mounted() { mounted() {
...@@ -97,13 +104,13 @@ export default { ...@@ -97,13 +104,13 @@ export default {
.music-box { .music-box {
position: absolute; position: absolute;
top: 5%; top: 3%;
left: 5%; left: 3%;
z-index: 100000; z-index: 100000;
.music { .music {
width: 90 / @r; width: 70 / @r;
height: 90 / @r; height: 70 / @r;
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
...@@ -111,12 +118,12 @@ export default { ...@@ -111,12 +118,12 @@ export default {
} }
.start { .start {
background: url("../assets/images/01/start.png") no-repeat; // background: url("../assets/images/01/start.png") no-repeat;
background-size: contain; background-size: contain;
} }
.pause { .pause {
background: url("../assets/images/01/pause.png") no-repeat; // background: url("../assets/images/01/pause.png") no-repeat;
background-size: contain; background-size: contain;
} }
} }
......
src/views/erjiye.vue
...@@ -27,7 +27,10 @@ ...@@ -27,7 +27,10 @@
</div> </div>
</div> </div>
<div class="bottom11"> <div class="bottom11">
<div class="laozhaos"></div> <div class="laozhaos">
<div class="yinying"></div>
</div>
<div class="text"></div>
</div> </div>
<div class="search-button" @click="openSearch"></div> <div class="search-button" @click="openSearch"></div>
<div class="search-box" v-show="searchButton"> <div class="search-box" v-show="searchButton">
...@@ -82,7 +85,7 @@ export default { ...@@ -82,7 +85,7 @@ export default {
handleDetail(id, title, item) { handleDetail(id, title, item) {
if (item.module === 2) { if (item.module === 2) {
$eventbus.$emit('jumpPage', {pageName:'xiangqing',id:id}) $eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
setTimeout(() => { setTimeout(() => {
$eventbus.$emit('detailData', { id, title }) $eventbus.$emit('detailData', { id, title })
}); });
...@@ -103,7 +106,7 @@ export default { ...@@ -103,7 +106,7 @@ export default {
} }
} }
}, },
resetSearch(){ resetSearch() {
this.filterList = [] this.filterList = []
this.keyWord = '' this.keyWord = ''
}, },
...@@ -148,7 +151,7 @@ export default { ...@@ -148,7 +151,7 @@ export default {
return ele.catname.includes(newVal) return ele.catname.includes(newVal)
}) })
console.log('arr'); console.log('arr');
console.log( arr ); console.log(arr);
this.filterList = arr this.filterList = arr
} }
...@@ -240,13 +243,15 @@ p:nth-child(1) { ...@@ -240,13 +243,15 @@ p:nth-child(1) {
.content { .content {
// border: 1px solid white; // border: 1px solid white;
width: 600 / @r; width: 600 / @r;
height: 980 / @r; height: 825 / @r;
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-sizing: content-box;
// padding-bottom: 250 / @r;
.title { .title {
height: 116 / @r; height: 116 / @r;
...@@ -307,15 +312,39 @@ p:nth-child(1) { ...@@ -307,15 +312,39 @@ p:nth-child(1) {
background-size: 100% auto; background-size: 100% auto;
.laozhaos { .laozhaos {
width: 500 / @r; width: 150 / @r;
height: 300 / @r; height: 230 / @r;
background: url("../assets/images/erjiye/laozhaos.png") no-repeat top // background: url("../assets/images/erjiye/laozhaos.png") no-repeat top center;
background: url("../assets/images/erjiye/laozhaogif.gif") no-repeat top
right;
background-size: contain;
position: absolute;
left: 65%;
bottom: 30 / @r;
// transform: translate(-50%, 0);
}
.yinying {
width: 161 / @r;
height: 38 / @r;
background: url("../assets/images/erjiye/yinying.png") no-repeat top right;
background-size: contain;
position: absolute;
left: 60%;
transform: translate(-50%,0);
bottom: -20 / @r;
}
.text {
width: 360 / @r;
height: 150 / @r;
background: url("../assets/images/erjiye/text.png") no-repeat center
center; center;
background-size: contain; background-size: contain;
position: absolute; position: absolute;
left: 50%; left: 50%;
bottom: 30 / @r; bottom: 10 / @r;
transform: translate(-50%, 0); transform: translate(-70%, 0);
} }
} }
} }
......
src/views/xiangqing.vue
<template> <template>
<!-- <div> --> <!-- <div> -->
<!-- <div class="laozhao" @click="showMulu"></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>
<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 :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">
...@@ -32,12 +36,7 @@ ...@@ -32,12 +36,7 @@
</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" :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> --> <!-- <button class="btn" data-clipboard-copy="copy123" data-clipboard-target="button">Copy123</button> -->
<!-- <div class="mainTitle">{{mianTitle}}</div> --> <!-- <div class="mainTitle">{{mianTitle}}</div> -->
...@@ -84,6 +83,7 @@ export default { ...@@ -84,6 +83,7 @@ export default {
methods: { methods: {
showMulu() { showMulu() {
this.mulu = !this.mulu this.mulu = !this.mulu
$('body').css('overflow','hidden')
}, },
handleClick() { handleClick() {
...@@ -93,7 +93,8 @@ export default { ...@@ -93,7 +93,8 @@ export default {
}, },
watchDetail() { watchDetail() {
$eventbus.$on('detailData', (params) => { $eventbus.$on('detailData', (params) => {
this.mianTitle = params.title console.log('详情1 变96');
this.zIndex = 96
}) })
}, },
getDetail(id) { getDetail(id) {
...@@ -102,11 +103,13 @@ export default { ...@@ -102,11 +103,13 @@ export default {
}) })
}, },
handleDetail(id, title, item) { handleDetail(id, title, item) {
console.log('id,title详情1目录的点击')
console.log(id, title)
if (item.module === 2) { if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing1', id: id }) $eventbus.$emit('jumpPage', { pageName: 'xiangqing1', id: id })
setTimeout(() => { setTimeout(() => {
this.zIndex = 95
$eventbus.$emit('detailData', { id, title }) $eventbus.$emit('detailData', { id, title })
}); });
} else { } else {
...@@ -128,6 +131,7 @@ export default { ...@@ -128,6 +131,7 @@ export default {
}, },
closeMulu() { closeMulu() {
this.mulu = false; this.mulu = false;
$('body').css('overflow','auto')
}, },
goFengMian() { goFengMian() {
$eventbus.$emit('jumpPage', { pageName: 'shouye' }) $eventbus.$emit('jumpPage', { pageName: 'shouye' })
...@@ -143,13 +147,14 @@ export default { ...@@ -143,13 +147,14 @@ export default {
@r: 75rem; @r: 75rem;
.mulu-wrap { .mulu-wrap {
width: 100%;
height: 100%;
position: fixed; position: fixed;
top: 0; top: 50%;
left: 0; left: 50%;
right: 0;
bottom: 0;
z-index: 502; z-index: 502;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
transform: translate(-50%,-50%);
.mulu { .mulu {
width: 600 / @r; width: 600 / @r;
......
src/views/xiangqing1.vue
<template> <template>
<!-- <div> --> <!-- <div> -->
<!-- <div class="laozhao" @click="showMulu"></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>
<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 :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">
...@@ -32,12 +37,7 @@ ...@@ -32,12 +37,7 @@
</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" :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> --> <!-- <button class="btn" data-clipboard-copy="copy123" data-clipboard-target="button">Copy123</button> -->
<!-- <div class="mainTitle">{{mianTitle}}</div> --> <!-- <div class="mainTitle">{{mianTitle}}</div> -->
...@@ -84,16 +84,20 @@ export default { ...@@ -84,16 +84,20 @@ export default {
methods: { methods: {
showMulu() { showMulu() {
this.mulu = !this.mulu this.mulu = !this.mulu
if (this.mulu) {
$('body').css('overflow','hidden')
}
}, },
handleClick() { handleClick() {
}, },
handleJump() { handleJump() {
console.log(123123)
}, },
watchDetail() { watchDetail() {
$eventbus.$on('detailData', (params) => { $eventbus.$on('detailData', (params) => {
this.mianTitle = params.title console.log('详情2 变96');
this.zIndex = 96
}) })
}, },
getDetail(id) { getDetail(id) {
...@@ -102,11 +106,13 @@ export default { ...@@ -102,11 +106,13 @@ export default {
}) })
}, },
handleDetail(id, title, item) { handleDetail(id, title, item) {
console.log('id,title详情1目录的点击')
console.log(id, title)
if (item.module === 2) { if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id }) $eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
setTimeout(() => { setTimeout(() => {
this.zIndex = 95
$eventbus.$emit('detailData', { id, title }) $eventbus.$emit('detailData', { id, title })
}); });
} else { } else {
...@@ -128,6 +134,7 @@ export default { ...@@ -128,6 +134,7 @@ export default {
}, },
closeMulu() { closeMulu() {
this.mulu = false; this.mulu = false;
$('body').css('overflow','auto')
}, },
goFengMian() { goFengMian() {
$eventbus.$emit('jumpPage', { pageName: 'shouye' }) $eventbus.$emit('jumpPage', { pageName: 'shouye' })
...@@ -143,13 +150,14 @@ export default { ...@@ -143,13 +150,14 @@ export default {
@r: 75rem; @r: 75rem;
.mulu-wrap { .mulu-wrap {
width: 100%;
height: 100%;
position: fixed; position: fixed;
top: 0; top: 50%;
left: 0; left: 50%;
right: 0;
bottom: 0;
z-index: 502; z-index: 502;
background: rgba(0, 0, 0, 0.7); background: rgba(0, 0, 0, 0.7);
transform: translate(-50%,-50%);
.mulu { .mulu {
width: 600 / @r; width: 600 / @r;
......
src/views/yjml.vue
...@@ -16,7 +16,8 @@ ...@@ -16,7 +16,8 @@
</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>：{{$store.state.yudushu}} <span>阅读人数</span>
：{{$store.state.yudushu}}
</div> </div>
</div> </div>
<!-- <div class="yijian animated bounceInRight"></div> --> <!-- <div class="yijian animated bounceInRight"></div> -->
...@@ -24,14 +25,17 @@ ...@@ -24,14 +25,17 @@
<div class="kuang kuang1" v-if="tancengIndex === 1"> <div class="kuang kuang1" v-if="tancengIndex === 1">
<div class="close" @click="handleCloseTanCeng"></div> <div class="close" @click="handleCloseTanCeng"></div>
<div class="buttons" @click="handleJump"></div> <div class="buttons" @click="handleJump"></div>
<div class="laozhaos"></div>
</div> </div>
<div class="kuang kuang2" v-if="tancengIndex === 2"> <div class="kuang kuang2" v-if="tancengIndex === 2">
<div class="close" @click="handleCloseTanCeng"></div> <div class="close" @click="handleCloseTanCeng"></div>
<div class="buttons" @click="handleJump"></div> <div class="buttons" @click="handleJump"></div>
<div class="laozhaos"></div>
</div> </div>
<div class="kuang kuang3" v-if="tancengIndex === 3"> <div class="kuang kuang3" v-if="tancengIndex === 3">
<div class="close" @click="handleCloseTanCeng"></div> <div class="close" @click="handleCloseTanCeng"></div>
<div class="buttons" @click="handleJump"></div> <div class="buttons" @click="handleJump"></div>
<div class="laozhaos"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -48,7 +52,7 @@ export default { ...@@ -48,7 +52,7 @@ export default {
tancengIndex: null tancengIndex: null
} }
}, },
activated(){ activated() {
this.tanceng = false this.tanceng = false
}, },
created() { created() {
...@@ -64,7 +68,7 @@ export default { ...@@ -64,7 +68,7 @@ export default {
}, },
handleJump() { handleJump() {
$eventbus.$emit('jumpPage', {pageName:'erjiye'}) $eventbus.$emit('jumpPage', { pageName: 'erjiye' })
setTimeout(() => { setTimeout(() => {
$eventbus.$emit('maodian', this.tancengIndex) $eventbus.$emit('maodian', this.tancengIndex)
}); });
...@@ -94,6 +98,16 @@ export default { ...@@ -94,6 +98,16 @@ export default {
overflow: hidden; overflow: hidden;
} }
.laozhaos {
width: 150 / @r;
height: 240 / @r;
background: url("../assets/images/erjiye/laozhaogif.gif") no-repeat top right;
background-size: contain;
position: absolute;
left: 65%;
bottom: 140 / @r;
}
.main-title { .main-title {
width: 480 / @r; width: 480 / @r;
height: 400 / @r; height: 400 / @r;
......
vue.config.js
// import webpack from 'webpack' // import webpack from 'webpack'
// module.exports = { module.exports = {
// configureWebpack: { publicPath: "../dist/"
// plugins: [new webpack.ProvidePlugin({ }
// jQuery: "jquery", \ No newline at end of file
// $: "jquery"
// })]
// }
// }
\ No newline at end of file
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