@@ -22,4 +22,15 @@ export const videoListApi = (data) => { | |||||
url: `/car/videoList`, | url: `/car/videoList`, | ||||
params: data | params: data | ||||
}) | }) | ||||
} | |||||
} | |||||
/** | |||||
* 详情 | |||||
* @returns request | |||||
*/ | |||||
export const detailApi = (id) => { | |||||
return request({ | |||||
method: 'GET', | |||||
url: `/news/detail?id=${id}` | |||||
}) | |||||
} |
@@ -1,6 +1,6 @@ | |||||
<template> | <template> | ||||
<div class="hotnews" > | <div class="hotnews" > | ||||
<div class="imgtxt" @click="routerToarticleDetails(firstData.detail)"> | |||||
<div class="imgtxt" @click="detail(firstData)"> | |||||
<img :src="firstData.image"> | <img :src="firstData.image"> | ||||
<a class="newsTitle">{{ firstData.title }}</a> | <a class="newsTitle">{{ firstData.title }}</a> | ||||
</div> | </div> | ||||
@@ -10,7 +10,7 @@ | |||||
<el-button type="text" @click="routerTo">MORE+</el-button> | <el-button type="text" @click="routerTo">MORE+</el-button> | ||||
</div> | </div> | ||||
<div class="hotList"> | <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"> | <img :src="item.image"> | ||||
<a>{{ item.title }}</a> | <a>{{ item.title }}</a> | ||||
</div> | </div> | ||||
@@ -46,9 +46,8 @@ export default { | |||||
routerTo() { | routerTo() { | ||||
this.$router.push({ path: '/articleList', query: {type : this.type } }) | 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{ | img{ | ||||
width: 100%; | width: 100%; | ||||
border-radius: 10px; | |||||
} | } | ||||
} | } | ||||
@@ -3,100 +3,40 @@ | |||||
<Swiper :banner-array="carouselList" /> | <Swiper :banner-array="carouselList" /> | ||||
<div id="hot"> | <div id="hot"> | ||||
<div class="content"> | <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> | </div> | ||||
<RightList /> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
</template> | </template> | ||||
<script> | <script> | ||||
import Swiper from '@/components/swiper' | import Swiper from '@/components/swiper' | ||||
import RightList from './right.vue' | |||||
import { lunboList } from '@/api/home.js' | import { lunboList } from '@/api/home.js' | ||||
import { detailApi } from '@/api/article.js' | |||||
export default { | export default { | ||||
name: 'home', | name: 'home', | ||||
data () { | data () { | ||||
return { | return { | ||||
carouselList: [], | 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: { | components: { | ||||
Swiper | |||||
}, | |||||
mounted () { | |||||
this.article = localStorage.getItem('article') | |||||
Swiper, | |||||
RightList | |||||
}, | }, | ||||
mounted () {}, | |||||
created () { | created () { | ||||
this.getlunboList() | this.getlunboList() | ||||
this.getDetail() | |||||
}, | }, | ||||
methods: { | methods: { | ||||
async getlunboList () { | async getlunboList () { | ||||
@@ -104,6 +44,12 @@ export default { | |||||
if (code === 200) { | if (code === 200) { | ||||
this.carouselList = data.list | 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; | margin: 50px 0 50px 0; | ||||
display: flex; | display: flex; | ||||
justify-content: space-between; | 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 { | .list { | ||||
padding: 30px; | |||||
width: 820px; | |||||
background-color: #FFFFFF; | |||||
overflow: hidden; | |||||
.article { | .article { | ||||
display: flex; | display: flex; | ||||
img { | 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 id="hot"> | ||||
<div class="content"> | <div class="content"> | ||||
<div class="list"> | <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"> | <img :src="item.image"> | ||||
<div class="acontent"> | <div class="acontent"> | ||||
<div class="txt"> | <div class="txt"> | ||||
@@ -23,27 +23,7 @@ | |||||
:total="total"> | :total="total"> | ||||
</el-pagination> | </el-pagination> | ||||
</div> | </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> | ||||
</div> | </div> | ||||
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" :lock-scroll="false" :append-to-body="true" width="50%"> | <el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" :lock-scroll="false" :append-to-body="true" width="50%"> | ||||
@@ -53,9 +33,9 @@ | |||||
</template> | </template> | ||||
<script> | <script> | ||||
import Swiper from '@/components/swiper' | import Swiper from '@/components/swiper' | ||||
import VideoDialog from '@/components/video' | |||||
import RightList from './right.vue' | |||||
import { lunboList } from '@/api/home.js' | import { lunboList } from '@/api/home.js' | ||||
import { newsListApi, videoListApi } from '@/api/article.js' | |||||
import { newsListApi } from '@/api/article.js' | |||||
/* eslint-disable */ | /* eslint-disable */ | ||||
export default { | export default { | ||||
name: 'home', | name: 'home', | ||||
@@ -74,13 +54,11 @@ export default { | |||||
}, | }, | ||||
components: { | components: { | ||||
Swiper, | Swiper, | ||||
VideoDialog | |||||
RightList | |||||
}, | }, | ||||
created () { | created () { | ||||
this.getlunboList() | this.getlunboList() | ||||
this.getnewsList() | this.getnewsList() | ||||
this.getHotList() | |||||
this.getVideoList() | |||||
}, | }, | ||||
methods: { | methods: { | ||||
handleCurrentChange(val) { | handleCurrentChange(val) { | ||||
@@ -106,31 +84,8 @@ export default { | |||||
this.articleList = data.list | 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> | <el-button type="text" class="more" @click="routerTo">MORE+</el-button> | ||||
</div> | </div> | ||||
<div id="hotList"> | <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"> | <img :src="item.image"> | ||||
<div class="txt"> | <div class="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -89,9 +89,8 @@ export default { | |||||
handleChange(newIndex) { | handleChange(newIndex) { | ||||
this.currentIndex = 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 () { | routerTo () { | ||||
this.$router.push({ path: '/articleList', query: {type : 2 } }) | this.$router.push({ path: '/articleList', query: {type : 2 } }) | ||||
@@ -18,7 +18,7 @@ | |||||
<el-button type="text" @click="routerTo(31)">MORE+</el-button> | <el-button type="text" @click="routerTo(31)">MORE+</el-button> | ||||
</div> | </div> | ||||
<div id="hotList"> | <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"> | <img :src="item.image"> | ||||
<div class="txt"> | <div class="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -43,7 +43,7 @@ | |||||
<el-button type="text" @click="routerTo(32)">MORE+</el-button> | <el-button type="text" @click="routerTo(32)">MORE+</el-button> | ||||
</div> | </div> | ||||
<div id="hotList"> | <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"> | <img :src="item.image"> | ||||
<div class="txt"> | <div class="txt"> | ||||
<a class="title">{{ item.title }}</a> | <a class="title">{{ item.title }}</a> | ||||
@@ -89,9 +89,8 @@ export default { | |||||
this.getzixun() | this.getzixun() | ||||
}, | }, | ||||
methods: { | 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) { | routerTo (type) { | ||||
this.$router.push({ path: '/articleList', query: { type: 3, subType: type }}) // eslint-disable-line | this.$router.push({ path: '/articleList', query: { type: 3, subType: type }}) // eslint-disable-line | ||||