Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 75c26156 by mamingqun
Options

cb

parent 8b7303c9
Showing with 162 additions and 448 deletions
package.json
......@@ -15,6 +15,7 @@
"jquery": "^3.4.1",
"turn.js": "^1.0.5",
"vue": "^2.6.10",
"vue-active-preview": "^1.0.2",
"vue-navigation": "^1.1.4",
"vue-router": "^3.0.3",
"vuex": "^3.0.1",
......
src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png

58 KB | W: | H:

src/assets/images/02/qianbi.png

208 KB | W: | H:

src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png
src/assets/images/02/qianbi.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/mp3/music.mp3
No preview for this file type
src/components/goBack.vue 0 → 100644
<template>
<div class="go-wrap" @click="goBack">
</div>
</template>
<script>
export default {
methods:{
goBack() {
if (this.$route.name === 'shouye') {
return
}
window.history.go(-1);
}
}
}
</script>
<style lang="less" scoped>
@r: 75rem;
.go-wrap {
position: absolute;
top: 3%;
left: 3%;
z-index: 100000;
width: 90 / @r;
height: 90 / @r;
background: url('../assets/images/erjiye/gouback.png') no-repeat;
background-size: contain;
animation-iteration-count: infinite;
}
</style>
src/components/music.vue
......@@ -105,7 +105,7 @@ export default {
.music-box {
position: absolute;
top: 3%;
left: 3%;
right: 3%;
z-index: 100000;
.music {
......
src/main.js
......@@ -16,6 +16,11 @@ axios.defaults.baseURL = 'http://wanda-h5-api.bdideal.com/api';
// import VConsole from 'vconsole';
// var vConsole = new VConsole();
import 'vue-active-preview/dist/VueActivePreview.css'
import VueActivePreview from 'vue-active-preview'
Vue.use(VueActivePreview)
Vue.use(Navigation, {router})
......
src/views/Home.vue
......@@ -48,7 +48,6 @@
<!-- <erjiye/> -->
<!-- <xiangqing /> -->
<music />
<transition :name="transitionName" mode="in-out">
<keep-alive>
<router-view />
......@@ -64,6 +63,7 @@ import yjml from './yjml';
import erjiye from './erjiye';
import xiangqing from './xiangqing';
import music from '../components/music';
import goBack from '../components/goBack';
export default {
name: 'home',
......@@ -150,14 +150,14 @@ export default {
})
}
},
components: {
shouye,
xu,
yjml,
erjiye,
xiangqing,
music
music,
goBack
}
}
</script>
......
src/views/erjiye.vue
......@@ -2,8 +2,11 @@
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="erjiye">
<goBack class="animated pulse"/>
<div class="content">
<div class="title"></div>
<div class="title">
<div class="search-button" @click="openSearch"></div>
</div>
<div id="content-box" class="content-box" ref="content">
<ul :id="index + 1" v-for="(item, index) in $store.state.list" :key="index">
<li class="main-title">{{item.catname}}</li>
......@@ -36,14 +39,11 @@
</div>
<div class="text"></div>
</div>
<div class="search-button" @click="openSearch"></div>
<div class="search-box" v-show="searchButton">
<div class="main-contain">
<input type="text" ref="inputVal" v-model="keyWord" placeholder="请输入关键字" />
<ul class="jieguo" v-if="!searchList.length&&keyWord">
没有匹配到结果
</ul>
<ul class="list" v-if="searchList.length">
<input type="text" ref="inputVal" v-model.trim="keyWord" placeholder="请输入关键字" />
<ul class="jieguo" v-if="!filterList.length&&keyWord">没有匹配到结果</ul>
<ul class="list" v-if="filterList.length">
<li
v-for="(item, index) in filterList"
:key="index"
......@@ -59,6 +59,8 @@
</template>
<script>
import goBack from '../components/goBack';
export default {
data() {
return {
......@@ -74,8 +76,9 @@ export default {
},
mounted() {
this.watchMaodian()
this.setSearchList(this.$store.state.list)
setTimeout(() => {
this.setSearchList(this.$store.state.list)
}, 2000);
},
methods: {
watchMaodian() {
......@@ -90,7 +93,6 @@ export default {
// $eventbus.$emit('jumpPage', 'xiangqing')
},
handleDetail(id, title, item) {
if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
this.searchButton = false;
......@@ -167,6 +169,9 @@ export default {
this.filterList = arr
}
}
},
components:{
goBack
}
}
</script>
......@@ -174,7 +179,7 @@ export default {
<style lang="less" scoped>
@r: 75rem;
.jieguo{
.jieguo {
color: white;
font-size: 35 / @r;
margin-top: 30 / @r;
......@@ -260,9 +265,9 @@ export default {
.content {
// border: 1px solid white;
width: 600 / @r;
height: 825 / @r;
height: 925 / @r;
position: absolute;
top: 50%;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
......@@ -277,13 +282,12 @@ export default {
background: url("../assets/images/erjiye/title.png") no-repeat center
center;
background-size: contain;
position: relative;
}
.content-box {
flex: 1;
// background: red;
overflow: auto;
// -webkit-overflow-scrolling: touch;
.xiala {
width: 46 / @r;
......@@ -301,10 +305,6 @@ export default {
transform: rotate(180deg);
}
.main-title {
height: 98 / @r;
}
li {
height: 98 / @r;
line-height: 98 / @r;
......@@ -314,8 +314,9 @@ export default {
.main-title {
color: #f7f5f1;
// margin-bottom: 40 / @r;
padding-left: 40 / @r;
height: 98 / @r;
font-size: 40 / @r;
}
.sub-title {
......@@ -390,8 +391,8 @@ export default {
width: 160 / @r;
height: 63 / @r;
position: absolute;
top: 3%;
right: 5%;
top: 20%;
right: -7%;
background: url("../assets/images/erjiye/search.png") no-repeat;
background-size: contain;
}
......
src/views/xiangqing.vue
<template>
<div>
<goBack class="animated pulse" />
<div class="laozhao" @click="showMulu"></div>
<div class="mulu-wrap" v-show="mulu">
<div class="mulu">
......@@ -32,7 +33,10 @@
<div class="close" @click="closeMulu"></div>
</div>
</div>
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}" @click="handleJump">
<VueActivePreview class="yulan" v-if="yulanButton" :urlList="ulList">
<div class="close1" @click="closeYulan"></div>
</VueActivePreview>
<div class="book-page-box book-page-1 preserve-3d" :style="{zIndex:zIndex}">
<div class="book-page page-front">
<div class="xiangqing">
<div class="top-info"></div>
......@@ -114,6 +118,9 @@
<script>
import Clipboard from 'clipboard';
import VueActivePreview from 'vue-active-preview'
import goBack from '../components/goBack';
export default {
data() {
......@@ -121,7 +128,9 @@ export default {
mulu: false,
htmlData: null,
mianTitle: null,
zIndex: 96
zIndex: 96,
ulList: [],
yulanButton: false
}
},
activated() {
......@@ -146,9 +155,6 @@ export default {
handleClick() {
},
handleJump() {
console.log(123123)
},
watchDetail() {
$eventbus.$on('detailData', (params) => {
// console.log('详情1 变96');
......@@ -197,15 +203,71 @@ export default {
},
goXu() {
$eventbus.$emit('jumpPage', { pageName: 'xu' })
},
closeYulan() {
this.yulanButton = false
}
}
},
components: {
VueActivePreview,
goBack
},
watch: {
htmlData(newVal, oldVal) {
if (newVal) {
console.log($('.box').find('img'))
setTimeout(() => {
var arr = $('.box').find('img')
arr = Array.from(arr)
if (arr.length) {
var imgArr = []
var imgList = []
arr.forEach(ele => {
if (ele.className === "") {
imgArr.push(ele)
}
});
console.log('imgArr')
console.log(imgArr)
if (imgArr.length) {
this.ulList = []
imgArr.forEach((ele) => {
this.ulList.push(ele.currentSrc)
$(ele).on('click',() => {
this.yulanButton = true
})
})
}
}
}, 500);
}
}
},
}
</script>
<style lang="less">
@r: 75rem;
.bold{
.yulan {
z-index: 100000 !important;
}
.close1 {
color: #fff;
position: absolute;
top: 20 / @r;
right: 20 / @r;
width: 80 / @r;
height: 80 / @r;
background: url("../assets/images/erjiye/close.png") no-repeat;
background-size: contain;
z-index: 1000000;
}
.bold {
font-weight: bold;
}
......@@ -329,7 +391,7 @@ export default {
}
.box {
overflow: auto;
// overflow: auto;
padding-left: 40 / @r;
padding-right: 40 / @r;
margin-top: 30 / @r;
......@@ -351,9 +413,10 @@ export default {
margin-top: 40 / @r;
}
// p {
// font-size: 35 / @r;
// }
p {
// font-size: 35 / @r;
line-height: 50 / @r !important;
}
}
.close {
......
src/views/xiangqing1.vue
<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
if (this.mulu) {
$('body').css('overflow', 'hidden')
}
},
handleClick() {
},
handleJump() {
},
watchDetail() {
$eventbus.$on('detailData', (params) => {
console.log('详情2 变96');
this.zIndex = 96
})
},
getDetail(id) {
this.$store.dispatch('getDetail', id).then((res) => {
this.htmlData = res.data.data.content
})
},
handleDetail(id, title, item) {
if (item.module === 2) {
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: id })
setTimeout(() => {
this.zIndex = 95
$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;
$('body').css('overflow', 'auto')
},
goFengMian() {
$eventbus.$emit('jumpPage', { pageName: 'shouye' })
},
goXu() {
$eventbus.$emit('jumpPage', { pageName: 'xu' })
}
}
}
</script>
<style lang="less">
@r: 75rem;
.mulu-wrap {
width: 100%;
height: 100%;
position: fixed;
top: 50%;
left: 50%;
z-index: 502;
background: rgba(0, 0, 0, 0.7);
transform: translate(-50%, -50%);
.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
......@@ -2,8 +2,9 @@
<div class="book-page-box book-page-1 preserve-3d zindex" @click="handleJump">
<div class="book-page page-front">
<div class="xu">
<goBack class="book-page page-front"/>
<div class="main-box">
<!-- <div class="title"></div> -->
<div class="title"></div>
<!-- <div class="content">
<ul class="content-box">
<div class="text-box"></div>
......@@ -22,6 +23,8 @@
</template>
<script>
import goBack from '../components/goBack';
export default {
data() {
return {
......@@ -35,6 +38,9 @@ export default {
handleJump() {
$eventbus.$emit('jumpPage', { pageName: 'yjml' })
}
},
components:{
goBack
}
}
</script>
......@@ -174,8 +180,8 @@ export default {
overflow: visible;
.content2 {
width: 628 / @r;
height: 950 / @r;
width: 560 / @r;
height: 820 / @r;
background: url("../assets/images/02/qianbi.png") no-repeat center
center;
background-size: contain;
......
src/views/yjml.vue
......@@ -2,6 +2,7 @@
<div class="book-page-box book-page-1 preserve-3d zindex">
<div class="book-page page-front">
<div class="yjml">
<goBack class="animated pulse"/>
<div class="cuizi"></div>
<div class="cheng"></div>
<div class="animated jackInTheBox main-title">
......@@ -44,6 +45,7 @@
</template>
<script>
import goBack from '../components/goBack';
export default {
data() {
......@@ -73,7 +75,7 @@ export default {
return ele.catname === "线上线下招采服务指南"
})
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: arr.child[0].news_id })
$eventbus.$emit('jumpPage', { pageName: 'xiangqing', id: arr.news_id })
} else {
$eventbus.$emit('jumpPage', { pageName: 'erjiye' })
......@@ -87,7 +89,7 @@ export default {
}
},
components: {
goBack
}
}
</script>
......
yarn.lock
......@@ -7914,6 +7914,13 @@ vm-browserify@^1.0.1:
resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.0.tgz#bd76d6a23323e2ca8ffa12028dc04559c75f9019"
integrity sha1-vXbWojMj4sqP+hICjcBFWcdfkBk=
vue-active-preview@^1.0.2:
version "1.0.2"
resolved "https://registry.npm.taobao.org/vue-active-preview/download/vue-active-preview-1.0.2.tgz#8fb73f9eb91df309eb42ead8cb12f99b80c1f784"
integrity sha1-j7c/nrkd8wnrQurYyxL5m4DB94Q=
dependencies:
vue "^2.5.21"
vue-eslint-parser@^2.0.3:
version "2.0.3"
resolved "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-2.0.3.tgz#c268c96c6d94cfe3d938a5f7593959b0ca3360d1"
......@@ -7985,7 +7992,7 @@ vue-template-es2015-compiler@^1.9.0:
resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
vue@^2.6.10:
vue@^2.5.21, vue@^2.6.10:
version "2.6.10"
resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"
integrity sha1-pysaQqTYKnIepDjRtr9V5mGVxjc=
......
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