From cb6bb8bda31df75afe5a5bd50fe8e3ff6a3d34e2 Mon Sep 17 00:00:00 2001 From: 闫增涛 <1829501689@qq.com> Date: 星期一, 15 四月 2024 09:31:39 +0800 Subject: [PATCH] 详情页bug修改,资源购买页添加骨架屏 --- packageBookService/pages/bookServices/detail/index.wxss | 187 ++++++++++++++++++++++++++++++++++++++++------ 1 files changed, 163 insertions(+), 24 deletions(-) diff --git a/packageBookService/pages/bookServices/detail/index.wxss b/packageBookService/pages/bookServices/detail/index.wxss index 0a96f52..454c921 100644 --- a/packageBookService/pages/bookServices/detail/index.wxss +++ b/packageBookService/pages/bookServices/detail/index.wxss @@ -1,5 +1,11 @@ /* pages/bookServices/detail/index.wxss */ +@import "./index.skeleton.wxss"; +.page-bookService { + width: 100vw; + height: 100%; + position: relative; +} .nacigationBar { background-color: #fff; @@ -8,24 +14,48 @@ } .navbar-title { + widows: 100vw; + display: flex; + justify-content: center; + + color: #0F1214; + font-size: 36rpx; +} + +.navbar-title text { + max-width: 8em; + display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - color: #0F1214; - font-size: 40rpx; - font-weight: bold; } .book { position: relative; - height: 81vh; + height: calc(100vh - env(safe-area-inset-bottom) - 141px); background-color: #F2F3F8; +} + +.book-img { + width: 240rpx; + height: 340rpx; + display: flex; + align-items: center; + box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16); +} + +.book-img image { + height: 340rpx; } .book-detail { padding: 32rpx; display: flex; border-radius: 0 0 20rpx 20rpx; +} + +.tmall-image { + width: 64rpx !important; } .detail-left { @@ -51,9 +81,6 @@ font-size: 36rpx; color: #000000; margin-bottom: 30rpx; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } .showTow { @@ -172,16 +199,10 @@ position: relative; font-size: 28rpx; opacity: 0.6; + text-decoration: line-through; + text-decoration-color: #fff; } -.line { - position: absolute; - top: 50%; - left: -5rpx; - width: 80%; - height: 3rpx; - background-color: #fff; -} .book-web { margin-left: 30rpx; @@ -200,7 +221,8 @@ /* 鍥句功璧勬簮 */ .book-resource { - min-height: 640rpx; + /* min-height: 640rpx; */ + min-height: calc(100vh - 900rpx); margin-top: 20rpx; background-color: #fff !important; } @@ -213,9 +235,9 @@ /* 搴曢儴 */ .box-bottom { - position: fixed; + position: absolute; left: 0; - bottom: 40rpx; + bottom: 0; width: 100%; height: 110rpx; } @@ -226,18 +248,27 @@ } .box-bottom image { - width: 36rpx; + width: 38rpx; height: 44rpx; } .bottom-btn { background-color: #fff; - width: 25%; + /* width: 25%; */ display: flex; + flex: 2; align-items: center; justify-content: center; flex-direction: column; box-sizing: border-box; +} + +.tryRead { + flex: 1 !important; +} + +.try { + flex: 2 !important; } .btn-text { @@ -249,17 +280,29 @@ margin-bottom: 6rpx; } -.bottom-btn:nth-child(1) { +.bottom-btn:nth-child(1), +.bottom-btn:nth-child(2) { border-right: 1px solid #DDD; } .shopCar, .buy { + font-size: 26rpx; width: 25%; display: flex; align-items: center; justify-content: center; color: #fff; + flex: 2; +} + +.read { + width: 50%; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + background-color: #F14B3B; } .shopCarColor { @@ -268,6 +311,11 @@ .buyColor { background-color: #F14B3B; +} + +.receiveColor { + background-color: #F14B3B; + width: 50% !important; } .disabledColor { @@ -280,7 +328,9 @@ .tab-class { - --td-loading-color: #ff6c00 + --td-loading-color: #ff6c00; + --td-tab-nav-bg-color: #fff; + --td-tab-track-color: #ff6c00 } .loading { @@ -298,6 +348,95 @@ } .noData { - /* width: 500rpx; - height: 500rpx; */ + height: 100%; +} + +.movable-area { + width: 100%; + min-height: calc(100vh - 900rpx); + height: 100%; +} + +.movable-view { + width: 184rpx; + height: 184rpx; + top: 400rpx; + left: 520rpx; + z-index: 99; +} + +.applyBox { + width: 184rpx; + height: 184rpx; + position: absolute; + bottom: 20%; + right: 0; +} + +.applyBox .box { + width: 184rpx; + height: 184rpx; + color: #fff; + position: relative; +} + +.applyBox .box .t-image { + width: 100%; + height: 100%; +} + +.num { + background-color: #FD3D16; + color: #fff; + border: 2rpx solid #FFFFFF; + font-size: 24rpx; + line-height: 30rpx; + font-weight: 400; + width: 48rpx; + height: 32rpx; + text-align: center; + border-radius: 9px; + position: absolute; + top: 30rpx; + left: 118rpx; +} + +.webView { + height: 500rpx; +} + +.t-tabs__item-inner { + flex-direction: column; +} + +.t-tabs .t-tabs__item--active { + /* color: #ff6d00; + font-size: 30rpx; */ + background-repeat: no-repeat; + background-size: 40% 64%; + background-position: right; + background-image: url(http://jsysf.bnuic.com/website/image/click-icon.png); +} + +.loading { + width: 100%; + height: 100%; + display: flex; + align-items: center; +} + +.suggest-component .t-input__placeholder { + font-size: 28rpx !important; +} + +.suggest-dialog .t-input__placeholder { + font-size: 28rpx !important; +} + +.t-tabs__item-inner { + font-size: 24rpx; +} + +.t-tabs__item-inner .t-icon { + margin-bottom: 6rpx; } \ No newline at end of file -- Gitblit v1.9.1