Merge branch 'feat/camcard' of http://git.aigc-quickapp.com/Uniapp/lucky_shop into feat/camcard

components-diy/diy-card-mini.vue

@@ -25,7 +25,7 @@
 
 		<!-- 名片卡(精品名片 show 同款版式: 蓝底顶带 + 白卡压边; 角标压在左上) -->
 		<view v-else class="mini-card-wrap">
-			<view v-if="showBand" class="mini-band" :style="bandStyle"></view>
+			<view v-if="bandShow" 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">
@@ -44,13 +44,17 @@
 			<!-- 二维码·右上角浮层(corner 档: 外观由 qrStyle 决定, 资料行自动让位; 点击预览名片) -->
 			<view v-if="showQrCorner" class="mini-qr mini-qr-corner" :style="qrBlockStyle" @tap.stop="onQrTap">
 				<image class="qr-img" :style="qrImgStyle" :src="$util.img(qrSrc)" mode="aspectFit" />
-				<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
+				<text v-if="showQrTip" class="qr-tip" :style="labelStyle"><text v-if="qrTipEm" class="qr-tip-em" :style="qrTipEmStyle">{{ qrTipEm }}</text>{{ qrTipLine1 }}</text><text v-if="qrTipSub" class="qr-tip-sub" :style="labelStyle">{{ qrTipSub }}</text><text v-if="qrUrlShow && qrUrlText" class="qr-url" :style="qrUrlStyle">{{ qrUrlText }}</text>
 			</view>
 
 			<!-- 头部·主题渐变整块档(theme): 渐变通铺卡边 + 装饰圆, plain 档不渲染 -->
 			<view v-if="headTheme" class="mini-headtheme" :style="headThemeStyle">
 				<view class="headtheme-decor headtheme-decor--big"></view>
 				<view class="headtheme-decor headtheme-decor--small"></view>
+				<view v-if="badgeShow" class="mini-hero-badge" :style="heroBadgeStyle">
+					<view class="hero-badge-dot"></view>
+					<text class="hero-badge-text" :style="heroBadgeTextStyle">{{ badgeText }}</text>
+				</view>
 				<view class="mini-head" :style="cornerHeadStyle">
 					<view v-if="showAvatarBlock" class="mini-avatar" :style="avatarStyle">
 						<image v-if="card.avatar" class="avatar-img" :src="$util.img(card.avatar)" mode="aspectFill" />
@@ -67,13 +71,17 @@
 					<!-- 二维码·头部右侧(head 档: 头像|信息|二维码 三段 flex, 零遮挡) -->
 					<view v-if="showQrHead" class="mini-qr mini-qr-head" :style="qrBlockStyle">
 						<image class="qr-img" :style="qrImgStyle" :src="$util.img(qrSrc)" mode="aspectFit" />
-						<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
+						<text v-if="showQrTip" class="qr-tip" :style="labelStyle"><text v-if="qrTipEm" class="qr-tip-em" :style="qrTipEmStyle">{{ qrTipEm }}</text>{{ qrTipLine1 }}</text><text v-if="qrTipSub" class="qr-tip-sub" :style="labelStyle">{{ qrTipSub }}</text><text v-if="qrUrlShow && qrUrlText" class="qr-url" :style="qrUrlStyle">{{ qrUrlText }}</text>
 					</view>
 				</view>
 			</view>
 
 			<!-- 头部·白卡档(plain, 历史默认) -->
-			<view v-if="!headTheme" class="mini-head" :style="cornerHeadStyle">
+			<view v-if="!headTheme && badgeShow" class="mini-hero-badge" :style="heroBadgeStyle">
+				<view class="hero-badge-dot"></view>
+				<text class="hero-badge-text" :style="heroBadgeTextStyle">{{ badgeText }}</text>
+			</view>
+			<view v-if="!headTheme" class="mini-head" :style="plainHeadFinalStyle">
 				<view v-if="showAvatarBlock" class="mini-avatar" :style="avatarStyle">
 					<image v-if="card.avatar" class="avatar-img" :src="$util.img(card.avatar)" mode="aspectFill" />
 					<text v-else class="avatar-initial">{{ initialOf(card.name) }}</text>
@@ -89,7 +97,7 @@
 				<!-- 二维码·头部右侧(head 档: 头像|信息|二维码 三段 flex, 零遮挡; 点击预览名片) -->
 				<view v-if="showQrHead" class="mini-qr mini-qr-head" :style="qrBlockStyle" @tap.stop="onQrTap">
 					<image class="qr-img" :style="qrImgStyle" :src="$util.img(qrSrc)" mode="aspectFit" />
