From ee382ffa5aef27af3705784fff1cb6b3cd245f75 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=88=91=E5=8F=ABMT?= <18253750314@163.com> Date: Fri, 12 Jan 2024 18:38:14 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/home.js | 4 +- src/views/home/index.vue | 203 +++++++++++++++++++++++++++++++++++++-- 2 files changed, 197 insertions(+), 10 deletions(-) diff --git a/src/api/home.js b/src/api/home.js index b834293..9ea1720 100644 --- a/src/api/home.js +++ b/src/api/home.js @@ -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}` }) } diff --git a/src/views/home/index.vue b/src/views/home/index.vue index 2677f33..d6b557c 100644 --- a/src/views/home/index.vue +++ b/src/views/home/index.vue @@ -25,8 +25,26 @@ +
+
+ + {{ hotnews.title }} +
+
+
+ 热点新闻 + MORE+ +
+
+ +
+
+
- + @@ -72,7 +90,7 @@ @@ -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; } } +