榆山数据端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 

114 lines
2.1 KiB

/* 选择样式 */
.select-item {
width: calc(100% - 60rpx);
padding: 20rpx 30rpx;
background: #fff;
display: flex;
flex-direction: row;
justify-content: space-between;
}
/* 街道选择样式 */
.select-item .select-street {
padding: 0 25rpx;
background: #f6f8f8;
border-radius: 28rpx;
position: relative;
min-width: 250rpx;
height: 56rpx;
}
.select-item .select-street .street-info {
display: flex;
align-items: center;
display: -webkit-flex;
justify-content: space-between;
flex-direction: row;
flex-wrap: wrap;
margin-top: 9rpx;
}
.select-item .select-street .street-info .image-and-text{
display: flex;
align-items: center;
}
.select-item .select-street .street-info .image-and-text image:first-child {
width: 28rpx;
height: 32rpx;
}
.select-item .select-street .street-info .image-and-text .street-name {
margin-left: 14rpx;
font-size: 28rpx;
font-weight: 500;
color: rgba(122, 122, 122, 1);
}
.select-item .select-street .street-info image:last-child {
margin-left: 11rpx;
width: 22rpx;
height: 16rpx;
}
/* 默认向下 */
.reverse {
transform: rotate(0deg);
transform-origin: center 8rpx;
transition: transform 0.4s;
}
/* 点击向上 */
._reverse {
transform: rotate(180deg);
transform-origin: center 8rpx;
transition: transform 0.4s;
}
/* 时间选择样式 */
.select-item .select-time {
position: relative;
display: flex;
align-items: center;
flex-direction: row-reverse;
}
.select-item .select-time .time-info text {
font-size: 24rpx;
font-weight: 500;
color: rgba(187, 187, 187, 1);
}
.select-item .select-time .time-info image {
margin-left: 11rpx;
width: 22rpx;
height: 16rpx;
}
/* 下拉展示样式 */
.option-list {
position: absolute;
z-index: 100;
width: 100%;
left: 0;
top: 55rpx;
box-sizing: border-box;
background: #f4f4f4;
padding: 0rpx 20rpx;
margin-top: 4rpx;
border-radius: 6rpx;
overflow-y: auto;
}
.option-list .list-item {
color: #bababa;
font-size: 26rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: space-between;
}