123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340 |
- 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;
- }
|