Skip to content

html / zhaocaih5-wanda

Go to a project
Commit 024ba60a by mamingqun
Options

cb

parent 7b6f774e
Showing with 349 additions and 14 deletions
public/index.html
......@@ -7,7 +7,6 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>万达招采</title>
<script src="./extras/jquery.min.js"></script>
<script src="./extras/turn.min.js"></script>
</head>
<body>
<noscript>
......
src/App.vue
......@@ -51,6 +51,7 @@ body {
* {
box-sizing: border-box;
-webkit-overflow-scrolling:touch;
}
p {
......
src/assets/images/xiangqing/bg.png
src/assets/images/xiangqing/bg.png

304 KB | W: | H:

src/assets/images/xiangqing/bg.png

334 KB | W: | H:

src/assets/images/xiangqing/bg.png
src/assets/images/xiangqing/bg.png
src/assets/images/xiangqing/bg.png
src/assets/images/xiangqing/bg.png
  • 2-up
  • Swipe
  • Onion skin
src/components/music.vue 0 → 100644
<template>
<div class="music-box">
<div class="music" ref="music">
<img ref="musicImg" class="musicImg animate" :src="isPlaying?imgStart:imgEnd" alt />
</div>
<audio id="music" :src="map3Src" autoplay loop></audio>
</div>
</template>
<script>
export default {
data() {
return {
map3Src: require('../assets/mp3/music.mp3'),
isPlaying: true,
imgStart: require('../assets/images/01/start.png'),
imgEnd: require('../assets/images/01/pause.png')
}
},
mounted() {
this.weixinAutoPlay()
this.playMusic()
},
methods: {
playMusic() {
var _this = this
this.isPlaying = true;
// var container = $('.music')[0];
// var image = $('.musicImg')[0];
var container = this.$refs.music;
var image = this.$refs.musicImg;
image.addEventListener('click', () => {
this.isPlaying ? pause() : play();
});
function pause() {
_this.isPlaying = false;
var iTransform = getComputedStyle(image).transform;
var cTransform = getComputedStyle(container).transform;
container.style.transform = cTransform === 'none'
? iTransform
: iTransform.concat(' ', cTransform);
image.classList.remove('animate');
music.pause();
}
function play() {
_this.isPlaying = true;
image.classList.add('animate');
music.play();
}
},
weixinAutoPlay() {
try {
// 微信自动播放音乐
document.addEventListener('DOMContentLoaded', function () {
function audioAutoPlay() {
var audio_ = document.getElementById('music');
audio_.play();
document.addEventListener("WeixinJSBridgeReady", function () {
audio_.play();
}, false);
}
audioAutoPlay();
});
} catch (error) {
}
}
}
}
</script>
<style lang="less" scoped>
@r: 75rem;
.animate {
-webkit-animation: round 10s linear infinite;
animation: round 10s linear infinite;
}
@-webkit-keyframes round {
100% {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
@keyframes round {
100% {
-webkit-transform: rotate(1turn);
transform: rotate(1turn);
}
}
.music-box {
position: absolute;
top: 5%;
right: 5%;
z-index: 100000;
.music {
width: 90 / @r;
height: 90 / @r;
img {
width: 100%;
height: 100%;
}
}
.start {
background: url("../assets/images/01/start.png") no-repeat;
background-size: contain;
}
.pause {
background: url("../assets/images/01/pause.png") no-repeat;
background-size: contain;
}
}
</style>
src/views/Home.vue
......@@ -47,6 +47,7 @@
<!-- <yjml/> -->
<!-- <erjiye/> -->
<!-- <xiangqing /> -->
<music/>
<transition :name="transitionName" mode="in-out">
<keep-alive>
......@@ -62,6 +63,7 @@ import xu from './xu';
import yjml from './yjml';
import erjiye from './erjiye';
import xiangqing from './xiangqing';
import music from '../components/music';
export default {
name: 'home',
......@@ -147,7 +149,8 @@ export default {
xu,
yjml,
erjiye,
xiangqing
xiangqing,
music
}
}
</script>
......
src/views/erjiye.vue
......@@ -7,18 +7,42 @@
<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>
<li
class="sub-title"
v-for="(ele, num) in item.child"
:key="num"
@click="handleDetail(ele.news_id,ele.title)"
>{{ele.title}}</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="bottom11">
<div class="laozhaos"></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="list" v-if="searchList.length">
<li
v-for="(item, index) in filterList"
:key="index"
@click="handleDetail(item.news_id,item.catname,item)"
>{{item.catname}}</li>
</ul>
<div class="close" @click="openSearch"></div>
</div>
</div>
</div>
</div>
</div>
......@@ -26,8 +50,22 @@
<script>
export default {
data() {
return {
searchButton: false,
keyWord: '',
searchList: [],
filterList: []
}
},
activated() {
this.searchButton = false
this.resetSearch()
},
mounted() {
this.watchMaodian()
this.setSearchList(this.$store.state.list)
},
methods: {
watchMaodian() {
......@@ -41,19 +79,155 @@ export default {
handleJump() {
// $eventbus.$emit('jumpPage', 'xiangqing')
},
handleDetail(id, title) {
$eventbus.$emit('jumpPage', 'xiangqing')
setTimeout(() => {
$eventbus.$emit('detailData', { id, title })
});
handleDetail(id, title, item) {
if (item.module === 2) {
$eventbus.$emit('jumpPage', 'xiangqing')
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)
}
}
},
resetSearch(){
this.filterList = []
this.keyWord = ''
},
openSearch() {
this.searchButton = !this.searchButton
if (!this.searchButton) {
this.resetSearch()
}
},
setSearchList(arr) {
try {
if (!arr.length) {
return
}
} catch (error) {
}
arr.forEach((ele) => {
if (ele.module === 2) {
this.searchList.push(ele)
}
try {
if (ele.child) {
this.setSearchList(ele.child)
}
} catch (error) {
console.log(error);
}
})
}
},
watch: {
keyWord(newVal, oldVal) {
if (this.searchList.length) {
if (newVal === '') {
this.filterList = []
return
}
var arr = this.searchList.filter((ele) => {
return ele.catname.includes(newVal)
})
console.log('arr');
console.log( arr );
this.filterList = arr
}
}
}
}
</script>
<style lang="less" scoped>
@r: 75rem;
p:nth-child(1) {
margin-bottom: 26px;
}
.none {
display: none;
}
.search-box {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
.main-contain {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 582 / @r;
height: 600 / @r;
// border: 1px solid white;
text-align: center;
.list {
margin-top: 20 / @r;
// border: 1px solid red;
height: 500 / @r;
overflow: auto;
li {
height: 50 / @r;
line-height: 50 / @r;
color: white;
font-size: 35 / @r;
white-space: nowrap;
text-align: left;
padding-left: 40 / @r;
padding-right: 40 / @r;
}
}
input {
width: 560 / @r;
height: 70 / @r;
border-radius: 10 / @r;
padding-left: 40 / @r;
padding-right: 40 / @r;
}
input:focus {
outline: none;
}
.close {
width: 60 / @r;
height: 60 / @r;
position: absolute;
top: -80 / @r;
right: 0;
background: url("../assets/images/erjiye/close.png") no-repeat;
background-size: contain;
}
}
}
.zindex {
z-index: 997;
}
......@@ -85,6 +259,7 @@ export default {
flex: 1;
// background: red;
overflow: auto;
// -webkit-overflow-scrolling: touch;
.main-title {
height: 98 / @r;
......@@ -110,6 +285,17 @@ export default {
padding-left: 45 / @r;
white-space: nowrap;
}
.san-title {
background: url("../assets/images/erjiye/sanji.png") no-repeat center;
background-size: contain;
color: #004db6;
margin-bottom: 20 / @r;
padding-left: 45 / @r;
white-space: nowrap;
// display: none;
// height: 0;
}
}
}
......@@ -136,6 +322,16 @@ export default {
}
}
.search-button {
width: 160 / @r;
height: 63 / @r;
position: absolute;
top: 3%;
right: 5%;
background: url("../assets/images/erjiye/search.png") no-repeat;
background-size: contain;
}
// 分割线
// vue 动画样式
......
src/views/xiangqing.vue
......@@ -167,6 +167,17 @@ export default {
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;
......@@ -206,7 +217,7 @@ export default {
center;
background-size: contain;
position: fixed;
right: 0;
right: 3%;
top: 27%;
z-index: 500;
}
......
src/views/yjml.vue
......@@ -146,7 +146,9 @@ export default {
left: 50%;
top: 42%;
width: 506 / @r;
height: 390 / @r;
margin-left: -253 / @r;
overflow: auto;
li {
width: 100%;
......
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