在uniapp中 ios模拟器样式与h5显示

项目场景:

Vue3 + uniapp 中关于deep无效的问题:


问题描述

在uniapp中 ios模拟器样式与h5显示不一样的问题


<style scoped lang="scss">
	::v-deep .flight{
    
    
		.title {
    
    
			display: inline-block;
			font-size: 28rpx;
			font-weight: 500;
			margin: 32rpx 0rpx 0rpx 40rpx;
		}
		.content {
    
    
			padding: 20rpx 20rpx 0rpx;
			border-radius: 12rpx;
			// height: 522rpx;
			box-sizing: border-box;
		}
		.hastitctn {
    
    
			// margin: 16rpx 20rpx 0rpx;
		}
</style>

原因分析:

查了官方文档 说是deep要加在父级class后面
还未确定真正原因


解决方案:

v-deep 写在父级后


<style scoped lang="scss">

	.flight::v-deep {
    
    
		.title {
    
    
			display: inline-block;
			font-size: 28rpx;
			font-weight: 500;
			margin: 32rpx 0rpx 0rpx 40rpx;
		}
		.content {
    
    
			padding: 20rpx 20rpx 0rpx;
			border-radius: 12rpx;
			// height: 522rpx;
			box-sizing: border-box;
		}
		.hastitctn {
    
    
			// margin: 16rpx 20rpx 0rpx;
		}

</style>

猜你喜欢

转载自blog.csdn.net/weixin_44216637/article/details/129953133
今日推荐