小程序
小游戏
企业微信
微信支付
扫描小程序码分享
代码如图,第一个堂食右上角有靠近,第二个怎么都靠不了边,模拟器,安卓正常,ios的iphone13正常,其他ios不正常,都是ios16系统,都是最新微信
2 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
<view class="chooseType flex-a" v-if="mealWay.selWay == 0 && mealWay.wayTake && WayTakeList&&WayTakeList.length==2"> <view class="child flex-1 flex-a" :style="'border-color:'+(takeWayType==index?themeColor.color1:'#eee')" @click="WayTakeUpdatradioChange(index)" v-for="(item,index) in [{img:'dineIn.png',cn:takeWayTypeName,en:'Dine In'},{img:'takeAway.png',cn:takeWayTypeName1,en:'Take Away'}]"> <image class="childImg" :src="'https://upaiyun.reabam.com/miniprogram/mealNew/'+item.img" mode="widthFix" /> <view class="content"> <view class="cn"> {{ item.cn }} </view> <view class="en"> {{ item.en }}</view> </view> <view class="chooseImg" v-if="takeWayType==index" :style="'background:'+themeColor.color1"> <image class="img" src="https://upaiyun.reabam.com/miniprogram/mealNew/ok_1102.png" mode="widthFix" /> </view> </view> </view>
<!----css----->
.chooseType{ color: #333; padding: 30rpx 0 0; // border-bottom: 2rpx solid #eee; :first-child{ margin-right: 30rpx; } .child{ padding: 26rpx 0; border:4rpx solid #eee; border-radius: 20rpx; justify-content: center; position: relative; overflow:hidden; .cn{ font-weight: 500; font-size: 32rpx; margin-bottom: 4rpx; width:128rpx; margin-right: 0; } .en{ color: #999999; font-size: 24rpx; } .childImg{ margin-right: 30rpx; height: 65rpx; width: 65rpx; } } .chooseImg{ border-radius: 0px 0rpx 0px 93rpx; width: 45rpx; height: 33rpx; display: flex; justify-content: center; padding-top: 8rpx; padding-left: 2rpx; position: absolute; top: -2rpx; right: -4rpx; box-sizing: border-box; z-index:3; clear: both; .img{ height:1rpx; width: 20rpx; margin: 0; } } }
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
发个此页面这个组件的代码片段看看。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
<view class="chooseType flex-a" v-if="mealWay.selWay == 0 && mealWay.wayTake && WayTakeList&&WayTakeList.length==2"> <view class="child flex-1 flex-a" :style="'border-color:'+(takeWayType==index?themeColor.color1:'#eee')" @click="WayTakeUpdatradioChange(index)" v-for="(item,index) in [{img:'dineIn.png',cn:takeWayTypeName,en:'Dine In'},{img:'takeAway.png',cn:takeWayTypeName1,en:'Take Away'}]"> <image class="childImg" :src="'https://upaiyun.reabam.com/miniprogram/mealNew/'+item.img" mode="widthFix" /> <view class="content"> <view class="cn"> {{ item.cn }} </view> <view class="en"> {{ item.en }}</view> </view> <view class="chooseImg" v-if="takeWayType==index" :style="'background:'+themeColor.color1"> <image class="img" src="https://upaiyun.reabam.com/miniprogram/mealNew/ok_1102.png" mode="widthFix" /> </view> </view> </view>
<!----css----->
.chooseType{ color: #333; padding: 30rpx 0 0; // border-bottom: 2rpx solid #eee; :first-child{ margin-right: 30rpx; } .child{ padding: 26rpx 0; border:4rpx solid #eee; border-radius: 20rpx; justify-content: center; position: relative; overflow:hidden; .cn{ font-weight: 500; font-size: 32rpx; margin-bottom: 4rpx; width:128rpx; margin-right: 0; } .en{ color: #999999; font-size: 24rpx; } .childImg{ margin-right: 30rpx; height: 65rpx; width: 65rpx; } } .chooseImg{ border-radius: 0px 0rpx 0px 93rpx; width: 45rpx; height: 33rpx; display: flex; justify-content: center; padding-top: 8rpx; padding-left: 2rpx; position: absolute; top: -2rpx; right: -4rpx; box-sizing: border-box; z-index:3; clear: both; .img{ height:1rpx; width: 20rpx; margin: 0; } } }
发个此页面这个组件的代码片段看看。