diff --git a/docs/业务进度管理.md b/docs/业务进度管理.md
index 19448f6b..2ceb7960 100644
--- a/docs/业务进度管理.md
+++ b/docs/业务进度管理.md
@@ -19,7 +19,7 @@
完成内容:
-- 发帖页新增必选分类卡片,读取后台启用的社区分类并将分类 ID 一同提交。
+- 发帖页新增必选分类卡片,读取后台启用的社区分类并将分类 ID 一同提交;分类固定一行四列,仅显示名称,超出部分隐藏。
- 标签区域明确支持多选,展示已选数量,并限制最多选择 3 个标签。
- 发布接口校验分类与标签的启用状态,写入帖子分类并同步更新分类、标签的帖子计数。
diff --git a/uniapp/src/packages_community/pages/publish.vue b/uniapp/src/packages_community/pages/publish.vue
index 8cc64cf6..3fb7235b 100644
--- a/uniapp/src/packages_community/pages/publish.vue
+++ b/uniapp/src/packages_community/pages/publish.vue
@@ -57,15 +57,10 @@
{{ selectedCategory ? '已选择 1 个分类' : '请选择帖子所属分类' }}
-
-
-
- {{ category.name.slice(0, 1) }}
-
{{ category.name }}
-
暂无可选分类
@@ -104,6 +99,7 @@ const tagList = ref([])
const selectedTags = ref([])
const categoryList = ref([])
const selectedCategory = ref(0)
+const visibleCategories = computed(() => categoryList.value.slice(0, 4))
const isPaid = ref(false)
const pricePoints = ref('')
@@ -463,21 +459,21 @@ const toggleTag = (id: number) => {
border-top: 16rpx solid #f5f5f5;
&__list {
- display: flex;
- flex-wrap: wrap;
+ display: grid;
+ grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16rpx;
+ max-height: 76rpx;
+ overflow: hidden;
}
&__item {
- position: relative;
display: flex;
align-items: center;
- min-width: calc((100% - 16rpx) / 2);
- max-width: 100%;
+ justify-content: center;
+ min-width: 0;
height: 76rpx;
box-sizing: border-box;
- padding: 0 20rpx;
- gap: 12rpx;
+ padding: 0 8rpx;
border: 2rpx solid #edf0f5;
border-radius: 14rpx;
background: #fafbfc;
@@ -491,43 +487,6 @@ const toggleTag = (id: number) => {
font-weight: 600;
}
- &::after {
- position: absolute;
- top: 0;
- right: 0;
- width: 34rpx;
- height: 34rpx;
- border-radius: 0 10rpx 0 12rpx;
- background: #185dff;
- content: '';
- }
-
- .u-icon {
- position: absolute;
- top: 2rpx;
- right: 3rpx;
- z-index: 1;
- }
- }
- }
-
- &__icon {
- width: 40rpx;
- height: 40rpx;
- border-radius: 50%;
- flex-shrink: 0;
-
- &--fallback {
- display: flex;
- align-items: center;
- justify-content: center;
- background: #dbe8ff;
-
- text {
- color: #185dff;
- font-size: 20rpx;
- font-weight: 700;
- }
}
}