gy-webcode2 1.2.1 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,16 +1,23 @@
1
1
  .sidebarBox{
2
- width: 210px;
2
+ width: 200px;
3
3
  // background: #282f45;
4
- @include theme('background-color','sidebar_bgColor');
4
+ //@include theme('background-color','sidebar_bgColor');
5
5
  @include theme('color','sidebar_color');
6
6
  display: flex;
7
7
  flex-direction: column;
8
8
  transition: all 0.3s ease;
9
9
  user-select: none;
10
+ position: relative;
10
11
  // position: relative;
11
12
  // z-index: 100;
13
+ &.disabled_transition{
14
+ transition: none;
15
+ }
12
16
  &.mini{
13
- width: 48px;
17
+ width: 48px !important;
18
+ .dragBtn{
19
+ display: none;
20
+ }
14
21
  .sildeBody {
15
22
  overflow: visible;
16
23
  background-size: 70%;
@@ -20,7 +27,8 @@
20
27
  position: relative;
21
28
  .header{
22
29
  .icon{
23
- transform: scale(1.3);
30
+ width: 30px;
31
+ transform: scale(1.2);
24
32
  }
25
33
  .name,.pointer{
26
34
  opacity: 0;
@@ -50,10 +58,14 @@
50
58
  // left: 42px;
51
59
  opacity: 1;
52
60
  transform: scale(1);
61
+ //background: #fff;
62
+ @include theme('background-color','wrapper_bgColor2');
63
+ border-radius: $radius_mini;
64
+ padding: 10px;
53
65
  }
54
66
  }
55
67
  .children{
56
- display: block !important;
68
+ display: block !important;
57
69
  visibility: hidden;
58
70
  opacity: 0;
59
71
  width: 210px;
@@ -69,7 +81,16 @@
69
81
 
70
82
  }
71
83
  }
72
-
84
+
85
+
86
+ .pageName{
87
+ .icon{
88
+ margin-left: 8px;
89
+ }
90
+ .name{
91
+ display: none;
92
+ }
93
+ }
73
94
  }
74
95
 
75
96
  .sildetop{
@@ -90,47 +111,77 @@
90
111
  .sildeBody{
91
112
  flex-grow: 1;
92
113
  overflow: auto;
93
- background: url("~gy-webcode2/img/slogan.png") bottom no-repeat;
114
+ background: url("gy-webcode2/img/slogan.png") bottom no-repeat;
94
115
  &.seriesLogoHide{
95
116
  background-image: none;
96
117
  }
97
118
  }
98
-
119
+ .pageName{
120
+ height: 65px;
121
+ display: flex;
122
+ overflow: hidden;
123
+ align-items: center;
124
+ .icon{
125
+ font-size: 26px;
126
+ width: 30px;
127
+ height: 30px;
128
+ margin-left: 20px;
129
+ display: flex;
130
+ align-items: center;
131
+ justify-content: center;
132
+ }
133
+ .name{
134
+ margin-left: 10px;
135
+ font-size: 18px;
136
+ //width: 500px;
137
+ //flex-shrink:0;
138
+ }
139
+ }
140
+
99
141
  .childrenBox{
100
142
  transition: all 0.3s ease;
101
143
  overflow: hidden;
102
-
144
+ //border: 1px solid #f00;
145
+ margin:0 $spacing ;
146
+
103
147
  .header{
104
- height: 44px;
105
- line-height: 44px;
148
+ height: 42px;
149
+ line-height: 42px;
106
150
  display: flex;
107
151
  // padding-left: 8px;
108
152
  // color: #acb5ce;
109
153
  cursor: pointer;
110
154
  transition: all 0.3s ease;
111
155
  position: relative;
156
+ //color: #262626;
112
157
  &:hover{
113
158
  // color: #60abff ;
114
159
  @include themeColor('color','hover');
115
160
  }
116
161
  .icon{
117
162
  transition: all 0.3s ease;
118
- width: 42px;
119
- color: #7d85a3;
163
+ width: 36px;
164
+ //color: #595959;
120
165
  text-align: center;
121
166
  position: absolute;
122
167
  left: 0;
123
168
  bottom: 0;
169
+
124
170
  top: 0;
125
171
  }
126
172
  .name{
127
173
  transition: all 0.3s ease;
128
174
  flex: 1;
129
- padding-left: 42px;
175
+ padding-left: 36px;
130
176
  }
131
177
  .pointer{
132
178
  transition: all 0.3s ease;
133
179
  width: 26px;
180
+ font-size: 10px;
181
+ //border: 1px solid #ff0;
182
+ text-align: center;
183
+ transform: rotate(-180deg);
184
+ @include theme('color','sidebar_color',0.5);
134
185
  .open{
135
186
  display: none;
136
187
  }
@@ -140,36 +191,43 @@
140
191
  }
141
192
  }
142
193
  .children{
143
- @include theme('background-color','sidebar_children_bgColor');
194
+
144
195
  font-size: 14px;
145
196
  // padding: 4px ;
146
197
  // padding: 0 4px;
147
198
  ul{
148
- padding-top: 8px;
149
- padding-left: 5px;
150
- padding-right: 5px;
199
+ //padding-top: $spacing;
200
+ //padding-left: $spacing;
201
+ //padding-right: $spacing;
151
202
  overflow: hidden;
203
+
152
204
  // padding: 5px 0 5px 45px;
153
205
  li{
154
206
  overflow: hidden;
155
- line-height: 40px;
207
+ line-height: 42px;
156
208
  cursor: pointer;
157
209
  padding-right: 10px;
158
- padding-left: 45px;
210
+ padding-left: 36px;
159
211
  // color: #acb5ce;
160
212
  transition: all 0.3s ease;
161
213
  // margin: 4px ;
162
- margin-bottom: 8px;
163
- border-radius: 5px;
214
+ //margin-bottom: 8px;
215
+ border-radius: $radius_mini;
164
216
  &:hover{
165
- @include themeColor('color','sidebar_menu2_hoverColor');
166
- @include themeColor('background-color','sidebar_menu2_hoverBgColor');
217
+ @include themeColor('color','sidebar_menu2_activeColor');
218
+ //background: #fff;
219
+
220
+ //@include themeColor('color','sidebar_menu2_hoverColor');
221
+ //@include themeColor('background-color','sidebar_menu2_hoverBgColor');
167
222
  }
168
223
  &:active{
169
- @include themeColor('background-color','sidebar_menu2_activeBgColor')
224
+ @include themeColor('color','sidebar_menu2_activeColor',0.5);
225
+ //background: rgba($color: #fff, $alpha: 0.5);
226
+ //@include themeColor('background-color','sidebar_menu2_activeBgColor')
170
227
  }
171
228
  &.active{
172
- @include themeColor('background-color','sidebar_menu2_activeBgColor');
229
+ //background: #fff;
230
+ @include theme('background-color','sidebar_children_activeBgColor');
173
231
  @include themeColor('color','sidebar_menu2_activeColor');
174
232
  }
175
233
  }
@@ -180,6 +238,7 @@
180
238
  .header{
181
239
  @include themeColor('color','sidebar_menu1_activeColor');
182
240
  .icon{
241
+ //color: #262626;
183
242
  @include themeColor('color','sidebar_menu1_activeColor');
184
243
  // color: #2394e6 !important;
185
244
  // &.itemColor_0{
@@ -196,6 +255,9 @@
196
255
  // }
197
256
  }
198
257
  .pointer{
258
+ //@include themeColor('color','active');
259
+ @include themeColor('color','sidebar_menu2_activeColor');
260
+ transform: rotate(0);
199
261
  .open{
200
262
  display: inline;
201
263
  }
@@ -206,4 +268,18 @@
206
268
  }
207
269
  }
208
270
  }
209
- }
271
+
272
+ .dragBtn{
273
+ position: absolute;
274
+ width: 4px;
275
+ //background: #f00;
276
+ right: 0;
277
+ top: 0;
278
+ z-index: 20;
279
+ bottom: 0;
280
+ user-select: none;
281
+ &:hover{
282
+ cursor: e-resize;
283
+ }
284
+ }
285
+ }
@@ -1,12 +1,14 @@
1
+ $myborderColor:#E5E6EB;
1
2
  .myTable{
2
3
  .el-table{
3
4
  color:$color;
5
+ border: 1px solid $myborderColor;
4
6
  td,th{
5
7
  padding: 8px 0 !important;
6
8
  }
7
9
  th{
8
10
  background: #f0f0f0;
9
- border-right: 1px solid #d9d9d9;
11
+ border-right: 1px solid $myborderColor;
10
12
  >.cell{
11
13
  color:$color;
12
14
  font-weight: initial;
@@ -26,32 +28,32 @@
26
28
 
27
29
  thead.is-group th.el-table__cell,th{
28
30
  // --el-fill-color-light:var(#fafafa);
29
- background: #f0f0f0 !important;
31
+ background: #F2F3F5 !important;
30
32
  // @include themeColor("-el-fill-color-light",'hover');
31
- border-right: 1px solid #d9d9d9 !important;
32
-
33
+ //border-right: 1px solid $myborderColor !important;
34
+
33
35
  >.cell{
34
36
  color:$color;
35
37
  font-weight: initial;
36
38
  font-size: 14px;
37
39
  }
38
-
40
+
39
41
  // &:nth-last-child(1){
40
42
  // border-radius:0 8px 0 0 ;
41
43
  // border-right: none !important;
42
44
  // }
43
45
  }
44
-
45
- thead tr:nth-of-type(1){
46
- th:nth-of-type(1){
47
- border-radius: 8px 0 0 0 ;
48
- }
49
- th:nth-last-child(1){
50
- border-radius:0 8px 0 0 ;
51
- border-right: none !important;
52
- }
53
- }
54
-
46
+
47
+ //thead tr:nth-of-type(1){
48
+ // th:nth-of-type(1){
49
+ // border-radius: 8px 0 0 0 ;
50
+ // }
51
+ // th:nth-last-child(1){
52
+ // border-radius:0 8px 0 0 ;
53
+ // border-right: none !important;
54
+ // }
55
+ //}
56
+ //
55
57
 
56
58
 
57
59
  .cell{
@@ -64,34 +66,34 @@
64
66
  padding: 7px 0 !important;
65
67
  }
66
68
  .el-table__header-wrapper .el-table__header{
67
- border-radius: 8px 8px 0 0;
69
+ //border-radius: 8px 8px 0 0;
68
70
  overflow: hidden;
69
71
  }
70
-
72
+
71
73
  }
72
74
  .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
73
75
  @include themeColor("background-color",'hover',0.1)
74
76
  }
75
77
 
76
78
  .el-table td.el-table__cell{
77
- border-bottom: 1px solid #ebebeb;
79
+ border-bottom: 1px solid $myborderColor;
78
80
  }
79
81
  .el-table--border .el-table__cell, .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed{
80
- border-right: 1px solid #d9d9d9;
82
+ border-right: 1px solid $myborderColor;
81
83
  }
82
84
  .el-table--border th.el-table__cell{
83
- border-bottom: 1px solid #d9d9d9;
85
+ border-bottom: 1px solid $myborderColor;
84
86
  }
85
87
 
86
88
  .el-table th.el-table__cell.is-leaf{
87
- border-bottom: 1px solid #d9d9d9;
89
+ border-bottom: 1px solid $myborderColor;
88
90
  }
89
91
 
90
-
92
+
91
93
  .el-table--border, .el-table--group{
92
94
  // border: none;
93
- border: 1px solid #ebebeb;
94
- border-radius: 8px 8px 0 0;
95
+ //border: 1px solid $myborderColor;
96
+ //border-radius: 8px 8px 0 0;
95
97
 
96
98
  }
97
99
  .el-table--border {
@@ -99,7 +101,7 @@
99
101
  border-bottom: none;
100
102
  }
101
103
 
102
-
104
+
103
105
 
104
106
 
105
107
  .el-table .cell{
@@ -125,7 +127,7 @@
125
127
 
126
128
  .el-table__fixed-right-patch{
127
129
  background: #f0f0f0;
128
- border-radius: 0 8px 0 0;
130
+ //border-radius: 0 8px 0 0;
129
131
  }
130
132
  .tr_error{
131
133
  background: #fff0f0;
@@ -158,7 +160,7 @@
158
160
  th{
159
161
  font-weight: normal;
160
162
  background: #fafafa;
161
- border-bottom: 1px solid #d9d9d9;
163
+ border-bottom: 1px solid $myborderColor;
162
164
  color: $color1;
163
165
  font-size: 14px;
164
166
  &:nth-of-type(1){
@@ -2,7 +2,9 @@
2
2
  // height: 55px;
3
3
  height: 44px;
4
4
  background: #fff;
5
- border-bottom: 1px solid #d9d9d9;
5
+ //border-bottom: 1px solid #d9d9d9;
6
+ border-bottom: 1px solid $borderColor2;
7
+
6
8
  display: flex;
7
9
  padding: 0 10px;
8
10
  // padding: 0 16px;
@@ -29,7 +31,7 @@
29
31
  &.active{
30
32
  @include themeColor('color','active');
31
33
  &::before{
32
- content: "";
34
+ content: "";
33
35
  display: block;
34
36
  position: absolute;
35
37
  bottom: -1px;
@@ -43,7 +45,7 @@
43
45
  @include themeColor('background-color','active');
44
46
  }
45
47
  }
46
-
48
+
47
49
  }
48
50
  .items{
49
51
  display: flex;
@@ -54,9 +56,9 @@
54
56
  justify-content: flex-end;
55
57
  // padding-right: 10px;
56
58
  flex: 1;
57
-
58
59
  }
59
60
  }
61
+
60
62
  .tabs2{
61
63
  height: 40px;
62
64
  background: #fff;
@@ -88,13 +90,13 @@
88
90
  &:nth-of-type(1){
89
91
  border-radius: 8px 0 0 0;
90
92
  }
91
-
93
+
92
94
  &.active{
93
95
  background: #fff;
94
96
  border-bottom-color: #fff;
95
97
  position: relative;
96
98
  @include themeColor("color",'active');
97
-
99
+
98
100
  }
99
101
  &:hover{
100
102
  background: #fff;
@@ -106,7 +108,60 @@
106
108
  align-items: center;
107
109
  justify-content: flex-end;
108
110
  flex: 1;
109
-
111
+
110
112
  }
111
113
 
112
- }
114
+ }
115
+
116
+ .tabs3{
117
+ height: 36px;
118
+ background: #fff;
119
+ border-bottom: 1px solid $borderColor2;
120
+ display: flex;
121
+ gap: $spacing;
122
+ margin-top: $spacing_max;
123
+ .item{
124
+ position: relative;
125
+ font-size: $fontSize;
126
+ cursor: pointer;
127
+ transition: all 0.3s ease;
128
+ color: #384252;
129
+ // padding-top: 22px;
130
+ //padding-top: 16px;
131
+ min-width: 80px;
132
+ text-align: center;
133
+ justify-content: center;
134
+ background: #EDEEF3;
135
+ height: 36px;
136
+ border-radius: $radius_mini $radius_mini 0 0;
137
+ display: flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ // border: 1px solid #000;
141
+ padding: 0 16px;
142
+ &:hover{
143
+ @include themeColor('color','hover');
144
+ }
145
+ &:active{
146
+ @include themeColor('color','active');
147
+ }
148
+ &.active{
149
+ @include themeColor('color','active');
150
+ @include themeColor('background-color','hover',0.1);
151
+ font-weight: bold;
152
+ }
153
+
154
+ }
155
+ .items{
156
+ display: flex;
157
+ gap: $spacing;
158
+ }
159
+ .other{
160
+ display: flex;
161
+ align-items: center;
162
+ justify-content: flex-end;
163
+ // padding-right: 10px;
164
+ flex: 1;
165
+ }
166
+ }
167
+
@@ -5,13 +5,14 @@ $themeColor_cheng:(
5
5
  hover:#ff855b,
6
6
  down:#ef480e,
7
7
  active:#fb551b,
8
+ activeBgColor:#fff,
8
9
  // 一级菜单选中颜色
9
10
  sidebar_menu1_activeColor:#fb551b,
10
11
  // 二级菜单选中颜色
11
- sidebar_menu2_activeColor:#fb551b,
12
+ sidebar_menu2_activeColor:#ff916b,
12
13
  // 二级菜单选中背景颜色
13
14
  sidebar_menu2_activeBgColor:rgba($color: #fb551b, $alpha: 0.2),
14
15
  // 二级菜单移入背景颜色
15
16
  sidebar_menu2_hoverColor:#fb551b,
16
- button_activeImg:url("~gy-webcode2/img/btnActive/3.png")
17
+ button_activeImg:url("gy-webcode2/img/btnActive/3.png")
17
18
  );
@@ -4,16 +4,18 @@ $themeColor_default:(
4
4
  hover:#60abff,
5
5
  down:#096dd9,
6
6
  active:#1890ff,
7
+ activeBgColor:#E8F3FF,
8
+
7
9
 
8
-
9
10
  // 一级菜单选中颜色
10
- sidebar_menu1_activeColor:#1f90ff,
11
+ sidebar_menu1_activeColor:#1890ff,
11
12
  // 二级菜单选中颜色
12
- sidebar_menu2_activeColor:#1f90ff,
13
+ sidebar_menu2_activeColor:#60abff,
13
14
  // 二级菜单选中背景颜色
14
- sidebar_menu2_activeBgColor:rgba($color: #1f90ff, $alpha: 0.2),
15
+ sidebar_menu2_activeBgColor:rgba($color: #1890ff, $alpha: 0.2),
16
+
15
17
  // 二级菜单移入字体颜色
16
18
  sidebar_menu2_hoverColor:#1890ff,
17
19
 
18
- button_activeImg:url("~gy-webcode2/img/btnActive/1.png")
20
+ button_activeImg:url("gy-webcode2/img/btnActive/1.png")
19
21
  );
@@ -5,13 +5,14 @@ $themeColor_hong:(
5
5
  hover:#ff5e66,
6
6
  down:#cf1322,
7
7
  active:#f5222d,
8
+ activeBgColor:#fff,
8
9
  // 一级菜单选中颜色
9
- sidebar_menu1_activeColor:#f5222d,
10
+ sidebar_menu1_activeColor:#ff9ba0,
10
11
  // 二级菜单选中颜色
11
- sidebar_menu2_activeColor:#f5222d,
12
+ sidebar_menu2_activeColor:#ff9ba0,
12
13
  // 二级菜单选中背景颜色
13
14
  sidebar_menu2_activeBgColor:rgba($color: #f5222d, $alpha: 0.2),
14
15
  // 二级菜单移入背景颜色
15
16
  sidebar_menu2_hoverColor:#ff5e66,
16
- button_activeImg:url("~gy-webcode2/img/btnActive/2.png")
17
+ button_activeImg:url("gy-webcode2/img/btnActive/2.png")
17
18
  );
@@ -5,6 +5,7 @@ $themeColor_huang:(
5
5
  hover:#ffb361,
6
6
  down:#e17706,
7
7
  active:#fa8c16,
8
+ activeBgColor:#fff,
8
9
  // 一级菜单选中颜色
9
10
  sidebar_menu1_activeColor:#fa8c16,
10
11
  // 二级菜单选中颜色
@@ -13,5 +14,5 @@ $themeColor_huang:(
13
14
  sidebar_menu2_activeBgColor:rgba($color: #fa8c16, $alpha: 0.2),
14
15
  // 二级菜单移入背景颜色
15
16
  sidebar_menu2_hoverColor:#fa8c16,
16
- button_activeImg:url("~gy-webcode2/img/btnActive/4.png")
17
+ button_activeImg:url("gy-webcode2/img/btnActive/4.png")
17
18
  );
@@ -5,6 +5,7 @@ $themeColor_lv:(
5
5
  hover:#95de64,
6
6
  down:#389e0d,
7
7
  active:#52c41a,
8
+ activeBgColor:#fff,
8
9
  // 一级菜单选中颜色
9
10
  sidebar_menu1_activeColor:#52c41a,
10
11
  // 二级菜单选中颜色
@@ -13,5 +14,5 @@ $themeColor_lv:(
13
14
  sidebar_menu2_activeBgColor:rgba($color: #52c41a, $alpha: 0.2),
14
15
  // 二级菜单移入背景颜色
15
16
  sidebar_menu2_hoverColor:#52c41a,
16
- button_activeImg:url("~gy-webcode2/img/btnActive/6.png")
17
+ button_activeImg:url("gy-webcode2/img/btnActive/6.png")
17
18
  );
@@ -5,6 +5,7 @@ $themeColor_qing:(
5
5
  hover:#5cdbd3,
6
6
  down:#13a8a8,
7
7
  active:#15c3c1,
8
+ activeBgColor:#fff,
8
9
  // 一级菜单选中颜色
9
10
  sidebar_menu1_activeColor:#15c3c1,
10
11
  // 二级菜单选中颜色
@@ -13,5 +14,5 @@ $themeColor_qing:(
13
14
  sidebar_menu2_activeBgColor:rgba($color: #15c3c1, $alpha: 0.2),
14
15
  // 二级菜单移入背景颜色
15
16
  sidebar_menu2_hoverColor:#15c3c1,
16
- button_activeImg:url("~gy-webcode2/img/btnActive/5.png")
17
+ button_activeImg:url("gy-webcode2/img/btnActive/5.png")
17
18
  );
@@ -5,13 +5,14 @@ $themeColor_shenaln:(
5
5
  hover:#597ef7,
6
6
  down:#1d39c4,
7
7
  active:#2f54eb,
8
+ activeBgColor:#fff,
8
9
  // 一级菜单选中颜色
9
- sidebar_menu1_activeColor:#2f54eb,
10
+ sidebar_menu1_activeColor:#8ca3ff,
10
11
  // 二级菜单选中颜色
11
- sidebar_menu2_activeColor:#2f54eb,
12
+ sidebar_menu2_activeColor:#8ca3ff,
12
13
  // 二级菜单选中背景颜色
13
14
  sidebar_menu2_activeBgColor:rgba($color: #2f54eb, $alpha: 0.2),
14
15
  // 二级菜单移入背景颜色
15
16
  sidebar_menu2_hoverColor:#2f54eb,
16
- button_activeImg:url("~gy-webcode2/img/btnActive/7.png")
17
+ button_activeImg:url("gy-webcode2/img/btnActive/7.png")
17
18
  );
@@ -5,6 +5,7 @@ $themeColor_zi:(
5
5
  hover:#9254de,
6
6
  down:#531dab,
7
7
  active:#722ed1,
8
+ activeBgColor:#fff,
8
9
  // 一级菜单选中颜色
9
10
  sidebar_menu1_activeColor:#9e6ae6,
10
11
  // 二级菜单选中颜色
@@ -14,5 +15,5 @@ $themeColor_zi:(
14
15
  // 二级菜单移入背景颜色
15
16
  sidebar_menu2_hoverColor:#9e6ae6,
16
17
  sidebar_menu2_hoverBgColor:rgba($color: #722ed1, $alpha: 0.2),
17
- button_activeImg:url("~gy-webcode2/img/btnActive/8.png")
18
+ button_activeImg:url("gy-webcode2/img/btnActive/8.png")
18
19
  );
@@ -5,4 +5,16 @@ $color3:#8c8c8c;
5
5
  // $color3:rgba($color:#8c8c8c,$alpha:0.65);
6
6
  $color4:#bfbfbf;
7
7
 
8
- $borderColor:#d9d9d9;
8
+ $borderColor:#d9d9d9;
9
+ $borderColor2:#F0F0F0;
10
+
11
+ $spacing:8px;
12
+ $spacing_max:16px;
13
+ $spacing_mini:4px;
14
+ $radius:8px;
15
+ $radius_max:16px;
16
+ $radius_mini:6px;
17
+ $fontSize:14px;
18
+ $fontSize_max:16px;
19
+ $fontSize_min:12px;
20
+
@@ -1,11 +1,15 @@
1
1
  $theme_default : (
2
2
  // 头部背景背景颜色
3
- header_bgColor:#0a1225,
3
+ header_bgColor:#0A1225,
4
4
  // 左侧菜单
5
5
  // 背景
6
6
  sidebar_bgColor:#1d2131,
7
7
  // 字体颜色
8
- sidebar_color:#acb5ce,
9
- // 子菜单背景
10
- sidebar_children_bgColor:#21263a
8
+ sidebar_color:#262626,
9
+ //高亮背景色
10
+ sidebar_children_activeBgColor:#fff,
11
+ sidebar_children_activeColor:#1890ff,
12
+ //底部背景颜色
13
+ wrapper_bgColor:#0A1225,
14
+ wrapper_bgColor2:#F1F6FC,
11
15
  );