|
|
@@ -0,0 +1,547 @@
|
|
|
+//================common begin=================
|
|
|
+
|
|
|
+//颜色
|
|
|
+$u-color-border: #eee;
|
|
|
+$u-color-theme: #999;
|
|
|
+$u-color-warn: #f44;
|
|
|
+$u-color-bg: #eff4ff; //全站背景色
|
|
|
+$u-color-theme-light: #ccc;
|
|
|
+$u-color-theme-red: #f44;
|
|
|
+$u-type-primary: #007aff;
|
|
|
+$u-type-warning: #f0ad4e;
|
|
|
+$u-type-success: #00af51;
|
|
|
+$u-type-info: #5bc0de;
|
|
|
+$u-type-error: #dd524d;
|
|
|
+$u-main-color: #333;
|
|
|
+$u-color-content: #666;
|
|
|
+$u-tips-color: #999;
|
|
|
+$u-light-color: #ccc;
|
|
|
+$u-placeholder-color: #808080;
|
|
|
+$u-icon-color: #999;
|
|
|
+$u-selectd-color: #52AAFF;
|
|
|
+$u-color-link: #72A4E5;
|
|
|
+
|
|
|
+a:hover {
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+//边框
|
|
|
+
|
|
|
+.bds {
|
|
|
+ border: solid 1rpx $u-color-border !important;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.bdd {
|
|
|
+ border: dashed 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdd_t {
|
|
|
+ border-top: dashed 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdd_l {
|
|
|
+ border-left: dashed 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdd_r {
|
|
|
+ border-right: dashed 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdd_t {
|
|
|
+ border-top: dashed 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bds_b {
|
|
|
+ border-bottom: solid 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bds_t {
|
|
|
+ border-top: solid 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bds_l {
|
|
|
+ border-left: solid 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bds_r {
|
|
|
+ border-right: solid 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdd_b {
|
|
|
+ border-bottom: dashed 1rpx $u-color-border !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdn {
|
|
|
+ border: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdn_b {
|
|
|
+ border-bottom: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdn_t {
|
|
|
+ border-top: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.bdn_l {
|
|
|
+ border-left: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.main_bg {
|
|
|
+ background-color: #F7F7F7;
|
|
|
+}
|
|
|
+
|
|
|
+.cursor {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.cursor_none {
|
|
|
+ cursor: default !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+//浮动
|
|
|
+.fl {
|
|
|
+ float: left !important;
|
|
|
+}
|
|
|
+
|
|
|
+.fr {
|
|
|
+ float: right !important;
|
|
|
+}
|
|
|
+
|
|
|
+.clear_both {
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.clearfix:after {
|
|
|
+ content: "\20";
|
|
|
+ display: block;
|
|
|
+ height: 0;
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+
|
|
|
+.ma0 {
|
|
|
+ margin: 0 auto !important;
|
|
|
+}
|
|
|
+
|
|
|
+//文字
|
|
|
+
|
|
|
+.tl {
|
|
|
+ text-align: left !important;
|
|
|
+}
|
|
|
+
|
|
|
+.tr {
|
|
|
+ text-align: right !important;
|
|
|
+}
|
|
|
+
|
|
|
+.tc {
|
|
|
+ text-align: center !important;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.fwb {
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//循环
|
|
|
+@for $i from 1 through 9 {
|
|
|
+ .fwb#{$i*100} {
|
|
|
+ font-weight: #{$i*100};
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 10 {
|
|
|
+ .opacity#{$i} {
|
|
|
+ opacity: calc($i / 10);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 12 through 100 {
|
|
|
+ .fs#{$i} {
|
|
|
+ font-size: $i*1rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 12 through 100 {
|
|
|
+ .lh#{$i} {
|
|
|
+ line-height: $i*1rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 1 through 150 {
|
|
|
+ .h#{$i*10} {
|
|
|
+ height: #{$i*10}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .m#{$i*5} {
|
|
|
+ margin: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .mb#{$i*5} {
|
|
|
+ margin-bottom: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 80 {
|
|
|
+ .mt#{$i*5} {
|
|
|
+ margin-top: #{$i*5}rpx !important
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .ml#{$i*5} {
|
|
|
+ margin-left: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .mr#{$i*5} {
|
|
|
+ margin-right: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+@for $i from 0 through 24 {
|
|
|
+ .p#{$i*5} {
|
|
|
+ padding: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .pl#{$i*5} {
|
|
|
+ padding-left: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .pr#{$i*5} {
|
|
|
+ padding-right: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .pb#{$i*5} {
|
|
|
+ padding-bottom: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 40 {
|
|
|
+ .pt#{$i*5} {
|
|
|
+ padding-top: #{$i*5}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 1 through 100 {
|
|
|
+ .pct#{$i} {
|
|
|
+ width: $i*1% !important
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 80 {
|
|
|
+ .w#{$i*20} {
|
|
|
+ width: #{$i*20}rpx !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+@for $i from 0 through 80 {
|
|
|
+ .border_radius_#{$i} {
|
|
|
+ border-radius: #{$i}rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 1 through 10 {
|
|
|
+ .nowrap#{$i} {
|
|
|
+ /* 超出部分隐藏 */
|
|
|
+ overflow: hidden;
|
|
|
+ /* 末尾加省略号 */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ /* 行数，也可以设为1，用来做单行 */
|
|
|
+ -webkit-line-clamp:#{$i}; //在第几行加省略号
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@for $i from 0 through 100 {
|
|
|
+ .zindex#{$i*1} {
|
|
|
+ z-index: #{$i*1} !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//字体省略nowrap
|
|
|
+.nowrap {
|
|
|
+ overflow: hidden;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+ /*兼容opera*/
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ /*这就是省略号喽*/
|
|
|
+ overflow: hidden;
|
|
|
+ /*设置超过的隐藏*/
|
|
|
+ white-space: nowrap;
|
|
|
+ /*设置不折行*/
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//定位
|
|
|
+.pos_r {
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.pos_a {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
+
|
|
|
+.pos_f {
|
|
|
+ position: fixed;
|
|
|
+}
|
|
|
+
|
|
|
+.pos_s {
|
|
|
+ position: sticky;
|
|
|
+ top: 0
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+//圆角
|
|
|
+.border_radius_s {
|
|
|
+ border-radius: 10rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.border_radius_m {
|
|
|
+ border-radius: 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.border_radius_l {
|
|
|
+ border-radius: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+//空白
|
|
|
+.blank_xxs {
|
|
|
+ height: 12rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blank_xs {
|
|
|
+ height: 24rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blank_s {
|
|
|
+ height: 32rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blank_m {
|
|
|
+ height: 48rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blank_l {
|
|
|
+ height: 60rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blank_xl {
|
|
|
+ height: 72rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blank_xxl {
|
|
|
+ height: 84rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.black_index {
|
|
|
+ height: 140rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.blank_tabbar {
|
|
|
+ height: 220rpx;
|
|
|
+}
|
|
|
+
|
|
|
+//字体颜色
|
|
|
+.text_color_theme {
|
|
|
+ color: $u-color-theme;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_theme_warn {
|
|
|
+ color: $u-color-warn;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_theme_light {
|
|
|
+ color: $u-color-theme-light;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_theme_red {
|
|
|
+ color: $u-color-theme-red;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_primary {
|
|
|
+ color: $u-type-primary;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_warning {
|
|
|
+ color: $u-type-warning;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_success {
|
|
|
+ color: $u-type-success;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_info {
|
|
|
+ color: $u-type-info;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_error {
|
|
|
+ color: $u-type-error;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_link {
|
|
|
+ color: $u-color-link;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_main {
|
|
|
+ color: $u-main-color;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_content {
|
|
|
+ color: $u-color-content;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_tips {
|
|
|
+ color: $u-tips-color;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_light {
|
|
|
+ color: $u-light-color;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_placeholder {
|
|
|
+ color: $u-placeholder-color;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_white {
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_icon {
|
|
|
+ color: $u-icon-color;
|
|
|
+}
|
|
|
+
|
|
|
+.text_color_selected {
|
|
|
+ color: $u-selectd-color;
|
|
|
+}
|
|
|
+
|
|
|
+//盒子
|
|
|
+.dis_blk {
|
|
|
+ display: block !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_none {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_inline {
|
|
|
+ display: inline !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_inb {
|
|
|
+ display: inline-block !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex {
|
|
|
+ display: flex !important;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex_align_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex_align_right_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex_align_between_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex_align_around_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-around;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex_align_content_center {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex_align_content_evenly {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-evenly;
|
|
|
+}
|
|
|
+
|
|
|
+.dis_flex_align_center_flex_w {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_main {
|
|
|
+ background-color: $u-color-bg;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_primary {
|
|
|
+ background-color: $u-type-primary;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_warning {
|
|
|
+ background-color: $u-type-warning;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_error {
|
|
|
+ background-color: $u-type-error;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_success {
|
|
|
+ background-color: $u-type-success;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_f3 {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+}
|
|
|
+
|
|
|
+//背景色
|
|
|
+.bg_f5 {
|
|
|
+ background: #F5F5F5;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_f7 {
|
|
|
+ background: #f7f7f7;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_ff {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_none {
|
|
|
+ background: none;
|
|
|
+}
|
|
|
+
|
|
|
+.bg_light {
|
|
|
+ background-color: #f7fafe;
|
|
|
+}
|
