antd-mobile
Version:
基于 React 的移动设计规范实现
80 lines (79 loc) • 1.63 kB
CSS
.hairline-remove-right-bottom {
border-bottom: 0;
}
.hairline-remove-right-bottom:after {
display: none;
}
.hairline-remove-right-bottom-bak:after {
display: none;
}
.hairline-remove-left-top:before {
display: none;
}
.am-picker-col {
display: block;
position: relative;
height: 476px;
overflow: hidden;
width: 100%;
}
.am-picker-col-content {
position: absolute;
left: 0;
top: 0;
width: 100%;
z-index: 1;
padding: 204px 0;
}
.am-picker-col-item {
-ms-touch-action: manipulation;
touch-action: manipulation;
text-align: center;
font-size: 32px;
height: 68px;
line-height: 68px;
color: #000;
white-space: nowrap;
text-overflow: ellipsis;
}
.am-picker-col-item-selected {
font-size: 34px;
}
.am-picker-col-mask {
position: absolute;
left: 0;
top: 0;
height: 100%;
margin: 0 auto;
width: 100%;
z-index: 3;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6)), linear-gradient(to top, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.6));
background-position: top, bottom;
background-size: 100% 204px;
background-repeat: no-repeat;
}
.am-picker-col-indicator {
box-sizing: border-box;
width: 100%;
height: 68px;
position: absolute;
left: 0;
top: 204px;
z-index: 3;
border-top: 1PX solid #ddd;
border-bottom: 1PX solid #ddd;
}
.am-picker {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.am-picker-item {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}