chutingting 1 rok temu
rodzic
commit
7747e3a10e
6 zmienionych plików z 63 dodań i 384 usunięć
  1. +33
    -9
      src/components/hotNews/index.vue
  2. +1
    -1
      src/components/swiperHor/index.vue
  3. +0
    -1
      src/views/about/index.vue
  4. +5
    -173
      src/views/home/index.vue
  5. +6
    -31
      src/views/information/index.vue
  6. +18
    -169
      src/views/metadaily/index.vue

+ 33
- 9
src/components/hotNews/index.vue Wyświetl plik

@@ -1,17 +1,17 @@
<template> <template>
<div class="hotnews" > <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>
<div class="hottxt"> <div class="hottxt">
<div id="htitle">
<div class="htitle">
<a class="tle">热点新闻</a> <a class="tle">热点新闻</a>
<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 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> <a>{{ item.title }}</a>
</div> </div>
</div> </div>
@@ -19,12 +19,36 @@
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable */
export default { export default {
props: { 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() { data() {
return {}
return {
firstData: {},
listData: []
}
},
methods: {
routerTo() {
this.$router.push({ path: '/articleList' })
},
routerToarticleDetails() {
localStorage.setItem('article', value)
this.$router.push({ path: '/articleDetails' })
}
} }
} }
</script> </script>
@@ -66,7 +90,6 @@ export default {


.hottxt { .hottxt {
display: flex; display: flex;
justify-content: space-around;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
flex: 1; flex: 1;
@@ -76,6 +99,7 @@ export default {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
width: 95%; width: 95%;
margin-top: 15px;
.tle { .tle {
z-index: 9; z-index: 9;
font-size: 26px; font-size: 26px;


+ 1
- 1
src/components/swiperHor/index.vue Wyświetl plik

@@ -28,7 +28,7 @@
<!-- Add Pagination --> <!-- Add Pagination -->
<!-- <div class="swiper-paginationhor"></div> --> <!-- <div class="swiper-paginationhor"></div> -->
</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> <VideoDialog :url="videoUrl"></VideoDialog>
</el-dialog> </el-dialog>
</div> </div>


+ 0
- 1
src/views/about/index.vue Wyświetl plik

@@ -234,7 +234,6 @@ export default {
.content { .content {
align-items: center; align-items: center;
} }
padding-bottom: 80px;
.top { .top {
min-height: 470px; min-height: 470px;
margin-bottom: 40px; margin-bottom: 40px;


+ 5
- 173
src/views/home/index.vue Wyświetl plik

@@ -25,24 +25,7 @@
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</div> </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"> <a :href="gg1.link" v-if="gg1.img" target="_blank">
<img class="bottom" :src="gg1.img" alt=""> <img class="bottom" :src="gg1.img" alt="">
</a> </a>
@@ -84,7 +67,7 @@
</a> </a>
</div> </div>
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" width="50%"> <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> </el-dialog>
</div> </div>
</template> </template>
@@ -93,6 +76,7 @@
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig, hotnews } from '@/api/home.js' import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig, hotnews } from '@/api/home.js'
import Swiper from '@/components/swiper' import Swiper from '@/components/swiper'
import VideoDialog from '@/components/video' import VideoDialog from '@/components/video'
import HotNews from '@/components/hotNews'
export default { export default {
name: 'home', name: 'home',
@@ -114,7 +98,7 @@ export default {
hotnewsList: [] hotnewsList: []
} }
}, },
components: { Swiper, VideoDialog },
components: { Swiper, VideoDialog, HotNews },
mounted () { mounted () {
this.gethotnewsConfig() this.gethotnewsConfig()
this.getlunboList() this.getlunboList()
@@ -190,17 +174,7 @@ export default {
const { data: { message, data } } = await hotnews() const { data: { message, data } } = await hotnews()
console.log(data) console.log(data)
if (message === 'success') { 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 { .top, .bottom {
width: 100%; 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 { .top {
// min-height: 470px; // min-height: 470px;
// background: black; // background: black;


+ 6
- 31
src/views/information/index.vue Wyświetl plik

@@ -3,24 +3,7 @@
<Swiper :banner-array="carouselList" /> <Swiper :banner-array="carouselList" />
<div id="hot"> <div id="hot">
<div class="content"> <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"> <a :href="gg1.link" v-if="gg1.img" target="_blank">
<img class="bottom" :src="gg1.img" alt=""> <img class="bottom" :src="gg1.img" alt="">
</a> </a>
@@ -63,7 +46,7 @@
</div> </div>
</div> </div>
<el-dialog title="" v-if="videoDialogVisible" :visible.sync="videoDialogVisible" width="50%"> <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> </el-dialog>
</div> </div>
</template> </template>
@@ -72,6 +55,7 @@
import Swiper from '@/components/swiper' import Swiper from '@/components/swiper'
import { lunboList, hotNewsConfig, guanggao, hotlist, videoList, carArticle } from '@/api/car.js' import { lunboList, hotNewsConfig, guanggao, hotlist, videoList, carArticle } from '@/api/car.js'
import VideoDialog from '@/components/video' import VideoDialog from '@/components/video'
import HotNews from '@/components/hotNews'
export default { export default {
name: 'information', name: 'information',
data () { data () {
@@ -97,7 +81,8 @@ export default {
}, },
components: { components: {
Swiper, Swiper,
VideoDialog
VideoDialog,
HotNews
}, },
mounted () { mounted () {
this.gethotnewsConfig() this.gethotnewsConfig()
@@ -144,17 +129,7 @@ export default {
async gethotlist () { async gethotlist () {
const { data: { message, data } } = await hotlist() const { data: { message, data } } = await hotlist()
if (message === 'success') { 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 () { async getvideoList () {


+ 18
- 169
src/views/metadaily/index.vue Wyświetl plik

@@ -3,24 +3,7 @@
<Swiper :banner-array="carouselList" /> <Swiper :banner-array="carouselList" />
<div id="hot"> <div id="hot">
<div class="content"> <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> </div>
<div class="gg" v-if="gg1.img" > <div class="gg" v-if="gg1.img" >
@@ -74,6 +57,7 @@
</template> </template>
<script> <script>
import Swiper from '@/components/swiper' import Swiper from '@/components/swiper'
import HotNews from '@/components/hotNews'
import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js' import { guanggao, lunboList, hotNewsConfig, shendu, zixun, hotnews } from '@/api/metadaily.js'
export default { export default {
name: 'metadaily', name: 'metadaily',
@@ -93,7 +77,8 @@ export default {
} }
}, },
components: { components: {
Swiper
Swiper,
HotNews
}, },
mounted () { mounted () {
this.gethotnewsConfig() this.gethotnewsConfig()
@@ -149,19 +134,20 @@ export default {
this.hotnewsList = [] this.hotnewsList = []
const { data: { message, data } } = await hotnews() const { data: { message, data } } = await hotnews()
if (message === 'success') { 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 () { async getshendu () {
@@ -231,109 +217,6 @@ export default {
.top, .bottom { .top, .bottom {
width: 100%; 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 { .bottom {
min-height: 120px; min-height: 120px;
background-image: url('../../assets/bottom.png'); background-image: url('../../assets/bottom.png');
@@ -345,40 +228,6 @@ export default {
padding: 0; padding: 0;
.content { .content {
margin-top: 30px; 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 { #wk {


Ładowanie…
Anuluj
Zapisz