From 672575a32ecd7f8e0bcd76152040657e9e57328a Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期五, 12 四月 2024 16:36:41 +0800 Subject: [PATCH] 骨架屏样式优化 --- pages/home/home.wxss | 57 ++++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 48 insertions(+), 9 deletions(-) diff --git a/pages/home/home.wxss b/pages/home/home.wxss index 6dcae7a..b7a1c52 100644 --- a/pages/home/home.wxss +++ b/pages/home/home.wxss @@ -1,3 +1,5 @@ +@import "./home.skeleton.wxss"; + .background { width: 100%; position: fixed; @@ -29,7 +31,7 @@ } .home-page-header { - padding-top: 230rpx; + padding-top: 180rpx; } .home-page-header .bg { @@ -58,7 +60,40 @@ .home-page-header .swiper-wrap { margin-top: 30rpx; margin-bottom: 10rpx; + height: 380rpx; + width: 100%; + border-radius: 18rpx; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + background: #f6f6f6; } + +.swiper { + height: 380rpx; + width: 100%; +} + +.swiperItem { + position: relative; + height: 380rpx; + width: 100%; +} + +.swiper .img { + max-width: 100% !important; + /* max-height: 100% !important; */ + width: auto !important; + /* height: auto !important; */ + position: absolute !important; + top: 0 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + margin: auto !important; +} + .home-page-menu .t-grid--card { margin: 0; @@ -97,7 +132,7 @@ margin-top: 20rpx; display: block; padding: 0 24rpx; - padding-bottom: 10vh; + margin-bottom: 11vh; } .tabCardPublic { @@ -212,6 +247,7 @@ text-overflow: ellipsis; /* 瓒呭嚭閮ㄥ垎鏄剧ず鐪佺暐鍙� */ white-space: normal; + flex: 1; } .body-info .price { @@ -227,9 +263,9 @@ color: #ff6d00; font-size: 30rpx; background-repeat: no-repeat; - background-size: 34% 64%; + background-size: 40% 64%; background-position: right; - background-image: url(http://182.92.203.7:3007/jsek/website/image/click-icon.png); + background-image: url(https://jsek.bnuic.com/website/image/click-icon.png); } .t-tabs .t-tabs__track { @@ -343,6 +379,7 @@ .listBox3 .body-info { width: calc(100% - 190rpx); + padding: 10rpx; } .listBox3 .name { @@ -352,7 +389,7 @@ font-weight: bold; line-height: 40rpx; display: -webkit-box; - margin-bottom: 10rpx; + margin-bottom: 12rpx; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; @@ -364,7 +401,6 @@ color: #B4B6BD; line-height: 36rpx; display: -webkit-box; - margin-bottom: 14rpx; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; @@ -373,7 +409,7 @@ .listBox3 .author { line-height: 40rpx; - margin-bottom: 20rpx; + margin: 16rpx 0; } .readList { @@ -386,12 +422,15 @@ .srcolbox { width: 100%; - height: 420rpx; + height: 400rpx; white-space: nowrap; } +.booksListBox { + display: flex; +} + .srcolbox .booksListItemBox { - display: inline-block; width: 188rpx; margin-right: 30rpx; } -- Gitblit v1.9.1