Skip to content

M
marketing
Commit 633d5099 by 陈玉桐
Options

test

parent aceb6d74
Showing with 337 additions and 22 deletions
src/views/tool.vue
<template>
<div id="tool">
<div id="posterCon">
<!-- 21天模板 -->
<div id="posterCon" class="posterCon_21" v-if="days==21||days==150">
<div id="posterBox">
<img :src="templateUrl">
<div id="posterBoxText">
......@@ -30,11 +31,47 @@
</div>
<img src="../assets/shadow.png">
</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">
<span @click="upload">上传截图</span>
<span @click="create">生成海报</span>
</div>
<div id="posterOut">
<!-- 21天海报 -->
<div id="posterOut" v-if="days==21||days==150">
<img :src="templateUrl">
<div id="posterOutText">
<p>{{posterText2}}</p>
......@@ -59,6 +96,36 @@
</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">
<img :src="posterUrl">
<img id="posterClose" @click="close" src="../assets/icon_close.png">
......@@ -197,26 +264,26 @@ export default {
},
methods: {
create() {
if(this.status==2){
this.tipDialogText = '活动已结束'
this.tipDialogShow = true
return
}
if(this.status==3){
this.tipDialogText = '活动暂未开始'
this.tipDialogShow = true
return
}
if(!this.uploadPic){
this.tipDialogText = '您还未上传照片'
this.tipDialogShow = true
return
}
if(!this.currentDay){
this.tipDialogText = '您还未输入打卡天数'
this.tipDialogShow = true
return
}
// if(this.status==2){
// this.tipDialogText = '活动已结束'
// this.tipDialogShow = true
// return
// }
// if(this.status==3){
// this.tipDialogText = '活动暂未开始'
// this.tipDialogShow = true
// return
// }
// if(!this.uploadPic){
// this.tipDialogText = '您还未上传照片'
// this.tipDialogShow = true
// return
// }
// if(!this.currentDay){
// this.tipDialogText = '您还未输入打卡天数'
// this.tipDialogShow = true
// return
// }
if(this.enrollStatus==1){//已报名
html2canvas(document.getElementById('posterOut'), {
useCORS: true,
......@@ -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{
background-color: #fff;
width: 100%;
......@@ -546,6 +752,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{
padding: 0 31px;
......
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