|
|
|
|
@ -25,20 +25,35 @@
@@ -25,20 +25,35 @@
|
|
|
|
|
<div class="progress-bar-fg" :style="{ width: progress + '%' }"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="progress-text">{{progressText}} {{progress}}%</div> |
|
|
|
|
<div class="progress-desc">总计大约需要60秒，请耐心等待...</div> |
|
|
|
|
<div class="progress-desc">总计大约需要90秒，请耐心等待...</div> |
|
|
|
|
</div> |
|
|
|
|
<div v-else class="progress-section"> |
|
|
|
|
<van-swipe v-model="currentIndex" class="progress-section-img" :autoplay="3000" :show-indicators="false"> |
|
|
|
|
<!-- <van-swipe v-model="currentIndex" class="progress-section-img" :autoplay="3000" :show-indicators="false"> |
|
|
|
|
<van-swipe-item v-for="item in imageList" :key="item.id"> |
|
|
|
|
<img class="progress-section-img" :src="item.origin_url" alt=""> |
|
|
|
|
<div class="progress-image-item-shadow"></div> |
|
|
|
|
</van-swipe-item> |
|
|
|
|
</van-swipe> |
|
|
|
|
</van-swipe> --> |
|
|
|
|
<div class="progress-section-img"> |
|
|
|
|
<img class="progress-section-img-item" :src="imageUrl" alt=""> |
|
|
|
|
<div class="progress-image-item-shadow"></div> |
|
|
|
|
</div> |
|
|
|
|
<div class="image-list-box"> |
|
|
|
|
<div class="image-list-item" v-for="item in imageList" :key="item.key"> |
|
|
|
|
<img v-if="item.status == 1" class="image-list-item-img" :class="{ imgActive: item.key == imgKey }" :src="item.origin_url" alt="" @click="changeImage(item)"> |
|
|
|
|
<div v-else-if="item.status == 0" class="image-list-item-loading"> |
|
|
|
|
设计中 |
|
|
|
|
</div> |
|
|
|
|
<div v-else-if="item.status == 2" class="image-list-item-loading"> |
|
|
|
|
设计失败 |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-section"> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<div class="info-title">{{ style_name }}</div> |
|
|
|
|
<div class="info-content">风格</div> |
|
|
|
|
<div class="info-title">{{ prodId == 7 ? '人物立体徽章' : '宠物立体徽章' }}</div> |
|
|
|
|
<div class="info-content">产品类型</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-item"> |
|
|
|
|
<div class="info-title">3D全彩打印</div> |
|
|
|
|
@ -49,10 +64,10 @@
@@ -49,10 +64,10 @@
|
|
|
|
|
<div class="info-content">材料</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="info-desc"> |
|
|
|
|
<!-- <div class="info-desc"> |
|
|
|
|
下单后预计需要7天完成生产发货。<br> |
|
|
|
|
实物3D打印色彩与图片有合理色差，如对产品有疑问，可以联系客服咨询。 |
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
<div style="padding: 0 16px;"> |
|
|
|
|
<van-divider /> |
|
|
|
|
</div> |
|
|
|
|
@ -65,51 +80,19 @@
@@ -65,51 +80,19 @@
|
|
|
|
|
<van-stepper v-model="item.count" :min="0" :max="item.remaining" @change="changeValue" /> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<!-- <div class="order-item"> |
|
|
|
|
<span class="order-size">5cm</span> |
|
|
|
|
<span class="order-free">(剩余兑换：2)</span> |
|
|
|
|
<div class="order-ctrl"> |
|
|
|
|
<van-stepper v-model="value" /> |
|
|
|
|
</div> |
|
|
|
|
</div> --> |
|
|
|
|
</div> |
|
|
|
|
<div style="height: 110px;"></div> |
|
|
|
|
<div class="confirm-box"> |
|
|
|
|
<div class="action-section"> |
|
|
|
|
<button v-if="trialCode == false" @click="reload" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button> |
|
|
|
|
<button v-if="trialCode == true" @click="compare" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button> |
|
|
|
|
<button v-if="trialCode == true" @click="save" :disabled="flag < 2" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button> |
|
|
|
|
<button v-if="trialCode == false" @click="sureReload" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/reload.png" alt=""> 再次生成</button> |
|
|
|
|
<button @click="compare" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/duibi.png" alt=""> 前后对比</button> |
|
|
|
|
<button @click="save" :disabled="flag < 1" class="action-btn"><img class="action-img" src="@/assets/badge/down.png" alt=""> 保存图片</button> |
|
|
|
|
</div> |
|
|
|
|
<div class="btn-box" v-if="trialCode == false"> |
|
|
|
|
<button @click="confirm" :disabled="flag < 2" class="confirm-btn">确认选择</button> |
|
|
|
|
<button @click="confirm" :disabled="flag < 1" class="confirm-btn">确认选择</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<van-action-sheet v-model:show="showReload" title="风格样式选择" :close-on-click-overlay="true" closeable> |
|
|
|
|
<div class="style-selection"> |
|
|
|
|
<div class="style-grid"> |
|
|
|
|
<!-- <div class="style-item" :class="{'active': checkId == 0}" @click="checkId = 0"> |
|
|
|
|
<img src="@/assets/badge/suiji.png" alt="随机风格盲盒" class="style-img"> |
|
|
|
|
<div class="style-label">随机风格盲盒</div> |
|
|
|
|
<span class="style-selected" v-if="checkId == 0" style="display: inline-block;"> |
|
|
|
|
<van-icon name="checked" color="#50cf54" size="21px" /> |
|
|
|
|
</span> |
|
|
|
|
</div> --> |
|
|
|
|
<div class="style-item" :class="{'active': item.id == checkId}" v-for="item in kindList" :key="item.id" @click="checkId = item.id"> |
|
|
|
|
<img :src="item.path" :alt="item.name" class="style-img"> |
|
|
|
|
<div class="style-label">{{item.name}}</div> |
|
|
|
|
<span class="style-selected" v-if="item.id == checkId"> |
|
|
|
|
<van-icon name="checked" color="#50cf54" size="21px" /> |
|
|
|
|
</span> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div class="confirm-wrapper"> |
|
|
|
|
<button class="confirm-button" @click="sureReload"> |
|
|
|
|
确认再次生成 |
|
|
|
|
</button> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</van-action-sheet> |
|
|
|
|
|
|
|
|
|
<van-action-sheet v-model:show="showCompare" title="前后对比" :close-on-click-overlay="true" closeable> |
|
|
|
|
<div style="padding: 16px;"> |
|
|
|
|
@ -132,38 +115,9 @@
@@ -132,38 +115,9 @@
|
|
|
|
|
</div> |
|
|
|
|
</van-action-sheet> |
|
|
|
|
|
|
|
|
|
<van-action-sheet v-model:show="showBgCompare" title="前后对比" :close-on-click-overlay="true" closeable> |
|
|
|
|
<div style="padding: 16px;"> |
|
|
|
|
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;"> |
|
|
|
|
<div style="text-align: center;"> |
|
|
|
|
<img :src="compareList.origin_path" alt="原图" style="width: 120px; height: 120px; border-radius: 8px;"> |
|
|
|
|
</div> |
|
|
|
|
<div style="font-size: 24px; color: #333;"> |
|
|
|
|
<van-icon name="plus" size="20px" /> |
|
|
|
|
</div> |
|
|
|
|
<div style="text-align: center;"> |
|
|
|
|
<img :src="compareList.extend_path" alt="背景图" style="width: 120px; height: 120px; border-radius: 8px;"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="font-size: 24px; color: #333;display: flex; align-items: center; justify-content: center; margin: 16px 0;"> |
|
|
|
|
<van-icon name="arrow-down" size="20px" /> |
|
|
|
|
</div> |
|
|
|
|
<div style="display: flex; align-items: center; justify-content: center; gap: 20px;"> |
|
|
|
|
<div style="text-align: center;"> |
|
|
|
|
<img :src="imageUrl" alt="效果图" style="width: 120px; height: 120px; border-radius: 8px;"> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
<div style="text-align: center; margin-top: 16px; color: #999; font-size: 12px;"> |
|
|
|
|
温馨提示：<br/> |
|
|
|
|
AI设计的图案效果图是根据用户提供的照片机器学习生成的，<br/> |
|
|
|
|
多试几次就能找到你满意的效果~ |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</van-action-sheet> |
|
|
|
|
|
|
|
|
|
<div v-if="showPreview"> |
|
|
|
|
<div class="preview-mask" @click="showPreview = false"> |
|
|
|
|
<img :src="imageUrl" alt="徽章预览" /> |
|
|
|
|
<img :src="imageWater" alt="徽章预览" /> |
|
|
|
|
<p>长按图片 → 保存到相册</p> |
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
@ -181,52 +135,28 @@ const showCompare = ref(false)
@@ -181,52 +135,28 @@ const showCompare = ref(false)
|
|
|
|
|
const showBgCompare = ref(false) |
|
|
|
|
const currentIndex = ref(0) |
|
|
|
|
const imageList = ref([]) |
|
|
|
|
const imageWater = ref('') |
|
|
|
|
function compare() { |
|
|
|
|
if (extend_value.value == -1) { |
|
|
|
|
showCompare.value = true |
|
|
|
|
} else { |
|
|
|
|
showBgCompare.value = true |
|
|
|
|
} |
|
|
|
|
showCompare.value = true |
|
|
|
|
} |
|
|
|
|
const kindList = ref([]) |
|
|
|
|
const checkId = ref(0) |
|
|
|
|
function reload() { |
|
|
|
|
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) => { |
|
|
|
|
|
|
|
|
|
}) |
|
|
|
|
showReload.value = true |
|
|
|
|
} |
|
|
|
|
// const getKindID = () => { |
|
|
|
|
// return kindList.value.map(obj => obj.id)[Math.floor(Math.random() * kindList.value.length)]; |
|
|
|
|
// } |
|
|
|
|
function sureReload() { |
|
|
|
|
console.log('sureReload') |
|
|
|
|
if (checkId.value == 0) { |
|
|
|
|
showToast('请选择风格样式') |
|
|
|
|
if (payAmount.value <= 0) { |
|
|
|
|
showToast('当前次数已用完,请重新购买') |
|
|
|
|
return |
|
|
|
|
} |
|
|
|
|
imageUrl.value = ''; |
|
|
|
|
isPreview.value = false |
|
|
|
|
group.value = newGroup.value |
|
|
|
|
const params = { |
|
|
|
|
pid: pid.value, |
|
|
|
|
kind_id: checkId.value, |
|
|
|
|
extend_value: extend_value.value, |
|
|
|
|
group: group.value, |
|
|
|
|
prod_id: prodId.value |
|
|
|
|
} |
|
|
|
|
badgeApi.putMOdeling(params).then((res: any) => { |
|
|
|
|
badgeApi.putModeling(params).then((res: any) => { |
|
|
|
|
console.log('putModeling', res) |
|
|
|
|
imageUrl.value = ''; |
|
|
|
|
imageList.value = [] |
|
|
|
|
imgKey.value = ''; |
|
|
|
|
createLog() |
|
|
|
|
}).catch((err) => { |
|
|
|
|
console.log('putModeling', err) |
|
|
|
|
@ -241,11 +171,18 @@ function sureReload() {
@@ -241,11 +171,18 @@ function sureReload() {
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const imgKey = ref(101) |
|
|
|
|
const changeImage = (item: any) => { |
|
|
|
|
imgKey.value = item.key |
|
|
|
|
imageUrl.value = item.origin_url |
|
|
|
|
imageWater.value = item.url |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const createLog = () => { |
|
|
|
|
badgeApi.createLog({ |
|
|
|
|
pid: pid.value, |
|
|
|
|
kind_id: checkId.value, |
|
|
|
|
group: group.value, |
|
|
|
|
prod_id: prodId.value |
|
|
|
|
}).then((res: any) => { |
|
|
|
|
console.log('createLog', res) |
|
|
|
|
showReload.value = false |
|
|
|
|
@ -269,35 +206,17 @@ const createLog = () => {
@@ -269,35 +206,17 @@ const createLog = () => {
|
|
|
|
|
|
|
|
|
|
const showPreview = ref(false) |
|
|
|
|
function save() { |
|
|
|
|
// 下载图片到本地 |
|
|
|
|
// const downloadImage = (url: string) => { |
|
|
|
|
// const link = document.createElement('a') |
|
|
|
|
// link.href = url |
|
|
|
|
// link.download = '徽章效果图.png' |
|
|
|
|
// document.body.appendChild(link) |
|
|
|
|
// link.click() |
|
|
|
|
// document.body.removeChild(link) |
|
|
|
|
// } |
|
|
|
|
|
|
|
|
|
// if (imageUrl.value) { |
|
|
|
|
// try { |
|
|
|
|
// downloadImage(imageUrl.value); |
|
|
|
|
// } catch { |
|
|
|
|
// showPreview.value = true; // 自动下载失败时显示预览 |
|
|
|
|
// } |
|
|
|
|
// } |
|
|
|
|
showPreview.value = true; |
|
|
|
|
} |
|
|
|
|
const compareList = ref({}) |
|
|
|
|
const extend_value = ref(0) |
|
|
|
|
const style_name = ref('') |
|
|
|
|
function getCompareImage() { |
|
|
|
|
badgeApi.getCompareImage({ |
|
|
|
|
pid: pid.value, |
|
|
|
|
group: group.value, |
|
|
|
|
prod_id: prodId.value |
|
|
|
|
}).then((res: any) => { |
|
|
|
|
console.log('getCompareImage', res) |
|
|
|
|
extend_value.value = res.extend_value |
|
|
|
|
compareList.value = res |
|
|
|
|
style_name.value = res.list[0].kind_name || res.kind_name |
|
|
|
|
}).catch((err) => { |
|
|
|
|
@ -340,14 +259,15 @@ const confirm = () => {
@@ -340,14 +259,15 @@ const confirm = () => {
|
|
|
|
|
showConfirmDialog({ |
|
|
|
|
title: '确认下单', |
|
|
|
|
message: |
|
|
|
|
'请再次确认是否选择这个模型下单。', |
|
|
|
|
'请再次确认是否选择这个模型下单,一个链接只能下单一次。', |
|
|
|
|
}) |
|
|
|
|
.then(() => { |
|
|
|
|
const parms = { |
|
|
|
|
pid: pid.value, |
|
|
|
|
key: key.value, |
|
|
|
|
key: imgKey.value, |
|
|
|
|
pay_amount: payAmount.value, |
|
|
|
|
products: sizeList.value |
|
|
|
|
products: sizeList.value, |
|
|
|
|
prod_id: prodId.value |
|
|
|
|
} |
|
|
|
|
badgeApi.creatOrder(parms).then((res: any) => { |
|
|
|
|
console.log('creatOrder', res) |
|
|
|
|
@ -371,6 +291,7 @@ const confirm = () => {
@@ -371,6 +291,7 @@ const confirm = () => {
|
|
|
|
|
}) |
|
|
|
|
}) |
|
|
|
|
.catch(() => { |
|
|
|
|
loading.value = false |
|
|
|
|
// on cancel |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
@ -406,14 +327,71 @@ const progressList = () => {
@@ -406,14 +327,71 @@ const progressList = () => {
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const newGroup = ref(0) |
|
|
|
|
const isPreview = ref(false) |
|
|
|
|
const getImageList = () => { |
|
|
|
|
badgeApi.getImageList({ |
|
|
|
|
pid: pid.value, |
|
|
|
|
group: group.value |
|
|
|
|
group: group.value, |
|
|
|
|
prod_id: prodId.value |
|
|
|
|
}).then((res: any) => { |
|
|
|
|
console.log('getImageList', res) |
|
|
|
|
const data = res || [] |
|
|
|
|
flag.value = data.flag |
|
|
|
|
prodId.value = data.prod_id |
|
|
|
|
if (data.flag === 1) { |
|
|
|
|
newGroup.value = data.next_group |
|
|
|
|
|
|
|
|
|
nextTick(() => { |
|
|
|
|
// 更新图片列表 |
|
|
|
|
const newList = data.list.map(item => ({ |
|
|
|
|
...item, |
|
|
|
|
isNew: true |
|
|
|
|
})) |
|
|
|
|
|
|
|
|
|
// 找到第一个状态为1(已生成)的图片 |
|
|
|
|
const firstGeneratedImage = newList.find(item => item.status === 1) |
|
|
|
|
|
|
|
|
|
// 如果有已生成的图片且还未设置预览图,则显示第一个生成的图片 |
|
|
|
|
if (firstGeneratedImage && !isPreview.value) { |
|
|
|
|
imageUrl.value = firstGeneratedImage.origin_url |
|
|
|
|
imageWater.value = firstGeneratedImage.url |
|
|
|
|
imgKey.value = firstGeneratedImage.key |
|
|
|
|
isPreview.value = true |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// 合并新旧列表,保持原有顺序 |
|
|
|
|
const mergedList = imageList.value.map(item => { |
|
|
|
|
const newItem = newList.find(n => n.key === item.key) |
|
|
|
|
return newItem || item |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 添加新图片 |
|
|
|
|
newList.forEach(newItem => { |
|
|
|
|
if (!mergedList.find(item => item.key === newItem.key)) { |
|
|
|
|
mergedList.push(newItem) |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
// 更新图片列表 |
|
|
|
|
imageList.value = mergedList |
|
|
|
|
|
|
|
|
|
// 如果已有选中图片,保持显示当前选中的图片 |
|
|
|
|
console.log('imgKey.value', imgKey.value) |
|
|
|
|
if (imgKey.value) { |
|
|
|
|
const currentImage = mergedList.filter((item: any) => item.key === imgKey.value)[0] |
|
|
|
|
console.log('currentImage', currentImage) |
|
|
|
|
if (currentImage && currentImage.status === 1) { |
|
|
|
|
imageUrl.value = currentImage.origin_url |
|
|
|
|
imageWater.value = currentImage.url |
|
|
|
|
isPreview.value = true |
|
|
|
|
} else { |
|
|
|
|
imageUrl.value = currentImage.origin_url |
|
|
|
|
imageWater.value = currentImage.url |
|
|
|
|
isPreview.value = true |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
if (data.flag === 2) { |
|
|
|
|
newGroup.value = data.next_group |
|
|
|
|
// 清除轮询和进度条计时器 |
|
|
|
|
@ -424,14 +402,22 @@ const getImageList = () => {
@@ -424,14 +402,22 @@ const getImageList = () => {
|
|
|
|
|
progress.value = 100 |
|
|
|
|
|
|
|
|
|
// 显示图片 |
|
|
|
|
imageUrl.value = data.list[0].origin_url |
|
|
|
|
imageList.value = data.list |
|
|
|
|
key.value = data.list[0].key |
|
|
|
|
if (imgKey.value) { |
|
|
|
|
imageUrl.value = data.list.filter((item: any) => item.key == imgKey.value)[0].origin_url |
|
|
|
|
imageWater.value = data.list.filter((item: any) => item.key == imgKey.value)[0].url |
|
|
|
|
} else { |
|
|
|
|
imageUrl.value = data.list[0].origin_url |
|
|
|
|
imageWater.value = data.list[0].url |
|
|
|
|
imgKey.value = data.list[0].key |
|
|
|
|
} |
|
|
|
|
localStorage.remove('userId') |
|
|
|
|
} |
|
|
|
|
}).catch((err) => { |
|
|
|
|
clearInterval(progressTimer.value) |
|
|
|
|
progress.value = 0 |
|
|
|
|
// 清除轮询和进度条计时器 |
|
|
|
|
// clearInterval(timer.value) |
|
|
|
|
// clearInterval(progressTimer.value) |
|
|
|
|
// progress.value = 0 |
|
|
|
|
showToast({ |
|
|
|
|
message: err.message, |
|
|
|
|
duration: 2000, |
|
|
|
|
@ -453,15 +439,27 @@ function handleBeforeUnload(_event: BeforeUnloadEvent) {
@@ -453,15 +439,27 @@ function handleBeforeUnload(_event: BeforeUnloadEvent) {
|
|
|
|
|
localStorage.remove('code') |
|
|
|
|
localStorage.remove('trialCode') |
|
|
|
|
localStorage.remove('userId') |
|
|
|
|
// 清除轮询和进度条计时器 |
|
|
|
|
clearInterval(timer.value) |
|
|
|
|
clearInterval(progressTimer.value) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const pid = ref(0) |
|
|
|
|
const route = useRoute() |
|
|
|
|
const prodId = ref(0) |
|
|
|
|
onMounted(() => { |
|
|
|
|
pid.value = route.query.pid |
|
|
|
|
group.value = route.query.group |
|
|
|
|
if (route.query.key) { |
|
|
|
|
imgKey.value = route.query.key |
|
|
|
|
} |
|
|
|
|
if (route.query.prod_id) { |
|
|
|
|
prodId.value = route.query.prod_id |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
// pid.value = 281505; |
|
|
|
|
// group.value = 1; |
|
|
|
|
// prodId.value = 7; |
|
|
|
|
getImageList() |
|
|
|
|
progressList() |
|
|
|
|
getCompareImage() |
|
|
|
|
@ -597,7 +595,7 @@ onUnmounted(() => {
@@ -597,7 +595,7 @@ onUnmounted(() => {
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
text-align: center; |
|
|
|
|
width: 80vw; |
|
|
|
|
height: 80vw; |
|
|
|
|
min-height: 80vw; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
@ -607,6 +605,12 @@ onUnmounted(() => {
@@ -607,6 +605,12 @@ onUnmounted(() => {
|
|
|
|
|
width: 80vw; |
|
|
|
|
height: 80vw; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
.progress-section-img-item { |
|
|
|
|
width: 80vw; |
|
|
|
|
height: 80vw; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
.progress-bar-bg { |
|
|
|
|
width: 70%; |
|
|
|
|
@ -863,10 +867,41 @@ onUnmounted(() => {
@@ -863,10 +867,41 @@ onUnmounted(() => {
|
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 100%; |
|
|
|
|
width: 80vw; |
|
|
|
|
height: 80vw; |
|
|
|
|
object-fit: cover; |
|
|
|
|
box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.5),inset -2px -2px 4px rgba(0, 0, 0, 0.2); |
|
|
|
|
border-radius: 50%; |
|
|
|
|
} |
|
|
|
|
.image-list-box { |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
gap: 10px; |
|
|
|
|
padding: 16px 16px 0 16px; |
|
|
|
|
} |
|
|
|
|
.image-list-item { |
|
|
|
|
width: 20vw; |
|
|
|
|
height: 20vw; |
|
|
|
|
} |
|
|
|
|
.image-list-item-img { |
|
|
|
|
width: 20vw; |
|
|
|
|
height: 20vw; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
border: 3px solid #fff; |
|
|
|
|
} |
|
|
|
|
.image-list-item-img.imgActive { |
|
|
|
|
border: 3px solid #50cf54; |
|
|
|
|
} |
|
|
|
|
.image-list-item-loading { |
|
|
|
|
width: 20vw; |
|
|
|
|
height: 20vw; |
|
|
|
|
border-radius: 12px; |
|
|
|
|
background: #f0f0f0; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-size: 12px; |
|
|
|
|
color: #999; |
|
|
|
|
} |
|
|
|
|
</style> |
Linzm
7 months ago