verce-vue-test 0.0.11 → 0.0.13

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "verce-vue-test",
3
- "version": "0.0.11",
3
+ "version": "0.0.13",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "scripts": {
package/src/App.vue CHANGED
@@ -79,6 +79,10 @@ function toggleCollapse() {
79
79
  <el-icon><DataLine /></el-icon>
80
80
  <span>头寸预报</span>
81
81
  </el-menu-item>
82
+ <el-menu-item index="/position-forecast-execution">
83
+ <el-icon><DataLine /></el-icon>
84
+ <span>头寸预报执行</span>
85
+ </el-menu-item>
82
86
  <el-menu-item index="/executive-management">
83
87
  <el-icon><TrendCharts /></el-icon>
84
88
  <span>总行管理员首页</span>
@@ -0,0 +1,632 @@
1
+ .executive-page {
2
+ --blue: #1267f2;
3
+ --deep-blue: #0056e6;
4
+ --line: #dce4ef;
5
+ width: 100%;
6
+ height: 100vh;
7
+ min-height: 100vh;
8
+ overflow-x: hidden;
9
+ overflow-y: auto;
10
+ color: #05070b;
11
+ background:
12
+ linear-gradient(90deg, #f8f9fb 0 31.4%, transparent 31.4%),
13
+ linear-gradient(142deg, #2688ff 0%, #0063ee 43%, #005ce9 100%);
14
+ font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
15
+ }
16
+
17
+ .hero {
18
+ width: 100%;
19
+ height: 128px;
20
+ display: flex;
21
+ align-items: flex-start;
22
+ justify-content: flex-start;
23
+ padding: 23px 31px 0;
24
+ }
25
+
26
+ .hero-title h1 {
27
+ font-size: 36px;
28
+ line-height: 1.16;
29
+ font-weight: 900;
30
+ }
31
+
32
+ .hero-title p {
33
+ margin-top: 16px;
34
+ color: #91959b;
35
+ font-size: 16px;
36
+ }
37
+
38
+ .dashboard-grid {
39
+ width: 100%;
40
+ display: grid;
41
+ grid-template-columns: 1fr;
42
+ gap: 14px;
43
+ padding: 0 31px 39px;
44
+ }
45
+
46
+ .board {
47
+ min-width: 0;
48
+ height: calc(100vh - 190px);
49
+ min-height: 700px;
50
+ padding: 14px;
51
+ display: flex;
52
+ flex-direction: column;
53
+ background: rgba(255, 255, 255, .96);
54
+ border-radius: 10px;
55
+ box-shadow: 0 10px 22px rgba(34, 67, 123, .16);
56
+ }
57
+
58
+ .board-head {
59
+ height: 38px;
60
+ display: flex;
61
+ align-items: flex-start;
62
+ justify-content: space-between;
63
+ }
64
+
65
+ .board-head h2 {
66
+ display: flex;
67
+ align-items: center;
68
+ gap: 10px;
69
+ font-size: 20px;
70
+ line-height: 1.1;
71
+ font-weight: 900;
72
+ }
73
+
74
+ .board-head h2 span {
75
+ width: 13px;
76
+ height: 14px;
77
+ border-radius: 4px;
78
+ background: var(--blue);
79
+ box-shadow: inset 0 0 4px rgba(255, 255, 255, .35);
80
+ }
81
+
82
+ .actions {
83
+ display: flex;
84
+ align-items: center;
85
+ gap: 16px;
86
+ color: #6c7480;
87
+ font-size: 15px;
88
+ }
89
+
90
+ .actions button {
91
+ height: 26px;
92
+ display: flex;
93
+ align-items: center;
94
+ gap: 3px;
95
+ border: 0;
96
+ background: transparent;
97
+ color: #6c7480;
98
+ font-size: 13px;
99
+ font-weight: 600;
100
+ }
101
+
102
+ .actions button.active {
103
+ padding: 0 13px;
104
+ border-radius: 14px;
105
+ background: var(--blue);
106
+ color: #fff;
107
+ }
108
+
109
+ .account-layout,
110
+ .warning-layout,
111
+ .reliable-layout {
112
+ display: grid;
113
+ flex: 1;
114
+ margin-top: 8px;
115
+ gap: 12px;
116
+ }
117
+
118
+ .account-layout {
119
+ grid-template-columns: 1fr 1fr;
120
+ grid-template-rows: minmax(0, 1fr) auto;
121
+ }
122
+
123
+ .metric-box,
124
+ .chart-box {
125
+ min-width: 0;
126
+ position: relative;
127
+ min-height: 0;
128
+ border: 1px solid var(--line);
129
+ border-radius: 10px;
130
+ background: #fff;
131
+ }
132
+
133
+ .metric-box h3,
134
+ .chart-box h3 {
135
+ position: absolute;
136
+ left: 18px;
137
+ top: 18px;
138
+ z-index: 1;
139
+ font-size: 18px;
140
+ font-weight: 900;
141
+ }
142
+
143
+ .chart-box small {
144
+ position: absolute;
145
+ left: 18px;
146
+ top: 56px;
147
+ z-index: 1;
148
+ color: #232a33;
149
+ font-size: 12px;
150
+ }
151
+
152
+ .ring,
153
+ .pie {
154
+ position: absolute;
155
+ left: 38%;
156
+ top: 53%;
157
+ width: min(58%, 340px);
158
+ height: min(72%, 340px);
159
+ transform: translate(-50%, -50%);
160
+ }
161
+
162
+ .pie {
163
+ left: 36%;
164
+ width: min(60%, 360px);
165
+ height: min(74%, 360px);
166
+ }
167
+
168
+ .balance-copy {
169
+ position: absolute;
170
+ left: auto;
171
+ right: 8%;
172
+ top: 50%;
173
+ width: 132px;
174
+ transform: translateY(-42%);
175
+ }
176
+
177
+ .balance-copy p,
178
+ .quota-list li,
179
+ .legend-list li {
180
+ display: flex;
181
+ align-items: center;
182
+ gap: 10px;
183
+ color: #56606d;
184
+ font-size: 15px;
185
+ white-space: nowrap;
186
+ }
187
+
188
+ .balance-copy strong {
189
+ display: block;
190
+ margin: 14px 0 22px 20px;
191
+ font-size: 32px;
192
+ font-weight: 800;
193
+ }
194
+
195
+ .balance-copy small {
196
+ display: block;
197
+ margin-left: 21px;
198
+ color: #7b828c;
199
+ font-size: 14px;
200
+ }
201
+
202
+ .dot,
203
+ .quota-list b,
204
+ .legend-list b,
205
+ .pie-foot b {
206
+ width: 8px;
207
+ height: 8px;
208
+ border-radius: 50%;
209
+ background: var(--blue);
210
+ }
211
+
212
+ .sky {
213
+ background: #58aef7 !important;
214
+ }
215
+
216
+ .deep {
217
+ background: #1667e8 !important;
218
+ }
219
+
220
+ .green {
221
+ background: #18c7c0 !important;
222
+ }
223
+
224
+ .pale {
225
+ background: #aeeeff !important;
226
+ }
227
+
228
+ .orange {
229
+ background: #ff9f13 !important;
230
+ }
231
+
232
+ .quota-list,
233
+ .legend-list {
234
+ position: absolute;
235
+ right: 8%;
236
+ top: 50%;
237
+ transform: translateY(-55%);
238
+ display: grid;
239
+ gap: 18px;
240
+ list-style: none;
241
+ }
242
+
243
+ .quota-list b:nth-child(n) {
244
+ background: #399df7;
245
+ }
246
+
247
+ .pie-foot {
248
+ position: absolute;
249
+ left: 40px;
250
+ right: 30px;
251
+ bottom: 28px;
252
+ display: flex;
253
+ justify-content: space-between;
254
+ font-size: 14px;
255
+ }
256
+
257
+ .pie-foot span {
258
+ display: flex;
259
+ align-items: center;
260
+ gap: 8px;
261
+ }
262
+
263
+ .progress-box {
264
+ grid-column: 1 / -1;
265
+ height: 124px;
266
+ position: relative;
267
+ border: 1px solid var(--line);
268
+ border-radius: 10px;
269
+ background: #fff;
270
+ padding: 16px 19px;
271
+ }
272
+
273
+ .progress-box p,
274
+ .stat-strip p,
275
+ .mini-strip p {
276
+ color: #4d5868;
277
+ font-size: 14px;
278
+ }
279
+
280
+ .progress-box strong {
281
+ display: block;
282
+ margin-top: 10px;
283
+ color: var(--blue);
284
+ font-size: 30px;
285
+ font-weight: 800;
286
+ }
287
+
288
+ .progress-box > b {
289
+ position: absolute;
290
+ left: 143px;
291
+ top: 52px;
292
+ font-size: 36px;
293
+ line-height: 1;
294
+ }
295
+
296
+ em {
297
+ color: #10b990;
298
+ font-style: normal;
299
+ }
300
+
301
+ .progress-line {
302
+ position: absolute;
303
+ left: 222px;
304
+ right: 21px;
305
+ top: 41px;
306
+ height: 44px;
307
+ border-top: 6px solid #e4e8ee;
308
+ }
309
+
310
+ .progress-line i {
311
+ display: block;
312
+ width: 57%;
313
+ height: 6px;
314
+ margin-top: -6px;
315
+ background: var(--blue);
316
+ }
317
+
318
+ .progress-line span {
319
+ position: absolute;
320
+ left: 55%;
321
+ top: -17px;
322
+ min-width: 52px;
323
+ height: 28px;
324
+ padding: 5px 14px;
325
+ transform: translateX(-50%);
326
+ border-radius: 14px;
327
+ background: var(--blue);
328
+ color: #fff;
329
+ font-size: 14px;
330
+ font-weight: 600;
331
+ text-align: center;
332
+ }
333
+
334
+ .scale-row {
335
+ position: absolute;
336
+ left: 222px;
337
+ right: 16px;
338
+ bottom: 14px;
339
+ display: flex;
340
+ justify-content: space-between;
341
+ color: #6b7280;
342
+ font-size: 14px;
343
+ }
344
+
345
+ .warning-layout {
346
+ grid-template-columns: 1.05fr .9fr;
347
+ grid-template-rows: minmax(0, 1fr) auto;
348
+ }
349
+
350
+ .chart-box {
351
+ height: 100%;
352
+ min-height: 0;
353
+ }
354
+
355
+ .line-chart {
356
+ position: absolute;
357
+ inset: 72px 22px 22px 18px;
358
+ }
359
+
360
+ .stat-strip {
361
+ grid-column: 1 / -1;
362
+ min-height: 110px;
363
+ display: grid;
364
+ grid-template-columns: .8fr .7fr .8fr .8fr .8fr .8fr .8fr;
365
+ align-items: center;
366
+ border: 1px solid var(--line);
367
+ border-radius: 10px;
368
+ background: #fff;
369
+ }
370
+
371
+ .stat-strip > div {
372
+ min-height: 50px;
373
+ padding-left: 17px;
374
+ border-right: 1px solid #dce4ef;
375
+ }
376
+
377
+ .stat-strip > div:last-child {
378
+ border-right: 0;
379
+ }
380
+
381
+ .stat-strip strong,
382
+ .stat-strip b {
383
+ display: block;
384
+ margin-top: 8px;
385
+ font-size: 21px;
386
+ font-weight: 900;
387
+ }
388
+
389
+ .blue-text {
390
+ color: var(--blue) !important;
391
+ }
392
+
393
+ .tiny-bar {
394
+ display: block;
395
+ width: 64px;
396
+ height: 8px;
397
+ margin-top: 7px;
398
+ border-radius: 6px;
399
+ background: linear-gradient(90deg, var(--blue) 0 56%, #e7ebf0 56%);
400
+ }
401
+
402
+ .reliable-layout {
403
+ grid-template-columns: 1fr 1fr;
404
+ grid-template-rows: minmax(0, 1fr) auto;
405
+ }
406
+
407
+ .reliable-layout .metric-box {
408
+ height: 100%;
409
+ min-height: 0;
410
+ }
411
+
412
+ .reliable-board .ring {
413
+ left: 35%;
414
+ top: 53%;
415
+ width: min(56%, 330px);
416
+ height: min(72%, 330px);
417
+ }
418
+
419
+ .legend-list {
420
+ top: 50%;
421
+ right: 9%;
422
+ gap: 18px;
423
+ }
424
+
425
+ .pressure {
426
+ right: 60px;
427
+ }
428
+
429
+ .mini-strip {
430
+ grid-column: 1 / -1;
431
+ height: 100%;
432
+ min-height: 130px;
433
+ display: grid;
434
+ grid-template-columns: 1.1fr .65fr 1.35fr 1.45fr .7fr 1.35fr;
435
+ border: 1px solid var(--line);
436
+ border-radius: 10px;
437
+ background: #fff;
438
+ }
439
+
440
+ @media (max-width: 1200px) {
441
+ .hero {
442
+ height: auto;
443
+ min-height: 128px;
444
+ flex-wrap: wrap;
445
+ gap: 16px;
446
+ padding-right: 24px;
447
+ padding-left: 24px;
448
+ }
449
+
450
+ .dashboard-grid {
451
+ padding-right: 24px;
452
+ padding-left: 24px;
453
+ }
454
+
455
+ .account-layout,
456
+ .warning-layout,
457
+ .reliable-layout {
458
+ grid-template-columns: 1fr;
459
+ }
460
+
461
+ .board {
462
+ height: auto;
463
+ }
464
+
465
+ .metric-box,
466
+ .chart-box {
467
+ min-height: 253px;
468
+ }
469
+
470
+ .stat-strip,
471
+ .mini-strip {
472
+ grid-template-columns: repeat(3, 1fr);
473
+ height: auto;
474
+ }
475
+
476
+ .stat-strip > div,
477
+ .mini-strip > div {
478
+ min-height: 72px;
479
+ }
480
+ }
481
+
482
+ @media (max-width: 720px) {
483
+ .hero {
484
+ padding: 18px 16px 0;
485
+ }
486
+
487
+ .hero-title h1 {
488
+ font-size: 30px;
489
+ }
490
+
491
+ .dashboard-grid {
492
+ padding: 0 16px 24px;
493
+ }
494
+
495
+ .actions {
496
+ gap: 10px;
497
+ }
498
+
499
+ .board-head {
500
+ height: auto;
501
+ gap: 12px;
502
+ flex-wrap: wrap;
503
+ margin-bottom: 12px;
504
+ }
505
+
506
+ .account-layout,
507
+ .warning-layout,
508
+ .reliable-layout {
509
+ gap: 10px;
510
+ }
511
+
512
+ .stat-strip,
513
+ .mini-strip {
514
+ grid-template-columns: 1fr;
515
+ }
516
+
517
+ .balance-copy,
518
+ .quota-list,
519
+ .legend-list {
520
+ right: 16px;
521
+ }
522
+
523
+ .balance-copy {
524
+ left: auto;
525
+ }
526
+
527
+ .warning-table {
528
+ min-width: 720px;
529
+ }
530
+
531
+ .table-board {
532
+ overflow-x: auto;
533
+ }
534
+ }
535
+
536
+ .mini-strip > div {
537
+ padding: 18px;
538
+ border-right: 1px solid #e4e9f0;
539
+ }
540
+
541
+ .mini-strip > div:last-child {
542
+ border-right: 0;
543
+ }
544
+
545
+ .mini-strip strong {
546
+ display: block;
547
+ margin-top: 18px;
548
+ font-size: 25px;
549
+ font-weight: 900;
550
+ }
551
+
552
+ .mini-strip em {
553
+ color: #14a77c;
554
+ }
555
+
556
+ .spark {
557
+ width: min(92%, 260px);
558
+ height: 84px;
559
+ margin-top: 13px;
560
+ }
561
+
562
+ .table-board {
563
+ display: grid;
564
+ grid-template-rows: auto 1fr auto;
565
+ min-height: 0;
566
+ padding-bottom: 17px;
567
+ }
568
+
569
+ .warning-table {
570
+ width: 100%;
571
+ height: 100%;
572
+ border-collapse: separate;
573
+ border-spacing: 0;
574
+ overflow: hidden;
575
+ border: 1px solid var(--line);
576
+ border-radius: 0 0 8px 8px;
577
+ font-size: 12px;
578
+ text-align: center;
579
+ }
580
+
581
+ .warning-table th {
582
+ height: 32px;
583
+ border-right: 1px solid rgba(255, 255, 255, .36);
584
+ border-bottom: 1px solid rgba(255, 255, 255, .36);
585
+ background: var(--blue);
586
+ color: #fff;
587
+ font-weight: 700;
588
+ }
589
+
590
+ .warning-table td {
591
+ height: 40px;
592
+ border-right: 1px solid #e1e7ef;
593
+ border-bottom: 1px solid #e1e7ef;
594
+ background: #fff;
595
+ }
596
+
597
+ .warning-table tr:last-child td {
598
+ border-bottom: 0;
599
+ }
600
+
601
+ .pager {
602
+ height: 54px;
603
+ display: flex;
604
+ align-items: flex-end;
605
+ justify-content: center;
606
+ gap: 16px;
607
+ color: #1e2735;
608
+ font-size: 14px;
609
+ }
610
+
611
+ .pager button {
612
+ min-width: 28px;
613
+ height: 28px;
614
+ border: 0;
615
+ border-radius: 5px;
616
+ background: #fff;
617
+ color: #0d1625;
618
+ font-weight: 700;
619
+ }
620
+
621
+ .pager button.selected {
622
+ background: var(--blue);
623
+ color: #fff;
624
+ }
625
+
626
+ .pager input {
627
+ width: 48px;
628
+ height: 30px;
629
+ border: 1px solid #dbe3ef;
630
+ border-radius: 5px;
631
+ text-align: center;
632
+ }