|
@@ -1,1127 +0,0 @@
|
|
-<template>
|
|
|
|
- <view class="page">
|
|
|
|
- <view class="poster" v-if="!show_poster">
|
|
|
|
- <view class="canvas-content" style="text-align:center;position:relative;" :style='{background:(posterObj1.backgroundType=="rgb"? posterObj1.background:"url("+posterObj1.background+") no-repeat;background-size:100% 100%;"),borderRadius:posterObj1.borderRadius,padding:(check_idx==2?"80rpx 68rpx":"40rpx 36rpx 80rpx")}'>
|
|
|
|
- <image v-if='check_idx==1' style='position:absolute;width:103rpx;height:103rpx;bottom: 0;left: 0;' src="https://s.yun-live.com/images/20210201/d88d56843d43b917e2a28550b2a62723.png"></image>
|
|
|
|
- <image v-if='check_idx==1' style='position:absolute;width:56.4rpx;height:56.4rpx;right:0rpx;top:50%;' src="https://s.yun-live.com/images/20210201/247736ffd279276b891ec14db8ed0fd0.png"></image>
|
|
|
|
- <image :style='{width:posterObj1.width,height:posterObj1.height,borderRadius:posterObj1.imageBorderRadius}' :src="posterObj1.image"></image>
|
|
|
|
- <view :style='{fontSize:posterObj1.titleCssFontSize,fontWeight:posterObj1.titleCssFontWeight,color:posterObj1.titleCssColor,lineWeight:posterObj1.titleCssLineHeight
|
|
|
|
- }' class="title">{{posterObj1.title}}</view>
|
|
|
|
- <view class='flex justify-space-between' style='align-items: flex-start;margin-top:18rpx;'>
|
|
|
|
- <view style='text-align:left;margin-top:30rpx;'>
|
|
|
|
- <view :style='{fontSize:posterObj1.title1CssFontSize,fontWeight:posterObj1.title1CssFontWeight,color:posterObj1.title1CssColor,lineWeight:posterObj1.title1CssLineHeight
|
|
|
|
- }' class="title1">{{posterObj1.title1}}</view>
|
|
|
|
- <view :style='{fontSize:posterObj1.title2CssFontSize,color:posterObj1.title2CssColor,lineWeight:posterObj1.title2CssLineHeight
|
|
|
|
- }' class="title2">{{posterObj1.title2}}</view>
|
|
|
|
- </view>
|
|
|
|
- <view>
|
|
|
|
- <image :style='{width:posterObj1.qrcodeWidth,height:posterObj1.qrcodeHeight,}' :src="posterObj1.qrcode"></image>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="footer-btn">
|
|
|
|
- <view class="">
|
|
|
|
- 返回
|
|
|
|
- </view>
|
|
|
|
- <view class="save" @click="toSave">
|
|
|
|
- 保存
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view class="poster-btn">
|
|
|
|
- <view class='diy_image'>
|
|
|
|
- 上传图片
|
|
|
|
- <view>
|
|
|
|
- <u-radio-group @change='imagechange($event)' v-model="imageValue">
|
|
|
|
- <u-radio shape="square" name='自定义图片' label="自定义图片"></u-radio>
|
|
|
|
- <u-radio shape="square" name='选择名片' label="选择名片"></u-radio>
|
|
|
|
- </u-radio-group>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- <view style='color:red;font-size:24rpx;padding: 20rpx 20rpx 0;'>注:如勾选“选择名片”,其他用户扫描海报二维码后会自动与您交换名片。</view>
|
|
|
|
- <view class='diy_title'>
|
|
|
|
- 编辑内容
|
|
|
|
- <view>
|
|
|
|
- <u--input v-model="value" @focus='titleclick' placeholder="请输入内容" border="bottom" clearable></u--input></view>
|
|
|
|
- </view>
|
|
|
|
- <view class='check_bg'>
|
|
|
|
- <view style='font-size:28rpx'>定义背景</view>
|
|
|
|
- <view :class="{'is-check':check_idx==index}" v-for="(item,index) in footer_arr" :key="index" @click="toChoose(index)">
|
|
|
|
- <image :src="item" mode=""></image>
|
|
|
|
- <view v-if="check_idx==index"></view>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- </view>
|
|
|
|
- <!-- 生成的图片 -->
|
|
|
|
- <uni-popup type="center" ref="posterImg" :maskClick="false">
|
|
|
|
- <view class="poster-img">
|
|
|
|
- <text @click="closePopup"></text>
|
|
|
|
- <view style='overflow: scroll;width: 670rpx;height: 928rpx;'>
|
|
|
|
- <image :src="path" mode="widthFix" @click="previewImg"></image>
|
|
|
|
- </view>
|
|
|
|
- <!-- #ifdef H5 -->
|
|
|
|
- <view class="">
|
|
|
|
- 长按图片保存到手机
|
|
|
|
- </view>
|
|
|
|
- <!-- #endif -->
|
|
|
|
- <!-- #ifndef H5 -->
|
|
|
|
- <view class="">
|
|
|
|
- 点击图片保存到手机
|
|
|
|
- </view>
|
|
|
|
- <!-- #endif -->
|
|
|
|
- </view>
|
|
|
|
- </uni-popup>
|
|
|
|
- <u-popup :show="titleStatus" :round="10" mode="center" @close="close" @open="open">
|
|
|
|
- <view style='width:600rpx;padding:20rpx;'>
|
|
|
|
- <u--textarea v-model="value" maxlength='300' count placeholder="请输入内容" ></u--textarea>
|
|
|
|
- <view style='margin:20rpx 0rpx 0;'>
|
|
|
|
- <u-button @click='confirm' type="success" text="确定"></u-button>
|
|
|
|
- </view>
|
|
|
|
- </view>
|
|
|
|
- </u-popup>
|
|
|
|
- <u-picker :immediateChange="true" keyName="cardBusiness" confirmText='确定' title="选择名片" @cancel="show1=false"
|
|
|
|
- closeOnClickOverlay @confirm="cardConfirm" :show="show1" :columns="cardList"></u-picker>
|
|
|
|
- <poster :data="canvasData" background-color="#FFF" :width='948' :height='534' @on-success="posterSuccess"
|
|
|
|
- ref="poster" @on-error="posterError"></poster>
|
|
|
|
- <lPainter :board="posterObj" ref="painter"></lPainter>
|
|
|
|
- <canvas id="canvasId"
|
|
|
|
- :type="type"
|
|
|
|
- style="width:0;height:0;"></canvas>
|
|
|
|
- </view>
|
|
|
|
-</template>
|
|
|
|
-
|
|
|
|
-<script>
|
|
|
|
- var that;
|
|
|
|
- import uploadImage from '@/components/ossutil/uploadFile.js';
|
|
|
|
- import uniPopup from "@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
|
|
|
|
- import lPainter from '@/components/lime-painter/index.vue';
|
|
|
|
- import { Layout } from '@/components/lime-painter/layout';
|
|
|
|
- import Poster from '../../components/zhangyuhao-poster/Poster.vue';
|
|
|
|
- import { toPx, isNumber, getImageInfo, base64ToPath, compareVersion } from '@/components/lime-painter/utils'
|
|
|
|
- import { adaptor, expand } from '@/components/lime-painter/canvas';
|
|
|
|
- export default {
|
|
|
|
- components: {
|
|
|
|
- lPainter,
|
|
|
|
- uniPopup,
|
|
|
|
- Poster,
|
|
|
|
- },
|
|
|
|
- data() {
|
|
|
|
- return {
|
|
|
|
- imageValue:'',
|
|
|
|
- canvasData:{},
|
|
|
|
- value:'云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
|
|
|
|
- show_poster:false,//显示海报
|
|
|
|
- path: '', //生成的图片地址
|
|
|
|
- image:'',
|
|
|
|
- show1:false,
|
|
|
|
- cardList: [],
|
|
|
|
- list:[],
|
|
|
|
- theight:0,
|
|
|
|
- canvas1:'',
|
|
|
|
- poster:'',
|
|
|
|
- type:'2d',
|
|
|
|
- height:0,
|
|
|
|
- use2dCanvas:false,
|
|
|
|
- layout1: new Layout(),
|
|
|
|
- titleStatus:false,
|
|
|
|
- posterObj1:{
|
|
|
|
- background:'#fff',
|
|
|
|
- backgroundType:'rgb',
|
|
|
|
- borderRadius: '16rpx',
|
|
|
|
- image:'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
- width: '606rpx',
|
|
|
|
- height: '341rpx',
|
|
|
|
- imageBorderRadius:'16rpx',
|
|
|
|
- title:'云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
|
|
|
|
- titleCssFontSize: '32rpx',
|
|
|
|
- titleCssColor: '#1A2033',
|
|
|
|
- titleCssFontWeight: 'bold',
|
|
|
|
- titleCssLineHeight: '45rpx',
|
|
|
|
- title1:'厦门吴彦祖',
|
|
|
|
- title1CssFontSize: '28rpx',
|
|
|
|
- title1CssColor: '#1A2033',
|
|
|
|
- title1CssFontWeight: 'bold',
|
|
|
|
- title1CssLineHeight: '28rpx',
|
|
|
|
- title2:'扫描识别二维码',
|
|
|
|
- title2CssFontSize: '24rpx',
|
|
|
|
- title2CssColor: '#4070FF',
|
|
|
|
- title2CssLineHeight: '24rpx',
|
|
|
|
- qrcode:'../../static/imgs/qrcode.jpg',
|
|
|
|
- qrcodeWidth: '240rpx',
|
|
|
|
- qrcodeHeight: '240rpx',
|
|
|
|
- },
|
|
|
|
- posterObj: {
|
|
|
|
- width: '670rpx',
|
|
|
|
- height: '890rpx',
|
|
|
|
- background: '#fff',
|
|
|
|
- borderRadius: '16rpx',
|
|
|
|
- views: [
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/9a4e7df322dc5c9f30ea9b126d3269a6.png',
|
|
|
|
- // css: {
|
|
|
|
- // width: '128rpx',
|
|
|
|
- // height: '50rpx',
|
|
|
|
- // left: '542rpx',
|
|
|
|
- // top: '0rpx',
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
- // css: {
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '480rpx',
|
|
|
|
- // borderRadius: '50%',
|
|
|
|
- // width: '80rpx',
|
|
|
|
- // height: '80rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: '云现场 | 2020年 麓客城市 WO-LUNTEER创想礼·麓客共创之夜',
|
|
|
|
- use:'title',
|
|
|
|
- css: {
|
|
|
|
- fontSize: '32rpx',
|
|
|
|
- color: '#1A2033',
|
|
|
|
- fontWeight: 'bold',
|
|
|
|
- lineHeight: '45rpx',
|
|
|
|
- left: '32rpx',
|
|
|
|
- top: '400rpx',
|
|
|
|
- width: '606rpx'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: '厦门吴彦祖',
|
|
|
|
- use:'title1',
|
|
|
|
- css: {
|
|
|
|
- fontSize: '28rpx',
|
|
|
|
- fontWeight: 'bold',
|
|
|
|
- color: '#1A2033',
|
|
|
|
- lineHeight: '28rpx',
|
|
|
|
- left: '32rpx',
|
|
|
|
- top: '515rpx'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: '扫描识别二维码',
|
|
|
|
- use:'title2',
|
|
|
|
- css: {
|
|
|
|
- fontSize: '24rpx',
|
|
|
|
- color: '#4070FF',
|
|
|
|
- lineHeight: '24rpx',
|
|
|
|
- left: '32rpx',
|
|
|
|
- top: '559rpx'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
- use:'dt',
|
|
|
|
- css: {
|
|
|
|
- left: '32rpx',
|
|
|
|
- top: '34rpx',
|
|
|
|
- width: '606rpx',
|
|
|
|
- height: '341rpx',
|
|
|
|
- borderRadius: '16rpx'
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- {
|
|
|
|
- type: 'qrcode',
|
|
|
|
- text: 'https://www.yun-live.com/',
|
|
|
|
- css: {
|
|
|
|
- left: '445rpx',
|
|
|
|
- top: '500rpx',
|
|
|
|
- width: '200rpx',
|
|
|
|
- height: '200rpx',
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- // {
|
|
|
|
- // type: 'text',
|
|
|
|
- // text: '———— 由云现场提供技术支持 ————',
|
|
|
|
- // css: {
|
|
|
|
- // left: '0',
|
|
|
|
- // top: '863rpx',
|
|
|
|
- // width: '100%',
|
|
|
|
- // textAlign: 'center',
|
|
|
|
- // fontSize: '24rpx',
|
|
|
|
- // color: '#989FB3',
|
|
|
|
- // lineHeight: '33rpx'
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- ]
|
|
|
|
- }, //画板数据
|
|
|
|
- footer_arr: [
|
|
|
|
- 'https://s.yun-live.com/images/20210201/d502979c734077930cee837739ee9285.png',
|
|
|
|
- 'https://s.yun-live.com/images/20210201/0289000561415e1f9f6e542a3553906d.png',
|
|
|
|
- 'https://s.yun-live.com/images/20210201/5d2e237728e1dd8727835ca95084721e.png',
|
|
|
|
- 'https://s.yun-live.com/images/20210201/15075d31c26cc446333d569b0d2346e8.png',
|
|
|
|
- 'https://s.yun-live.com/images/20210201/6e716c556d1a80e90ecb0260e0990add.png'
|
|
|
|
- ], //底部选项
|
|
|
|
- check_idx: 0, //底部选中的下标
|
|
|
|
- dtindex:0,
|
|
|
|
- titleindex:0,
|
|
|
|
- title1index:0,
|
|
|
|
- title2index:0,
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- onLoad() {
|
|
|
|
- that = this
|
|
|
|
- },
|
|
|
|
- onShow(){
|
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
|
- const {SDKVersion, version, platform} = uni.getSystemInfoSync()
|
|
|
|
- // ios wx7.0.20 createImage bug
|
|
|
|
- this.use2dCanvas = (this.type === '2d' && compareVersion(SDKVersion, '2.9.2') >= 0) && !(/ios/.test(platform) && /7.0.20/.test(version));
|
|
|
|
- // #endif
|
|
|
|
- this.posterObj1.title1=uni.getStorageSync("userInfo").nickname+'推荐给你'
|
|
|
|
- this.$request.baseRequest('admin.unimall.cardManagementInfo', 'list', {
|
|
|
|
- commonId: uni.getStorageSync("userInfo").id
|
|
|
|
- }, failres => {
|
|
|
|
- uni.hideLoading()
|
|
|
|
- uni.showToast({
|
|
|
|
- icon: "none",
|
|
|
|
- title: failres.errmsg,
|
|
|
|
- duration: 3000
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- }).then(res => {
|
|
|
|
- this.list = res.data.items
|
|
|
|
- this.cardList = [res.data.items]
|
|
|
|
- })
|
|
|
|
- },
|
|
|
|
- watch: {
|
|
|
|
- // check_idx(newVal,oldVal){
|
|
|
|
- // console.log(111,newVal);
|
|
|
|
- // console.log(222,oldVal);
|
|
|
|
- // }
|
|
|
|
- },
|
|
|
|
- methods: {
|
|
|
|
- confirm(e){
|
|
|
|
- this.titleStatus=false
|
|
|
|
- this.posterObj1.title=this.value
|
|
|
|
- },
|
|
|
|
- titleclick(){
|
|
|
|
- this.titleStatus=true
|
|
|
|
- },
|
|
|
|
- posterError(err) {
|
|
|
|
- console.log(err)
|
|
|
|
- uni.hideLoading()
|
|
|
|
- },
|
|
|
|
- posterSuccess(url) {
|
|
|
|
- console.log("hahahah", url)
|
|
|
|
- // 生成成功,会把临时路径在这里返回
|
|
|
|
- this.poster = url;
|
|
|
|
- this.posterObj1.image = url
|
|
|
|
- this.posterObj1.qrcode=this.currectData.qrCodeMyself
|
|
|
|
- console.log(url)
|
|
|
|
- this.show1 = false
|
|
|
|
- // this.show=false
|
|
|
|
- uni.hideLoading()
|
|
|
|
- },
|
|
|
|
- cardConfirm(e) {
|
|
|
|
- console.log(e)
|
|
|
|
- this.currectData = e.value[0]
|
|
|
|
- uni.showLoading({
|
|
|
|
- title: '加载中',
|
|
|
|
- mask: true
|
|
|
|
- })
|
|
|
|
- var data = [{
|
|
|
|
- type: 'image',
|
|
|
|
- path: this.currectData.currentBackground,
|
|
|
|
- use: 'bg',
|
|
|
|
- x: -24,
|
|
|
|
- y: -27,
|
|
|
|
- width: 1000,
|
|
|
|
- height: 600
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: this.currectData.headSculpture ? this.currectData.headSculpture :
|
|
|
|
- '../../static/imgs/card/defaulthead.png',
|
|
|
|
- shape: 'circle',
|
|
|
|
- use: 'head',
|
|
|
|
- imageType: this.currectData.headSculpture ? 'wl' : 'bd',
|
|
|
|
- x: 60,
|
|
|
|
- y: 60,
|
|
|
|
- width: 150,
|
|
|
|
- height: 150
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: this.currectData.name,
|
|
|
|
- use: 'name',
|
|
|
|
- x: 300,
|
|
|
|
- y: 80,
|
|
|
|
- size: 40,
|
|
|
|
- color: '#000'
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: this.currectData.post,
|
|
|
|
- use: 'post',
|
|
|
|
- x: 440,
|
|
|
|
- y: 85,
|
|
|
|
- size: 32,
|
|
|
|
- color: '#666666'
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: this.currectData.companyName,
|
|
|
|
- use: 'companyName',
|
|
|
|
- x: 300,
|
|
|
|
- y: 155,
|
|
|
|
- size: 32,
|
|
|
|
- color: '#000'
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: '../../static/imgs/card/address1.png',
|
|
|
|
- use: 'address-icon',
|
|
|
|
- x: 300,
|
|
|
|
- y: 220,
|
|
|
|
- width: 30,
|
|
|
|
- height: 40
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'textarea',
|
|
|
|
- text: this.currectData.province + this.currectData.city + this.currectData.area + this
|
|
|
|
- .currectData.detailedAddress,
|
|
|
|
- lineSpace: 1,
|
|
|
|
- width: 640,
|
|
|
|
- use: 'address',
|
|
|
|
- x: 345,
|
|
|
|
- y: 228,
|
|
|
|
- size: 28,
|
|
|
|
- color: '#000'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: '../../static/imgs/card/phone1.png',
|
|
|
|
- use: 'phone-icon',
|
|
|
|
- x: 300,
|
|
|
|
- y: 280,
|
|
|
|
- width: 32,
|
|
|
|
- height: 32
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: this.currectData.phone,
|
|
|
|
- use: 'phone',
|
|
|
|
- x: 345,
|
|
|
|
- y: 284,
|
|
|
|
- size: 28,
|
|
|
|
- color: '#000'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: '../../static/imgs/card/remark1.png',
|
|
|
|
- use: 'remark-icon',
|
|
|
|
- x: 300,
|
|
|
|
- y: 340,
|
|
|
|
- width: 26,
|
|
|
|
- height: 32
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'textarea',
|
|
|
|
- text: this.currectData.remark ? this.currectData.remark : '单击添加备注',
|
|
|
|
- use: 'remark',
|
|
|
|
- lineSpace: 2,
|
|
|
|
- width: 200,
|
|
|
|
- x: 345,
|
|
|
|
- y: 345,
|
|
|
|
- size: 26,
|
|
|
|
- color: '#000'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: '../../static/imgs/card/bg3.png',
|
|
|
|
- use: 'bg1',
|
|
|
|
- x: 0,
|
|
|
|
- y: 418,
|
|
|
|
- width: 687,
|
|
|
|
- height: 120
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: '../../static/imgs/card/bg4.png',
|
|
|
|
- use: 'bg2',
|
|
|
|
- x: 647,
|
|
|
|
- y: 418,
|
|
|
|
- width: 305,
|
|
|
|
- height: 120
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: '../../static/imgs/card/home.png',
|
|
|
|
- use: 'home',
|
|
|
|
- x: 65,
|
|
|
|
- y: 455,
|
|
|
|
- width: 55,
|
|
|
|
- height: 55
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'text',
|
|
|
|
- text: this.currectData.classifyName ? this.currectData.classifyName : '默',
|
|
|
|
- use: 'classify',
|
|
|
|
- x: 245,
|
|
|
|
- y: 460,
|
|
|
|
- size: 54,
|
|
|
|
- color: '#fff'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- type: 'image',
|
|
|
|
- path: '../../static/imgs/card/share.png',
|
|
|
|
- use: 'share',
|
|
|
|
- x: 435,
|
|
|
|
- y: 453,
|
|
|
|
- width: 66,
|
|
|
|
- height: 52
|
|
|
|
- },
|
|
|
|
- ]
|
|
|
|
- console.log(this.currectData.cuttentTemplate, 111111)
|
|
|
|
- for (var i = 0; i < data.length; i++) {
|
|
|
|
- switch (this.currectData.cuttentTemplate) {
|
|
|
|
- case '2':
|
|
|
|
- if (data[i].use === 'name' ||
|
|
|
|
- data[i].use === 'companyName' ||
|
|
|
|
- data[i].use === 'address-icon' ||
|
|
|
|
- data[i].use === 'phone-icon' ||
|
|
|
|
- data[i].use === 'remark-icon') {
|
|
|
|
- data[i].x = 30
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'post') {
|
|
|
|
- data[i].x = 100
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address' ||
|
|
|
|
- data[i].use === 'phone' ||
|
|
|
|
- data[i].use === 'remark') {
|
|
|
|
- data[i].x = 60
|
|
|
|
- }
|
|
|
|
- if (data[i].use == 'head') {
|
|
|
|
- data[i].x = 370
|
|
|
|
- }
|
|
|
|
- break;
|
|
|
|
- case '3':
|
|
|
|
- if (data[i].use === 'name') {
|
|
|
|
- data[i].x = 30
|
|
|
|
- data[i].y = 150
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'companyName') {
|
|
|
|
- data[i].x = 30
|
|
|
|
- data[i].y = 180
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'post') {
|
|
|
|
- data[i].x = 100
|
|
|
|
- data[i].y = 153
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address-icon' ||
|
|
|
|
- data[i].use === 'phone-icon' ||
|
|
|
|
- data[i].use === 'remark-icon') {
|
|
|
|
- data[i].x = 170
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address-icon') {
|
|
|
|
- data[i].y = 150
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address') {
|
|
|
|
- data[i].y = 155;
|
|
|
|
- data[i].width = 300
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'phone-icon') {
|
|
|
|
- data[i].y = 180
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'phone') {
|
|
|
|
- data[i].y = 183
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'remark-icon') {
|
|
|
|
- data[i].y = 210
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'remark') {
|
|
|
|
- data[i].y = 212
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address' ||
|
|
|
|
- data[i].use === 'phone' ||
|
|
|
|
- data[i].use === 'remark') {
|
|
|
|
- data[i].x = 190
|
|
|
|
- }
|
|
|
|
- break;
|
|
|
|
- case '4':
|
|
|
|
- if (data[i].use === 'name' ||
|
|
|
|
- data[i].use === 'companyName') {
|
|
|
|
- data[i].x = 30
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'companyName') {
|
|
|
|
- data[i].y = 90
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'post') {
|
|
|
|
- data[i].x = 100
|
|
|
|
- }
|
|
|
|
- if (data[i].use == 'head') {
|
|
|
|
- data[i].x = 25
|
|
|
|
- data[i].y = 120
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address-icon' ||
|
|
|
|
- data[i].use === 'phone-icon' ||
|
|
|
|
- data[i].use === 'remark-icon') {
|
|
|
|
- data[i].x = 170
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address') {
|
|
|
|
- data[i].width = 300
|
|
|
|
- }
|
|
|
|
- if (data[i].use === 'address' ||
|
|
|
|
- data[i].use === 'phone' ||
|
|
|
|
- data[i].use === 'remark') {
|
|
|
|
- data[i].x = 190
|
|
|
|
- }
|
|
|
|
- break;
|
|
|
|
- default:
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- this.canvasData = {
|
|
|
|
- clicknum: this.clicknum++,
|
|
|
|
- list: data
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- open() {
|
|
|
|
- // console.log('open');
|
|
|
|
- },
|
|
|
|
- close() {
|
|
|
|
- this.show = false
|
|
|
|
- // console.log('close');
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- imagechange(e){
|
|
|
|
- console.log(e,1111)
|
|
|
|
- if(e=='自定义图片'){
|
|
|
|
- uni.showActionSheet({
|
|
|
|
- itemList: ["拍照", "从手机相册选择"],
|
|
|
|
- success(res) {
|
|
|
|
- let sourceType = "camera";
|
|
|
|
- if (res.tapIndex == 0) {
|
|
|
|
- sourceType = "camera";
|
|
|
|
- } else if (res.tapIndex == 1) {
|
|
|
|
- sourceType = "album";
|
|
|
|
- }
|
|
|
|
- uni.chooseImage({
|
|
|
|
- count: 1, //最多可以选择的图片张数,默认9
|
|
|
|
- sizeType: ["original", "compressed"], //original 原图,compressed 压缩图,默认二者都有
|
|
|
|
- sourceType: [sourceType], //album 从相册选图,camera 使用相机,默认二者都有。如需直接开相机或直接选相册,请只使用一个选项
|
|
|
|
- success: function(res) {
|
|
|
|
- let tempFilePaths = res.tempFilePaths;
|
|
|
|
- that.posterObj1.image = tempFilePaths[0]
|
|
|
|
- this.posterObj1.qrcode = '../../static/imgs/qrcode.jpg'
|
|
|
|
- console.log(tempFilePaths)
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
- }
|
|
|
|
- });
|
|
|
|
-
|
|
|
|
- }else{
|
|
|
|
- if(this.list.length>0){
|
|
|
|
- this.show1=true
|
|
|
|
- }else{
|
|
|
|
- uni.showToast({
|
|
|
|
- icon: "none",
|
|
|
|
- title: '您还未创建名片',
|
|
|
|
- duration: 3000
|
|
|
|
- })
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
-
|
|
|
|
- previewImg(){
|
|
|
|
- // #ifdef H5
|
|
|
|
- return;
|
|
|
|
- // #endif
|
|
|
|
- uni.previewImage({
|
|
|
|
- current:this.path,
|
|
|
|
- urls: [this.path]
|
|
|
|
- });
|
|
|
|
- },
|
|
|
|
- closePopup(){
|
|
|
|
- this.$refs.posterImg.close();
|
|
|
|
- this.show_poster=false;
|
|
|
|
- },
|
|
|
|
- async toSave() {
|
|
|
|
- var that = this
|
|
|
|
- //写个同步方法 把所谓 高度宽度 位置 都算好
|
|
|
|
- let query = wx.createSelectorQuery();
|
|
|
|
- await query.select('.canvas-content').boundingClientRect(rect=>{
|
|
|
|
- this.height = rect.height;
|
|
|
|
- }).exec()
|
|
|
|
- await query.select('.title').boundingClientRect(rect=>{
|
|
|
|
- this.theight = rect.height;
|
|
|
|
- }).exec()
|
|
|
|
-
|
|
|
|
- setTimeout(()=>{
|
|
|
|
- var posterObj = this.$request.makeCanvasData(this.check_idx,this.height,this.posterObj1,this.theight)
|
|
|
|
- uni.showLoading({
|
|
|
|
- title:'海报生成中',
|
|
|
|
- })
|
|
|
|
- this.posterObj = posterObj
|
|
|
|
- setTimeout(()=>{
|
|
|
|
- const painter = this.$refs.painter;
|
|
|
|
- console.log(painter)
|
|
|
|
- painter.canvasToTempFilePath().then(res => {
|
|
|
|
- console.log(res.tempFilePath,'path')
|
|
|
|
- this.path = res.tempFilePath;
|
|
|
|
- this.$refs.posterImg.open();
|
|
|
|
- this.show_poster=true;
|
|
|
|
- uni.hideLoading()
|
|
|
|
- });
|
|
|
|
- },4000)
|
|
|
|
- },1000)
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- console.log(this.posterObj)
|
|
|
|
-
|
|
|
|
- console.log(this.check_idx)
|
|
|
|
- if (this.check_idx == 4) return;
|
|
|
|
- // switch (this.check_idx) {
|
|
|
|
- // case 0:
|
|
|
|
-
|
|
|
|
- // this.posterObj.background = '#fff';
|
|
|
|
- // this.posterObj.views=[
|
|
|
|
-
|
|
|
|
- // {
|
|
|
|
- // type: 'text',
|
|
|
|
- // text: this.posterObj1.title,
|
|
|
|
- // use:'title',
|
|
|
|
- // css: {
|
|
|
|
- // fontSize: '32rpx',
|
|
|
|
- // color: '#1A2033',
|
|
|
|
- // fontWeight: 'bold',
|
|
|
|
- // lineHeight: '45rpx',
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '400rpx',
|
|
|
|
- // width: '606rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'text',
|
|
|
|
- // text: this.posterObj1.title1,
|
|
|
|
- // use:'title1',
|
|
|
|
- // css: {
|
|
|
|
- // fontSize: '28rpx',
|
|
|
|
- // fontWeight: 'bold',
|
|
|
|
- // color: '#1A2033',
|
|
|
|
- // lineHeight: '28rpx',
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '515rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'text',
|
|
|
|
- // text: '长按或扫描识别二维码',
|
|
|
|
- // use:'title2',
|
|
|
|
- // css: {
|
|
|
|
- // fontSize: '24rpx',
|
|
|
|
- // color: '#4070FF',
|
|
|
|
- // lineHeight: '24rpx',
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '559rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
- // use:'dt',
|
|
|
|
- // css: {
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '34rpx',
|
|
|
|
- // width: '606rpx',
|
|
|
|
- // height: '341rpx',
|
|
|
|
- // borderRadius: '16rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
-
|
|
|
|
- // {
|
|
|
|
- // type: 'qrcode',
|
|
|
|
- // text: 'https://www.yun-live.com/',
|
|
|
|
- // css: {
|
|
|
|
- // left: '445rpx',
|
|
|
|
- // top: '500rpx',
|
|
|
|
- // width: '200rpx',
|
|
|
|
- // height: '200rpx',
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // // {
|
|
|
|
- // // type: 'text',
|
|
|
|
- // // text: '———— 由云现场提供技术支持 ————',
|
|
|
|
- // // css: {
|
|
|
|
- // // left: '0',
|
|
|
|
- // // top: '863rpx',
|
|
|
|
- // // width: '100%',
|
|
|
|
- // // textAlign: 'center',
|
|
|
|
- // // fontSize: '24rpx',
|
|
|
|
- // // color: '#989FB3',
|
|
|
|
- // // lineHeight: '33rpx'
|
|
|
|
- // // }
|
|
|
|
- // // }
|
|
|
|
- // ]
|
|
|
|
- // break;
|
|
|
|
- // case 1:
|
|
|
|
- // this.posterObj.height=(this.height*2)+'rpx'
|
|
|
|
- // this.posterObj.views=[{
|
|
|
|
- // type: 'image',
|
|
|
|
- // use:'bg',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/39ae4d9d8ad0b1acac7c224e845c641f.png',
|
|
|
|
- // css: {
|
|
|
|
- // left: '0',
|
|
|
|
- // top: '0',
|
|
|
|
- // width: '100%',
|
|
|
|
- // height: '100%'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/eb694718fa6c7b90d60a2c250847a192.jpg',
|
|
|
|
- // css: {
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '34rpx',
|
|
|
|
- // width: '606rpx',
|
|
|
|
- // height: '341rpx',
|
|
|
|
- // borderRadius: '16rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'text',
|
|
|
|
- // text: this.posterObj1.title,
|
|
|
|
- // use:'title',
|
|
|
|
- // css: {
|
|
|
|
- // fontSize: '32rpx',
|
|
|
|
- // color: '#fff',
|
|
|
|
- // fontWeight: 'bold',
|
|
|
|
- // lineHeight: '45rpx',
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '400rpx',
|
|
|
|
- // width: '606rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'text',
|
|
|
|
- // text: this.posterObj1.title1,
|
|
|
|
- // use:'title1',
|
|
|
|
- // css: {
|
|
|
|
- // fontSize: '28rpx',
|
|
|
|
- // fontWeight: 'bold',
|
|
|
|
- // color: '#D8AB87',
|
|
|
|
- // lineHeight: '28rpx',
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '515rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'text',
|
|
|
|
- // text: '长按或扫描识别二维码',
|
|
|
|
- // use:'title2',
|
|
|
|
- // css: {
|
|
|
|
- // fontSize: '24rpx',
|
|
|
|
- // color: '#FFFFFF',
|
|
|
|
- // lineHeight: '24rpx',
|
|
|
|
- // left: '32rpx',
|
|
|
|
- // top: '559rpx'
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
-
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/d88d56843d43b917e2a28550b2a62723.png',
|
|
|
|
- // css: {
|
|
|
|
- // left: '551rpx',
|
|
|
|
- // top: '111rpx',
|
|
|
|
- // width: '103rpx',
|
|
|
|
- // height: '103rpx',
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/247736ffd279276b891ec14db8ed0fd0.png',
|
|
|
|
- // css: {
|
|
|
|
- // left: '43rpx',
|
|
|
|
- // top: '432rpx',
|
|
|
|
- // width: '56.4rpx',
|
|
|
|
- // height: '56.4rpx',
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
-
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src: 'https://s.yun-live.com/images/20210201/63a9b504fb745b43b9fe5c0adef8fddb.png',
|
|
|
|
- // css: {
|
|
|
|
- // left: '50%',
|
|
|
|
- // top: '750rpx',
|
|
|
|
- // transform: 'translate(-50%,0)',
|
|
|
|
- // width: '192rpx',
|
|
|
|
- // height: '78rpx',
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'view',
|
|
|
|
- // use:'qrcode-view',
|
|
|
|
- // css: {
|
|
|
|
- // left: '445rpx',
|
|
|
|
- // top: '500rpx',
|
|
|
|
- // width: '200rpx',
|
|
|
|
- // height: '200rpx',
|
|
|
|
- // background: '#fff',
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
- // {
|
|
|
|
- // type: 'image',
|
|
|
|
- // src:this.posterObj1.qrcode,
|
|
|
|
- // use:'qrcode',
|
|
|
|
- // css: {
|
|
|
|
- // left: '455rpx',
|
|
|
|
- // top: '510rpx',
|
|
|
|
- // // transform: 'translate(-50%,0)',
|
|
|
|
- // width: '180rpx',
|
|
|
|
- // height: '180rpx',
|
|
|
|
- // }
|
|
|
|
- // },
|
|
|
|
-
|
|
|
|
- // ]
|
|
|
|
-
|
|
|
|
- // break;
|
|
|
|
- // case 2:
|
|
|
|
- // this.posterObj1.backgroundType='image'
|
|
|
|
- // this.posterObj1.background='https://s.yun-live.com/images/20210201/78f227bd701da20676c9da9166ce3144.png';
|
|
|
|
- // this.posterObj1.width='540rpx',
|
|
|
|
- // this.posterObj1.height='303rpx',
|
|
|
|
- // this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
- // this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
- // this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
- // break;
|
|
|
|
- // case 3:
|
|
|
|
- // this.posterObj1.backgroundType='image'
|
|
|
|
- // this.posterObj1.background='https://s.yun-live.com/images/20210201/524ab6a41fe8c7eb57b35df9a547d388.png';
|
|
|
|
- // this.posterObj1.width='606rpx',
|
|
|
|
- // this.posterObj1.height='341rpx',
|
|
|
|
- // this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
- // this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
- // this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
- // break;
|
|
|
|
- // default:
|
|
|
|
- // break;
|
|
|
|
- // }
|
|
|
|
- // var node = await this.layout1.calcNode(this.posterObj)
|
|
|
|
- // console.log(node,'node')
|
|
|
|
- // if(node&&node.children.length===this.posterObj.views.length){
|
|
|
|
- // for(var i=0;i<node.children.length;i++){
|
|
|
|
- // if(node.children[i].use==='title'){
|
|
|
|
- // dth=node.children[i].layoutBox.height-48
|
|
|
|
- // }
|
|
|
|
- // if(node.children[i].use==='title'||node.children[i].use==='title1'||node.children[i].use==='title2'){
|
|
|
|
- // h+=node.children[i].layoutBox.height
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- // console.log(h,h+780,'h打印')
|
|
|
|
- // for(var i=0;i<this.posterObj.views.length;i++){
|
|
|
|
- // if(this.posterObj.views[i].use==='title1'||this.posterObj.views[i].use==='title2'
|
|
|
|
- // ||this.posterObj.views[i].use==='qrcode-view'||this.posterObj.views[i].use==='qrcode'){
|
|
|
|
- // var top=this.posterObj.views[i].css.top.split('r')[0]
|
|
|
|
- // this.posterObj.views[i].css.top=(Number(top)+Number(dth*2))+'rpx'
|
|
|
|
- // }
|
|
|
|
- // }
|
|
|
|
- // this.posterObj.width='670rpx'
|
|
|
|
-
|
|
|
|
- // console.log(this.posterObj,'posterObj')
|
|
|
|
- // uni.showLoading({
|
|
|
|
- // title:'海报生成中',
|
|
|
|
- // })
|
|
|
|
- // const painter = this.$refs.painter;
|
|
|
|
- // setTimeout(()=>{
|
|
|
|
- // console.log(this.height*2,'height')
|
|
|
|
- // painter.canvasToTempFilePath().then(res => {
|
|
|
|
- // console.log(res.tempFilePath,'path')
|
|
|
|
- // this.path = res.tempFilePath;
|
|
|
|
- // this.$refs.posterImg.open();
|
|
|
|
- // this.show_poster=true;
|
|
|
|
- // uni.hideLoading()
|
|
|
|
- // });
|
|
|
|
- // },1000)
|
|
|
|
- // }
|
|
|
|
-
|
|
|
|
-
|
|
|
|
- },
|
|
|
|
- toChoose(index) {
|
|
|
|
- if (index == 4) return;
|
|
|
|
- this.check_idx = index;
|
|
|
|
- switch (index) {
|
|
|
|
- case 0:
|
|
|
|
- this.posterObj1.background='#fff';
|
|
|
|
- this.posterObj1.backgroundType='rgb'
|
|
|
|
- this.posterObj1.width='606rpx',
|
|
|
|
- this.posterObj1.height='341rpx',
|
|
|
|
- this.posterObj1.titleCssColor='#1A2033'
|
|
|
|
- this.posterObj1.title1CssColor='#1A2033'
|
|
|
|
- this.posterObj1.title2CssColor='#4070FF'
|
|
|
|
- break;
|
|
|
|
- case 1:
|
|
|
|
- this.posterObj1.backgroundType='image'
|
|
|
|
- this.posterObj1.background='https://s.yun-live.com/images/20210201/39ae4d9d8ad0b1acac7c224e845c641f.png';
|
|
|
|
- this.posterObj1.width='606rpx',
|
|
|
|
- this.posterObj1.height='341rpx',
|
|
|
|
- this.posterObj1.titleCssColor='#fff'
|
|
|
|
- this.posterObj1.title1CssColor='#D8AB87'
|
|
|
|
- this.posterObj1.title2CssColor='#fff'
|
|
|
|
- break;
|
|
|
|
- case 2:
|
|
|
|
- this.posterObj1.backgroundType='image'
|
|
|
|
- this.posterObj1.background='https://s.yun-live.com/images/20210201/78f227bd701da20676c9da9166ce3144.png';
|
|
|
|
- this.posterObj1.width='540rpx',
|
|
|
|
- this.posterObj1.height='303rpx',
|
|
|
|
- this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
- this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
- this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
- break;
|
|
|
|
- case 3:
|
|
|
|
- this.posterObj1.backgroundType='image'
|
|
|
|
- this.posterObj1.background='https://s.yun-live.com/images/20210201/524ab6a41fe8c7eb57b35df9a547d388.png';
|
|
|
|
- this.posterObj1.width='606rpx',
|
|
|
|
- this.posterObj1.height='341rpx',
|
|
|
|
- this.posterObj1.titleCssColor='#1D1D25'
|
|
|
|
- this.posterObj1.title1CssColor='#1D1D25'
|
|
|
|
- this.posterObj1.title2CssColor='#6CB37A'
|
|
|
|
- break;
|
|
|
|
- default:
|
|
|
|
- break;
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
-</script>
|
|
|
|
-
|
|
|
|
-<style lang="scss" scoped>
|
|
|
|
- page{
|
|
|
|
- background-color: #F2F4F8;
|
|
|
|
- }
|
|
|
|
- .page{
|
|
|
|
- /deep/ .uni-transition{
|
|
|
|
- background-color:rgba(0, 0, 0, 0.6)
|
|
|
|
- }
|
|
|
|
- .poster-img{
|
|
|
|
- width: 670rpx;
|
|
|
|
- height: 928rpx;
|
|
|
|
- position: relative;
|
|
|
|
- text{
|
|
|
|
- background: url('https://s.yun-live.com/images/20210201/5c4ef9d86bc5eec90f2f915683d9db08.png') no-repeat;
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
- display: inline-block;
|
|
|
|
- width: 50rpx;
|
|
|
|
- height: 50rpx;
|
|
|
|
- position: absolute;
|
|
|
|
- top: -60rpx;
|
|
|
|
- right: 0;
|
|
|
|
- }
|
|
|
|
- image{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
- view{
|
|
|
|
- font-size: 32rpx;
|
|
|
|
- font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
|
- font-weight: bold;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
- line-height: 32rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- margin-top: 28rpx;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .poster{
|
|
|
|
- padding: 24rpx 40rpx 410rpx;
|
|
|
|
-
|
|
|
|
- .footer-btn{
|
|
|
|
- margin-top: 24rpx;
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- view{
|
|
|
|
- width: 319rpx;
|
|
|
|
- height: 66rpx;
|
|
|
|
- border-radius: 40rpx;
|
|
|
|
- border: 1px solid #4070FF;
|
|
|
|
- font-size: 26rpx;
|
|
|
|
- font-family: PingFangSC-Regular, PingFang SC;
|
|
|
|
- font-weight: 400;
|
|
|
|
- color: #4070FF;
|
|
|
|
- line-height: 66rpx;
|
|
|
|
- text-align: center;
|
|
|
|
- }
|
|
|
|
- .save{
|
|
|
|
- background: #4070FF;
|
|
|
|
- color: #FFFFFF;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .poster-btn{
|
|
|
|
- position: fixed;
|
|
|
|
- bottom: 0;
|
|
|
|
- width: 100%;
|
|
|
|
- height: 364rpx;
|
|
|
|
- background: #FFFFFF;
|
|
|
|
- border-radius: 32rpx 32rpx 0px 0px;
|
|
|
|
- >.check_bg{
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: space-around;
|
|
|
|
- padding-top:25rpx;
|
|
|
|
- >view{
|
|
|
|
- width: 80rpx;
|
|
|
|
- height: 80rpx;
|
|
|
|
- position: relative;
|
|
|
|
- border-radius: 10rpx;
|
|
|
|
- border: 4rpx solid #fff;
|
|
|
|
- &.is-check{
|
|
|
|
- border: 4rpx solid #4070FF;
|
|
|
|
- }
|
|
|
|
- image{
|
|
|
|
- width: 100%;
|
|
|
|
- height: 100%;
|
|
|
|
- }
|
|
|
|
- view{
|
|
|
|
- width: 30rpx;
|
|
|
|
- height: 30rpx;
|
|
|
|
- position: absolute;
|
|
|
|
- right: -15rpx;
|
|
|
|
- bottom: -15rpx;
|
|
|
|
- background: url('https://s.yun-live.com/images/20210201/311c01265c1aa508418f6bae10d67602.png') no-repeat;
|
|
|
|
- background-size: 100% 100%;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- /deep/.u-radio{
|
|
|
|
- margin-left: 10px;
|
|
|
|
- }
|
|
|
|
- .diy_title,.diy_image{
|
|
|
|
- display: flex;
|
|
|
|
- align-items: center;
|
|
|
|
- justify-content: space-between;
|
|
|
|
- padding: 20rpx 20rpx 0;
|
|
|
|
- font-size:28rpx;
|
|
|
|
- }
|
|
|
|
- .diy_title{
|
|
|
|
- padding: 10rpx 20rpx 0;
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
- .poster{
|
|
|
|
- position:relative;
|
|
|
|
- }
|
|
|
|
- .poster .title{
|
|
|
|
- text-align:left;
|
|
|
|
- margin-top:20rpx;
|
|
|
|
- word-break: break-word;
|
|
|
|
- }
|
|
|
|
- .poster .title1{
|
|
|
|
- margin-bottom:10rpx;
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|