简单版
<template>
<view class="poster_page">
<canvas canvas-id="poster" class="poster_canvas"></canvas>
<view class="poster_box" :class="{ active: swiperIndex == index }">
<image class="poster_bg" :src="posterBg" mode="widthFix"></image>
<view class="poster_content">
<image :src="avatarUrl" class="poster_avatarUrl"></image>
<view class="inviter_info">
<text class="inviter">{{inviter}}</text>邀请您加入
</view>
<view class="poster_title">
{{posterTitlt}}
</view>
<view class="poster_dot">
<view class="line"></view>
</view>
<view class="inviter_code">
邀请码：{{inviteCode}}
</view>
<image class="inviter_code_url" :src="inviteCodeUrl" mode=""></image>
<view class="poster_info">
长按识别 立即加入
</view>
</view>
</view>
<view class="footer_save fixed-bottom">
<view class="save_btn_box">
<button class="save_item" open-type="share">
<view class="save_item_image_wrap">
<image class="save_item_image" src="../../static/share/wxicon.png" mode=""></image>
</view>
<view class="txt">微信好友</view>
</button>
<button class="save_item" @click="onSaveImg">
<view class="save_item_image_wrap">
<image class="save_item_image" src="../../static/share/icon.png" mode=""></image>
</view>
<view class="txt">保存图片</view>
</button>
</view>
<view class="safe-reg "></view>
</view>
</view>
</template>
<script>
// 文字换行
function drawtext(text, maxWidth) {
let textArr = text.split("");
let len = textArr.length;
// 上个节点
let previousNode = 0;
// 记录节点宽度
let nodeWidth = 0;
// 文本换行数组
let rowText = [];
// 如果是字母，侧保存长度
let letterWidth = 0;
// 汉字宽度
let chineseWidth = 21;
// otherFont宽度
let otherWidth = 10.5;
for (let i = 0; i < len; i++) {
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
if (letterWidth > 0) {
if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
letterWidth = 0;
} else {
nodeWidth += chineseWidth + letterWidth * otherWidth;
letterWidth = 0;
}
} else {
if (nodeWidth + chineseWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
} else {
nodeWidth += chineseWidth;
}
}
} else {
if (/\n/g.test(textArr[i])) {
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 1;
nodeWidth = 0;
letterWidth = 0;
} else if (textArr[i] == "\\" && textArr[i + 1] == "n") {
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 2;
nodeWidth = 0;
letterWidth = 0;
} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {
letterWidth += 1;
if (nodeWidth + letterWidth * otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i + 1 - letterWidth)
});
previousNode = i + 1 - letterWidth;
nodeWidth = letterWidth * otherWidth;
letterWidth = 0;
}
} else {
if (nodeWidth + otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = otherWidth;
} else {
nodeWidth += otherWidth;
}
}
}
}
if (previousNode < len) {
rowText.push({
type: "text",
content: text.substring(previousNode, len)
});
}
return rowText;
}
function roundRect(ctx, x, y, w, h, r) {
// 开始绘制
ctx.beginPath()
// 因为边缘描边存在锯齿，最好指定使用 transparent 填充
ctx.setFillStyle('transparent')
// ctx.setStrokeStyle('transparent')
// 绘制左上角圆弧
ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
// 绘制border-top
ctx.moveTo(x + r, y)
ctx.lineTo(x + w - r, y)
ctx.lineTo(x + w, y + r)
// 绘制右上角圆弧
ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
// 绘制border-right
ctx.lineTo(x + w, y + h - r)
ctx.lineTo(x + w - r, y + h)
// 绘制右下角圆弧
ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)
// 绘制border-bottom
ctx.lineTo(x + r, y + h)
ctx.lineTo(x, y + h - r)
// 绘制左下角圆弧
ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)
// 绘制border-left
ctx.lineTo(x, y + r)
ctx.lineTo(x + r, y)
ctx.fill()
// ctx.stroke()
ctx.closePath()
// 剪切
ctx.clip()
}
// 是否授权保存图片
let settingWritePhotosAlbum = false;
export default {
data() {
return {
shareUrl: '',
posterBg: 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/ytB7r7_1608704284756.png',
posterTitlt: '智能记账，一站式企业服务平台',
inviteCode: '99999',
inviteCodeUrl: '/pages/index/index'
}
},
computed: {
avatarUrl() {
return 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/XG1WkA_1608705366010.png'
},
inviter() {
return '茉莉'
}
},
methods: {
// 创建海报
createPoster() {
let self = this
return new Promise((resolve, reject) => {
uni.showLoading({
title: '海报生成中'
});
const ctx = uni.createCanvasContext('poster');
ctx.fillRect(0, 0, 375, 673);
ctx.setFillStyle("#FFF");
ctx.fillRect(0, 0, 375, 673);
uni.getImageInfo({
src: self.posterBg,
success: (bgUrl) => {
ctx.drawImage(bgUrl.path, 0, 0, 375, 673);
uni.getImageInfo({
src: self.avatarUrl,
success: (avatarUrl) => {
uni.getImageInfo({
src: self.inviteCodeUrl,
success: (codeUrl) => {
// 绘制圆角白色主体
roundRect(ctx, 20, 120, 335, 365, 10)
// ctx.rect(20, 120, 335, 365)
ctx.setFillStyle('#FFFFFF')
ctx.fill()
// 绘制头像
ctx.save();
ctx.beginPath(); //开始绘制
//先画个圆 前两个参数确定了圆心 （x,y） 坐标 第三个参数是圆的半径 四参数是绘图方向 默认是false，即顺时针
ctx.arc(185, 170, 25, 0, Math.PI * 2, false);
ctx.clip(); //画好了圆 剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因
ctx.drawImage(avatarUrl.path, 160, 145, 50, 50); // 推进去图片，必须是https图片
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 还可以继续绘制
let textTop = 215
// 绘制邀请人
ctx.setFontSize(16);
ctx.setFillStyle('#333');
let middel = (375 / 2)
let inviterW = ctx.measureText(self.inviter).width
// 70 是邀请您加入 的宽度
let inviterMiddle = middel - ((inviterW + 70 + 6) / 2)
ctx.fillText(self.inviter, inviterMiddle, textTop);
ctx.setFontSize(14);
ctx.fillText('邀请您加入', inviterMiddle + inviterW + 6, textTop - 1);
textTop += 30
// 绘制标题
ctx.setFontSize(18);
ctx.setFillStyle('#FF8200');
let posterTitltW = ctx.measureText(self.posterTitlt).width
// 70 是邀请您加入 的宽度
let posterTitltMiddle = middel - (posterTitltW / 2)
ctx.font = `normal bold 18px sans-serif`;
ctx.fillText(self.posterTitlt, posterTitltMiddle, textTop);
ctx.fillText(self.posterTitlt, posterTitltMiddle, textTop);
textTop += 28
// 绘制虚线
ctx.setStrokeStyle('#D5D5D5')
ctx.setLineDash([3, 4], 1);
ctx.beginPath();
ctx.moveTo(40, textTop);
ctx.lineTo(335, textTop);
ctx.stroke();
// 绘制两个蓝色半圆
ctx.beginPath();
ctx.arc(20, textTop - 1, 10, 0, 2 * Math.PI)
ctx.setFillStyle('#1064EA')
ctx.fill()
ctx.stroke();
ctx.beginPath();
ctx.arc(355, textTop - 1, 10, 0, 2 * Math.PI)
ctx.setFillStyle('#1064EA')
ctx.fill()
ctx.stroke();
textTop += 36
// 绘制邀请码
ctx.font = `10px sans-serif`;
ctx.setFontSize(15);
ctx.setFillStyle('#333');
let inviteCode = '邀请码:' + self.inviteCode
let inviteCodeW = ctx.measureText(inviteCode).width
let inviteCodeMiddle = middel - (inviteCodeW / 2)
ctx.fillText(inviteCode, inviteCodeMiddle, textTop);
textTop += 20
// 绘制二维码
ctx.drawImage(codeUrl.path, 137, textTop, 100, 100);
textTop += 120
// 绘制长按识别 立即加入
ctx.setFontSize(12);
ctx.setFillStyle('#969696');
let infoW = ctx.measureText('长按识别 立即加入').width
let infoMiddle = middel - (infoW / 2)
ctx.fillText('长按识别 立即加入', infoMiddle, textTop);
console.log('生成前')
ctx.draw(true, () => {
console.log('生成了111')
// canvas画布转成图片并返回图片地址
uni.canvasToTempFilePath({
canvasId: 'poster',
width: 375,
height: 673,
success: (result) => {
self.shareUrl = result.tempFilePath;
console.log("海报制作成功！");
uni.hideLoading();
resolve(result.tempFilePath);
},
fail: (err) => {
console.log("海报制作失败！", err);
uni.hideLoading();
reject();
}
})
});
},
fail: err => {
console.log('失败了1', err)
uni.hideLoading();
uni.showToast({
title: '海报制作失败，图片下载失败1',
icon: 'none'
});
}
});
}
})
},
fail: err => {
console.log('生成背景图失败', err)
uni.hideLoading();
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
});
}
});
});
},
// 轮播图变化
onSwiperChange(e) {
this.swiperIndex = e.detail.current;
},
// 保存图片
async onSaveImg() {
let shareUrl = "";
if (this.shareUrl) {
shareUrl = this.shareUrl
} else {
shareUrl = await this.createPoster();
}
// #ifdef H5
this.h5SaveImg = shareUrl;
uni.hideLoading();
// #endif
// #ifdef MP-WEIXIN
uni.showLoading({
title: '海报下载中'
});
if (settingWritePhotosAlbum) {
uni.getSetting({
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) {
uni.saveImageToPhotosAlbum({
filePath: shareUrl,
success: () => {
uni.hideLoading();
uni.showToast({
title: '保存成功'
});
}
});
} else {
uni.showModal({
title: '提示',
content: '请先在设置页面打开“保存相册”使用权限',
confirmText: '去设置',
cancelText: '算了',
success: data => {
if (data.confirm) {
uni.hideLoading();
uni.openSetting();
}
}
});
}
}
});
} else {
settingWritePhotosAlbum = true;
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
uni.saveImageToPhotosAlbum({
filePath: shareUrl,
success: () => {
uni.hideLoading();
uni.showToast({
title: '保存成功'
});
}
});
}
});
}
// #endif
},
async onShareAppMessage(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
let path = '/pages/index/index'
if (this.$store.state.inviteCode) {
path += '?superId=' + this.$store.state.inviteCode
}
return {
title:this.$store.state.inviteCode+this.posterTitlt,
// imageUrl: shareUrl,
path: path
}
}
}
}
</script>
<style lang="scss" scoped>
.poster_page {
min-height: 100vh;
background-color: #1064ea;
display: flex;
.poster_canvas {
width: 750rpx;
height: 1334rpx;
position: fixed;
top: -10000rpx;
// top: 0rpx;
left: 0rpx;
background-color: pink;
}
.poster_box {
width: 100%;
height: 100%;
position: absolute;
.poster_bg {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}
.poster_content {
position: relative;
background: #ffffff;
border-radius: 20rpx;
top: 240rpx;
left: 40rpx;
width: 670rpx;
height: 730rpx;
text-align: center;
.poster_avatarUrl {
width: 110rpx;
height: 110rpx;
border-radius: 110rpx;
margin-top: 50rpx;
}
.inviter_info {
font-size: 30rpx;
line-height: 1;
.inviter {
font-size: 31rpx;
margin: 10rpx;
}
}
.poster_title {
color: #ff8200;
font-size: 36rpx;
font-weight: bold;
line-height: 1;
margin-top: 40rpx;
margin-bottom: 30rpx;
}
.poster_dot {
position: relative;
width: 100%;
height: 40rpx;
padding-top: 19rpx;
// border-top: 1px dashed #D5D5D5;
&::before {
content: '';
position: absolute;
top: 0;
left: -20rpx;
width: 40rpx;
height: 40rpx;
background-color: #1064ea;
border-radius: 100%;
}
&::after {
content: '';
position: absolute;
top: 0;
right: -20rpx;
width: 40rpx;
height: 40rpx;
background-color: #1064ea;
border-radius: 100%;
}
.line {
margin-left: 7%;
width: 86%;
border-top: 1px dashed #d5d5d5;
}
}
.inviter_code {
color: #333333;
font-size: 30rpx;
margin-bottom: 20rpx;
}
.inviter_code_url {
overflow: hidden;
width: 200rpx;
height: 200rpx;
margin-bottom: 10rpx;
}
.poster_info {
color: #969696;
font-size: 24rpx;
}
}
}
.footer_save {
padding-bottom: 40rpx;
background-color: #1064ea;
box-sizing: border-box;
.save_btn_box {
display: flex;
align-items: center;
.save_item {
flex: 1;
text-align: center;
background-color: #1064ea;
&::after {
border: none;
}
.save_item_image_wrap {
margin: 0 auto;
background-color: #ffffff;
width: 100rpx;
height: 100rpx;
border-radius: 100%;
text-align: center;
.save_item_image {
margin-top: 20rpx;
width: 60rpx;
height: 60rpx;
}
}
.txt {
line-height: 1;
margin-top: 10rpx;
color: #ffffff;
font-size: 26rpx;
}
}
}
.safe-reg {
background-color: #1064ea;
}
}
}
</style>
动态切换版
<template>
<view class="poster_page">
<canvas canvas-id="poster" class="poster_canvas"></canvas>
<swiper class="poster_swiper" previous-margin="110rpx" circular :current="swiperIndex" next-margin="110rpx" @change="onSwiperChange">
<swiper-item v-for="(item, index) of imgs" :key="index">
<view class="goods_info_box" :class="{ active: swiperIndex == index }">
<image class="goods_image" :src="item" mode="aspectFit"></image>
<view class="goods_info">
<view class="goods_name">{{title}}</view>
<view class="price_box">
<view class="price">{{price}}</view>
<view class="store_price">{{priceLine}}</view>
</view>
<view class="poster_info">
<view class="info">
<view>长按识别二维码访问</view>
<text>{{platformName}}</text>
</view>
<image class="poster_code_image" :src="codeUrl" mode="widthFix"></image>
</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="share_save_box">
<!-- #ifdef MP -->
<button class="btn-options" open-type="share">
<image src="../../static/share/wxicon.png" mode="aspectFit"></image>
<text>发给好友</text>
</button>
<!-- #endif -->
<button class="btn-options" @click="onSaveImg">
<image src="../../static/share/icon.png" mode="aspectFit"></image>
<text>保存图片</text>
</button>
</view>
<!-- #ifdef H5 -->
<view class="h5_press_save" v-if="h5SaveImg" @click="h5SaveImg = ''">
<image :src="h5SaveImg" mode="widthFix"></image>
<button class="download">长按图片保存图片</button>
</view>
<!-- #endif -->
</view>
</template>
<script>
// 文字换行
function drawtext(text, maxWidth) {
let textArr = text.split("");
let len = textArr.length;
// 上个节点
let previousNode = 0;
// 记录节点宽度
let nodeWidth = 0;
// 文本换行数组
let rowText = [];
// 如果是字母，侧保存长度
let letterWidth = 0;
// 汉字宽度
let chineseWidth = 21;
// otherFont宽度
let otherWidth = 10.5;
for (let i = 0; i < len; i++) {
if (/[\u4e00-\u9fa5]|[\uFE30-\uFFA0]/g.test(textArr[i])) {
if (letterWidth > 0) {
if (nodeWidth + chineseWidth + letterWidth * otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
letterWidth = 0;
} else {
nodeWidth += chineseWidth + letterWidth * otherWidth;
letterWidth = 0;
}
} else {
if (nodeWidth + chineseWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = chineseWidth;
} else {
nodeWidth += chineseWidth;
}
}
} else {
if (/\n/g.test(textArr[i])) {
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 1;
nodeWidth = 0;
letterWidth = 0;
} else if (textArr[i] == "\\" && textArr[i + 1] == "n") {
rowText.push({
type: "break",
content: text.substring(previousNode, i)
});
previousNode = i + 2;
nodeWidth = 0;
letterWidth = 0;
} else if (/[a-zA-Z0-9]/g.test(textArr[i])) {
letterWidth += 1;
if (nodeWidth + letterWidth * otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i + 1 - letterWidth)
});
previousNode = i + 1 - letterWidth;
nodeWidth = letterWidth * otherWidth;
letterWidth = 0;
}
} else {
if (nodeWidth + otherWidth > maxWidth) {
rowText.push({
type: "text",
content: text.substring(previousNode, i)
});
previousNode = i;
nodeWidth = otherWidth;
} else {
nodeWidth += otherWidth;
}
}
}
}
if (previousNode < len) {
rowText.push({
type: "text",
content: text.substring(previousNode, len)
});
}
return rowText;
}
// 是否授权保存图片
let settingWritePhotosAlbum = false;
export default {
data() {
return {
posterImgs: [],
swiperIndex: 0,
imgs: [
"http://qn.kemean.cn/file/upload/202005/21/1590043404759qml3zmlm.jpg?imageView2/0/w/800"
],
title: '冰希黎巴黎红精粹沙龙香水50ml 粹沙龙香水100ml',
price: "¥699.0",
priceLine: "¥699.0",
platformName: 'lly',
codeUrl: 'https://wqbjz-pro.oss-cn-shenzhen.aliyuncs.com/bQyAsz_1599467682825.png',
h5SaveImg: "",
id: '1'
}
},
methods: {
// 创建海报
createPoster() {
let self = this
return new Promise((resolve, reject) => {
uni.showLoading({
title: '海报生成中'
});
const ctx = uni.createCanvasContext('poster');
ctx.fillRect(0, 0, 375, 673);
ctx.setFillStyle("#FFF");
ctx.fillRect(0, 0, 375, 673);
uni.getImageInfo({
src: self.imgs[self.swiperIndex],
success: (bgUrl) => {
ctx.drawImage(bgUrl.path, 0, 0, 375, 375);
uni.getImageInfo({
src: self.codeUrl,
success: (codeUrl) => {
// 商品标题
ctx.setFontSize(21);
ctx.setFillStyle('#333');
let drawtextList = drawtext(self.title, 341);
let textTop = 0;
drawtextList.forEach((item, index) => {
if (index < 2) {
textTop = 380 + (index + 1) * 28;
ctx.fillText(item.content, 17, textTop);
}
});
// 商品价格
ctx.setFontSize(26);
ctx.setFillStyle('#f00');
ctx.fillText(self.price, 17, textTop + 47);
// 商品门市价
ctx.setFontSize(18);
ctx.setFillStyle('#999');
let textLeft = 38 + (self.price.length * 13)
ctx.fillText(self.price, textLeft, textTop + 45);
// 商品门市价横线
ctx.beginPath();
ctx.setLineWidth(1);
ctx.moveTo(textLeft - 1, textTop + 38);
ctx.lineTo((textLeft + 5 + self.price.length * 9), textTop + 38);
ctx.setStrokeStyle('#999');
ctx.stroke();
// 商品分割线
ctx.beginPath();
ctx.setLineWidth(1);
ctx.moveTo(17, textTop + 70);
ctx.lineTo(358, textTop + 70);
ctx.setStrokeStyle('#eee');
ctx.stroke();
// 长按识别二维码访问
ctx.setFontSize(19);
ctx.setFillStyle('#333');
ctx.fillText("长按识别二维码访问", 17, textTop + 136);
// 平台名称
ctx.setFontSize(16);
ctx.setFillStyle('#999');
ctx.fillText(self.platformName, 17, textTop + 170);
// 二维码
ctx.drawImage(codeUrl.path, 238, textTop + 88, 120, 120);
console.log('生成前')
ctx.draw(true, () => {
console.log('生成了111')
// canvas画布转成图片并返回图片地址
uni.canvasToTempFilePath({
canvasId: 'poster',
width: 375,
height: 673,
success: (result) => {
if (self.posterImgs[self.swiperIndex]) {
self.posterImgs[self.swiperIndex].url = result.tempFilePath;
} else {
self.posterImgs[self.swiperIndex] = {
url: result.tempFilePath
};
}
console.log("海报制作成功！");
uni.hideLoading();
resolve(result.tempFilePath);
},
fail: (err) => {
console.log("海报制作失败！", err);
uni.hideLoading();
reject();
}
})
});
},
fail: err => {
console.log('失败了1', err)
uni.hideLoading();
uni.showToast({
title: '海报制作失败，图片下载失败1',
icon: 'none'
});
}
});
},
fail: err => {
console.log('生成背景图失败', err)
uni.hideLoading();
uni.showToast({
title: JSON.stringify(err),
icon: 'none'
});
}
});
});
},
// 轮播图变化
onSwiperChange(e) {
this.swiperIndex = e.detail.current;
},
// 保存图片
async onSaveImg() {
let imgUrl = "";
if (this.posterImgs[this.swiperIndex] && this.posterImgs[this.swiperIndex].url) {
imgUrl = await this.posterImgs[this.swiperIndex].url;
} else {
imgUrl = await this.createPoster();
}
// #ifdef H5
this.h5SaveImg = imgUrl;
uni.hideLoading();
// #endif
// #ifdef MP-WEIXIN
uni.showLoading({
title: '海报下载中'
});
if (settingWritePhotosAlbum) {
uni.getSetting({
success: res => {
if (res.authSetting['scope.writePhotosAlbum']) {
uni.saveImageToPhotosAlbum({
filePath: imgUrl,
success: () => {
uni.hideLoading();
uni.showToast({
title: '保存成功'
});
}
});
} else {
uni.showModal({
title: '提示',
content: '请先在设置页面打开“保存相册”使用权限',
confirmText: '去设置',
cancelText: '算了',
success: data => {
if (data.confirm) {
uni.hideLoading();
uni.openSetting();
}
}
});
}
}
});
} else {
settingWritePhotosAlbum = true;
uni.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
uni.saveImageToPhotosAlbum({
filePath: imgUrl,
success: () => {
uni.hideLoading();
uni.showToast({
title: '保存成功'
});
}
});
}
});
}
// #endif
},
}
}
</script>
<style lang="scss" scoped>
.poster_page {
min-height: 100vh;
background-color: #f5f5f5;
display: flex;
align-items: center;
}
.poster_canvas {
width: 750rpx;
height: 1334rpx;
position: fixed;
top: -10000rpx;
// top: 0rpx;
left: 0rpx;
background-color: pink;
}
.poster_swiper {
height: 950rpx;
width: 100%;
swiper-item {
box-sizing: border-box;
display: flex;
align-items: center;
.goods_info_box {
width: 100%;
height: 100%;
transform: scale(0.88);
transition: all 0.4s;
position: relative;
overflow: hidden;
background-color: #FFFFFF;
&.active {
transform: scale(1);
}
.goods_image {
width: 100%;
height: calc(100vw - 220rpx);
}
.goods_info {
padding: 24rpx;
.goods_name {
color: #333;
font-size: 30rpx;
// @include bov(2);
}
.price_box {
margin-top: 24rpx;
display: flex;
align-items: center;
.price {
font-size: 38rpx;
color: red;
}
.store_price {
margin-left: 30rpx;
font-size: 26rpx;
color: #999;
text-decoration: line-through;
}
}
.poster_info {
border-top: 2rpx solid #f1f1f1;
padding-top: 24rpx;
// margin-top: 24rpx;
display: flex;
align-items: center;
justify-content: space-between;
.info {
display: flex;
flex-direction: column;
view {
color: #333;
font-size: 28rpx;
}
text {
color: #999;
font-size: 24rpx;
margin-top: 20rpx;
}
}
.poster_code_image {
display: block;
width: 170rpx;
height: 170rpx;
flex-shrink: 0;
}
}
}
}
}
}
.share_save_box {
position: fixed;
bottom: calc((100vh - 950rpx - 240rpx) / 4);
left: 0;
z-index: 6;
width: 100%;
display: flex;
justify-content: space-around;
border-top: 1px solid #eee;
padding-top: 10rpx;
.btn-options {
display: flex;
flex-direction: column;
align-items: center;
background-color: transparent;
border-color: #F5F5F5!important;
image {
width: 50rpx;
height: 50rpx;
}
text {
line-height: 1.5;
font-size: 24rpx;
color: #333333;
}
&::after{
border:none;
}
}
}
.h5_press_save {
background-color: #000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
z-index: 100;
image {
width: 100%;
}
.download {
font-size: 24rpx;
color: #ffffff;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
position: absolute;
padding: 5rpx 30rpx;
border-radius: 40rpx;
bottom: 30rpx;
left: 50%;
transform: translateX(-50%);
&:before {
content: '';
background: url(../../static/demo/icon_download.png);
width: 24rpx;
height: 24rpx;
margin-right: 15rpx;
}
}
}
</style>
606
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
