forked from angelo/web-retail-h5
feat(share): 更换背景图
This commit is contained in:
woody
parent
0fa1d67333
commit
de8797e3ac
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<div
|
||||
style="
|
||||
font-size: 26rpx;
|
||||
font-size: 18rpx;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
margin-top: 10rpx;
|
||||
|
|
@ -49,7 +49,7 @@
|
|||
<img
|
||||
v-if="isWechat"
|
||||
class="share-btn"
|
||||
style="margin-top: 50rpx"
|
||||
style="margin-top: 30rpx"
|
||||
src="/static/images/share-btn.svg"
|
||||
mode="scaleToFill"
|
||||
/>
|
||||
|
|
@ -370,7 +370,7 @@ export default {
|
|||
.share-wrapper {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
bottom: 280rpx;
|
||||
top: 370rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -399,17 +399,10 @@ export default {
|
|||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 44rpx;
|
||||
font-weight: 500;
|
||||
color: #1e1e1e;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
/* The single white card for the QR code */
|
||||
.qr-code-outer {
|
||||
width: 400rpx; /* 从400rpx缩小到320rpx */
|
||||
height: 400rpx; /* 从400rpx缩小到320rpx */
|
||||
width: 300rpx; /* 从400rpx缩小到320rpx */
|
||||
height: 300rpx; /* 从400rpx缩小到320rpx */
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
border-radius: 20rpx; /* 从24rpx减小到20rpx */
|
||||
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>
|
||||
<!-- 科技感渐变背景 -->
|
||||
<!-- 高贵金属渐变背景 -->
|
||||
<linearGradient id="techGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6B46C1;stop-opacity:1" />
|
||||
<stop offset="30%" style="stop-color:#8B5CF6;stop-opacity:1" />
|
||||
<stop offset="70%" style="stop-color:#7C3AED;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#5B21B6;stop-opacity:1" />
|
||||
<stop offset="0%" style="stop-color:#D4AF37;stop-opacity:1" />
|
||||
<stop offset="30%" style="stop-color:#FFD700;stop-opacity:1" />
|
||||
<stop offset="70%" style="stop-color:#B8860B;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#8B7355;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
|
||||
<!-- 科技感光效 -->
|
||||
<!-- 奢华光效 -->
|
||||
<radialGradient id="glowEffect" cx="50%" cy="50%" r="50%">
|
||||
<stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.4" />
|
||||
<stop offset="50%" style="stop-color:#8B5CF6;stop-opacity:0.2" />
|
||||
<stop offset="100%" style="stop-color:#4C1D95;stop-opacity:0" />
|
||||
<stop offset="0%" style="stop-color:#FFE55C;stop-opacity:0.3" />
|
||||
<stop offset="50%" style="stop-color:#D4AF37;stop-opacity:0.15" />
|
||||
<stop offset="100%" style="stop-color:#8B7355;stop-opacity:0" />
|
||||
</radialGradient>
|
||||
|
||||
<!-- 边框光效 -->
|
||||
<!-- 高贵边框光效 -->
|
||||
<linearGradient id="borderGlow" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#A78BFA;stop-opacity:0.6" />
|
||||
<stop offset="50%" style="stop-color:#DDD6FE;stop-opacity:0.9" />
|
||||
<stop offset="100%" 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:#FFFACD;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#F7E98E;stop-opacity:0.8" />
|
||||
</linearGradient>
|
||||
</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"/>
|
||||
<circle cx="8" cy="8" r="1.5" fill="#A78BFA"/>
|
||||
<path d="M7 6 L15 6 L15 10" stroke="#F7E98E" stroke-width="0.8" fill="none"/>
|
||||
<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"/>
|
||||
<circle cx="152" cy="32" r="1.5" fill="#A78BFA"/>
|
||||
<path d="M153 28 L145 28 L145 24" stroke="#F7E98E" stroke-width="0.8" fill="none"/>
|
||||
<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="130" cy="12" r="0.8" fill="#C4B5FD" opacity="0.6"/>
|
||||
<circle cx="140" cy="18" r="0.8" fill="#A78BFA" opacity="0.8"/>
|
||||
<circle cx="28" cy="24" r="0.7" fill="#FFFACD" opacity="0.8"/>
|
||||
<circle cx="132" cy="10" r="0.7" fill="#F7E98E" opacity="0.7"/>
|
||||
<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="M125 25 L135 25" stroke="#E4E4FF" stroke-width="0.5" opacity="0.5"/>
|
||||
<circle cx="45" cy="12" r="0.5" fill="#F3F0FF" opacity="0.4"/>
|
||||
<circle cx="115" cy="28" r="0.5" fill="#F3F0FF" opacity="0.4"/>
|
||||
<!-- 额外奢华元素 -->
|
||||
<path d="M25 12 L33 12" stroke="#FFF8DC" stroke-width="0.5" opacity="0.6"/>
|
||||
<path d="M127 22 L135 22" stroke="#FFF8DC" stroke-width="0.5" opacity="0.6"/>
|
||||
<circle cx="42" cy="9" r="0.4" fill="#FFFEF7" opacity="0.5"/>
|
||||
<circle cx="118" cy="25" r="0.4" fill="#FFFEF7" opacity="0.5"/>
|
||||
</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-size="14" font-weight="500" fill="white">
|
||||
font-size="14" font-weight="600" fill="#1A1A1A">
|
||||
长按保存图片
|
||||
</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-size="14" font-weight="500" fill="white" opacity="0.3"
|
||||
style="filter: blur(1px);">
|
||||
font-size="14" font-weight="600" fill="#FFE55C" opacity="0.2"
|
||||
style="filter: blur(0.8px);">
|
||||
长按保存图片
|
||||
</text>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
Loading…
Reference in New Issue