-					<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
+					<text v-if="showQrTip" class="qr-tip" :style="labelStyle"><text v-if="qrTipEm" class="qr-tip-em" :style="qrTipEmStyle">{{ qrTipEm }}</text>{{ qrTipLine1 }}</text><text v-if="qrTipSub" class="qr-tip-sub" :style="labelStyle">{{ qrTipSub }}</text><text v-if="qrUrlShow && qrUrlText" class="qr-url" :style="qrUrlStyle">{{ qrUrlText }}</text>
 				</view>
 			</view>
 
@@ -114,14 +122,14 @@
 		</view>
 
 		<!-- 资料行(可折叠; 有字形字段显图标, 无字形退化为文字标签) -->
-		<view v-if="showRowsBlock && shownRows.length" class="mini-rows" :style="rowsCardStyle">
+		<view v-if="showRowsBlock && shownRows.length" class="mini-rows" :style="rowsFinalStyle">
 				<!-- 资料区标题(2.17 可选): 主题色竖条 + 标题 -->
 				<view v-if="rowsTitleShow" class="mini-rows-title">
 					<view class="rows-title-bar" :style="rowsTitleBarStyle"></view>
 					<text class="rows-title-text" :style="rowsTitleStyle">{{ rowsTitle }}</text>
 				</view>
 				<view v-for="(row, i) in shownRows" :key="i" class="mini-row"
-					:class="{ 'row-tappable': rowTapable(row) }" :hover-class="rowTapable(row) ? 'btn-press' : 'none'" @tap="onRowTap(row)">
+					:class="{ 'row-tappable': rowTapable(row), 'row-3col': showRowLabels }" :hover-class="rowTapable(row) ? 'btn-press' : 'none'" @tap="onRowTap(row)">
 					<!-- CSS 描边图标档(2.17.1): 邮箱/网站无 iconfont 字形, 纯 view 绘制 -->
 					<view v-if="rowCssIcon(row)" class="row-css-wrap">
 						<view v-if="rowCssIcon(row) === 'mail'" class="css-ico-mail css-ico-mail--row" :style="rowCssBorderStyle(row)">
@@ -133,9 +141,9 @@
 						</view>
 					</view>
 					<text v-else-if="rowIcon(row)" class="row-icon iconfont" :class="rowIcon(row)" :style="labelStyle"></text>
-					<text v-else class="row-label" :style="rowLabelStyle">{{ row.label }}</text>
+					<text v-if="showRowLabels || (!rowCssIcon(row) && !rowIcon(row))" class="row-label" :style="rowLabelStyle">{{ row.label }}</text>
 					<text class="row-value" :style="valueStyle">{{ row.value }}</text>
-					<text v-if="showCopyBtn && row.value" class="row-copy" :style="copyBtnStyle" @tap.stop="onCopyRow(row)">复制</text>
+					<text v-if="copyBtnVisible(row)" class="row-copy" :style="copyBtnStyle" @tap.stop="onCopyRow(row)">复制</text>
 				</view>
 				<view v-if="hasMoreRows" class="row-toggle" hover-class="btn-press" @tap="expanded = !expanded">
 					<text class="toggle-text" :style="toggleStyle">{{ expanded ? '收起资料' : '展开全部资料(' + hiddenCount + ')' }}</text>
@@ -143,9 +151,9 @@
 			</view>
 
 			<!-- 二维码·资料行下方(rows 档, 默认; 点击预览名片); mini-qr-center: 块级居中 -->
-			<view v-if="showQrRows" class="mini-qr mini-qr-center" :style="qrBlockStyle" @tap.stop="onQrTap">
+			<view v-if="showQrRows" class="mini-qr mini-qr-center" :style="qrBlockFinalStyle" @tap.stop="onQrTap">
 				<image class="qr-img" :style="qrImgStyle" :src="$util.img(qrSrc)" mode="aspectFit" />
-				<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
+				<text v-if="showQrTip" class="qr-tip" :style="labelStyle"><text v-if="qrTipEm" class="qr-tip-em" :style="qrTipEmStyle">{{ qrTipEm }}</text>{{ qrTipLine1 }}</text><text v-if="qrTipSub" class="qr-tip-sub" :style="labelStyle">{{ qrTipSub }}</text><text v-if="qrUrlShow && qrUrlText" class="qr-url" :style="qrUrlStyle">{{ qrUrlText }}</text>
 			</view>
 
 			<!-- 快捷操作·图标宫格档(grid): 彩色浅底图标 + 下方文字 -->
