view, input, textarea, block, navigator, swiper, swiper-item, form, scroll-view, picker, picker-view, checkbox-group, checkbox, radio { box-sizing: border-box; } body, page{ background-color: #FAFAFC; font-size: 28rpx; color: #333333; } @for $i from 0 through 100 { // 只要双数和能被5除尽的数 @if $i % 2==0 or $i % 5==0 { // 得出:u-margin-30或者u-m-30 .ss-margin-#{$i}, .ss-m-#{$i} { margin: $i + rpx; } .ss-m-x-#{$i} { margin-left: $i + rpx; margin-right: $i + rpx; } .ss-m-y-#{$i} { margin-top: $i + rpx; margin-bottom: $i + rpx; } // 得出:u-padding-30或者u-p-30 .ss-padding-#{$i}, .ss-p-#{$i} { padding: $i + rpx; } .ss-p-x-#{$i} { padding-left: $i + rpx; padding-right: $i + rpx; } .ss-p-y-#{$i} { padding-top: $i + rpx; padding-bottom: $i + rpx; } @each $short, $long in l left, t top, r right, b bottom { // 缩写版,结果如: u-m-l-30 // 定义外边距 .ss-m-#{$short}-#{$i} { margin-#{$long}: $i + rpx; } // 定义内边距 .ss-p-#{$short}-#{$i} { padding-#{$long}: $i + rpx; } // 完整版,结果如:u-margin-left-30 // 定义外边距 .ss-margin-#{$long}-#{$i} { margin-#{$long}: $i + rpx; } // 定义内边距 .ss-padding-#{$long}-#{$i} { padding-#{$long}: $i + rpx; } } } } /* flex布局 */ .flex_box { display: -webkit-flex; display: flex; align-items: center; } .flex_row_between { justify-content: space-between; } .flex_row_center { justify-content: center; } .flex_row_around { justify-content: space-around; } .flex_row_end { justify-content: flex-end; } .flex_direction { flex-direction: column; } .flex_col_top { align-items: flex-start; } .flex_col_bottom { align-items: flex-end; } .flex_wrap { flex-wrap: wrap; } .flex_shrink { flex-shrink: 0; } /* 空列表 */ .empty_box { padding: 50rpx 0; } .empty_btn { height: 150rpx; } image, img { vertical-align: bottom; } /* modal框溢出滚动 */ .modal_scroll { max-height: 720rpx; overflow-y: scroll; } .form_record_box { padding: 24rpx 0 0; } /* 音节动画---------------------------------- */ .text-center { text-align: center; } /* 三角指针 */ .prompt-layer::after { content: ''; display: block; border: 6px solid rgba(0, 0, 0, 0); border-top-color: rgba(255, 211, 0, 1); position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); } .prompt-layer-1 { font-size: 12px; width: 128px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .prompt-layer-1 .p { color: #000000; } .prompt-layer-1 .span { color: rgba(0, 0, 0, 0.6); } /* 语音音阶------------- */ .prompt-loader { width: 96px; height: 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .prompt-loader .em { display: block; background: #333333; width: 1px; height: 10%; margin-right: 2.5px; float: left; } .prompt-loader .em:last-child { margin-right: 0px; } .prompt-loader .em:nth-child(1) { animation: load 2.5s 1.4s infinite linear; } .prompt-loader .em:nth-child(2) { animation: load 2.5s 1.2s infinite linear; } .prompt-loader .em:nth-child(3) { animation: load 2.5s 1s infinite linear; } .prompt-loader .em:nth-child(4) { animation: load 2.5s 0.8s infinite linear; } .prompt-loader .em:nth-child(5) { animation: load 2.5s 0.6s infinite linear; } .prompt-loader .em:nth-child(6) { animation: load 2.5s 0.4s infinite linear; } .prompt-loader .em:nth-child(7) { animation: load 2.5s 0.2s infinite linear; } .prompt-loader .em:nth-child(8) { animation: load 2.5s 0s infinite linear; } .prompt-loader .em:nth-child(9) { animation: load 2.5s 0.2s infinite linear; } .prompt-loader .em:nth-child(10) { animation: load 2.5s 0.4s infinite linear; } .prompt-loader .em:nth-child(11) { animation: load 2.5s 0.6s infinite linear; } .prompt-loader .em:nth-child(12) { animation: load 2.5s 0.8s infinite linear; } .prompt-loader .em:nth-child(13) { animation: load 2.5s 1s infinite linear; } .prompt-loader .em:nth-child(14) { animation: load 2.5s 1.2s infinite linear; } .prompt-loader .em:nth-child(15) { animation: load 2.5s 1.4s infinite linear; } @keyframes load { 0% { height: 10%; } 50% { height: 100%; } 100% { height: 10%; } } /* 语音音阶-------------------- */ .prompt-layer-2 { top: -40px; } .prompt-layer-2 .text { color: rgba(0, 0, 0, 1); font-size: 12px; } /*上传关闭按钮样式*/ .u-upload{ .u-upload__wrap{ .u-upload__deletable{ width: 40rpx; height: 40rpx; .u-upload__deletable__icon{ .u-icon{ .u-icon__icon{ font-size: 30rpx!important; line-height: 30rpx!important; } } } } } } // 搜索组件关闭按钮 .u-search .u-search__content .u-search__content__close{ width: 52rpx; height: 52rpx; } .color-primary { color: #FD910C; } // 禁止滚动 .noScroll { overflow: hidden; } // 自定义导航栏样式 .back-text { font-size: 40rpx; font-weight: bold; color: #323232; margin-left: 32rpx; } // 输入框 .form_input { position: relative; width: 100%; } .form_input .form_input_read { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9; }