效果图:
我这边是在一个弹框里面,需要一个单选框
实现代码:
html代码:
<u-popup :round="15" mode="center" :closeOnClickOverlay="false" bgColor="transparent">
<view class="depositRequiredBox">
<view class="topBox">
<u-radio-group v-model="depositRequired" placement="column" iconPlacement="right" size="24" iconSize="18">
<label class="label" v-for="(option, index) in radiolist1" :key="index">
<image :src="option.icon" class="oneIcon"></image>
<view class="titleBox">
<view class="title">{{option.title}}</view>
<view class="subtitle">{{option.subtitle}}</view>
</view>
<view class="radioBox">
<u-radio :name="option.value"></u-radio>
</view>
</label>
</u-radio-group>
</view>
<view class="bottomBox">
<view class="btn center leftBtn">取消</view>
<view class="btn center rightBtn">确定</view>
</view>
</view>
</u-popup>
js代码:
export default {
data(){
return {
depositRequired:1,
radiolist1: [{
title: '信用免押',
subtitle: '凭借芝麻信用最高可全免',
value: 0,
icon: '/static/order-list/water.png'
}, {
title: '申请免押',
subtitle: '极速免押',
value: 1,
icon: '/static/order-list/antChain.png'
}]
}
}
}
scss代码:
.center {
display: flex;
align-items: center;
justify-content: center;
}
.depositRequiredBox {
width: 500rpx;
height: 460rpx;
border-radius: 15px;
background-color: #FFFFFF;
.topBox {
width: 100%;
height: 300rpx;
margin-top: 30rpx;
border-bottom: 1rpx solid #E5E5E5;
.label {
width: 90%;
margin: 0 auto;
display: flex;
align-items: center;
padding: 10px 0;
position: relative;
.oneIcon {
width: 70rpx;
height: 70rpx;
}
.titleBox {
margin-left: 10rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
.title {
color: #000000;
font-weight: bold;
font-size: 32rpx;
}
.subtitle {
font-size: 28rpx;
color: #888;
}
}
.radioBox {
position: absolute;
top: 20rpx;
right: 20rpx;
}
}
}
.bottomBox {
width: 100%;
height: 130rpx;
display: flex;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
overflow: hidden;
.btn {
width: 50%;
color: #575757;
font-size: 26rpx;
background-color: #FFFFFF;
}
.leftBtn {
border-right: 1rpx solid #E5E5E5;
}
.rightBtn {
border-left: 1rpx solid #E5E5E5;
}
.btn:active {
background-color: #EEEEEE;
}
}
}