Fast-UI

# 布局样式

# flex弹性布局

按照约定，全局统一的样式应设为变量，主要为了方便后期维护或者进项源码项目开发效率

.flex {
	display: flex;
}
.basis-xs {
	flex-basis: 20%;
}

.basis-sm {
	flex-basis: 40%;
}

.basis-df {
	flex-basis: 50%;
}

.basis-lg {
	flex-basis: 60%;
}

.basis-xl {
	flex-basis: 80%;
}
.flex-sub {
	flex: 1;
}

.flex-twice {
	flex: 2;
}

.flex-treble {
	flex: 3;
}

/* 在您编写view/text的地方直接使用*/  
/* 注意:在引用flex布局时，一定要引入flex */
 <view class="flex basis-xs"></view>
 <text class="flex basis-xs"></text>
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

# flex弹性布局-方向

flex弹性布局纵向方向和横向方向

.flex-direction {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.align-start {
	align-items: flex-start;
}

.align-end {
	align-items: flex-end;
}

.align-center {
	align-items: center;
}

.align-stretch {
	align-items: stretch;
}

.self-start {
	align-self: flex-start;
}

.self-center {
	align-self: flex-center;
}

.self-end {
	align-self: flex-end;
}

/* 在您编写view/text的地方直接使用*/  
/* 注意:在引用flex布局时，一定要引入flex */
 <view class="flex flex-direction"></view>
 <text class="flex flex-direction"></text>
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

# grid布局

按照约定，全局统一的样式应设为变量，主要为了方便后期维护或者进项源码项目开发效率

.grid {
	display: flex;
	flex-wrap: wrap;
}

.grid.grid-square {
	overflow: hidden;
}

.grid.grid-square .cu-tag {
	position: absolute;
	right: 0;
	top: 0;
	border-bottom-left-radius: 6upx;
	padding: 6upx 12upx;
	height: auto;
	background-color: rgba(0, 0, 0, 0.5);
}

.grid.grid-square>view>text[class*="cuIcon-"] {
	font-size: 52upx;
	position: absolute;
	color: #8799a3;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.grid.grid-square>view {
	margin-right: 20upx;
	margin-bottom: 20upx;
	border-radius: 6upx;
	position: relative;
	overflow: hidden;
}
.grid.grid-square>view.bg-img image {
	width: 100%;
	height: 100%;
	position: absolute;
}
.grid.col-1.grid-square>view {
	padding-bottom: 100%;
	height: 0;
	margin-right: 0;
}

.grid.col-2.grid-square>view {
	padding-bottom: calc((100% - 20upx)/2);
	height: 0;
	width: calc((100% - 20upx)/2);
}

.grid.col-3.grid-square>view {
	padding-bottom: calc((100% - 40upx)/3);
	height: 0;
	width: calc((100% - 40upx)/3);
}

.grid.col-4.grid-square>view {
	padding-bottom: calc((100% - 60upx)/4);
	height: 0;
	width: calc((100% - 60upx)/4);
}

.grid.col-5.grid-square>view {
	padding-bottom: calc((100% - 80upx)/5);
	height: 0;
	width: calc((100% - 80upx)/5);
}

.grid.col-2.grid-square>view:nth-child(2n),
.grid.col-3.grid-square>view:nth-child(3n),
.grid.col-4.grid-square>view:nth-child(4n),
.grid.col-5.grid-square>view:nth-child(5n) {
	margin-right: 0;
}

.grid.col-1>view {
	width: 100%;
}

.grid.col-2>view {
	width: 50%;
}

.grid.col-3>view {
	width: 33.33%;
}

.grid.col-4>view {
	width: 25%;
}

.grid.col-5>view {
	width: 20%;
}

/* 在您编写view的地方直接使用*/  
 <view class="grid "></view>
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

# margin 外边距

按照约定，全局统一的样式应设为变量，主要为了方便后期维护或者进项源码项目开发效率

.margin-0 {
	margin: 0;
}

.margin-xs {
	margin: 10upx;
}

.margin-sm {
	margin: 20upx;
}

.margin {
	margin: 30upx;
}

.margin-lg {
	margin: 40upx;
}

.margin-xl {
	margin: 50upx;
}

.margin-top-xs {
	margin-top: 10upx;
}

.margin-top-sm {
	margin-top: 20upx;
}

.margin-top {
	margin-top: 30upx;
}

.margin-top-lg {
	margin-top: 40upx;
}

.margin-top-xl {
	margin-top: 50upx;
}

.margin-right-xs {
	margin-right: 10upx;
}

.margin-right-sm {
	margin-right: 20upx;
}

.margin-right {
	margin-right: 30upx;
}

.margin-right-lg {
	margin-right: 40upx;
}

.margin-right-xl {
	margin-right: 50upx;
}

.margin-bottom-xs {
	margin-bottom: 10upx;
}

.margin-bottom-sm {
	margin-bottom: 20upx;
}

.margin-bottom {
	margin-bottom: 30upx;
}

.margin-bottom-lg {
	margin-bottom: 40upx;
}

.margin-bottom-xl {
	margin-bottom: 50upx;
}

.margin-left-xs {
	margin-left: 10upx;
}

.margin-left-sm {
	margin-left: 20upx;
}

.margin-left {
	margin-left: 30upx;
}

.margin-left-lg {
	margin-left: 40upx;
}

.margin-left-xl {
	margin-left: 50upx;
}

.margin-lr-xs {
	margin-left: 10upx;
	margin-right: 10upx;
}

.margin-lr-sm {
	margin-left: 20upx;
	margin-right: 20upx;
}

.margin-lr {
	margin-left: 30upx;
	margin-right: 30upx;
}

.margin-lr-lg {
	margin-left: 40upx;
	margin-right: 40upx;
}

.margin-lr-xl {
	margin-left: 50upx;
	margin-right: 50upx;
}

.margin-tb-xs {
	margin-top: 10upx;
	margin-bottom: 10upx;
}

.margin-tb-sm {
	margin-top: 20upx;
	margin-bottom: 20upx;
}

.margin-tb {
	margin-top: 30upx;
	margin-bottom: 30upx;
}

.margin-tb-lg {
	margin-top: 40upx;
	margin-bottom: 40upx;
}

.margin-tb-xl {
	margin-top: 50upx;
	margin-bottom: 50upx;
}

/* 在您编写view/text的地方直接使用*/  
 <view class="margin-0"></view>
 <text class="grid flex-direction"></text>
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

# padding 内边距

按照约定，全局统一的样式应设为变量，主要为了方便后期维护或者进项源码项目开发效率

.padding-0 {
	padding: 0;
}

.padding-xs {
	padding: 10upx;
}

.padding-sm {
	padding: 20upx;
}

.padding {
	padding: 30upx;
}

.padding-lg {
	padding: 40upx;
}

.padding-xl {
	padding: 50upx;
}

.padding-top-xs {
	padding-top: 10upx;
}

.padding-top-sm {
	padding-top: 20upx;
}

.padding-top {
	padding-top: 30upx;
}

.padding-top-lg {
	padding-top: 40upx;
}

.padding-top-xl {
	padding-top: 50upx;
}

.padding-right-xs {
	padding-right: 10upx;
}

.padding-right-sm {
	padding-right: 20upx;
}

.padding-right {
	padding-right: 30upx;
}

.padding-right-lg {
	padding-right: 40upx;
}

.padding-right-xl {
	padding-right: 50upx;
}

.padding-bottom-xs {
	padding-bottom: 10upx;
}

.padding-bottom-sm {
	padding-bottom: 20upx;
}

.padding-bottom {
	padding-bottom: 30upx;
}

.padding-bottom-lg {
	padding-bottom: 40upx;
}

.padding-bottom-xl {
	padding-bottom: 50upx;
}

.padding-left-xs {
	padding-left: 10upx;
}

.padding-left-sm {
	padding-left: 20upx;
}

.padding-left {
	padding-left: 30upx;
}

.padding-left-lg {
	padding-left: 40upx;
}

.padding-left-xl {
	padding-left: 50upx;
}

.padding-lr-xs {
	padding-left: 10upx;
	padding-right: 10upx;
}

.padding-lr-sm {
	padding-left: 20upx;
	padding-right: 20upx;
}

.padding-lr {
	padding-left: 30upx;
	padding-right: 30upx;
}

.padding-lr-lg {
	padding-left: 40upx;
	padding-right: 40upx;
}

.padding-lr-xl {
	padding-left: 50upx;
	padding-right: 50upx;
}

.padding-tb-xs {
	padding-top: 10upx;
	padding-bottom: 10upx;
}

.padding-tb-sm {
	padding-top: 20upx;
	padding-bottom: 20upx;
}

.padding-tb {
	padding-top: 30upx;
	padding-bottom: 30upx;
}

.padding-tb-lg {
	padding-top: 40upx;
	padding-bottom: 40upx;
}

.padding-tb-xl {
	padding-top: 50upx;
	padding-bottom: 50upx;
}

/* 在您编写view的地方直接使用*/  
 <view class="padding-0"></view>
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

# 浮动

按照约定，全局统一的样式应设为变量，主要为了方便后期维护或者进项源码项目开发效率

.cf::after,
.cf::before {
	content: " ";
	display: table;
}

.cf::after {
	clear: both;
}

.fl {
	float: left;
}

.fr {
	float: right;
}
/* 在您编写view的地方直接使用*/  
 <view class="fl"></view>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Border 边框

主要解决样式中写1rpx在大部分手机上变粗的问题，对于前端开发者来说，要处理这个问题，必须先补充一个知识点，就是设备的 物理像素[设备像素] & 逻辑像素[CSS像素]，感兴趣的同学可以自行去查阅资料，这里就不做过多讲解了

  • 上边框
    @mixin top-line($color, $line: solid, $index: 0) {
  content: '';
  position: absolute;
  z-index: $index;
  top: 0;
  left: 0;
  width: 100%;
  border-top: 1px $line $color;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 使用方法见下*/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
  • 右边框
    @mixin right-line($color, $line: solid, $index: 0) {
  content: '';
  position: absolute;
  z-index: $index;
  top: 0;
  right: 0;
  height: 100%;
  border-right: 1px $line $color;
  -webkit-transform: scaleX(.5);
  transform: scaleX(.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 使用方法见下*/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
  • 下边框
    @mixin bottom-line($color, $line: solid, $index: 0) {
  content: '';
  position: absolute;
  z-index: $index;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px $line $color;
  -webkit-transform: scaleY(.5);
  transform: scaleY(.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 使用方法见下*/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
  • 左边框
    @mixin left-line($color, $line: solid, $index: 0) {
  content: '';
  position: absolute;
  z-index: $index;
  top: 0;
  left: 0;
  height: 100%;
  border-left: 1px $line $color;
  -webkit-transform: scaleX(.5);
  transform: scaleX(.5);
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
/* 使用方法见下*/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
  • 围绕边框（四周边框）
    @mixin around-line($color, $line: solid, $index: 0, $radius: 0rpx) {
  content: ' ';
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  left: 0;
  top: 0;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5, 0.5);
  transform: scale(0.5, 0.5);
  border: 1px $line $color;
  border-radius: $radius * 2;
  z-index: $index;
}
/* 使用方法见下*/
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
  • 用法及注意事项









     
     
     
     




    <!-- 特别注意： 使用伪元素实现的边框，伪元素的父盒子必须存在定位，否则边框位置会不受控制 -->
<template>
  <view class="btn">细边框按钮</view>
</template>
<style>
.btn {
  width: 200rpx;
  line-height: 100rpx;
  text-align: cneter;
  position: relative;
  &:after {
    @include bottom-line(#eeeeee);
  }
}
</style>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

表单样式