@@ -171,9 +179,9 @@
 			</view>
 
 			<!-- 二维码·主按钮上方(bottom 档; 点击预览名片) -->
-			<view v-if="showQrBottom" class="mini-qr mini-qr-center" :style="qrBlockStyle" @tap.stop="onQrTap">
+			<view v-if="showQrBottom" class="mini-qr mini-qr-center" :style="qrBlockFinalStyle" @tap.stop="onQrTap">
 				<image class="qr-img" :style="qrImgStyle" :src="$util.img(qrSrc)" mode="aspectFit" />
-				<text v-if="showQrTip" class="qr-tip" :style="labelStyle">{{ qrTip || '扫码查看完整名片' }}</text>
+				<text v-if="showQrTip" class="qr-tip" :style="labelStyle"><text v-if="qrTipEm" class="qr-tip-em" :style="qrTipEmStyle">{{ qrTipEm }}</text>{{ qrTipLine1 }}</text><text v-if="qrTipSub" class="qr-tip-sub" :style="labelStyle">{{ qrTipSub }}</text><text v-if="qrUrlShow && qrUrlText" class="qr-url" :style="qrUrlStyle">{{ qrUrlText }}</text>
 			</view>
 
 			<!-- 发名片(对齐名片详情页: 主题色大按钮; 点击跳原生转发中转页拉起微信转发面板) -->
@@ -268,6 +276,10 @@ export default {
 				background: flagOn(c.useCover, false) && this.card && this.card.cover ? 'transparent' : bg,
 				borderRadius: px2rpx(num(c.borderRadius, CardTokens.radius.md)) + 'rpx',
 				padding: px2rpx(num(c.padding, CardTokens.space.lg)) + 'rpx',
+				marginTop: px2rpx(num(c.wrapMarginTop, 0)) + 'rpx',
+				marginRight: px2rpx(num(c.wrapMarginRight, 0)) + 'rpx',
+				marginBottom: px2rpx(num(c.wrapMarginBottom, 0)) + 'rpx',
+				marginLeft: px2rpx(num(c.wrapMarginLeft, 0)) + 'rpx',
 				boxShadow: flagOn(c.showShadow, true) ? CardTokens.shadow.card : 'none',
 			});
 		},
