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 @@
+
-
+
@@ -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;
}
}
+