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