/* 头像 */
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
- 发布:2021-05-08 09:33
- 更新:2021-05-08 16:34
- 阅读:373
产品分类: 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>
操作步骤:
<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
}
/* 头像 */
.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
}
/* 头像 */
.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
}
/* 头像 */
.avatar {
width: 80rpx;
height: 80rpx;
border-radius: 50%
}
.avatar-labels {
border: 3px solid $app-blue-6
}
问题确认:部分情况下 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:__UNI__7C247C1
2021-05-08 14:35