From d875642d99570c04434433759aaf8b1830567a2a Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Tue, 21 Jul 2026 09:41:25 +0800 Subject: [PATCH] =?UTF-8?q?feat(diy-category):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E6=A8=A1=E6=9D=BF1=E5=92=8C=E6=A8=A1=E6=9D=BF4=E5=88=86?= =?UTF-8?q?=E7=B1=BB=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F=E4=B8=8E=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. 新增模板4：顶部图片搜索框、左侧一级分类列表、底部购物车栏 2. 新增模板1：仿京东淘宝分类布局，支持三级分类分组展示商品 3. 优化模板1样式：调整分类栏、商品列表、标签样式 4. 修复模板切换时的搜索框重复渲染问题 5. 新增模板1、3、4的专属UI样式和交互逻辑 --- components-diy/diy-category-item.vue | 879 ++++++++++++++++++++++++--- components-diy/diy-category.vue | 348 ++++++++++- 2 files changed, 1130 insertions(+), 97 deletions(-) diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 9c6e419..70c2da9 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -45,27 +45,96 @@ - - {{ category.category_name }} + + + + {{ one.category_name }} + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + + + + + {{ category.category_name }} + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + + + + {{ category.category_name }} - + {{ one.category_name }} - + - {{ one.category_name }} + {{ one.category_name }} - + {{ two.category_name }} @@ -74,11 +143,44 @@ + + + {{ category.category_name }} + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + - + {{ $lang('components-diy.diy-category-item.all') }} + v-for="(one, oneIndex) in (value.template == 4 ? currentOneCategory.child_list : category.child_list)" :key="oneIndex"> {{ one.category_name }} @@ -99,7 +201,7 @@ :class="{ 'screen-category-4': value.template == 4 }"> {{ $lang('components-diy.diy-category-item.all') }} {{ one.category_name }} @@ -112,8 +214,9 @@ @scrolltolower="scrolltolower" @touchstart="touchstart" @touchend="touchend" @scroll="listenScroll"> - {{ category.category_name - }} + + {{ category.category_name }} + {{ item.label_name }} - + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + + {{ $lang('common.currencySymbol') }} + {{ + parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ + parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + {{ $lang('common.currencySymbol') }} + {{ showMarketPrice(item) }} + + + + {{ $lang('components-diy.diy-category-item.buyNow') }} + + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} @@ -141,58 +272,67 @@ + v-if="item.member_price && item.member_price == showPrice(item) && value.template != 4"> - + + + + {{ $lang('common.currencySymbol') }} + {{ showMarketPrice(item) }} + + v-if="showMarketPrice(item) && value.template != 4"> {{ $lang('common.currencySymbol') }} {{ showMarketPrice(item) }} - + {{ $lang('components-diy.diy-category-item.consultNow') }} - + - 立即购买 + {{ $lang('components-diy.diy-category-item.buyNow') }} - - 选规格 + + {{ $lang('components-diy.diy-category-item.selectSpecs') }} {{ item.num }} - + - {{ cartList['goods_' + item.goods_id]['sku_' + item.sku_id].num }} - + {{ cartList['goods_' + item.goods_id]['sku_' + + item.sku_id].num }} + - + - --> - + @@ -221,7 +361,35 @@ :lazy-load="true" show-menu-by-longpress /> {{ item.label_name }} - + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + + {{ $lang('common.currencySymbol') }} + {{ + parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ + parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + {{ $lang('common.currencySymbol') }} + {{ showMarketPrice(item) }} + + + + {{ $lang('components-diy.diy-category-item.buyNow') }} + + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} @@ -251,13 +419,13 @@ {{ showMarketPrice(item) }} - + {{ $lang('components-diy.diy-category-item.consultNow') }} - - + + {{ $lang('components-diy.diy-category-item.buyNow') }} @@ -289,9 +457,6 @@ - - {{ $lang('components-diy.diy-category-item.buyNow') }} - @@ -366,9 +531,52 @@ export default { timeout: {}, cartEditRepeat: false, selectedSecondCategory: null, - secondCategoryGoodsList: [] + secondCategoryGoodsList: [], + // 模板1专用：选中的分类ID和商品列表 + selectedCategoryId: null, + template1GoodsList: [], + template1Loading: false, + // 模板1专用(categoryLevel == 3): 按二级分类ID分别存储各自商品列表 + // key: child.category_id, value: 商品数组 + template1ChildGoodsList: {}, + template1ChildLoading: {} }; }, + computed: { + /** + * 当前分类层级 (参考 template 2 的 goodsLevel 模式) + * 优先级: 数据层级 > 后台配置 > 兜底 + * 1. 先检测数据实际支持几级 (二级分类下是否还有 child_list) + * 2. 后台配置的 level 不能超过数据支持的层级 + * (数据只有 2 级时,就算后台配 3 也强制用 2,避免出现空标题列表) + * 3. 都没配置就按数据层级来 + */ + categoryLevel() { + // 先检测数据层级 + let dataLevel = 2; // 兜底 + if (this.category && this.category.child_list && this.category.child_list.length > 0) { + const hasThirdLevel = this.category.child_list.some(item => + item.child_list && item.child_list.length > 0 + ); + dataLevel = hasThirdLevel ? 3 : 2; + } + // 后台配置: 不能超过数据支持的层级 + if (this.value.level && this.value.level <= dataLevel) { + return this.value.level; + } + // 否则按数据层级 + return dataLevel; + }, + /** + * 模板1: 是否按子分类分组显示 + * 后台"展示分类"配置: + * 二级分类 (value.level == 2) → false → 单网格显示所有商品 + * 三级分类 (value.level == 3) → true → 按二级分类分别显示各自商品 + */ + isGroupedDisplay() { + return this.value.template == 1 && this.value.level == 3; + } + }, created() { this.type = this.value.template == 1 || this.value.template == 99 ? 'category' : 'goods'; if (this.index == this.select && this.pageIndex == 0) this.getGoodsList(); @@ -386,6 +594,18 @@ export default { // 用当前一级分类下同名二级分类的 id 查商品(而非全局按钮的 id) this.refreshGoodsByCurrentCategory(); } + // 模板1：根据后台"展示分类"配置 + 数据层级决定加载方式 + // 三级分类模式 (isGroupedDisplay) + 有二级分类时,按二级分类分别加载各自商品 + // 其他情况(二级分类模式 / 无二级分类),直接加载当前一级分类下的所有商品 + if (this.value.template == 1 && this.category && this.category.category_id) { + if (this.isGroupedDisplay && this.category.child_list && this.category.child_list.length) { + this.category.child_list.forEach(child => { + this.getTemplate1ChildGoods(child.category_id); + }); + } else { + this.getTemplate1Goods(this.category.category_id); + } + } }, mounted() { setTimeout(() => { @@ -447,6 +667,20 @@ export default { this.secondCategoryGoodsList = []; this.refreshGoodsByCurrentCategory(); } + // 模板1：切换一级分类时重新加载该分类下的商品 + // 三级分类模式 + 有二级分类时,按二级分类分别重新加载,否则直接加载当前分类 + if (this.value.template == 1 && this.index == this.select && this.category && this.category.category_id) { + this.template1GoodsList = []; + this.template1ChildGoodsList = {}; + this.template1ChildLoading = {}; + if (this.isGroupedDisplay && this.category.child_list && this.category.child_list.length) { + this.category.child_list.forEach(child => { + this.getTemplate1ChildGoods(child.category_id); + }); + } else { + this.getTemplate1Goods(this.category.category_id); + } + } }, // 切换一级分类时, 根据当前一级分类下同名二级分类重新加载商品 currentOneCategory: { @@ -511,8 +745,8 @@ export default { data: { page: this.pageIndex, page_size: this.pageSize, - category_id: this.categoryId != -1 ? this.category.child_list[this.categoryId] - .category_id : this.category.category_id, + category_id: this.categoryId != -1 ? (this.value.template == 4 && this.currentOneCategory && this.currentOneCategory.child_list ? this.currentOneCategory.child_list[this.categoryId].category_id : this.category.child_list[this.categoryId].category_id) + : (this.value.template == 4 && this.currentOneCategory ? this.currentOneCategory.category_id : this.category.category_id), order: order, sort: sort }, @@ -559,6 +793,23 @@ export default { }) : this.$util.getDefaultImage().goods; }, + /** + * 分类图片处理 + * @param {Object} imgStr + */ + categoryImg(imgStr) { + if (!imgStr) return this.$util.getDefaultImage().goods; + return this.$util.img(imgStr); + }, + categoryImgError(level, oneIndex, twoIndex) { + // 分类图片加载失败处理 + if (level == 2 && this.category.child_list && this.category.child_list[oneIndex]) { + this.category.child_list[oneIndex].image = ''; + } else if (level == 3 && this.category.child_list && this.category.child_list[oneIndex] + && this.category.child_list[oneIndex].child_list && this.category.child_list[oneIndex].child_list[twoIndex]) { + this.category.child_list[oneIndex].child_list[twoIndex].image = ''; + } + }, imgError(index) { this.goodsList[index].goods_image = this.$util.getDefaultImage().goods; }, @@ -911,6 +1162,90 @@ export default { } }); }, + /** + * 模板1: 选择分类后加载该分类下的商品 + * @param {Object} category 选中的分类对象 + */ + selectCategoryForGoods(category) { + if (this.selectedCategoryId === category.category_id) { + return; // 已选中，不重复加载 + } + this.selectedCategoryId = category.category_id; + this.template1GoodsList = []; + this.getTemplate1Goods(category.category_id); + }, + /** + * 模板1: 根据分类ID获取商品列表 + */ + getTemplate1Goods(categoryId) { + this.template1Loading = true; + this.$api.sendRequest({ + url: '/api/goodssku/pageByCategory', + data: { + category_id: categoryId, + page: 1, + page_size: 10 + }, + success: res => { + this.template1Loading = false; + if (res.code == 0 && res.data && res.data.list) { + this.template1GoodsList = res.data.list; + } else { + this.template1GoodsList = []; + } + }, + fail: () => { + this.template1Loading = false; + this.template1GoodsList = []; + } + }); + }, + /** + * 模板1: 根据二级分类ID分别加载各自的商品列表 + * 用于 categoryLevel == 3 场景, 每个二级分类展示自己的商品 + * @param {Number} categoryId 二级分类ID + */ + getTemplate1ChildGoods(categoryId) { + this.$set(this.template1ChildLoading, categoryId, true); + this.$api.sendRequest({ + url: '/api/goodssku/pageByCategory', + data: { + category_id: categoryId, + page: 1, + page_size: 10 + }, + success: res => { + this.$set(this.template1ChildLoading, categoryId, false); + if (res.code == 0 && res.data && res.data.list) { + this.$set(this.template1ChildGoodsList, categoryId, res.data.list); + } else { + this.$set(this.template1ChildGoodsList, categoryId, []); + } + }, + fail: () => { + this.$set(this.template1ChildLoading, categoryId, false); + this.$set(this.template1ChildGoodsList, categoryId, []); + } + }); + }, + /** + * 模板1: 商品图片加载失败处理 + * @param {Number} categoryId 二级分类ID(可选,用于按子分类定位) + * @param {Number} index 商品在列表中的索引 + */ + template1ImgError(categoryId, index) { + // 兼容旧调用: 仅传 index 的情况(categoryLevel == 2) + if (categoryId === undefined || categoryId === null) { + if (this.template1GoodsList[index]) { + this.template1GoodsList[index].goods_image = this.$util.getDefaultImage().goods; + } + return; + } + const list = this.template1ChildGoodsList[categoryId]; + if (list && list[index]) { + list[index].goods_image = this.$util.getDefaultImage().goods; + } + }, //加载商品在购物车的总数量 loadGoodsCartNum(isRefresh = false) { this.goodsList.forEach((item) => { @@ -963,6 +1298,29 @@ export default { } } +// 模板1 专用: 标题居中 + 两侧横线 +.category-title-with-lines { + display: flex !important; + align-items: center; + justify-content: center; + text-align: center; + padding: 30rpx 0 20rpx !important; + padding-left: 0 !important; + color: #333; + font-size: 30rpx; + font-weight: 500; + letter-spacing: 2rpx; + + &::before, + &::after { + content: ''; + flex: 0 0 60rpx; + height: 0; + border-top: 1rpx solid #d9d9d9; + margin: 0 24rpx; + } +} + .category-adv { width: 100%; overflow: hidden; @@ -976,36 +1334,41 @@ export default { } .category-list { - display: flex; - flex-wrap: wrap; - background: #fff; + display: grid !important; + grid-template-columns: repeat(3, 1fr) !important; + background: transparent; margin: 0 20rpx; - border-radius: 10rpx; - padding: 10rpx 0; + border-radius: 0; + padding: 0; + gap: 20rpx 0; .category-item { - width: 33.33%; + width: 100% !important; display: flex; flex-direction: column; align-items: center; justify-content: center; - padding: 16rpx; + padding: 0; box-sizing: border-box; .img-box { - width: 80%; - padding-top: 80%; + width: 70% !important; + height: 0; + padding-bottom: 70%; margin: 0 auto; overflow: hidden; - margin-bottom: 20rpx; + margin-bottom: 16rpx; position: relative; + background: transparent !important; + border-radius: 0 !important; image { position: absolute; - width: 100%; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); + width: 100% !important; + height: 100% !important; + left: 0 !important; + top: 0 !important; + transform: none !important; } } @@ -1019,6 +1382,38 @@ export default { font-size: var(--diy-category-item-name-size, 24rpx); } + + // 模板1选中状态 + &.selected { + .img-box { + border: 2rpx solid var(--base-color, #FF6B35); + border-radius: 8rpx; + } + .name { + color: var(--base-color, #FF6B35); + font-weight: bold; + } + } + } +} + +// 模板1商品列表容器 +.template1-goods-wrap { + padding: 20rpx; + background: #f5f5f5; + + .goods-list { + margin: 0; + padding-top: 0; + display: flex; + + .goods-item { + width: calc(50% - 10rpx); + background: #fff; + border-radius: 12rpx; + overflow: hidden; + margin-bottom: 20rpx; + } } } @@ -1462,30 +1857,374 @@ export default { } }*/ - &[data-template='3'] .goods-item { - flex-direction: column; + // ===================== 模板3 商品分类样式 (卡片式布局: 图片顶部 + 名称上行 + 价格和按钮下行) ===================== + &[data-template='3'] { + // 模板3 的商品列表容器: 灰色背景让卡片有层次 + background: #f4f6fa; - .info-wrap { - width: 100%; - margin-top: var(--diy-category-item-info-wrap-margin-top, 12rpx); + // 重置 double-column 的影响, 强制单列布局 + .goods-item { + display: block; + flex-direction: column; + align-items: stretch; + width: 100% !important; + max-width: 100%; + background: #fff; + border-radius: 12rpx; + overflow: hidden; + margin: 0 0 20rpx; + padding: 0; + box-sizing: border-box; } + // 强制取消 single-column 的 row 布局(防止同时应用) + &.single-column .goods-item, + &.double-column .goods-item { + flex-direction: column; + align-items: stretch; + } + + // 图片: 占满卡片宽度, 自适应高度(类似 banner) .goods-img { width: 100%; - height: auto; + height: 0; + padding-top: 50%; + position: relative; margin-right: 0; line-height: 1; + border-radius: 0; + overflow: hidden; image { - border-radius: 8rpx; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + transform: none; + border-radius: 0; } } - .select-sku { + // 信息区域: 上下结构 (名称一行 + 价格+按钮一行) + .info-wrap { + display: flex; + flex-direction: column; + width: 100%; + margin-top: 0; + padding: 24rpx; + box-sizing: border-box; + } + + // 商品名称: 单行省略 + .name-wrap { + width: 100%; + + .goods-name { + font-size: 28rpx; + line-height: 1.4; + margin-top: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: #333; + } + } + + // 底部行: 价格在左, 按钮在右 + .info-bottom { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 12rpx; + } + + // 价格区域: 包含当前价格 + 删除线价格(同行) + .price-wrap { + display: flex; + align-items: baseline; + flex: 1; + min-width: 0; + flex-wrap: wrap; + + .discount-price { + display: inline-flex; + align-items: baseline; + font-weight: bold; + line-height: 1; + font-size: 30rpx; + color: var(--price-color, #FF6B35); + + .unit { + font-size: 22rpx; + margin-right: 2rpx; + color: var(--price-color, #FF6B35); + } + + .price { + font-size: 30rpx; + color: var(--price-color, #FF6B35); + } + } + + // 删除线价格: 在当前价格右边 + .delete-price { + margin-left: 16rpx; + display: inline-flex; + align-items: baseline; + text-decoration: line-through; + font-size: 24rpx; + color: #999; + + .unit { + margin-right: 2rpx; + } + } + } + + // 立即购买按钮: 在底部行右侧 + .buy-now-btn { + flex-shrink: 0; + margin-left: 20rpx; + width: 160rpx; + height: 56rpx; + line-height: 56rpx; + text-align: center; + font-size: 26rpx; font-weight: bold; - width: 128rpx; - height: 52rpx !important; - line-height: 52rpx !important; + color: #fff; + border-radius: 28rpx; + } + } + + // ===================== 模板4 商品分类样式(单列卡片式: 左图右文 + 右侧+按钮) ===================== + &[data-template='4'] { + // 整体灰色背景让卡片有层次 + background: #f4f6fa; + padding: 20rpx; + margin: 0; + + .goods-item { + display: flex; + flex-direction: row; + align-items: stretch; + width: 100% !important; + max-width: 100%; + background: #fff; + border-radius: 16rpx; + overflow: hidden; + margin: 0 0 20rpx; + padding: 20rpx; + box-sizing: border-box; + position: relative; + } + + // 商品图片: 左侧正方形 + .goods-img { + width: 200rpx; + height: 200rpx; + padding-top: 0; + margin-right: 20rpx; + border-radius: 12rpx; + flex-shrink: 0; + position: relative; + overflow: hidden; + background: #fff; + + image { + width: 100%; + height: 100%; + position: absolute !important; + top: 0; + left: 0; + transform: none; + border-radius: 12rpx; + } + + // 标签(秒杀/爆款): 位于图片左上角 + .goods-tag { + position: absolute; + top: 0; + left: 0; + padding: 6rpx 16rpx; + font-size: 22rpx; + color: #fff; + background: $base-color; + border-bottom-right-radius: 12rpx; + border-top-left-radius: 12rpx; + z-index: 2; + line-height: 1; + } + } + + // 信息区域: 右侧占满 + .info-wrap { + flex: 1; + display: flex; + flex-direction: column; + padding: 0; + min-width: 0; + position: relative; + } + + // 商品名称: 2行省略 + .name-wrap { + width: 100%; + + .goods-name { + font-size: 26rpx; + line-height: 1.4; + margin-top: 0; + white-space: normal; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + color: #333; + } + } + + // 价格区域: 当前价(红) + 删除价(灰色删除线) + .price-wrap { + margin-top: auto; + display: flex; + align-items: baseline; + flex-wrap: wrap; + padding-right: 90rpx; // 留出右侧+按钮的位置 + + .discount-price { + display: inline-flex; + align-items: baseline; + color: var(--price-color, #FF6B35); + font-weight: bold; + line-height: 1; + + .unit { + font-size: 24rpx; + margin-right: 2rpx; + color: var(--price-color, #FF6B35); + } + + .price { + font-size: 36rpx; + color: var(--price-color, #FF6B35); + } + } + + // 删除线价格: 紧跟当前价,灰色 + .delete-price { + margin-left: 16rpx; + display: inline-flex; + align-items: baseline; + text-decoration: line-through; + font-size: 24rpx; + color: #999; + line-height: 1; + + .unit { + margin-right: 2rpx; + } + } + } + + // 底部行: 仅在模板4下保留用于挂载 right-wrap + .footer-wrap { + position: absolute; + right: 20rpx; + bottom: 20rpx; + margin-top: 0; + padding: 0; + } + + // 右侧+按钮 / 择规格按钮 + .right-wrap { + display: flex; + align-items: center; + justify-content: flex-end; + margin-top: 0; + padding: 0; + + .num { + width: auto; + padding: 0 16rpx; + line-height: 1; + color: #333; + font-size: 28rpx; + } + + .num-action { + display: flex; + align-items: center; + justify-content: center; + width: 50rpx; + height: 50rpx; + background: $base-color; + border-radius: 8rpx; + position: relative; + box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.3); + + .click-event { + position: absolute; + width: 2rpx; + height: 2rpx; + left: 0; + top: 0; + transform: translate(-50%, -50%); + z-index: 5; + } + + &.reduce { + width: 48rpx; + height: 48rpx; + background-color: #fff; + border: 2rpx solid $base-color; + box-sizing: border-box; + + .icon-jian { + color: $base-color; + } + } + } + + .icon-jian, + .icon-jia { + color: var(--btn-text-color, #fff); + font-weight: bold; + font-size: 30rpx; + line-height: 1; + } + + // 择规格按钮 + .select-sku { + font-weight: bold; + color: var(--btn-text-color, #fff); + font-size: 24rpx; + padding: 12rpx 24rpx; + position: relative; + line-height: 1; + text-align: center; + border-radius: 30rpx; + background: $base-color; + box-shadow: 0 2rpx 6rpx rgba(255, 107, 53, 0.3); + + .num-tag { + position: absolute; + top: -8rpx; + right: -8rpx; + display: inline-block; + box-sizing: border-box; + color: #fff; + line-height: 1.2; + text-align: center; + font-size: 22rpx; + padding: 0 6rpx; + min-width: 28rpx; + border-radius: 16rpx; + background-color: var(--price-color, #FF6B35); + border: 2rpx solid #fff; + } + } } } } @@ -1595,13 +2334,13 @@ export default { .screen-category-4 .item { background-color: #f2f2f2 !important; - padding: 10rpx 24rpx; + padding: 16rpx 40rpx; line-height: 1; font-size: $font-size-tag; &.selected { - background-color: var(--main-color-shallow) !important; - color: var(--main-color); + background-color: $base-color !important; + color: #fff; } } @@ -1647,12 +2386,12 @@ export default { border-bottom: 1rpx solid #f0f0f0; .second-category-btn { - padding: 14rpx 32rpx; + padding: 10rpx 24rpx; background: #f5f5f5; color: #666; - border-radius: 40rpx; - font-size: 26rpx; - margin: 0 16rpx 16rpx 0; + border-radius: 30rpx; + font-size: 20rpx; + margin: 0 14rpx 17rpx 0; max-width: 100%; white-space: nowrap; overflow: hidden; diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue index f4af85f..05fc4ab 100644 --- a/components-diy/diy-category.vue +++ b/components-diy/diy-category.vue @@ -1,6 +1,15 @@