button[type=primary] { background-color: #007eff; } page { height: 100%; background-color: #f5f5f5; } ul { padding-left: 0; li { list-style: none; } } .block { padding: 0 24rpx; margin: 20rpx 24rpx; border-radius: 16rpx; background-color: #fff; } .ell { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .l-title { display: flex; align-items: center; padding: 28rpx 0; font-size: 28rpx; color: #333; &:before { content: ''; width: 6rpx; height: 28rpx; margin-right: 12rpx; vertical-align: middle; background-color: #4876F9; } } .filter { display: flex; align-items: center; padding: 10rpx 30rpx 10rpx 10rpx; background-color: #fff; .search { flex: 1; } .uni-searchbar__box { height: 70rpx; } .sort { margin: 0 20rpx 0 10rpx; &:before { content: ''; display: block; margin-bottom: 5rpx; border: 15rpx solid transparent; border-bottom-color: #B9B9B9; } &:after { content: ''; display: block; border: 15rpx solid transparent; border-top-color: #B9B9B9; } &.desc:before { border-bottom-color: #007EFF; } &.asc:after { border-top-color: #007EFF; } } } .form-list { border-top: 1px solid #E6E8ED; .line { display: flex; justify-content: space-between; align-items: center; padding: 28rpx 0; border-bottom: 1px solid #E6E8ED; &:last-child { border-bottom: 0; } } .ph { font-size: 28rpx; color: #999; } .name, .val, input { font-size: 28rpx; color: #333; } input { flex: 1; margin-left: 20rpx; text-align: right; } .req { .name:after { content: '*'; margin-left: 6rpx; color: #F53232; vertical-align: middle; } } .err { .name { color: #f00; } } .inline { display: inline-flex; align-items: center; @extend input; input { margin-right: 10rpx; } } } .picker-input .input-value-border { line-height: 1; border: 0; } .tab { display: flex; justify-content: space-around; margin-bottom: 20rpx; background-color: #fff; li { padding: 0 20rpx; font-size: 28rpx; white-space: nowrap; line-height: 100rpx; border-bottom: 3px solid transparent; } .active { color: $uni-primary; border-bottom-color: $uni-primary; } } .plus { position: fixed; bottom: 40rpx; right: 40rpx; } .popup-mask { z-index: 9; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0, 0, 0, .5); } .popup { z-index: 10; position: fixed; bottom: 0%; width: 100%; height: 90vh; background-color: #fff; border-top-left-radius: 8px; border-top-right-radius: 8px; .top { text-align: center; line-height: 100rpx; font-size: 28rpx; color: #333; border-bottom: 1px solid #f1f1f1; } .close { position: absolute; top: 30rpx; right: 30rpx; } .list { max-height: calc(90vh - 206rpx); padding: 0 30rpx; overflow: auto; .item { line-height: 80rpx; font-size: 24rpx; } } } .type-popup { z-index: 10; position: fixed; top: 0; left: 0; width: 100%; height: 100%; padding: 10rpx; background-color: #fff; .close { position: absolute; top: 50rpx; right: 50rpx; } .title { margin: 150rpx 20rpx 30rpx; font-size: 30rpx; color: #333; } .types { display: flex; flex-wrap: wrap; } .item { width: calc((100% - 80rpx) / 3); margin: 10rpx; font-size: 28rpx; line-height: 3; text-align: center; color: #1f1f1f; background-color: #dbebff; border-radius: 2px; &.active { color: #fff; background-color: #007EFF; } } } .btn-wrap { z-index: 10; position: fixed; bottom: env(safe-area-inset-bottom); bottom: 0; display: flex; justify-content: flex-end; align-items: center; width: 100%; padding: 20rpx 24rpx 20rpx 40rpx; background-color: #fff; box-shadow: 0px 0px 7rpx 0px rgba(203, 203, 203, 0.55); box-sizing: border-box; .btn { width: 100%; line-height: 80rpx; font-size: 30rpx; text-align: center; color: #fff; border-radius: 10rpx; background-color: #007EFF; } } .per-mask { z-index: 3; position: fixed; top: 0; left: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 28rpx; color: #333; background-color: rgba(255, 255, 255, 0.95); -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }