From 9d187bb8a4dd56c0d8644ea996899ffbb86204ba Mon Sep 17 00:00:00 2001 From: jinhhanhan <1683105490@qq.com> Date: Wed, 5 Aug 2026 09:57:09 +0800 Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E5=88=86=E6=94=AF9=20=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E7=9A=84=E6=96=B0=E5=88=86=E6=94=AF=EF=BC=8C=E6=8A=8A?= =?UTF-8?q?4=E4=B8=AA=E6=8E=A8=E8=8D=90=E7=A0=81=E6=A0=B7=E5=BC=8F?= =?UTF-8?q?=E6=94=B9=E4=BA=86=EF=BC=8C=E4=BD=86=E4=B8=8D=E5=AE=8C=E5=85=A8?= =?UTF-8?q?=E5=8F=AF=E4=BB=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components-diy/diy-recommend-code.vue | 276 ++++++++++++++++++++------ 1 file changed, 213 insertions(+), 63 deletions(-) diff --git a/components-diy/diy-recommend-code.vue b/components-diy/diy-recommend-code.vue index 48c7017..8d5324c 100644 --- a/components-diy/diy-recommend-code.vue +++ b/components-diy/diy-recommend-code.vue @@ -43,21 +43,22 @@ - {{ value.title || '我的推荐码' }} + {{ value.title || '我的推荐码' }} - - 推荐码 - {{ code || '暂无' }} - 复制 + + {{ code || '暂无' }} + + + + + {{ value.placeholderCopyText || '立即分享链接' }} + {{ value.buttonText || '立即分享' }} - - {{ value.placeholderCopyText || '复制链接' }} - {{ value.placeholderRegenerateText || '换一个新码' }} @@ -70,7 +71,7 @@ - + {{ value.posterQrTip || '扫码进入并填写入驻信息' }} @@ -79,11 +80,11 @@ - {{ value.title || '我的推荐码' }} + {{ value.title || '我的推荐码' }} {{ code || '暂无' }} - {{ value.placeholderCopyText || '复制链接' }} + {{ value.placeholderCopyText || '立即分享链接' }} - - {{ value.placeholderCopyText || '复制链接' }} - {{ value.placeholderRegenerateText || '换一个新码' }} @@ -135,10 +133,46 @@ {{ formatShareLink }} - + - + + {{ value.posterQrTip || '扫码进入并填写入驻信息' }} + + + + + + + + {{ value.title || '我的推荐码' }} + + + 推荐码 + {{ code || '暂无' }} + 复制 + + + + {{ value.buttonText || '立即分享' }} + + + {{ value.placeholderCopyText || '立即分享链接' }} + + + {{ value.placeholderRegenerateText || '换一个新码' }} + + + + + {{ formatShareLink}} + + + + + {{ value.posterQrTip || '扫码进入并填写入驻信息' }} @@ -286,10 +320,10 @@ export default { return merged; }, stylePreset() { - const s = String(this.nc.stylePreset || 'gradient').toLowerCase(); - if (['minimal', 'card'].includes(s)) return s; - return 'gradient'; - }, + const s = String(this.nc.stylePreset || 'gradient').toLowerCase(); + if (['minimal', 'card', 'bookgold'].includes(s)) return s; + return 'gradient'; + }, requireConsentComputed() { return this.isFeatureOn(this.nc.requireConsent); }, @@ -329,26 +363,62 @@ export default { ].join(''); }, /* ---------- 三套容器样式 ---------- */ - gradientStyle() { - const v = this.nc; - const start = v.bgColorStart || '#3B82F6'; - const end = v.bgColorEnd || '#1E40AF'; - return this.cardBaseStyle + [ - `background:linear-gradient(135deg, ${start} 0%, ${end} 100%);`, - 'box-shadow:0 12rpx 36rpx rgba(0,0,0,0.12);' - ].join(''); - }, + gradientStyle() { + const v = this.nc; + // 奶油米色背景 + return this.cardBaseStyle + [ + `background:#FDF6ED;`, + 'box-shadow:0 12rpx 36rpx rgba(92,61,30,0.08);' + ].join(''); + }, + /* 预设1专用：复制链接按钮白色背景样式 */ + gradientCopyLinkStyle() { + const v = this.nc; + return [ + `background:#FFFFFF;`, + `color:#5C3D1E;`, + `border-radius:40rpx;`, + `padding:14rpx 56rpx;`, + 'font-size:26rpx;font-weight:600;', + 'box-shadow:0 4rpx 12rpx rgba(92,61,30,0.1);' + ].join(''); + }, + bookGoldStyle() { + const v = this.nc; + return this.cardBaseStyle + [ + `background:linear-gradient(135deg, #C4A882 0%, #A68B6A 100%);`, // 参考图Taupe棕褐渐变 + 'box-shadow:0 12rpx 36rpx rgba(166,139,106,0.15);', + 'border-radius:24rpx;' + ].join(''); + }, + bookGoldCodeBoxStyle() { + const v = this.nc; + return [ + `background:rgba(255,255,255,0.12);`, + `border-radius:${this.px2rpx(v.borderRadius)}rpx;`, + 'margin-top:28rpx;' + ].join(''); + }, + bookGoldCopyBtnStyle() { + const v = this.nc; + return [ + `background:#B8A08A;`, // 灰褐金按钮 + `color:#ffffff;`, + `border-radius:40rpx;`, + `font-size:24rpx;padding:10rpx 24rpx;` + ].join(''); + }, minimalStyle() { const v = this.nc; return this.cardBaseStyle + [ - `background:${v.bgColor || '#FFFFFF'};`, - `border:2rpx solid ${v.borderColor || '#E5E7EB'};` + `background:${v.bgColor || '#FDF6ED'};`, + `border:2rpx solid ${v.borderColor || '#E8D5C0'};` ].join(''); }, minimalCodeBoxStyle() { const v = this.nc; return [ - `border:2rpx dashed ${v.codeColor || '#E4393C'};`, + `border:2rpx dashed ${v.codeColor || '#6B4423'};`, `border-radius:${this.px2rpx(Math.max(4, (Number(v.borderRadius) || 8) - 4))}rpx;`, 'margin-top:28rpx;' ].join(''); @@ -356,17 +426,17 @@ export default { minimalCopyBtnStyle() { const v = this.nc; return [ - `background:${v.buttonBgColor || '#E4393C'};`, + `background:${v.buttonBgColor || '#6B4423'};`, `color:${v.buttonTextColor || '#FFFFFF'};`, `border-radius:${this.px2rpx(v.borderRadius)}rpx;`, - `font-size:24rpx;padding:10rpx 24rpx;` + `font-size:24rpx;padding:14rpx 24rpx;` ].join(''); }, cardStyleBox() { const v = this.nc; return this.cardBaseStyle + [ - `background:${v.bgColor || '#FFFFFF'};`, - `border:2rpx solid ${v.accentColor || '#FFD700'};`, + `background:${v.bgColor || '#FFE4B5'};`, + `border:2rpx solid ${v.accentColor || '#F0C040'};`, 'box-shadow:0 10rpx 30rpx rgba(0,0,0,0.08);', 'position:relative;overflow:hidden;' ].join(''); @@ -375,7 +445,7 @@ export default { codeTextStyle() { const v = this.nc; return [ - `color:${v.codeColor || '#E4393C'};`, + `color:${v.codeColor || (this.stylePreset === 'bookgold' ? '#FFFFFF' : (this.stylePreset === 'card' ? '#B8860B' : '#5C3D1E'))};`, `font-size:${this.px2rpx(v.codeFontSize)}rpx;`, `letter-spacing:${this.px2rpx(1)}rpx;`, 'font-weight:800;', @@ -386,9 +456,12 @@ export default { secondaryBtnStyle() { const v = this.nc; + const sp = this.stylePreset; + const secBg = sp === 'gradient' ? 'rgba(92,61,30,0.08)' : (sp === 'bookgold' ? 'rgba(255,255,255,0.12)' : (sp === 'card' ? 'rgba(184,134,11,0.08)' : 'rgba(92,61,30,0.06)')); + const secColor = sp === 'gradient' ? '#5C3D1E' : (sp === 'bookgold' ? '#FFFFFF' : (sp === 'card' ? '#B8860B' : '#5C3D1E')); return [ - 'background:rgba(0,0,0,0.06);', - `color:${this.stylePreset === 'gradient' ? '#ffffff' : (v.titleColor || '#333333')};`, + `background:${secBg};`, + `color:${secColor};`, `border-radius:${this.px2rpx(v.borderRadius)}rpx;`, `padding:${this.px2rpx(Math.round((Number(v.padding) || 16) * 0.55))}rpx ${this.px2rpx(Math.round((Number(v.padding) || 16) * 0.9))}rpx;`, 'font-size:24rpx;font-weight:600;' @@ -397,7 +470,7 @@ export default { consentBtnStyle() { const v = this.nc; return [ - `background:linear-gradient(135deg, ${v.bgColorStart || '#3B82F6'} 0%, ${v.bgColorEnd || '#1E40AF'} 100%);`, + `background:linear-gradient(135deg, ${v.bgColorStart || '#FFD699'} 0%, ${v.bgColorEnd || '#FFB84D'} 100%);`, `color:${v.buttonTextColor || '#FFFFFF'};`, `border-radius:${this.px2rpx(Math.max(12, Number(v.borderRadius) || 8))}rpx;`, `padding:${this.px2rpx(Math.round((Number(v.padding) || 16) * 0.9))}rpx ${this.px2rpx(Math.round((Number(v.padding) || 16) * 2))}rpx;`, @@ -528,8 +601,11 @@ export default { */ mainBtnBgStyle(isCopyMini) { const v = this.nc; - const bg = isCopyMini ? 'rgba(255,255,255,0.92)' : (v.buttonBgColor || '#E4393C'); - const color = isCopyMini ? (v.buttonBgColor || '#E4393C') : (v.buttonTextColor || '#FFFFFF'); + const sp = this.stylePreset; + const presetBtnColors = { gradient: '#FF9933', minimal: '#6B4423', card: '#DAA520', bookgold: '#B8A08A' }; + const defaultBtnBg = presetBtnColors[sp] || '#FF9933'; + const bg = isCopyMini ? 'rgba(255,255,255,0.92)' : (v.buttonBgColor || defaultBtnBg); + const color = isCopyMini ? (v.buttonBgColor || defaultBtnBg) : (v.buttonTextColor || '#FFFFFF'); return [ `background:${bg};`, `color:${color};`, @@ -1072,12 +1148,16 @@ onShareClick() { border-radius: 16rpx; background: rgba(255,255,255,0.08); } - &.rc-link-minimal .rc-link-text, + &.rc-link-minimal .rc-link-text { + color: #8B7355; + background: rgba(92,61,30,0.04); + opacity: 1; + } &.rc-link-card .rc-link-text { - color: #666666; - background: #F3F4F6; - opacity: 1; - } + color: #B8860B; + background: rgba(184,134,11,0.06); + opacity: 1; + } } .rc-qr-row { margin-top: 36rpx; @@ -1100,14 +1180,14 @@ onShareClick() { &.rc-qr-minimal { align-items: flex-start; gap: 12rpx; - .rc-qr-minimal-img { border: 2rpx solid #F3F4F6; } + .rc-qr-minimal-img { border: 2rpx solid #E8D5C0; } .rc-qr-tip-minimal { text-align: left; max-width: 500rpx; } } &.rc-qr-card { gap: 20rpx; .rc-qr-wrap-card { border-radius: 20rpx; - border: 4rpx solid #FFD700; + border: 4rpx solid #F0C040; padding: 16rpx; background: #ffffff; .rc-qr-card-img { width: 260rpx; height: 260rpx; border-radius: 12rpx; } @@ -1120,11 +1200,28 @@ onShareClick() { .style-gradient { box-sizing: border-box; width: 100%; - .rc-header .rc-title { color: #ffffff; } - .rc-code-box { - background: rgba(0,0,0,0.16); - .rc-prefix { color: rgba(255,255,255,0.7); } - .rc-code { color: #ffffff; } + .rc-header .rc-title { color: #5C3D1E; } + .rc-code-gradient { + background: transparent; + flex-direction: column; + align-items: center; + justify-content: center; + padding: 36rpx 30rpx; + .rc-code-gradient-text { + text-align: center; + letter-spacing: 4rpx; + } + } + .rc-copy-link-gradient { + margin-top: 24rpx; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + } + .rc-link-row .rc-link-text { + background: rgba(92,61,30,0.08); + color: #5C3D1E; } } @@ -1137,8 +1234,15 @@ onShareClick() { border-style: dashed; padding: 22rpx 26rpx; gap: 16rpx; - .rc-code-minimal-text { text-align: center; letter-spacing: 4rpx; } - .rc-copy-minimal { font-size: 22rpx; } + align-items: center; + .rc-code-minimal-text { text-align: center; letter-spacing: 4rpx; line-height: 1; } + .rc-copy-minimal { + font-size: 22rpx; + line-height: 1; + display: inline-flex; + align-items: center; + justify-content: center; + } } .rc-action-minimal { justify-content: space-between; } } @@ -1154,7 +1258,7 @@ onShareClick() { } .rc-header-card { margin-top: 8rpx; } .rc-code-card { - background: #FAFAFA; + background: rgba(184,134,11,0.04); padding: 28rpx 32rpx; gap: 16rpx; border-radius: 20rpx; @@ -1162,10 +1266,56 @@ onShareClick() { padding: 14rpx 30rpx; font-weight: 700; font-size: 24rpx; + cursor: pointer; + transition: opacity 0.2s ease, transform 0.15s ease; + &:active { opacity: 0.9; transform: scale(0.98); } } } .rc-action-card { justify-content: flex-start; } } + + /* ===== 预设 4：bookgold 金棕风格 ===== */ + .style-bookgold { + box-sizing: border-box; + width: 100%; + .rc-header-bookgold { + .rc-title { + color: #FFFFFF; + } + } + .rc-code-bookgold { + background: rgba(255,255,255,0.12); + .rc-prefix { + color: rgba(255,255,255,0.7); + } + .rc-copy-bookgold { + background: #B8A08A; + color: #fff; + } + } + .rc-action-bookgold { + justify-content: flex-start; + .rc-btn-share-bookgold { + background: #B8A08A; + color: #fff; + } + } + .rc-link-bookgold { + .rc-link-text { + background: rgba(255,255,255,0.08); + color: #E8DDD0; + } + } + .rc-qr-bookgold { + .rc-qr-bookgold-img { + border: 3rpx solid #D4C4B0; + border-radius: 16rpx; + } + .rc-qr-tip-bookgold { + color: #E8DDD0; + } + } + } }