l***@sina.cn
l***@sina.cn
  • 发布:2021-05-13 14:22
  • 更新:2021-05-13 14:22
  • 阅读:121

css样式在小程序上能够正常显示,但是在安卓上显示失败。

分类:uni-app

.branchWA{
.branchRadius{
border-radius: 79rpx !important;
justify-content:left !important;
position: absolute !important;
.fs_b{
width: 5em;
}
}
.branchRadius_bgZero{
background-color: #f6eee8 !important;
width:216rpx;
height:79rpx !important;
padding-left:11rpx !important;
image{
width: 60rpx !important;
height:60rpx !important;
}
}
.branchRadius_bgOne{
background-color: #fbe7e5 !important;
width:216rpx;
height:79rpx !important;
left:268rpx;
padding-left:11rpx !important;
image{
width: 60rpx !important;
height:60rpx !important;
}
}
.branchRadius_bgTwo{
background-color: #fffae8 !important;
width:216rpx;
height:79rpx !important;
left:512rpx;
padding-left:11rpx !important;
image{
width: 60rpx !important;
height:60rpx !important;
}
}
.branchRadius_bgThree{
background-color: #fbe7e5 !important;
width:216rpx;
height:79rpx !important;
top:157rpx;
left:44rpx;
padding-left:11rpx !important;
image{
width: 60rpx !important;
height:60rpx !important;
}
}
.branchRadius_bgFour{
background-color: #f6eee8 !important;
width:407rpx;
height:148rpx !important;
font-size: 46rpx !important;
top:162rpx;
left:320rpx;
padding-left:21rpx !important;
image{
width: 112rpx !important;
height:112rpx !important;
}
}
.branchRadius_bgFive{
background-color: #f6eee8 !important;
width: 285rpx;
height:105rpx !important;
font-size: 34rpx !important;
top:275rpx;
left:22rpx;
padding-left:16rpx !important;
image{
width: 78rpx !important;
height:78rpx !important;
}
}
.branchRadius_bgSix{
background-color: #fffae8 !important;
width:216rpx;
height:79rpx !important;
top:410rpx;
left:224rpx;
padding-left:11rpx !important;
image{
width: 60rpx !important;
height:60rpx !important;
}
}
.branchRadius_bgSeven{
background-color: #fbe7e5 !important;
width:216rpx;
height:79rpx !important;
top:344rpx;
left:467rpx;
padding-left:11rpx !important;
image{
width: 60rpx !important;
height:60rpx !important;
}
}
}


原先使用数字做为尾标,用于区分各个元素的class样式: <van-button size="small" noline custom-class="branchRadius branchRadius_bg{{ itd % 8 }}" @tap="gtRedirect('/pages/branchdetail', { Id: Id })">
这个在小程序上没有问题,但是在手机上class样式会显示不出来。
改成
<van-button size="small"
noline custom-class="getClassName" @tap="gtRedirect('/pages/branchdetail', { Id: Id })">
computed:{
getClassName(){
var bg="";
switch(this.itd%8){
case 0:
bg="branchRadius_bgZero";break;
case 1:
bg="branchRadius_bgOne";break;
case 2:
bg="branchRadius_bgTwo";break;
case 3:
bg="branchRadius_bgThree";break;
case 4:
bg="branchRadius_bgFour";break;
case 5:
bg="branchRadius_bgFive";break;
case 6:
bg="branchRadius_bgSix";break;
default:
bg="branchRadius_bgSeven";
}
return "branchRadius "+bg;
}
}
后样式显示成功。
0 关注 分享

要回复文章请先登录注册