安装
npm i html2canvas
npm install qrcodejs2 --save
引入
import html2canvas from 'html2canvas'
import QRCode from "qrcodejs2";
<template>
<div>
<div class="van_header">
<van-nav-bar
title="
海报
"
left-arrow
@click-left="onClickLeft"
>
<template #right>
<div class="saveclass">
<span
v-if="saveNum == 1"
@click="saveImage('posterImge', '海报')"
>保存</span
>
<span v-else @click="FinishImage('posterImge', '海报')"
>完成</span
>
</div></template
>
</van-nav-bar>
</div>
<div v-show="saveNum == 1">
<div
v-show="typeinform == 0"
ref="posterImge"
id="posterImgeId"
class="poster_bigbox"
>
<!-- 头部title文字 -->
<div class="titletext">
<div
class="toptext"
@click="Wordclick(0)"
:style="{
color: valuecolorWord,
'font-size': valuesliderWord + 'rem'
}"
>
{{ specialTraining }}
</div>
<div class="toplefttext_box">
<div
class="toplefttext"
@click="Wordclick(1)"
:style="{
color: valuecolorWordone,
'font-size': valuesliderWordone + 'rem'
}"
>
{{ wordone }}
</div>
<div
class="toprighttext"
@click="Wordclick(2)"
:style="{
color: valuecolorWordtwo,
'font-size': valuesliderWordtwo + 'rem'
}"
>
{{ wordtwo }}
</div>
</div>
</div>
<!-- 个人信息 -->
<div class="information_box">
<div class="information_Insidebox">
<div class="top_information">
<div
@click="Wordclick(3)"
:style="{
color: valuecolorWordthree,
'font-size': valuesliderWordthree + 'rem'
}"
id="information"
class="top_information_left"
>
{{ value }}
</div>
<div
contenteditable="true"
class="top_information_Inside"
@click="Wordclick(4)"
:style="{
color: valuecolorWordfour,
'font-size': valuesliderWordfour + 'rem'
}"
>
{{ value1 }}
</div>
<div
@click="Wordclick(5)"
:style="{
color: valuecolorWordfive,
'font-size': valuesliderWordfive + 'rem'
}"
class="top_information_right"
>
{{ value2 }}
</div>
</div>
<!-- 信息 -->
<div
class="informationclass"
:style="{
color: valuecolor,
'font-size': valueslider + 'px'
}"
>
<div>
联系人： <span>{{ contact }}</span>
</div>
<div>
电话号码：<span>{{ contacttel }}</span>
</div>
<div>地址： {{ contactaddres }}</div>
</div>
<!-- 二维码 -->
<div class="qrcode_box">
<div class="qrcode_class" id="qrcode"></div>
</div>
<!-- -->
<div></div>
</div>
</div>
<img class="poster_back" :src="posterimg" alt="" />
<!-- 图片 -->
<vue-drag-resize
v-if="AddfileList.length != 0"
:w="AddImgList[index].AddImgWidth"
:h="AddImgList[index].AddImgHeight"
:x="AddImgList[index].AddImgLeft"
:y="AddImgList[index].AddImgTop"
:z="temp[index]"
:parent-limitation="true"
v-for="(item, index) in AddfileList"
:key="index"
@clicked="act(index)"
@dragging="dragging"
>
<!-- 调用接口时 scr（item.content）赋值为后端返回的图片地址 -->
<img
:src="item.content"
alt=""
:style="{
width: AddImgList[index].AddImgWidth + 'px',
height: AddImgList[index].AddImgHeight + 'px',
top: AddImgList[index].AddImgTop + 'px',
left: AddImgList[index].AddImgLeft + 'px'
}"
/>
</vue-drag-resize>
<!-- 文本 -->
<!-- -->
<vue-drag-resize
v-if="AddTetxListVal.length != 0"
:w="AddTetxList[index].AddTetxWidth"
:h="AddTetxList[index].AddTetxHeight"
:x="AddTetxList[index].AddTetxLeft"
:y="AddTetxList[index].AddTetxTop"
:z="temp[index]"
:parent-limitation="true"
v-for="(item, index) in AddTetxListVal"
:key="'text' + index"
@clicked="actAddText(index)"
@dragging="draggingAddText"
>
<div
class="addtextclass"
alt=""
:style="{
color: item.valcolor,
'font-size': item.valsize + 'rem',
width: AddTetxList[index].AddTetxWidth + 'px',
height: AddTetxList[index].AddTetxHeight + 'px',
top: AddTetxList[index].AddTetxTop + 'px',
left: AddTetxList[index].AddTetxLeft + 'px'
}"
>
{{ item.valname }}
</div>
</vue-drag-resize>
</div>
<!-- 我的海报 -->
<div v-show="typeinform == 1"></div>
<van-image
v-show="imgUrl"
:src="imgUrl"
:preview-src-list="[imgUrl]"
></van-image>
<div class="imgtextclass">
<div class="ledclass">
<div>
<!-- <img :src="" alt="" @click="addTextInput" /> -->
<div class="divbox" @click="addTextInput">
文 本
</div>
</div>
<div>
<!-- <img
:src=""
alt=""
@click="personaInformShowImg = true"
/> -->
<div
class="divbox"
@click="personaInformShowImg = true"
>
图 片
</div>
</div>
</div>
</div>
<!-- 新增文本 -->
<div>
<van-popup
:close-on-click-overlay="false"
v-model="personaInformShowAddText"
position="bottom"
:style="{ height: '30%' }"
>
<div class="cloes_query">
<div>
<img
@click="personaInformShowAddText = false"
class="cloesimg"
:src="closeimg"
alt=""
/>
</div>
<div>
<van-button
class="btnquery"
size="small"
type="primary"
@click="queryAddtext"
>确认</van-button
>
</div>
</div>
<div class="personatext_box">
<div class="Addtextbox">
<div
v-for="(item, index) in AddTetxListVal"
:key="'a' + index"
>
<div class="AddtextDelbox">
<div>
<van-field
v-model="item.valname"
label="文本："
placeholder="请输入文字"
/>
</div>
<div>
<img
class="imgupd"
:src="updtextimg"
alt=""
@click="UpdaddText(item, index)"
/>
</div>
<div>
<img
class="imgdel"
:src="delimg"
alt=""
@click="DeladdText(item, index)"
/>
</div>
</div>
<div
class="styleclass"
v-show="
AddTetxListIndexUpd == index &&
AddTetxListIndexIsNo
"
>
<div class="colorclass">
<div class="colortextclass">颜色：</div>
<div>
<input
class="inputcolor"
type="color"
:value="item.valcolor"
ref="colorvalWordAdd"
@change="colorvalWordAddClick"
/>
</div>
</div>
<div class="ziseclass">
<span> 字号：</span>
<van-slider
step="0.1"
min="0.1"
max="10"
bar-height="4px"
active-color="#fc7401"
v-model="item.valsize"
@change="onChangeWordAdd"
></van-slider>
</div>
</div>
</div>
<van-button
class="btnqueryAddText"
size="small"
type="primary"
@click="AddTextVal"
>新增</van-button
>
</div>
</div>
</van-popup>
</div>
<!-- 图片弹框 -->
<div>
<van-popup
:close-on-click-overlay="false"
v-model="personaInformShowImg"
position="bottom"
:style="{ height: '30%' }"
>
<div class="cloes_query">
<div>
<img
@click="personaInformShowImg = false"
class="cloesimg"
:src="closeimg"
alt=""
/>
</div>
<div>
<van-button
class="btnquery"
size="small"
type="primary"
@click="queryinformImg"
>确认</van-button
>
</div>
</div>
<div class="personatext_box">
<van-tabs v-model="activeImg">
<van-tab title="背景图片">
<van-uploader
class="uploaderimg"
v-model="fileList"
multiple
:after-read="afterRead"
:before-delete="beforeDelete"
:max-count="1"
></van-uploader>
</van-tab>
<van-tab title="新增图片">
<van-uploader
v-model="AddfileList"
multiple
:max-count="3"
:after-read="AddafterRead"
:before-delete="beforeDeleteAdd"
></van-uploader>
</van-tab>
</van-tabs>
</div>
</van-popup>
</div>
<!-- 文字弹框 -->
<div>
<van-popup
:close-on-click-overlay="false"
v-model="personaInformShowWord"
position="bottom"
:style="{ height: '30%' }"
>
<div class="cloes_query">
<div>
<img
@click="personaInformShowWord = false"
class="cloesimg"
:src="closeimg"
alt=""
/>
</div>
<div>
<van-button
class="btnquery"
size="small"
type="primary"
@click="queryinformWord"
>确认</van-button
>
</div>
</div>
<div class="personatext_box">
<van-tabs v-model="activeWord" @click="onClicktabWord">
<van-tab title="文字">
<div class="filed_box">
<van-field
v-model="valWord"
label="文本："
placeholder="请输入文字"
/></div
></van-tab>
<van-tab title="样式">
<div class="styleclass">
<div class="colorclass">
<div class="colortextclass">颜色：</div>
<div>
<input
class="inputcolor"
type="color"
:value="valuecolorText"
ref="colorvalWord"
/>
</div>
</div>
<div class="ziseclass">
<span> 字号：</span>
<van-slider
step="0.1"
min="0.1"
max="8"
bar-height="4px"
active-color="#fc7401"
v-model="valuesliderText"
@change="onChangeWord"
></van-slider>
</div>
</div>
</van-tab>
</van-tabs>
</div>
</van-popup>
</div>
</div>
<div v-show="saveNum == 2">
<div class="savebixbox">
<div id="captureId" @click="FinishImage('posterImge', '海报')">
<img class="saveposter_back" :src="imghref" alt="" />
</div>
<div class="icontextbox">
<van-icon
class="iconclass"
name="info-o"
/>长按保存海报至手机相册
</div>
</div>
<div class="btnbox">
<div class="btnclass">
<van-button
@click="returnposter"
class="vanbtn"
type="primary"
>返回海报列表</van-button
>
<van-button
@click="shareposter"
class="vanbtn"
type="primary"
>分享至朋友圈</van-button
>
<van-share-sheet
v-model="showShare"
title="立即分享给好友"
:options="options"
@select="onSelect"
/>
</div>
</div>
</div>
</div>
</template>
<script>
//import VueDragResize from "vue-drag-resize";
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";
// import posterimg from "";
// import posterimgBF from "";
// import closeimg from " ";
// import delimg from "";
// import updtextimg from "";
import { Toast } from "vant";
export default {
components: {
//VueDragResize
},
props: {
Id: {
type: String
}
},
data() {
return {
x: 0,
y: 0,
l: 0,
t: 0,
wxleft: "",
wxtop: "",
isDown: false,
textshow: true,
closeimg:"https://img1.baidu.com/it/u=4148146874,2237566668&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
showShare: false,
options: [
{ name: "微信", icon: "wechat" },
{ name: "微博", icon: "weibo" },
{ name: "复制链接", icon: "link" },
{ name: "分享海报", icon: "poster" },
{ name: "二维码", icon: "qrcode" }
],
// 切换模板、我的
typeinform: 0,
// 保存、完成
saveNum: 1,
//
active: 0,
posterimg:"https://img-qn-0.51miz.com/2017/06/28/22/2017062822916271_P1237556_a577aee4.jpg!/quality/90/unsharp/true/compress/true/format/webp/fh/260",
posterimgBF:"https://img-qn-0.51miz.com/2017/06/28/22/2017062822916271_P1237556_a577aee4.jpg!/quality/90/unsharp/true/compress/true/format/webp/fh/260",
addimgs: "",
delimg:"https://img1.baidu.com/it/u=1440994322,452618293&fm=253&fmt=auto&app=138&f=PNG?w=256&h=256",
updtextimg:"https://img2.baidu.com/it/u=3423780862,3243678606&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
personaInformShowImg: false, //图片弹框
activeImg: 0, //切换图片
// 新增图片
AddfileList: [
// { url: "https://img01.yzcdn.cn/vant/leaf.jpg" ,Id:1},
], //新增图片 保存图片后返回{url:"",Id:""} //
temp: [], //不要
AddImgListIndex: 0, //不要
// 新增图片实体类
AddImgList: [
// {
// AddImgWidth: 90, //宽度 int
// AddImgHeight: 80, //高度 int
// AddImgTop: 0, //向上 int
// AddImgLeft: 0 //向下 int
// },
],
//
personaInformShowAddText: false, //新增文本 （不要）
activeAddTetx: 0, //切换文本 （不要）
// 新增文本实体类
AddTetxListVal: [
// {
// valcolor: "#1A1919", //颜色 字符串
// valsize:0.8, //字体大小 字符串
// valname: "" //文本内容 字符串
// }
], //新增文本
AddTetxtemp: [], //不要
AddTetxListIndex: 0, //不要
AddTetxListIndexUpd: 0, //不要
AddTetxListIndexIsNo: false, //不要
// 新增文本位置 实体类
AddTetxList: [
// {
// AddTetxWidth: 90, //宽度 int
// AddTetxHeight: 80, //高度 int
// AddTetxTop: 0, //向上 int
// AddTetxLeft: 0 //向下 int
// }
],
valuecolorTextAdd: "#FFA622", //默认颜色 文本
valuesliderTextAdd: 0.8, //默认字体大小 文本 字符串
fileList: [], //图片存放（可不要）
valuecolor: "#FFFFFF", //个人信息字体颜色
valueslider: 12, //个人信息size（字体大小）
specialTraining: "您好世界！", //篮球专项训练
valuecolorWord: "#FFFFFF", //篮球专项训练 颜色
valuesliderWord: "2.87", //篮球专项训练 字体大小
value: "限时优惠价", //限时优惠价
valuecolorWordthree: "#FFFFFF", //限时优惠价颜色
valuesliderWordthree: 0.3, //限时优惠价字体大小
value1: "8999", //价格
valuecolorWordfour: "#FFA622", //价格颜色
valuesliderWordfour: 2, //价格字体大小
value2: "元", //单位
valuecolorWordfive: "#FFFFFF", //单位颜色
valuesliderWordfive: 0.36, //单位字体大小
imgUrl: "", //生成海报的图片（可不要）
qrCodeUrl: "https://www.baidu.com/", //二维码地址
personaInformShow: false, //（不要）
contact: "花归去", //个人信息 名字
contacttel: "178011xxxxx", //个人信息 电话
contactaddres: "北京市xxxxxx", //个人信息 地址
valWord: "", //（不要）
activeWord: 0, //(不要)
personaInformShowWord: false, //(不要)
valuecolorText: "#E60526", //默认颜色 文本 （不要）
valuesliderText: 0.8, //默认字体大小 文本 （不要）
wordType: 0, //点击的那个 文本 （不要）
wordone: "早安 ", //早安
valuecolorWordone: "#FFFFFF", //早安 颜色
valuesliderWordone: "2.3", //早安 字体大小
wordtwo: "梦寻汝", //梦寻汝
valuecolorWordtwo: "#FFA622", //梦寻汝 颜色
valuesliderWordtwo: 2.53, // 梦寻汝 字体大小
imghref: "", //（不要）
saveImageA: "" //（不要）
};
},
activated() {},
mounted() {
this.getapp();
},
created() {},
methods: {
dragging(newRect) {
this.AddImgList[this.AddImgListIndex].AddImgWidth = newRect.width;
this.AddImgList[this.AddImgListIndex].AddImgHeight = newRect.height;
this.AddImgList[this.AddImgListIndex].AddImgTop = newRect.top;
this.AddImgList[this.AddImgListIndex].AddImgLeft = newRect.left;
},
//点击事件，传入索引，把所有层级都设置为1，当前元素设置为10
act(index) {
this.AddImgListIndex = index;
for (let i = 0; i < this.AddfileList.length; i++) {
this.temp[i] = 1;
}
this.temp[index] = 10;
this.$forceUpdate();
},
// 新增图片
AddafterRead(file) {
console.log(file);
this.addimgs = file.content;
this.AddImgList.push({
AddImgWidth: 90,
AddImgHeight: 80,
AddImgTop: 0,
AddImgLeft: 0
});
console.log(this.AddfileList);
// this.AddfileList.push({ url: file.content, isImage: true });
},
// 新增图片删除
beforeDeleteAdd(file, detail) {
this.AddfileList.splice(detail.index, 1);
console.log(file);
console.log(detail);
},
// 新增文本
AddTextVal() {
this.AddTetxListVal.push({
valcolor: "#1A1919",
valsize: parseFloat("0.8"),
valname: ""
});
this.AddTetxList.push({
AddTetxWidth: 90,
AddTetxHeight: 20,
AddTetxTop: 0,
AddTetxLeft: 0
});
this.AddTetxListIndexIsNo = false;
},
// 编辑新增
UpdaddText(item, index) {
this.AddTetxListIndexIsNo = true;
this.AddTetxListIndexUpd = index;
},
// 删除新增
DeladdText(item, index) {
this.AddTetxListIndexIsNo = false;
if (index != 0) {
this.AddTetxListVal.splice(index, 1);
}
},
// 文本add
onClicktabWordAdd() {},
// 文字字号
onChangeWordAdd(val) {
this.AddTetxListVal.forEach((item, index) => {
if (this.AddTetxListIndexUpd == index) {
item.valsize = val;
}
});
},
// 文本颜色
colorvalWordAddClick(val) {
console.log("文本颜色:", val);
this.AddTetxListVal.forEach((item, index) => {
if (this.AddTetxListIndexUpd == index) {
item.valcolor = this.$refs.colorvalWordAdd[
this.AddTetxListIndexUpd
].value;
}
});
},
// 文本新增
addTextInput() {
this.personaInformShowAddText = true;
if (this.AddTetxListVal.length == 0) {
this.AddTetxListVal.push({
valcolor: "#1A1919",
valsize: parseFloat("0.8"),
valname: ""
});
this.AddTetxList.push({
AddTetxWidth: 90,
AddTetxHeight: 20,
AddTetxTop: 0,
AddTetxLeft: 0
});
}
},
//确认
queryAddtext() {
this.personaInformShowAddText = false;
console.log(this.AddTetxListVal);
},
draggingAddText(newRect) {
this.AddTetxList[this.AddTetxListIndex].AddTetxWidth =
newRect.width;
this.AddTetxList[this.AddTetxListIndex].AddTetxHeight =
newRect.height;
this.AddTetxList[this.AddTetxListIndex].AddTetxTop = newRect.top;
this.AddTetxList[this.AddTetxListIndex].AddTetxLeft = newRect.left;
},
actAddText(index) {
this.AddTetxListIndex = index;
for (let i = 0; i < this.AddTetxListVal.length; i++) {
this.AddTetxtemp[i] = 1;
}
this.AddTetxtemp[index] = 10;
this.$forceUpdate();
},
//图片格式转换方法
dataURLToBlob(dataurl) {
let arr = dataurl.split(",");
let mime = arr[0].match(/:(.*?);/)[1];
let bstr = atob(arr[1]);
let n = bstr.length;
let u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
},
// // 生成图片
saveImage(divText, imgText) {
const toast = Toast.loading({
duration: 0, // 持续展示 toast
message: "保存中...",
forbidClick: true
});
let canvasID = this.$refs[divText];
let that = this;
let a = document.createElement("a");
html2canvas(canvasID).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removeChild(dom);
let blob = that.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href", URL.createObjectURL(blob));
//这块是保存图片操作 可以设置保存的图片的信息
a.setAttribute("download", imgText + ".png");
this.imghref = a.href;
toast.clear(); // 清除加载
this.saveNum = 2;
this.saveImageA = a;
// document.body.appendChild(a);
// a.click();
// URL.revokeObjectURL(blob);
// document.body.removeChild(a);
});
// 分享
// this.showShare = true;
},
// 完成
FinishImage(divText, imgText) {
// image.src = document.querySelector('canvas').src
const a = document.createElement("a");
fetch(this.imghref) // 跨域时会报错
.then(res => res.blob())
.then(blob => {
// 将链接地址字符内容转变成blob地址
a.href = URL.createObjectURL(blob);
a.download = imgText || "下载图片"; // 下载文件的名字
document.body.appendChild(a);
a.click();
//在资源下载完成后 清除 占用的缓存资源
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
});
},
getapp() {
// new QRCode(document.getElementById('qrcode'), 'your content');
var qrcode = new QRCode("qrcode", {
text: this.qrCodeUrl,
width: 47,
height: 47,
colorDark: "#000000",
colorLight: "#ffffff",
correctLevel: QRCode.CorrectLevel.H
});
},
// 返回海报
returnposter() {
this.saveNum = 1;
},
// 分享海报
shareposter() {
this.showShare = true;
},
// 分享
onSelect(option) {
Toast(option.name);
this.showShare = false;
},
// 背景图
afterRead(file) {
this.posterimg = file.content;
//文件读取完成后的回调函数
// console.log("gile~~~", file.content);
},
// 背景图删除图片
beforeDelete(file, detail) {
this.fileList.splice(detail.index, 1);
this.posterimg = this.posterimgBF;
},
// 确认按钮
queryinform() {
this.personaInformShow = false;
if (this.$refs.colorval) {
this.valuecolor = this.$refs.colorval.value;
}
// console.log( this.$refs.colorval.value)
},
// 点击文字
Wordclick(val) {
this.personaInformShowWord = true;
this.wordType = val;
if (val == 0) {
this.valWord = this.specialTraining;
this.valuecolorText = this.valuecolorWord;
this.valuesliderText = parseFloat(this.valuesliderWord);
} else if (val == 1) {
this.valWord = this.wordone;
this.valuecolorText = this.valuecolorWordone;
this.valuesliderText = parseFloat(this.valuesliderWordone);
} else if (val == 2) {
this.valWord = this.wordtwo;
this.valuecolorText = this.valuecolorWordtwo;
this.valuesliderText = parseFloat(this.valuesliderWordtwo);
} else if (val == 3) {
this.valWord = this.value;
this.valuecolorText = this.valuecolorWordthree;
this.valuesliderText = parseFloat(this.valuesliderWordthree);
} else if (val == 4) {
this.valWord = this.value1;
this.valuecolorText = this.valuecolorWordfour;
this.valuesliderText = parseFloat(this.valuesliderWordfour);
} else if (val == 5) {
this.valWord = this.value2;
this.valuecolorText = this.valuecolorWordfive;
this.valuesliderText = parseFloat(this.valuesliderWordfive);
}
},
// 文字确认按钮
queryinformWord() {
this.personaInformShowWord = false;
if (this.wordType == 0) {
this.specialTraining =
this.valWord == "" ? this.specialTraining : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWord = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 1) {
this.wordone = this.valWord == "" ? this.wordone : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordone = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 2) {
this.wordtwo = this.valWord == "" ? this.wordtwo : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordtwo = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 3) {
this.value = this.valWord == "" ? this.value : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordthree = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 4) {
this.value1 = this.valWord == "" ? this.value1 : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordfour = this.$refs.colorvalWord.value;
}
} else if (this.wordType == 5) {
this.value2 = this.valWord == "" ? this.value2 : this.valWord;
if (this.$refs.colorvalWord) {
this.valuecolorWordfive = this.$refs.colorvalWord.value;
}
}
},
// 文字字号
onChangeWord(val) {
if (this.wordType == 0) {
this.valuesliderWord = val;
} else if (this.wordType == 1) {
this.valuesliderWordone = val;
} else if (this.wordType == 2) {
this.valuesliderWordtwo = val;
} else if (this.wordType == 3) {
this.valuesliderWordthree = val;
} else if (this.wordType == 4) {
this.valuesliderWordfour = val;
} else if (this.wordType == 5) {
this.valuesliderWordfive = val;
}
// console.log(this.valuesliderWord);
},
// 文字tab切换
onClicktabWord(val) {},
onClickLeft() {
this.$router.history.go(-1);
},
queryinformImg() {
console.log("图片", this.fileList);
if (this.fileList.length != 0) {
// 此处赋值为图片上传地址 页面不展示为canvas跨越 放到线上环境就可以了（注意图片和线上地址域名统一）
// this.posterimg =
} else {
this.posterimg = this.posterimgBF;
}
this.personaInformShowImg = false;
}
}
};
</script>
<style lang="scss" scoped>
.divbox {
width: 150px;
height: 150px;
border: 1px solid #ccc;
border-radius: 10px;
text-align: center;
line-height: 150px;
font-size:30px;
font-weight: 600
}
.addtextclass {
display: flex;
justify-content: start;
flex-wrap: wrap;
}
.Addtextbox {
.AddtextDelbox {
display: flex;
align-content: center;
align-items: center;
}
.imgupd {
margin: 0 10px;
width: 50px;
}
.imgdel {
width: 50px;
}
.btnqueryAddText {
margin-top: 10px;
width: 100%;
background: #fc7401;
border: 1px solid #fc7401;
}
}
.tuozbox {
width: 100px;
height: 100px;
border: 1px solid #fc7401;
border-radius: 10px;
}
.saveclass {
font-size: 28px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #fc7401;
line-height: 40px;
}
.checkedclass {
margin-top: 36px;
}
.poster_bigbox {
width: calc(100% - 70px);
margin: auto;
margin-top: 64px;
// display: inline-block;
overflow: hidden;
position: relative;
display: flex;
justify-content: center;
#wxcode {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
// z-index: 999;
}
.titletext {
position: absolute;
left: 65px;
// width: calc(100% - 150px);
margin-top: 83px;
.toptext {
font-size: 87px;
height: 63px;
font-family: PangMenZhengDao;
font-weight: 400;
font-style: italic;
color: #ffffff;
line-height: 48px;
text-shadow: 0px 6px 13px rgba(10, 52, 196, 0.6);
}
.toplefttext_box {
margin-top: 43px;
display: flex;
flex-wrap: nowrap;
justify-content: center;
// align-items: flex-end;
.toplefttext {
// width: 38%;
font-size: 80px;
font-family: PangMenZhengDao;
font-weight: 400;
font-style: italic;
color: #ffffff;
line-height: 48px;
display: flex;
align-items: center;
margin-right: 5px;
text-shadow: 0px 5px 13px rgba(10, 52, 196, 0.75);
}
.toprighttext {
color: #ffa622;
font-size: 103px;
font-family: PangMenZhengDao;
font-weight: 400;
line-height: 100px;
font-style: italic;
text-shadow: 0px 7px 13px rgba(10, 52, 196, 0.6);
}
}
// margin-left: 66px;
}
.information_box {
position: absolute;
width: calc(100% - 136px);
// height: 256px;
bottom: 46px;
// background: rgba(255, 255, 255, 0.2);
background: rgba(96, 179, 249, 0.36);
// background: #60b3f9;
// opacity: 0.36;
border-radius: 25px;
.information_Insidebox {
margin-left: 30px;
.top_information {
display: flex;
align-items: center;
// height: 100px;
.top_information_left {
float: left;
// display: flex;
margin-top: 30px;
font-weight: 400;
font-size: 36px;
font-family: PangMenZhengDao;
color: #fff;
border: none;
outline: none;
}
.top_information_Inside {
// float: left;
// width: 46%;
// height: 50px;
// display: flex;
// align-items: center;
// align-items: flex-start;
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
// font-size: 80px;
font-weight: bold;
font-style: italic;
// font-family: PangMenZhengDao;
color: #ffa622;
-webkit-text-stroke: 0.8px #ffffff;
text-shadow: 0px 8px 13px rgba(10, 52, 196, 0.51);
// height: 100px;
.top_information_Insidesvg {
height: 72px;
// text-shadow: 0px 8px 13px rgba(10, 52, 196, 0.51);
}
}
.top_information_right {
float: left;
// width: 300px;
margin-top: 30px;
font-weight: 400;
font-size: 36px;
font-style: italic;
font-family: PangMenZhengDao;
color: #fff;
}
}
.qrcode_box {
position: absolute;
bottom: 21px;
right: 35px;
width: 115px;
height: 115px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
}
.informationclass {
width: calc(100% - 150px);
display: flex;
flex-direction: column;
flex-wrap: wrap;
// font-size: 18px;
// font-size: 18px;
// font-family: PangMenZhengDao;
font-weight: 400;
// color: #ffffff;
line-height: 40px;
padding-bottom: 21px;
}
}
}
// .qrcode_class {
// position: absolute;
// bottom: 20px;
// right: 40px;
// }
.poster_back {
width: 680px;
height: 1020px;
}
}
.inputclass {
float: left;
width: 100px;
margin-top: 20px;
font-weight: 400;
font-size: 35px;
font-family: PangMenZhengDao;
color: #fff;
}
.color_size {
margin-top: 20px;
font-weight: 400;
font-size: 35px;
font-family: PangMenZhengDao;
stop-color: #fff;
}
.imgtextclass {
margin-top: 123px;
margin-bottom: 83px;
.ledclass {
width: calc(100% - 116px);
margin: auto;
display: flex;
// justify-content: space-between;
justify-content: space-around;
img {
width: 143px;
}
}
}
.cloes_query {
display: flex;
justify-content: space-between;
width: calc(100% - 86px);
margin: auto;
margin-top: 46px;
align-items: flex-end;
.cloesimg {
width: 33px;
}
.btnquery {
height: 50px;
background: #fc7401;
border: 1px solid #fc7401;
}
}
.personatext_box {
margin-top: 20px;
margin-left: 40px;
margin-right: 40px;
.uploaderimg {
margin-top: 30px;
margin-left: 40px;
}
/deep/ .van-tabs__line {
background: #fc7401 !important;
}
.styleclass {
margin-top: 10px;
margin-left: 8%;
.colorclass {
display: flex;
align-items: center;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 400;
.colortextclass {
margin-right: 30px;
}
.inputcolor {
border: 3px solid #fc7401;
}
}
.ziseclass {
margin-top: 20px;
margin-right: 30px;
display: flex;
align-items: center;
font-size: 24px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 400;
span {
// margin-right: 20px;
width: 110px;
}
}
}
.filed_box {
padding-top: 5px;
margin-left: 8%;
/deep/ .van-cell {
padding: 5px 10px 5px 16px;
.van-field__label {
width: 45px;
}
}
}
}
.savebixbox {
width: calc(100% - 70px);
margin: auto;
margin-top: 86px;
.saveposter_back {
width: 680px;
height: 1020px;
}
.icontextbox {
margin-top: 38px;
font-size: 32px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #222222;
line-height: 45px;
.iconclass {
width: 34px;
color: #fc7401;
margin-right: 21px;
margin-bottom: 35px;
}
}
}
.btnbox {
width: 100%;
// height: 231px;
height: 331px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
// margin-bottom: 180px;
.btnclass {
width: calc(100% - 100px);
margin: auto;
display: flex;
margin-bottom: 150px;
justify-content: space-between;
.vanbtn {
width: 297px;
height: 88px;
background: #fc7401;
border-radius: 10px;
border: 1px solid #fc7401;
font-size: 30px;
font-family: PingFang-SC-Medium, PingFang-SC;
font-weight: 500;
color: #ffffff;
line-height: 88px;
text-align: center;
}
}
}
</style>
492
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
