-
+
-
{{ item.goodsName }}
+
+ 自营
+ {{ item.goodsName }}
+
{{ item.sellingPoint }}
{{ specSummary(item) }}
+
+
+ 已售 {{ item.buyCount || '0' }}
+ {{ item.commentNum }}条评论
+
¥{{ goodsFormatPrice(item.price )[0] }} .{{
@@ -66,25 +77,11 @@
¥{{ item.marketPrice }}
-
+
-
-
- 已售 {{ item.buyCount || '0' }}
- {{ item.commentNum || '0' }}条评论
-
-
-
+
+
自营
{{ item.storeName }}
进店
@@ -93,18 +90,20 @@
-
-
@@ -169,7 +188,7 @@ function navigateToList(sid: any, tid: any) {
@@ -183,36 +202,42 @@ page {
/* 解决H5 的问题 */
/* #ifdef H5 */
uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
- /* 隐藏滚动条,但依旧具备可以滚动的功能 */
display: none;
}
/* #endif */
-.s-list {
- box-shadow: 0 4rpx 12rpx 0 rgba(0, 0, 0, 0.05);
-}
-.nav-content {
- display: flex;
- align-items: center;
-}
-.nav-search-wrap {
- flex-shrink: 0;
-}
-.nav-search {
- width: 100%;
-}
-.title {
- flex-shrink: 0;
- text-align: center;
- font-size: 28rpx;
- padding-right: 16rpx;
- white-space: nowrap;
-}
+
.category-wrap {
- height: 100vh;
+ height: 100%;
+ min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
+ background-color: #ffffff;
+
+ .navbar {
+ border-bottom: 1rpx solid #f2f3f5;
+ }
+
+ .nav-search-box {
+ height: 64rpx;
+ background: #f4f5f7;
+ border-radius: 32rpx;
+ display: flex;
+ align-items: center;
+ padding: 0 24rpx;
+ margin-left: 24rpx;
+ box-sizing: border-box;
+ cursor: pointer;
+ }
+
+ .search-placeholder {
+ font-size: 26rpx;
+ color: #999999;
+ margin-left: 12rpx;
+ line-height: 1;
+ }
+
.content {
flex: 1;
min-height: 0;
@@ -220,85 +245,159 @@ uni-scroll-view .uni-scroll-view::-webkit-scrollbar {
display: flex;
color: #333;
font-size: 28rpx;
- background: #fff;
+ background: #ffffff;
overflow: hidden;
}
+
.left-aside {
flex-shrink: 0;
- width: 200rpx;
+ width: 176rpx;
height: 100%;
- background-color: #f7f7f7;
+ background-color: #f6f7f9;
+ border-right: 1rpx solid #ebebeb;
box-sizing: border-box;
}
+
.f-item {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
- height: 97rpx;
+ min-height: 96rpx;
+ padding: 16rpx 14rpx;
+ box-sizing: border-box;
+ font-size: 26rpx;
+ color: #666;
+ text-align: center;
+ line-height: 1.35;
position: relative;
+ transition: all 0.2s ease;
+
&.active {
- font-weight: bold;
+ font-weight: 600;
color: $light-color;
- background: #fff;
+ background: #ffffff;
+
+ &::before {
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 6rpx;
+ height: 36rpx;
+ border-radius: 0 4rpx 4rpx 0;
+ background: $light-color;
+ }
}
}
+
+ .f-text {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
.right-aside {
flex: 1;
height: 100%;
min-height: 0;
overflow: hidden;
- padding: 40rpx 0 0 30rpx;
+ padding: 20rpx 20rpx 40rpx;
box-sizing: border-box;
+ background: #f8f9fa;
}
.top-img {
- width: 500rpx;
- height: 230rpx;
- border-radius: 8px;
+ width: 100%;
+ height: 200rpx;
+ border-radius: 14rpx;
overflow: hidden;
- image {
- width: 100%;
- height: 100%;
- }
+ margin-bottom: 20rpx;
+ box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
}
- .s-item {
+
+ .s-list {
+ background: #ffffff;
+ border-radius: 16rpx;
+ padding: 24rpx 20rpx 12rpx;
+ margin-bottom: 20rpx;
+ box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.02);
+ }
+
+ .s-header {
display: flex;
align-items: center;
- height: 70rpx;
- padding-top: 16rpx;
- font-weight: 500;
+ justify-content: space-between;
+ padding-bottom: 16rpx;
+ cursor: pointer;
}
+
+ .s-item {
+ font-size: 26rpx;
+ font-weight: 600;
+ color: #222;
+ }
+
.t-list {
display: flex;
flex-wrap: wrap;
width: 100%;
- padding-top: 12rpx;
- }
- .margin-right {
- margin-right: 0 !important;
}
+
.t-item {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
- width: 150rpx;
- margin-right: 25rpx;
+ width: 33.333%;
+ padding: 10rpx 0 20rpx;
+ box-sizing: border-box;
+ }
+
+ .t-img-box {
+ width: 128rpx;
+ height: 128rpx;
+ border-radius: 12rpx;
+ overflow: hidden;
+ background: #f9f9f9;
+ margin-bottom: 12rpx;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+
+ .t-name {
font-size: 24rpx;
- padding-bottom: 20rpx;
- image {
- width: 140rpx;
- height: 140rpx;
- border-radius: 8px;
- margin-bottom: 20rpx;
- }
- ::v-deep .u-image {
- width: 140rpx !important;
- height: 140rpx !important;
- border-radius: 8px !important;
- margin-bottom: 20rpx !important;
- }
+ color: #333;
+ max-width: 140rpx;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ text-align: center;
+ line-height: 1.2;
}
}
+
+.tpl-goods-wrapper {
+ flex: 1;
+ min-height: 0;
+ height: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+/* #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO || MP-QQ */
+tpl-category-goods {
+ flex: 1;
+ min-height: 0;
+ height: 0;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+/* #endif */
diff --git a/utils/categoryPageSetting.js b/utils/categoryPageSetting.js
index 0976060..abd265b 100644
--- a/utils/categoryPageSetting.js
+++ b/utils/categoryPageSetting.js
@@ -6,7 +6,7 @@ export const DEFAULT_CATEGORY_PAGE_SETTING = {
tags: true,
selfTag: true,
price: true,
- linePrice: true,
+ linePrice: false,
sales: true,
cart: true,
},