<view class="content">
<view class="flex flex-col items-center">
<image class="h-200rpx w-300rpx mb-100rpx" src="/static/logo.png"></image>
<text class="text-yello w-600 text-50rpx bg-green-400 mb-100rpx absolute left-50rpx top-20rpx">时间积分计算的风景</text>
<image class="liwenhua" src="/static/logo.png"></image>
</view>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template> 
我是菜鸟sww
- 发布：2022-02-09 15:44
- 更新：2022-05-05 14:16
- 阅读：2552
产品分类： uniapp/H5
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： 11.5.2 (20G95)
HBuilderX类型： Alpha
HBuilderX版本号： 3.3.8
浏览器平台： Chrome
浏览器版本： 97.0.4692.71（正式版本） (x86_64)
项目创建方式： HBuilderX
示例代码：
操作步骤：
<template>
<view class="content">
<view class="flex flex-col items-center">
<image class="h-200rpx w-300rpx mb-100rpx" src="/static/logo.png"></image>
<text class="text-yello w-600 text-50rpx bg-green-400 mb-100rpx absolute left-50rpx top-20rpx">时间积分计算的风景</text>
<image class="liwenhua" src="/static/logo.png"></image>
</view>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<template>
<view class="content">
<view class="flex flex-col items-center">
<image class="h-200rpx w-300rpx mb-100rpx" src="/static/logo.png"></image>
<text class="text-yello w-600 text-50rpx bg-green-400 mb-100rpx absolute left-50rpx top-20rpx">时间积分计算的风景</text>
<image class="liwenhua" src="/static/logo.png"></image>
</view>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
预期结果：
<template>
<view class="content">
<view class="flex flex-col items-center">
<image class="h-200rpx w-300rpx mb-100rpx" src="/static/logo.png"></image>
<text class="text-yello w-600 text-50rpx bg-green-400 mb-100rpx absolute left-50rpx top-20rpx">时间积分计算的风景</text>
<image class="liwenhua" src="/static/logo.png"></image>
</view>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<template>
<view class="content">
<view class="flex flex-col items-center">
<image class="h-200rpx w-300rpx mb-100rpx" src="/static/logo.png"></image>
<text class="text-yello w-600 text-50rpx bg-green-400 mb-100rpx absolute left-50rpx top-20rpx">时间积分计算的风景</text>
<image class="liwenhua" src="/static/logo.png"></image>
</view>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
实际结果：
<template>
<view class="content">
<view class="flex flex-col items-center">
<image class="h-200rpx w-300rpx mb-100rpx" src="/static/logo.png"></image>
<text class="text-yello w-600 text-50rpx bg-green-400 mb-100rpx absolute left-50rpx top-20rpx">时间积分计算的风景</text>
<image class="liwenhua" src="/static/logo.png"></image>
</view>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
<template>
<view class="content">
<view class="flex flex-col items-center">
<image class="h-200rpx w-300rpx mb-100rpx" src="/static/logo.png"></image>
<text class="text-yello w-600 text-50rpx bg-green-400 mb-100rpx absolute left-50rpx top-20rpx">时间积分计算的风景</text>
<image class="liwenhua" src="/static/logo.png"></image>
</view>
<view class="text-area">
<text class="title">{{ title }}</text>
</view>
</view>
</template>
bug描述：
使用vue-cli命令方式创建的vue3项目npx degit dcloudio/uni-preset-vue#vite my-vue3-project 然后进入项目后安装依赖 然后安装npm i -D unocss 配置引入unocss 并使用，运行没有问题rpx可以正常使用显示没有问题 ，但是打包发布出来有问题rpx没有转换为rem还是保持rpx
