@@ -1,17 +1,17 @@ | |||
<template> | |||
<div class="hotnews" > | |||
<div class="imgtxt" @click="routerToarticleDetails(hotnews.detail)"> | |||
<img :src="hotnews.img"> | |||
<a class="newsTitle">{{ hotnews.title }}</a> | |||
<div class="imgtxt" @click="routerToarticleDetails(firstData.detail)"> | |||
<img :src="firstData.image"> | |||
<a class="newsTitle">{{ firstData.title }}</a> | |||
</div> | |||
<div class="hottxt"> | |||
<div id="htitle"> | |||
<div class="htitle"> | |||
<a class="tle">热点新闻</a> | |||
<el-button type="text" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div class="hotList"> | |||
<div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<div class="list" v-for="(item, index) in listData" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.image"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
@@ -19,12 +19,36 @@ | |||
</div> | |||
</template> | |||
<script> | |||
/* eslint-disable */ | |||
export default { | |||
props: { | |||
list: Array, | |||
}, | |||
watch: { | |||
list: { | |||
handler(newVal, oldVal) { | |||
if (this.list.length) { | |||
this.firstData = this.list[0] | |||
this.listData = this.list.slice(1, this.list.length) | |||
} | |||
}, | |||
immediate: true | |||
} | |||
}, | |||
data() { | |||
return {} | |||
return { | |||
firstData: {}, | |||
listData: [] | |||
} | |||
}, | |||
methods: { | |||
routerTo() { | |||
this.$router.push({ path: '/articleList' }) | |||
}, | |||
routerToarticleDetails() { | |||
localStorage.setItem('article', value) | |||
this.$router.push({ path: '/articleDetails' }) | |||
} | |||
} | |||
} | |||
</script> | |||
@@ -66,7 +90,6 @@ export default { | |||
.hottxt { | |||
display: flex; | |||
justify-content: space-around; | |||
flex-direction: column; | |||
align-items: center; | |||
flex: 1; | |||
@@ -76,6 +99,7 @@ export default { | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 95%; | |||
margin-top: 15px; | |||
.tle { | |||
z-index: 9; | |||
font-size: 26px; | |||
@@ -28,7 +28,7 @@ | |||
<!-- Add Pagination --> | |||
<!-- <div class="swiper-paginationhor"></div> --> | |||
</div> | |||
<el-dialog :visible.sync="videoDialogVisible" width="400px" > | |||
<el-dialog :visible.sync="videoDialogVisible" :lock-scroll="false" :append-to-body="true" width="400px" > | |||
<VideoDialog :url="videoUrl"></VideoDialog> | |||
</el-dialog> | |||
</div> | |||
@@ -234,7 +234,6 @@ export default { | |||
.content { | |||
align-items: center; | |||
} | |||
padding-bottom: 80px; | |||
.top { | |||
min-height: 470px; | |||
margin-bottom: 40px; | |||
@@ -25,24 +25,7 @@ | |||
</el-carousel-item> | |||
</el-carousel> | |||
</div> | |||
<div class="hotnews" v-if="display"> | |||
<div id="imgtxt" @click="routerToarticleDetails(hotnews.detail)"> | |||
<img :src="hotnews.img"> | |||
<a class="newsTitle">{{ hotnews.title }}</a> | |||
</div> | |||
<div id="hottxt"> | |||
<div id="htitle"> | |||
<a class="tle">热点新闻</a> | |||
<el-button type="text" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<HotNews v-if="display" :list="hotnewsList"/> | |||
<a :href="gg1.link" v-if="gg1.img" target="_blank"> | |||
<img class="bottom" :src="gg1.img" alt=""> | |||
</a> | |||
@@ -84,7 +67,7 @@ | |||
</a> | |||
</div> | |||
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" width="50%"> | |||
<VideoDialog :url="videoUrl"></VideoDialog> | |||
<VideoDialog :url="videoUrl" :lock-scroll="false" :append-to-body="true"></VideoDialog> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
@@ -93,6 +76,7 @@ | |||
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig, hotnews } from '@/api/home.js' | |||
import Swiper from '@/components/swiper' | |||
import VideoDialog from '@/components/video' | |||
import HotNews from '@/components/hotNews' | |||
export default { | |||
name: 'home', | |||
@@ -114,7 +98,7 @@ export default { | |||
hotnewsList: [] | |||
} | |||
}, | |||
components: { Swiper, VideoDialog }, | |||
components: { Swiper, VideoDialog, HotNews }, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
this.getlunboList() | |||
@@ -190,17 +174,7 @@ export default { | |||
const { data: { message, data } } = await hotnews() | |||
console.log(data) | |||
if (message === 'success') { | |||
this.hotnews.title = data.list[0].title | |||
this.hotnews.img = data.list[0].image | |||
this.hotnews.detail = data.list[0].detail | |||
for (let index = 1; index < data.list.length; index++) { | |||
this.hotnewsList.push({ | |||
title: data.list[index].title, | |||
img: data.list[index].image, | |||
subtitle: data.list[index].subTitle, | |||
detail: data.list[index].detail | |||
}) | |||
} | |||
this.hotnewsList = data.list | |||
} | |||
}, | |||
} | |||
@@ -246,148 +220,6 @@ export default { | |||
.top, .bottom { | |||
width: 100%; | |||
} | |||
.hotnews { | |||
min-height: 100px; | |||
margin-top: 20px; | |||
min-height: 470px; | |||
background-color: #FFFFFF; | |||
display: flex; | |||
margin-bottom: 30px; | |||
background-image: url('../../assets/hotTopLeft.png'); | |||
background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
#imgtxt { | |||
width: 560px; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-left: 20px; | |||
img { | |||
width: 560px; | |||
} | |||
.newsTitle{ | |||
position: absolute; | |||
bottom: 5%; | |||
left: 0; | |||
display: inline-block; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
line-height: 48px; | |||
width: 100%; | |||
background-color: #0000007e; | |||
} | |||
} | |||
#hottxt { | |||
display: flex; | |||
justify-content: space-around; | |||
flex-direction: column; | |||
align-items: center; | |||
flex: 1; | |||
margin-left: 35px; | |||
#htitle { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 95%; | |||
.tle { | |||
z-index: 9; | |||
font-size: 26px; | |||
font-weight: bold; | |||
color: #00161C; | |||
line-height: 48px; | |||
display: inline-block; | |||
position: relative; | |||
text-decoration: none; /* 移除默认的下划线 */ | |||
} | |||
.tle::after { | |||
content: ''; | |||
position: absolute; | |||
left: -15px; | |||
bottom: 10px; | |||
width: 65%; | |||
height: 6px; /* 横线高度为文字高度的一半 */ | |||
background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
z-index: -1; | |||
} | |||
.el-button { | |||
font-size: 16px; | |||
font-weight: bold; | |||
color: #07CAAF; | |||
line-height: 48px; | |||
cursor: pointer; | |||
z-index: 9999; | |||
} | |||
} | |||
} | |||
#hotList { | |||
height: 76%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
align-items: center; | |||
.list { | |||
z-index: 999; | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
width: 150px; | |||
margin-right: 39px; | |||
img { | |||
width: 150px; | |||
height: 112px; | |||
border-radius: 10px; | |||
} | |||
a { | |||
font-size: 14px; | |||
font-weight: 400; | |||
color: #010101; | |||
margin-top: 14px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
width: 150px; | |||
// line-height: 48px; | |||
} | |||
} | |||
} | |||
.top { | |||
margin-bottom: 30px; | |||
background-color: #FFFFFF; | |||
display: flex; | |||
background-image: url('../../assets/hotTopLeft.png'); | |||
background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
#imgtxt { | |||
width: 560px; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-left: 20px; | |||
img { | |||
width: 560px; | |||
} | |||
.newsTitle{ | |||
position: absolute; | |||
bottom: 5%; | |||
left: 0; | |||
display: inline-block; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
line-height: 48px; | |||
width: 100%; | |||
background-color: #0000007e; | |||
} | |||
} | |||
} | |||
} | |||
.top { | |||
// min-height: 470px; | |||
// background: black; | |||
@@ -3,24 +3,7 @@ | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="top" v-if="display"> | |||
<div id="imgtxt" @click="routerToarticleDetails(hotnews.detail)"> | |||
<img :src="hotnews.img"> | |||
<a class="newsTitle">{{ hotnews.title }}</a> | |||
</div> | |||
<div id="hottxt"> | |||
<div id="htitle"> | |||
<a class="tle">热点新闻</a> | |||
<el-button type="text" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<HotNews v-if="display" :list="hotnewsList"/> | |||
<a :href="gg1.link" v-if="gg1.img" target="_blank"> | |||
<img class="bottom" :src="gg1.img" alt=""> | |||
</a> | |||
@@ -63,7 +46,7 @@ | |||
</div> | |||
</div> | |||
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" width="50%"> | |||
<VideoDialog :url="videoUrl"></VideoDialog> | |||
<VideoDialog :url="videoUrl" :lock-scroll="false" :append-to-body="true"></VideoDialog> | |||
</el-dialog> | |||
</div> | |||
</template> | |||
@@ -72,6 +55,7 @@ | |||
import Swiper from '@/components/swiper' | |||
import { lunboList, hotNewsConfig, guanggao, hotlist, videoList, carArticle } from '@/api/car.js' | |||
import VideoDialog from '@/components/video' | |||
import HotNews from '@/components/hotNews' | |||
export default { | |||
name: 'information', | |||
data () { | |||
@@ -97,7 +81,8 @@ export default { | |||
}, | |||
components: { | |||
Swiper, | |||
VideoDialog | |||
VideoDialog, | |||
HotNews | |||
}, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
@@ -144,17 +129,7 @@ export default { | |||
async gethotlist () { | |||
const { data: { message, data } } = await hotlist() | |||
if (message === 'success') { | |||
this.hotnews.title = data.list[0].title | |||
this.hotnews.img = data.list[0].image | |||
this.hotnews.detail = data.list[0].detail | |||
for (let index = 1; index < data.list.length; index++) { | |||
this.hotnewsList.push({ | |||
title: data.list[index].title, | |||
img: data.list[index].image, | |||
subtitle: data.list[index].subTitle, | |||
detail: data.list[index].detail | |||
}) | |||
} | |||
this.hotnewsList = data.list | |||
} | |||
}, | |||
async getvideoList () { | |||
@@ -3,24 +3,7 @@ | |||
<Swiper :banner-array="carouselList" /> | |||
<div id="hot"> | |||
<div class="content"> | |||
<div class="top" v-if="display"> | |||
<div id="imgtxt" @click="routerToarticleDetails(hotnews.detail)"> | |||
<img :src="hotnews.img"> | |||
<a class="newsTitle">{{ hotnews.title }}</a> | |||
</div> | |||
<div id="hottxt"> | |||
<div id="htitle"> | |||
<a class="tle">热点新闻</a> | |||
<el-button type="text" @click="routerTo">MORE+</el-button> | |||
</div> | |||
<div id="hotList"> | |||
<div class="list" v-for="(item, index) in hotnewsList" :key="index" @click="routerToarticleDetails(item.detail)"> | |||
<img :src="item.img"> | |||
<a>{{ item.title }}</a> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<HotNews v-if="display" :list="hotnewsList"/> | |||
</div> | |||
</div> | |||
<div class="gg" v-if="gg1.img" > | |||
@@ -74,6 +57,7 @@ | |||
</template> | |||
<script> | |||
import Swiper from '@/components/swiper' | |||
import HotNews from '@/components/hotNews' | |||
import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js' | |||
export default { | |||
name: 'metadaily', | |||
@@ -93,7 +77,8 @@ export default { | |||
} | |||
}, | |||
components: { | |||
Swiper | |||
Swiper, | |||
HotNews | |||
}, | |||
mounted () { | |||
this.gethotnewsConfig() | |||
@@ -149,19 +134,20 @@ export default { | |||
this.hotnewsList = [] | |||
const { data: { message, data } } = await hotnews() | |||
if (message === 'success') { | |||
this.hotnews = { | |||
title: data.list[0].title, | |||
img: data.list[0].image, | |||
detail: data.list[0].detail | |||
} | |||
for (let index = 1; index < data.list.length; index++) { | |||
console.log(data.list[index]) | |||
this.hotnewsList.push({ | |||
title: data.list[index].title, | |||
img: data.list[index].image, | |||
detail: data.list[index].detail | |||
}) | |||
} | |||
this.hotnewsList = data.list | |||
// this.hotnews = { | |||
// title: data.list[0].title, | |||
// img: data.list[0].image, | |||
// detail: data.list[0].detail | |||
// } | |||
// for (let index = 1; index < data.list.length; index++) { | |||
// console.log(data.list[index]) | |||
// this.hotnewsList.push({ | |||
// title: data.list[index].title, | |||
// img: data.list[index].image, | |||
// detail: data.list[index].detail | |||
// }) | |||
// } | |||
} | |||
}, | |||
async getshendu () { | |||
@@ -231,109 +217,6 @@ export default { | |||
.top, .bottom { | |||
width: 100%; | |||
} | |||
.top { | |||
min-height: 470px; | |||
//margin-bottom: 30px; | |||
background-color: #FFFFFF; | |||
display: flex; | |||
#imgtxt { | |||
width: 560px; | |||
//width: 55%; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
img { | |||
width: 560px; | |||
//height: 90%; | |||
} | |||
.newsTitle{ | |||
position: absolute; | |||
bottom: 5%; | |||
left: 0; | |||
display: inline-block; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
line-height: 48px; | |||
width: 100%; | |||
background-color: #0000007e; | |||
} | |||
} | |||
#hottxt { | |||
display: flex; | |||
justify-content: space-around; | |||
flex-direction: column; | |||
align-items: center; | |||
flex: 1; | |||
margin-left: 35px; | |||
#htitle { | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
width: 95%; | |||
.tle { | |||
z-index: 9; | |||
font-size: 26px; | |||
font-weight: bold; | |||
color: #00161C; | |||
line-height: 48px; | |||
display: inline-block; | |||
position: relative; | |||
text-decoration: none; /* 移除默认的下划线 */ | |||
} | |||
.tle::after { | |||
content: ''; | |||
position: absolute; | |||
left: -15px; | |||
bottom: 10px; | |||
width: 65%; | |||
height: 6px; /* 横线高度为文字高度的一半 */ | |||
background-color: #07CAAF;; /* 横线颜色与文字颜色相同 */ | |||
z-index: -1; | |||
} | |||
.el-button { | |||
font-size: 16px; | |||
font-weight: bold; | |||
color: #07CAAF; | |||
line-height: 48px; | |||
z-index: 999; | |||
} | |||
} | |||
} | |||
#hotList { | |||
//height: 90%; | |||
height: 76%; | |||
display: flex; | |||
flex-wrap: wrap; | |||
justify-content: space-between; | |||
align-items: center; | |||
.list { | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
margin-right: 39px; | |||
z-index: 999; | |||
img { | |||
width: 150px; | |||
height: 112px; | |||
border-radius: 10px; | |||
} | |||
a { | |||
font-size: 14px; | |||
font-weight: 400; | |||
color: #010101; | |||
margin-top: 14px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
width: 150px; | |||
//line-height: 48px; | |||
} | |||
} | |||
} | |||
} | |||
.bottom { | |||
min-height: 120px; | |||
background-image: url('../../assets/bottom.png'); | |||
@@ -345,40 +228,6 @@ export default { | |||
padding: 0; | |||
.content { | |||
margin-top: 30px; | |||
.top { | |||
//min-height: 470px; | |||
//margin-bottom: 40px; | |||
background-color: #FFFFFF; | |||
display: flex; | |||
background-image: url('../../assets/hotTopLeft.png'); | |||
background-position: 101% 0; /* 调整这些值来改变显示的部分 */ | |||
background-size: 30% 50%; /* 使用 'cover' 或 'contain',或者设置具体尺寸 */ | |||
background-repeat: no-repeat; | |||
#imgtxt { | |||
width: 560px; | |||
position: relative; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
margin-left: 20px; | |||
img { | |||
width: 560px; | |||
//height: 90%; | |||
} | |||
.newsTitle{ | |||
position: absolute; | |||
bottom: 5%; | |||
left: 0; | |||
display: inline-block; | |||
font-size: 18px; | |||
font-weight: bold; | |||
color: #FFFFFF; | |||
line-height: 48px; | |||
width: 100%; | |||
background-color: #0000007e; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
#wk { | |||