xiaoyu/txw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 共性能力平台标签同步应用颜色区分

Browse Source 
GxnlptCardTags 引入 tagColorClass + market-tag-colors mixin
标签按类别分色(蓝核算/绿交易/橙认证/紫数据)，hover 放大

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
liulujian 2026-07-04 23:28:48 +08:00
parent e51fb0fdd8
commit 5b9f61e97c
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
txw-mhzc-web/src/pages/index/views/gxnlpt/components/GxnlptCardTags.vue
View File

@ -15,7 +15,7 @@
<span <span
v-for="(tag, ti) in visibleTags" v-for="(tag, ti) in visibleTags"
:key="`visible-${ti}-${tag}`" :key="`visible-${ti}-${tag}`"
class="gxnlpt-tag" :class="['gxnlpt-tag', tagColorClass(tag)]"
:title="tag" :title="tag"
>{{ tag }}</span> >{{ tag }}</span>
<span <span
@ -31,7 +31,7 @@
v-for="(tag, ti) in tags" v-for="(tag, ti) in tags"
:key="`measure-${ti}-${tag}`" :key="`measure-${ti}-${tag}`"
ref="measureTag" ref="measureTag"
class="gxnlpt-tag" :class="['gxnlpt-tag', tagColorClass(tag)]"
>{{ tag }}</span> >{{ tag }}</span>
<span ref="measureEllipsis" class="gxnlpt-tag gxnlpt-tag-ellipsis">...</span> <span ref="measureEllipsis" class="gxnlpt-tag gxnlpt-tag-ellipsis">...</span>
</div> </div>
@ -39,6 +39,7 @@
</template> </template>
<script> <script>
import { tagColorClass } from '@/pages/index/utils/card-category';
import { import {
calcTagOverflowLayout, calcTagOverflowLayout,
formatHiddenTagsTooltip, formatHiddenTagsTooltip,
@ -102,6 +103,7 @@ export default {
} }
}, },
methods: { methods: {
tagColorClass,
resetAndMeasure() { resetAndMeasure() {
const n = this.normalizedTags.length; const n = this.normalizedTags.length;
// 测量前先保守展示，避免先渲染整行标签再被裁成「组…」 // 测量前先保守展示，避免先渲染整行标签再被裁成「组…」
@ -229,6 +231,7 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@import '../../../styles/home-figma-variables.less'; @import '../../../styles/home-figma-variables.less';
@import '../../../styles/market-list-variables.less';
.gxnlpt-card-tags { .gxnlpt-card-tags {
position: relative; position: relative;
@ -278,12 +281,15 @@ export default {
font-size: 13px; font-size: 13px;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
color: #00b96b; color: @market-tag-color;
white-space: nowrap; white-space: nowrap;
background: #eefae2; background: @market-tag-bg;
border: none; border: none;
border-radius: 4px; border-radius: 4px;
box-sizing: border-box; box-sizing: border-box;
transition: transform 0.15s ease;
&:hover { transform: scale(1.06); }
.market-tag-colors();
} }
.gxnlpt-tag-ellipsis { .gxnlpt-tag-ellipsis {