优化新版私域引流
This commit is contained in:
@@ -1,366 +1,432 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="boxconstant min-page">
|
<view class="boxconstant min-page">
|
||||||
<view class="bg-fff u-flex u-m-b-32 top">
|
<view class="bg-fff u-flex u-m-b-32 top">
|
||||||
<image
|
<image style="width: 60rpx; height: 60rpx" src="/pageMarket/static/images/cost.png"></image>
|
||||||
style="width: 60rpx; height: 60rpx"
|
<view class="u-flex-1 u-flex u-p-l-24">
|
||||||
src="/pageMarket/static/images/cost.png"
|
<view class="u-font-28 u-flex-1 u-p-r-4">
|
||||||
></image>
|
<view class="color-333 font-bold">私域引流</view>
|
||||||
<view class="u-flex-1 u-flex u-p-l-24">
|
<view class="color-666 u-m-t-4 u-font-24">可设置用户下单后展示的群二维码</view>
|
||||||
<view class="u-font-28 u-flex-1 u-p-r-4">
|
</view>
|
||||||
<view class="color-333 font-bold">私域引流</view>
|
<!-- <up-switch v-model="form.isEnable" size="18" :active-value="1" :inactive-value="0"></up-switch> -->
|
||||||
<view class="color-666 u-m-t-4 u-font-24"
|
</view>
|
||||||
>可设置用户下单后展示的群二维码</view
|
</view>
|
||||||
>
|
<view class="boxconstantbox" style="padding: 32rpx 0">
|
||||||
</view>
|
<view class="u-flex u-row-between x-padding">
|
||||||
<up-switch
|
<view class="boxconstantbox_one">群二维码</view>
|
||||||
v-model="form.isEnable"
|
<button class="upload" @click="uploadImage">上传</button>
|
||||||
size="18"
|
</view>
|
||||||
:active-value="1"
|
<view class="u-m-t-24 u-flex u-row-center">
|
||||||
:inactive-value="0"
|
<view class="code" @click="uploadImage">
|
||||||
></up-switch>
|
<up-icon name="plus" v-if="!form.qrCode" size="20" color="#999"></up-icon>
|
||||||
</view>
|
<image v-else style="width: 260rpx; height: 260rpx" :src="form.qrCode" mode="scaleToFill" />
|
||||||
</view>
|
</view>
|
||||||
<view class="boxconstantbox">
|
</view>
|
||||||
<view class="boxconstantbox_one"> 可使用类型 </view>
|
<view class="u-m-t-32">
|
||||||
<view class="u-m-t-16">
|
<up-line></up-line>
|
||||||
<my-dine-types v-model="form.useType"></my-dine-types>
|
</view>
|
||||||
</view>
|
<view class="u-m-t-32 u-font-28 x-padding">
|
||||||
</view>
|
<view class="boxconstantbox_one u-m-b-24">模块标题</view>
|
||||||
|
<up-input placeholderClass="u-font-28" v-model="form.title" :maxlength="20" placeholder="请输入模块标题"></up-input>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-32">
|
||||||
|
<up-line></up-line>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-32 u-font-28 x-padding">
|
||||||
|
<view class="boxconstantbox_one u-m-b-24">模块提示语</view>
|
||||||
|
<up-input placeholderClass="u-font-28" v-model="defaultNote" :maxlength="20" placeholder="请输入模块提示语" disabled></up-input>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-32">
|
||||||
|
<up-line></up-line>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-32 u-font-28 x-padding">
|
||||||
|
<view class="boxconstantbox_one u-m-b-24">模块内容</view>
|
||||||
|
<up-textarea type="textarea" :maxlength="50" placeholderClass="u-font-28" v-model="form.content" placeholder="请输入模块内容"></up-textarea>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-32">
|
||||||
|
<up-line></up-line>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-32 u-font-28 x-padding">
|
||||||
|
<view class="boxconstantbox_one u-m-b-24">支付完成弹窗</view>
|
||||||
|
<u-switch :active-value="1" :inactive-value="0" v-model="form.orderEnable"></u-switch>
|
||||||
|
</view>
|
||||||
|
<view class="boxconstantbox">
|
||||||
|
<view class="boxconstantbox_one">可使用类型</view>
|
||||||
|
<view class="u-m-t-16">
|
||||||
|
<my-dine-types v-model="form.orderType"></my-dine-types>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="u-m-t-32 u-font-28 x-padding">
|
||||||
|
<view class="boxconstantbox_one u-m-b-24">首页弹窗</view>
|
||||||
|
<u-switch :active-value="1" :inactive-value="0" v-model="form.homeEnable"></u-switch>
|
||||||
|
</view>
|
||||||
|
<view class="boxconstantbox">
|
||||||
|
<view class="boxconstantbox_one">可使用类型</view>
|
||||||
|
<view class="u-m-t-16">
|
||||||
|
<u-radio-group v-model="form.homeType">
|
||||||
|
<u-radio name="only" label="仅显示1次"></u-radio>
|
||||||
|
<u-radio name="day" label="每天显示1次"></u-radio>
|
||||||
|
<u-radio name="every" label="每次达成触发条件都显示"></u-radio>
|
||||||
|
</u-radio-group>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="x-padding u-m-t-32">
|
||||||
|
<button class="preview" @click="showPreview = true">预览</button>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<up-popup :show="showPreview" mode="center" round="16rpx" closeOnClickOverlay @close="showPreview = false" :safeAreaInsetBottom="false">
|
||||||
|
<!-- <view class="preview-box">
|
||||||
|
<view class="u-flex" style="align-items: stretch">
|
||||||
|
<view class="u-flex-1 u-p-r-24 u-flex u-flex-col" style="align-items: start; justify-content: space-between">
|
||||||
|
<view>
|
||||||
|
<view class="u-font-28 font-bold color-333">{{ form.title }}</view>
|
||||||
|
<view class="u-m-t-16 u-font-24 color-666">{{ form.content }}</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view class="boxconstantbox" style="padding: 32rpx 0">
|
<view class="color-999 u-font-24 u-m-t-16">{{ form.note }}</view>
|
||||||
<view class="u-flex u-row-between x-padding">
|
</view>
|
||||||
<view class="boxconstantbox_one"> 群二维码</view>
|
<image :src="form.qrCode" style="width: 240rpx; height: 240rpx" mode="scaleToFill"></image>
|
||||||
<button class="upload" @click="uploadImage">上传</button>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
<view class="u-m-t-24 u-flex u-row-center">
|
<view class="new_preview">
|
||||||
<view class="code" @click="uploadImage">
|
<view class="header">{{ shopInfo.shopName }}</view>
|
||||||
<up-icon
|
<view class="content">
|
||||||
name="plus"
|
<view class="title">{{ form.title }}</view>
|
||||||
v-if="!form.qrCode"
|
<view class="img_wrap">
|
||||||
size="20"
|
<image class="img" :src="form.qrCode"></image>
|
||||||
color="#999"
|
</view>
|
||||||
></up-icon>
|
<view class="intro">
|
||||||
<image
|
{{ form.content }}
|
||||||
v-else
|
</view>
|
||||||
style="width: 260rpx; height: 260rpx"
|
<view class="foot">
|
||||||
:src="form.qrCode"
|
{{ form.note }}
|
||||||
mode="scaleToFill"
|
</view>
|
||||||
/>
|
</view>
|
||||||
</view>
|
<view class="close" @click="showPreview = false">
|
||||||
</view>
|
<u-icon name="close" color="#fff" size="14"></u-icon>
|
||||||
<view class="u-m-t-32">
|
</view>
|
||||||
<up-line ></up-line>
|
</view>
|
||||||
</view>
|
</up-popup>
|
||||||
<view class="u-m-t-32 u-font-28 x-padding">
|
<my-bottom-btn-group @cancel="cancel" @save="editFreeDing"></my-bottom-btn-group>
|
||||||
<view class="boxconstantbox_one u-m-b-24"> 模块标题 </view>
|
</view>
|
||||||
<up-input
|
|
||||||
placeholderClass="u-font-28"
|
|
||||||
v-model="form.title"
|
|
||||||
:maxlength="20"
|
|
||||||
|
|
||||||
placeholder="请输入模块标题"
|
|
||||||
></up-input>
|
|
||||||
</view>
|
|
||||||
<view class="u-m-t-32">
|
|
||||||
<up-line ></up-line>
|
|
||||||
</view>
|
|
||||||
<view class="u-m-t-32 u-font-28 x-padding">
|
|
||||||
<view class="boxconstantbox_one u-m-b-24"> 模块提示语</view>
|
|
||||||
<up-input
|
|
||||||
placeholderClass="u-font-28"
|
|
||||||
v-model="form.note"
|
|
||||||
:maxlength="20"
|
|
||||||
placeholder="请输入模块提示语"
|
|
||||||
></up-input>
|
|
||||||
</view>
|
|
||||||
<view class="u-m-t-32">
|
|
||||||
<up-line ></up-line>
|
|
||||||
</view>
|
|
||||||
<view class="u-m-t-32 u-font-28 x-padding">
|
|
||||||
<view class="boxconstantbox_one u-m-b-24"> 模块内容</view>
|
|
||||||
<up-textarea
|
|
||||||
type="textarea"
|
|
||||||
:maxlength="50"
|
|
||||||
placeholderClass="u-font-28"
|
|
||||||
v-model="form.content"
|
|
||||||
placeholder="请输入模块内容"
|
|
||||||
></up-textarea>
|
|
||||||
</view>
|
|
||||||
<view class="u-m-t-32">
|
|
||||||
<up-line ></up-line>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="x-padding u-m-t-32">
|
|
||||||
<button class="preview" @click="showPreview = true">预览</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<up-popup
|
|
||||||
:show="showPreview"
|
|
||||||
mode="center"
|
|
||||||
round="16rpx"
|
|
||||||
closeOnClickOverlay
|
|
||||||
@close="showPreview = false"
|
|
||||||
:safeAreaInsetBottom="false"
|
|
||||||
>
|
|
||||||
<view class="preview-box">
|
|
||||||
<view class="u-flex" style="align-items: stretch">
|
|
||||||
<view
|
|
||||||
class="u-flex-1 u-p-r-24 u-flex u-flex-col"
|
|
||||||
style="align-items: start; justify-content: space-between"
|
|
||||||
>
|
|
||||||
<view>
|
|
||||||
<view class="u-font-28 font-bold color-333">{{
|
|
||||||
form.title
|
|
||||||
}}</view>
|
|
||||||
<view class="u-m-t-16 u-font-24 color-666">{{
|
|
||||||
form.content
|
|
||||||
}}</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="color-999 u-font-24 u-m-t-16">{{ form.note }}</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<image
|
|
||||||
:src="form.qrCode"
|
|
||||||
style="width: 240rpx; height: 240rpx"
|
|
||||||
mode="scaleToFill"
|
|
||||||
></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</up-popup>
|
|
||||||
|
|
||||||
<my-bottom-btn-group
|
|
||||||
@cancel="cancel"
|
|
||||||
@save="editFreeDing"
|
|
||||||
></my-bottom-btn-group>
|
|
||||||
</view>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { onShow, onLoad } from "@dcloudio/uni-app";
|
import { onShow, onLoad } from '@dcloudio/uni-app';
|
||||||
import { reactive, ref, watch } from "vue";
|
import { reactive, ref, watch } from 'vue';
|
||||||
import { uploadFile } from "@/http/api/index.js";
|
import { uploadFile } from '@/http/api/index.js';
|
||||||
|
import { getConfig, update } from '@/http/api/market/drainageConfig.js';
|
||||||
|
const shopInfo = ref('');
|
||||||
|
|
||||||
import { getConfig, update } from "@/http/api/market/drainageConfig.js";
|
|
||||||
const showPreview = ref(false);
|
const showPreview = ref(false);
|
||||||
|
const defaultNote = ref('如果长按不能识别，可截图或保存二维码图片至相册，通过微信扫码入群');
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
content: "",
|
id: '',
|
||||||
isEnable: 0,
|
orderType: [], // 订单页显示类型： 堂食 dine-in 外带 take-out 外卖 take-away
|
||||||
note: "长按识别，微信内扫一扫加好友",
|
homeType: '', // 首页显示类型：only 仅显示 1 次，day 每天显示一次，every 每次进入小程序
|
||||||
qrCode: "",
|
qrCode: '',
|
||||||
title: "扫码进取，优惠多多",
|
title: '',
|
||||||
useType: [],
|
content: '', //
|
||||||
});
|
note: defaultNote.value,
|
||||||
onLoad(() => {
|
orderEnable: 1, // 订单页是否开启
|
||||||
// uni.$utils.inputReg.bind()()
|
homeEnable: 1 // 首页是否开启
|
||||||
});
|
|
||||||
onShow(() => {
|
|
||||||
getlist();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 获取配置信息
|
* 获取配置信息
|
||||||
*/
|
*/
|
||||||
const getlist = async () => {
|
const getConfigAjax = async () => {
|
||||||
let res = await getConfig();
|
let res = await getConfig();
|
||||||
res.useType = res.useType || [];
|
res.useType = res.useType || [];
|
||||||
res.note=res.note||"长按识别，微信内扫一扫加好友"
|
res.note = res.note || '长按识别，微信内扫一扫加好友';
|
||||||
res.title=res.title||"扫码进取，优惠多多"
|
res.title = res.title || '扫码进取，优惠多多';
|
||||||
Object.assign(form, res);
|
Object.assign(form, res);
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 修改配置信息
|
* 修改配置信息
|
||||||
*/
|
*/
|
||||||
const editFreeDing = async () => {
|
const editFreeDing = async () => {
|
||||||
if(form.useType.length == 0){
|
if (form.orderEnable == 1 && form.orderType.length == 0) {
|
||||||
return uni.showToast({
|
return uni.showToast({
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
title: "请选择可使用类型",
|
title: '请选择可使用类型'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (!form.qrCode) {
|
if (!form.qrCode) {
|
||||||
return uni.showToast({
|
return uni.showToast({
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
title: "请上传群二维码",
|
title: '请上传群二维码'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
if (!form.title) {
|
if (!form.title) {
|
||||||
return uni.showToast({
|
return uni.showToast({
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
title: "请输入模块标题",
|
title: '请输入模块标题'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
if (form.homeEnable == 1 && form.homeType.length == 0) {
|
||||||
let res = await update(form);
|
return uni.showToast({
|
||||||
uni.showToast({
|
icon: 'none',
|
||||||
title: "保存成功",
|
title: '请选择首页显示类型'
|
||||||
});
|
});
|
||||||
Object.assign(form, res);
|
}
|
||||||
setTimeout(() => {
|
form.note = defaultNote.value;
|
||||||
uni.navigateBack();
|
let res = await update(form);
|
||||||
}, 1500);
|
uni.showToast({
|
||||||
|
title: '保存成功'
|
||||||
|
});
|
||||||
|
Object.assign(form, res);
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.navigateBack();
|
||||||
|
}, 1500);
|
||||||
};
|
};
|
||||||
|
|
||||||
function uploadImage() {
|
function uploadImage() {
|
||||||
uni.chooseImage({
|
uni.chooseImage({
|
||||||
count: 1,
|
count: 1,
|
||||||
success: (res) => {
|
success: (res) => {
|
||||||
console.log(res);
|
console.log(res);
|
||||||
uploadFile(res.tempFiles[0]).then((res) => {
|
uploadFile(res.tempFiles[0]).then((res) => {
|
||||||
if (res) {
|
if (res) {
|
||||||
form.qrCode = res;
|
form.qrCode = res;
|
||||||
} else {
|
} else {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
icon: "none",
|
icon: 'none',
|
||||||
title: "上传失败",
|
title: '上传失败'
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function cancel() {
|
function cancel() {
|
||||||
uni.navigateBack();
|
uni.navigateBack();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
shopInfo.value = uni.getStorageSync('shopInfo');
|
||||||
|
// uni.$utils.inputReg.bind()()
|
||||||
|
});
|
||||||
|
|
||||||
|
onShow(() => {
|
||||||
|
getConfigAjax();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
||||||
.x-padding {
|
.x-padding {
|
||||||
padding-left: 28rpx;
|
padding-left: 28rpx;
|
||||||
padding-right: 28rpx;
|
padding-right: 28rpx;
|
||||||
}
|
}
|
||||||
.boxconstant {
|
.boxconstant {
|
||||||
padding: 32rpx 28rpx;
|
padding: 32rpx 28rpx;
|
||||||
background: #f7f7f7;
|
background: #f7f7f7;
|
||||||
.boxconstantbox {
|
.boxconstantbox {
|
||||||
padding: 32rpx 24rpx;
|
padding: 32rpx 24rpx;
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
margin-top: 32rpx;
|
margin-top: 32rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
|
|
||||||
.boxconstantbox_one {
|
.boxconstantbox_one {
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
.boxconstantbox_tow {
|
.boxconstantbox_tow {
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
// display: flex;
|
// display: flex;
|
||||||
// justify-content: flex-start;
|
// justify-content: flex-start;
|
||||||
// align-items: center;
|
// align-items: center;
|
||||||
// flex-wrap: wrap;
|
// flex-wrap: wrap;
|
||||||
// align-content: flex-start;
|
// align-content: flex-start;
|
||||||
.text {
|
.text {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin: 0 12rpx;
|
margin: 0 12rpx;
|
||||||
width: 118rpx;
|
width: 118rpx;
|
||||||
height: 48rpx;
|
height: 48rpx;
|
||||||
line-height: 48rpx;
|
line-height: 48rpx;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
||||||
border: 2rpx solid #e5e5e5;
|
border: 2rpx solid #e5e5e5;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.oneboxconstant {
|
.oneboxconstant {
|
||||||
margin-top: 32rpx;
|
margin-top: 32rpx;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
padding: 32rpx 24rpx;
|
padding: 32rpx 24rpx;
|
||||||
|
|
||||||
.oneboxconstant_one {
|
.oneboxconstant_one {
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.save {
|
.save {
|
||||||
margin: 100rpx auto 50rpx auto;
|
margin: 100rpx auto 50rpx auto;
|
||||||
width: 530rpx;
|
width: 530rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
background: #318afe;
|
background: #318afe;
|
||||||
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
border-radius: 56rpx 56rpx 56rpx 56rpx;
|
||||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 32rpx;
|
font-size: 32rpx;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 80rpx;
|
line-height: 80rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.top {
|
.top {
|
||||||
padding: 24rpx 20rpx 28rpx 28rpx;
|
padding: 24rpx 20rpx 28rpx 28rpx;
|
||||||
}
|
}
|
||||||
.number-box {
|
.number-box {
|
||||||
width: 260rpx;
|
width: 260rpx;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
padding: 10rpx 26rpx;
|
padding: 10rpx 26rpx;
|
||||||
border-radius: 6rpx 0 0 6rpx;
|
border-radius: 6rpx 0 0 6rpx;
|
||||||
border-top: 2rpx solid #d9d9d9;
|
border-top: 2rpx solid #d9d9d9;
|
||||||
border-bottom: 2rpx solid #d9d9d9;
|
border-bottom: 2rpx solid #d9d9d9;
|
||||||
border-left: 2rpx solid #d9d9d9;
|
border-left: 2rpx solid #d9d9d9;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
}
|
}
|
||||||
.bei {
|
.bei {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 10rpx 38rpx;
|
padding: 10rpx 38rpx;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
border-radius: 0 6rpx 6rpx 0;
|
border-radius: 0 6rpx 6rpx 0;
|
||||||
border: 2rpx solid #d9d9d9;
|
border: 2rpx solid #d9d9d9;
|
||||||
background: #f7f7fa;
|
background: #f7f7fa;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
.upload {
|
.upload {
|
||||||
padding: 8rpx 32rpx;
|
padding: 8rpx 32rpx;
|
||||||
border-radius: 60rpx;
|
border-radius: 60rpx;
|
||||||
background: $my-main-color;
|
background: $my-main-color;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
.code {
|
.code {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 264rpx;
|
width: 264rpx;
|
||||||
height: 264rpx;
|
height: 264rpx;
|
||||||
padding: 108rpx;
|
padding: 108rpx;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 20rpx;
|
gap: 20rpx;
|
||||||
border: 3rpx dashed #d9d9d9;
|
border: 3rpx dashed #d9d9d9;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
padding: 2rpx;
|
padding: 2rpx;
|
||||||
}
|
}
|
||||||
.preview {
|
.preview {
|
||||||
padding: 8rpx 32rpx;
|
padding: 8rpx 32rpx;
|
||||||
border-radius: 12rpx;
|
border-radius: 12rpx;
|
||||||
background: $my-main-color;
|
background: $my-main-color;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
}
|
}
|
||||||
.preview-box {
|
.preview-box {
|
||||||
width: 700rpx;
|
width: 700rpx;
|
||||||
padding: 32rpx 28rpx;
|
padding: 32rpx 28rpx;
|
||||||
}
|
}
|
||||||
</style>
|
.new_preview {
|
||||||
|
--bg: #3f3b37;
|
||||||
|
--color: #f6dfc4;
|
||||||
|
--borderColor: #f6dfc45b;
|
||||||
|
width: 90vw;
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
.close {
|
||||||
|
--size: 70upx;
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: var(--bg);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(var(--size) * -1 - 20upx);
|
||||||
|
left: 50%;
|
||||||
|
margin-left: calc(var(--size) / 2 * -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--color);
|
||||||
|
height: 50px;
|
||||||
|
border-bottom: 1px dashed var(--borderColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
padding-bottom: 14px;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--color);
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img_wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
--size: 220px;
|
||||||
|
width: var(--size);
|
||||||
|
height: var(--size);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.intro {
|
||||||
|
height: 40px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: var(--color);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.foot {
|
||||||
|
height: 40px;
|
||||||
|
color: var(--borderColor);
|
||||||
|
font-size: 14px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 14px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user