:root { --v-primary-base: #00B760; --v-error-base: #fe574a; --v-primary-lighten1: #26A69A; --v-primary-lighten2: #4DB6AC; --v-primary-lighten3: #80CBC4; --v-primary-lighten4: #B2DFDB; --color-222: #222; --color-333: #333; --color-666: #666; --color-777: #777; --color-999: #999; --color-ccc: #ccc; --color-f3: #f3f3f3; --color-f2f4f742: #f2f4f742; --color-f8: #f8f8f8; --color-f2f4f7: #f2f4f7; --color-d5e6e8: #d5e6e8; --zIndex-breadcrumbs: 999; } .mt-5 { margin-top: 30rpx; } .mt-10 { margin-top: 60rpx; } .cursor-pointer { cursor: pointer; } .font-weight-bold { font-weight: bold; } .text-center { text-align: center; } .vertical80-center { text-align: center; line-height: 80vh; } // 左右居中,高度80居中 .vertical-center { text-align: center; line-height: 80vh; } // 左右居中,高度80居中 .d-flex { display: flex; } .flex-column { flex-direction: column; } .align-center { align-items: center; } .justify-center { justify-content: center; } .justify-space-between { justify-content: space-between; } .justify-space-around { justify-content: space-around; } .justify-end { justify-content: flex-end; } .color-222 { color: #222; } .color-333 { color: #333; } .color-666 { color: #666; } .color-777 { color: #777; } .color-999 { color: #999; } .color-ccc { color: #ccc; } .color-f3f3f3 { color: #f3f3f3; } .color-f2f4f742 { color: #f2f4f742; } .color-f8f8f8 { color: #f8f8f8; } .color-f2f4f7 { color: #f2f4f7; } .color-d5e6e8 { color: #d5e6e8; } .color-error { color: #fe574a; } .color-primary { color: #00B760; } .color-warning { color: #fb8c00; } .default-text-color { color: #0E100F; } .font-size-12 { font-size: 24rpx; } .font-size-13 { font-size: 26rpx; } .font-size-14 { font-size: 28rpx; } .font-size-15 { font-size: 30rpx; } .font-size-16 { font-size: 32rpx; } .font-size-17 { font-size: 34rpx; } .font-size-18 { font-size: 36rpx; } .font-size-19 { font-size: 38rpx; } .font-size-20 { font-size: 40rpx; } .MiSans-Semibold { font-family: MiSans-Semibold; } .MiSans-Normal { font-family: MiSans-Normal; } .MiSans-Bold { font-family: MiSans-Bold; } .MiSans-Medium { font-family: MiSans-Medium; } .navbarBox { position: fixed; top: 0; left: 0; width: 100vw; z-index: 9; } .defaultLink { color:#00B760; cursor:pointer; } .default-radius { border-radius: 10rpx; } .list-item-bgc { background-color: #fbfbfb; } .default-border { border: 1rpx solid #E1E4E9; } .defaultBgc { background-color: #f7f8fa; } // 公共渐变样式 .commonBackground { position: relative; &::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 160px; background: linear-gradient(180deg, #BCFEDE, #F7F8FA); } } // 表单文字样式设置 .uni-forms-item__label { font-family: MiSans-Normal; } .uni-forms-item__content { font-family: MiSans-Normal; } .nodata-img-parent{ height: 90vh; display: flex; align-items: center; justify-content: center; } // 火苗 // 水平左右分 .f-horizon { display: flex; justify-content: space-between; align-items: center; flex-direction: row; } // 水平居中 .f-horizon-center{ display: flex; justify-content: center; align-items: center; flex-direction: row; margin: 5rpx; } .salary { color: var(--v-error-base); line-height: 41px; font-weight: 600; height: auto; display: inline-block; vertical-align: sub; } .bold {font-weight: bold;} .w-600 {font-weight: 600;} .horizontalDividingLine { height: 1px; color: #EDEDED; width: 100%; } // 高亮 .default-active { color: var(--v-primary-base) !important; } .border-bottom-dashed { border-bottom: 1px dashed var(--color-ccc); } .white-bgc { background-color: #fff; } .default-bgc { background-color: #f2f4f7; } .ellipsis { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .head-box { .head-title { min-width: 160rpx; font-size: 36rpx; font-weight: bold; color: #333333; line-height: 36rpx; } .head-title-active { width: 160rpx; font-size: 32rpx; font-weight: 600; color: #999; line-height: 36rpx; } .head-title-animation { animation-name: title-animation; animation-duration: 0.1s; animation-timing-function: ease-out; animation-fill-mode: forwards; } .head-title-line { position: relative; &::before { content: ''; width: 1rpx; height: 34rpx; background-color: #e4e7ed; position: absolute; left: -30rpx; top: 50%; transform: translateY(-50%); } } .head-subtitle { font-size: 26rpx; font-weight: 400; color: #afb6c0; text-align: left; display: flex; } } /* ================== margin padding: 内外边距 ==================== */ @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; } } } } /* ================== radius ==================== */ @for $i from 0 through 100 { // 只要双数和能被5除尽的数 @if $i % 2==0 or $i % 5==0 { .ss-radius-#{$i}, .ss-r-#{$i} { border-radius: $i + rpx; } .ss-r-t-#{$i} { border-top-left-radius: $i + rpx; border-top-right-radius: $i + rpx; } .ss-r-b-#{$i} { border-bottom-left-radius: $i + rpx; border-bottom-right-radius: $i + rpx; } @each $short, $long in tl 'top-left', tr 'top-right', bl 'bottom-right', br 'bottom-right' { // 定义外边距 .ss-r-#{$short}-#{$i} { border-#{$long}-radius: $i + rpx; } // 定义内边距 .ss-radius-#{$long}-#{$i} { border-#{$long}-radius: $i + rpx; } } } } /* ================== flex布局 ==================== */ .ss-flex { display: flex; flex-direction: row; align-items: center; } .ss-flex-1 { flex: 1; } .ss-flex-col { display: flex; flex-direction: column; } .ss-flex-wrap { flex-wrap: wrap; } .ss-flex-nowrap { flex-wrap: nowrap; } .ss-col-center { align-items: center; } .ss-col-top { align-items: flex-start; } .ss-col-bottom { align-items: flex-end; } .ss-col-stretch { align-items: stretch; } .ss-row-center { justify-content: center; } .ss-row-left { justify-content: flex-start; } .ss-row-right { justify-content: flex-end; } .ss-row-between { justify-content: space-between; } .ss-row-around { justify-content: space-around; } .ss-self-start { align-self: flex-start; } .ss-self-end { align-self: flex-end; } .ss-self-center { align-self: center; } .ss-h-100 { height: 100%; } .ss-w-100 { width: 100%; } /* ================== 按钮 ==================== */ .ss-reset-button { padding: 0; margin: 0; font-size: inherit; background-color: transparent; color: inherit; position: relative; border: 0rpx; /* #ifndef APP-NVUE */ display: flex; /* #endif */ align-items: center; justify-content: center; box-sizing: border-box; text-align: center; text-decoration: none; white-space: nowrap; vertical-align: baseline; transform: translate(0, 0); } .ss-reset-button.button-hover { transform: translate(1px, 1px); background: none; } .ss-reset-button::after { border: none; } .login-btn-start { width: 158rpx; height: 56rpx; line-height: normal; background: #00B760; border-radius: 28rpx; font-size: 26rpx; font-weight: 500; color: #fff; } //页面底部单个按钮 .recomm-button { color: #fff; width: 85%; height: 44px; line-height: 44px; margin: 20px auto; background-color: #00B760 !important; // border-radius: 25px; } //页面底部两个按钮 .second-button { width: 50vw; height: 44px; margin: 15px; background-color: #00B760 !important; // border-radius: 25px; } .second-button:first-child { margin: 15px 0 15px 15px; } //底部按钮公用定位 .bottom-sticky{ display: flex; width:100vw; position: fixed; bottom:0; left: 0; background-image:linear-gradient(rgba(255,255,255,0.8),white); } // 主要页面大按钮用这个 .send-button { width: 90vw; height:44px; line-height: 44px; margin:20px auto; background-color: #00B760 !important; // border-radius: 25px; color: #fff; } .main-button-color { background-color: #00B760 !important; color: #fff; } .commonBtnStyle { width: 45vw; height: 44px; line-height: 44px; color: #fff; } .save-button { margin: 20px 0 20px 20px; background-color: #00B760 !important; } .delete-button { margin: 20px auto; color: #FE574A !important; background-color: #fff !important; border: 1px solid #FE574A; } //禁用按钮 .disabled-button { width: 85%; height: 44px; line-height: 44px; margin: 20px auto; background-color: grey !important; // border-radius: 25px; } .big-cancel-button { width: 90vw; height:44px; line-height: 44px; margin:20px auto; background-color: #fff !important; color: #b3aeae; font-size: 28rpx; } // 头像 .r-avatar { width: 40px; height: 40px; border-radius: 50%; // margin: 25rpx; } .avatar{ width: 80px; height: 80px; border-radius: 50%; margin: auto; } .r-avatar-small { width: 25px; height: 25px; border-radius: 50%; margin: 20rpx; } .title-des { color: #3f424f; font-size: 19px; margin: 10px 0; } .scrollBox{ height: 100%; }