chutingting пре 1 година
родитељ
комит
c9bf7a6ae8
5 измењених фајлова са 82 додато и 71 уклоњено
  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 Прегледај датотеку

@@ -28,7 +28,7 @@ export const hotNewsConfig = () => {
export const hotlist = (num = 1, size = 10) => { export const hotlist = (num = 1, size = 10) => {
return request({ return request({
method: 'GET', 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 Прегледај датотеку

@@ -40,7 +40,7 @@ export const hotNewsConfig = () => {
export const hotnews = (num = 1, size = 10) => { export const hotnews = (num = 1, size = 10) => {
return request({ return request({
method: 'GET', 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 Прегледај датотеку

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


+ 25
- 6
src/components/video/index.vue Прегледај датотеку

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

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

+ 54
- 63
src/views/home/index.vue Прегледај датотеку

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


Loading…
Откажи
Сачувај