@@ -22,4 +22,15 @@ export const videoListApi = (data) => { | |||
url: `/car/videoList`, | |||
params: data | |||
}) | |||
} | |||
} | |||
/** | |||
* 详情 | |||
* @returns request | |||
*/ | |||
export const detailApi = (id) => { | |||
return request({ | |||
method: 'GET', | |||
url: `/news/detail?id=${id}` | |||
}) | |||
} |
@@ -1,6 +1,6 @@ | |||
<template> | |||
<div class="hotnews" > | |||
<div class="imgtxt" @click="routerToarticleDetails(firstData.detail)"> | |||
<div class="imgtxt" @click="detail(firstData)"> | |||
<img :src="firstData.image"> | |||
<a class="newsTitle">{{ firstData.title }}</a> | |||
</div> | |||
@@ -10,7 +10,7 @@ | |||
<el-button type="text" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div class="hotList"> | |||
<div class="list" v-for="(item, index) in listData" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<div class="list" v-for="(item, index) in listData" :key="index" @click="detail(item)"> | |||
<img :src="item.image"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
@@ -46,9 +46,8 @@ export default { | |||
routerTo() { | |||
this.$router.push({ path: '/articleList', query: {type : this.type } }) | |||
}, | |||
routerToarticleDetails() { | |||
localStorage.setItem('article', value) | |||
this.$router.push({ path: '/articleDetails' }) | |||
detail(item) { | |||
this.$router.push({ path: '/articleDetails', query: {id : item.id } }) | |||
} | |||
} | |||
} | |||
@@ -376,6 +376,7 @@ export default { | |||
} | |||
img{ | |||
width: 100%; | |||
border-radius: 10px; | |||
} | |||
} | |||
@@ -3,100 +3,40 @@ | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="list" v-html="article"> | |||
</div> | |||
<div class="right"> | |||
<div class="rtop"> | |||
<div class="title"> | |||
<a>热点新闻</a> | |||
</div> | |||
<div class="nav" v-for="(item,index) in news" :key="index"> | |||
<img :src="item.img"> | |||
<a>{{ item.txt }}</a> | |||
</div> | |||
</div> | |||
<div class="rbottom"> | |||
<div class="title"> | |||
<a>相关视频</a> | |||
</div> | |||
<div class="nav rtmnav" v-for="(item,index) in videos" :key="index"> | |||
<img :src="item.img"> | |||
<a>{{ item.txt }}</a> | |||
</div> | |||
</div> | |||
<div class="left"> | |||
<h1>{{ data.title }}</h1> | |||
<div class="date">发布日期: {{ $moment(data.sendDate).format('YYYY-MM-DD HH:mm:ss') }}</div> | |||
<div class="list" v-html="data.detail"></div> | |||
</div> | |||
<RightList /> | |||
</div> | |||
</div> | |||
</div> | |||
</template> | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
import RightList from './right.vue' | |||
import { lunboList } from '@/api/home.js' | |||
import { detailApi } from '@/api/article.js' | |||
export default { | |||
name: 'home', | |||
data () { | |||
return { | |||
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' | |||
} | |||
], | |||
article: '' | |||
news: [], | |||
videos: [], | |||
data: {} | |||
} | |||
}, | |||
components: { | |||
Swiper | |||
}, | |||
mounted () { | |||
this.article = localStorage.getItem('article') | |||
Swiper, | |||
RightList | |||
}, | |||
mounted () {}, | |||
created () { | |||
this.getlunboList() | |||
this.getDetail() | |||
}, | |||
methods: { | |||
async getlunboList () { | |||
@@ -104,6 +44,12 @@ export default { | |||
if (code === 200) { | |||
this.carouselList = data.list | |||
} | |||
}, | |||
async getDetail () { | |||
const { data: { code, data } } = await detailApi(this.$route.query.id) | |||
if (code === 200) { | |||
this.data = data | |||
} | |||
} | |||
} | |||
} | |||
@@ -145,10 +91,23 @@ export default { | |||
margin: 50px 0 50px 0; | |||
display: flex; | |||
justify-content: space-between; | |||
.left{ | |||
width: 820px; | |||
padding: 30px; | |||
width: 820px; | |||
background-color: #FFFFFF; | |||
h1 { | |||
margin: 0; | |||
} | |||
.date { | |||
font-size: 14px; | |||
color: #7D8392; | |||
line-height: 30px; | |||
margin: 30px 0; | |||
} | |||
} | |||
.list { | |||
padding: 30px; | |||
width: 820px; | |||
background-color: #FFFFFF; | |||
overflow: hidden; | |||
.article { | |||
display: flex; | |||
img { | |||
@@ -193,63 +152,6 @@ export default { | |||
} | |||
} | |||
} | |||
.right { | |||
width: 300px; | |||
display: flex; | |||
justify-content: space-between; | |||
flex-direction: column; | |||
.rtop, .rbottom { | |||
background-color: #FFFFFF; | |||
width: 100%; | |||
margin-bottom: 20px; | |||
.title { | |||
background-image: url('../../assets/airtlctl.png'); | |||
background-position: 0 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 100%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
a { | |||
font-size: 20px; | |||
font-weight: bold; | |||
color: #000000; | |||
line-height: 48px; | |||
width: 100%; | |||
text-align: left; | |||
display: inline-block; | |||
margin-left: 40px; | |||
} | |||
} | |||
.nav { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin: 10px 0 10px 0; | |||
img { | |||
width: 240px; | |||
height: 180px; | |||
position: relative; | |||
} | |||
a { | |||
font-size: 16px; | |||
font-weight: 400; | |||
color: #000000; | |||
line-height: 48px; | |||
} | |||
} | |||
.rtmnav { | |||
img::after { | |||
content: ''; | |||
z-index: 99; | |||
width: 67px; | |||
height: 67px; | |||
position: absolute; | |||
background-image: url('../../assets/play.png'); | |||
// background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
// background-size: 12% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
@@ -4,7 +4,7 @@ | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="list"> | |||
<div class="article" v-for="(item, index) in articleList" :key="index"> | |||
<div class="article" v-for="(item, index) in articleList" :key="index" @click="detail(item)"> | |||
<img :src="item.image"> | |||
<div class="acontent"> | |||
<div class="txt"> | |||
@@ -23,27 +23,7 @@ | |||
:total="total"> | |||
</el-pagination> | |||
</div> | |||
<div class="right"> | |||
<div class="rtop"> | |||
<div class="title"> | |||
<a>热点新闻</a> | |||
</div> | |||
<div class="nav" v-for="(item,index) in news" :key="index"> | |||
<img :src="item.image"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
<div class="rbottom"> | |||
<div class="title"> | |||
<a>相关视频</a> | |||
</div> | |||
<div class="nav" v-for="(item,index) in videos" :key="index"> | |||
<img :src="item.image"> | |||
<a>{{ item.title }}</a> | |||
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)"> | |||
</div> | |||
</div> | |||
</div> | |||
<RightList /> | |||
</div> | |||
</div> | |||
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" :lock-scroll="false" :append-to-body="true" width="50%"> | |||
@@ -53,9 +33,9 @@ | |||
</template> | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
import VideoDialog from '@/components/video' | |||
import RightList from './right.vue' | |||
import { lunboList } from '@/api/home.js' | |||
import { newsListApi, videoListApi } from '@/api/article.js' | |||
import { newsListApi } from '@/api/article.js' | |||
/* eslint-disable */ | |||
export default { | |||
name: 'home', | |||
@@ -74,13 +54,11 @@ export default { | |||
}, | |||
components: { | |||
Swiper, | |||
VideoDialog | |||
RightList | |||
}, | |||
created () { | |||
this.getlunboList() | |||
this.getnewsList() | |||
this.getHotList() | |||
this.getVideoList() | |||
}, | |||
methods: { | |||
handleCurrentChange(val) { | |||
@@ -106,31 +84,8 @@ export default { | |||
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 | |||
detail(item) { | |||
this.$router.push({ path: '/articleDetails', query: {id : item.id } }) | |||
} | |||
} | |||
} | |||
@@ -233,57 +188,6 @@ export default { | |||
} | |||
} | |||
} | |||
.right { | |||
width: 300px; | |||
.rtop, .rbottom { | |||
background-color: #FFFFFF; | |||
margin-bottom: 20px; | |||
padding-bottom: 20px; | |||
width: 100%; | |||
.title { | |||
background-image: url('../../assets/airtlctl.png'); | |||
background-position: 0 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 100%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
a { | |||
font-size: 20px; | |||
font-weight: bold; | |||
color: #000000; | |||
line-height: 48px; | |||
width: 100%; | |||
text-align: left; | |||
display: inline-block; | |||
margin-left: 40px; | |||
} | |||
} | |||
.nav { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin: 20px 0 10px 0; | |||
position: relative; | |||
img { | |||
width: 240px; | |||
} | |||
.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: 20px; | |||
width: 240px; | |||
margin-top: 18px; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
@@ -0,0 +1,133 @@ | |||
<template> | |||
<div class="right"> | |||
<div class="rtop"> | |||
<div class="title"> | |||
<a>热点新闻</a> | |||
</div> | |||
<div class="nav" v-for="(item,index) in news" :key="index" @click="detail(item)"> | |||
<img :src="item.image"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
<div class="rbottom"> | |||
<div class="title"> | |||
<a>相关视频</a> | |||
</div> | |||
<div class="nav" v-for="(item,index) in videos" :key="index"> | |||
<img :src="item.image"> | |||
<a>{{ item.title }}</a> | |||
<img class="play" src="@/assets/play.png" @click="videoPlayer(item)"> | |||
</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 { newsListApi, videoListApi } from '@/api/article.js' | |||
import VideoDialog from '@/components/video' | |||
/* eslint-disable */ | |||
export default { | |||
data () { | |||
return { | |||
news: [], | |||
videos: [], | |||
videoDialogVisible: false, | |||
videoUrl: '' | |||
} | |||
}, | |||
components: { | |||
VideoDialog | |||
}, | |||
created () { | |||
this.getHotList() | |||
this.getVideoList() | |||
}, | |||
methods: { | |||
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 | |||
}, | |||
detail(item) { | |||
this.$router.push({ path: '/articleDetails', query: {id : item.id } }) | |||
} | |||
} | |||
} | |||
</script> | |||
<style lang="scss" scoped> | |||
.right { | |||
width: 300px; | |||
.rtop, .rbottom { | |||
background-color: #FFFFFF; | |||
margin-bottom: 20px; | |||
padding-bottom: 20px; | |||
width: 100%; | |||
.title { | |||
background-image: url('../../assets/airtlctl.png'); | |||
background-position: 0 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 100%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
a { | |||
font-size: 20px; | |||
font-weight: bold; | |||
color: #000000; | |||
line-height: 48px; | |||
width: 100%; | |||
text-align: left; | |||
display: inline-block; | |||
margin-left: 40px; | |||
} | |||
} | |||
.nav { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
margin: 20px 0 10px 0; | |||
position: relative; | |||
img { | |||
width: 240px; | |||
} | |||
.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: 20px; | |||
width: 240px; | |||
margin-top: 18px; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -34,7 +34,7 @@ | |||
<el-button type="text" class="more" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in carList" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<div class="list" v-for="(item, index) in carList" :key="index" @click="detail(item)"> | |||
<img :src="item.image"> | |||
<div class="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
@@ -89,9 +89,8 @@ export default { | |||
handleChange(newIndex) { | |||
this.currentIndex = newIndex; | |||
}, | |||
routerToarticleDetails (value) { | |||
localStorage.setItem('article', value) | |||
this.$router.push({ path: '/articleDetails' }) | |||
detail (item) { | |||
this.$router.push({ path: '/articleDetails', query: {id : item.id } }) | |||
}, | |||
routerTo () { | |||
this.$router.push({ path: '/articleList', query: {type : 2 } }) | |||
@@ -18,7 +18,7 @@ | |||
<el-button type="text" @click="routerTo(31)">MORE+</el-button> | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in zixun" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<div class="list" v-for="(item, index) in zixun" :key="index" @click="detail(item)"> | |||
<img :src="item.image"> | |||
<div class="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
@@ -43,7 +43,7 @@ | |||
<el-button type="text" @click="routerTo(32)">MORE+</el-button> | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in shendu" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<div class="list" v-for="(item, index) in shendu" :key="index" @click="detail(item)"> | |||
<img :src="item.image"> | |||
<div class="txt"> | |||
<a class="title">{{ item.title }}</a> | |||
@@ -89,9 +89,8 @@ export default { | |||
this.getzixun() | |||
}, | |||
methods: { | |||
routerToarticleDetails (value) { | |||
localStorage.setItem('article', value) | |||
this.$router.push({ path: '/articleDetails' }) | |||
detail (item) { | |||
this.$router.push({ path: '/articleDetails', query: {id : item.id } }) | |||
}, | |||
routerTo (type) { | |||
this.$router.push({ path: '/articleList', query: { type: 3, subType: type }}) // eslint-disable-line | |||