770 lines
17 KiB
Vue
770 lines
17 KiB
Vue
|
<template>
|
|||
|
|
<view class="app-update-page">
|
|||
|
|
<app-top-push-notice />
|
|||
|
|
<view class="tabback">
|
|||
|
|
<view class="rtjt" @tap="goBack">←</view>
|
|||
|
|
<view class="name">{{ $i18n.t('softwareUpdate') }}</view>
|
|||
|
|
<view class="tabback-placeholder" />
|
|||
|
|
</view>
|
|||
|
|
<view class="tabback-spacer" />
|
|||
|
|
|
|||
|
|
<scroll-view class="main-scroll" scroll-y :show-scrollbar="false">
|
|||
|
|
<view class="main-pad">
|
|||
|
|
<view class="panel">
|
|||
|
|
<view class="ios-head">
|
|||
|
|
<view class="ios-icon-wrap">
|
|||
|
|
<image
|
|||
|
|
class="ios-icon"
|
|||
|
|
src="/static/newlogo.png"
|
|||
|
|
mode="aspectFill"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
<view class="ios-head-main">
|
|||
|
|
<text class="ios-title">{{ headlineTitle }}</text>
|
|||
|
|
<text class="ios-subtitle">{{ headlineSubtitle }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<rich-text
|
|||
|
|
v-if="updateContentHtml"
|
|||
|
|
class="ios-body-rich"
|
|||
|
|
:nodes="updateContentHtml"
|
|||
|
|
/>
|
|||
|
|
<text v-else class="ios-body preline">{{ mainBodyText }}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="scroll-tail" />
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
|
|||
|
|
<view class="footer-bar">
|
|||
|
|
<text class="footer-version">
|
|||
|
|
{{ $i18n.t('appUpdateCurrentVersionLabel') }}
|
|||
|
|
<text class="footer-version-num">{{ currentVersionDisplay }}</text>
|
|||
|
|
</text>
|
|||
|
|
<view
|
|||
|
|
class="footer-btn"
|
|||
|
|
:class="{ 'footer-btn--disabled': footerDisabled }"
|
|||
|
|
@tap="onFooterClick"
|
|||
|
|
>
|
|||
|
|
<text class="footer-btn-text">{{ footerBtnText }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 下载进度（真实进度，完成后直接调起安装，无「完成」提示） -->
|
|||
|
|
<view v-if="updateProgressVisible" class="progress-mask" @tap.stop="">
|
|||
|
|
<view class="progress-card" @tap.stop="">
|
|||
|
|
<view class="progress-card-glow" />
|
|||
|
|
<view class="progress-top">
|
|||
|
|
<view class="progress-pct-huge">
|
|||
|
|
<text class="pct-value">{{ updateProgress }}</text>
|
|||
|
|
<text class="pct-unit">%</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="progress-headline">{{ $i18n.t('appUpdateDownloading') }}</text>
|
|||
|
|
<text class="progress-stage">{{ $i18n.t('appUpdateStageDownload') }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="progress-track-shell">
|
|||
|
|
<view class="progress-track-bg">
|
|||
|
|
<view class="progress-fill" :style="{ width: progressWidth }">
|
|||
|
|
<view class="progress-shimmer" />
|
|||
|
|
<view class="progress-fill-head" />
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<text class="progress-hint">{{ $i18n.t('appUpdateInProgress') }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import {
|
|||
|
|
getCurrentAppVersionInfo,
|
|||
|
|
pickPackageSizeLabel,
|
|||
|
|
extractLatestApkRecord,
|
|||
|
|
normalizeVersionString,
|
|||
|
|
pickDownloadUrl
|
|||
|
|
} from '@/common/utils/appVersion.js'
|
|||
|
|
import {
|
|||
|
|
readGlobalVersionFromStorage,
|
|||
|
|
syncGlobalVersionToLocalStorage
|
|||
|
|
} from '@/common/config/appVersionConfig.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'AppUpdatePage',
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
hasUpdate: false,
|
|||
|
|
currentVersion: '',
|
|||
|
|
newVersionName: '',
|
|||
|
|
newVersionIntro: '',
|
|||
|
|
updateContentHtml: '',
|
|||
|
|
downloadUrl: '',
|
|||
|
|
packageSizeLabel: '',
|
|||
|
|
updateProgressVisible: false,
|
|||
|
|
updateProgress: 0,
|
|||
|
|
updateRunning: false,
|
|||
|
|
_downloadTask: null
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
progressWidth() {
|
|||
|
|
return `${Math.min(100, Math.max(0, this.updateProgress))}%`
|
|||
|
|
},
|
|||
|
|
headlineTitle() {
|
|||
|
|
const brand = this.$i18n.t('appBrandName')
|
|||
|
|
if (this.hasUpdate && this.newVersionName) {
|
|||
|
|
return `${brand} ${this.newVersionName}`
|
|||
|
|
}
|
|||
|
|
return `${brand} ${this.currentVersion}`
|
|||
|
|
},
|
|||
|
|
headlineSubtitle() {
|
|||
|
|
if (this.hasUpdate) {
|
|||
|
|
return (
|
|||
|
|
this.packageSizeLabel ||
|
|||
|
|
this.$i18n.t('appUpdatePackageSizeFallback')
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return this.$i18n.t('appUpdateAlreadyLatest')
|
|||
|
|
},
|
|||
|
|
mainBodyText() {
|
|||
|
|
if (this.updateContentHtml) {
|
|||
|
|
return ''
|
|||
|
|
}
|
|||
|
|
if (this.hasUpdate) {
|
|||
|
|
return (
|
|||
|
|
this.newVersionIntro ||
|
|||
|
|
this.$i18n.t('appUpdateDefaultNewIntro')
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
this.$i18n.t('appUpdateHeroLatestHint') +
|
|||
|
|
'\n\n' +
|
|||
|
|
this.$i18n.t('appUpdateCurrentOptimizations') +
|
|||
|
|
'\n' +
|
|||
|
|
this.$i18n.t('appUpdateCurrentBuildNotes')
|
|||
|
|
)
|
|||
|
|
},
|
|||
|
|
footerDisabled() {
|
|||
|
|
return !this.hasUpdate || this.updateRunning
|
|||
|
|
},
|
|||
|
|
footerBtnText() {
|
|||
|
|
if (this.updateRunning) return this.$i18n.t('appUpdateInProgress')
|
|||
|
|
return this.hasUpdate
|
|||
|
|
? this.$i18n.t('appUpdateNow')
|
|||
|
|
: this.$i18n.t('appUpdateBtnAlreadyUpdated')
|
|||
|
|
},
|
|||
|
|
/** 底部展示的当前版本（与接口对比用的本地版本一致） */
|
|||
|
|
currentVersionDisplay() {
|
|||
|
|
const v = (this.currentVersion || '').trim()
|
|||
|
|
return v || '—'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onShow() {
|
|||
|
|
this.refreshVersionState()
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
uni.$on('languageChanged', this.onLang)
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
uni.$off('languageChanged', this.onLang)
|
|||
|
|
this.abortActiveDownload()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
onLang() {
|
|||
|
|
this.$forceUpdate()
|
|||
|
|
},
|
|||
|
|
goBack() {
|
|||
|
|
if (this.updateRunning) return
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
applyPendingSource(pending) {
|
|||
|
|
if (!pending || typeof pending !== 'object') return
|
|||
|
|
const size = pickPackageSizeLabel(pending)
|
|||
|
|
this.packageSizeLabel = size || this.$i18n.t('appUpdatePackageSizeFallback')
|
|||
|
|
this.newVersionName =
|
|||
|
|
pending.versionName != null && pending.versionName !== ''
|
|||
|
|
? String(pending.versionName)
|
|||
|
|
: pending.versionCode != null && Number(pending.versionCode) > 0
|
|||
|
|
? String(pending.versionCode)
|
|||
|
|
: ''
|
|||
|
|
const intro =
|
|||
|
|
pending.changelog != null && String(pending.changelog).trim() !== ''
|
|||
|
|
? String(pending.changelog).trim()
|
|||
|
|
: this.$i18n.t('appUpdateDefaultNewIntro')
|
|||
|
|
this.newVersionIntro = intro
|
|||
|
|
this.updateContentHtml =
|
|||
|
|
pending.updateContentHtml != null &&
|
|||
|
|
String(pending.updateContentHtml).trim() !== ''
|
|||
|
|
? String(pending.updateContentHtml).trim()
|
|||
|
|
: ''
|
|||
|
|
this.downloadUrl = pickDownloadUrl(pending)
|
|||
|
|
},
|
|||
|
|
clearNoUpdateUi() {
|
|||
|
|
this.hasUpdate = false
|
|||
|
|
this.newVersionName = ''
|
|||
|
|
this.newVersionIntro = ''
|
|||
|
|
this.updateContentHtml = ''
|
|||
|
|
this.downloadUrl = ''
|
|||
|
|
this.packageSizeLabel = ''
|
|||
|
|
},
|
|||
|
|
/** 请求最新包信息：接口 `version` 与当前安装包版本一致则已是最新，否则可更新 */
|
|||
|
|
async refreshVersionState() {
|
|||
|
|
// 对比必须以「当前运行包」为准（plus.runtime / 小程序线上版），不能用本地缓存优先：
|
|||
|
|
// 否则装新 APK 后若 APP_GLOBAL_VERSION_INFO 仍为旧值，会一直误判可更新。
|
|||
|
|
syncGlobalVersionToLocalStorage()
|
|||
|
|
const runtimeInfo = getCurrentAppVersionInfo()
|
|||
|
|
const localVer = normalizeVersionString(runtimeInfo.versionName)
|
|||
|
|
const storedFallback = normalizeVersionString(readGlobalVersionFromStorage() || '')
|
|||
|
|
this.currentVersion = localVer || storedFallback
|
|||
|
|
try {
|
|||
|
|
const res = await this.$http.get('/app/apkVersion/latest')
|
|||
|
|
if (!res || Number(res.code) !== 200) {
|
|||
|
|
this.clearNoUpdateUi()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const record = extractLatestApkRecord(res)
|
|||
|
|
if (!record || !record.versionName) {
|
|||
|
|
this.clearNoUpdateUi()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
const remoteVer = normalizeVersionString(record.versionName)
|
|||
|
|
if (remoteVer === localVer) {
|
|||
|
|
this.hasUpdate = false
|
|||
|
|
this.newVersionName = ''
|
|||
|
|
this.newVersionIntro = ''
|
|||
|
|
this.downloadUrl = ''
|
|||
|
|
this.packageSizeLabel = pickPackageSizeLabel(record) || ''
|
|||
|
|
const html =
|
|||
|
|
record.updateContentHtml != null &&
|
|||
|
|
String(record.updateContentHtml).trim() !== ''
|
|||
|
|
? String(record.updateContentHtml).trim()
|
|||
|
|
: ''
|
|||
|
|
this.updateContentHtml = html
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.hasUpdate = true
|
|||
|
|
this.applyPendingSource(record)
|
|||
|
|
} catch (e) {
|
|||
|
|
console.warn('[app-update] apkVersion/latest', e)
|
|||
|
|
this.clearNoUpdateUi()
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
abortActiveDownload() {
|
|||
|
|
if (this._downloadTask && typeof this._downloadTask.abort === 'function') {
|
|||
|
|
try {
|
|||
|
|
this._downloadTask.abort()
|
|||
|
|
} catch (e) {}
|
|||
|
|
}
|
|||
|
|
this._downloadTask = null
|
|||
|
|
},
|
|||
|
|
_finishDownloadFailed() {
|
|||
|
|
this.updateProgressVisible = false
|
|||
|
|
this.updateRunning = false
|
|||
|
|
this.updateProgress = 0
|
|||
|
|
this._downloadTask = null
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('appUpdateDownloadFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2500
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
/** Android App：真实下载进度；完成后直接调起安装，无完成 Toast */
|
|||
|
|
startAndroidApkDownload(url) {
|
|||
|
|
this.abortActiveDownload()
|
|||
|
|
this.updateRunning = true
|
|||
|
|
this.updateProgressVisible = true
|
|||
|
|
this.updateProgress = 0
|
|||
|
|
const task = uni.downloadFile({
|
|||
|
|
url,
|
|||
|
|
success: (res) => {
|
|||
|
|
this._downloadTask = null
|
|||
|
|
if (res.statusCode !== 200 || !res.tempFilePath) {
|
|||
|
|
this._finishDownloadFailed()
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.updateProgress = 100
|
|||
|
|
this.updateProgressVisible = false
|
|||
|
|
this.updateRunning = false
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
try {
|
|||
|
|
plus.runtime.install(
|
|||
|
|
res.tempFilePath,
|
|||
|
|
{},
|
|||
|
|
() => {},
|
|||
|
|
(e) => {
|
|||
|
|
const msg =
|
|||
|
|
e && e.message
|
|||
|
|
? e.message
|
|||
|
|
: this.$i18n.t('appUpdateInstallFailed')
|
|||
|
|
uni.showToast({ title: msg, icon: 'none', duration: 3000 })
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
} catch (err) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('appUpdateInstallFailed'),
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2500
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
fail: () => {
|
|||
|
|
this._finishDownloadFailed()
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this._downloadTask = task
|
|||
|
|
if (task && typeof task.onProgressUpdate === 'function') {
|
|||
|
|
task.onProgressUpdate((r) => {
|
|||
|
|
const p =
|
|||
|
|
typeof r.progress === 'number'
|
|||
|
|
? r.progress
|
|||
|
|
: r.totalBytesExpectedToWrite > 0
|
|||
|
|
? Math.round(
|
|||
|
|
(100 * r.totalBytesWritten) /
|
|||
|
|
r.totalBytesExpectedToWrite
|
|||
|
|
)
|
|||
|
|
: 0
|
|||
|
|
this.updateProgress = Math.min(100, Math.max(0, Math.round(p)))
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
startUpdateFlow() {
|
|||
|
|
if (this.updateRunning) return
|
|||
|
|
const url = (this.downloadUrl || '').trim()
|
|||
|
|
if (!url) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('appUpdateNoDownloadUrl'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
try {
|
|||
|
|
if (uni.getSystemInfoSync().platform === 'android') {
|
|||
|
|
this.startAndroidApkDownload(url)
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
} catch (e) {}
|
|||
|
|
// #endif
|
|||
|
|
this.openExternal(url)
|
|||
|
|
},
|
|||
|
|
openExternal(url) {
|
|||
|
|
const u = String(url).trim()
|
|||
|
|
if (!u) return
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
try {
|
|||
|
|
plus.runtime.openURL(u)
|
|||
|
|
} catch (e) {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('appUpdateNoDownloadUrl'), icon: 'none' })
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef H5
|
|||
|
|
try {
|
|||
|
|
if (typeof window !== 'undefined') window.open(u, '_blank')
|
|||
|
|
} catch (e) {
|
|||
|
|
uni.showToast({ title: this.$i18n.t('appUpdateNoDownloadUrl'), icon: 'none' })
|
|||
|
|
}
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
uni.setClipboardData({
|
|||
|
|
data: u,
|
|||
|
|
success: () => {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: this.$i18n.t('appUpdateLinkCopied'),
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
onFooterClick() {
|
|||
|
|
if (!this.hasUpdate || this.updateRunning) return
|
|||
|
|
this.startUpdateFlow()
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped lang="scss">
|
|||
|
|
/* 黑白灰 + 主题色 #3996FD：字阶与对比统一 */
|
|||
|
|
$theme: #3996fd;
|
|||
|
|
$ink: #0a0a0a;
|
|||
|
|
$ink-strong: #141414;
|
|||
|
|
$ink-body: #3a3a3a;
|
|||
|
|
$ink-muted: #6b6b6b;
|
|||
|
|
$ink-sub: #8c8c8c;
|
|||
|
|
$ink-hint: #a3a3a3;
|
|||
|
|
$page-bg: #f0f0f0;
|
|||
|
|
$surface: #ffffff;
|
|||
|
|
$line: #e8e8e8;
|
|||
|
|
|
|||
|
|
.app-update-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: $page-bg;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabback {
|
|||
|
|
width: 750rpx;
|
|||
|
|
height: 204rpx;
|
|||
|
|
background: $surface;
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
padding: 0 28rpx;
|
|||
|
|
padding-top: 52rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border-bottom: 1px solid $line;
|
|||
|
|
z-index: 999;
|
|||
|
|
|
|||
|
|
.name {
|
|||
|
|
font-size: 34rpx;
|
|||
|
|
color: $ink-strong;
|
|||
|
|
font-weight: 600;
|
|||
|
|
letter-spacing: -0.5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.rtjt {
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
color: $ink-strong;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabback-placeholder {
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tabback-spacer {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 204rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-scroll {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 0;
|
|||
|
|
min-height: 0;
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.main-pad {
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.panel {
|
|||
|
|
background: $surface;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 32rpx 28rpx 36rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
border: 1rpx solid $line;
|
|||
|
|
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-tail {
|
|||
|
|
height: calc(200rpx + env(safe-area-inset-bottom));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ios-head {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ios-icon-wrap {
|
|||
|
|
width: 100rpx;
|
|||
|
|
height: 100rpx;
|
|||
|
|
border-radius: 28rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
background: #ebebeb;
|
|||
|
|
border: 1rpx solid $line;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ios-icon {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
display: block;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ios-head-main {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 24rpx;
|
|||
|
|
min-width: 0;
|
|||
|
|
padding-top: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ios-title {
|
|||
|
|
display: block;
|
|||
|
|
font-size: 38rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: $ink;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
letter-spacing: -0.8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ios-subtitle {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 12rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: $ink-muted;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.ios-body {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 36rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: $ink-body;
|
|||
|
|
line-height: 1.7;
|
|||
|
|
text-align: left;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.preline {
|
|||
|
|
white-space: pre-line;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* rich-text 与正文对齐；内部标签字号由 HTML 决定时可被 rich-text 默认样式覆盖 */
|
|||
|
|
.ios-body-rich {
|
|||
|
|
display: block;
|
|||
|
|
margin-top: 36rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: $ink-body;
|
|||
|
|
line-height: 1.7;
|
|||
|
|
text-align: left;
|
|||
|
|
word-break: break-word;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-bar {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding: 16rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
|
|||
|
|
background: $surface;
|
|||
|
|
border-top: 1rpx solid $line;
|
|||
|
|
box-shadow: 0 -8rpx 32rpx rgba(0, 0, 0, 0.04);
|
|||
|
|
z-index: 998;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-version {
|
|||
|
|
display: block;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: $ink-muted;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
letter-spacing: 0.2rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-version-num {
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: $ink-strong;
|
|||
|
|
margin-left: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-btn {
|
|||
|
|
height: 96rpx;
|
|||
|
|
border-radius: 48rpx;
|
|||
|
|
background: $ink;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-btn--disabled {
|
|||
|
|
background: #d0d0d0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-btn-text {
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #ffffff;
|
|||
|
|
letter-spacing: 0.5rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.footer-btn--disabled .footer-btn-text {
|
|||
|
|
color: #ffffff;
|
|||
|
|
opacity: 0.85;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-mask {
|
|||
|
|
position: fixed;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: rgba(0, 0, 0, 0.5);
|
|||
|
|
z-index: 2000;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding: 48rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-card {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
max-width: 620rpx;
|
|||
|
|
overflow: hidden;
|
|||
|
|
border-radius: 28rpx;
|
|||
|
|
padding: 52rpx 40rpx 44rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
background: $surface;
|
|||
|
|
border: 1rpx solid $line;
|
|||
|
|
box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.18);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-card-glow {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -100rpx;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
width: 400rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
background: radial-gradient(
|
|||
|
|
ellipse at center,
|
|||
|
|
rgba(57, 150, 253, 0.12) 0%,
|
|||
|
|
transparent 65%
|
|||
|
|
);
|
|||
|
|
pointer-events: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-top {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-pct-huge {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 16rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pct-value {
|
|||
|
|
font-size: 88rpx;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: $ink;
|
|||
|
|
line-height: 0.9;
|
|||
|
|
letter-spacing: -3rpx;
|
|||
|
|
font-variant-numeric: tabular-nums;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.pct-unit {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: $ink-sub;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
margin-bottom: 10rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-headline {
|
|||
|
|
display: block;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: $ink-strong;
|
|||
|
|
letter-spacing: -0.3rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-stage {
|
|||
|
|
display: block;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 14rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: $ink-muted;
|
|||
|
|
line-height: 1.5;
|
|||
|
|
min-height: 40rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-track-shell {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-track-bg {
|
|||
|
|
position: relative;
|
|||
|
|
height: 20rpx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background: #e3e3e3;
|
|||
|
|
box-shadow: inset 0 2rpx 5rpx rgba(0, 0, 0, 0.08);
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-fill {
|
|||
|
|
position: relative;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
background: linear-gradient(90deg, #5ba3fc 0%, $theme 45%, #2b7de0 100%);
|
|||
|
|
box-shadow:
|
|||
|
|
0 0 16rpx rgba(57, 150, 253, 0.35),
|
|||
|
|
inset 0 1rpx 0 rgba(255, 255, 255, 0.25);
|
|||
|
|
transition: width 0.1s linear, background 0.35s ease, box-shadow 0.35s ease;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-shimmer {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
width: 55%;
|
|||
|
|
background: linear-gradient(
|
|||
|
|
90deg,
|
|||
|
|
rgba(255, 255, 255, 0) 0%,
|
|||
|
|
rgba(255, 255, 255, 0.45) 45%,
|
|||
|
|
rgba(255, 255, 255, 0) 90%
|
|||
|
|
);
|
|||
|
|
animation: progress-shine 1.35s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes progress-shine {
|
|||
|
|
0% {
|
|||
|
|
transform: translateX(-100%);
|
|||
|
|
}
|
|||
|
|
100% {
|
|||
|
|
transform: translateX(220%);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-fill-head {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
right: 2rpx;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
width: 8rpx;
|
|||
|
|
height: 55%;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
background: rgba(255, 255, 255, 0.85);
|
|||
|
|
box-shadow: 0 0 14rpx rgba(255, 255, 255, 0.75);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-hint {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 1;
|
|||
|
|
display: block;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 22rpx;
|
|||
|
|
color: $ink-hint;
|
|||
|
|
letter-spacing: 0.5rpx;
|
|||
|
|
}
|
|||
|
|
</style>
|