haha/sbnews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: compact community category selector

Browse Source
This commit is contained in:
hajimi
2026-08-03 17:30:21 +08:00
parent d5160e0ba3
commit e62aa6ac01
2 changed files with 10 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
uniapp/src/packages_community/pages/publish.vue
+9 -50
View File
@@ -57,15 +57,10 @@
<text class="publish-section__hint">{{ selectedCategory ? '已选择 1 个分类' : '请选择帖子所属分类' }}</text>
</view>
<view v-if="categoryList.length" class="publish-category__list">
<view v-for="category in categoryList" :key="category.id" class="publish-category__item"
<view v-for="category in visibleCategories" :key="category.id" class="publish-category__item"
:class="{ 'publish-category__item--active': selectedCategory === category.id }"
@tap="selectCategory(category.id)">
<image v-if="category.icon" :src="category.icon" class="publish-category__icon" mode="aspectFit" />
<view v-else class="publish-category__icon publish-category__icon--fallback">
<text>{{ category.name.slice(0, 1) }}</text>
</view>
<text class="publish-category__name">{{ category.name }}</text>
<u-icon v-if="selectedCategory === category.id" name="checkmark" size="22" color="#fff" />
</view>
</view>
<text v-else class="publish-section__empty">暂无可选分类</text>
@@ -104,6 +99,7 @@ const tagList = ref<any[]>([])
const selectedTags = ref<number[]>([])
const categoryList = ref<any[]>([])
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;
}
}
}