<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
/ 头像 /
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
d***@163.com
- 发布：2021-05-08 09:33
- 更新：2021-05-08 16:34
- 阅读：464
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： Windows 10
HBuilderX类型： Alpha
HBuilderX版本号： 3.1.14
手机系统： iOS
手机系统版本号： IOS 14
手机厂商： 苹果
手机机型： iPhone 7 Plus
页面类型： vue
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
<div class="avatar-wrap" @click.stop="$emit('expDetail')">
<image
src="info.author.avatar.url"
class="avatar"
class="info.author.labels ? 'avatar-labels' : ''"
></image>
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
操作步骤：
<div class="avatar-wrap" @click.stop="$emit('expDetail')">
<image
src="info.author.avatar.url"
class="avatar"
class="info.author.labels ? 'avatar-labels' : ''"
></image>
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
/ 头像 /
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
/ 头像 /
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
预期结果：
<div class="avatar-wrap" @click.stop="$emit('expDetail')">
<image
src="info.author.avatar.url"
class="avatar"
class="info.author.labels ? 'avatar-labels' : ''"
></image>
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
/ 头像 /
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
/ 头像 /
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
实际结果：
<div class="avatar-wrap" @click.stop="$emit('expDetail')">
<image
src="info.author.avatar.url"
class="avatar"
class="info.author.labels ? 'avatar-labels' : ''"
></image>
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
/ 头像 /
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
<text v-if="info.author.labels" class="labels">{{ info.author.labels[0] }}</text>
</div>
/ 头像 /
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
bug描述：
本地调式没问题，云打包后圆形头像的宽高变大
问题确认：部分情况下 rpx 计算错误，已加分，后续修复
临时解决方案：
修改 HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/app-vue-style-loader/lib/addStylesClient.js、 HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader/lib/addStylesClient.js 文件中的 /\{[\s\S]+?\}|@media.+\{/g 为 /\{[\s\S]+?\}|@media.+?\{/g
d***@163.com (作者)
App id:UNI7C247C1
2021-05-08 14:35