Skip to content

M
marketing
Commit 633d5099 by 陈玉桐
Options

test

parent aceb6d74
Showing with 337 additions and 22 deletions
src/views/tool.vue
<template> <template>
<div id="tool"> <div id="tool">
<div id="posterCon"> <!-- 21天模板 -->
<div id="posterCon" class="posterCon_21" v-if="days==21||days==150">
<div id="posterBox"> <div id="posterBox">
<img :src="templateUrl"> <img :src="templateUrl">
<div id="posterBoxText"> <div id="posterBoxText">
...@@ -30,11 +31,47 @@ ...@@ -30,11 +31,47 @@
</div> </div>
<img src="../assets/shadow.png"> <img src="../assets/shadow.png">
</div> </div>
<!-- 60天模板 -->
<div id="posterCon" class="posterCon_60" v-if="days==60">
<div id="posterBox">
<img :src="templateUrl">
<div id="posterBoxText">
<div>
<p>{{posterText2}}</p>
<p>{{posterText1}}</p>
</div>
<div :style="{background: backgroundColor}">欧欧眼保仪</div>
</div>
<div id="addpicBox">
<img @click="selectPic" src="../assets/addpic.png">
<img :src="uploadPic" v-show="uploadPic">
</div>
<div id="posterBom">
<div id="posterBomWrap" :style="{background: backgroundColor}">
<div id="posterTime">
<div>
<input type="tel" @blur="inputBlur" v-model="currentDay" placeholder="请输入" maxlength="2">
<span>/{{days}}</span>
</div>
<p>“让护眼，像刷牙一样成为习惯”</p>
</div>
<div id="posterQRcode">
<div>
<img :src="qrcodeUrl">
</div>
<p>扫码参与护眼活动</p>
</div>
</div>
</div>
</div>
<img src="../assets/shadow.png">
</div>
<div id="createButton"> <div id="createButton">
<span @click="upload">上传截图</span> <span @click="upload">上传截图</span>
<span @click="create">生成海报</span> <span @click="create">生成海报</span>
</div> </div>
<div id="posterOut"> <!-- 21天海报 -->
<div id="posterOut" v-if="days==21||days==150">
<img :src="templateUrl"> <img :src="templateUrl">
<div id="posterOutText"> <div id="posterOutText">
<p>{{posterText2}}</p> <p>{{posterText2}}</p>
...@@ -59,6 +96,36 @@ ...@@ -59,6 +96,36 @@
</div> </div>
</div> </div>
</div> </div>
<!-- 60天海报 -->
<div id="posterOut" class="posterOut_60" v-if="days==60">
<img :src="templateUrl">
<div id="posterOutText">
<div>
<p>{{posterText2}}</p>
<p>{{posterText1}}</p>
</div>
<div :style="{background: backgroundColor}">欧欧眼保仪</div>
</div>
<div id="posterOutAddpicBox">
<img :src="uploadPic">
</div>
<div id="posterOutBom">
<div id="posterOutWrap" :style="{background: backgroundColor}">
<div id="posterOutTime">
<div>
<span>{{currentDay}}</span>/{{days}}
</div>
<p>“让护眼，像刷牙一样成为习惯”</p>
</div>
<div id="posterOutQRcode">
<div>
<img :src="qrcodeUrl">
</div>
<p>扫码参与护眼活动</p>
</div>
</div>
</div>
</div>
<div id="poster" v-show="showPoster"> <div id="poster" v-show="showPoster">
<img :src="posterUrl"> <img :src="posterUrl">
<img id="posterClose" @click="close" src="../assets/icon_close.png"> <img id="posterClose" @click="close" src="../assets/icon_close.png">
...@@ -197,26 +264,26 @@ export default { ...@@ -197,26 +264,26 @@ export default {
}, },
methods: { methods: {
create() { create() {
if(this.status==2){ // if(this.status==2){
this.tipDialogText = '活动已结束' // this.tipDialogText = '活动已结束'
this.tipDialogShow = true // this.tipDialogShow = true
return // return
} // }
if(this.status==3){ // if(this.status==3){
this.tipDialogText = '活动暂未开始' // this.tipDialogText = '活动暂未开始'
this.tipDialogShow = true // this.tipDialogShow = true
return // return
} // }
if(!this.uploadPic){ // if(!this.uploadPic){
this.tipDialogText = '您还未上传照片' // this.tipDialogText = '您还未上传照片'
this.tipDialogShow = true // this.tipDialogShow = true
return // return
} // }
if(!this.currentDay){ // if(!this.currentDay){
this.tipDialogText = '您还未输入打卡天数' // this.tipDialogText = '您还未输入打卡天数'
this.tipDialogShow = true // this.tipDialogShow = true
return // return
} // }
if(this.enrollStatus==1){//已报名 if(this.enrollStatus==1){//已报名
html2canvas(document.getElementById('posterOut'), { html2canvas(document.getElementById('posterOut'), {
useCORS: true, useCORS: true,
...@@ -460,6 +527,145 @@ export default { ...@@ -460,6 +527,145 @@ export default {
} }
} }
#posterCon.posterCon_60 {
#posterBox{
background: none;
overflow: hidden;
>img{
z-index: 1;
position: relative;
}
#addpicBox{
width: 100%;
height: 205px;
position: absolute;
top: 0;
left: 0;
img{
position: absolute;
}
img:nth-child(1){
width: 120px;
height: 120px;
z-index: 2;
left: 50%;
margin-left: -60px;
top: 50%;
margin-top: -60px;
}
img:nth-child(2){
width: 100%;
height: 100%;
z-index: 0;
}
}
}
#posterBoxText{
color: #fff;
position: absolute;
right: 20px;
top: 230px;
display: flex;
z-index: 2;
font-weight: 500;
div:nth-child(1){
color: #000000;
display: flex;
p{
font-size: 9px;
width: 9px;
line-height: 10px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
text-align: center;
margin: 0 4px 0 0;
}
}
div:nth-child(2){
font-size: 16px;
color: #fff;
width: 24px;
line-height: 16px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
text-align: center;
height: 100%;
padding: 4px;
}
}
#posterBom{
padding: 2px 19px 20px;
background-color: #fff;
#posterBomWrap{
width: 100%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: flex;
justify-content: space-between;
padding-bottom: 5px;
}
#posterTime{
padding: 0 0 0 15px;
>div{
width: 100%;
height: 62px;
line-height: 62px;
font-size: 50px;
input{
color: #fff;
font-size: 50px;
font-weight: 600;
background: none;
border: none;
width: 63px;
height: 60px;
line-height: 60px;
text-align: right;
padding: 0;
}
input::-webkit-input-placeholder {
font-size: 12px;
line-height: 36px;
color: #fff;
}
input::-moz-input-placeholder {
font-size: 12px;
line-height: 36px;
color: #fff;
}
input::-ms-input-placeholder {
font-size: 12px;
line-height: 36px;
color: #fff;
}
}
>p{
color: #fff;
font-size: 12px;
margin-top: -8px;
}
}
#posterQRcode{
padding: 8px 15px 0 0;
>div{
padding: 0;
width: 56px;
height: 56px;
margin-bottom: 1px;
img{
display: block;
width: 100%;
height: 100%;
}
}
p{
color: #fff;
font-size: 7px;
font-weight: 500;
text-align: center;
}
}
}
}
#posterOut{ #posterOut{
background-color: #fff; background-color: #fff;
width: 100%; width: 100%;
...@@ -547,6 +753,115 @@ export default { ...@@ -547,6 +753,115 @@ export default {
} }
} }
#posterOut.posterOut_60{
background-color: #fff;
width: 100%;
height: 100%;
position: fixed;
top: -2000px;
// top: 0;
z-index: 999999;
>img{
height: 74%;
width: 100%;
display: block;
z-index: 1;
position: relative;
}
#posterOutAddpicBox{
width: 100%;
height: 270px;
position: absolute;
top: 0;
left: 0;
img{
width: 100%;
height: 100%;
z-index: 0;
}
}
#posterOutText{
color: #fff;
position: absolute;
right: 25px;
top: 300px;
display: flex;
z-index: 2;
font-weight: 500;
div:nth-child(1){
color: #000000;
display: flex;
p{
font-size: 14px;
width: 14px;
line-height: 14px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
text-align: center;
margin: 0 4px 0 0;
}
}
div:nth-child(2){
font-size: 22px;
color: #fff;
width: 30px;
line-height: 22px;
word-wrap: break-word;/*英文的时候需要加上这句，自动换行*/
text-align: center;
height: 100%;
padding: 4px;
}
}
#posterOutBom{
padding: 2px 23px 20px;
background-color: #fff;
#posterOutWrap{
width: 100%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
display: flex;
justify-content: space-between;
padding-bottom: 5px;
}
#posterOutTime{
padding: 20px 0 0 20px;
>div{
width: 100%;
height: 74px;
line-height: 74px;
font-size: 74px;
span{
font-weight: 600;
}
}
>p{
color: #fff;
font-size: 14px;
margin-top: 0;
}
}
#posterOutQRcode{
padding: 8px 15px 0 0;
>div{
padding: 0;
width: 88px;
height: 88px;
margin-bottom: 1px;
img{
display: block;
width: 100%;
height: 100%;
}
}
p{
color: #fff;
font-size: 11px;
font-weight: 500;
text-align: center;
}
}
}
}
#createButton{ #createButton{
padding: 0 31px; padding: 0 31px;
display: flex; display: flex;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment