forked from angelo/web-retail-h5
feat(share): 更换背景图
This commit is contained in:
woody
parent
90fc02a063
commit
3f85bc8cdd
|
|
@ -31,7 +31,7 @@
|
||||||
|
|
||||||
<div
|
<div
|
||||||
style="
|
style="
|
||||||
font-size: 26rpx;
|
font-size: 18rpx;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
|
|
@ -49,7 +49,7 @@
|
||||||
<img
|
<img
|
||||||
v-if="isWechat"
|
v-if="isWechat"
|
||||||
class="share-btn"
|
class="share-btn"
|
||||||
style="margin-top: 50rpx"
|
style="margin-top: 30rpx"
|
||||||
src="/static/images/share-btn.svg"
|
src="/static/images/share-btn.svg"
|
||||||
mode="scaleToFill"
|
mode="scaleToFill"
|
||||||
/>
|
/>
|
||||||
|
|
@ -370,7 +370,7 @@ export default {
|
||||||
.share-wrapper {
|
.share-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 2;
|
z-index: 2;
|
||||||
bottom: 280rpx;
|
top: 370rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -399,17 +399,10 @@ export default {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 44rpx;
|
|
||||||
font-weight: 500;
|
|
||||||
color: #1e1e1e;
|
|
||||||
margin-bottom: 60rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* The single white card for the QR code */
|
/* The single white card for the QR code */
|
||||||
.qr-code-outer {
|
.qr-code-outer {
|
||||||
width: 400rpx; /* 从400rpx缩小到320rpx */
|
width: 300rpx; /* 从400rpx缩小到320rpx */
|
||||||
height: 400rpx; /* 从400rpx缩小到320rpx */
|
height: 300rpx; /* 从400rpx缩小到320rpx */
|
||||||
background: rgba(255, 255, 255, 0.98);
|
background: rgba(255, 255, 255, 0.98);
|
||||||
border-radius: 20rpx; /* 从24rpx减小到20rpx */
|
border-radius: 20rpx; /* 从24rpx减小到20rpx */
|
||||||
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
|
box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 985 KiB After Width: | Height: | Size: 2.2 MiB |
|
|
@ -1,68 +1,68 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="40" viewBox="0 0 160 40">
|
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="34" viewBox="0 0 160 34">
|
||||||
<defs>
|
<defs>
|
||||||
<!-- 科技感渐变背景 -->
|
<!-- 高贵金属渐变背景 -->
|
||||||
<linearGradient id="techGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
<linearGradient id="techGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||||
<stop offset="0%" style="stop-color:#6B46C1;stop-opacity:1" />
|
<stop offset="0%" style="stop-color:#D4AF37;stop-opacity:1" />
|
||||||
<stop offset="30%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
<stop offset="30%" style="stop-color:#FFD700;stop-opacity:1" />
|
||||||
<stop offset="70%" style="stop-color:#7C3AED;stop-opacity:1" />
|
<stop offset="70%" style="stop-color:#B8860B;stop-opacity:1" />
|
||||||
<stop offset="100%" style="stop-color:#5B21B6;stop-opacity:1" />
|
<stop offset="100%" style="stop-color:#8B7355;stop-opacity:1" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
|
|
||||||
<!-- 科技感光效 -->
|
<!-- 奢华光效 -->
|
||||||
<radialGradient id="glowEffect" cx="50%" cy="50%" r="50%">
|
<radialGradient id="glowEffect" cx="50%" cy="50%" r="50%">
|
||||||
<stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.4" />
|
<stop offset="0%" style="stop-color:#FFE55C;stop-opacity:0.3" />
|
||||||
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.2" />
|
<stop offset="50%" style="stop-color:#D4AF37;stop-opacity:0.15" />
|
||||||
<stop offset="100%" style="stop-color:#4C1D95;stop-opacity:0" />
|
<stop offset="100%" style="stop-color:#8B7355;stop-opacity:0" />
|
||||||
</radialGradient>
|
</radialGradient>
|
||||||
|
|
||||||
<!-- 边框光效 -->
|
<!-- 高贵边框光效 -->
|
||||||
<linearGradient id="borderGlow" x1="0%" y1="0%" x2="100%" y2="0%">
|
<linearGradient id="borderGlow" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
<stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.6" />
|
<stop offset="0%" style="stop-color:#F7E98E;stop-opacity:0.8" />
|
||||||
<stop offset="50%" style="stop-color:#DDD6FE;stop-opacity:0.9" />
|
<stop offset="50%" style="stop-color:#FFFACD;stop-opacity:1" />
|
||||||
<stop offset="100%" style="stop-color:#A78BFA;stop-opacity:0.6" />
|
<stop offset="100%" style="stop-color:#F7E98E;stop-opacity:0.8" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<!-- 主背景 - 圆角矩形 -->
|
<!-- 主背景 - 圆角矩形 -->
|
||||||
<rect x="1" y="1" width="158" height="38" rx="19" ry="19" fill="url(#techGradient)" stroke="url(#borderGlow)" stroke-width="1"/>
|
<rect x="1" y="1" width="158" height="32" rx="16" ry="16" fill="url(#techGradient)" stroke="url(#borderGlow)" stroke-width="1"/>
|
||||||
|
|
||||||
<!-- 科技感光效层 -->
|
<!-- 奢华光效层 -->
|
||||||
<rect x="1" y="1" width="158" height="38" rx="19" ry="19" fill="url(#glowEffect)"/>
|
<rect x="1" y="1" width="158" height="32" rx="16" ry="16" fill="url(#glowEffect)"/>
|
||||||
|
|
||||||
<!-- 科技感装饰线条 -->
|
<!-- 高贵装饰线条 -->
|
||||||
<g opacity="0.4">
|
<g opacity="0.5">
|
||||||
<!-- 左上角装饰 -->
|
<!-- 左上角装饰 -->
|
||||||
<path d="M8 8 L18 8 L18 13" stroke="#C4B5FD" stroke-width="0.8" fill="none"/>
|
<path d="M7 6 L15 6 L15 10" stroke="#F7E98E" stroke-width="0.8" fill="none"/>
|
||||||
<circle cx="8" cy="8" r="1.5" fill="#A78BFA"/>
|
<circle cx="7" cy="6" r="1.2" fill="#FFE55C"/>
|
||||||
|
|
||||||
<!-- 右下角装饰 -->
|
<!-- 右下角装饰 -->
|
||||||
<path d="M152 32 L142 32 L142 27" stroke="#C4B5FD" stroke-width="0.8" fill="none"/>
|
<path d="M153 28 L145 28 L145 24" stroke="#F7E98E" stroke-width="0.8" fill="none"/>
|
||||||
<circle cx="152" cy="32" r="1.5" fill="#A78BFA"/>
|
<circle cx="153" cy="28" r="1.2" fill="#FFE55C"/>
|
||||||
|
|
||||||
<!-- 中间装饰点 -->
|
<!-- 中间装饰点 -->
|
||||||
<circle cx="30" cy="28" r="0.8" fill="#DDD6FE" opacity="0.7"/>
|
<circle cx="28" cy="24" r="0.7" fill="#FFFACD" opacity="0.8"/>
|
||||||
<circle cx="130" cy="12" r="0.8" fill="#C4B5FD" opacity="0.6"/>
|
<circle cx="132" cy="10" r="0.7" fill="#F7E98E" opacity="0.7"/>
|
||||||
<circle cx="140" cy="18" r="0.8" fill="#A78BFA" opacity="0.8"/>
|
<circle cx="140" cy="15" r="0.7" fill="#FFE55C" opacity="0.9"/>
|
||||||
|
|
||||||
<!-- 额外科技感元素 -->
|
<!-- 额外奢华元素 -->
|
||||||
<path d="M25 15 L35 15" stroke="#E4E4FF" stroke-width="0.5" opacity="0.5"/>
|
<path d="M25 12 L33 12" stroke="#FFF8DC" stroke-width="0.5" opacity="0.6"/>
|
||||||
<path d="M125 25 L135 25" stroke="#E4E4FF" stroke-width="0.5" opacity="0.5"/>
|
<path d="M127 22 L135 22" stroke="#FFF8DC" stroke-width="0.5" opacity="0.6"/>
|
||||||
<circle cx="45" cy="12" r="0.5" fill="#F3F0FF" opacity="0.4"/>
|
<circle cx="42" cy="9" r="0.4" fill="#FFFEF7" opacity="0.5"/>
|
||||||
<circle cx="115" cy="28" r="0.5" fill="#F3F0FF" opacity="0.4"/>
|
<circle cx="118" cy="25" r="0.4" fill="#FFFEF7" opacity="0.5"/>
|
||||||
</g>
|
</g>
|
||||||
|
|
||||||
<!-- 主文字 -->
|
<!-- 主文字 -->
|
||||||
<text x="80" y="20" text-anchor="middle" dominant-baseline="middle"
|
<text x="80" y="17" text-anchor="middle" dominant-baseline="middle"
|
||||||
font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
|
font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
|
||||||
font-size="14" font-weight="500" fill="white">
|
font-size="14" font-weight="600" fill="#1A1A1A">
|
||||||
长按保存图片
|
长按保存图片
|
||||||
</text>
|
</text>
|
||||||
|
|
||||||
<!-- 文字光效 -->
|
<!-- 文字光效 -->
|
||||||
<text x="80" y="20" text-anchor="middle" dominant-baseline="middle"
|
<text x="80" y="17" text-anchor="middle" dominant-baseline="middle"
|
||||||
font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
|
font-family="'PingFang SC', 'Microsoft YaHei', Arial, sans-serif"
|
||||||
font-size="14" font-weight="500" fill="white" opacity="0.3"
|
font-size="14" font-weight="600" fill="#FFE55C" opacity="0.2"
|
||||||
style="filter: blur(1px);">
|
style="filter: blur(0.8px);">
|
||||||
长按保存图片
|
长按保存图片
|
||||||
</text>
|
</text>
|
||||||
</svg>
|
</svg>
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in New Issue