@@ -278,8 +290,8 @@ export default {
 			return flagOn(this.c.showGradient, false);
 		},
 		showLogo() {
-			// corner 档二维码占右上同一位, Logo 自动避让(面板有提示)
-			return flagOn(this.c.showLogo, false) && this.qrPos !== 'corner';
+			// 只有 corner 二维码实际显示时才避让；关闭二维码或无码源不隐藏 Logo。
+			return flagOn(this.c.showLogo, false) && !this.showQrCorner;
 		},
 		showActs() {
 			return flagOn(this.c.showQuick, true);
@@ -412,18 +424,32 @@ export default {
 			return normalizeHeadStyle(this.c.headStyle) === 'theme';
 		},
 		/**
-		 * theme 档头部块: 渐变通铺卡边(负 margin 抵消 wrapStyle 的 padding, WXSS 不用 calc)
-		 * 内部左右 padding = 卡片原 padding, 保证头像与下方资料行左缘对齐
+		 * 头部容器样式(plain/theme 共用)。未开启自定义间距时完整保留历史布局：
+		 * theme 负外边距抵消卡片 padding，plain 不额外设置间距。
 		 */
+		headBoxStyle() {
+			const c = this.c;
+			const custom = flagOn(c.headSpacingCustom, false);
+			const style = {
+				background: c.headBgMode === 'custom'
+					? (String(c.headBg || '').trim() || 'transparent')
+					: (this.headTheme ? themeGradient(this.card) : 'transparent'),
+				marginTop: px2rpx(custom ? num(c.headMarginTop, 0) : (this.headTheme ? -num(c.padding, CardTokens.space.lg) : 0)) + 'rpx',
+				marginRight: px2rpx(custom ? num(c.headMarginRight, 0) : (this.headTheme ? -num(c.padding, CardTokens.space.lg) : 0)) + 'rpx',
+				marginBottom: px2rpx(custom ? num(c.headMarginBottom, 0) : 0) + 'rpx',
+				marginLeft: px2rpx(custom ? num(c.headMarginLeft, 0) : (this.headTheme ? -num(c.padding, CardTokens.space.lg) : 0)) + 'rpx',
+				paddingTop: px2rpx(custom ? num(c.headPaddingTop, 16) : (this.headTheme ? 16 : 0)) + 'rpx',
+				paddingRight: px2rpx(custom ? num(c.headPaddingRight, 16) : (this.headTheme ? num(c.padding, CardTokens.space.lg) : 0)) + 'rpx',
+				paddingBottom: px2rpx(custom ? num(c.headPaddingBottom, 14) : (this.headTheme ? 14 : 0)) + 'rpx',
+				paddingLeft: px2rpx(custom ? num(c.headPaddingLeft, 16) : (this.headTheme ? num(c.padding, CardTokens.space.lg) : 0)) + 'rpx',
+				borderRadius: c.headRadiusMode === 'custom'
+					? px2rpx(num(c.headRadius, 8)) + 'rpx'
+					: (this.headTheme ? '0 0 16rpx 16rpx' : '0'),
+			};
+			return this.$util.objToStyle(style);
+		},
 		headThemeStyle() {
-			const pad = px2rpx(num(this.c.padding, CardTokens.space.lg));
-			// 独立成块上浮时, 头部预留压边空间(参考 hero 的 200rpx 底内边距), 使蓝色姓名资料卡更高
-			const bottom = this.actsFloat ? 200 : 28;
-			return this.$util.objToStyle({
-				background: themeGradient(this.card),
-				margin: '-' + pad + 'rpx -' + pad + 'rpx 0',
-				padding: '32rpx ' + pad + 'rpx ' + bottom + 'rpx',
-			});
+			return this.headBoxStyle;
 		},
 		/** 资料区标题(2.17): 默认关(历史配置无此字段时不出标题) */
 		rowsTitleShow() {
@@ -443,6 +469,47 @@ export default {
 		qrTip() {
 			return this.c.qrTip || '';
 		},
+		// ===== 2.19.10 detail 版式对齐字段 =====
+		/** 资料行三列(图标+灰标签+值, detail 同款): 默认 0 = 历史图标/标签二选一 */
+		showRowLabels() {
+			return flagOn(this.c.showRowLabels, false);
+		},
+		/** hero 徽章(左上「数字名片」): 默认关 */
+		badgeShow() {
+			return flagOn(this.c.badgeShow, false);
+		},
+		badgeText() {
+			return String(this.c.badgeText || '数字名片');
+		},
+		/** 提示加粗段(detail <b>扫码保存名片</b>); 空 = 整行走 qrTip(历史形态) */
+		qrTipEm() {
+			return String(this.c.qrTipEm || '').trim();
+		},
+		/** 提示第一行(加粗段之后): 有 em 时前置「 · 」分隔符 */
+		qrTipLine1() {
+			const tip = String(this.c.qrTip || '').trim();
+			if (this.qrTipEm) return tip ? (' · ' + tip) : '';
+			return tip || '扫码查看完整名片';
+		},
+		/** 提示第二行(detail「同一二维码可写入 NFC 名片贴」): 空 = 不出 */
+		qrTipSub() {
+			return String(this.c.qrTipSub || '').trim();
+		},
+		/** 二维码下 URL 文本行(detail qr-url 同款): 默认关 */
+		qrUrlShow() {
+			return flagOn(this.c.qrUrlShow, false);
+		},
+		qrUrlText() {
+			return (this.card && this.card.wap_url) || '';
+		},
+		/** 复制按钮范围: all=全部行(历史) / mobile=仅手机微信行(detail 口径) */
+		copyBtnScope() {
+			return String(this.c.copyBtnScope || 'all');
+		},
+		/** 复制按钮外观: theme=主题浅底(历史) / gray=浅灰描边胶囊(detail 同款) */
+		copyBtnLook() {
+			return String(this.c.copyBtnLook || 'theme');
+		},
 		detailBtnText() {
 			return this.c.detailBtnText || '';
 		},
@@ -524,13 +591,15 @@ export default {
 		gradientStyle() {
 			return this.$util.objToStyle({ background: themeGradient(this.card) });
 		},
-		/** 蓝色顶带开关(默认关): 参考图要求去掉卡片背后的蓝底, 只保留头部主题蓝 */
-		showBand() {
-			return flagOn(this.c.showBand, false);
+		/** 顶部色带默认隐藏；背景可跟随名片设计或使用独立颜色。 */
+		bandShow() {
+			return flagOn(this.c.bandShow, false);
 		},
 		bandStyle() {
-			// 蓝色顶带底色: 名片主题渐变(精选名片 show 同款)
-			return this.$util.objToStyle({ background: themeGradient(this.card) });
+			const custom = this.c.bandBgMode === 'custom';
+			return this.$util.objToStyle({
+				background: custom ? (String(this.c.bandBg || '').trim() || 'transparent') : themeGradient(this.card),
+			});
 		},
 		shareBtnStyle() {
 			// 分享抽屉主按钮(复制链接): 主题色
@@ -604,13 +673,51 @@ export default {
 				fontWeight: '600',
 			});
 		},
-		/** 复制按钮(参考图): 浅灰底 + 灰字, 与主题色解耦 */
+		/** 复制按钮: theme=主题浅底+主题色字(历史); gray=detail 同款浅灰描边胶囊 */
 		copyBtnStyle() {
+			if (this.copyBtnLook === 'gray') {
+				return this.$util.objToStyle({
+					background: '#F7F9FC',
+					color: '#5A6478',
+					border: '2rpx solid #EEF1F6',
+				});
+			}
 			return this.$util.objToStyle({
 				background: CardTokens.color.skeleton,
 				color: CardTokens.color.textSub,
 			});
 		},
+		/** 提示加粗段样式(detail qr-tip b 同款: ink-2 深灰 + 加粗) */
+		qrTipEmStyle() {
+			return this.$util.objToStyle({
+				color: this.c.infoColor || '#5A6478',
+				fontWeight: '600',
+			});
+		},
+		/** 二维码 URL 行样式(detail qr-url 同款: 小字灰 + 断行) */
+		qrUrlStyle() {
+			return this.$util.objToStyle({
+				color: this.c.labelColor || CardTokens.color.textLabel,
+				fontSize: px2rpx(10) + 'rpx',
+				marginTop: px2rpx(8) + 'rpx',
+				wordBreak: 'break-all',
+				textAlign: 'center',
+			});
+		},
+		/** hero 徽章胶囊(theme 档白描边 / plain 档主题描边; 避让企业徽标 badgeStyle) */
+		heroBadgeStyle() {
+			const theme = (this.card && this.card.theme_color) || CardTokens.color.primary;
+			return this.$util.objToStyle({
+				border: '2rpx solid ' + (this.headTheme ? 'rgba(255,255,255,0.35)' : (hexToRgba(theme, 0.35) || theme)),
+			});
+		},
+		heroBadgeTextStyle() {
+			return this.$util.objToStyle({
+				color: this.headTheme ? 'rgba(255,255,255,0.85)' : (this.c.labelColor || CardTokens.color.textLabel),
+				fontSize: px2rpx(11) + 'rpx',
+				letterSpacing: '2rpx',
+			});
+		},
 		badgeStyle() {
 			// 企业徽标固定红底(参考图 2026-10-22 口径), 与头像底色解耦
 			return this.$util.objToStyle({ background: '#FA5151' });
@@ -738,6 +845,48 @@ export default {
 			}
 			return parts.join(' ').trim();
 		},
+		/** 资料区独立块样式(与操作区同款: Bg/Radius/Pad) */
+		rowsBlockStyle() {
+			const c = this.c;
+			const bg = String(c.rowsBlockBg || '').trim();
+			const radius = num(c.rowsBlockRadius, 0);
+			const pad = num(c.rowsBlockPad, 0);
+			const style = {};
+			if (bg) style.background = bg;
+			if (radius > 0) style.borderRadius = px2rpx(radius) + 'rpx';
+			if (pad > 0) style.padding = px2rpx(pad) + 'rpx';
+			return this.$util.objToStyle(style);
+		},
+		/** 二维码独立块样式(与操作区同款: Bg/Radius/Pad) */
+		qrBlockCustomStyle() {
+			const c = this.c;
+			const bg = String(c.qrBlockBg || '').trim();
+			const radius = num(c.qrBlockRadius, 0);
+			const pad = num(c.qrBlockPad, 0);
+			const style = {};
+			if (bg) style.background = bg;
+			if (radius > 0) style.borderRadius = px2rpx(radius) + 'rpx';
+			if (pad > 0) style.padding = px2rpx(pad) + 'rpx';
+			return this.$util.objToStyle(style);
+		},
+		/** 资料区最终样式: 独立块样式 + corner 让位合并 */
+		rowsFinalStyle() {
+			const clear = this.rowsClearStyle || {};
+			const extra = clear.marginTop ? 'margin-top: ' + clear.marginTop + ';' : '';
+			return ((this.rowsBlockStyle || '') + ' ' + extra).trim();
+		},
+		/** 二维码(rows/bottom 流内档)最终样式: 独立块样式 + 尺寸/位移合并 */
+		qrBlockFinalStyle() {
+			const transform = qrTransform(this.c.qrOffsetX, this.c.qrOffsetY);
+			const parts = [this.qrBlockStyle, this.qrBlockCustomStyle];
+			if (transform) parts.push('transform:' + transform + ';');
+			return parts.filter(Boolean).join(' ').trim();
+		},
+		/** plain 头最终样式：头部容器配置与 corner 二维码让位合并为单字符串。 */
+		plainHeadFinalStyle() {
+			const corner = this.$util.objToStyle(this.cornerHeadStyle || {});
+			return [this.headBoxStyle, corner].filter(Boolean).join(' ').trim();
+		},
 		detailBtnStyle() {
 			// 发送名片大按钮: 纯色主题实心(2026-10-22 参考图定稿, 不再用渐变);
 			// 高度 104rpx(用户反馈: 比触达标准 80rpx 加高一档, 参考图观感)
@@ -921,6 +1070,15 @@ export default {
 				fontSize: px2rpx(num(this.c.actSize, 12)) + 'rpx',
 			});
 		},
+		/** 复制按钮可见性: 开关 + 值非空 + 范围(mobile=仅手机/微信行, detail 口径) */
+		copyBtnVisible(row) {
+			if (!this.showCopyBtn || !row || !String(row.value || '').trim()) return false;
+			if (this.copyBtnScope === 'mobile') {
+				const f = String(row.field || '').toLowerCase();
+				return f === 'mobile' || f === 'phone' || f === 'wechat' || f === 'wx';
+			}
+			return true;
+		},
 		/** 复制按钮: 复用 row-act 的 copy 分支(rowTap 关闭时仍可独立复制) */
 		onCopyRow(row) {
 			this.$emit('row-act', { type: 'copy', value: row.value });
@@ -1092,7 +1250,43 @@ export default {
 			}
 		}
 
-		/* 复制按钮(参考图): 浅灰底灰字, 胶囊圆角, 小尺寸, 垂直居中, 不挤压资料值换行 */
+		/* 2.19.10 hero 徽章(detail hero-badge 同款: 绿点 + 描边胶囊) */
+		.mini-hero-badge {
+			display: inline-flex;
+			align-items: center;
+			position: relative;
+			z-index: 2;
+			align-self: flex-start;
+			margin-bottom: 20rpx;
+			padding: 6rpx 18rpx;
+			border-radius: 999rpx;
+
+			.hero-badge-dot {
+				width: 10rpx;
+				height: 10rpx;
+				border-radius: 50%;
+				background: #07c160;
+				margin-right: 10rpx;
+			}
+		}
+
+		/* 提示多行(detail qr-tip 同款: 加粗段 + 换行) */
+		.qr-tip-em {
+			font-weight: 600;
+		}
+
+		.qr-tip-sub {
+			font-size: 22rpx;
+			margin-top: 4rpx;
+		}
+
+		/* 二维码 URL 行(detail qr-url 同款) */
+		.qr-url {
+			display: block;
+			width: 100%;
+		}
+
+		/* 复制按钮(2.17): 浅底主题色小按钮(色内联), 不挤压资料值换行 */
 		.row-copy {
 			flex-shrink: 0;
 			align-self: center;
@@ -1267,6 +1461,18 @@ export default {
 					font-size: 24rpx;
 				}
 
+				/* 三列档(2.19.10): 图标+灰标签+值, detail 资料行同款列宽 */
+				&.row-3col {
+					.row-icon,
+					.row-css-wrap {
+						width: 56rpx;
+					}
+
+					.row-label {
+						width: 88rpx;
+					}
+				}
+
 				/* 图标列与文字标签列同宽, 保证值列左缘对齐(参考图口径) */
 				.row-icon {
 					flex-shrink: 0;