adata-ui 0.3.57 → 0.3.60

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.
Files changed (97) hide show
  1. package/README.md +7 -7
  2. package/babel.config.js +5 -5
  3. package/dist/adata-ui.common.js +6672 -9259
  4. package/dist/adata-ui.common.js.map +1 -1
  5. package/dist/adata-ui.css +1 -1
  6. package/dist/adata-ui.umd.js +6672 -9259
  7. package/dist/adata-ui.umd.js.map +1 -1
  8. package/dist/adata-ui.umd.min.js +3 -3
  9. package/dist/adata-ui.umd.min.js.map +1 -1
  10. package/dist/img/{facebook.797d820f.svg → facebook.990fd0ba.svg} +4 -4
  11. package/dist/img/{instagram.8a77381c.svg → instagram.90311e74.svg} +6 -6
  12. package/dist/img/logo-desktop.dbf92700.webp +0 -0
  13. package/dist/img/logo-mobile.a02408a3.webp +0 -0
  14. package/dist/img/{logo-white-desktop.7d0e3481.svg → logo-white-desktop.0827cb20.svg} +8 -8
  15. package/dist/img/{telegram.be0d1008.svg → telegram.da3d2408.svg} +4 -4
  16. package/dist/img/{tiktok.eaeb39cb.svg → tiktok.91223b77.svg} +4 -4
  17. package/dist/img/{up-down.e2b28f72.svg → up-down.de7b3a68.svg} +3 -3
  18. package/dist/img/{youtube.125aace6.svg → youtube.96e7b076.svg} +5 -5
  19. package/package-lock.json +26218 -26218
  20. package/package.json +76 -76
  21. package/public/index.html +17 -17
  22. package/public/logo.svg +4 -4
  23. package/src/.DS_Store +0 -0
  24. package/src/App.vue +25 -25
  25. package/src/assets/_text_field.scss +224 -224
  26. package/src/assets/facebook.svg +4 -4
  27. package/src/assets/instagram.svg +6 -6
  28. package/src/assets/logo-desktop.svg +9 -9
  29. package/src/assets/logo-desktop.webp +0 -0
  30. package/src/assets/logo-mobile.svg +9 -9
  31. package/src/assets/logo-mobile.webp +0 -0
  32. package/src/assets/logo-white-desktop.svg +8 -8
  33. package/src/assets/style.scss +1 -1
  34. package/src/assets/telegram.svg +4 -4
  35. package/src/assets/tiktok.svg +4 -4
  36. package/src/assets/up-down.svg +3 -3
  37. package/src/assets/youtube.svg +5 -5
  38. package/src/components/Alert/Alert.stories.js +17 -17
  39. package/src/components/Alert/Alert.vue +63 -63
  40. package/src/components/BottomNavigationBar/ABottomNavigationBar.vue +151 -151
  41. package/src/components/BottomNavigationBar/BottomNavigationBar.stories.js +24 -24
  42. package/src/components/Button/AButton.vue +231 -231
  43. package/src/components/Button/Button.stories.js +23 -23
  44. package/src/components/Checkbox/ACheckbox.vue +114 -114
  45. package/src/components/Checkbox/Checkbox.stories.js +15 -15
  46. package/src/components/CheckboxMenu/CheckboxMenu.stories.js +23 -23
  47. package/src/components/CheckboxMenu/CheckboxMenu.vue +108 -108
  48. package/src/components/ErrorPages/BadGateway.vue +224 -224
  49. package/src/components/ErrorPages/Forbidden.vue +468 -468
  50. package/src/components/ErrorPages/InternalServerError.vue +275 -275
  51. package/src/components/ErrorPages/NotFound.vue +995 -995
  52. package/src/components/ErrorPages/Unavailable.vue +3705 -3705
  53. package/src/components/Footer/Footer.stories.js +20 -20
  54. package/src/components/Footer/Footer.vue +292 -292
  55. package/src/components/Header/ChildLinks.vue +122 -122
  56. package/src/components/Header/Header.stories.js +56 -56
  57. package/src/components/Header/Header.vue +1307 -1311
  58. package/src/components/Header/InfoHeader.vue +319 -319
  59. package/src/components/Header/Profile.vue +670 -670
  60. package/src/components/Header/ProfileMenu.vue +275 -275
  61. package/src/components/Header/ProfileMobile.vue +308 -308
  62. package/src/components/Header/ProfileOld.vue +781 -781
  63. package/src/components/InternalServerError/InternalServerError.stories.js +16 -16
  64. package/src/components/InternalServerError/InternalServerError.vue +262 -262
  65. package/src/components/Introduction.stories.mdx +7 -7
  66. package/src/components/Loader/Loader.stories.js +24 -24
  67. package/src/components/Loader/Loader.vue +325 -325
  68. package/src/components/MailTo/MailTo.stories.js +14 -14
  69. package/src/components/MailTo/MailTo.vue +258 -258
  70. package/src/components/NavIcon/ANavIcon.vue +49 -49
  71. package/src/components/NavIcon/NavIcon.stories.js +14 -14
  72. package/src/components/PasswordField/PasswordField.stories.js +16 -16
  73. package/src/components/PasswordField/PasswordField.vue +77 -77
  74. package/src/components/SearchTextField/SearchTextField.stories.js +77 -77
  75. package/src/components/SearchTextField/SearchTextField.vue +230 -230
  76. package/src/components/ServiceSlider/AServiceSlider.vue +782 -782
  77. package/src/components/ServiceSlider/ServiceSlider.stories.js +20 -20
  78. package/src/components/Table/ATable.vue +117 -117
  79. package/src/components/Table/Table.stories.js +15 -15
  80. package/src/components/TextArea/TextArea.stories.js +17 -17
  81. package/src/components/TextArea/TextArea.vue +116 -116
  82. package/src/components/TextError/TextError.stories.js +15 -15
  83. package/src/components/TextError/TextError.vue +57 -57
  84. package/src/components/TextField/TextField.stories.js +17 -17
  85. package/src/components/TextField/TextField.vue +107 -107
  86. package/src/components/index.js +54 -54
  87. package/src/components/newComponents/FooterNew/FooterBottom.vue +151 -151
  88. package/src/components/newComponents/FooterNew/FooterItem.vue +113 -113
  89. package/src/components/newComponents/FooterNew/FooterNew.stories.js +20 -20
  90. package/src/components/newComponents/FooterNew/FooterNew.vue +43 -40
  91. package/src/components/newComponents/FooterNew/FooterTop.vue +316 -312
  92. package/src/components/transitions/SlideToggle.vue +55 -55
  93. package/src/components/transitions/VerticalMobileToggle.vue +75 -75
  94. package/src/configs/icons.js +112 -112
  95. package/src/configs/profileDropDown.js +134 -134
  96. package/src/main.js +12 -12
  97. package/dist/img/logo-desktop.c24ec0ba.svg +0 -9
