文案处理
This commit is contained in:
parent
475837b404
commit
1548e011f3
@ -2,17 +2,17 @@
|
|||||||
<div class="loading-view">
|
<div class="loading-view">
|
||||||
<!-- 背景渐变 -->
|
<!-- 背景渐变 -->
|
||||||
<div class="loading-background"></div>
|
<div class="loading-background"></div>
|
||||||
|
|
||||||
<!-- 加载内容 -->
|
<!-- 加载内容 -->
|
||||||
<div class="loading-content">
|
<div class="loading-content">
|
||||||
<!-- Logo或品牌标识 -->
|
<!-- Logo或品牌标识 -->
|
||||||
<div class="logo-container">
|
<div class="logo-container">
|
||||||
<div class="logo">
|
<div class="logo">
|
||||||
<div class="logo-icon">📱</div>
|
<div class="logo-icon">📱</div>
|
||||||
<h1 class="logo-text">LikeI</h1>
|
<h1 class="logo-text">Likei</h1>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 加载动画 -->
|
<!-- 加载动画 -->
|
||||||
<div class="loading-animation">
|
<div class="loading-animation">
|
||||||
<div class="spinner">
|
<div class="spinner">
|
||||||
@ -21,13 +21,13 @@
|
|||||||
<div class="spinner-ring"></div>
|
<div class="spinner-ring"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 加载文本 -->
|
<!-- 加载文本 -->
|
||||||
<div class="loading-text">
|
<div class="loading-text">
|
||||||
<p class="main-text">{{ loadingText }}</p>
|
<p class="main-text">{{ loadingText }}</p>
|
||||||
<p class="sub-text">{{ subText }}</p>
|
<p class="sub-text">{{ subText }}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 进度条 -->
|
<!-- 进度条 -->
|
||||||
<div class="progress-container">
|
<div class="progress-container">
|
||||||
<div class="progress-bar">
|
<div class="progress-bar">
|
||||||
@ -36,10 +36,10 @@
|
|||||||
<span class="progress-text">{{ Math.round(progress) }}%</span>
|
<span class="progress-text">{{ Math.round(progress) }}%</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- 底部提示 -->
|
<!-- 底部提示 -->
|
||||||
<div class="loading-footer">
|
<div class="loading-footer">
|
||||||
<p>Powered by LikeI Team</p>
|
<p>Powered by Likei Team</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -78,16 +78,16 @@ const startLoading = async () => {
|
|||||||
if (isInApp()) {
|
if (isInApp()) {
|
||||||
await connectToApp()
|
await connectToApp()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 开始进度动画
|
// 开始进度动画
|
||||||
startProgressAnimation()
|
startProgressAnimation()
|
||||||
|
|
||||||
// 等待加载完成
|
// 等待加载完成
|
||||||
await waitForLoadingComplete()
|
await waitForLoadingComplete()
|
||||||
|
|
||||||
// 跳转到目标页面
|
// 跳转到目标页面
|
||||||
await navigateToTargetPage()
|
await navigateToTargetPage()
|
||||||
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Loading failed:', error)
|
console.error('Loading failed:', error)
|
||||||
// 出错时跳转到错误页面
|
// 出错时跳转到错误页面
|
||||||
@ -101,7 +101,7 @@ const connectToApp = async () => {
|
|||||||
connectApplication(async (access) => {
|
connectApplication(async (access) => {
|
||||||
try {
|
try {
|
||||||
const result = parseAccessOrigin(access)
|
const result = parseAccessOrigin(access)
|
||||||
|
|
||||||
if (result.success) {
|
if (result.success) {
|
||||||
const headerInfo = parseHeader(result.data)
|
const headerInfo = parseHeader(result.data)
|
||||||
await setHttpHeaders(headerInfo)
|
await setHttpHeaders(headerInfo)
|
||||||
@ -122,16 +122,16 @@ const startProgressAnimation = () => {
|
|||||||
let currentProgress = 0
|
let currentProgress = 0
|
||||||
const totalDuration = loadingSteps.reduce((sum, step) => sum + step.duration, 0)
|
const totalDuration = loadingSteps.reduce((sum, step) => sum + step.duration, 0)
|
||||||
const progressIncrement = 100 / totalDuration * 50 // 每50ms增加的进度
|
const progressIncrement = 100 / totalDuration * 50 // 每50ms增加的进度
|
||||||
|
|
||||||
progressInterval = setInterval(() => {
|
progressInterval = setInterval(() => {
|
||||||
currentProgress += progressIncrement
|
currentProgress += progressIncrement
|
||||||
progress.value = Math.min(currentProgress, 100)
|
progress.value = Math.min(currentProgress, 100)
|
||||||
|
|
||||||
if (progress.value >= 100) {
|
if (progress.value >= 100) {
|
||||||
clearInterval(progressInterval)
|
clearInterval(progressInterval)
|
||||||
}
|
}
|
||||||
}, 50)
|
}, 50)
|
||||||
|
|
||||||
// 更新步骤文本
|
// 更新步骤文本
|
||||||
updateLoadingStep()
|
updateLoadingStep()
|
||||||
}
|
}
|
||||||
@ -142,7 +142,7 @@ const updateLoadingStep = () => {
|
|||||||
const step = loadingSteps[currentStepIndex]
|
const step = loadingSteps[currentStepIndex]
|
||||||
loadingText.value = step.text
|
loadingText.value = step.text
|
||||||
subText.value = step.subText
|
subText.value = step.subText
|
||||||
|
|
||||||
stepTimeout = setTimeout(() => {
|
stepTimeout = setTimeout(() => {
|
||||||
currentStepIndex++
|
currentStepIndex++
|
||||||
updateLoadingStep()
|
updateLoadingStep()
|
||||||
@ -163,13 +163,13 @@ const navigateToTargetPage = async () => {
|
|||||||
try {
|
try {
|
||||||
// 尝试获取用户信息来判断跳转目标
|
// 尝试获取用户信息来判断跳转目标
|
||||||
const response = await getTeamEntry()
|
const response = await getTeamEntry()
|
||||||
|
|
||||||
if (response && response.status && response.body) {
|
if (response && response.status && response.body) {
|
||||||
// 有团队信息,根据默认设置跳转到主页
|
// 有团队信息,根据默认设置跳转到主页
|
||||||
const memberProfile = response.body.memberProfile
|
const memberProfile = response.body.memberProfile
|
||||||
if (memberProfile) {
|
if (memberProfile) {
|
||||||
setUserInfo(memberProfile, response.body.teamProfile)
|
setUserInfo(memberProfile, response.body.teamProfile)
|
||||||
|
|
||||||
// 根据用户身份跳转到对应页面
|
// 根据用户身份跳转到对应页面
|
||||||
// 这里可以根据需要调整默认跳转逻辑
|
// 这里可以根据需要调整默认跳转逻辑
|
||||||
router.replace('/host-center')
|
router.replace('/host-center')
|
||||||
@ -231,7 +231,7 @@ onUnmounted(() => {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
background:
|
background:
|
||||||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
|
||||||
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
|
radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.15) 0%, transparent 50%),
|
||||||
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
|
radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
|
||||||
@ -399,20 +399,20 @@ onUnmounted(() => {
|
|||||||
.loading-content {
|
.loading-content {
|
||||||
max-width: 280px;
|
max-width: 280px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-icon {
|
.logo-icon {
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-text {
|
.logo-text {
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-text {
|
.main-text {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user