forked from natuka/web.puabadge.com
修改:点云效果优化
This commit is contained in:
1 parent
a76b181650
commit
17908ab309
7 files changed
+70
-43
No files matched your search
+16
-1
@@ -62,9 +62,24 @@ onMounted(() => {
|
|||||||
<template>
|
<template>
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<Suspense>
|
<Suspense>
|
||||||
<div>
|
<div class="app-shell">
|
||||||
<component :is="Component" />
|
<component :is="Component" />
|
||||||
</div>
|
</div>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</router-view>
|
</router-view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
/* 全站最大宽度,桌面端居中;transform 让 position:fixed 相对本容器对齐 */
|
||||||
|
.app-shell {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 540px;
|
||||||
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
|
margin: 0 auto;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow-x: hidden;
|
||||||
|
transform: translateZ(0);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
+2
-1
@@ -22,7 +22,8 @@
|
|||||||
top: 50%!important;
|
top: 50%!important;
|
||||||
max-width: 100vw!important;
|
max-width: 100vw!important;
|
||||||
}
|
}
|
||||||
canvas {
|
/* 仅 AR 全屏画布;勿用全局 canvas(会把点云 WebGL 拉成 100vw 导致偏左) */
|
||||||
|
.fullscreen-canvas {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
+14
-3
@@ -1,6 +1,16 @@
|
|||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100%;
|
||||||
|
background-color: #eff2f5;
|
||||||
|
}
|
||||||
|
|
||||||
#app {
|
#app {
|
||||||
// height: 100%;
|
width: 100%;
|
||||||
// overflow-x: hidden;
|
min-height: 100vh;
|
||||||
|
min-height: 100dvh;
|
||||||
}
|
}
|
||||||
|
|
||||||
*,
|
*,
|
||||||
@@ -37,7 +47,8 @@
|
|||||||
// height: 100vh;
|
// height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
canvas {
|
/* 仅 AR 全屏画布;勿用全局 canvas(会把点云 WebGL 拉成 100vw 导致偏左) */
|
||||||
|
.fullscreen-canvas {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
|||||||
@@ -389,8 +389,18 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ipc-webgl {
|
.ipc-webgl {
|
||||||
|
position: relative !important;
|
||||||
|
left: auto !important;
|
||||||
|
top: auto !important;
|
||||||
|
right: auto !important;
|
||||||
|
bottom: auto !important;
|
||||||
display: block;
|
display: block;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
/* 覆盖全局/历史 fullscreen canvas 规则,保证正方形居中 */
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
max-width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
|
transition: opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
}
|
}
|
||||||
@@ -404,12 +414,13 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ipc-scale {
|
.ipc-scale {
|
||||||
position: absolute;
|
position: absolute !important;
|
||||||
width: 1px;
|
width: 1px !important;
|
||||||
height: 1px;
|
height: 1px !important;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
left: -9999px;
|
left: -9999px !important;
|
||||||
|
top: auto !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ipc-fallback {
|
.ipc-fallback {
|
||||||
|
|||||||
@@ -28,12 +28,7 @@
|
|||||||
@handoff="onHandoff"
|
@handoff="onHandoff"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<img
|
<!-- 效果图点云阶段不叠底图,等揭示后再进预览页展示 -->
|
||||||
v-if="resultUrl"
|
|
||||||
class="stage-layer result-layer"
|
|
||||||
:src="resultUrl"
|
|
||||||
alt=""
|
|
||||||
>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="errorTip" class="error-tip">{{ errorTip }}</div>
|
<div v-if="errorTip" class="error-tip">{{ errorTip }}</div>
|
||||||
@@ -154,12 +149,13 @@ const ordering = ref(false)
|
|||||||
const errorTip = ref('')
|
const errorTip = ref('')
|
||||||
const showConfirmModal = ref(false)
|
const showConfirmModal = ref(false)
|
||||||
|
|
||||||
/** 红框正方形边长:首屏即算好,不依赖 CSS min() */
|
/** 红框正方形边长:按 app-shell 实际宽度算,避免桌面端用整窗宽导致偏大/错位 */
|
||||||
function calcStageSide() {
|
function calcStageSide() {
|
||||||
if (typeof window === 'undefined') return 280
|
if (typeof window === 'undefined') return 280
|
||||||
const w = window.innerWidth || 375
|
const shell = document.querySelector('.app-shell') as HTMLElement | null
|
||||||
|
const w = shell?.clientWidth || Math.min(window.innerWidth || 375, 540)
|
||||||
const h = window.innerHeight || 667
|
const h = window.innerHeight || 667
|
||||||
// 约屏宽 72%、屏高 40%,上限 320,贴近预览卡片区域
|
// 约容器宽 72%、屏高 40%,上限 320,贴近预览卡片区域
|
||||||
return Math.max(180, Math.round(Math.min(w * 0.72, h * 0.4, 320)))
|
return Math.max(180, Math.round(Math.min(w * 0.72, h * 0.4, 320)))
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -297,24 +293,13 @@ function onHandoff() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function startSoftProgress() {
|
function startSoftProgress() {
|
||||||
|
// 固定节奏:每 300ms +1%,效果图就绪后冲到 96%,预览前再动画到 100%
|
||||||
softTimer = setInterval(() => {
|
softTimer = setInterval(() => {
|
||||||
if (showResult.value) return
|
if (showResult.value) return
|
||||||
// 效果图已到:快速冲到 96%,留给揭示动画收尾到 100%
|
const cap = resultUrl.value ? 96 : config.poll.softCap
|
||||||
if (resultUrl.value) {
|
|
||||||
if (progress.value < 96) {
|
|
||||||
progress.value = Math.min(96, progress.value + 3.2)
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const cap = config.poll.softCap
|
|
||||||
if (progress.value >= cap) return
|
if (progress.value >= cap) return
|
||||||
// 整体加快:前段更快,后段仍有余量
|
progress.value = Math.min(cap, progress.value + 1)
|
||||||
let step = 2.4
|
}, 300)
|
||||||
if (progress.value >= 35) step = 1.4
|
|
||||||
if (progress.value >= 60) step = 0.85
|
|
||||||
if (progress.value >= 75) step = 0.45
|
|
||||||
progress.value = Math.min(cap, progress.value + step)
|
|
||||||
}, 280)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function startMaskFetch() {
|
function startMaskFetch() {
|
||||||
@@ -516,7 +501,7 @@ onUnmounted(() => {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: max-content;
|
width: max-content;
|
||||||
max-width: calc(100vw - 32px);
|
max-width: calc(100% - 32px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-shell {
|
.stage-shell {
|
||||||
@@ -545,14 +530,6 @@ onUnmounted(() => {
|
|||||||
height: 100% !important;
|
height: 100% !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.result-layer {
|
|
||||||
object-fit: contain;
|
|
||||||
opacity: 0.35;
|
|
||||||
z-index: 2;
|
|
||||||
pointer-events: none;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.error-tip {
|
.error-tip {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
max-width: 280px;
|
max-width: 280px;
|
||||||
|
|||||||
@@ -211,6 +211,10 @@ async function onSubmit() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
// 清理历史本地标记(锁定状态改为仅看 orders/stat)
|
||||||
|
try {
|
||||||
|
sessionStorage.removeItem('douyin_order_submitted')
|
||||||
|
} catch (_) {}
|
||||||
getOrderStat()
|
getOrderStat()
|
||||||
// 预采样 Logo 点云,进入等待页可立刻上屏
|
// 预采样 Logo 点云,进入等待页可立刻上屏
|
||||||
preloadLogoCloud().catch(() => {})
|
preloadLogoCloud().catch(() => {})
|
||||||
|
|||||||
@@ -91,7 +91,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, onUnmounted, reactive, ref } from 'vue'
|
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import * as douyinApi from '@/api/douyin'
|
import * as douyinApi from '@/api/douyin'
|
||||||
import { douyinConfig as config } from '@/config/douyin'
|
import { douyinConfig as config } from '@/config/douyin'
|
||||||
@@ -227,6 +227,14 @@ function onCardClick(item: any) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
// 桌面端 / 非移动调试模式下 van-list immediate-check 可能不触发,主动拉首屏
|
||||||
|
if (!initialLoaded.value && !fetching.value) {
|
||||||
|
loading.value = true
|
||||||
|
onLoad()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
onUnmounted(() => {
|
onUnmounted(() => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
finished.value = false
|
finished.value = false
|
||||||
|
|||||||
Reference in new issue
Block a user