-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.ttss
133 lines (123 loc) · 2.59 KB
/
app.ttss
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
/* @import './colorui/main.ttss';
@import './colorui/icon.ttss'; */
@import './colorui/animation.ttss';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
/* 阴影颜色 */
--box-shadow: rgba(200, 200, 200, 0.2);
/* 功能色 */
--primary: #3370ff;
--success: #34c724;
--warning: #ff8800;
--error: #f54a45;
/* 中性色 */
--gray-scale-0: #ffffff;
--gray-scale-50: #f8f9fa;
--gray-scale-100: #f5f6f7;
--gray-scale-200: #eff0f1;
--gray-scale-300: #dee0e3;
--gray-scale-400-disabled: #bbbfc4;
--gray-scale-500-guide: #8f959e;
--gray-scale-600-h2: #646a73;
--gray-scale-650: #51565d;
--gray-scale-700: #373c43;
--gray-scale-800: #2b2f36;
--gray-scale-900-h1: #1f2329;
--gray-scale-1000: #000000;
/* 间隔 */
--margin-12px: 12px;
--margin-24px: 24px;
--margin-36px: 36px;
/* 字体 */
--font-size-h1: 24px;
--font-size-h2: 20px;
--font-size-h3-pc: 18px;
--font-size-h3-app: 17px;
--font-size-text-pc: 14px;
--font-size-text-app: 16px;
--font-size-text-help-pc: 12px;
--font-size-text-help-app: 14px;
--font-size-help: 12px;
--line-height-h1: 32px;
--line-height-h2: 28px;
--line-height-h3-pc: 26px;
--line-height-h3-app: 24px;
--line-height-text: 22px;
--line-height-text-help: 20px;
--line-height-help-pc: 20px;
--line-height-help-app: 18px;
--font-weight-h1: 600;
--font-weight-h2: 500;
--font-weight-h3: 500;
--font-weight-text: 400;
--font-weight-text-help-pc: 500;
--font-weight-text-help-app: 400;
--font-weight-help-pc: 400;
--font-weight-help-app: 500;
}
#app {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
background-color: var(--gray-scale-100);
}
/* 单页面容器 */
.page {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
color: var(--gray-scale-900-h1);
}
/* 全局宽度样式 */
.width-app {
width: calc(100% - 48px);
}
/* 全局添加按钮样式 */
.add-btn {
position: fixed;
right: 16px;
bottom: 60px;
width: 55px;
height: 55px;
border-radius: 50%;
}
.add-btn:active {
box-shadow: 0 4px 8px var(--box-shadow);
}
/* 全局空页面样式 */
.empty {
width: 100%;
height: 200px;
}
/* 全局底部信息 */
.foot {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 24px;
margin-bottom: 24px;
}
.foot > * {
color: #8c8c8c;
font-size: 12px;
}
/* PC 端适配 */
@media (min-width: 640px) {
.width-app {
width: 50%;
}
}
/* PC 端适配 */
@media (min-width: 900px) {
.width-app {
width: 40%;
}
}