|
|
@@ -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;
|
|
|
|