client-app/components/hc-update/index.vue

<template>
    <view class="hc-update-app-box" v-if="isShow">
        <view class="update-head-bar">
            <view class="head-bar">
                <image class="head-img" src="/static/update/1.png"/>
                <view class="relative flex">
                    <view class="flex-1 text-white hc-p">
                        <view class="text-34">发现新版本</view>
                        <view class="mt-2">v1.0.0</view>
                    </view>
                    <view class="relative top--60 right-40">
                        <c-lottie src='/static/update/2.json' width="240rpx" height='240rpx' :loop="true"/>
                    </view>
                </view>
            </view>
            <view class="update-content-bar hc-p">
                <scroll-view scroll-y>
                    <view>更新内容: </view>
                    <view class="mt-2 text-gray-6">1111</view>
                </scroll-view>
            </view>
            <view class="update-action-bar">
                <view class="hc-flex hc-p">
                    <button class="cu-btn bg-blue-5 text-white flex-1 mr-2">立即更新</button>
                    <button class="cu-btn bg-gray-4 text-white flex-1 ml-2">下次再说</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import {ref} from "vue";
import {onLoad} from '@dcloudio/uni-app'

//初始变量
const isShow = ref(false)
const appInfo = ref({version: '', wgt: ''})

//渲染完成
onLoad(() => {
    const {appVersion, appWgtVersion} = uni.getSystemInfoSync();
    appInfo.value = {version: appVersion, wgt: appWgtVersion}
})
</script>

<style scoped lang="scss">
@import "./style.scss";
</style>