From 9cad6a832c786989be620573b09badccfe7e3b51 Mon Sep 17 00:00:00 2001
From: QYF-GitLab1 <1940665526@qq.com>
Date: 星期一, 25 八月 2025 15:11:37 +0800
Subject: [PATCH] 首页头部，样式调整
---
src/views/home/index.vue | 120 ++++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 85 insertions(+), 35 deletions(-)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index f836b74..1a75856 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -32,12 +32,7 @@
<div class="more" @click="toMore">鏇村></div>
</div>
<div class="recommendList">
- <div
- class="recommendItem"
- v-for="item in bookListData"
- :key="item.id"
- @click="toDetail(item)"
- >
+ <div class="recommendItem" v-for="item in bookListData" :key="item.id" @click="toDetail(item)">
<div class="recommendItemImg">
<img class="autoImg" :src="item.icon" />
</div>
@@ -80,24 +75,14 @@
<div>鏁欏瀵艰埅</div>
<div class="titleTabs" v-if="classfeild.length > 0">
<el-tabs v-model="activeName" @tab-change="handleClick">
- <el-tab-pane
- v-for="item in classfeild"
- :key="item.value"
- :label="item.name"
- :name="item.value"
- />
+ <el-tab-pane v-for="item in classfeild" :key="item.value" :label="item.name" :name="item.value" />
</el-tabs>
</div>
<div class="more" style="margin-left: 20px" @click="toMore">鏇村></div>
</div>
</div>
<div class="recommendList">
- <div
- class="recommendItem"
- v-for="item in navBookList"
- :key="item.id"
- @click="toDetail(item)"
- >
+ <div class="recommendItem" v-for="item in navBookList" :key="item.id" @click="toDetail(item)">
<div class="recommendItemImg">
<img class="autoImg" :src="item.icon" />
</div>
@@ -124,10 +109,11 @@
import moment from 'moment'
import { ElMessage } from 'element-plus'
import teacherCertification from '@/views/personalCenter/teacherCertification.vue'
-import { ref, onBeforeMount, inject, reactive, onMounted } from 'vue'
+import { ref, onBeforeMount, inject, reactive, onMounted, watch } from 'vue'
let screenheight = ref(document.documentElement.clientHeight / 2)
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
+const route = useRoute()
const MG = inject('MG')
const config = inject('config')
@@ -138,6 +124,7 @@
const informationList = reactive([])
let classfeild = ref([])
let activeName = ref('A1')
+let callbackLink = ref(null)
let bookListData = ref([])
let navBookList = ref([])
@@ -180,6 +167,13 @@
getBookList()
getNavBookList()
})
+
+watch(
+ () => route, // 鐩戝惉 path 鍙樺寲
+ (newPath, oldPath) => {
+ console.log('璺敱璺緞浠�', oldPath, '鍙樹负', newPath)
+ },
+)
const toMore = () => {
router.push({
@@ -352,6 +346,7 @@
background-color: #fff;
padding-bottom: 100px;
}
+
.el-carousel__item h3 {
color: #475669;
opacity: 0.75;
@@ -371,6 +366,7 @@
.informationList {
display: flex;
flex-wrap: wrap;
+
.informationItem {
display: flex;
width: 42%;
@@ -381,14 +377,17 @@
border-radius: 10px;
padding: 10px;
cursor: pointer;
+
.imgBox {
width: 30%;
height: 100%;
position: relative;
}
+
.informationContent {
width: 70%;
padding-left: 10px;
+
.informationTitle {
font-size: 14px;
width: 100%;
@@ -399,26 +398,34 @@
font-weight: bold;
margin-bottom: 10px;
}
+
.informationDate {
margin-top: 10px;
}
+
.informationText {
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
margin-top: 10px;
- display: -webkit-box; /* 灏嗗璞′綔涓哄脊鎬т几缂╃洅瀛愭ā鍨嬫樉绀� */
- -webkit-line-clamp: 3; /* 鏄剧ず鐨勮鏁� */
- -webkit-box-orient: vertical; /* 璁剧疆鎴栨绱几缂╃洅瀵硅薄鐨勫瓙鍏冪礌鐨勬帓鍒楁柟寮� */
- overflow: hidden; /* 婧㈠嚭闅愯棌 */
+ display: -webkit-box;
+ /* 灏嗗璞′綔涓哄脊鎬т几缂╃洅瀛愭ā鍨嬫樉绀� */
+ -webkit-line-clamp: 3;
+ /* 鏄剧ず鐨勮鏁� */
+ -webkit-box-orient: vertical;
+ /* 璁剧疆鎴栨绱几缂╃洅瀵硅薄鐨勫瓙鍏冪礌鐨勬帓鍒楁柟寮� */
+ overflow: hidden;
+ /* 婧㈠嚭闅愯棌 */
}
}
}
- .informationItem:hover {
- border: 1px solid #019e58;
- }
+
+ // .informationItem:hover {
+ // border: 1px solid #019e58;
+ // }
}
+
.bookListBox {
width: 100%;
padding: 80px 0;
@@ -437,52 +444,80 @@
.recommendItem {
flex: 1;
margin-right: 20px;
- height: 300px;
+ width: 261px;
+ height: 389px;
background-repeat: no-repeat;
background-size: 100% 100%;
cursor: pointer;
border: 1px solid #dedede;
background-color: #fff;
padding-top: 10px;
+ background: rgba(255, 255, 255, 0.73);
+ border-radius: 8px 8px 8px 8px;
+ border: 1px solid #DEDEDE;
+ box-sizing: border-box;
+ padding: 30px 0;
+
&:last-child {
margin-right: 0;
}
}
+
.recommendItem:hover {
background-image: url(@/assets/images/Mouse_fill.png);
+ background-position: center;
+ background-size: 100% 100%;
+ background-repeat: no-repeat;
}
}
.recommendItemImg {
- width: 150px;
- height: 200px;
+ width: 156px;
+ height: 210px;
position: relative;
margin: 0 auto;
}
.infoBox {
text-align: center;
- margin-top: 10px;
+ padding: 20px 0;
+ box-sizing: border-box;
+ font-family: Microsoft YaHei UI, Microsoft YaHei UI;
+ box-sizing: border-box;
}
+
.bookName {
+ font-weight: bold;
+ font-size: 18px;
+ color: #000000;
font-weight: 700;
}
+
.author {
- margin-top: 10px;
+ font-weight: 400;
+ font-size: 16px;
color: #333333;
+ padding: 15px 0;
+ box-sizing: border-box;
}
+
.priceBox {
- margin-top: 10px;
+ font-family: DIN, DIN;
+ font-weight: 500;
+ font-size: 18px;
+ color: #D91523;
+ padding: 15px 0;
+ box-sizing: border-box;
+
.oldPrice {
- font-size: 16px;
color: #999999;
text-decoration: line-through;
margin-left: 20px;
}
+
.price {
span {
font-weight: bold;
- font-size: 14px;
color: #d91523;
}
}
@@ -494,6 +529,7 @@
align-items: center;
margin-top: 60px;
margin-bottom: 60px;
+
.authentication {
width: 40%;
height: 100px;
@@ -501,6 +537,7 @@
background-size: 100% 100%;
background-image: url('@/assets/images/xiehe/home/jiaoshirenzheng.png');
}
+
.manual {
width: 40%;
height: 100px;
@@ -512,8 +549,9 @@
.titleTabs {
margin-left: 50px;
- width: 75%;
+ width: 85%;
}
+
.bookListTitle {
display: flex;
justify-content: space-between;
@@ -522,30 +560,42 @@
border-bottom: 1px solid #ebebeb;
padding-bottom: 20px;
+
.title {
font-size: 20px;
color: #333333;
font-weight: bold;
}
+
.more {
font-size: 14px;
color: #999999;
cursor: pointer;
}
}
+
.cardNav {
margin-left: 30%;
margin-top: 20px;
padding-right: 20px;
cursor: pointer;
+
.cardTitle {
font-size: 28px;
color: #ffffff;
}
+
.cardText {
font-size: 14px;
color: #ccc;
margin-top: 10px;
}
}
+
+::v-deep(.el-tabs__item) {
+ align-items: stretch;
+ height: 50px !important;
+ white-space: pre-wrap !important;
+ width: 40% !important;
+}
</style>
--
Gitblit v1.9.1