@@ -1,313 +1,317 @@
1
- <template>
2
- <div class="block">
3
- <div class="block__pk">
4
- <footer-item :cols="pk" :title="pkTitle"/>
5
- </div>
6
- <div class="block__item">
7
- <footer-item :cols="work" :title="workTitle"/>
8
- </div>
9
- <div class="block__item">
10
- <footer-item :cols="tender" :title="tenderTitle"/>
11
- </div>
12
- <div class="block__item">
13
- <footer-item :cols="avto" :title="avtoTitle"/>
14
- </div>
15
- <div class="block__item">
16
- <footer-item :cols="marketing" :title="marketingTitle"/>
17
- </div>
18
- <div class="block__web">
19
- <a href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured" class="youtube"/>
20
- <a href="https://www.instagram.com/adata.kz/?igshid=253i4qxg3els" class="instagram"></a>
21
- <a href="https://t.me/adatakz_official" class="telegram"></a>
22
- <a href="https://www.facebook.com/adata.kz" class="facebook"></a>
23
- <a href="https://www.tiktok.com/@adata.kz?lang=ru-RU" class="tiktok"/>
24
- </div>
25
- </div>
26
- </template>
27
- <script>
28
- import FooterItem from "@/components/newComponents/FooterNew/FooterItem";
29
- export default {
30
- name: "FooterTop",
31
- components:{
32
- FooterItem
33
- },
34
- props: {
35
- mode: {
36
- type: String,
37
- required: true,
38
- validator: function (value) {
39
- return ["prod", "dev", "staging"].indexOf(value) !== -1;
40
- },
41
- },
42
- },
43
-
44
- data() {
45
- return {
46
- pkTitle: 'Контрагенты',
47
- workTitle: 'Работа',
48
- tenderTitle: 'Тендеры',
49
- avtoTitle: 'Штрафы',
50
- marketingTitle: 'Маркетинг',
51
- main: {
52
- dev: "adtdev.kz",
53
- prod: "adata.kz",
54
- staging: "adada.kz",
55
- },
56
- }
57
- },
58
- computed:{
59
- environment() {
60
- return this.main[this.mode]
61
- },
62
- pk(){
63
- return [
64
- {
65
- id: 1,
66
- text: 'Проверка контрагентов',
67
- link: `https://pk.${this.environment}`
68
- },
69
- {
70
- id: 2,
71
- text: 'Сравнение контрагентов',
72
- link: `https://pk.${this.environment}/counterparty/compare`
73
-
74
- },
75
- {
76
- id: 3,
77
- text: 'Косвенные связи',
78
- link: `https://pk.${this.environment}/counterparty/search-connections/check`,
79
- },
80
- {
81
- id: 4,
82
- text: 'Массовая проверка',
83
- link: `https://pk.${this.environment}/counterparty/employees-check`,
84
- },
85
- {
86
- id: 5,
87
- text: 'Зарубежные контрагенты',
88
- link: `https://pk.${this.environment}/counterparty/foreign`,
89
- },
90
- {
91
- id: 6,
92
- text: 'Санкции',
93
- link: `https://pk.${this.environment}/counterparty/sanctions`,
94
- },
95
- {
96
- id: 8,
97
- text: 'Офшоры',
98
- link: `https://pk.${this.environment}/counterparty/offshore`,
99
- },
100
- {
101
- id: 9,
102
- text: 'Интеграция по API',
103
- link: `https://pk.${this.environment}/counterparty/offshore`,
104
- },
105
-
106
- ]
107
- },
108
- work(){
109
- return [
110
- {
111
- id: 1,
112
- text: 'Создание и поиск вакансий',
113
- link: `https://work.${this.environment}/company/create#vacancy`
114
-
115
- },
116
- {
117
- id: 2,
118
- text: 'Создание и поиск резюме',
119
- link: `https://work.${this.environment}/user/create#summary`
120
- },
121
- ]
122
- },
123
- tender(){
124
- return [
125
- {
126
- id: 1,
127
- text: 'Информация по тендерам',
128
- link: `https://tender.${this.environment}/`
129
- },
130
- {
131
- id: 2,
132
- text: 'Информация по договорам',
133
- link: `https://tender.${this.environment}/main/contracts`
134
- },
135
- {
136
- id: 3,
137
- text: 'Информация по планам закупок',
138
- link: `https://tender.${this.environment}/main/plans`
139
- },
140
- ]
141
- },
142
- avto(){
143
- return [
144
- {
145
- id: 1,
146
- text: 'Проверка штрафов',
147
- link: `https://avto.${this.environment}/`
148
- },
149
- {
150
- id: 2,
151
- text: 'Проверка штрафов',
152
- link: `https://avto.${this.environment}/check`
153
- },
154
- {
155
- id: 3,
156
- text: 'Массовая проверка авто',
157
- link: `https://avto.${this.environment}/bulk-check`
158
- },
159
- ]
160
- },
161
- marketing(){
162
- return [
163
- {
164
- id: 1,
165
- text: 'Поиск клиентов',
166
- link: `https://marketing.${this.environment}/unload-data`
167
- },
168
- {
169
- id: 2,
170
- text: 'Анализ закупок',
171
- link: `https://marketing.${this.environment}/purchasing-analysis`
172
- },
173
- {
174
- id: 3,
175
- text: 'Индекс деловой активности',
176
- link: `https://marketing${this.environment}/business-activity`
177
- },
178
- {
179
- id: 4,
180
- text: 'Рейтинг налогоплательщиков',
181
- link: `https://marketing.${this.environment}/tax-payment`
182
- },
183
- ]
184
- }
185
- }
186
-
187
- }
188
- </script>
189
-
190
- <style lang="scss" scoped>
191
- .block {
192
- display: grid;
193
- grid-template-columns: repeat(5, 1fr);
194
- grid-template-rows: auto;
195
- text-align: center;
196
- color: #FFF;
197
- max-width: 1140px;
198
- margin: 0 auto;
199
- padding: 40px 0 20px;
200
- @media (max-width: 1140px) {
201
- display: flex;
202
- flex-direction: column;
203
- gap: 16px;
204
- padding: 20px 16px;
205
- }
206
-
207
- &__pk {
208
- display: grid;
209
- gap: 8px;
210
- grid-column: 1;
211
- grid-row: 1 / 3;
212
- @media (max-width: 1140px) {
213
- display: flex;
214
- gap: 8px;
215
- flex-direction: column;
216
- }
217
-
218
- &__item {
219
- display: flex;
220
- gap: 8px;
221
- flex-direction: column;
222
- @media (max-width: 1140px) {
223
- display: grid;
224
- gap: 8px;
225
- grid-column: 1;
226
- grid-row: 1 / 3;
227
- }
228
- }
229
- }
230
-
231
- &__item {
232
- display: flex;
233
- flex-direction: column;
234
- gap: 8px;
235
- }
236
-
237
- &__web {
238
- grid-column: 2/6;
239
- display: flex;
240
- align-items: center;
241
- gap: 32px;
242
- justify-content: flex-end;
243
- margin-right: 30px;
244
- @media (max-width: 1140px) {
245
- justify-content: flex-start;
246
- gap: 16px;
247
- }
248
- }
249
- }
250
-
251
- .item-title {
252
- font-weight: 600;
253
- font-size: 14px;
254
- line-height: 20px;
255
- color: #FFFFFF;
256
- text-align: left;
257
- @media (max-width: 1140px) {
258
- display: flex;
259
- align-items: center;
260
- justify-content: space-between;
261
- }
262
- }
263
-
264
- .item-text {
265
- font-weight: 400;
266
- font-size: 12px;
267
- line-height: 20px;
268
- text-align: left;
269
- color: #FFFFFF;
270
-
271
- a {
272
- color: #FFFFFF;
273
- cursor: pointer;
274
- }
275
- }
276
-
277
-
278
-
279
- .youtube {
280
- width: 28px;
281
- height: 28px;
282
- background-image: url('~@/assets/youtube.svg');
283
- cursor: pointer;
284
- }
285
-
286
- .instagram {
287
- width: 28px;
288
- height: 28px;
289
- background-image: url('~@/assets/instagram.svg');
290
- cursor: pointer;
291
- }
292
-
293
- .telegram {
294
- width: 28px;
295
- height: 28px;
296
- background-image: url('~@/assets/telegram.svg');
297
- cursor: pointer;
298
- }
299
-
300
- .facebook {
301
- width: 28px;
302
- height: 28px;
303
- background-image: url('~@/assets/facebook.svg');
304
- cursor: pointer;
305
- }
306
-
307
- .tiktok {
308
- width: 28px;
309
- height: 28px;
310
- background-image: url('~@/assets/tiktok.svg');
311
- cursor: pointer;
312
- }
1
+ <template>
2
+ <div class="block">
3
+ <div class="block__pk">
4
+ <footer-item :cols="pk" :title="pkTitle"/>
5
+ </div>
6
+ <div class="block__item">
7
+ <footer-item :cols="work" :title="workTitle"/>
8
+ </div>
9
+ <div class="block__item">
10
+ <footer-item :cols="tender" :title="tenderTitle"/>
11
+ </div>
12
+ <div class="block__item">
13
+ <footer-item :cols="avto" :title="avtoTitle"/>
14
+ </div>
15
+ <div class="block__item">
16
+ <footer-item :cols="marketing" :title="marketingTitle"/>
17
+ </div>
18
+ <div class="block__web">
19
+ <a href="https://www.youtube.com/channel/UCPkbtgwgTZbMJXjmTi3R8Uw/featured" class="youtube"/>
20
+ <a href="https://www.instagram.com/adata.kz/?igshid=253i4qxg3els" class="instagram"></a>
21
+ <a href="https://t.me/adatakz_official" class="telegram"></a>
22
+ <a href="https://www.facebook.com/adata.kz" class="facebook"></a>
23
+ <a href="https://www.tiktok.com/@adata.kz?lang=ru-RU" class="tiktok"/>
24
+ </div>
25
+ </div>
26
+ </template>
27
+ <script>
28
+ import FooterItem from "@/components/newComponents/FooterNew/FooterItem";
29
+ export default {
30
+ name: "FooterTop",
31
+ components:{
32
+ FooterItem
33
+ },
34
+ props: {
35
+ mode: {
36
+ type: String,
37
+ required: true,
38
+ validator: function (value) {
39
+ return ["prod", "dev", "staging"].indexOf(value) !== -1;
40
+ },
41
+ },
42
+ },
43
+
44
+ data() {
45
+ return {
46
+ pkTitle: 'Контрагенты',
47
+ workTitle: 'Работа',
48
+ tenderTitle: 'Тендеры',
49
+ avtoTitle: 'Штрафы',
50
+ marketingTitle: 'Маркетинг',
51
+ main: {
52
+ dev: "adtdev.kz",
53
+ prod: "adata.kz",
54
+ staging: "adada.kz",
55
+ },
56
+ }
57
+ },
58
+ computed:{
59
+ environment() {
60
+ return this.main[this.mode]
61
+ },
62
+ pk(){
63
+ return [
64
+ {
65
+ id: 1,
66
+ text: 'Проверка контрагентов',
67
+ link: `https://pk.${this.environment}`
68
+ },
69
+ {
70
+ id: 2,
71
+ text: 'Сравнение контрагентов',
72
+ link: `https://pk.${this.environment}/counterparty/compare`
73
+
74
+ },
75
+ {
76
+ id: 3,
77
+ text: 'Косвенные связи',
78
+ link: `https://pk.${this.environment}/counterparty/search-connections/check`,
79
+ },
80
+ {
81
+ id: 4,
82
+ text: 'Массовая проверка',
83
+ link: `https://pk.${this.environment}/counterparty/employees-check`,
84
+ },
85
+ {
86
+ id: 5,
87
+ text: 'Зарубежные контрагенты',
88
+ link: `https://pk.${this.environment}/counterparty/foreign`,
89
+ },
90
+ {
91
+ id: 6,
92
+ text: 'Санкции',
93
+ link: `https://pk.${this.environment}/counterparty/sanctions`,
94
+ },
95
+ {
96
+ id: 8,
97
+ text: 'Офшоры',
98
+ link: `https://pk.${this.environment}/counterparty/offshore`,
99
+ },
100
+ // {
101
+ // id: 9,
102
+ // text: 'Интеграция по API',
103
+ // link: `https://pk.${this.environment}/counterparty/offshore`,
104
+ // },
105
+
106
+ ]
107
+ },
108
+ work(){
109
+ return [
110
+ {
111
+ id: 1,
112
+ text: 'Поиск вакансий',
113
+ link: `https://work.${this.environment}/vacancy`
114
+
115
+ },
116
+ {
117
+ id: 2,
118
+ text: 'Поиск резюме',
119
+ link: `https://work.${this.environment}/summary`
120
+ },
121
+ ]
122
+ },
123
+ tender(){
124
+ return [
125
+ {
126
+ id: 1,
127
+ text: 'Поиск тендеров',
128
+ link: `https://tender.${this.environment}/`
129
+ },
130
+ {
131
+ id: 2,
132
+ text: 'Поиск договоров',
133
+ link: `https://tender.${this.environment}/main/contracts`
134
+ },
135
+ {
136
+ id: 3,
137
+ text: 'Планы закупок',
138
+ link: `https://tender.${this.environment}/main/plans`
139
+ },
140
+ ]
141
+ },
142
+ avto(){
143
+ return [
144
+ {
145
+ id: 1,
146
+ text: 'Проверка штрафов',
147
+ link: `https://avto.${this.environment}/`
148
+ },
149
+ {
150
+ id: 2,
151
+ text: ' Проверка авто',
152
+ link: `https://avto.${this.environment}/check`
153
+ },
154
+ {
155
+ id: 3,
156
+ text: 'Массовая проверка авто',
157
+ link: `https://avto.${this.environment}/bulk-check`
158
+ },
159
+ ]
160
+ },
161
+ marketing(){
162
+ return [
163
+ {
164
+ id: 1,
165
+ text: 'Поиск клиентов',
166
+ link: `https://marketing.${this.environment}/unload-data`
167
+ },
168
+ {
169
+ id: 2,
170
+ text: 'Анализ закупок',
171
+ link: `https://marketing.${this.environment}/purchasing-analysis`
172
+ },
173
+ {
174
+ id: 3,
175
+ text: 'Индекс деловой активности',
176
+ link: `https://marketing.${this.environment}/business-activity`
177
+ },
178
+ {
179
+ id: 4,
180
+ text: 'Рейтинг налогоплательщиков',
181
+ link: `https://marketing.${this.environment}/tax-payment`
182
+ },
183
+ {
184
+ id: 5,
185
+ text: 'Субъекты бизнеса',
186
+ link: `https://marketing.${this.environment}/business-entities`
187
+ },
188
+ ]
189
+ }
190
+ }
191
+
192
+ }
193
+ </script>
194
+
195
+ <style lang="scss" scoped>
196
+ .block {
197
+ display: grid;
198
+ grid-template-columns: repeat(5, 1fr);
199
+ grid-template-rows: auto;
200
+ text-align: center;
201
+ color: #FFF;
202
+ max-width: 1140px;
203
+ margin: 0 auto;
204
+ padding: 40px 0 20px;
205
+ @media (max-width: 1140px) {
206
+ display: flex;
207
+ flex-direction: column;
208
+ gap: 16px;
209
+ padding: 20px 16px;
210
+ }
211
+
212
+ &__pk {
213
+ display: grid;
214
+ gap: 8px;
215
+ grid-column: 1;
216
+ grid-row: 1 / 3;
217
+ @media (max-width: 1140px) {
218
+ display: flex;
219
+ gap: 8px;
220
+ flex-direction: column;
221
+ }
222
+
223
+ &__item {
224
+ display: flex;
225
+ gap: 8px;
226
+ flex-direction: column;
227
+ @media (max-width: 1140px) {
228
+ display: grid;
229
+ gap: 8px;
230
+ grid-column: 1;
231
+ grid-row: 1 / 3;
232
+ }
233
+ }
234
+ }
235
+
236
+ &__item {
237
+ display: flex;
238
+ flex-direction: column;
239
+ gap: 8px;
240
+ }
241
+
242
+ &__web {
243
+ grid-column: 2/6;
244
+ display: flex;
245
+ align-items: center;
246
+ gap: 32px;
247
+ justify-content: flex-end;
248
+ @media (max-width: 1140px) {
249
+ justify-content: flex-start;
250
+ gap: 16px;
251
+ }
252
+ }
253
+ }
254
+
255
+ .item-title {
256
+ font-weight: 600;
257
+ font-size: 14px;
258
+ line-height: 20px;
259
+ color: #FFFFFF;
260
+ text-align: left;
261
+ @media (max-width: 1140px) {
262
+ display: flex;
263
+ align-items: center;
264
+ justify-content: space-between;
265
+ }
266
+ }
267
+
268
+ .item-text {
269
+ font-weight: 400;
270
+ font-size: 12px;
271
+ line-height: 20px;
272
+ text-align: left;
273
+ color: #FFFFFF;
274
+
275
+ a {
276
+ color: #FFFFFF;
277
+ cursor: pointer;
278
+ }
279
+ }
280
+
281
+
282
+
283
+ .youtube {
284
+ width: 28px;
285
+ height: 28px;
286
+ background-image: url('~@/assets/youtube.svg');
287
+ cursor: pointer;
288
+ }
289
+
290
+ .instagram {
291
+ width: 28px;
292
+ height: 28px;
293
+ background-image: url('~@/assets/instagram.svg');
294
+ cursor: pointer;
295
+ }
296
+
297
+ .telegram {
298
+ width: 28px;
299
+ height: 28px;
300
+ background-image: url('~@/assets/telegram.svg');
301
+ cursor: pointer;
302
+ }
303
+
304
+ .facebook {
305
+ width: 28px;
306
+ height: 28px;
307
+ background-image: url('~@/assets/facebook.svg');
308
+ cursor: pointer;
309
+ }
310
+
311
+ .tiktok {
312
+ width: 28px;
313
+ height: 28px;
314
+ background-image: url('~@/assets/tiktok.svg');
315
+ cursor: pointer;
316
+ }
313
317
  </style>