初始化
This commit is contained in:
落日晚风
@@ -0,0 +1,157 @@
|
||||
<!-- 页面 -->
|
||||
<template>
|
||||
<su-popup :show="show" round="10" @close="onClosePoster" type="center" class="popup-box">
|
||||
<view class="ss-flex-col ss-col-center ss-row-center">
|
||||
<view
|
||||
v-if="poster.src === ''"
|
||||
class="poster-title ss-flex ss-row-center"
|
||||
:style="{
|
||||
height: poster.height + 'px',
|
||||
width: poster.width + 'px',
|
||||
}"
|
||||
>
|
||||
海报加载中...
|
||||
</view>
|
||||
<image
|
||||
v-else
|
||||
class="poster-img"
|
||||
:src="poster.src"
|
||||
:style="{
|
||||
height: poster.height + 'px',
|
||||
width: poster.width + 'px',
|
||||
}"
|
||||
:show-menu-by-longpress="true"
|
||||
></image>
|
||||
<canvas
|
||||
class="hideCanvas"
|
||||
:canvas-id="poster.canvasId"
|
||||
:id="poster.canvasId"
|
||||
:style="{
|
||||
height: poster.height + 'px',
|
||||
width: poster.width + 'px',
|
||||
}"
|
||||
/>
|
||||
<view
|
||||
class="poster-btn-box ss-m-t-20 ss-flex ss-row-between ss-col-center"
|
||||
v-if="poster.src != ''"
|
||||
>
|
||||
<button class="cancel-btn ss-reset-button" @tap="onClosePoster">取消</button>
|
||||
<button class="save-btn ss-reset-button ui-BG-Main" @tap="onSavePoster">
|
||||
{{
|
||||
['wechatOfficialAccount', 'H5'].includes(sheep.$platform.name)
|
||||
? '长按图片保存'
|
||||
: '保存图片'
|
||||
}}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, getCurrentInstance } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import useCanvas from './useCanvas';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
|
||||
const poster = reactive({
|
||||
canvasId: 'canvasId',
|
||||
width: sheep.$platform.device.windowWidth * 0.9,
|
||||
height: 600,
|
||||
src: '',
|
||||
});
|
||||
|
||||
const emits = defineEmits(['success', 'close']);
|
||||
const vm = getCurrentInstance();
|
||||
const onClosePoster = () => {
|
||||
emits('close');
|
||||
};
|
||||
const onSavePoster = () => {
|
||||
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
|
||||
sheep.$helper.toast('请长按图片保存');
|
||||
return;
|
||||
}
|
||||
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: poster.src,
|
||||
success: (res) => {
|
||||
onClosePoster();
|
||||
sheep.$helper.toast('保存成功');
|
||||
},
|
||||
fail: (err) => {
|
||||
sheep.$helper.toast('保存失败');
|
||||
console.log('图片保存失败:', err);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
async function getPoster(params) {
|
||||
poster.src = '';
|
||||
|
||||
poster.shareInfo = props.shareInfo;
|
||||
// #ifdef APP-PLUS
|
||||
poster.canvasId = 'canvasId-' + new Date().getTime();
|
||||
// #endif
|
||||
const canvas = await useCanvas(poster, vm);
|
||||
return canvas;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
getPoster,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.popup-box {
|
||||
position: relative;
|
||||
}
|
||||
.poster-title {
|
||||
color: #999;
|
||||
}
|
||||
// 分享海报
|
||||
.poster-btn-box {
|
||||
width: 600rpx;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
bottom: -80rpx;
|
||||
.cancel-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
background: $white;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: $dark-9;
|
||||
}
|
||||
.save-btn {
|
||||
width: 240rpx;
|
||||
height: 70rpx;
|
||||
line-height: 70rpx;
|
||||
border-radius: 35rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.poster-img {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
.hideCanvas {
|
||||
position: fixed;
|
||||
top: -99999rpx;
|
||||
left: -99999rpx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,121 @@
|
||||
import sheep from '@/sheep';
|
||||
import { formatImageUrlProtocol } from './index';
|
||||
|
||||
const goods = (poster) => {
|
||||
const width = poster.width;
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
|
||||
return {
|
||||
background: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.goods_bg)),
|
||||
list: [
|
||||
{
|
||||
name: 'nickname',
|
||||
type: 'text',
|
||||
val: userInfo.nickname,
|
||||
x: width * 0.22,
|
||||
y: width * 0.06,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#333',
|
||||
font: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'sans-serif',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'avatar',
|
||||
type: 'image',
|
||||
val: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
x: width * 0.04,
|
||||
y: width * 0.04,
|
||||
width: width * 0.14,
|
||||
height: width * 0.14,
|
||||
d: width * 0.14,
|
||||
},
|
||||
{
|
||||
name: 'goodsImage',
|
||||
type: 'image',
|
||||
val: formatImageUrlProtocol(poster.shareInfo.poster.image),
|
||||
x: width * 0.03,
|
||||
y: width * 0.21,
|
||||
width: width * 0.94,
|
||||
height: width * 0.94,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
name: 'goodsTitle',
|
||||
type: 'text',
|
||||
val: poster.shareInfo.poster.title,
|
||||
x: width * 0.04,
|
||||
y: width * 1.18,
|
||||
maxWidth: width * 0.91,
|
||||
line: 2,
|
||||
lineHeight: 5,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#333',
|
||||
font: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'goodsPrice',
|
||||
type: 'text',
|
||||
val: '￥' + poster.shareInfo.poster.price,
|
||||
x: width * 0.04,
|
||||
y: width * 1.3,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#ff0000',
|
||||
font: {
|
||||
fontSize: 20,
|
||||
fontFamily: 'OPPOSANS',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'goodsOriginalPrice',
|
||||
type: 'text',
|
||||
val:
|
||||
poster.shareInfo.poster.original_price > 0
|
||||
? '￥' + poster.shareInfo.poster.original_price
|
||||
: '',
|
||||
x: width * 0.3,
|
||||
y: width * 1.32,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#999',
|
||||
font: {
|
||||
fontSize: 10,
|
||||
fontFamily: 'OPPOSANS',
|
||||
},
|
||||
},
|
||||
textDecoration: {
|
||||
line: 'line-through',
|
||||
style: 'solide',
|
||||
},
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
name: 'qrcode',
|
||||
type: 'qrcode',
|
||||
val: poster.shareInfo.link,
|
||||
x: width * 0.75,
|
||||
y: width * 1.3,
|
||||
size: width * 0.2,
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
name: 'wxacode',
|
||||
type: 'image',
|
||||
val: sheep.$api.third.wechat.getWxacode(poster.shareInfo.path),
|
||||
x: width * 0.75,
|
||||
y: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
// #endif
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
export default goods;
|
||||
@@ -0,0 +1,114 @@
|
||||
import sheep from '@/sheep';
|
||||
import { formatImageUrlProtocol } from './index';
|
||||
|
||||
const groupon = (poster) => {
|
||||
const width = poster.width;
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
|
||||
return {
|
||||
background: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.groupon_bg)),
|
||||
list: [
|
||||
{
|
||||
name: 'nickname',
|
||||
type: 'text',
|
||||
val: userInfo.nickname,
|
||||
x: width * 0.22,
|
||||
y: width * 0.06,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#333',
|
||||
font: {
|
||||
fontSize: 16,
|
||||
fontFamily: 'sans-serif',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'avatar',
|
||||
type: 'image',
|
||||
val: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
x: width * 0.04,
|
||||
y: width * 0.04,
|
||||
width: width * 0.14,
|
||||
height: width * 0.14,
|
||||
d: width * 0.14,
|
||||
},
|
||||
{
|
||||
name: 'goodsImage',
|
||||
type: 'image',
|
||||
val: formatImageUrlProtocol(poster.shareInfo.poster.image),
|
||||
x: width * 0.03,
|
||||
y: width * 0.21,
|
||||
width: width * 0.94,
|
||||
height: width * 0.94,
|
||||
r: 10,
|
||||
},
|
||||
{
|
||||
name: 'goodsTitle',
|
||||
type: 'text',
|
||||
val: poster.shareInfo.poster.title,
|
||||
x: width * 0.04,
|
||||
y: width * 1.18,
|
||||
maxWidth: width * 0.91,
|
||||
line: 2,
|
||||
lineHeight: 5,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#333',
|
||||
font: {
|
||||
fontSize: 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'goodsPrice',
|
||||
type: 'text',
|
||||
val: '￥' + poster.shareInfo.poster.price,
|
||||
x: width * 0.04,
|
||||
y: width * 1.3,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#ff0000',
|
||||
font: {
|
||||
fontSize: 20,
|
||||
fontFamily: 'OPPOSANS',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'grouponNum',
|
||||
type: 'text',
|
||||
val: '2人团',
|
||||
x: width * 0.3,
|
||||
y: width * 1.32,
|
||||
paintbrushProps: {
|
||||
fillStyle: '#ff0000',
|
||||
font: {
|
||||
fontSize: 10,
|
||||
fontFamily: 'OPPOSANS',
|
||||
},
|
||||
},
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
name: 'qrcode',
|
||||
type: 'qrcode',
|
||||
val: poster.shareInfo.link,
|
||||
x: width * 0.75,
|
||||
y: width * 1.3,
|
||||
size: width * 0.2,
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
name: 'wxacode',
|
||||
type: 'image',
|
||||
val: sheep.$api.third.wechat.getWxacode(poster.shareInfo.path),
|
||||
x: width * 0.75,
|
||||
y: width * 1.3,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
},
|
||||
// #endif
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
export default groupon;
|
||||
@@ -0,0 +1,32 @@
|
||||
import user from './user';
|
||||
import goods from './goods';
|
||||
import groupon from './groupon';
|
||||
|
||||
export function getPosterData(options) {
|
||||
switch (options.shareInfo.poster.type) {
|
||||
case 'user':
|
||||
return user(options);
|
||||
case 'goods':
|
||||
return goods(options);
|
||||
case 'groupon':
|
||||
return groupon(options);
|
||||
}
|
||||
}
|
||||
|
||||
export function formatImageUrlProtocol(url) {
|
||||
// #ifdef H5
|
||||
// H5平台 https协议下需要转换
|
||||
if (window.location.protocol === 'https:' && url.indexOf('http:') === 0) {
|
||||
url = url.replace('http:', 'https:');
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 小程序平台 需要强制转换为https协议
|
||||
if (url.indexOf('http:') === 0) {
|
||||
url = url.replace('http:', 'https:');
|
||||
}
|
||||
// #endif
|
||||
|
||||
return url;
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import sheep from '@/sheep';
|
||||
import { formatImageUrlProtocol } from './index';
|
||||
|
||||
const user = (poster) => {
|
||||
const width = poster.width;
|
||||
const userInfo = sheep.$store('user').userInfo;
|
||||
|
||||
return {
|
||||
background: formatImageUrlProtocol(sheep.$url.cdn(sheep.$store('app').platform.share.posterInfo.user_bg)),
|
||||
list: [
|
||||
{
|
||||
name: 'nickname',
|
||||
type: 'text',
|
||||
val: userInfo.nickname,
|
||||
x: width / 2,
|
||||
y: width * 0.4,
|
||||
paintbrushProps: {
|
||||
textAlign: 'center',
|
||||
fillStyle: '#333',
|
||||
font: {
|
||||
fontSize: 14,
|
||||
fontFamily: 'sans-serif',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'avatar',
|
||||
type: 'image',
|
||||
val: formatImageUrlProtocol(sheep.$url.cdn(userInfo.avatar)),
|
||||
x: width * 0.4,
|
||||
y: width * 0.16,
|
||||
width: width * 0.2,
|
||||
height: width * 0.2,
|
||||
d: width * 0.2,
|
||||
},
|
||||
// #ifndef MP-WEIXIN
|
||||
{
|
||||
name: 'qrcode',
|
||||
type: 'qrcode',
|
||||
val: poster.shareInfo.link,
|
||||
x: width * 0.35,
|
||||
y: width * 0.84,
|
||||
size: width * 0.3,
|
||||
},
|
||||
// #endif
|
||||
// #ifdef MP-WEIXIN
|
||||
{
|
||||
name: 'wxacode',
|
||||
type: 'image',
|
||||
val: sheep.$api.third.wechat.getWxacode(poster.shareInfo.path),
|
||||
x: width * 0.35,
|
||||
y: width * 0.84,
|
||||
width: width * 0.3,
|
||||
height: width * 0.3,
|
||||
},
|
||||
// #endif
|
||||
],
|
||||
};
|
||||
};
|
||||
|
||||
export default user;
|
||||
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* Shopro + qs-canvas 绘制海报
|
||||
* @version 1.0.0
|
||||
* @author lidongtony
|
||||
* @param {Object} options - 海报参数
|
||||
* @param {Object} vm - 自定义组件实例
|
||||
*/
|
||||
|
||||
import sheep from '@/sheep';
|
||||
import QSCanvas from 'qs-canvas';
|
||||
import { getPosterData } from './poster';
|
||||
|
||||
export default async function useCanvas(options, vm) {
|
||||
const width = options.width;
|
||||
const qsc = new QSCanvas(
|
||||
{
|
||||
canvasId: options.canvasId,
|
||||
width: options.width,
|
||||
height: options.height,
|
||||
setCanvasWH: (canvas) => {
|
||||
options.height = canvas.height;
|
||||
},
|
||||
},
|
||||
vm,
|
||||
);
|
||||
|
||||
let drawer = getPosterData(options);
|
||||
|
||||
// 绘制背景图
|
||||
const background = await qsc.drawImg({
|
||||
type: 'image',
|
||||
val: drawer.background,
|
||||
x: 0,
|
||||
y: 0,
|
||||
width,
|
||||
mode: 'widthFix',
|
||||
zIndex: 0,
|
||||
});
|
||||
await qsc.updateCanvasWH({
|
||||
width: background.width,
|
||||
height: background.bottom,
|
||||
});
|
||||
|
||||
let list = drawer.list;
|
||||
|
||||
for (let i = 0; i < list.length; i++) {
|
||||
let item = list[i];
|
||||
// 绘制文字
|
||||
if (item.type === 'text') {
|
||||
await qsc.drawText(item);
|
||||
}
|
||||
// 绘制图片
|
||||
if (item.type === 'image') {
|
||||
if (item.d) {
|
||||
qsc.setCircle({
|
||||
x: item.x,
|
||||
y: item.y,
|
||||
d: item.d,
|
||||
clip: true,
|
||||
});
|
||||
}
|
||||
|
||||
if (item.r) {
|
||||
qsc.setRect({
|
||||
x: item.x,
|
||||
y: item.y,
|
||||
height: item.height,
|
||||
width: item.width,
|
||||
r: item.r,
|
||||
clip: true,
|
||||
});
|
||||
}
|
||||
await qsc.drawImg(item);
|
||||
qsc.restore();
|
||||
}
|
||||
|
||||
// 绘制二维码
|
||||
if (item.type === 'qrcode') {
|
||||
await qsc.drawQrCode(item);
|
||||
}
|
||||
}
|
||||
|
||||
await qsc.draw();
|
||||
// 延迟执行, 防止不稳定
|
||||
setTimeout(async () => {
|
||||
options.src = await qsc.toImage();
|
||||
}, 100);
|
||||
return options;
|
||||
}
|
||||
@@ -0,0 +1,201 @@
|
||||
<template>
|
||||
<!-- 分享弹框 -->
|
||||
<view>
|
||||
<su-popup :show="state.showShareGuide" :showClose="false" @close="onCloseGuide"></su-popup>
|
||||
<view v-if="state.showShareGuide" class="guide-wrap">
|
||||
<image
|
||||
class="guide-image"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_guide.png')"
|
||||
></image>
|
||||
</view>
|
||||
|
||||
<su-popup :show="show" round="10" :showClose="false" @close="closeShareModal">
|
||||
<!-- 分享tools -->
|
||||
<view class="share-box">
|
||||
<view class="share-list-box ss-flex">
|
||||
<button
|
||||
v-if="shareConfig.methods.includes('forward')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
open-type="share"
|
||||
@tap="onShareByForward"
|
||||
>
|
||||
<image
|
||||
class="share-img"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_wx.png')"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="share-title">微信好友</text>
|
||||
</button>
|
||||
<button
|
||||
v-if="shareConfig.methods.includes('poster')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
@tap="onShareByPoster"
|
||||
>
|
||||
<image
|
||||
class="share-img"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_poster.png')"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="share-title">生成海报</text>
|
||||
</button>
|
||||
|
||||
<button
|
||||
v-if="shareConfig.methods.includes('link')"
|
||||
class="share-item share-btn ss-flex-col ss-col-center"
|
||||
@tap="onShareByCopyLink"
|
||||
>
|
||||
<image
|
||||
class="share-img"
|
||||
:src="sheep.$url.static('/static/img/shop/share/share_link.png')"
|
||||
mode=""
|
||||
></image>
|
||||
<text class="share-title">复制链接</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="share-foot ss-flex ss-row-center ss-col-center" @tap="closeShareModal">
|
||||
取消
|
||||
</view>
|
||||
</view>
|
||||
</su-popup>
|
||||
<!-- 分享海报 -->
|
||||
<canvas-poster
|
||||
ref="SharePosterRef"
|
||||
:show="state.showPosterModal"
|
||||
:shareInfo="shareInfo"
|
||||
@close="state.showPosterModal = false"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
/**
|
||||
* 分享弹窗
|
||||
*/
|
||||
import { ref, unref, reactive, computed } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import canvasPoster from './canvas-poster/index.vue';
|
||||
import { showShareModal, closeShareModal, showAuthModal } from '@/sheep/hooks/useModal';
|
||||
|
||||
const show = computed(() => sheep.$store('modal').share);
|
||||
const shareConfig = computed(() => sheep.$store('app').platform.share);
|
||||
const SharePosterRef = ref('');
|
||||
|
||||
const props = defineProps({
|
||||
shareInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
showShareGuide: false, //H5的指引。
|
||||
showPosterModal: false, //海报弹窗
|
||||
});
|
||||
|
||||
// 生成海报分享
|
||||
const onShareByPoster = () => {
|
||||
closeShareModal();
|
||||
if (!sheep.$store('user').isLogin) {
|
||||
showAuthModal();
|
||||
return;
|
||||
}
|
||||
unref(SharePosterRef).getPoster();
|
||||
state.showPosterModal = true;
|
||||
};
|
||||
|
||||
// 直接转发分享
|
||||
const onShareByForward = () => {
|
||||
closeShareModal();
|
||||
|
||||
// #ifdef H5
|
||||
if (['WechatOfficialAccount', 'H5'].includes(sheep.$platform.name)) {
|
||||
state.showShareGuide = true;
|
||||
return;
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
uni.share({
|
||||
provider: 'weixin',
|
||||
scene: 'WXSceneSession',
|
||||
type: 0,
|
||||
href: props.shareInfo.link,
|
||||
title: props.shareInfo.title,
|
||||
summary: props.shareInfo.desc,
|
||||
imageUrl: props.shareInfo.image,
|
||||
success: (res) => {
|
||||
console.log('success:' + JSON.stringify(res));
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log('fail:' + JSON.stringify(err));
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
|
||||
// 复制链接分享
|
||||
const onShareByCopyLink = () => {
|
||||
sheep.$helper.copyText(props.shareInfo.link);
|
||||
closeShareModal();
|
||||
};
|
||||
|
||||
function onCloseGuide() {
|
||||
state.showShareGuide = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.guide-image {
|
||||
right: 30rpx;
|
||||
top: 0;
|
||||
position: fixed;
|
||||
width: 580rpx;
|
||||
height: 430rpx;
|
||||
z-index: 10080;
|
||||
}
|
||||
|
||||
// 分享tool
|
||||
.share-box {
|
||||
background: $white;
|
||||
width: 750rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
padding-top: 30rpx;
|
||||
|
||||
.share-foot {
|
||||
font-size: 24rpx;
|
||||
color: $gray-b;
|
||||
height: 80rpx;
|
||||
border-top: 1rpx solid $gray-e;
|
||||
}
|
||||
|
||||
.share-list-box {
|
||||
.share-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.share-item {
|
||||
flex: 1;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.share-img {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
background: $gray-f;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.share-title {
|
||||
font-size: 24rpx;
|
||||
color: $dark-6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user