/* colorui start */ .nav-list { display: flex; flex-wrap: wrap; /* padding: 0px 40upx 0px; */ justify-content: flex-start; } .nav-li { padding: 30upx; border-radius: 12upx; width: 45%; /* margin: 0 2.5% 40upx; */ background-image: url(https://cdn.nlark.com/yuque/0/2019/png/280374/1552996358352-assets/web-upload/cc3b1807-c684-4b83-8f80-80e5b8a6b975.png); background-size: cover; background-position: center; position: relative; z-index: 1; } .nav-li::after { content: ""; position: absolute; z-index: -1; background-color: inherit; width: 100%; height: 100%; left: 0; bottom: -10%; border-radius: 10upx; opacity: 0.2; transform: scale(0.9, 0.9); } .nav-li.cur { color: #fff; background: rgb(94, 185, 94); box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4); } .nav-title { font-size: 32upx; font-weight: 300; } .nav-title::first-letter { font-size: 40upx; margin-right: 4upx; } .nav-name { font-size: 28upx; text-transform: Capitalize; margin-top: 20upx; position: relative; } .nav-name::before { content: ""; position: absolute; display: block; width: 40upx; height: 6upx; background: #fff; bottom: 0; right: 0; opacity: 0.5; } .nav-name::after { content: ""; position: absolute; display: block; width: 100upx; height: 1px; background: #fff; bottom: 0; right: 40upx; opacity: 0.3; } .nav-name::first-letter { font-weight: bold; font-size: 36upx; margin-right: 1px; } .nav-li text { position: absolute; right: 30upx; top: 30upx; font-size: 52upx; width: 60upx; height: 60upx; text-align: center; line-height: 60upx; } .text-light { font-weight: 300; } @keyframes show { 0% { transform: translateY(-50px); } 60% { transform: translateY(40upx); } 100% { transform: translateY(0px); } } @-webkit-keyframes show { 0% { transform: translateY(-50px); } 60% { transform: translateY(40upx); } 100% { transform: translateY(0px); } } /* colorui end */ .margin-bottom-with-bar { margin-bottom: calc(120rpx + constant(safe-area-inset-bottom) / 2); margin-bottom: calc(120rpx + env(safe-area-inset-bottom) / 2); } .fixed-bottom-bar { position: fixed !important; width: 100% !important; bottom: 0 !important; margin-bottom: 0 !important; z-index: 98; padding-bottom: constant(safe-area-inset-bottom / 2) !important; /*兼容 IOS<11.2*/ padding-bottom: env(safe-area-inset-bottom / 2) !important; /*兼容 IOS>11.2*/ } .cu-bar.tabbar.border .action checkbox { z-index: 3; } .fixed-top-bar { position: fixed !important; z-index: 98; width: 100%; } .sticky-bar { z-index: 10; position: sticky; top: 0; } .text-del { text-decoration: line-through; } .long-btn { width: 100%; } .flex-column-start { display: flex; flex-direction: column; justify-content: flex-start; } .flex-column-between { display: flex; flex-direction: column; justify-content: space-between; } .flex-column-around { display: flex; flex-direction: column; justify-content: space-around; } .cu-form-group .title { flex-basis: 24%; text-align: justify; padding-right: 30rpx; font-size: 30rpx; position: relative; height: 60rpx; line-height: 60rpx; } .cu-form-group picker .picker { line-height: 100rpx; font-size: 28rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 100%; text-align: left; color: #555; } .cu-form-group input { flex: 1; font-size: 28rpx; color: #555; padding-right: 20rpx; } .uni-forms-item__inner { display: flex !important; padding: 22rpx !important; border-top: 1rpx solid #eee !important; } .is-input-border { border: none !important; } .dialog-close { display: none !important; } .cu-form-group textarea { margin: 0 0 20rpx 0 !important; padding: 20rpx !important; } .radius-input { border: 1rpx solid rgba(0, 0, 0, 0.1); border-radius: 10rpx; padding: 11rpx; box-sizing: content-box; } .cu-dialog .cu-bar .action:first-child { margin-left: 30rpx !important; font-size: inherit !important; } .big-icon { font-size: 111rpx !important; } .middle-icon { font-size: 65rpx !important; } .line-input { width: 100%; } .align-baseline { align-items: baseline !important; } .float-left { float: left; } .float-clear { clear: both; } .align-center-view { position: fixed; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .readonlyPicker { background-color: #EEEEEE; }