fix: 🐛 商品详情页骨架屏h5样式兼容

This commit is contained in:
jqtmviyu 2025-05-15 15:54:01 +08:00
parent 521739000d
commit 594a1024a0
3 changed files with 311 additions and 304 deletions

View File

@ -18,29 +18,31 @@
<view class="indicator indicator">
<text class="current sk-transparent sk-opacity">1</text>
<text class="split sk-transparent sk-opacity">/</text>
<text class="total sk-transparent sk-opacity">4</text>
<text class="total sk-transparent sk-opacity">5</text>
</view>
</view>
<view class="meta meta">
<view class="price price">
<text class="symbol sk-transparent sk-opacity">¥</text>
<text class="number sk-transparent sk-text-14-2857-867 sk-text">128.00</text>
<text class="number sk-transparent sk-text-14-2857-753 sk-text">680.00</text>
</view>
<view class="name ellipsis sk-transparent sk-text-14-2857-403 sk-text"
>钻石陶瓷涂层多用锅18cm 小奶锅</view
<view class="name ellipsis sk-transparent sk-text-14-2857-523 sk-text"
>朱炳仁·铜彩色生肖铜雕摆件</view
>
<view class="desc sk-transparent sk-text-0-0000-598 sk-text"
>十二生肖萌宝系列吉祥物吉祥又好运app</view
>
<view class="desc sk-transparent sk-text-0-0000-460 sk-text">安全耐用易于清洗APP</view>
</view>
<view class="action action">
<view class="item arrow sk-pseudo sk-pseudo-circle">
<text class="label sk-transparent sk-text-14-2857-126 sk-text">选择</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-698 sk-text">
请选择商品规格
</text>
<text class="label sk-transparent sk-text-14-2857-553 sk-text">选择</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-33 sk-text"
>请选择商品规格</text
>
</view>
<view class="item arrow sk-pseudo sk-pseudo-circle">
<text class="label sk-transparent sk-text-14-2857-337 sk-text">送至</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-169 sk-text">
<text class="label sk-transparent sk-text-14-2857-845 sk-text">送至</text>
<text class="text ellipsis sk-transparent sk-text-14-2857-637 sk-text">
请选择收货地址
</text>
</view>
@ -59,19 +61,19 @@
>
<text class="icon-handset sk-pseudo sk-pseudo-circle"></text>客服
</button>
<navigator :render-link="false" class="icons-button sk-transparent" open-type="switchTab">
<text class="icon-cart sk-pseudo sk-pseudo-circle"></text>购物车
<navigator class="icons-button sk-transparent" open-type="navigate">
<text class="icon-cart sk-pseudo sk-pseudo-circle"></text>
</navigator>
</view>
<view class="buttons buttons">
<view
class="addcart sk-transparent sk-text-31-9444-431 sk-text"
class="addcart sk-transparent sk-text-31-9444-934 sk-text"
style="background-position-x: 50%"
>
加入购物车
</view>
<view
class="buynow sk-transparent sk-text-31-9444-819 sk-text"
class="payment sk-transparent sk-text-31-9444-376 sk-text"
style="background-position-x: 50%"
>
立即购买
@ -81,14 +83,18 @@
</view>
</template>
<style>
<style lang="scss">
/* #ifdef H5 */
@import '../goods.scss';
/* #endif */
.sk-transparent {
color: transparent !important;
}
.sk-opacity {
opacity: 0 !important;
}
.sk-text-14-2857-867 {
.sk-text-14-2857-753 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -105,7 +111,7 @@
color: transparent !important;
background-repeat: repeat-y !important;
}
.sk-text-14-2857-403 {
.sk-text-14-2857-523 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -115,7 +121,7 @@
background-size: 100% 44.8rpx;
position: relative !important;
}
.sk-text-0-0000-460 {
.sk-text-0-0000-598 {
background-image: linear-gradient(
transparent 0%,
#eeeeee 0%,
@ -125,7 +131,7 @@
background-size: 100% 24rpx;
position: relative !important;
}
.sk-text-14-2857-126 {
.sk-text-14-2857-553 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -135,7 +141,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-698 {
.sk-text-14-2857-33 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -145,7 +151,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-337 {
.sk-text-14-2857-845 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -155,7 +161,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-14-2857-169 {
.sk-text-14-2857-637 {
background-image: linear-gradient(
transparent 14.2857%,
#eeeeee 0%,
@ -165,7 +171,7 @@
background-size: 100% 36.4rpx;
position: relative !important;
}
.sk-text-31-9444-431 {
.sk-text-31-9444-934 {
background-image: linear-gradient(
transparent 31.9444%,
#eeeeee 0%,
@ -175,7 +181,7 @@
background-size: 100% 72rpx;
position: relative !important;
}
.sk-text-31-9444-819 {
.sk-text-31-9444-376 {
background-image: linear-gradient(
transparent 31.9444%,
#eeeeee 0%,

279
src/pages/goods/goods.scss Normal file
View File

@ -0,0 +1,279 @@
page {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.viewport {
background-color: #f4f4f4;
flex: 1;
height: 100%;
}
/* 商品信息 */
.goods {
background-color: #fff;
.preview {
height: 750rpx;
position: relative;
.swiper {
height: 750rpx;
}
.image {
width: 750rpx;
height: 750rpx;
}
.indicator {
height: 40rpx;
padding: 0 24rpx;
line-height: 40rpx;
border-radius: 30rpx;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
bottom: 30rpx;
right: 30rpx;
.current {
font-size: 26rpx;
}
.split {
font-size: 24rpx;
margin: 0 1rpx 0 2rpx;
}
.total {
font-size: 24rpx;
}
}
}
.meta {
position: relative;
border-bottom: 1rpx solid #eaeaea;
.price {
height: 130rpx;
padding: 25rpx 30rpx 0;
color: #fff;
font-size: 34rpx;
box-sizing: border-box;
background-color: #35c8a9;
}
.number {
font-size: 56rpx;
}
.brand {
width: 160rpx;
height: 80rpx;
overflow: hidden;
position: absolute;
top: 26rpx;
right: 30rpx;
}
.name {
max-height: 88rpx;
line-height: 1.4;
margin: 20rpx;
font-size: 32rpx;
color: #333;
}
.desc {
line-height: 1;
padding: 0 20rpx 30rpx;
font-size: 24rpx;
color: #cf4444;
}
}
.action {
padding-left: 20rpx;
.item {
height: 90rpx;
padding-right: 60rpx;
border-bottom: 1rpx solid #eaeaea;
font-size: 26rpx;
color: #333;
position: relative;
display: flex;
align-items: center;
&:last-child {
border-bottom: 0 none;
}
}
.label {
width: 60rpx;
color: #898b94;
margin: 0 16rpx 0 10rpx;
}
.text {
flex: 1;
-webkit-line-clamp: 1;
}
}
}
.panel {
margin-top: 20rpx;
background-color: #fff;
.title {
display: flex;
justify-content: space-between;
align-items: center;
height: 90rpx;
line-height: 1;
padding: 30rpx 60rpx 30rpx 6rpx;
position: relative;
text {
padding-left: 10rpx;
font-size: 28rpx;
color: #333;
font-weight: 600;
border-left: 4rpx solid #27ba9b;
}
navigator {
font-size: 24rpx;
color: #666;
}
}
}
.arrow {
&::after {
position: absolute;
top: 50%;
right: 30rpx;
content: '\e6c2';
color: #ccc;
font-family: 'erabbit' !important;
font-size: 32rpx;
transform: translateY(-50%);
}
}
/* 商品详情 */
.detail {
padding-left: 20rpx;
.content {
margin-left: -20rpx;
.image {
width: 100%;
}
}
.properties {
padding: 0 20rpx;
margin-bottom: 30rpx;
.item {
display: flex;
line-height: 2;
padding: 10rpx;
font-size: 26rpx;
color: #333;
border-bottom: 1rpx dashed #ccc;
}
.label {
width: 200rpx;
}
.value {
flex: 1;
}
}
}
/* 同类推荐 */
.similar {
.content {
padding: 0 20rpx 200rpx;
background-color: #f4f4f4;
display: flex;
flex-wrap: wrap;
.goods {
width: calc(375rpx - 60rpx - 14rpx);
padding: 24rpx 20rpx 20rpx;
margin: 20rpx 7rpx;
border-radius: 10rpx;
background-color: #fff;
}
.image {
width: 100%;
}
.name {
height: 80rpx;
margin: 10rpx 0;
font-size: 26rpx;
color: #262626;
}
.price {
line-height: 1;
font-size: 20rpx;
color: #cf4444;
}
.number {
font-size: 26rpx;
margin-left: 2rpx;
}
}
navigator {
&:nth-child(even) {
margin-right: 0;
}
}
}
/* 底部工具栏 */
.toolbar {
position: fixed;
left: 0;
right: 0;
bottom: calc((var(--window-bottom)));
z-index: 1;
background-color: #fff;
height: 100rpx;
padding: 0 20rpx;
border-top: 1rpx solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
.buttons {
display: flex;
& > view {
width: 220rpx;
text-align: center;
line-height: 72rpx;
font-size: 26rpx;
color: #fff;
border-radius: 72rpx;
}
.addcart {
background-color: #ffa868;
}
.payment {
background-color: #27ba9b;
margin-left: 20rpx;
}
}
.icons {
padding-right: 20rpx;
display: flex;
align-items: center;
flex: 1;
// 兼容 H5 端和 App 端的导航链接样式
.navigator-wrap,
.icons-button {
flex: 1;
text-align: center;
line-height: 1.4;
padding: 0;
margin: 0;
border-radius: 0;
font-size: 20rpx;
color: #333;
background-color: #fff;
&::after {
border: none;
}
}
text {
display: block;
font-size: 34rpx;
}
}
}

View File

@ -286,283 +286,5 @@ const handlerBuyNow = (e: SkuPopupEvent) => {
</script>
<style lang="scss">
page {
height: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
}
.viewport {
background-color: #f4f4f4;
flex: 1;
height: 100%;
}
/* 商品信息 */
.goods {
background-color: #fff;
.preview {
height: 750rpx;
position: relative;
.swiper {
height: 750rpx;
}
.image {
width: 750rpx;
height: 750rpx;
}
.indicator {
height: 40rpx;
padding: 0 24rpx;
line-height: 40rpx;
border-radius: 30rpx;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
background-color: rgba(0, 0, 0, 0.3);
position: absolute;
bottom: 30rpx;
right: 30rpx;
.current {
font-size: 26rpx;
}
.split {
font-size: 24rpx;
margin: 0 1rpx 0 2rpx;
}
.total {
font-size: 24rpx;
}
}
}
.meta {
position: relative;
border-bottom: 1rpx solid #eaeaea;
.price {
height: 130rpx;
padding: 25rpx 30rpx 0;
color: #fff;
font-size: 34rpx;
box-sizing: border-box;
background-color: #35c8a9;
}
.number {
font-size: 56rpx;
}
.brand {
width: 160rpx;
height: 80rpx;
overflow: hidden;
position: absolute;
top: 26rpx;
right: 30rpx;
}
.name {
max-height: 88rpx;
line-height: 1.4;
margin: 20rpx;
font-size: 32rpx;
color: #333;
}
.desc {
line-height: 1;
padding: 0 20rpx 30rpx;
font-size: 24rpx;
color: #cf4444;
}
}
.action {
padding-left: 20rpx;
.item {
height: 90rpx;
padding-right: 60rpx;
border-bottom: 1rpx solid #eaeaea;
font-size: 26rpx;
color: #333;
position: relative;
display: flex;
align-items: center;
&:last-child {
border-bottom: 0 none;
}
}
.label {
width: 60rpx;
color: #898b94;
margin: 0 16rpx 0 10rpx;
}
.text {
flex: 1;
-webkit-line-clamp: 1;
}
}
}
.panel {
margin-top: 20rpx;
background-color: #fff;
.title {
display: flex;
justify-content: space-between;
align-items: center;
height: 90rpx;
line-height: 1;
padding: 30rpx 60rpx 30rpx 6rpx;
position: relative;
text {
padding-left: 10rpx;
font-size: 28rpx;
color: #333;
font-weight: 600;
border-left: 4rpx solid #27ba9b;
}
navigator {
font-size: 24rpx;
color: #666;
}
}
}
.arrow {
&::after {
position: absolute;
top: 50%;
right: 30rpx;
content: '\e6c2';
color: #ccc;
font-family: 'erabbit' !important;
font-size: 32rpx;
transform: translateY(-50%);
}
}
/* 商品详情 */
.detail {
padding-left: 20rpx;
.content {
margin-left: -20rpx;
.image {
width: 100%;
}
}
.properties {
padding: 0 20rpx;
margin-bottom: 30rpx;
.item {
display: flex;
line-height: 2;
padding: 10rpx;
font-size: 26rpx;
color: #333;
border-bottom: 1rpx dashed #ccc;
}
.label {
width: 200rpx;
}
.value {
flex: 1;
}
}
}
/* 同类推荐 */
.similar {
.content {
padding: 0 20rpx 200rpx;
background-color: #f4f4f4;
display: flex;
flex-wrap: wrap;
.goods {
width: calc(375rpx - 60rpx - 14rpx);
padding: 24rpx 20rpx 20rpx;
margin: 20rpx 7rpx;
border-radius: 10rpx;
background-color: #fff;
}
.image {
width: 100%;
}
.name {
height: 80rpx;
margin: 10rpx 0;
font-size: 26rpx;
color: #262626;
}
.price {
line-height: 1;
font-size: 20rpx;
color: #cf4444;
}
.number {
font-size: 26rpx;
margin-left: 2rpx;
}
}
navigator {
&:nth-child(even) {
margin-right: 0;
}
}
}
/* 底部工具栏 */
.toolbar {
position: fixed;
left: 0;
right: 0;
bottom: calc((var(--window-bottom)));
z-index: 1;
background-color: #fff;
height: 100rpx;
padding: 0 20rpx;
border-top: 1rpx solid #eaeaea;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: content-box;
.buttons {
display: flex;
& > view {
width: 220rpx;
text-align: center;
line-height: 72rpx;
font-size: 26rpx;
color: #fff;
border-radius: 72rpx;
}
.addcart {
background-color: #ffa868;
}
.payment {
background-color: #27ba9b;
margin-left: 20rpx;
}
}
.icons {
padding-right: 20rpx;
display: flex;
align-items: center;
flex: 1;
// H5 App
.navigator-wrap,
.icons-button {
flex: 1;
text-align: center;
line-height: 1.4;
padding: 0;
margin: 0;
border-radius: 0;
font-size: 20rpx;
color: #333;
background-color: #fff;
&::after {
border: none;
}
}
text {
display: block;
font-size: 34rpx;
}
}
}
@import './goods.scss';
</style>