uniapp 小程序canvas海报

<template>
	<div class="container"
		style="background-image:url('https://qiniu.zyb16.cn/work/image/static/myPages/promote/bg.png')">
		<u-gap height="968rpx"></u-gap>
		<div class="buttons">

			<u-button :customStyle="submitCustomStyle" openType="share" type="primary" @click="miniProgramShare()">
				<u--image height="88rpx" src='https://qiniu.zyb16.cn/work/image/static/myPages/promote/wx.png'
					width="312rpx"></u--image>
			</u-button>
			<u--image height="88rpx" src='https://qiniu.zyb16.cn/work/image/static/myPages/promote/album.png'
				width="312rpx" @click="saveImages"></u--image>

		</div>
		<u-gap height="32rpx"></u-gap>
		<div class="card"
			style="background-image:url('https://qiniu.zyb16.cn/work/image/static/myPages/promote/card.png')">
			<div class="invite-code">
				<div class="code-line"></div>
				<div class="code-text">邀请码</div>
				<div class="code-line"></div>
			</div>
			<div class="code-number">
				{{ invite_code }}
			</div>
			<u-button :customStyle="copyCustomStyle" text="复制邀请码" type="primary" @click="copyCode()">

			</u-button>
		</div>
		<u-gap height="32rpx"></u-gap>

		<div class="my-promote">
			<u-gap height="48rpx"></u-gap>

			<div class="promote-title">
				<u--image height="20rpx" src='https://qiniu.zyb16.cn/work/image/static/myPages/promote/pr-left.png'
					width="48rpx"></u--image>
				<div class="title-text">我的推广</div>
				<u--image height="20rpx" src='https://qiniu.zyb16.cn/work/image/static/myPages/promote/pr-right.png'
					width="48rpx"></u--image>
			</div>

			<u-gap height="36rpx"></u-gap>
			<div class="promote-info">
				<div class="promote-info-item">
					<div class="promote-info-number">
						{{ promote.people }}
					</div>
					<div class="promote-info-desc">
						推广人数
					</div>
				</div>
				<div class="promote-info-line"></div>
				<div class="promote-info-item">
					<div class="promote-info-number">
						￥{{ promote.money }}
					</div>
					<div class="promote-info-desc">
						累计佣金
					</div>
				</div>
			</div>
		<u-gap height="36rpx"></u-gap>

		<div class="list">
			<u-list height="420rpx" @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in list" :key="index">
					<div class="list-item">
						<div class="list-item-left">
							<u--image :src="item.avatar" height="64rpx" shape="circle" width="64rpx"></u--image>
							<div class="list-left-info">
								<div class="list-left-info-header">
									<div class="list-left-info-header-name">{{ item.name }}</div>
									<div :class="item.verify_project === 1 ? 'success' : 'fail'"
										class="list-left-info-header-status">
										{{ item.verify_project | statusFilter }}
									</div>
								</div>
								<div class="list-left-info-phone">
									{{ item.mobile }}
								</div>
							</div>
						</div>
						<div class="list-item-right">￥{{ item.amount }}</div>
					</div>
				</u-list-item>
			</u-list>
		</div>
		</div>

		<u-overlay :show="showOverlay">
			<view class="warp-overlay">
				<view class="rect" @tap.stop>
					<u--image height="290rpx" src='https://qiniu.zyb16.cn/work/image/static/myPages/promote/rocket.png'
						width="290rpx"></u--image>
					<view class="rect-text-thanks">
						感谢您的助力
					</view>
					<view class="rect-text-desc">
						当被推荐人购买会员，您将获赠佣金！
					</view>
					<u-button :customStyle="rocketCustomStyle" text="好的" type="primary" @click="showOverlay = false">
					</u-button>
				</view>
			</view>
		</u-overlay>
		<canvas id="canvas" canvas-id="canvas" class="canvas" style="width:750rpx;height:1532rpx;" />
	</div>
</template>

