chore:精选名片的快捷按钮样式改变
This commit is contained in:
@@ -9,7 +9,7 @@
|
||||
</view>
|
||||
|
||||
<!-- 名片卡(已登录=本人名片 / 未登录=兜底名片); loading 时基件出骨架屏;
|
||||
「我的名片」角标恒显(参考图 2026-10-22: 兜底名片也带角标) -->
|
||||
「我的名片」角标已按 2026-10-23 参考图定稿移除 -->
|
||||
<diy-card-mini
|
||||
v-else-if="loading || card"
|
||||
:card="card"
|
||||
@@ -19,11 +19,6 @@
|
||||
@row-act="doAct"
|
||||
@detail="goDetail"
|
||||
>
|
||||
<template slot="badge">
|
||||
<view class="self-badge" :style="badgeStyle">
|
||||
<text class="badge-text">我的名片</text>
|
||||
</view>
|
||||
</template>
|
||||
</diy-card-mini>
|
||||
|
||||
<!-- 未登录提示条(参考图 2026-10-22): 兜底名片下方灰条, 左文案右链接 -->
|
||||
@@ -122,9 +117,6 @@ export default {
|
||||
subTextStyle() {
|
||||
return this.$util.objToStyle({ color: (this.value || {}).infoColor || '#8A8F99' });
|
||||
},
|
||||
badgeStyle() {
|
||||
return this.$util.objToStyle({ background: (this.card || {}).theme_color || '#2F6BFF' });
|
||||
},
|
||||
loginLinkStyle() {
|
||||
return this.$util.objToStyle({ color: (this.card || {}).theme_color || '#2F6BFF' });
|
||||
},
|
||||
@@ -230,22 +222,6 @@ export default {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
||||
/* 「我的名片」角标: 覆在基件右上(基件已留 logo 位, badge 靠左一点避免重叠) */
|
||||
.self-badge {
|
||||
position: absolute;
|
||||
top: 10rpx;
|
||||
left: 10rpx;
|
||||
z-index: 10;
|
||||
border-radius: 999rpx 0 16rpx 0;
|
||||
padding: 8rpx 20rpx;
|
||||
|
||||
.badge-text {
|
||||
font-size: 20rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
/* 未登录提示条(参考图 2026-10-22): 兜底名片下方, 浅灰圆角条 左文案右链接 */
|
||||
.self-login-bar {
|
||||
margin-top: 20rpx;
|
||||
|
||||
@@ -71,12 +71,13 @@
|
||||
<text class="qr-tip-corner" :style="subStyle">{{ qrTipText }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 快捷操作(面板「显示快捷操作」可关; 服务端按资料派生, 首个主动作填充) -->
|
||||
<!-- 快捷操作(面板「显示快捷操作」可关; 服务端按资料派生;
|
||||
2026-10-23 参考图定稿: 统一「发邮件」样式 白底+主题色描边) -->
|
||||
<view v-if="showActsBlock && acts.length" class="card-acts">
|
||||
<view v-for="(act, i) in acts" :key="i" class="act-chip"
|
||||
:style="i === 0 ? actPrimaryStyle : actGhostStyle"
|
||||
:style="actChipStyle"
|
||||
hover-class="btn-press" @tap.stop="doAct(act)">
|
||||
<text class="act-text" :style="i === 0 ? actPrimaryTextStyle : actGhostTextStyle">{{ act.label }}</text>
|
||||
<text class="act-text" :style="actChipTextStyle">{{ act.label }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -260,24 +261,16 @@ export default {
|
||||
acts() {
|
||||
return this.card && Array.isArray(this.card.acts) ? this.card.acts : [];
|
||||
},
|
||||
actPrimaryStyle() {
|
||||
actChipStyle() {
|
||||
// 快捷芯片统一「发邮件」样式(2026-10-23 参考图定稿): 白底 + 主题色描边;
|
||||
// 尺寸/圆角由 .act-chip CSS 类控制(避免内联锁死)
|
||||
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
|
||||
return this.$util.objToStyle({
|
||||
background: theme,
|
||||
background: '#FFFFFF',
|
||||
border: '2rpx solid ' + theme,
|
||||
});
|
||||
},
|
||||
actGhostStyle() {
|
||||
const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
|
||||
return this.$util.objToStyle({
|
||||
background: 'transparent',
|
||||
border: '2rpx solid ' + theme,
|
||||
});
|
||||
},
|
||||
actPrimaryTextStyle() {
|
||||
return this.$util.objToStyle({ color: '#FFFFFF' });
|
||||
},
|
||||
actGhostTextStyle() {
|
||||
actChipTextStyle() {
|
||||
return this.$util.objToStyle({ color: (this.card && this.card.theme_color) || CardTokens.color.primary });
|
||||
},
|
||||
avatarStyle() {
|
||||
|
||||
@@ -247,10 +247,9 @@ test('self: miniConfig 透传头像+二维码新六字段', () => {
|
||||
assert.match(selfSrc, /qrTipShow:\s*v\.qrTipShow/);
|
||||
});
|
||||
|
||||
test('self: 「我的名片」角标恒显 + 未登录提示条(2026-10-22 参考图定稿)', () => {
|
||||
// 角标不再依赖 isSelf(兜底名片也带「我的名片」角标)
|
||||
assert.match(selfSrc, /<template slot="badge">/);
|
||||
assert.match(selfSrc, /<text class="badge-text">我的名片<\/text>/);
|
||||
test('self: 「我的名片」角标已移除 + 未登录提示条(2026-10-23 参考图定稿)', () => {
|
||||
// 角标按 2026-10-23 参考图删除(此前 2026-10-22 曾恒显), 反例防回归
|
||||
assert.ok(!selfSrc.includes('self-badge') && !selfSrc.includes('slot="badge"'));
|
||||
// 未登录提示条: 兜底名片下方, 左文案(点去登录)右链接(点去看看名片)
|
||||
assert.match(selfSrc, /v-if="!hasToken && fallbackMode !== 'none' && !loading && card"\s+class="self-login-bar"/);
|
||||
assert.match(selfSrc, /class="login-bar-text" :style="subTextStyle" @tap="goLogin"/);
|
||||
|
||||
Reference in New Issue
Block a user