forked from natuka/web.puabadge.com
Initial commit
This commit is contained in:
natuka committed
commit
84061c9a18
243 files changed
+63148
No files matched your search
@@ -0,0 +1,707 @@
|
||||
<template>
|
||||
<div class="photo-upload-page">
|
||||
<div class="badge-size">
|
||||
<div class="size-title">剩余兑换数量</div>
|
||||
<div class="size-options">
|
||||
<div class="size-item">
|
||||
<div class="size-text">4cm</div>
|
||||
<div class="size-count">（剩余兑换：1）</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">8张</div>
|
||||
</div>
|
||||
<div class="badge-item" @click="goToMyOrder">
|
||||
<div class="badge-title">我的订单</div>
|
||||
<div class="badge-count">3笔</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 8px;background: #F2F2F2;"></div>
|
||||
<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-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" @click="onUploadClick">
|
||||
<!-- <cropper selWidth="660rpx" selHeight="660rpx" @upload="myUpload" :avatarSrc="imgurl" avatarStyle="width:100vw;height:100vw;">
|
||||
<img v-if="imgurl" :src="imgurl" class="photo-upload-image" alt="上传的照片" />
|
||||
<div v-else class="photo-upload-placeholder">
|
||||
<span class="photo-upload-plus">+</span>
|
||||
<span class="photo-upload-text">点击上传照片</span>
|
||||
</div>
|
||||
</cropper> -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
<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>
|
||||
<div class="style-section">
|
||||
<div class="style-title">风格样式</div>
|
||||
<div class="style-list">
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒" />
|
||||
<div class="style-label">随机风格盲盒</div>
|
||||
<span class="style-selected"></span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫" />
|
||||
<div class="style-label">Q版国风动漫</div>
|
||||
<span class="style-selected"></span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通" />
|
||||
<div class="style-label">Q版卡通</div>
|
||||
<span class="style-selected"></span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风" />
|
||||
<div class="style-label">芭比风</div>
|
||||
<span class="style-selected"></span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="随机风格盲盒" />
|
||||
<div class="style-label">随机风格盲盒</div>
|
||||
<span class="style-selected"></span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版国风动漫" />
|
||||
<div class="style-label">Q版国风动漫</div>
|
||||
<span class="style-selected"></span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="Q版卡通" />
|
||||
<div class="style-label">Q版卡通</div>
|
||||
<span class="style-selected"></span>
|
||||
</div>
|
||||
<div class="style-item">
|
||||
<img class="style-img" src="@/assets/badge/suiji.png" alt="芭比风" />
|
||||
<div class="style-label">芭比风</div>
|
||||
<span class="style-selected"></span>
|
||||
</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 active"
|
||||
type="button"
|
||||
>
|
||||
照片原图背景
|
||||
</button>
|
||||
<button
|
||||
class="bg-style-tab"
|
||||
type="button"
|
||||
disabled
|
||||
>
|
||||
补充背景照片
|
||||
</button>
|
||||
</div>
|
||||
<div class="bg-style-tip">
|
||||
选择该选项设计的徽章会根据上传的肖像照片背景进行生成效果
|
||||
</div>
|
||||
<div class="bg-style-tip">
|
||||
选择该选项需要额外上传一张照片作为背景
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-photo-upload-section">
|
||||
<div class="bg-photo-upload-header">
|
||||
<span>补充背景照片</span>
|
||||
</div>
|
||||
<div class="bg-photo-upload-area">
|
||||
<label class="bg-photo-upload-label">
|
||||
<input type="file" accept="image/*" style="display:none" />
|
||||
<div class="bg-photo-upload-box">
|
||||
<div class="bg-photo-upload-plus">+</div>
|
||||
<div class="bg-photo-upload-text">上传照片</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height: 90px;"></div>
|
||||
<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">剩余12次</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="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" alt="照片上传指南" style="width: 220px; border-radius: 16px; margin-bottom: 16px;" />
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: center; margin-bottom: 16px;">
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">光线均匀</span>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">照片清晰</span>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">主体明确</span>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">面部特征明显</span>
|
||||
<span style="background: #e6f7e6; color: #22c55e; border-radius: 8px; padding: 2px 10px; font-size: 13px;">预留充足留白</span>
|
||||
</div>
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" 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-between; margin-bottom: 24px;">
|
||||
<div style="flex: 1; text-align: center;">
|
||||
<img src="@/assets/badge/suiji.png" 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="@/assets/badge/suiji.png" 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>
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import cropper from "./cropper.vue";
|
||||
const show = ref(false);
|
||||
const imgShow = ref(false);
|
||||
const router = useRouter();
|
||||
const imgurl = ref(''); //头像地址
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
function onUploadClick() {
|
||||
if (fileInput.value) {
|
||||
fileInput.value.click();
|
||||
}
|
||||
}
|
||||
function myUpload(rsp) {
|
||||
const self = this;
|
||||
self.imgurl = rsp.path; //更新头像方式一
|
||||
}
|
||||
function goToRecord() {
|
||||
router.push('/badge/record');
|
||||
}
|
||||
function goToMyOrder() {
|
||||
router.push('/badge/myOrder');
|
||||
}
|
||||
function goToPreview() {
|
||||
router.push('/badge/preview');
|
||||
}
|
||||
</script>
|
||||
|
||||
<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-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-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;
|
||||
object-fit: cover;
|
||||
background: #f5f5f5;
|
||||
border: 2px solid transparent;
|
||||
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;
|
||||
}
|
||||
.bg-photo-upload-label {
|
||||
display: inline-block;
|
||||
}
|
||||
.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-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;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user