/* color变量 */
$x-color-primary: #FD5300;
$x-color-secondary: #CAD6B2;
$x-color-success: #6CE03A;
$x-color-info: #46E4FC;
$x-color-warning: #DF8E01;
$x-color-red: #FF6816;
$x-color-light: #F2F5FE;
$x-color-dark: #343a40;
$x-border-color: #efefef;

/* 颜色 */
$color: 
  ('primary' $x-color-primary),
  ("secondary" $x-color-secondary),
  ("success" $x-color-success),
  ("info" $x-color-info),
  ("warning" $x-color-warning),
  ("red" $x-color-red),
  ("light" $x-color-light),
  ("dark" $x-color-dark),
  ("black" #333333),
  ("black6" #666666),
  ("black9" #999999),
  ("white" #ffffff);
  
// 边距
$margin-padding: 
  ('0' 0rpx),
  ('s' 5rpx),
  ("m" 15rpx),
  ("l" 25rpx),
  ("xl" 35rpx),
  ("xxl" 45rpx);

// 宽高
$width-height: 
  ('s' 40rpx),
  ("m" 70rpx),
  ("l" 100rpx),
  ("xl" 130rpx),
  ("xxl" 160rpx);

/* 解决图片闪烁问题  */
image{will-change: transform}
 
/* 定义宽高  */
.w-750{width: 750rpx;}
.w-700{width: 700rpx ;}
.w-100{width: 100%!important ;}

/* 按钮 */
.x-button{font-size:28rpx; line-height:40rpx !important; border-radius:6rpx;width: 100%;}
.x-button:after {border: none !important;}

.x-padding{padding-left: 25rpx;padding-right: 25rpx;}
.x-margin{margin-left: 25rpx;margin-right: 25rpx;}
.x-padding-top{padding-top: 25rpx;}
.x-padding-bottom{padding-bottom: 25rpx;padding-bottom: 25rpx;}
.x-padding-top-small{padding-top: 15rpx;}
.x-padding-bottom-small{padding-bottom: 15rpx;padding-bottom: 15rpx;}
.x-margin-top{margin-top: 25rpx;}
.x-margin-bottom{margin-bottom: 25rpx;margin-bottom: 25rpx;}
.x-margin-top-small{margin-top: 15rpx;}
.x-margin-bottom-small{margin-bottom: 15rpx;margin-bottom: 15rpx;}

/*  文本  */
.x-h1{font-size:80rpx;line-height: 90rpx;}
.x-h2{font-size:60rpx;line-height: 70rpx;}
.x-h3{font-size:45rpx;line-height: 55rpx;}
.x-h4{font-size:32rpx;line-height: 42rpx;}
.x-h5{font-size:30rpx;line-height: 40rpx;}
.x-h6{font-size:28rpx;line-height: 38rpx;}
.x-bold{font-weight:bold;}
.x-text{font-size:26rpx; line-height:50rpx;}
.x-desc{font-size:24rpx; line-height:44rpx;}
.x-text-small{font-size:22rpx; line-height:40rpx;}
.x-line-through{text-decoration:line-through;}
.x-italic{font-style:italic;}
.x-text-center{text-align:center;}
.x-text-left{text-align:left;}
.x-text-right{text-align:right;}

/* 文本超出隐藏 */
/* #ifdef APP-PLUS */
.x-text-ellipsis-3{lines:3;}
.x-text-ellipsis-2{lines:2;}
.x-text-ellipsis-2{lines:1;}
/* #endif */
/* #ifndef APP-PLUS */
.x-text-ellipsis-1{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.x-text-ellipsis-2{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
.x-text-ellipsis-3{display:-webkit-box;text-overflow:ellipsis;overflow:hidden;-webkit-line-clamp:3;-webkit-box-orient:vertical;}
/* #endif */

/* 文字颜色 */
.x-{
  @each $item in $color {
    &#{nth($item, 1)} { color: nth($item, 2) !important; }
  }
}

/* 背景颜色 */
.x-bg-{
  @each $item in $color {
    &#{nth($item, 1)} { background-color: nth($item, 2) !important; }
  }
}

// flex布局
.x-flex{display: flex !important;}
.x-row{flex-direction:row!important;display: flex!important;}
.x-col{flex-direction:column !important;display: flex!important;}
.x-wrap{ flex-direction:row!important; flex-wrap:wrap;display: flex!important;}
.x-nowrap{flex-direction:row!important; flex-wrap:nowrap!important;display: flex !important;}
.x-space-between{flex-direction:row!important; flex-wrap:nowrap!important; justify-content:space-between!important;display: flex!important;}
.x-align-top{align-items:flex-start!important;}
.x-align-center{align-items:center !important;}
.x-align-bottom{align-items:flex-end!important;}
.x-justify-top{justify-content:flex-start!important;}
.x-justify-center{justify-content:center!important;}
.x-justify-bottom{justify-content:flex-end!important;}
.x-justify-space-between{justify-content:space-between!important;}
.x-flex1{flex:1 !important;}
/* 定位 */
.x-footer{position: fixed !important;bottom: 0;left: 0;right: 0;}
.x-header{position: fixed !important;top: 0;left: 0;right: 0;}
 
/* 边框 */
.x-border{border-style:solid !important; border-width:1px!important; border-color:$x-border-color!important;}
.x-border-l{border-left-style:solid!important; border-left-width:1px!important; border-left-color:$x-border-color!important;}
.x-border-r{border-right-style:solid!important; border-right-width:1px!important; border-right-color:$x-border-color!important;}
.x-border-t{border-top-style:solid!important; border-top-width:1px!important; border-top-color:$x-border-color!important;}
.x-border-b{border-bottom-style:solid!important; border-bottom-width:1px !important; border-bottom-color:$x-border-color!important;}
.x-noborder{border-right-width:0!important; border-top-width:0!important; border-left-width:0!important; border-bottom-width:0!important;}
/* 圆角 */
.x-border-radius{border-radius:100rpx !important;}
.x-border-radius-medium{border-radius:60rpx !important;}
.x-border-radius-small{border-radius:30rpx !important;}
/* 阴影 */
.x-shadow{box-shadow: 0px 6px 18px 0px rgba(0, 0, 0, 0.14);}

/* 定义宽高  */
 @each $item in $width-height {
   .x-wh-#{nth($item, 1)} {width:nth($item, 2) !important;height:nth($item, 2) !important;}
 }
 
/* 内边距  */
@each $item in $margin-padding {
  .x-p-#{nth($item, 1)} {padding-left:nth($item, 2) !important;padding-bottom:nth($item, 2) !important;padding-top:nth($item, 2) !important;padding-right:nth($item, 2) !important;}
  .x-px-#{nth($item, 1)} {padding-right:nth($item, 2) !important;padding-left:nth($item, 2) !important;}
  .x-py-#{nth($item, 1)} {padding-top:nth($item, 2) !important;padding-bottom:nth($item, 2) !important;}
  .x-pt-#{nth($item, 1)} {padding-top:nth($item, 2) !important;}
  .x-pr-#{nth($item, 1)} {padding-right:nth($item, 2) !important;}
  .x-pb-#{nth($item, 1)} {padding-bottom:nth($item, 2) !important;}
  .x-pl-#{nth($item, 1)} {padding-left:nth($item, 2) !important;}
}

/* 外边距  */
@each $item in $margin-padding {
  .x-m-#{nth($item, 1)} {margin-left:nth($item, 2) !important;margin-bottom:nth($item, 2) !important;margin-top:nth($item, 2) !important;margin-right:nth($item, 2) !important;}
  .x-mx-#{nth($item, 1)} {margin-right:nth($item, 2) !important;margin-left:nth($item, 2) !important;}
  .x-my-#{nth($item, 1)} {margin-top:nth($item, 2) !important;margin-bottom:nth($item, 2) !important;}
  .x-mt-#{nth($item, 1)} {margin-top:nth($item, 2) !important;}
  .x-mr-#{nth($item, 1)} {margin-right:nth($item, 2) !important;}
  .x-mb-#{nth($item, 1)} {margin-bottom:nth($item, 2) !important;}
  .x-ml-#{nth($item, 1)} {margin-left:nth($item, 2) !important;}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168