youzitree/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化标签组滚动效果，添加指针样式，调整标签组件结构

Browse Source
This commit is contained in:
youzi
2025-12-24 11:33:13 +08:00
parent cf0275358f
commit 6c16c4b37c
1 changed files with 6 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/Home.vue
View File

@ -13,10 +13,12 @@
</d-input> </d-input>
</div> </div>
<!-- 标签组 --> <!-- 标签组 -->
<div v-if="navlist.length" class="flex gap-6 px-12 mt-6 mb-3 overflow-x-auto"> <PerfectScrollbar class="">
<d-tag hideBeyondTags v-for="tag in tagList" :checked="tag.checked" :color="tag.color" <div v-if="navlist.length" class="flex gap-6 px-12 mt-6 mb-3 overflow-x-auto ">
<d-tag class="cursor-pointer" hideBeyondTags v-for="tag in tagList" :checked="tag.checked" :color="tag.color"
@click="handdleTagClick(tag)">{{ tag.name }}</d-tag> @click="handdleTagClick(tag)">{{ tag.name }}</d-tag>
</div> </div>
</PerfectScrollbar>
<!-- 图片网格展示区域 --> <!-- 图片网格展示区域 -->
<PerfectScrollbar class="" :style="navStyle"> <PerfectScrollbar class="" :style="navStyle">
<div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-12"> <div class="navcard grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-5 pt-3 pb-6 px-12">