[商品分享微信好友和朋友圈处理邀请码和商品id]
This commit is contained in:
@@ -7,27 +7,29 @@
|
||||
<view class="code-lay" @click="coverCode"></view>
|
||||
<image class="code-back-image" :src="item.cover" mode="aspectFill"></image>
|
||||
<view class="codDate">
|
||||
<view class="codDate-year">
|
||||
{{item.date.solar.month}}
|
||||
</view>
|
||||
<view class="codDate-day">
|
||||
{{item.date.solar.day}}
|
||||
</view>
|
||||
<view class="codDate-lunar">
|
||||
{{item.date.lunar}}
|
||||
</view>
|
||||
<view class="codDate-year">
|
||||
{{item.date.solar.month}}
|
||||
</view>
|
||||
<view class="codDate-day">
|
||||
{{item.date.solar.day}}
|
||||
</view>
|
||||
<view class="codDate-lunar">
|
||||
{{item.date.lunar}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="codeCont">
|
||||
<image class="codeCont-avatar" :src="item.user_info.avatar ? item.user_info.avatar : '/static/user/user-portrait.png'" mode="aspectFill"></image>
|
||||
<view class="codeCont-text">
|
||||
<view class="codeCont-name">
|
||||
{{item.user_info.nickname}}
|
||||
</view>
|
||||
<view class="codeCont-number">
|
||||
邀请码：{{item.invite}}
|
||||
</view>
|
||||
</view>
|
||||
<image class="codeCont-img" :src="item.code" mode="widthFix"></image>
|
||||
<image class="codeCont-avatar"
|
||||
:src="item.user_info.avatar ? item.user_info.avatar : '/static/user/user-portrait.png'"
|
||||
mode="aspectFill"></image>
|
||||
<view class="codeCont-text">
|
||||
<view class="codeCont-name">
|
||||
{{item.user_info.nickname}}
|
||||
</view>
|
||||
<view class="codeCont-number">
|
||||
邀请码：{{item.invite}}
|
||||
</view>
|
||||
</view>
|
||||
<image class="codeCont-img" :src="item.code" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
@@ -37,454 +39,495 @@
|
||||
<view class="hith">朋友通过你的邀请注册成功后，将与您绑定好友关系通过成为平台用户，你都可以获得贡献值奖励。</view>
|
||||
<view class="number">
|
||||
<view class="title">邀请码 : {{inviteData[0].invite}}</view>
|
||||
<view class="value" @click="copyCenter(inviteData[0].invite)">复制邀请码</view>
|
||||
<view class="value" @click="copyCenter(inviteData[0].invite)">复制邀请码</view>
|
||||
</view>
|
||||
<!-- <view class="button" @click="coverCode">生成分享海报</view> -->
|
||||
</view>
|
||||
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas"/>
|
||||
<view v-if="posterShow">
|
||||
<view class="posterBack"></view>
|
||||
<view class="poster">
|
||||
<view class="poster-img">
|
||||
<image class="img" :src="posterImg" mode="widthFix" />
|
||||
</view>
|
||||
<view class="poster-btn">
|
||||
<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
|
||||
<view class="operate" @tap="posterShow = false">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<canvas class="my-canvas" canvas-id="myCanvas" id="myCanvas" />
|
||||
<view v-if="posterShow">
|
||||
<view class="posterBack"></view>
|
||||
<view class="poster">
|
||||
<view class="poster-img">
|
||||
<image class="img" :src="posterImg" mode="widthFix" />
|
||||
</view>
|
||||
<view class="poster-btn">
|
||||
<view class="operate operate-cancel" @click="saveImage">保存图片至相册</view>
|
||||
<view class="operate" @tap="posterShow = false">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { userInvite } from '@/apis/interfaces/user'
|
||||
import { saveImageToPhotosAlbum, showToast, downloadFile } from '@/uni_modules/sakura-canvas/js_sdk/util'
|
||||
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
|
||||
let draw = null
|
||||
import {
|
||||
userInvite
|
||||
} from '@/apis/interfaces/user'
|
||||
import {
|
||||
saveImageToPhotosAlbum,
|
||||
showToast,
|
||||
downloadFile
|
||||
} from '@/uni_modules/sakura-canvas/js_sdk/util'
|
||||
import Draw from '@/uni_modules/sakura-canvas/js_sdk/draw'
|
||||
let draw = null
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
Popinvite : {}, //下载海报数据
|
||||
inviteData: [] ,//二维码信息
|
||||
codeIndex : 0,
|
||||
posterImg : '',
|
||||
defaultImg: '',
|
||||
loaded : false,
|
||||
posterShow: false
|
||||
Popinvite: {}, //下载海报数据
|
||||
inviteData: [], //二维码信息
|
||||
codeIndex: 0,
|
||||
posterImg: '',
|
||||
defaultImg: '',
|
||||
loaded: false,
|
||||
posterShow: false
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
// 获取二维码
|
||||
this.inviteInfo()
|
||||
},
|
||||
async created() {},
|
||||
methods:{
|
||||
// 二维码
|
||||
inviteInfo(){
|
||||
userInvite().then(res => {
|
||||
this.loaded = true
|
||||
this.inviteData = res
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 生成海报
|
||||
async coverCode(){
|
||||
let img = this.inviteData[this.codeIndex].code
|
||||
let back = this.inviteData[this.codeIndex].cover
|
||||
let name = this.inviteData[this.codeIndex].user_info.nickname
|
||||
let invite = this.inviteData[this.codeIndex].invite
|
||||
let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png'
|
||||
let date = this.inviteData[this.codeIndex].date
|
||||
draw = new Draw({
|
||||
width: 375,
|
||||
height: 667,
|
||||
canvasId:'myCanvas',
|
||||
_this: this,
|
||||
background: {
|
||||
type: 'color',
|
||||
color: 'white',
|
||||
w: 375,
|
||||
h: 667,
|
||||
},
|
||||
})
|
||||
let res = await draw.createdSharePoster(({ bgObj }) => {
|
||||
let { width, height } = bgObj
|
||||
this.Popinvite = bgObj
|
||||
// 绘制内容
|
||||
return [
|
||||
// 背景
|
||||
{
|
||||
type: 'image',
|
||||
x: 0,
|
||||
y: 0,
|
||||
src: back,
|
||||
w: 375,
|
||||
h: 667,
|
||||
zIndex: 0,
|
||||
},
|
||||
|
||||
// 日历-边框
|
||||
{
|
||||
type: 'rect',
|
||||
x: 280,
|
||||
y: 10,
|
||||
w: 60, // 宽度 必填
|
||||
h: 80, // 高度 必填
|
||||
zIndex: 99,
|
||||
isFill: false, // 是否是填充矩形, false: 线性矩形
|
||||
lineWidth: 1 ,// 当矩形为线性时，矩形的边框宽度
|
||||
color: '#ffffff',
|
||||
},
|
||||
|
||||
// 日历-线条
|
||||
{
|
||||
type: 'line',
|
||||
zIndex: 99,
|
||||
x: 280,
|
||||
y: 62,
|
||||
w: 60, // 宽度 默认整个画布的宽度 - x轴的距离
|
||||
color: '#ffffff', // 颜色 默认#000000 在不考虑字节跳动小程序的前提下可简写(#000)
|
||||
alpha: 1, // 透明度 默认1 取值范围 0~1
|
||||
lineType: 'solid', // 线条类型 默认 solid: 实线 可选 dashed: 虚线
|
||||
lineWidth: 1, // 线条高度
|
||||
lineCap: 'butt' // 线条端点样式 默认 butt 可选 round, square
|
||||
},
|
||||
|
||||
// 日历-年月
|
||||
{
|
||||
type: 'text',
|
||||
x: 284,
|
||||
y: 18,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: date.solar.month,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
|
||||
// 日历-日
|
||||
{
|
||||
type: 'text',
|
||||
x: 298,
|
||||
y: 40,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: date.solar.day,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 18,
|
||||
weight: 'bold'
|
||||
}
|
||||
},
|
||||
|
||||
// 日历-农历日期
|
||||
{
|
||||
type: 'text',
|
||||
x: 282,
|
||||
y: 70,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: date.lunar,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
|
||||
// 用户昵称
|
||||
{
|
||||
type: 'text',
|
||||
x: 86,
|
||||
y: 600,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: name,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
|
||||
// 邀请码
|
||||
{
|
||||
type: 'text',
|
||||
x: 86,
|
||||
y: 628,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: '邀请码：' + invite,
|
||||
color: '#c4a1cb',
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
|
||||
// 用户头像
|
||||
{
|
||||
type: 'image',
|
||||
x: 24,
|
||||
y: 598,
|
||||
src: avatar,
|
||||
w: 46,
|
||||
h: 46,
|
||||
drawType: 'arc',
|
||||
zIndex: 99,
|
||||
borderWidth: 5, // 图片边框大小 默认0
|
||||
borderColor: '#ffffff' // 图片边框颜色 默认无颜色
|
||||
},
|
||||
|
||||
// 二维码
|
||||
{
|
||||
type: 'image',
|
||||
x: 280,
|
||||
y: 585,
|
||||
w: 72,
|
||||
h: 72,
|
||||
zIndex: 99,
|
||||
src: img
|
||||
}
|
||||
]
|
||||
})
|
||||
if (!res.success) return
|
||||
this.posterImg = res.data
|
||||
this.posterShow = true
|
||||
onLoad() {
|
||||
// 获取二维码
|
||||
this.inviteInfo()
|
||||
},
|
||||
async created() {},
|
||||
methods: {
|
||||
// 二维码
|
||||
inviteInfo() {
|
||||
userInvite().then(res => {
|
||||
this.loaded = true
|
||||
this.inviteData = res
|
||||
}).catch(err => {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: err.message
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// 保存图片
|
||||
async saveImage() {
|
||||
let { posterImg } = this
|
||||
let res = await saveImageToPhotosAlbum(posterImg)
|
||||
if (!res.success) return
|
||||
showToast('保存成功,去相册分享给朋友吧')
|
||||
this.posterShow = false
|
||||
},
|
||||
|
||||
// 复制邀请码
|
||||
copyCenter(e) {
|
||||
|
||||
// 生成海报
|
||||
async coverCode() {
|
||||
let img = this.inviteData[this.codeIndex].code
|
||||
let back = this.inviteData[this.codeIndex].cover
|
||||
let name = this.inviteData[this.codeIndex].user_info.nickname
|
||||
let invite = this.inviteData[this.codeIndex].invite
|
||||
let avatar = this.inviteData[this.codeIndex].user_info.avatar || '/static/user/user-portrait.png'
|
||||
let date = this.inviteData[this.codeIndex].date
|
||||
draw = new Draw({
|
||||
width: 375,
|
||||
height: 667,
|
||||
canvasId: 'myCanvas',
|
||||
_this: this,
|
||||
background: {
|
||||
type: 'color',
|
||||
color: 'white',
|
||||
w: 375,
|
||||
h: 667,
|
||||
},
|
||||
})
|
||||
let res = await draw.createdSharePoster(({
|
||||
bgObj
|
||||
}) => {
|
||||
let {
|
||||
width,
|
||||
height
|
||||
} = bgObj
|
||||
this.Popinvite = bgObj
|
||||
// 绘制内容
|
||||
return [
|
||||
// 背景
|
||||
{
|
||||
type: 'image',
|
||||
x: 0,
|
||||
y: 0,
|
||||
src: back,
|
||||
w: 375,
|
||||
h: 667,
|
||||
zIndex: 0,
|
||||
},
|
||||
|
||||
// 日历-边框
|
||||
{
|
||||
type: 'rect',
|
||||
x: 280,
|
||||
y: 10,
|
||||
w: 60, // 宽度 必填
|
||||
h: 80, // 高度 必填
|
||||
zIndex: 99,
|
||||
isFill: false, // 是否是填充矩形, false: 线性矩形
|
||||
lineWidth: 1, // 当矩形为线性时，矩形的边框宽度
|
||||
color: '#ffffff',
|
||||
},
|
||||
|
||||
// 日历-线条
|
||||
{
|
||||
type: 'line',
|
||||
zIndex: 99,
|
||||
x: 280,
|
||||
y: 62,
|
||||
w: 60, // 宽度 默认整个画布的宽度 - x轴的距离
|
||||
color: '#ffffff', // 颜色 默认#000000 在不考虑字节跳动小程序的前提下可简写(#000)
|
||||
alpha: 1, // 透明度 默认1 取值范围 0~1
|
||||
lineType: 'solid', // 线条类型 默认 solid: 实线 可选 dashed: 虚线
|
||||
lineWidth: 1, // 线条高度
|
||||
lineCap: 'butt' // 线条端点样式 默认 butt 可选 round, square
|
||||
},
|
||||
|
||||
// 日历-年月
|
||||
{
|
||||
type: 'text',
|
||||
x: 284,
|
||||
y: 18,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: date.solar.month,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
|
||||
// 日历-日
|
||||
{
|
||||
type: 'text',
|
||||
x: 298,
|
||||
y: 40,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: date.solar.day,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 18,
|
||||
weight: 'bold'
|
||||
}
|
||||
},
|
||||
|
||||
// 日历-农历日期
|
||||
{
|
||||
type: 'text',
|
||||
x: 282,
|
||||
y: 70,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: date.lunar,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
|
||||
// 用户昵称
|
||||
{
|
||||
type: 'text',
|
||||
x: 86,
|
||||
y: 600,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: name,
|
||||
color: '#ffffff',
|
||||
font: {
|
||||
size: 16
|
||||
}
|
||||
},
|
||||
|
||||
// 邀请码
|
||||
{
|
||||
type: 'text',
|
||||
x: 86,
|
||||
y: 628,
|
||||
zIndex: 99,
|
||||
w: width - (20 * 2),
|
||||
text: '邀请码：' + invite,
|
||||
color: '#c4a1cb',
|
||||
font: {
|
||||
size: 14
|
||||
}
|
||||
},
|
||||
|
||||
// 用户头像
|
||||
{
|
||||
type: 'image',
|
||||
x: 24,
|
||||
y: 598,
|
||||
src: avatar,
|
||||
w: 46,
|
||||
h: 46,
|
||||
drawType: 'arc',
|
||||
zIndex: 99,
|
||||
borderWidth: 5, // 图片边框大小 默认0
|
||||
borderColor: '#ffffff' // 图片边框颜色 默认无颜色
|
||||
},
|
||||
|
||||
// 二维码
|
||||
{
|
||||
type: 'image',
|
||||
x: 280,
|
||||
y: 585,
|
||||
w: 72,
|
||||
h: 72,
|
||||
zIndex: 99,
|
||||
src: img
|
||||
}
|
||||
]
|
||||
})
|
||||
if (!res.success) return
|
||||
this.posterImg = res.data
|
||||
this.posterShow = true
|
||||
},
|
||||
|
||||
// 保存图片
|
||||
async saveImage() {
|
||||
let {
|
||||
posterImg
|
||||
} = this
|
||||
let res = await saveImageToPhotosAlbum(posterImg)
|
||||
if (!res.success) return
|
||||
showToast('保存成功,去相册分享给朋友吧')
|
||||
this.posterShow = false
|
||||
},
|
||||
|
||||
// 复制邀请码
|
||||
copyCenter(e) {
|
||||
console.log(e)
|
||||
// e.slice(0,2) + '$InviTaTiOn$CoDe/$-?' + e.substring(2)
|
||||
uni.setClipboardData({
|
||||
data: e,
|
||||
success(){
|
||||
success() {
|
||||
uni.showToast({
|
||||
title: '邀请码已复制',
|
||||
icon : 'none'
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 切换海报背景index
|
||||
swiperChange(e) {
|
||||
this.codeIndex = e.detail.current
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 切换海报背景index
|
||||
swiperChange(e) {
|
||||
this.codeIndex = e.detail.current
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content{
|
||||
.content {
|
||||
background: white;
|
||||
padding: $padding 0;
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
min-height: 100vh;
|
||||
@extend .vertical;
|
||||
}
|
||||
|
||||
// 轮播
|
||||
.code{
|
||||
.code {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top: calc(183% - 280rpx - #{$padding * 2});
|
||||
.code-swiper{
|
||||
|
||||
.code-swiper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.code-item{
|
||||
|
||||
.code-item {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 0 $padding/2;
|
||||
.code-lay{
|
||||
|
||||
.code-lay {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 10;
|
||||
}
|
||||
.code-back-image{
|
||||
|
||||
.code-back-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 提示信息
|
||||
.footer{
|
||||
.footer {
|
||||
padding: 0 $padding + 10;
|
||||
.hith{
|
||||
|
||||
.hith {
|
||||
color: $text-gray;
|
||||
font-size: $title-size-sm;
|
||||
padding-top: $padding + 10;
|
||||
padding-top: $padding + 10;
|
||||
}
|
||||
.number {
|
||||
background-color: $border-color-lg;
|
||||
padding: $padding - 5;
|
||||
margin: $margin + 20 0;
|
||||
font-size: $title-size-lg;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
.title {
|
||||
flex: 1;
|
||||
}
|
||||
.value {
|
||||
font-size: $title-size-m;
|
||||
color: $text-price;
|
||||
}
|
||||
}
|
||||
.button {
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.number {
|
||||
background-color: $border-color-lg;
|
||||
padding: $padding - 5;
|
||||
margin: $margin + 20 0;
|
||||
font-size: $title-size-lg;
|
||||
border-radius: 8rpx;
|
||||
display: flex;
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: $title-size-m;
|
||||
color: $text-price;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
background: $text-price;
|
||||
border-radius: 0;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
font-size: $title-size;
|
||||
color: white;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
// number
|
||||
// title
|
||||
// value
|
||||
// button
|
||||
// title
|
||||
}
|
||||
|
||||
// 头像昵称
|
||||
.codeCont {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 16rpx 30rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
.codeCont-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
}
|
||||
.codeCont-text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 14rpx 40rpx 0 140rpx;
|
||||
box-sizing: border-box;
|
||||
.codeCont-name {
|
||||
color: #FFFFFF;
|
||||
font-size: $title-size;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
.codeCont-number {
|
||||
font-size: $title-size-sm;
|
||||
display: flex;
|
||||
color: #c4a1cb;
|
||||
}
|
||||
}
|
||||
.codeCont-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 头像昵称
|
||||
.codeCont {
|
||||
position: absolute;
|
||||
left: 10rpx;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 16rpx 30rpx 20rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 9;
|
||||
|
||||
.codeCont-avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #FFFFFF;
|
||||
}
|
||||
|
||||
.codeCont-text {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
padding: 14rpx 40rpx 0 140rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.codeCont-name {
|
||||
color: #FFFFFF;
|
||||
font-size: $title-size;
|
||||
margin-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.codeCont-number {
|
||||
font-size: $title-size-sm;
|
||||
display: flex;
|
||||
color: #c4a1cb;
|
||||
}
|
||||
}
|
||||
|
||||
.codeCont-img {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
position: absolute;
|
||||
right: 50rpx;
|
||||
bottom: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 日历
|
||||
.codDate {
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
right: 70rpx;
|
||||
z-index: 9;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid #fffefc;
|
||||
.codDate-year {
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
.codDate-day {
|
||||
padding: 5rpx 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border-bottom: 2rpx solid #a980c6;
|
||||
}
|
||||
.codDate-lunar {
|
||||
font-size: 24rpx;
|
||||
transform: scale(.9);
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
// canvas
|
||||
.my-canvas{
|
||||
width: 375px;
|
||||
height: 667px;
|
||||
position: fixed;
|
||||
top: -99999999999rpx;
|
||||
left: -99999999999rpx;
|
||||
z-index: -99999999999;
|
||||
opacity: 0;
|
||||
}
|
||||
.posterBack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background-color: rgba(0,0,0,.7);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.poster{
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
&-img{
|
||||
width: 580rpx;
|
||||
position: relative;
|
||||
margin: 70rpx auto 20rpx;
|
||||
.img{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
&-btn{
|
||||
padding: 0 $padding * 2;
|
||||
.operate {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
&-cancel{
|
||||
background-color: $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.codDate {
|
||||
position: absolute;
|
||||
top: 15rpx;
|
||||
right: 70rpx;
|
||||
z-index: 9;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
font-size: 24rpx;
|
||||
border: 2rpx solid #fffefc;
|
||||
|
||||
.codDate-year {
|
||||
padding-top: 5rpx;
|
||||
}
|
||||
|
||||
.codDate-day {
|
||||
padding: 5rpx 0;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
border-bottom: 2rpx solid #a980c6;
|
||||
}
|
||||
|
||||
.codDate-lunar {
|
||||
font-size: 24rpx;
|
||||
transform: scale(.9);
|
||||
padding: 4rpx 0;
|
||||
}
|
||||
}
|
||||
|
||||
// canvas
|
||||
.my-canvas {
|
||||
width: 375px;
|
||||
height: 667px;
|
||||
position: fixed;
|
||||
top: -99999999999rpx;
|
||||
left: -99999999999rpx;
|
||||
z-index: -99999999999;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.posterBack {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.poster {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 9;
|
||||
|
||||
&-img {
|
||||
width: 580rpx;
|
||||
position: relative;
|
||||
margin: 70rpx auto 20rpx;
|
||||
|
||||
.img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&-btn {
|
||||
padding: 0 $padding * 2;
|
||||
|
||||
.operate {
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
&-cancel {
|
||||
background-color: $text-price;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user