<script>
	import {
		mapState,
		mapGetters
	} from 'vuex'

	export default {
		name: 'Promote',
		filters: {
			statusFilter(value) {
				if (value === 1) return '已认证项目'
				return '未认证项目'
			}
		},
		data() {
			return {
				showOverlay: false,
				rawBg: 'https://img1.clozhome.com/new-clozhome/app/register_poster.png',
				rawQrCode: 'https://qa-img.clozhome.com/oms/house/210521/21052111340001.jpg',
				bg: 'https://qa-img.clozhome.com/oms/house/210528/21052817710016.png',
				qrCode: 'https://qa-img.clozhome.com/oms/house/210521/21052111340001.jpg',
				name: '用户',
				rpxIndex: '',
				canvasDesc: '海外租房新选择，走遍世界都是家！一起来选房吧！',
				canvasDesc2: '#英国#美国#加拿大#澳洲#中国香港#新加坡#',
				list: [{
						avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
						name: '周海波',
						phone: '15689097653',
						status: 1,
						money: 2334
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/2.jpg',
						name: '周海波2',
						phone: '15689097653',
						status: 2,
						money: 2334
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/3.jpg',
						name: '周海波3',
						phone: '15689097653',
						status: 1,
						money: 2334
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
						name: '周海波4',
						phone: '15689097653',
						status: 1,
						money: 2334
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
						name: '周海波4',
						phone: '15689097653',
						status: 1,
						money: 2334
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
						name: '周海波4',
						phone: '15689097653',
						status: 1,
						money: 2334
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/album/4.jpg',
						name: '周海波4',
						phone: '15689097653',
						status: 1,
						money: 2334
					},
				],
				invite_code: '56789',
				promote: {
					people: 4,
					money: 2345
				},
				submitCustomStyle: {
					'width': '312rpx',
					'height': '88rpx',
					// 'background': 'transparent',
					// 'border': '2rpx solid #3284ff',
					'border': 'none',
					'border-radius': '240rpx',
					'color': '#FFFFFF',
					'font-size': "30rpx",
					'font-weight': '500'
				},
				copyCustomStyle: {
					'width': '436rpx',
					'height': '74rpx',
					// 'background': 'linear-gradient(98deg, #ff5b27 0 %, #ff0f00 100 %)',
					'background': 'linear-gradient(98deg, #ff5b27 0%, #ff0f00 100%)',
					'border': 'none',
					'border-radius': '320rpx',
					'color': '#FFFFFF',
					'font-size': "30rpx",
					'font-weight': '500'
				},
				rocketCustomStyle: {
					'width': '436rpx',
					'height': '74rpx',
					// 'background': 'linear-gradient(98deg, #ff5b27 0 %, #ff0f00 100 %)',
					'background': 'linear-gradient(98deg, #ff5b27 0%, #ff0f00 100%)',
					'border': 'none',
					'border-radius': '320rpx',
					'color': '#FFFFFF',
					'font-size': "30rpx",
					'font-weight': '500'
				}
			};
		},

		mounted() {
			this.init()
		},
		computed: {
			...mapState({
				token: (state) => state.user.token
			}),
			canvasW() {
				return 750 * this.rpxIndex
			},
			canvasH() {
				return 1530 * this.rpxIndex
			},
			ewmW() {
				return 312 * this.rpxIndex
			},
			ewmH() {
				return 88 * this.rpxIndex
			}
		},
		onShow() {
			const _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.rpxIndex = res.windowWidth / 750
				}
			});
		},
		methods: {
			init() {
				this.$request.post('/user/invite_info').then(({
					data,
					code,
					msg
				}) => {
					// this.indexList = data.data
					this.invite_code = data.invite_code
					this.promote.people = data.count
					this.promote.money = data.commission
					this.list = data.list
				})
			},
			miniProgramShare() {
				// #ifdef APP-PLUS
				console.log('ssss😊===>');
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					summary: "我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！",
					openCustomerServiceChat: true,
					corpid: 'xx',
					customerUrl: 'https://work.weixin.qq.com/kf/kfcbf8f8d07ac7215f?enc_scene=ENCGFSDF567DF',
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
				// #endif
			},
			copyCode() {
				this.showOverlay = true
				const data = this.invite_code
				uni.setClipboardData({
					data: data,
					success: function() {
						uni.$u.toast('已复制')
						console.log('success');
					}
				});
			},
			// 保存图片到本地
			async saveImage(e) {
				// console.log('invitePosterPath===>', this.invitePosterPath)
				// if (this.invitePosterPath) {
				//   this.posterUrl = this.invitePosterPath
				//   this.$u.route({
				//     url: '/myPages/menu-list/invitation/register/poster',
				//     params: {
				//       posterUrl: encodeURIComponent(this.invitePosterPath)
				//     }
				//   })
				//   return
				// }
				var _this = this
				// console.log('this.rawQrCode', this.rawQrCode)
				// await this.getWxCode('2', this.inviteCode)
				uni.showLoading({
					title: '加载中'
				})
				// console.log('this.rawQrCode22222', this.rawQrCode)
				this.bg = await this.getLocalImage('https://qiniu.zyb16.cn/work/image/static/myPages/promote/bg.png')
				this.qrCode = await this.getLocalImage(
					'https://qiniu.zyb16.cn/work/image/static/myPages/promote/album.png')
				await this.makeCanvas()
				return new Promise((resolve, reject) => {
					setTimeout(() => {
						uni.canvasToTempFilePath({ // 保存canvas为图片
							canvasId: 'canvas',
							quality: 1,
							complete: function(res) {
								uni.hideLoading()
								// 在H5平台下，tempFilePath 为 base64, // 图片提示跨域 H5保存base64失败，APP端正常输出临时路径
								console.log('保存canvas为图片===>', res)
								_this.posterUrl = res.tempFilePath
								// _this.imgToWeb(res.tempFilePath)
								// _this.showPoster = true
								// return
								resolve(res.tempFilePath)
								// if (_this.isWxButton) {
								//   _this.isWxButton = false
								//   return
								// }
								// _this.$u.route({
								//   url: '/myPages/menu-list/invitation/register/poster',
								//   params: {
								//     posterUrl: encodeURIComponent(res
								//         .tempFilePath),
								//     mode: 'miniapp'
								//   }
								// })
							},
						})
					}, 200)
				})
			},
			// 保存图片到本地
			async saveImages() {
				const url = await this.saveImage()
				let _this = this;
				// #ifdef APP-PLUS
				this.saveImageLocal(url);
				// #endif
				uni.authorize({
					scope: "scope.writePhotosAlbum",
					success() {
						console.log("success=====");
						_this.saveImageLocal(url);
					},
					fail() {
						wx.showModal({
							title: "提示",
							content: "请前往授权",
							success(res) {
								if (res.confirm) {
									wx.openSetting({
										success(res) {
											console.log(res.authSetting);
										},
									});
									console.log("用户点击确定");
								} else if (res.cancel) {
									console.log("用户点击取消");
								}
							},
						});

						console.log("fail=====");
					},
				});
			},
			saveImageLocal(url) {
				let _this = this;
				console.log("保存图片到本地");
				// this.getLocalImage().then(() => {
				// 保存海报
				uni.saveImageToPhotosAlbum({
					filePath: url,
					success(res) {
						// _this.$refs.uToast.show({
						// 	title: '已保存到相册',
						// 	type: 'success',
						// })
						uni.$u.toast("已保存到相册");
					},
					fail(r) {
						console.log("saveImageToPhotosAlbum fail结果😀😀😀===>", r);
					},
				});
			},
			// 把网络图片转换为本地图片
			getLocalImage(url) {
				console.log('把网络图片转换为本地图片开始', url);
				var _this = this
				return new Promise((resolve, reject) => {
					console.log('把网络图片转换为本地图片执行', url);
					uni.downloadFile({
						url: url, //仅为示例，并非真实的资源
						success: (res) => {
							if (res.statusCode === 200) {
								console.log('把网络图片转换为本地图片结束');
								// _this.imageUrl.push(res.tempFilePath)
								resolve(res.tempFilePath)
							}
						}
					});
				})
			},
			makeCanvas() {
				var _this = this
				return new Promise((resolve, reject) => {
					var ctx = uni.createCanvasContext('canvas', this);
					// 填充背景色，白色
					ctx.setFillStyle('#fff'); // 默认白色
					ctx.fillRect(0, 0, this.canvasW, this.canvasH) // fillRect(x,y,宽度，高度)

					// 绘制商品主图，二维码
					ctx.drawImage(this.bg, 0, 0, this.canvasW, this.canvasH) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)
					ctx.drawImage(this.qrCode, this.canvasW / 2 - this.ewmW / 2, this.canvasH - this.ewmH -
						100 * _this.rpxIndex,
						this.ewmW, this.ewmH) // drawImage(图片路径,x,y,绘制图像的宽度，绘制图像的高度)

					// 用户名的背景色
					const text = this.name;
					ctx.fillStyle = "red";
					ctx.setFontSize(42 * _this.rpxIndex) // 字号
					const {
						width
					} = ctx.measureText(text);
					// 好房易租宽度
					// const rentnbonus = '好房易租 各领200元奖励';
					// ctx.fillStyle = "red";
					// ctx.setFontSize(32 * _this.rpxIndex) // 字号
					//奖励文字宽度
					// const rentnbonuswidth = ctx.measureText(rentnbonus).width;
					// 奖励文字居中时的左边距
					// const rentmiddlelength2 = (this.canvasW - rentnbonuswidth) / 2
					// 建立文字框居中时的左边距
					// const rentmiddlelength3 = (this.canvasW - rentnbonuswidth - 20 * _this
					// .rpxIndex) / 2
					// 好房易租宽度
					// ctx.fillRect(10, 20, width, 24) // fillRect(x,y,宽度，高度)
					function roundRectColor(context, x, y, w, h, r, color) { //绘制圆角矩形（纯色填充）
						// context.save();
						context.setFillStyle(color);
						context.setStrokeStyle(color)
						context.setLineJoin('round'); //交点设置成圆角
						context.setLineWidth(r);
						context.strokeRect(x + r / 2 + 2, y + r / 2 + 2, w - r - 3, h - r - 3);
						context.fillRect(x + r, y + r, w - r * 2, h - r * 2);
						context.stroke();
						context.closePath();
					}

					// roundRectColor(ctx, 44 * _this.rpxIndex, 62 * _this.rpxIndex, width + 12 * _this.rpxIndex,
					// 	60 * _this
					// 	.rpxIndex, 8 * _this
					// 	.rpxIndex, "#fefefe")


					// 文字换行相关
					//寻找切换断点
					function findBreakPoint(text, width, context) {
						var min = 0;
						var max = text.length - 1;

						while (min <= max) {
							var middle = Math.floor((min + max) / 2);
							var middleWidth = context.measureText(text.substr(0, middle)).width;
							var oneCharWiderThanMiddleWidth = context.measureText(text.substr(0, middle + 1))
								.width;
							if (middleWidth <= width && oneCharWiderThanMiddleWidth > width) {
								return middle;
							}
							if (middleWidth < width) {
								min = middle + 1;
							} else {
								max = middle - 1;
							}
						}

						return -1;
					}

					//寻找切换断点...
					// 切断文字数组
					function breakLinesForCanvas(context, text, width, font) {
						var result = [];
						var breakPoint = 0;
						if (font) {
							context.font = font;
						}
						while ((breakPoint = findBreakPoint(text, width, context)) !== -1) {
							result.push(text.substr(0, breakPoint));
							text = text.substr(breakPoint);
						}
						if (text) {
							result.push(text);
						}
						return result;
					}

					// 切断文字数组...
					// 绘制文字
					const tempfontSize = 24 * this.rpxIndex
					const fontSizeDesc = `12px 微软雅黑`

					console.log('fontSizeDesc', fontSizeDesc)

					// var result = breakLinesForCanvas(ctx,
					// 	this.canvasDesc,
					// 	this.canvasW, fontSizeDesc);
					// var result2 = breakLinesForCanvas(ctx,
					// 	this.canvasDesc2,
					// 	this.canvasW, fontSizeDesc);
					// console.log('绘制文字==>', result);
					// var lineHeight = 30;
					// ctx.font = `${tempfontSize}px 微软雅黑`;
					// ctx.setFontSize(24 * _this.rpxIndex) // 字号
					// ctx.setFillStyle('#333') // 颜色
					// var that = this
					// result.forEach(function(line, index) {
					// 	console.log('line==>', line)
					// 	console.log('index==>', index)
					// 	ctx.fillText(line, (that.canvasW - ctx.measureText(that.canvasDesc).width) / 2,
					// 		that.canvasH / 2 + 120 * that.rpxIndex + lineHeight * index + 30);
					// });
					// result2.forEach(function(line, index) {
					// 	console.log('line==>', line)
					// 	console.log('index==>', index)
					// 	ctx.fillText(line, (that.canvasW - ctx.measureText(that.canvasDesc2).width) / 2,
					// 		that.canvasH / 2 + 160 * that.rpxIndex + lineHeight * index + 30);
					// });

					// 绘制文字...
					// 文字换行相关...

					// roundRectColor(ctx, rentmiddlelength3, 292 * _this.rpxIndex,
					// 	rentnbonuswidth + 20 * _this
					// 	.rpxIndex,
					// 	52 * _this.rpxIndex, 16 * _this.rpxIndex, "#FFD200")
					// roundRectColor(ctx, this.canvasW / 4, 292 * _this.rpxIndex, this.canvasW / 2,
					// 	52 * _this.rpxIndex, 16 * _this.rpxIndex, "#FFD200")

					// ctx.setFillStyle('#0000FF');
					// ctx.fillRect(this.canvasW/2, 100, 100, 100);

					//4、用户名
					ctx.setFontSize(42 * _this.rpxIndex) // 字号
					ctx.setFillStyle('#EF584A') // 颜色
					// ctx.fillText(text, 48 * _this.rpxIndex, (66 + 40) * _this.rpxIndex); // （文字，x，y）
					//奖励
					// ctx.setFontSize(16)
					// ctx.setFillStyle('#EE574A')
					// ctx.fillText(rentnbonus, rentmiddlelength2, 332 * _this
					// .rpxIndex);
					//扫码
					const scanbonus = '扫一扫 赢奖励'
					ctx.setFontSize(28 * _this.rpxIndex)
					ctx.setFillStyle('#333333')
					const rentmiddlelength = (this.canvasW - ctx.measureText(scanbonus).width) / 2
					// ctx.fillText(scanbonus, rentmiddlelength, this.canvasH - 40 * _this.rpxIndex);


					ctx.shadowColor = '#C33222';
					ctx.shadowOffsetX = -3; // 设置阴影的横向偏移量
					ctx.shadowOffsetY = 3;
					ctx.shadowBlur = 3; // 设置模糊等级
					// ctx.font = "normal normal 400 20px FZHanZhenGuangBiaoS-GB";
					// ctx.setFontSize(72 * _this.rpxIndex)
					// ctx.setFillStyle('#fff')
					// const middlelength = (this.canvasW - ctx.measureText('一起海外租房啦').width) / 2
					// ctx.fillText('一起海外租房啦！', middlelength, 220 * _this.rpxIndex);

					ctx.setFontSize(32 * _this.rpxIndex)
					ctx.setFillStyle('#FFF')
					// ctx.fillText('邀请你', width + 58 * _this.rpxIndex, (75 + 25) * _this.rpxIndex);
					ctx.draw(false, (ret) => { // draw方法 把以上内容画到 canvas 中。
						console.log('把以上内容画到 canvas 中===>', ret)
						setTimeout(() => {
							resolve(ret)
						}, 150)
						// uni.showToast({
						// 	icon: 'success',
						// 	mask: true,
						// 	title: '绘制完成',
						// });
					});
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.warp-overlay {

		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		background: rgba(18, 18, 18, 0.86);
		backdrop-filter: blur(12rpx);

		.rect {
			width: 688rpx;
			height: 696rpx;
			background: #ffffff;
			border-radius: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding: 64rpx 0;
			box-sizing: border-box;

			.rect-text {
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: CENTER;
				color: #121212;
			}
		}
	}

	.container {
		width: 100%;
		min-height: 1532rpx;
		background-size: 100% 1532rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		padding: 0 0 50rpx;
		// padding: 60rpx 30rpx;
		// box-sizing: border-box
		background-color: #ff2a14;

		.buttons {
			padding: 0 48rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.card {
			width: 688rpx;
			height: 352rpx;
			margin: 0 30rpx;
			padding: 48rpx 0;
			box-sizing: border-box;
			// min-height: 1532rpx;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: 0 0;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.invite-code {
				display: flex;
				justify-content: center;
				align-items: center;

				.code-line {
					width: 100rpx;
					height: 4rpx;
					background-color: #f5f5f5;
					// border: 2rpx solid #666666;
				}

				.code-text {
					padding: 0 30rpx;
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #666666;
				}
			}

			.code-number {
				font-size: 64rpx;
				font-family: PingFang SC, PingFang SC-Medium;
				font-weight: 500;
				text-align: CENTER;
				color: #222222;
				line-height: 64rpx;
				letter-spacing: 1.28rpx
			}
		}

		.my-promote {
			margin: 0 30rpx;
			box-sizing: border-box;
			// width: 612rpx;
			// height: 150rpx;
			background: #fff;
			border-radius: 24rpx;

			.promote-title {
				display: flex;
				justify-content: center;
				align-items: center;

				.title-text {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;
					text-align: CENTER;
					color: #ff2a14;
					margin: 0 20rpx;
				}
			}

			.promote-info {
				// width: 612rpx;
				height: 150rpx;
				background: #ffeae0;
				border-radius: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 30rpx;
				padding: 0 60rpx;
				box-sizing: border-box;

				.promote-info-line {
					width: 0rpx;
					height: 64rpx;
					border: 2rpx solid rgba(255, 66, 45, 0.20);
				}

				.promote-info-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;

					.promote-info-number {
						font-size: 36rpx;
						font-family: PingFang SC, PingFang SC-Medium;
						font-weight: 500;
						text-align: CENTER;
						color: #ff2a14;
					}

					.promote-info-desc {
						font-size: 28rpx;
						font-family: PingFang SC, PingFang SC-Regular;
						font-weight: 400;
						text-align: CENTER;
						color: #222222;
					}
				}
			}
		}

		.list {
			padding: 0 30rpx;
			box-sizing: border-box;

			.list-item {
				margin-bottom: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.list-item-left {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.list-left-info {
						margin-left: 8rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						// align-items: center;

						.list-left-info-header {
							display: flex;
							align-items: center;

							.list-left-info-header-name {
								font-size: 28rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								color: #222222;
								margin-right: 8rpx;
							}

							.list-left-info-header-status {
								font-size: 24rpx;
								font-family: PingFang SC, PingFang SC-Medium;
								font-weight: 500;
								border-radius: 4rpx;
								font-weight: bold;
								padding: 2rpx 5rpx;
							}

							.success {
								background: linear-gradient(180deg, rgba(255, 145, 44, 0.2), rgba(255, 122, 0, 0.5) 100%);
								color: #ff8d24;
							}

							.fail {
								background: linear-gradient(180deg, rgba(191, 191, 191, .1) 0%, rgba(132, 132, 132, .5) 100%);
								color: #919191;
							}
						}

						.list-left-info-phone {
							font-size: 26rpx;
							font-family: PingFang SC, PingFang SC-Regular;
							font-weight: 400;
							color: #666666;
						}
					}
				}

				.list-item-right {
					font-size: 32rpx;
					font-family: PingFang SC, PingFang SC-Medium;
					font-weight: 500;
					color: #ff4242;
				}
			}
		}
	}

	.canvas {
		position: fixed;
		// left: 999px
		top: 150rpx;
		left: 300%;
	}
</style>