uni-app编辑器 组件样式乱或无法解析样式的情况

uni-app编辑器 组件样式乱或无法解析样式的情况

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.14

手机系统：Android

手机系统版本号：Android 12

手机厂商：小米

手机机型：xiaomi

页面类型：vue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>  
    <uni-popup ref="popup" type="center">  
        <view class="bg">  
            <view class="vip-card-container">  
                <view class="title">  
                    开通VIP立享无限次恢复  
                </view>  
                <view class="icon-list">  
                    <view class="item">  
                        <image src="@/static/icon_zp.png" />  
                        <view class="text">  
                            照片找回  
                        </view>  
                    </view>  
                    <view class="item">  
                        <image src="@/static/icon_sp.png" />  
                        <view class="text">  
                            视频查找  
                        </view>  
                    </view>  
                    <view class="item">  
                        <image src="@/static/icon_wd.png" />  
                        <view class="text">  
                            文件速查  
                        </view>  
                    </view>  
                </view>  
                <view class="btn" @click="jumpPage">  
                    立即开通  
                </view>  
                <image class="close" src="@/static/clos.png" @click="closeCard">  

                </image>  
            </view>  
        </view>  

    </uni-popup>  
</template>  

<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue';
import { userInfoStore } from "@/store/userInfoStore.js";
import { appInfoStore } from '@/store/appInfoStore.js'
const { proxy } = getCurrentInstance();
const userStore = userInfoStore();
const appInfo = appInfoStore()
const userRef = ref()
const emit = defineEmits(['stopScan'])
const popup = ref();

onMounted(async () => {
await userStore.updateUserInfo();
const isWhite = appInfo.getisWhite()
userRef.value = userStore.getUserInfo()

if (!userRef.value.isVip && !isWhite) {
open()
}
})

const open = () => {
popup.value.open()
}

// 跳转会员页面
const jumpPage = () => {
emit('stopScan')
proxy.$toPage('/pages/vip/vip')
// toPage('/pages/vip/vip')
}

// 关闭
const closeCard = () => {
uni.reLaunch({
url: '/pages/index/index'
})
if (userRef.value.isVip) {
popup.value.close()
} else {
uni.reLaunch({
url: '/pages/index/index'
})
}
}

</script>

<style lang="scss" scoped>
.bg {
width: 50vh;
height: 1086rpx;
background-image: url('@/static/img_light_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
align-items: center;
}

.vip-card-container {
width: 586rpx;
height: 626rpx;
margin: 0rpx auto;
background-image: url('@/static/img_pop_bg.png');
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;

.title {
margin-top: 120rpx;
height: 56rpx;
font-family: PingFang HK, PingFang HK;
font-weight: 500;
font-size: 40rpx;
color: #0F244D;
line-height: 56rpx;
text-align: center;
font-style: normal;
text-transform: none;
}

.icon-list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;

.item {
width: 108rpx;
height: 160rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

image {
width: 108rpx;
height: 108rpx;
}

.text {
height: 36rpx;
font-family: PingFang HK, PingFang HK;
font-weight: 400;
font-size: 24rpx;
color: #0F244D;
line-height: 36rpx;
text-align: center;
font-style: normal;
text-transform: none;
}
}
}

.btn {
width: 458rpx;
height: 98rpx;
background: #EB5352;
border-radius: 60rpx 60rpx 60rpx 60rpx;
color: white;
text-align: center;
line-height: 98rpx;
}

.close {
width: 64rpx;
height: 64rpx;
position: absolute;
bottom: -40rpx;
left: 50%;
transform: translateX(-50%);
}
}
</style>

操作步骤：

把这些图片资源可以注释掉，然后使用新编辑器打开看看吧~ 应该可以复现

预期结果：

图片 无法上传！

实际结果：

我也无法上传图片啊！