|
|
@@ -21,8 +21,8 @@ |
|
|
|
</div>
|
|
|
|
</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>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@@ -32,15 +32,16 @@ |
|
|
|
<el-carousel :interval="4000" type="card" height="200px" arrow="always">
|
|
|
|
<el-carousel-item v-for="(item, index) in carvideoList" :key="index">
|
|
|
|
<div class="carvideo">
|
|
|
|
<video :id="'davideo'+index" :src="item.video" @click="videoPlayer(`davideo${index}`, `daplay${index}`)"/>
|
|
|
|
<img class="play" src="@/assets/play.png" @click="videoPlayer(`davideo${index}`, `daplay${index}`)" :id="'daplay'+index">
|
|
|
|
<!-- <video :id="'davideo'+index" :src="item.video" @click="videoPlayer(`davideo${index}`, `daplay${index}`)"/> -->
|
|
|
|
<img class="videoImage" :src="item.image" />
|
|
|
|
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)" :id="'daplay'+index">
|
|
|
|
</div>
|
|
|
|
<a>{{ item.title }}</a>
|
|
|
|
</el-carousel-item>
|
|
|
|
</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>
|
|
|
@@ -61,11 +62,16 @@ |
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" width="50%">
|
|
|
|
<VideoDialog :url="videoUrl"></VideoDialog>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
/* eslint-disable */
|
|
|
|
import Swiper from '@/components/swiper'
|
|
|
|
import { lunboList, hotNewsConfig, guanggao, hotlist, videoList } from '@/api/car.js'
|
|
|
|
import VideoDialog from '@/components/video'
|
|
|
|
export default {
|
|
|
|
name: 'information',
|
|
|
|
data () {
|
|
|
@@ -83,11 +89,15 @@ export default { |
|
|
|
carList: [],
|
|
|
|
display: 1,
|
|
|
|
gg1: {},
|
|
|
|
gg2: {}
|
|
|
|
gg2: {},
|
|
|
|
activeIndex: null,
|
|
|
|
videoDialogVisible: '',
|
|
|
|
videoUrl: ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
Swiper
|
|
|
|
Swiper,
|
|
|
|
VideoDialog
|
|
|
|
},
|
|
|
|
mounted () {
|
|
|
|
this.gethotnewsConfig()
|
|
|
@@ -95,6 +105,7 @@ export default { |
|
|
|
this.getguanggao()
|
|
|
|
this.gethotlist()
|
|
|
|
this.getvideoList()
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
routerToarticleDetails (value) {
|
|
|
@@ -155,26 +166,12 @@ export default { |
|
|
|
async getvideoList () {
|
|
|
|
const { data: { message, data } } = await videoList()
|
|
|
|
if (message === 'success') {
|
|
|
|
for (const iter of data.list) {
|
|
|
|
console.log(iter)
|
|
|
|
this.carvideoList.push({
|
|
|
|
title: iter.title,
|
|
|
|
img: iter.image,
|
|
|
|
video: iter.link
|
|
|
|
})
|
|
|
|
}
|
|
|
|
this.carvideoList = data.list
|
|
|
|
}
|
|
|
|
},
|
|
|
|
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.link
|
|
|
|
this.videoDialogVisible = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@@ -325,11 +322,6 @@ export default { |
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.bottom {
|
|
|
|
min-height: 120px;
|
|
|
|
background-image: url('../../assets/bottom.png');
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
#hot {
|
|
|
@@ -415,8 +407,8 @@ export default { |
|
|
|
// justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
.carvideo {
|
|
|
|
width: 660px;
|
|
|
|
height: 90%;
|
|
|
|
// width: 660px;
|
|
|
|
// height: 90%;
|
|
|
|
position: relative;
|
|
|
|
.play {
|
|
|
|
position: absolute;
|
|
|
@@ -425,10 +417,9 @@ export default { |
|
|
|
margin-left: 45%;
|
|
|
|
margin-top: -50px;
|
|
|
|
}
|
|
|
|
video {
|
|
|
|
.videoImage {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
border-radius: 20%;
|
|
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
a {
|
|
|
|