Browse Source

首页

master
我叫MT 1 year ago
parent
commit
ee382ffa5a
2 changed files with 197 additions and 10 deletions
  1. +2
    -2
      src/api/home.js
  2. +195
    -8
      src/views/home/index.vue

+ 2
- 2
src/api/home.js View File

@@ -69,9 +69,9 @@ export const hotnewsConfig = () => {
* 热点新闻
* @returns request
*/
export const hotnews = (num = 1, size = 10) => {
export const hotnews = (num = 1, size = 7, type = 1, subType = 11) => {
return request({
method: 'GET',
url: `/news/list?type=1?pageNum=${num}&pageSize=${size}`
url: `/news/list?type=1&pageNum=${num}&pageSize=${size}&type=${type}&subType=${subType}`
})
}

+ 195
- 8
src/views/home/index.vue View File

@@ -25,8 +25,26 @@
</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>
<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>
</div>
</div>
@@ -72,7 +90,7 @@
</template>
<script>
/* eslint-disable */
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig } from '@/api/home.js'
import { lunboList, carNewsHotList, guanggao, link, yuanyuzhouHotList, hotnewsConfig, hotnews } from '@/api/home.js'
import Swiper from '@/components/swiper'
import VideoDialog from '@/components/video'
@@ -88,7 +106,12 @@ export default {
gg2: {},
alink: '',
daliay: [],
display: 0
display: 0,
hotnews: {
title: '这两款产品也将采用“CHN”的模式进行研发',
img: '/hotnew.png'
},
hotnewsList: []
}
},
components: { Swiper, VideoDialog },
@@ -99,8 +122,16 @@ export default {
this.getguanggao()
this.getLink()
this.getyuanyuzhouHotList()
this.gethotlist()
},
methods: {
routerToarticleDetails (value) {
localStorage.setItem('article', value)
this.$router.push({ path: '/articleDetails' })
},
routerTo () {
this.$router.push({ path: '/articleList' })
},
routerToCar () {
this.$router.push({ path: '/information' })
},
@@ -173,7 +204,24 @@ export default {
// id.pause()
// playid.style.display = 'block'
// }
}
},
async gethotlist () {
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
})
}
}
},
}
}
</script>
@@ -214,13 +262,151 @@ export default {
.content {
width: 1200px;
margin: 0 auto;
// height: 90%;
// display: flex;
// flex-direction: column;
// justify-content: space-between;
.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;
@@ -432,4 +618,5 @@ export default {
margin-left: -100px;
}
}
</style>

Loading…
Cancel
Save