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

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

View File

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