chore：我的名片样式
This commit is contained in:
@@ -23,8 +23,10 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 名片卡(白卡平铺; 「我的名片」角标压在左上) -->
|
||||
<view v-else class="mini-card fade-up" :style="wrapStyle" :class="{ 'qr-at-corner': qrPos === 'corner' }">
|
||||
<!-- 名片卡(精品名片 show 同款版式: 蓝底顶带 + 白卡压边; 角标压在左上) -->
|
||||
<view v-else class="mini-card-wrap">
|
||||
<view class="mini-band" :style="bandStyle"></view>
|
||||
<view class="mini-card fade-up" :style="wrapStyle" :class="{ 'qr-at-corner': qrPos === 'corner' }">
|
||||
<!-- 角标插槽(如 self 组件的「我的名片」) -->
|
||||
<view class="mini-badge-slot">
|
||||
<slot name="badge"></slot>
|
||||
@@ -99,15 +101,17 @@
|
||||
<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 发送名片 -->
|
||||
<view v-if="showDetailBtn" class="mini-detail" :style="detailBtnStyle" hover-class="btn-press" @tap.stop="onDetail">
|
||||
<text class="detail-text">{{ detailBtnText || '发送名片' }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 发名片(对齐名片详情页: 主题色大按钮; 点击跳原生转发中转页拉起微信转发面板) -->
|
||||
<view v-if="showSendBtn" class="mini-send" :style="sendBtnStyle" hover-class="btn-press" @tap.stop="onSend">
|
||||
<text class="send-text">{{ sendBtnText || '发名片' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 发送名片(2026-10-23 参考图定稿: 白色名片外面下方, 与精选名片「发名片」同款布局;
|
||||
放 wrap 外 → 顶带拉伸终点始终相对白卡底, 不受按钮高度影响) -->
|
||||
<view v-if="showDetailBtn" class="mini-detail" :style="detailBtnStyle" hover-class="btn-press" @tap.stop="onDetail">
|
||||
<text class="detail-text">{{ detailBtnText || '发送名片' }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -289,6 +293,10 @@ export default {
|
||||
gradientStyle() {
|
||||
return this.$util.objToStyle({ background: themeGradient(this.card) });
|
||||
},
|
||||
bandStyle() {
|
||||
// 蓝色顶带底色: 名片主题渐变(精选名片 show 同款)
|
||||
return this.$util.objToStyle({ background: themeGradient(this.card) });
|
||||
},
|
||||
avatarStyle() {
|
||||
return this.$util.objToStyle({ background: avatarBg(this.card) });
|
||||
},
|
||||
@@ -381,11 +389,31 @@ export default {
|
||||
.card-mini {
|
||||
width: 100%;
|
||||
|
||||
/* 顶带+白卡同容器: 顶带 top/bottom 拉伸 → 高度自适应白卡,
|
||||
弧线始终距白卡底 88rpx(2026-10-23 参考图定稿, 与 show 同口径) */
|
||||
.mini-card-wrap {
|
||||
position: relative;
|
||||
margin-top: 40rpx;
|
||||
}
|
||||
|
||||
/* 主题色顶带: 从露沿处拉伸, 底端距白卡底 88rpx; 顶部直角, 底部 28rpx 小圆弧 */
|
||||
.mini-band {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: -40rpx;
|
||||
bottom: 88rpx;
|
||||
height: auto;
|
||||
border-radius: 0 0 28rpx 28rpx;
|
||||
}
|
||||
|
||||
.mini-card {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
width: auto;
|
||||
margin: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
|
||||
.mini-badge-slot {
|
||||
position: absolute;
|
||||
@@ -641,21 +669,6 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
.mini-detail {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.detail-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 发名片主按钮(名片详情页 send-bar 同款观感) */
|
||||
.mini-send {
|
||||
position: relative;
|
||||
@@ -673,6 +686,23 @@ export default {
|
||||
}
|
||||
}
|
||||
|
||||
/* 发送名片大按钮: 白卡外下方(2026-10-23 参考图定稿),
|
||||
与精选名片「发名片」同款布局; 左右 24rpx 与白卡对齐 */
|
||||
.mini-detail {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 24rpx 24rpx 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.detail-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
/* 空态 */
|
||||
.mini-empty {
|
||||
width: 100%;
|
||||
|
||||
@@ -158,11 +158,18 @@ test('common: qrTransform 位移(任一轴非零才输出; WXSS 支持 translate
|
||||
// 2. mini.vue 基件契约
|
||||
// =============================================================
|
||||
|
||||
test('mini: 白卡平铺版式(2026-10-22 参考图定稿, 顶带方案已废弃)', () => {
|
||||
// 名片卡分支直接渲染, 不再包 mini-block/mini-band
|
||||
assert.match(miniSrc, /<view v-else class="mini-card fade-up" :style="wrapStyle"/);
|
||||
// 反例: 顶带版式禁止回归(2026-10-22 上午曾引入, 参考图定稿后撤销)
|
||||
assert.ok(!miniSrc.includes('mini-band') && !miniSrc.includes('mini-block'));
|
||||
test('mini: 蓝色顶带版式(2026-10-23 与精选名片 show 同款: 自适应白卡高度 + 弧线距底 88rpx)', () => {
|
||||
// 模板: 卡片包进 wrap, 顶带在最前
|
||||
assert.match(miniSrc, /class="mini-card-wrap"/);
|
||||
assert.match(miniSrc, /class="mini-band" :style="bandStyle"/);
|
||||
assert.match(miniSrc, /class="mini-card fade-up" :style="wrapStyle"/);
|
||||
// 计算属性: 顶带底色走主题渐变(与 show bandStyle 同口径)
|
||||
assert.match(miniSrc, /bandStyle\(\)\s*\{\s*return this\.\$util\.objToStyle\(\{\s*background: themeGradient\(this\.card\)\s*\}\);/);
|
||||
// CSS: wrap 撑露沿 + band 拉伸(top:-40rpx / bottom:88rpx) + 圆角(顶直底弧)
|
||||
assert.match(miniSrc, /\.mini-card-wrap \{\s*position: relative;\s*margin-top: 40rpx;/);
|
||||
assert.match(miniSrc, /\.mini-band \{\s*position: absolute;[\s\S]*?top: -40rpx;[\s\S]*?bottom: 88rpx;[\s\S]*?border-radius: 0 0 28rpx 28rpx;/);
|
||||
// mini-block 方案不得回归
|
||||
assert.ok(!miniSrc.includes('mini-block'));
|
||||
});
|
||||
|
||||
test('mini: 企业徽标固定红底(参考图口径, 与头像底色解耦)', () => {
|
||||
|
||||
Reference in New Issue
Block a user