Selaa lähdekoodia

edit home

master
chutingting 1 vuosi sitten
vanhempi
commit
c9bf7a6ae8
5 muutettua tiedostoa jossa 82 lisäystä ja 71 poistoa
  1. +1
    -1
      src/api/car.js
  2. +1
    -1
      src/api/metadaily.js
  3. +1
    -0
      src/components/swiper/index.vue
  4. +25
    -6
      src/components/video/index.vue
  5. +54
    -63
      src/views/home/index.vue

+ 1
- 1
src/api/car.js Näytä tiedosto

@@ -28,7 +28,7 @@ export const hotNewsConfig = () => {
export const hotlist = (num = 1, size = 10) => {
return request({
method: 'GET',
url: `/news/list?type=2&pageNum=${num}&pageSize=${size}`
url: `/news/list?pageNum=${num}&pageSize=7&type=1&subType=11`
})
}


+ 1
- 1
src/api/metadaily.js Näytä tiedosto

@@ -40,7 +40,7 @@ export const hotNewsConfig = () => {
export const hotnews = (num = 1, size = 10) => {
return request({
method: 'GET',
url: `/news/list?type=1&pageNum=${num}&pageSize=${size}`
url: `/news/list?pageNum=${num}&pageSize=7&type=1&subType=12`
})
}


+ 1
- 0
src/components/swiper/index.vue Näytä tiedosto

@@ -93,6 +93,7 @@ export default {
width: 100%;
height: 590px;
position: relative;
overflow: hidden;
}
.swiper-container {


+ 25
- 6
src/components/video/index.vue Näytä tiedosto

@@ -1,9 +1,8 @@
<template>
<div>
<video :src="url" autoplay controls ref="videoPlayer"></video>
</div>
<video class="video" :src="url" :autoplay="autoplay" controls ref="videoPlayer"></video>
</template>
<script>
/* eslint-disable */
export default {
props: {
url: {
@@ -11,8 +10,28 @@ export default {
default: ''
}
},
watch: {
url: {
handler(newVal, oldVal) {
this.$nextTick(() => {
this.autoplay = true;
this.$refs.videoPlayer.play()
})
},
immediate: true
}
},
data() {
return {}
}
return {
autoplay: false
}
},
created() {}
}
</script>

<style>
.video{
width: 100%;
}
</script>
</style>

+ 54
- 63
src/views/home/index.vue Näytä tiedosto

@@ -5,30 +5,28 @@
<div class="content">
<div class="top">
<el-carousel :interval="5000" arrow="always" height="470px">
<template v-for="(item, index) in hotList.left" >
<el-carousel-item :key="item" v-if="item.split('.')[item.split('.').length - 1] === 'mp4'">
<el-carousel-item v-for="(item, index) in hotList" :key="index">
<div class="lr videocar">
<video :id="'video'+index" :src="item" @click="videoPlayer(`video${index}`, `play${index}`)"/>
<img class="play" src="@/assets/play.png" @click="videoPlayer(`video${index}`, `play${index}`)" :id="'play'+index">
<img class="videoImage" :src="item.news.videoImage" />
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)" :id="'play'+index">
</div>
<div id="hottxt" class="lr">
<div class="txtcontent">
<div class="title">
<img src="@/assets/tt.png">
{{ hotList.right[index].title }}
{{ item.news.title }}
</div>
<p class="content" v-html="hotList.right[index].content"></p>
<p class="content" v-html="item.news.content"></p>
</div>
<div class="btn">
<el-button plain class="more" size="small" @click="routerToCar">MORE</el-button>
</div>
</div>
</el-carousel-item>
</template>
</el-carousel>
</div>
<a :href="gg1.link" target="_blank">
<div class="bottom" :style="{ backgroundImage: `url(${gg1.img})` }"/>
<a :href="gg1.link" v-if="gg1.img" target="_blank">
<img class="bottom" :src="gg1.img" alt="">
</a>
</div>
</div>
@@ -37,29 +35,27 @@
<div class="top">
<img src="@/assets/rblogo.png" class="logo">
<el-carousel :interval="5000" arrow="always" height="470px">
<template v-for="(item, index) in daliay.left" >
<el-carousel-item :key="index">
<el-carousel-item v-for="(item, index) in daliay" :key="index">
<div class="yyzrbtxt lr">
<div class="txtcontent">
<div class="title">
{{ item.title }}
{{ item.news.title }}
</div>
<p class="content" v-html="item.content" />
<p class="content" v-html="item.news.detail"></p>
</div>
<div class="btn">
<el-button plain class="more" size="small" @click="routerToMate">MORE</el-button>
</div>
</div>
<div class="yyzrbimg lr" >
<video :id="'davideo'+index" :src="daliay.right[index].video" @click="videoPlayer(`davideo${index}`, `daplay${index}`)"/>
<img class="play" src="@/assets/play.png" @click="videoPlayer(`davideo${index}`, `daplay${index}`)" :id="'daplay'+index">
<img class="videoImage" :src="item.news.videoImage" />
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)" :id="'daplay'+index">
</div>
</el-carousel-item>
</template>
</el-carousel>
</div>
<a :href="gg2.link" target="_blank">
<div class="bottom" :style="{ backgroundImage: `url(${gg2.img})` }"/>
<a :href="gg2.link" v-if="gg2.img" target="_blank">
<img class="bottom" :src="gg2.img" alt="">
</a>
</div>
</div>
@@ -69,36 +65,33 @@
<el-button type="primary" class="wkbtn" size="medium">点击进入</el-button>
</a>
</div>
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" width="50%">
<VideoDialog :url="videoUrl"></VideoDialog>
</el-dialog>
</div>
</template>
<script>
/* eslint-disable */
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js'
import Swiper from '@/components/swiper'
import VideoDialog from '@/components/video'
export default {
name: 'home',
data () {
return {
videoDialogVisible: false,
videoUrl: '',
carouselList: [],
hotList: {
left: [],
right: []
},
hotList: [],
gg1: {},
gg2: {},
alink: '',
daliay: {
left: [],
right: [],
title: '',
content: '',
img: ''
},
daliay: [],
display: 0
}
},
components: { Swiper },
components: { Swiper, VideoDialog },
mounted () {
this.gethotnewsConfig()
this.getlunboList()
@@ -123,15 +116,7 @@ export default {
async getcarNewsHotList () {
const { data: { message, data } } = await carNewsHotList()
if (message === 'success') {
for (const iter of data.list) {
const { image, video, title, detail } = iter.news
this.hotList.left.push(video)
this.hotList.right.push({
title: title,
content: detail,
png: image
})
}
this.hotList = data.list
}
},
async getguanggao () {
@@ -157,16 +142,17 @@ export default {
async getyuanyuzhouHotList () {
const { data: { message, data: { list } } } = await yuanyuzhouHotList()
if (message === 'success') {
for (const iter of list) {
this.daliay.left.push({
title: iter.news.title,
content: iter.news.detail
})
this.daliay.right.push({
img: iter.news.image,
video: iter.news.video
})
}
this.daliay = list
// for (const iter of list) {
// this.daliay.left.push({
// title: iter.news.title,
// content: iter.news.detail
// })
// this.daliay.right.push({
// img: iter.news.image,
// video: iter.news.video
// })
// }
}
},
async gethotnewsConfig () {
@@ -175,16 +161,18 @@ export default {
this.display = display
}
},
videoPlayer (value, play) {
const id = document.getElementById(value)
const playid = document.getElementById(play)
if (id.paused) {
id.play()
playid.style.display = 'none'
} else {
id.pause()
playid.style.display = 'block'
}
videoPlayer (item) {
this.videoUrl = item.news.video
this.videoDialogVisible = true
// const id = document.getElementById(value)
// const playid = document.getElementById(play)
// if (id.paused) {
// id.play()
// playid.style.display = 'none'
// } else {
// id.pause()
// playid.style.display = 'block'
// }
}
}
}
@@ -255,6 +243,9 @@ export default {
}
.videocar {
position: relative;
.videoImage{
width: 650px;
}
.play {
position: absolute;
margin: 0 auto;
@@ -335,14 +326,11 @@ export default {
}
}
.bottom {
min-height: 120px;
background-image: url('../../assets/bottom.png');
background-size: 100% 100%;
margin-top: 30px;
}
}
}
#hot :deep .el-carousel__indicators--horizontal {
#hot :deep .el-carousel__indicators--horizontal , #daliay :deep .el-carousel__indicators--horizontal {
right: 50px;
left: auto;
bottom: 20px;
@@ -365,6 +353,9 @@ export default {
.yyzrbtxt, .yyzrbimg{
height: 100%;
width: 47%;
.videoImage{
width: 640px;
}
.txtcontent {
height: 80% !important;
text-align: left;


Ladataan…
Peruuta
Tallenna