feat: 共性能力平台标签同步应用颜色区分
GxnlptCardTags 引入 tagColorClass + market-tag-colors mixin 标签按类别分色(蓝核算/绿交易/橙认证/紫数据),hover 放大 Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
e51fb0fdd8
commit
5b9f61e97c
@ -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 {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user