|
|
@@ -5,19 +5,22 @@ |
|
|
|
<div class="content">
|
|
|
|
<div class="list">
|
|
|
|
<div class="article" v-for="(item, index) in articleList" :key="index">
|
|
|
|
<img :src="item.img">
|
|
|
|
<img :src="item.image">
|
|
|
|
<div class="acontent">
|
|
|
|
<div class="txt">
|
|
|
|
<a class="title">{{ item.title }}</a>
|
|
|
|
<a class="tcontent">{{ item.content }}</a>
|
|
|
|
<a class="tcontent">{{ item.detailText }}</a>
|
|
|
|
</div>
|
|
|
|
<a class="date">发布日期: {{ item.date }}</a>
|
|
|
|
<a class="date">发布日期: {{ $moment(item.sendDate).format('YYYY-MM-DD HH:mm:ss') }}</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-pagination
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
background
|
|
|
|
layout="prev, pager, next"
|
|
|
|
:total="1000">
|
|
|
|
:page-size="pageSize"
|
|
|
|
:current-page.sync="pageNum"
|
|
|
|
:total="total">
|
|
|
|
</el-pagination>
|
|
|
|
</div>
|
|
|
|
<div class="right">
|
|
|
@@ -26,8 +29,8 @@ |
|
|
|
<a>热点新闻</a>
|
|
|
|
</div>
|
|
|
|
<div class="nav" v-for="(item,index) in news" :key="index">
|
|
|
|
<img :src="item.img">
|
|
|
|
<a>{{ item.txt }}</a>
|
|
|
|
<img :src="item.image">
|
|
|
|
<a>{{ item.title }}</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="rbottom">
|
|
|
@@ -35,86 +38,99 @@ |
|
|
|
<a>相关视频</a>
|
|
|
|
</div>
|
|
|
|
<div class="nav" v-for="(item,index) in videos" :key="index">
|
|
|
|
<img :src="item.img">
|
|
|
|
<a>{{ item.txt }}</a>
|
|
|
|
<img :src="item.image">
|
|
|
|
<a>{{ item.title }}</a>
|
|
|
|
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)">
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" :lock-scroll="false" :append-to-body="true" width="50%">
|
|
|
|
<VideoDialog :url="videoUrl" :lock-scroll="false" :append-to-body="true"></VideoDialog>
|
|
|
|
</el-dialog>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Swiper from '@/components/swiper'
|
|
|
|
import VideoDialog from '@/components/video'
|
|
|
|
import { lunboList } from '@/api/home.js'
|
|
|
|
|
|
|
|
import { newsListApi, videoListApi } from '@/api/article.js'
|
|
|
|
/* eslint-disable */
|
|
|
|
export default {
|
|
|
|
name: 'home',
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
total: 0,
|
|
|
|
pageSize: 10,
|
|
|
|
pageNum: 1,
|
|
|
|
carouselList: [],
|
|
|
|
articleList: [
|
|
|
|
{
|
|
|
|
img: '/airtlc.png',
|
|
|
|
title: '强不强?吉利银河E8全景智慧座舱揭秘',
|
|
|
|
content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
|
|
|
|
date: '2023/01/02'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/airtlc.png',
|
|
|
|
title: '强不强?吉利银河E8全景智慧座舱揭秘',
|
|
|
|
content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
|
|
|
|
date: '2023/01/02'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/airtlc.png',
|
|
|
|
title: '强不强?吉利银河E8全景智慧座舱揭秘',
|
|
|
|
content: '同样引人注目。近日,2024款福特电马激情上市,共推出5款车型,官方指导价23.98万元-35.98万元得不提帝豪家族竞争力长',
|
|
|
|
date: '2023/01/02'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
news: [
|
|
|
|
{
|
|
|
|
img: '/car.png',
|
|
|
|
txt: '银河E8全景智慧座舱揭秘银河E8'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/car.png',
|
|
|
|
txt: '银河E8全景智慧座舱揭秘银河E8'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/car.png',
|
|
|
|
txt: '银河E8全景智慧座舱揭秘银河E8'
|
|
|
|
}
|
|
|
|
],
|
|
|
|
videos: [
|
|
|
|
{
|
|
|
|
img: '/car.png',
|
|
|
|
txt: '银河E8全景智慧座舱揭秘银河E8'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/car.png',
|
|
|
|
txt: '银河E8全景智慧座舱揭秘银河E8'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
img: '/car.png',
|
|
|
|
txt: '银河E8全景智慧座舱揭秘银河E8'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
articleList: [],
|
|
|
|
news: [],
|
|
|
|
videos: [],
|
|
|
|
videoDialogVisible: false,
|
|
|
|
videoUrl: ''
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
Swiper
|
|
|
|
Swiper,
|
|
|
|
VideoDialog
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.getlunboList()
|
|
|
|
this.getnewsList()
|
|
|
|
this.getHotList()
|
|
|
|
this.getVideoList()
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
handleCurrentChange(val) {
|
|
|
|
this.pageNum = val
|
|
|
|
this.getnewsList()
|
|
|
|
},
|
|
|
|
async getlunboList () {
|
|
|
|
const { data: { code, data } } = await lunboList()
|
|
|
|
if (code === 200) {
|
|
|
|
this.carouselList = data.list
|
|
|
|
this.total = Number(data.total)
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async getnewsList () {
|
|
|
|
let d = {
|
|
|
|
pageNum: this.pageNum,
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
type: this.$route.query.type,
|
|
|
|
subType: this.$route.query.subType
|
|
|
|
}
|
|
|
|
const { data: { code, data } } = await newsListApi(d)
|
|
|
|
if (code === 200) {
|
|
|
|
this.articleList = data.list
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async getHotList () {
|
|
|
|
let d = {
|
|
|
|
pageNum: 1,
|
|
|
|
pageSize: 3,
|
|
|
|
type: 1,
|
|
|
|
subType: 11
|
|
|
|
}
|
|
|
|
const { data: { code, data } } = await newsListApi(d)
|
|
|
|
if (code === 200) {
|
|
|
|
this.news = data.list
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async getVideoList() {
|
|
|
|
let d = {
|
|
|
|
pageNum: 1,
|
|
|
|
pageSize: 3
|
|
|
|
}
|
|
|
|
const { data: { code, data } } = await videoListApi(d)
|
|
|
|
if (code === 200) {
|
|
|
|
this.videos = data.list
|
|
|
|
}
|
|
|
|
},
|
|
|
|
videoPlayer (item) {
|
|
|
|
this.videoUrl = item.link
|
|
|
|
this.videoDialogVisible = true
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
@@ -163,8 +179,10 @@ export default { |
|
|
|
background-color: #FFFFFF;
|
|
|
|
.article {
|
|
|
|
display: flex;
|
|
|
|
margin-bottom: 24px;
|
|
|
|
img {
|
|
|
|
width: 200px;
|
|
|
|
min-width: 200px;
|
|
|
|
height: 150px;
|
|
|
|
}
|
|
|
|
.acontent {
|
|
|
@@ -173,18 +191,29 @@ export default { |
|
|
|
flex-direction: column;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 0 10px;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
.txt {
|
|
|
|
a {
|
|
|
|
display: block;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.tcontent{
|
|
|
|
word-wrap: break-word;
|
|
|
|
display: -webkit-box;
|
|
|
|
-webkit-line-clamp: 3;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
overflow: hidden;
|
|
|
|
font-size: 14px;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #000000;
|
|
|
|
line-height: 24px;
|
|
|
|
margin-top: 4px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.title {
|
|
|
|
font-size: 18px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #000000;
|
|
|
|
line-height: 48px;
|
|
|
|
line-height: 35px;
|
|
|
|
}
|
|
|
|
.content {
|
|
|
|
font-size: 14px;
|
|
|
@@ -196,7 +225,6 @@ export default { |
|
|
|
font-size: 14px;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #7D8392;
|
|
|
|
line-height: 30px;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
}
|
|
|
@@ -207,12 +235,10 @@ export default { |
|
|
|
}
|
|
|
|
.right {
|
|
|
|
width: 300px;
|
|
|
|
display: flex;
|
|
|
|
justify-content: space-between;
|
|
|
|
flex-direction: column;
|
|
|
|
.rtop, .rbottom {
|
|
|
|
background-color: #FFFFFF;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
padding-bottom: 20px;
|
|
|
|
width: 100%;
|
|
|
|
.title {
|
|
|
|
background-image: url('../../assets/airtlctl.png');
|
|
|
@@ -234,16 +260,26 @@ export default { |
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
margin: 10px 0 10px 0;
|
|
|
|
margin: 20px 0 10px 0;
|
|
|
|
position: relative;
|
|
|
|
img {
|
|
|
|
width: 240px;
|
|
|
|
height: 180px;
|
|
|
|
}
|
|
|
|
.play{
|
|
|
|
width: 60px;
|
|
|
|
position: absolute;
|
|
|
|
left: 50%;
|
|
|
|
top: 38px;
|
|
|
|
margin-left: -30px;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: 400;
|
|
|
|
color: #000000;
|
|
|
|
line-height: 48px;
|
|
|
|
line-height: 20px;
|
|
|
|
width: 240px;
|
|
|
|
margin-top: 18px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|