|
@@ -1,9 +1,10 @@
|
|
|
<template>
|
|
<template>
|
|
|
<CustomPopup v-model="show" mode="center" width="680rpx" bgColor="transparent" :maskClosable="true">
|
|
<CustomPopup v-model="show" mode="center" width="680rpx" bgColor="transparent" :maskClosable="true">
|
|
|
<view class="poster-popup-content">
|
|
<view class="poster-popup-content">
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
<!-- Canvas (Hidden) -->
|
|
<!-- Canvas (Hidden) -->
|
|
|
- <canvas canvas-id="posterCanvas" class="poster-canvas" :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
|
|
|
|
|
|
|
+ <canvas canvas-id="posterCanvas" class="poster-canvas"
|
|
|
|
|
+ :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"></canvas>
|
|
|
|
|
|
|
|
<!-- Generated Image -->
|
|
<!-- Generated Image -->
|
|
|
<view class="image-container" v-if="posterImage">
|
|
<view class="image-container" v-if="posterImage">
|
|
@@ -34,6 +35,10 @@ export default {
|
|
|
userInfo: {
|
|
userInfo: {
|
|
|
type: Object,
|
|
type: Object,
|
|
|
default: () => ({})
|
|
default: () => ({})
|
|
|
|
|
+ },
|
|
|
|
|
+ qrcodeUrl: {
|
|
|
|
|
+ type: String,
|
|
|
|
|
+ default: ''
|
|
|
}
|
|
}
|
|
|
},
|
|
},
|
|
|
data() {
|
|
data() {
|
|
@@ -60,23 +65,23 @@ export default {
|
|
|
try {
|
|
try {
|
|
|
// 确保Canvas元素已渲染
|
|
// 确保Canvas元素已渲染
|
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
const ctx = uni.createCanvasContext('posterCanvas', this);
|
|
const ctx = uni.createCanvasContext('posterCanvas', this);
|
|
|
this.ctx = ctx;
|
|
this.ctx = ctx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Setup dimensions
|
|
// Setup dimensions
|
|
|
const sysInfo = uni.getSystemInfoSync();
|
|
const sysInfo = uni.getSystemInfoSync();
|
|
|
const baseScale = (sysInfo.windowWidth || 375) / 750;
|
|
const baseScale = (sysInfo.windowWidth || 375) / 750;
|
|
|
// 清晰度与稳定性折中:按设备像素比绘制,但最多放大到 2 倍
|
|
// 清晰度与稳定性折中:按设备像素比绘制,但最多放大到 2 倍
|
|
|
const renderRatio = Math.min(Math.max(sysInfo.pixelRatio || 1, 1), 2);
|
|
const renderRatio = Math.min(Math.max(sysInfo.pixelRatio || 1, 1), 2);
|
|
|
const scale = baseScale * renderRatio;
|
|
const scale = baseScale * renderRatio;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// User request: Canvas 340px, Padding 10px.
|
|
// User request: Canvas 340px, Padding 10px.
|
|
|
// Mapping to rpx: 340px -> 680rpx, 10px -> 20rpx.
|
|
// Mapping to rpx: 340px -> 680rpx, 10px -> 20rpx.
|
|
|
const width = Math.floor(680 * scale);
|
|
const width = Math.floor(680 * scale);
|
|
|
const height = Math.floor(1140 * scale);
|
|
const height = Math.floor(1140 * scale);
|
|
|
- const padding = 20 * scale;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ const padding = 20 * scale;
|
|
|
|
|
+
|
|
|
// 确保Canvas尺寸在合理范围内
|
|
// 确保Canvas尺寸在合理范围内
|
|
|
const maxCanvasSize = 2000; // 保守上限,兼顾清晰度与稳定性
|
|
const maxCanvasSize = 2000; // 保守上限,兼顾清晰度与稳定性
|
|
|
if (width > maxCanvasSize || height > maxCanvasSize) {
|
|
if (width > maxCanvasSize || height > maxCanvasSize) {
|
|
@@ -90,15 +95,15 @@ export default {
|
|
|
this.canvasWidth = width;
|
|
this.canvasWidth = width;
|
|
|
this.canvasHeight = height;
|
|
this.canvasHeight = height;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 1. Draw Background (Gradient, Rounded)
|
|
// 1. Draw Background (Gradient, Rounded)
|
|
|
// linear-gradient(0deg, #FBFFFF 0%, #BFFCFE 100%) -> Bottom to Top
|
|
// linear-gradient(0deg, #FBFFFF 0%, #BFFCFE 100%) -> Bottom to Top
|
|
|
const grd = ctx.createLinearGradient(0, this.canvasHeight, 0, 0);
|
|
const grd = ctx.createLinearGradient(0, this.canvasHeight, 0, 0);
|
|
|
grd.addColorStop(0, '#FBFFFF');
|
|
grd.addColorStop(0, '#FBFFFF');
|
|
|
grd.addColorStop(1, '#BFFCFE');
|
|
grd.addColorStop(1, '#BFFCFE');
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
this.roundRect(ctx, 0, 0, this.canvasWidth, this.canvasHeight, 36 * scale, grd);
|
|
this.roundRect(ctx, 0, 0, this.canvasWidth, this.canvasHeight, 36 * scale, grd);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 2. Draw Product Cover
|
|
// 2. Draw Product Cover
|
|
|
const coverPath = await this.getImageInfo(this.product.cover || '/static/img/1.png', '/static/img/1.png');
|
|
const coverPath = await this.getImageInfo(this.product.cover || '/static/img/1.png', '/static/img/1.png');
|
|
|
// Image width = Canvas width - 2 * padding
|
|
// Image width = Canvas width - 2 * padding
|
|
@@ -106,7 +111,7 @@ export default {
|
|
|
const coverHeight = imgWidth; // Square cover
|
|
const coverHeight = imgWidth; // Square cover
|
|
|
const coverX = padding;
|
|
const coverX = padding;
|
|
|
const coverY = padding;
|
|
const coverY = padding;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
ctx.save();
|
|
ctx.save();
|
|
|
// Rounded corners for the cover image itself?
|
|
// Rounded corners for the cover image itself?
|
|
|
// Prototype usually has rounded corners for the cover too.
|
|
// Prototype usually has rounded corners for the cover too.
|
|
@@ -125,27 +130,27 @@ export default {
|
|
|
ctx.fillRect(coverX, coverY, imgWidth, coverHeight);
|
|
ctx.fillRect(coverX, coverY, imgWidth, coverHeight);
|
|
|
}
|
|
}
|
|
|
ctx.restore();
|
|
ctx.restore();
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 3. Draw User Info
|
|
// 3. Draw User Info
|
|
|
const moveDownY = 20 * scale;
|
|
const moveDownY = 20 * scale;
|
|
|
const contentPadding = 30 * scale;
|
|
const contentPadding = 30 * scale;
|
|
|
|
|
|
|
|
const avatarSize = 80 * scale;
|
|
const avatarSize = 80 * scale;
|
|
|
const avatarX = padding;
|
|
const avatarX = padding;
|
|
|
- const avatarY = coverY + coverHeight - (avatarSize / 2) + moveDownY;
|
|
|
|
|
-
|
|
|
|
|
|
|
+ const avatarY = coverY + coverHeight - (avatarSize / 2) + moveDownY;
|
|
|
|
|
+
|
|
|
// Avatar Border/Background
|
|
// Avatar Border/Background
|
|
|
ctx.beginPath();
|
|
ctx.beginPath();
|
|
|
- ctx.arc(avatarX + avatarSize/2, avatarY + avatarSize/2, avatarSize/2 + 2*scale, 0, 2 * Math.PI);
|
|
|
|
|
|
|
+ ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2 + 2 * scale, 0, 2 * Math.PI);
|
|
|
ctx.setFillStyle('#FFFFFF');
|
|
ctx.setFillStyle('#FFFFFF');
|
|
|
ctx.fill();
|
|
ctx.fill();
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Avatar Image
|
|
// Avatar Image
|
|
|
- const avatarUrl = this.userInfo.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg';
|
|
|
|
|
- const avatarPath = await this.getImageInfo(avatarUrl, '/static/img/1.png');
|
|
|
|
|
|
|
+ const avatarUrl = this.userInfo.imgPath || 'https://shuhi.oss-cn-qingdao.aliyuncs.com/mini/logo3.png';
|
|
|
|
|
+ const avatarPath = await this.getImageInfo(avatarUrl, avatarUrl);
|
|
|
ctx.save();
|
|
ctx.save();
|
|
|
ctx.beginPath();
|
|
ctx.beginPath();
|
|
|
- ctx.arc(avatarX + avatarSize/2, avatarY + avatarSize/2, avatarSize/2, 0, 2 * Math.PI);
|
|
|
|
|
|
|
+ ctx.arc(avatarX + avatarSize / 2, avatarY + avatarSize / 2, avatarSize / 2, 0, 2 * Math.PI);
|
|
|
ctx.clip();
|
|
ctx.clip();
|
|
|
try {
|
|
try {
|
|
|
if (avatarPath) {
|
|
if (avatarPath) {
|
|
@@ -160,27 +165,27 @@ export default {
|
|
|
ctx.fillRect(avatarX, avatarY, avatarSize, avatarSize);
|
|
ctx.fillRect(avatarX, avatarY, avatarSize, avatarSize);
|
|
|
}
|
|
}
|
|
|
ctx.restore();
|
|
ctx.restore();
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// User Name & Recomm Text
|
|
// User Name & Recomm Text
|
|
|
// Align with avatar
|
|
// Align with avatar
|
|
|
const userInfoY = coverY + coverHeight + 25 * scale + moveDownY;
|
|
const userInfoY = coverY + coverHeight + 25 * scale + moveDownY;
|
|
|
const textLeftX = avatarX + avatarSize + 16 * scale;
|
|
const textLeftX = avatarX + avatarSize + 16 * scale;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
ctx.setFillStyle('#1D1D1D');
|
|
ctx.setFillStyle('#1D1D1D');
|
|
|
ctx.setFontSize(28 * scale);
|
|
ctx.setFontSize(28 * scale);
|
|
|
ctx.setTextAlign('left');
|
|
ctx.setTextAlign('left');
|
|
|
ctx.fillText(this.userInfo.nickName || '微信用户', textLeftX, userInfoY);
|
|
ctx.fillText(this.userInfo.nickName || '微信用户', textLeftX, userInfoY);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
ctx.setFillStyle('#666666');
|
|
ctx.setFillStyle('#666666');
|
|
|
ctx.setFontSize(26 * scale);
|
|
ctx.setFontSize(26 * scale);
|
|
|
ctx.setTextAlign('right');
|
|
ctx.setTextAlign('right');
|
|
|
// Align to right padding edge
|
|
// Align to right padding edge
|
|
|
ctx.fillText('推荐您一本好书', this.canvasWidth - padding, userInfoY);
|
|
ctx.fillText('推荐您一本好书', this.canvasWidth - padding, userInfoY);
|
|
|
ctx.setTextAlign('left'); // Reset
|
|
ctx.setTextAlign('left'); // Reset
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 4. Product Info
|
|
// 4. Product Info
|
|
|
let currentY = coverY + coverHeight + 110 * scale + moveDownY;
|
|
let currentY = coverY + coverHeight + 110 * scale + moveDownY;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Title
|
|
// Title
|
|
|
ctx.setFillStyle('#1D1D1D');
|
|
ctx.setFillStyle('#1D1D1D');
|
|
|
const titleFontSize = 34 * scale;
|
|
const titleFontSize = 34 * scale;
|
|
@@ -189,32 +194,32 @@ export default {
|
|
|
// Width constraint: Canvas width - 2*contentPadding
|
|
// Width constraint: Canvas width - 2*contentPadding
|
|
|
const lastTitleY = this.drawText(ctx, title, contentPadding, currentY, this.canvasWidth - 2 * contentPadding, titleFontSize * 1.5);
|
|
const lastTitleY = this.drawText(ctx, title, contentPadding, currentY, this.canvasWidth - 2 * contentPadding, titleFontSize * 1.5);
|
|
|
currentY = lastTitleY + 60 * scale;
|
|
currentY = lastTitleY + 60 * scale;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Author
|
|
// Author
|
|
|
ctx.setFillStyle('#666666');
|
|
ctx.setFillStyle('#666666');
|
|
|
const authorFontSize = 26 * scale;
|
|
const authorFontSize = 26 * scale;
|
|
|
ctx.setFontSize(authorFontSize);
|
|
ctx.setFontSize(authorFontSize);
|
|
|
ctx.fillText(`作者: ${this.product.author || '未知'}`, contentPadding, currentY);
|
|
ctx.fillText(`作者: ${this.product.author || '未知'}`, contentPadding, currentY);
|
|
|
currentY += 70 * scale;
|
|
currentY += 70 * scale;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Price
|
|
// Price
|
|
|
ctx.setFillStyle('#D81A00');
|
|
ctx.setFillStyle('#D81A00');
|
|
|
const priceFontSize = 44 * scale;
|
|
const priceFontSize = 44 * scale;
|
|
|
ctx.setFontSize(priceFontSize);
|
|
ctx.setFontSize(priceFontSize);
|
|
|
- const price = `¥ ${this.product.balanceMoney || '0.00'}`;
|
|
|
|
|
|
|
+ const price = `¥ ${this.product.sellPrice || '0.00'}`;
|
|
|
const priceWidth = ctx.measureText(price).width;
|
|
const priceWidth = ctx.measureText(price).width;
|
|
|
ctx.fillText(price, contentPadding, currentY);
|
|
ctx.fillText(price, contentPadding, currentY);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Original Price
|
|
// Original Price
|
|
|
ctx.setFillStyle('#999999');
|
|
ctx.setFillStyle('#999999');
|
|
|
ctx.setFontSize(26 * scale);
|
|
ctx.setFontSize(26 * scale);
|
|
|
- const origPrice = `原价: ¥ ${this.product.sellPrice || '0.00'}`;
|
|
|
|
|
|
|
+ const origPrice = `原价: ¥ ${this.product.price || '0.00'}`;
|
|
|
ctx.fillText(origPrice, contentPadding + priceWidth + 20 * scale, currentY);
|
|
ctx.fillText(origPrice, contentPadding + priceWidth + 20 * scale, currentY);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Divider
|
|
// Divider
|
|
|
const footerHeight = 180 * scale;
|
|
const footerHeight = 180 * scale;
|
|
|
const dividerY = this.canvasHeight - footerHeight;
|
|
const dividerY = this.canvasHeight - footerHeight;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
ctx.setStrokeStyle('#dddddd');
|
|
ctx.setStrokeStyle('#dddddd');
|
|
|
if (typeof ctx.setLineDash === 'function') {
|
|
if (typeof ctx.setLineDash === 'function') {
|
|
|
ctx.setLineDash([8, 8]);
|
|
ctx.setLineDash([8, 8]);
|
|
@@ -226,17 +231,17 @@ export default {
|
|
|
if (typeof ctx.setLineDash === 'function') {
|
|
if (typeof ctx.setLineDash === 'function') {
|
|
|
ctx.setLineDash([]);
|
|
ctx.setLineDash([]);
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 5. Footer (Store & QR)
|
|
// 5. Footer (Store & QR)
|
|
|
const footerContentY = dividerY + 50 * scale;
|
|
const footerContentY = dividerY + 50 * scale;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Store Name
|
|
// Store Name
|
|
|
ctx.setFillStyle('#1D1D1D');
|
|
ctx.setFillStyle('#1D1D1D');
|
|
|
ctx.setFontSize(32 * scale);
|
|
ctx.setFontSize(32 * scale);
|
|
|
const storeName = '书嗨循环书店';
|
|
const storeName = '书嗨循环书店';
|
|
|
const storeNameWidth = ctx.measureText(storeName).width;
|
|
const storeNameWidth = ctx.measureText(storeName).width;
|
|
|
ctx.fillText(storeName, padding, footerContentY + 10 * scale);
|
|
ctx.fillText(storeName, padding, footerContentY + 10 * scale);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Mascot Icon (Behind Store Name)
|
|
// Mascot Icon (Behind Store Name)
|
|
|
const iconSize = 70 * scale;
|
|
const iconSize = 70 * scale;
|
|
|
const iconX = padding + storeNameWidth + 40 * scale;
|
|
const iconX = padding + storeNameWidth + 40 * scale;
|
|
@@ -255,27 +260,25 @@ export default {
|
|
|
ctx.setFillStyle('#666666');
|
|
ctx.setFillStyle('#666666');
|
|
|
ctx.setFontSize(22 * scale);
|
|
ctx.setFontSize(22 * scale);
|
|
|
ctx.fillText('不辜负每一个爱书的人', padding, footerContentY + 54 * scale);
|
|
ctx.fillText('不辜负每一个爱书的人', padding, footerContentY + 54 * scale);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// QR Code
|
|
// QR Code
|
|
|
const qrSize = 130 * scale;
|
|
const qrSize = 130 * scale;
|
|
|
const qrX = this.canvasWidth - padding - qrSize;
|
|
const qrX = this.canvasWidth - padding - qrSize;
|
|
|
const qrY = footerContentY - 20 * scale;
|
|
const qrY = footerContentY - 20 * scale;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// Use gzh.png as the QR code (Figure 2)
|
|
// Use gzh.png as the QR code (Figure 2)
|
|
|
try {
|
|
try {
|
|
|
- const qrPath = await this.getImageInfo('/pages-sell/static/goods/icon-shuhai.png', '/pages-sell/static/goods/icon-shuhai.png');
|
|
|
|
|
- if (qrPath) {
|
|
|
|
|
- ctx.drawImage(qrPath, qrX, qrY, qrSize, qrSize);
|
|
|
|
|
- } else {
|
|
|
|
|
- throw new Error('qrPath is empty');
|
|
|
|
|
|
|
+ if (this.qrcodeUrl) {
|
|
|
|
|
+ const qrPath = await this.getImageInfo(this.qrcodeUrl);
|
|
|
|
|
+ if (qrPath) {
|
|
|
|
|
+ ctx.drawImage(qrPath, qrX, qrY, qrSize, qrSize);
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error('Draw QR code error:', e);
|
|
console.error('Draw QR code error:', e);
|
|
|
- // 绘制失败时使用默认颜色块
|
|
|
|
|
- ctx.setFillStyle('#f0f0f0');
|
|
|
|
|
- ctx.fillRect(qrX, qrY, qrSize, qrSize);
|
|
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+ // 如果二维码获取失败,不影响海报创建,继续后续绘制
|
|
|
|
|
+
|
|
|
// 使用Promise包装draw方法,确保绘制完成
|
|
// 使用Promise包装draw方法,确保绘制完成
|
|
|
await new Promise((resolve) => {
|
|
await new Promise((resolve) => {
|
|
|
ctx.draw(false, () => {
|
|
ctx.draw(false, () => {
|
|
@@ -285,7 +288,7 @@ export default {
|
|
|
}, 500);
|
|
}, 500);
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
// 转换Canvas为图片(增加重试,兼容部分机型导出时机问题)
|
|
// 转换Canvas为图片(增加重试,兼容部分机型导出时机问题)
|
|
|
const tempFilePath = await this.canvasToTempFilePathWithRetry({
|
|
const tempFilePath = await this.canvasToTempFilePathWithRetry({
|
|
|
canvasId: 'posterCanvas',
|
|
canvasId: 'posterCanvas',
|
|
@@ -297,7 +300,7 @@ export default {
|
|
|
}, 3);
|
|
}, 3);
|
|
|
this.posterImage = tempFilePath;
|
|
this.posterImage = tempFilePath;
|
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
} catch (e) {
|
|
} catch (e) {
|
|
|
console.error('Generate poster error:', e);
|
|
console.error('Generate poster error:', e);
|
|
|
uni.hideLoading();
|
|
uni.hideLoading();
|
|
@@ -376,16 +379,16 @@ export default {
|
|
|
ctx.moveTo(x + r, y);
|
|
ctx.moveTo(x + r, y);
|
|
|
if (tr) ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
if (tr) ctx.arcTo(x + w, y, x + w, y + h, r);
|
|
|
else ctx.lineTo(x + w, y);
|
|
else ctx.lineTo(x + w, y);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (br) ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
if (br) ctx.arcTo(x + w, y + h, x, y + h, r);
|
|
|
else ctx.lineTo(x + w, y + h);
|
|
else ctx.lineTo(x + w, y + h);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (bl) ctx.arcTo(x, y + h, x, y, r);
|
|
if (bl) ctx.arcTo(x, y + h, x, y, r);
|
|
|
else ctx.lineTo(x, y + h);
|
|
else ctx.lineTo(x, y + h);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
if (tl) ctx.arcTo(x, y, x + w, y, r);
|
|
if (tl) ctx.arcTo(x, y, x + w, y, r);
|
|
|
else ctx.lineTo(x, y);
|
|
else ctx.lineTo(x, y);
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
ctx.closePath();
|
|
ctx.closePath();
|
|
|
},
|
|
},
|
|
|
drawText(ctx, str, x, y, maxWidth, lineHeight) {
|
|
drawText(ctx, str, x, y, maxWidth, lineHeight) {
|
|
@@ -414,7 +417,7 @@ export default {
|
|
|
uni.showToast({ title: '保存成功', icon: 'success' });
|
|
uni.showToast({ title: '保存成功', icon: 'success' });
|
|
|
},
|
|
},
|
|
|
fail: (err) => {
|
|
fail: (err) => {
|
|
|
- console.log(err);
|
|
|
|
|
|
|
+ console.log(err);
|
|
|
// Handle auth denial
|
|
// Handle auth denial
|
|
|
uni.showModal({
|
|
uni.showModal({
|
|
|
title: '提示',
|
|
title: '提示',
|
|
@@ -438,8 +441,8 @@ export default {
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- padding: 0; // Remove padding
|
|
|
|
|
- background: transparent;
|
|
|
|
|
|
|
+ padding: 0; // Remove padding
|
|
|
|
|
+ background: transparent;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.poster-canvas {
|
|
.poster-canvas {
|
|
@@ -452,16 +455,16 @@ export default {
|
|
|
flex-direction: column;
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
width: 680rpx; // Match canvas width
|
|
width: 680rpx; // Match canvas width
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.poster-img {
|
|
.poster-img {
|
|
|
- width: 100%;
|
|
|
|
|
|
|
+ width: 100%;
|
|
|
height: auto;
|
|
height: auto;
|
|
|
border-radius: 36rpx;
|
|
border-radius: 36rpx;
|
|
|
}
|
|
}
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.tips {
|
|
.tips {
|
|
|
margin-top: 20rpx;
|
|
margin-top: 20rpx;
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ color: #fff;
|
|
|
font-size: 24rpx;
|
|
font-size: 24rpx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -475,7 +478,7 @@ export default {
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
background: linear-gradient(0deg, #FBFFFF 0%, #BFFCFE 100%);
|
|
background: linear-gradient(0deg, #FBFFFF 0%, #BFFCFE 100%);
|
|
|
border-radius: 36rpx;
|
|
border-radius: 36rpx;
|
|
|
-
|
|
|
|
|
|
|
+
|
|
|
.loading-text {
|
|
.loading-text {
|
|
|
margin-top: 20rpx;
|
|
margin-top: 20rpx;
|
|
|
color: #666;
|
|
color: #666;
|