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