forked from natuka/web.puabadge.com
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1045 lines
26 KiB
1045 lines
26 KiB
<script setup lang="ts"> |
|
import { useRouter } from 'vue-router' |
|
import H5Cropper from 'vue-cropper-h5' |
|
import "vue-cropper-h5/dist/style.css" |
|
import { showLoadingToast, showToast, closeToast, showFailToast, showSuccessToast } from 'vant'; |
|
import * as badgeApi from '@/api/badge' |
|
import { onMounted, ref } from 'vue'; |
|
|
|
const show = ref(false) |
|
const imgShow = ref(false) |
|
const router = useRouter() |
|
const option = ref({ |
|
autoCropWidth: 1000, |
|
autoCropHeight: 1000, |
|
}) |
|
const options = ref({ |
|
autoCropWidth: 1000, |
|
autoCropHeight: 1000, |
|
}) |
|
const imgurl = ref('') |
|
const imgBgUrl = ref('') |
|
const isBgShow = ref(true) |
|
const remaining = ref(0) |
|
function goToRecord() { |
|
router.push('/badge/record') |
|
} |
|
function goToMyOrder() { |
|
router.push('/badge/myOrder') |
|
} |
|
|
|
const sizeList = ref([]) |
|
const getSizeList = () => { |
|
badgeApi.getOrderPrice({}).then((res: any) => { |
|
sizeList.value = res |
|
}) |
|
} |
|
|
|
const orderStat = ref({}) |
|
const getOrderStat = () => { |
|
badgeApi.getOrderStat({}).then((res: any) => { |
|
orderStat.value = res |
|
}) |
|
} |
|
|
|
const isLoading = ref(false) |
|
|
|
function goToPreview() { |
|
if (isLoading.value) { |
|
return |
|
} |
|
console.log('goToPreview') |
|
if (!imgurl.value) { |
|
showToast('请先上传照片') |
|
return |
|
} |
|
if (isBgShow.value == false && !imgBgUrl.value) { |
|
showToast('请先上传背景照片') |
|
return |
|
} |
|
if (orderStat.remain_count <= 0) { |
|
showToast('剩余次数不足') |
|
return |
|
} |
|
if (checkId.value == 0) { |
|
showToast('请选择风格样式') |
|
return |
|
} |
|
isLoading.value = true |
|
getPid() |
|
} |
|
const picture = ref(null) |
|
function getbase64Data(data) { |
|
picture.value = data; |
|
} |
|
function getBlob(data) { |
|
console.log('getBlob', data) |
|
if (data.size > 1024 * 1024 * 10) { |
|
showToast('照片大小不能超过10M') |
|
return |
|
} |
|
imgurl.value = data; |
|
} |
|
const pictureBg = ref(null) |
|
function getBgbase64Data(data) { |
|
pictureBg.value = data; |
|
} |
|
function getBlobBg(data) { |
|
console.log('getBlobBg', data) |
|
if (data.size > 1024 * 1024 * 10) { |
|
showToast('照片大小不能超过10M') |
|
return |
|
} |
|
imgBgUrl.value = data; |
|
} |
|
const getRandomNumber = () => { |
|
return kindList.value.map(obj => obj.id)[Math.floor(Math.random() * kindList.value.length)]; |
|
} |
|
|
|
// 获取Pid |
|
const pid = ref('') |
|
const kindId = ref(0) |
|
const getPid = async () => { |
|
showLoadingToast({ |
|
message: '上传中...', |
|
forbidClick: true, |
|
loadingType: 'spinner', |
|
duration: 0, |
|
}) |
|
// kindId.value = checkId.value == 0 ? getRandomNumber() : checkId.value |
|
const params = { |
|
extend_value: isBgShow.value ? -1 : 0, |
|
kind_id: checkId.value, |
|
} |
|
try { |
|
const res = await badgeApi.getPid(params) |
|
console.log('getPid', res) |
|
isLoading.value = false |
|
pid.value = res.pid |
|
if (isBgShow.value) { |
|
try { |
|
const uploadTasks = [ |
|
sendToOss(imgurl.value, res.url), |
|
sendToOss(imgurl.value, res.oss_url) |
|
] |
|
await Promise.all(uploadTasks) |
|
} catch (err) { |
|
closeToast() |
|
console.error('上传失败:', err) |
|
showFailToast({ |
|
message: '上传失败', |
|
duration: 2000, |
|
}) |
|
} |
|
} else { |
|
try { |
|
const uploadTasks = [ |
|
sendToOss(imgurl.value, res.url), |
|
sendToOss(imgurl.value, res.oss_url), |
|
sendToOss(imgBgUrl.value, res.extend_url), |
|
sendToOss(imgBgUrl.value, res.extend_bg_url) |
|
] |
|
await Promise.all(uploadTasks) |
|
} catch (err) { |
|
closeToast() |
|
console.error('上传失败:', err) |
|
showFailToast({ |
|
message: '上传失败', |
|
duration: 2000, |
|
}) |
|
} |
|
} |
|
} catch (err) { |
|
isLoading.value = false |
|
closeToast() |
|
showToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
console.log(err) |
|
} finally { |
|
isLoading.value = false |
|
} |
|
} |
|
// 上传到OSS |
|
const pendingUploads = ref(0) |
|
const isAnotherAPICalled = ref(false) |
|
const sendToOss = async (src: string, url: string) => { |
|
try { |
|
pendingUploads.value++ |
|
const response = await fetch(url, { |
|
method: 'PUT', |
|
headers: { |
|
'Content-Type': 'image/jpeg' |
|
}, |
|
body: src |
|
}) |
|
|
|
if (!response.ok) { |
|
throw new Error('Upload failed') |
|
} |
|
|
|
console.log('图片上传成功--------', response) |
|
|
|
if (--pendingUploads.value === 0 && !isAnotherAPICalled.value) { |
|
const params = { |
|
pid: pid.value, |
|
kind_id: checkId.value, |
|
extend_value: isBgShow.value ? -1 : 0, |
|
group: 1, |
|
} |
|
badgeApi.putMOdeling(params).then((res: any) => { |
|
console.log('putModeling', res) |
|
createLog() |
|
}).catch((err) => { |
|
console.log('putModeling', err) |
|
}).finally(() => { |
|
closeToast() |
|
}) |
|
} |
|
|
|
} catch (err) { |
|
closeToast() |
|
pendingUploads.value-- |
|
showFailToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
console.log("uploadImage----err", err) |
|
} |
|
} |
|
const createLog = () => { |
|
const params = { |
|
pid: pid.value, |
|
group: 1, |
|
kind_id: checkId.value, |
|
} |
|
badgeApi.createLog(params).then((res: any) => { |
|
console.log('createLog', res) |
|
closeToast() |
|
showSuccessToast({ |
|
message: '照片上传成功', |
|
duration: 2000, |
|
}) |
|
setTimeout(() => { |
|
router.push({ |
|
path: '/badge/preview', |
|
query: { |
|
pid: pid.value, |
|
group: 1, |
|
}, |
|
}) |
|
}, 1000); |
|
}).catch((err) => { |
|
console.log('getGenImages', err) |
|
showFailToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
}).finally(() => { |
|
closeToast() |
|
}) |
|
} |
|
|
|
|
|
const kindList = ref([]) |
|
const checkId = ref(0) |
|
const getKindList = () => { |
|
badgeApi.getKindList({ |
|
page: 1, |
|
size: 20, |
|
scale: 20, |
|
}).then((res: any) => { |
|
const data = res || [] |
|
kindList.value = data.list |
|
}).catch((err) => { |
|
showToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
}).finally((err) => { |
|
|
|
}) |
|
} |
|
const sundryList = ref([]) |
|
const getSundryList = () => { |
|
badgeApi.getSundryList({ |
|
page: 1, |
|
size: 6, |
|
group: 'gp', |
|
}).then((res: any) => { |
|
const data = res || [] |
|
sundryList.value = data.list |
|
}).catch((err) => { |
|
showToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
}).finally((err) => { |
|
|
|
}) |
|
} |
|
const caseList = ref([]) |
|
const getList = () => { |
|
badgeApi.getSundryList({ |
|
page: 1, |
|
size: 5, |
|
group: 'case', |
|
ids: '6,7,8,9,19' |
|
}).then((res: any) => { |
|
const data = res || [] |
|
caseList.value = data.list |
|
}).catch((err) => { |
|
showToast({ |
|
message: err.message, |
|
duration: 2000, |
|
}) |
|
}).finally((err) => { |
|
|
|
}) |
|
} |
|
onMounted(() => { |
|
getKindList() |
|
getSundryList() |
|
getList() |
|
getOrderStat() |
|
getSizeList() |
|
}) |
|
</script> |
|
|
|
<template> |
|
<div class="photo-upload-page"> |
|
<div class="badge-size"> |
|
<div class="size-title"> |
|
剩余兑换数量 |
|
</div> |
|
<div class="size-options"> |
|
<div class="size-item" v-for="item in sizeList" :key="item.id"> |
|
<div class="size-text"> |
|
{{ item.size }} |
|
</div> |
|
<div class="size-count"> |
|
（剩余兑换：{{ item.remaining }}） |
|
</div> |
|
</div> |
|
<!-- <div class="size-item"> |
|
<div class="size-text"> |
|
5cm |
|
</div> |
|
<div class="size-count"> |
|
（剩余兑换：2） |
|
</div> |
|
</div> --> |
|
</div> |
|
</div> |
|
<div class="badge-info"> |
|
<div class="badge-item" @click="goToRecord"> |
|
<div class="badge-title"> |
|
设计图集 |
|
</div> |
|
<div class="badge-count"> |
|
{{ orderStat.create_count || 0 }}张 |
|
</div> |
|
</div> |
|
<div class="badge-item" @click="goToMyOrder"> |
|
<div class="badge-title"> |
|
我的订单 |
|
</div> |
|
<div class="badge-count"> |
|
{{ orderStat.order_count || 0 }}笔 |
|
</div> |
|
</div> |
|
</div> |
|
<div style="height: 8px;background: #F2F2F2;" /> |
|
<div class="step-container"> |
|
<div class="step-item active"> |
|
<div class="step-num"> |
|
1 |
|
</div> |
|
<div class="step-content"> |
|
<div class="step-title"> |
|
上传正面照片 |
|
</div> |
|
<div class="step-desc"> |
|
1张五官清晰的正面照片 |
|
</div> |
|
</div> |
|
</div> |
|
<div class="step-item"> |
|
<div class="step-num"> |
|
2 |
|
</div> |
|
<div class="step-content"> |
|
<div class="step-title"> |
|
确认下单 |
|
</div> |
|
<div class="step-desc"> |
|
选择一个你喜欢的设计 |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="photo-upload-body"> |
|
<div v-if="!picture" class="photo-upload-box"> |
|
<div class="photo-upload-header" @click="imgShow = true"> |
|
<van-icon name="question-o" size="16px" class="photo-upload-guide-icon" /> |
|
<span class="photo-upload-guide-text">图片上传指南</span> |
|
</div> |
|
<div class="photo-upload-area"> |
|
<div class="photo-upload-plus"> |
|
+ |
|
</div> |
|
<div class="photo-upload-text"> |
|
点击上传照片 |
|
</div> |
|
<div class="photo-upload-tip"> |
|
*上传照片时建议勾选[原图] |
|
</div> |
|
</div> |
|
<div class="photo-upload-footer"> |
|
请确定您对上传的照片拥有合法使用权利或已取得他人合法授权，且同意本平台分析图片信息以提供生成服务 |
|
</div> |
|
</div> |
|
<img class="photo-upload-img" v-if="picture" :src="picture" alt="" srcset=""> |
|
<div class="photo-upload-box-1"> |
|
<h5-cropper :option="option" @getbase64Data="getbase64Data" @getFile="getFile" @getblob='getBlob' ></h5-cropper> |
|
</div> |
|
</div> |
|
<div style="font-size: 12px; color: red; margin-top: 16px; text-align: center;">温馨提示：请上传只有1-2人的照片</div> |
|
<div class="style-section"> |
|
<div class="style-title"> |
|
风格样式 |
|
</div> |
|
<div class="style-list"> |
|
<!-- <div class="style-item" @click="checkId = 0"> |
|
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒"> |
|
<div class="style-label"> |
|
随机风格盲盒 |
|
</div> |
|
<span class="style-selected" v-if="checkId == 0" /> |
|
</div> --> |
|
<div class="style-item" v-for="item in kindList" :key="item.id" @click="checkId = item.id"> |
|
<img class="style-img" :src="item.path" :alt="item.name"> |
|
<div class="style-label"> |
|
{{ item.name }} |
|
</div> |
|
<span class="style-selected" v-if="item.id == checkId" /> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="bg-style-section"> |
|
<div class="bg-style-header"> |
|
<span class="bg-style-title">背景样式</span> |
|
<span class="bg-style-desc disabled" @click="show = true"> |
|
<van-icon name="question-o" size="16px" /> |
|
<span class="iconfont" style="margin-left:5px;font-size:14px;vertical-align:middle;">背景样式说明</span> |
|
</span> |
|
</div> |
|
<div class="bg-style-tabs"> |
|
<button |
|
class="bg-style-tab" :class="isBgShow == true ? 'active' : ''" |
|
type="button" @click="isBgShow = true" |
|
> |
|
照片原图背景 |
|
</button> |
|
<button |
|
class="bg-style-tab" :class="isBgShow == false ? 'active' : ''" |
|
type="button" @click="isBgShow = false" |
|
> |
|
补充背景照片 |
|
</button> |
|
</div> |
|
<div v-if="isBgShow == true" class="bg-style-tip"> |
|
选择该选项设计的徽章会根据上传的肖像照片背景进行生成效果 |
|
</div> |
|
<div v-if="isBgShow == false" class="bg-style-tip"> |
|
选择该选项需要额外上传一张照片作为背景 |
|
</div> |
|
</div> |
|
<div class="bg-photo-upload-section" v-if="isBgShow == false"> |
|
<div class="bg-photo-upload-header"> |
|
<span>补充背景照片</span> |
|
</div> |
|
<div class="bg-photo-upload-area"> |
|
<div v-if="!imgBgUrl" class="bg-photo-upload-label"> |
|
<div class="bg-photo-upload-box"> |
|
<div class="bg-photo-upload-plus">+</div> |
|
<div class="bg-photo-upload-text">上传照片</div> |
|
</div> |
|
</div> |
|
<img v-if="pictureBg" class="bg-photo-upload-img" :src="pictureBg" alt=""> |
|
<div class="bg-photo-upload-label-1"> |
|
<h5-cropper :option="options" @getbase64Data="getBgbase64Data" @getFile="getFile" @getblob='getBlobBg'></h5-cropper> |
|
</div> |
|
</div> |
|
</div> |
|
<div style="height: 90px;" /> |
|
<div class="design-action-bar"> |
|
<div class="design-left"> |
|
<img class="design-leaf-icon" width="18" height="18" src="@/assets/badge/leaf.png" alt=""> |
|
<span class="design-remaining">剩余{{ orderStat.remain_count || 0 }}次</span> |
|
</div> |
|
<button class="design-btn" @click="goToPreview"> |
|
<span>开始设计</span> |
|
<img class="design-arrow" src="@/assets/badge/arrow.png" alt=""> |
|
</button> |
|
</div> |
|
</div> |
|
<van-action-sheet v-model:show="show" title="背景样式说明" :close-on-click-overlay="true" closeable> |
|
<div style="padding: 24px 16px;"> |
|
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;"> |
|
照片自有背景 |
|
</div> |
|
<div style="font-size: 12px; color: #888; margin-bottom: 12px;"> |
|
选择该选项设计的徽章会根据上传的人像照片背景进行生成效果 |
|
</div> |
|
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 24px;"> |
|
<img :src="caseList[2].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;"> |
|
<span style="font-size: 24px; color: #bbb; margin-right: 12px;"> |
|
<van-icon name="arrow" /> |
|
</span> |
|
<img :src="caseList[3].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;"> |
|
</div> |
|
<div style="font-weight: bold; font-size: 15px; margin-bottom: 4px;"> |
|
补充背景照片 |
|
</div> |
|
<div style="font-size: 12px; color: #888; margin-bottom: 12px;"> |
|
选择该选项需要额外上传一张照片作为背景 |
|
</div> |
|
<div style="display: flex; align-items: center; justify-content: center; margin-bottom: 12px;"> |
|
<img :src="caseList[0].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover; margin-right: 12px;"> |
|
<span style="font-size: 24px; color: #bbb; margin-right: 12px;"> |
|
<van-icon name="plus" /> |
|
</span> |
|
<img :src="caseList[1].path" style="width: 90px; height: 90px; border-radius: 12px; object-fit: cover;"> |
|
</div> |
|
<div style="font-size: 24px; color: #bbb;text-align: center;"> |
|
<van-icon name="arrow-down" /> |
|
</div> |
|
<div style="display: flex; align-items: center; justify-content: center; margin-top: 12px;"> |
|
<img :src="caseList[4].path" style="width: 120px; height: 120px; border-radius: 16px; object-fit: cover;"> |
|
</div> |
|
<div style="margin-top: 32px; text-align: center;"> |
|
<button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="show = false"> |
|
我已了解 |
|
</button> |
|
</div> |
|
</div> |
|
</van-action-sheet> |
|
|
|
<van-action-sheet v-model:show="imgShow" title="图片上传指南" :close-on-click-overlay="true" closeable> |
|
<div style="padding: 0 16px 24px 16px;"> |
|
<div style="text-align: center;"> |
|
<img :src="sundryList[0].path" alt="照片上传指南" style="width: 90vw; border-radius: 16px; margin-bottom: 16px;"> |
|
</div> |
|
<div style="display: flex; justify-content: space-between; margin-bottom: 16px;"> |
|
<div style="flex: 1; text-align: center;"> |
|
<img :src="sundryList[1].path" alt="多主体" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> |
|
<div style="font-size: 13px; color: #888; margin-top: 4px;"> |
|
多主体 |
|
</div> |
|
</div> |
|
<div style="flex: 1; text-align: center;"> |
|
<img :src="sundryList[2].path" alt="光线昏暗" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> |
|
<div style="font-size: 13px; color: #888; margin-top: 4px;"> |
|
光线昏暗 |
|
</div> |
|
</div> |
|
<div style="flex: 1; text-align: center;"> |
|
<img :src="sundryList[3].path" alt="后侧面及背影" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> |
|
<div style="font-size: 13px; color: #888; margin-top: 4px;"> |
|
后侧面及背影 |
|
</div> |
|
</div> |
|
</div> |
|
<div style="display: flex; justify-content: space-around; margin-bottom: 24px;"> |
|
<div style="flex: 1; text-align: center;"> |
|
<img :src="sundryList[4].path" alt="照片模糊" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> |
|
<div style="font-size: 13px; color: #888; margin-top: 4px;"> |
|
照片模糊 |
|
</div> |
|
</div> |
|
<div style="flex: 1; text-align: center;"> |
|
<img :src="sundryList[5].path" alt="照片留白过少" style="width: 25vw; height: 25vw; border-radius: 8px; object-fit: cover;"> |
|
<div style="font-size: 13px; color: #888; margin-top: 4px;"> |
|
照片留白过少 |
|
</div> |
|
</div> |
|
</div> |
|
<div style="margin-top: 24px; text-align: center;"> |
|
<button style="width: 90%; height: 44px; background: linear-gradient(90deg, #d6f5b7 0%, #50cf54 100%); border: none; border-radius: 22px; color: #222; font-size: 18px; font-weight: bold; cursor: pointer;" @click="imgShow = false"> |
|
我已了解 |
|
</button> |
|
</div> |
|
</div> |
|
</van-action-sheet> |
|
</template> |
|
|
|
<style scoped> |
|
.photo-upload-page { |
|
height: auto; |
|
overflow-y: scroll!important; |
|
} |
|
.badge-size { |
|
padding: 16px; |
|
.size-title { |
|
font-size: 14px; |
|
color: #000; |
|
} |
|
.size-options { |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
margin-top: 8px; |
|
.size-item:last-child { |
|
margin-left: 5px; |
|
} |
|
.size-item { |
|
flex: 1; |
|
.size-text { |
|
font-size: 14px; |
|
color: #333; |
|
text-align: center; |
|
padding: 4px 10px; |
|
background: #F0F2F5; |
|
border-radius: 4px; |
|
margin-right: 5px; |
|
display: inline-block; |
|
} |
|
.size-count { |
|
font-size: 12px; |
|
color: #999; |
|
display: inline-block; |
|
} |
|
} |
|
} |
|
} |
|
.badge-info { |
|
display: flex; |
|
justify-content: space-between; |
|
padding: 0 16px 16px 16px; |
|
.badge-item:first-child { |
|
background-image: url('@/assets/badge/sheji.png'); |
|
background-size: cover; |
|
background-position: center; |
|
margin-right: 5px; |
|
} |
|
.badge-item:last-child { |
|
background-image: url('@/assets/badge/order.png'); |
|
background-size: cover; |
|
background-position: center; |
|
margin-left: 5px; |
|
} |
|
.badge-item { |
|
padding: 18px 12px; |
|
flex: 1; |
|
text-align: left; |
|
cursor: pointer; |
|
height: 88px; |
|
.badge-title { |
|
font-size: 16px; |
|
color: #000; |
|
font-weight: bold; |
|
} |
|
.badge-count { |
|
font-size: 15px; |
|
color: #333; |
|
font-weight: bold; |
|
margin-top: 8px; |
|
} |
|
} |
|
} |
|
.step-container { |
|
display: flex; |
|
align-items: flex-start; |
|
padding: 16px 0 16px 16px; |
|
} |
|
.step-item { |
|
display: flex; |
|
align-items: center; |
|
flex: 1; |
|
overflow: hidden; |
|
white-space: nowrap; |
|
text-overflow: ellipsis; |
|
} |
|
.step-item.active { |
|
flex: 2; |
|
margin-left: 50px; |
|
} |
|
.step-num { |
|
font-size: 48px; |
|
line-height: 1; |
|
position: relative; |
|
margin-right: 8px; |
|
text-shadow: 0 2px 8px #e6f7e6; |
|
color: #CCCCCC; |
|
} |
|
.step-item.active .step-num { |
|
color: #fff; |
|
text-shadow: |
|
1px 1px 0 #000, |
|
-1px -1px 0 #000, |
|
-1px 1px 0 #000, |
|
1px -1px 0 #000, |
|
0 1px 0 #000, |
|
1px 0 0 #000, |
|
0 -1px 0 #000, |
|
-1px 0 0 #000; |
|
} |
|
.step-item.active .step-num::after { |
|
content: ''; |
|
position: absolute; |
|
top: 20px; |
|
right: 0; |
|
width: 15px; |
|
height: 15px; |
|
background-color: #50cf54; |
|
opacity: 0.5; |
|
border-radius: 50%; |
|
} |
|
.step-content { |
|
display: flex; |
|
flex-direction: column; |
|
} |
|
.step-title { |
|
font-size: 16px; |
|
color: #808080;; |
|
} |
|
.step-desc { |
|
font-size: 12px; |
|
color: #808080; |
|
margin-top: 2px; |
|
} |
|
|
|
.photo-upload-body { |
|
position: relative; |
|
width: 80vw; |
|
height: 80vw; |
|
margin: 16px auto 0 auto; |
|
} |
|
.photo-upload-box { |
|
margin: 16px auto 0 auto; |
|
width: 80vw; |
|
height: 80vw; |
|
border-radius: 12px; |
|
background: #F0F2F5; |
|
position: relative; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
box-sizing: border-box; |
|
} |
|
.photo-upload-box-1 { |
|
width: 80vw; |
|
height: 70vw; |
|
border-radius: 12px; |
|
/* background: #F0F2F5; */ |
|
background: rgba(0, 0, 0, 0); |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
right: 0; |
|
} |
|
.photo-upload-img { |
|
width: 80vw; |
|
height: 80vw; |
|
border-radius: 12px; |
|
} |
|
.photo-upload-header { |
|
width: 100%; |
|
display: flex; |
|
align-items: center; |
|
padding: 12px 16px 0 12px; |
|
font-size: 14px; |
|
color: #888; |
|
justify-content: flex-end; |
|
} |
|
.photo-upload-guide-icon { |
|
font-size: 16px; |
|
margin-right: 4px; |
|
} |
|
.photo-upload-guide-text { |
|
font-size: 13px; |
|
} |
|
.photo-upload-area { |
|
flex: 1; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
user-select: none; |
|
} |
|
.photo-upload-plus { |
|
font-size: 48px; |
|
color: #c2c2c2; |
|
margin-bottom: 8px; |
|
} |
|
.photo-upload-text { |
|
font-size: 16px; |
|
color: #888; |
|
margin-bottom: 4px; |
|
} |
|
.photo-upload-tip { |
|
font-size: 12px; |
|
color: #b0b0b0; |
|
} |
|
.photo-upload-footer { |
|
position: absolute; |
|
bottom: 10px; |
|
left: 0; |
|
width: 100%; |
|
text-align: center; |
|
font-size: 12px; |
|
color: #b0b0b0; |
|
padding: 0 12px; |
|
line-height: 1.5; |
|
} |
|
|
|
.style-section { |
|
margin: 16px 0 0 0; |
|
padding: 0 16px; |
|
} |
|
.style-title { |
|
font-size: 16px; |
|
color: #222; |
|
font-weight: bold; |
|
margin-bottom: 12px; |
|
} |
|
.style-list { |
|
display: flex; |
|
gap: 10px; |
|
justify-content: flex-start; |
|
align-items: flex-start; |
|
overflow-x: scroll; |
|
scrollbar-width: none; /* Firefox */ |
|
-ms-overflow-style: none; /* IE and Edge */ |
|
} |
|
.style-list::-webkit-scrollbar { |
|
display: none; /* Chrome, Safari, Opera */ |
|
} |
|
.style-item { |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
cursor: pointer; |
|
position: relative; |
|
width: 25vw; |
|
} |
|
.style-img { |
|
width: 23vw; |
|
height: 23vw; |
|
border-radius: 8px; |
|
border: 2px solid transparent; |
|
object-fit: cover; |
|
transition: border 0.2s; |
|
} |
|
.style-item .style-selected { |
|
position: absolute; |
|
right: 4px; |
|
bottom: 30px; |
|
width: 20px; |
|
height: 20px; |
|
background: #50cf54; |
|
border-radius: 50%; |
|
border: 2px solid #fff; |
|
display: inline-block; |
|
box-shadow: 0 2px 8px rgba(80, 207, 84, 0.2); |
|
} |
|
.style-item .style-selected::after { |
|
content: ''; |
|
display: block; |
|
width: 10px; |
|
height: 6px; |
|
border-left: 2px solid #fff; |
|
border-bottom: 2px solid #fff; |
|
position: absolute; |
|
left: 4px; |
|
top: 5px; |
|
transform: rotate(-45deg); |
|
} |
|
.style-item .style-label { |
|
margin-top: 8px; |
|
font-size: 14px; |
|
color: #333; |
|
text-align: center; |
|
white-space: nowrap; |
|
} |
|
.style-item:hover .style-img, |
|
.style-item .style-selected ~ .style-img { |
|
border: 2px solid #50cf54; |
|
} |
|
|
|
.bg-style-section { |
|
margin: 24px 0 0 0; |
|
padding: 0 16px; |
|
} |
|
.bg-style-header { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
margin-bottom: 12px; |
|
} |
|
.bg-style-title { |
|
font-size: 16px; |
|
color: #000; |
|
font-weight: bold; |
|
margin-right: 8px; |
|
} |
|
.bg-style-desc { |
|
font-size: 13px; |
|
color: #808080; |
|
display: flex; |
|
align-items: center; |
|
cursor: not-allowed; |
|
} |
|
.bg-style-desc.disabled { |
|
opacity: 0.6; |
|
} |
|
.bg-style-tabs { |
|
display: flex; |
|
gap: 10px; |
|
margin-bottom: 8px; |
|
} |
|
.bg-style-tab { |
|
padding: 6px 18px; |
|
border: none; |
|
border-radius: 18px; |
|
background: #f0f2f5; |
|
color: #333; |
|
font-size: 12px; |
|
cursor: pointer; |
|
outline: none; |
|
transition: background 0.2s, color 0.2s; |
|
} |
|
.bg-style-tab.active { |
|
background: #e6f7e6; |
|
color: #22c55e; |
|
font-weight: bold; |
|
} |
|
.bg-style-tab:disabled { |
|
background: #f0f2f5; |
|
color: #b0b0b0; |
|
cursor: not-allowed; |
|
} |
|
.bg-style-tip { |
|
font-size: 13px; |
|
color: #888; |
|
margin-top: 4px; |
|
} |
|
.bg-photo-upload-section { |
|
margin: 24px 0 0 0; |
|
padding: 0 16px; |
|
} |
|
.bg-photo-upload-header { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
font-size: 16px; |
|
font-weight: bold; |
|
color: #222; |
|
margin-bottom: 12px; |
|
} |
|
.bg-photo-upload-area { |
|
display: flex; |
|
align-items: center; |
|
position: relative; |
|
} |
|
.bg-photo-upload-label { |
|
display: inline-block; |
|
} |
|
.bg-photo-upload-label-1 { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
width: 120px; |
|
height: 120px; |
|
background: none; |
|
} |
|
.bg-photo-upload-box { |
|
width: 120px; |
|
height: 120px; |
|
border: 2px dashed #b0b0b0; |
|
border-radius: 12px; |
|
display: flex; |
|
flex-direction: column; |
|
align-items: center; |
|
justify-content: center; |
|
cursor: pointer; |
|
background: #fafafa; |
|
transition: border 0.2s; |
|
} |
|
.bg-photo-upload-img { |
|
width: 120px; |
|
height: 120px; |
|
border-radius: 12px; |
|
} |
|
.bg-photo-upload-plus { |
|
font-size: 32px; |
|
color: #b0b0b0; |
|
margin-bottom: 8px; |
|
} |
|
.bg-photo-upload-text { |
|
font-size: 16px; |
|
color: #888; |
|
} |
|
|
|
.design-action-bar { |
|
display: flex; |
|
align-items: center; |
|
justify-content: space-between; |
|
padding: 16px; |
|
background: #fff; |
|
position: fixed; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
z-index: 10; |
|
} |
|
.design-left { |
|
display: flex; |
|
align-items: center; |
|
} |
|
.design-leaf-icon { |
|
margin-right: 4px; |
|
vertical-align: middle; |
|
} |
|
.design-remaining { |
|
color: #222; |
|
font-size: 16px; |
|
font-weight: 500; |
|
} |
|
.design-btn { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
border: none; |
|
outline: none; |
|
cursor: pointer; |
|
width: 50vw; |
|
height: 56px; |
|
border-radius: 28px; |
|
font-size: 20px; |
|
font-weight: bold; |
|
background: linear-gradient(90deg, #D1ED8E 0%, #55E668 100%); |
|
color: #222; |
|
box-shadow: 0 2px 8px rgba(80, 207, 84, 0.10); |
|
transition: background 0.2s; |
|
} |
|
.design-btn .design-arrow { |
|
margin-left: 20px; |
|
vertical-align: middle; |
|
position: absolute; |
|
right: 30px; |
|
transition: transform 0.2s; |
|
width: 18px; |
|
height: 12px; |
|
} |
|
.btndiv { |
|
position: fixed; |
|
bottom: 10vh; |
|
width: 80%; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
} |
|
</style>
|
|
|