fantasia-ui 0.4.0 → 0.6.2

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.
@@ -3552,6 +3552,7 @@
3552
3552
  padding: 20px;
3553
3553
  backdrop-filter: blur(2px);
3554
3554
  transition: background-color 0.25s ease;
3555
+ touch-action: none;
3555
3556
  }
3556
3557
 
3557
3558
  .f-dialog {
@@ -3623,16 +3624,24 @@
3623
3624
  .f-dialog__body {
3624
3625
  flex: 1;
3625
3626
  min-height: 0;
3626
- padding: 20px;
3627
3627
  color: #606266;
3628
3628
  font-size: 14px;
3629
3629
  line-height: 1.6;
3630
+ overflow: hidden;
3631
+ display: flex;
3632
+ flex-direction: column;
3630
3633
  }
3631
3634
  .f-dialog__body :deep(.f-scrollbar) {
3632
- height: 100%;
3635
+ flex: 1;
3636
+ min-height: 0;
3637
+ }
3638
+ .f-dialog__body :deep(.f-scrollbar__wrap) {
3639
+ overflow-y: auto !important;
3640
+ overflow-x: hidden;
3641
+ -webkit-overflow-scrolling: touch;
3633
3642
  }
3634
3643
  .f-dialog__body :deep(.f-scrollbar__view) {
3635
- padding: 0;
3644
+ padding: 20px;
3636
3645
  }
3637
3646
  .f-dialog__body p {
3638
3647
  margin: 0;
@@ -3695,6 +3704,24 @@
3695
3704
  transform: scale(1) translateY(0);
3696
3705
  }
3697
3706
 
3707
+ @media (max-width: 768px) {
3708
+ .f-dialog-overlay {
3709
+ padding: 10px;
3710
+ }
3711
+ .f-dialog {
3712
+ width: 95vw;
3713
+ max-height: 85vh;
3714
+ }
3715
+ .f-dialog__header {
3716
+ padding: 16px 16px 12px;
3717
+ }
3718
+ .f-dialog__body :deep(.f-scrollbar__view) {
3719
+ padding: 16px;
3720
+ }
3721
+ .f-dialog__footer {
3722
+ padding: 12px 16px;
3723
+ }
3724
+ }
3698
3725
  .f-divider {
3699
3726
  position: relative;
3700
3727
  }
@@ -4806,37 +4833,22 @@
4806
4833
  }
4807
4834
 
4808
4835
  .f-marquee {
4836
+ position: relative;
4837
+ width: 100%;
4809
4838
  overflow: hidden;
4810
- white-space: nowrap;
4811
- background: linear-gradient(90deg, #fff1f8, #fdf2f8, #fff7ed);
4812
- border: 1px solid #f9d8ea;
4813
- border-radius: 8px;
4814
- padding: 8px 0;
4815
4839
  }
4816
- .f-marquee__track {
4817
- display: inline-flex;
4818
- align-items: center;
4819
- width: max-content;
4820
- min-width: 100%;
4821
- animation: f-marquee-scroll var(--duration, 28s) linear infinite;
4822
- animation-direction: var(--dir, normal);
4823
- font-size: 14px;
4824
- font-weight: 600;
4825
- color: #9d174d;
4826
- letter-spacing: 0.04em;
4840
+ .f-marquee--left, .f-marquee--right {
4841
+ height: auto;
4827
4842
  }
4828
- .f-marquee.is-pause:hover .f-marquee__track {
4829
- animation-play-state: paused;
4843
+ .f-marquee--up, .f-marquee--down {
4844
+ height: 100%;
4845
+ min-height: 20px;
4830
4846
  }
4831
-
4832
- @keyframes f-marquee-scroll {
4833
- from {
4834
- transform: translateX(0);
4835
- }
4836
- to {
4837
- transform: translateX(-50%);
4838
- }
4847
+ .f-marquee__content {
4848
+ display: inline-block;
4849
+ will-change: transform;
4839
4850
  }
4851
+
4840
4852
  .f-dialog-mask {
4841
4853
  position: fixed;
4842
4854
  top: 0;
@@ -5551,6 +5563,12 @@
5551
5563
  overflow: auto;
5552
5564
  }
5553
5565
 
5566
+ .f-select-wrapper {
5567
+ display: inline-block;
5568
+ position: relative;
5569
+ width: 100%;
5570
+ }
5571
+
5554
5572
  .f-select {
5555
5573
  display: inline-flex;
5556
5574
  align-items: center;
@@ -5722,6 +5740,55 @@
5722
5740
  opacity: 0;
5723
5741
  }
5724
5742
  }
5743
+ /* ---------- 下拉面板 ---------- */
5744
+ .f-select-dropdown {
5745
+ position: fixed;
5746
+ background: #fff;
5747
+ border-radius: 4px;
5748
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
5749
+ z-index: 2000;
5750
+ }
5751
+ .f-select-dropdown__content {
5752
+ padding: 4px 0;
5753
+ }
5754
+
5755
+ /* ---------- 选项 ---------- */
5756
+ .f-select-option {
5757
+ padding: 8px 12px;
5758
+ font-size: 14px;
5759
+ line-height: 1.5;
5760
+ color: #606266;
5761
+ cursor: pointer;
5762
+ transition: all 0.2s;
5763
+ user-select: none;
5764
+ }
5765
+ .f-select-option:hover:not(.is-disabled) {
5766
+ background-color: #f5f7fa;
5767
+ }
5768
+ .f-select-option.is-selected {
5769
+ color: #ec4899;
5770
+ font-weight: 500;
5771
+ background-color: #fdf2f8;
5772
+ }
5773
+ .f-select-option.is-disabled {
5774
+ color: #c0c4cc;
5775
+ cursor: not-allowed;
5776
+ }
5777
+ .f-select-option.is-empty {
5778
+ text-align: center;
5779
+ color: #909399;
5780
+ cursor: default;
5781
+ }
5782
+ .f-select-option.is-empty:hover {
5783
+ background-color: transparent;
5784
+ }
5785
+ .f-select-option__label {
5786
+ display: block;
5787
+ white-space: nowrap;
5788
+ overflow: hidden;
5789
+ text-overflow: ellipsis;
5790
+ }
5791
+
5725
5792
  /* ---------- 新增选项按钮 ---------- */
5726
5793
  .f-select__add-option {
5727
5794
  display: flex;
@@ -5741,6 +5808,18 @@
5741
5808
  background-color: #fce7f3;
5742
5809
  }
5743
5810
 
5811
+ /* ---------- 下拉动画 ---------- */
5812
+ .f-select-dropdown-enter-active,
5813
+ .f-select-dropdown-leave-active {
5814
+ transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
5815
+ }
5816
+
5817
+ .f-select-dropdown-enter-from,
5818
+ .f-select-dropdown-leave-to {
5819
+ opacity: 0;
5820
+ transform: scaleY(0.9);
5821
+ }
5822
+
5744
5823
  :root {
5745
5824
  --f-slider-track-color: #333338;
5746
5825
  --f-slider-bar-color: #6366f1;
@@ -8101,7 +8180,12 @@ to {
8101
8180
  color: var(--text-muted);
8102
8181
  border: 1px solid var(--border2);
8103
8182
  }
8104
- .f-select[data-v-f556487f] {
8183
+ .f-select-wrapper[data-v-476d8dd3] {
8184
+ display: inline-block;
8185
+ position: relative;
8186
+ width: 100%;
8187
+ }
8188
+ .f-select[data-v-476d8dd3] {
8105
8189
  display: inline-flex;
8106
8190
  align-items: center;
8107
8191
  justify-content: space-between;
@@ -8120,66 +8204,66 @@ to {
8120
8204
  transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
8121
8205
  /* ---------- 多选:标签 ---------- */
8122
8206
  }
8123
- .f-select[data-v-f556487f]:hover:not(.is-disabled) {
8207
+ .f-select[data-v-476d8dd3]:hover:not(.is-disabled) {
8124
8208
  border-color: #ec4899;
8125
8209
  }
8126
- .f-select.is-open[data-v-f556487f]:not(.is-disabled), .f-select[data-v-f556487f]:focus-within:not(.is-disabled) {
8210
+ .f-select.is-open[data-v-476d8dd3]:not(.is-disabled), .f-select[data-v-476d8dd3]:focus-within:not(.is-disabled) {
8127
8211
  border-color: #ec4899;
8128
8212
  background: #fff;
8129
8213
  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.2274509804);
8130
8214
  }
8131
- .f-select.is-open:not(.is-disabled) .f-select__arrow[data-v-f556487f], .f-select:focus-within:not(.is-disabled) .f-select__arrow[data-v-f556487f] {
8215
+ .f-select.is-open:not(.is-disabled) .f-select__arrow[data-v-476d8dd3], .f-select:focus-within:not(.is-disabled) .f-select__arrow[data-v-476d8dd3] {
8132
8216
  transform: rotate(180deg);
8133
8217
  }
8134
- .f-select.is-active .f-select__label[data-v-f556487f] {
8218
+ .f-select.is-active .f-select__label[data-v-476d8dd3] {
8135
8219
  color: #1e293b;
8136
8220
  }
8137
- .f-select.is-disabled[data-v-f556487f] {
8221
+ .f-select.is-disabled[data-v-476d8dd3] {
8138
8222
  cursor: not-allowed;
8139
8223
  background-color: #f5f7fa;
8140
8224
  border-color: #e4e7ed;
8141
8225
  color: #c0c4cc;
8142
8226
  }
8143
- .f-select.is-disabled .f-select__label[data-v-f556487f],
8144
- .f-select.is-disabled .f-select__arrow[data-v-f556487f] {
8227
+ .f-select.is-disabled .f-select__label[data-v-476d8dd3],
8228
+ .f-select.is-disabled .f-select__arrow[data-v-476d8dd3] {
8145
8229
  cursor: not-allowed;
8146
8230
  }
8147
- .f-select.is-disabled .f-select__tag[data-v-f556487f] {
8231
+ .f-select.is-disabled .f-select__tag[data-v-476d8dd3] {
8148
8232
  opacity: 0.6;
8149
8233
  }
8150
- .f-select--small[data-v-f556487f] {
8234
+ .f-select--small[data-v-476d8dd3] {
8151
8235
  height: 32px;
8152
8236
  font-size: 13px;
8153
8237
  }
8154
- .f-select--small .f-select__label[data-v-f556487f] {
8238
+ .f-select--small .f-select__label[data-v-476d8dd3] {
8155
8239
  font-size: 13px;
8156
8240
  }
8157
- .f-select--medium[data-v-f556487f] {
8241
+ .f-select--medium[data-v-476d8dd3] {
8158
8242
  height: 36px;
8159
8243
  font-size: 14px;
8160
8244
  }
8161
- .f-select--large[data-v-f556487f] {
8245
+ .f-select--large[data-v-476d8dd3] {
8162
8246
  height: 40px;
8163
8247
  font-size: 16px;
8164
8248
  }
8165
- .f-select--large .f-select__label[data-v-f556487f] {
8249
+ .f-select--large .f-select__label[data-v-476d8dd3] {
8166
8250
  font-size: 16px;
8167
8251
  }
8168
- .f-select.is-multiple[data-v-f556487f] {
8252
+ .f-select.is-multiple[data-v-476d8dd3] {
8169
8253
  height: auto;
8170
8254
  padding-top: 3px;
8171
8255
  padding-bottom: 3px;
8172
8256
  }
8173
- .f-select.is-multiple.f-select--small[data-v-f556487f] {
8257
+ .f-select.is-multiple.f-select--small[data-v-476d8dd3] {
8174
8258
  min-height: 32px;
8175
8259
  }
8176
- .f-select.is-multiple.f-select--medium[data-v-f556487f] {
8260
+ .f-select.is-multiple.f-select--medium[data-v-476d8dd3] {
8177
8261
  min-height: 36px;
8178
8262
  }
8179
- .f-select.is-multiple.f-select--large[data-v-f556487f] {
8263
+ .f-select.is-multiple.f-select--large[data-v-476d8dd3] {
8180
8264
  min-height: 40px;
8181
8265
  }
8182
- .f-select__label[data-v-f556487f] {
8266
+ .f-select__label[data-v-476d8dd3] {
8183
8267
  font-size: 14px;
8184
8268
  line-height: 1.5;
8185
8269
  color: #1e293b;
@@ -8189,20 +8273,20 @@ to {
8189
8273
  text-overflow: ellipsis;
8190
8274
  transition: color 0.2s;
8191
8275
  }
8192
- .f-select__label.is-placeholder[data-v-f556487f] {
8276
+ .f-select__label.is-placeholder[data-v-476d8dd3] {
8193
8277
  color: #94a3b8;
8194
8278
  }
8195
- .f-select__suffix[data-v-f556487f] {
8279
+ .f-select__suffix[data-v-476d8dd3] {
8196
8280
  display: grid;
8197
8281
  place-items: center;
8198
8282
  width: 14px;
8199
8283
  height: 14px;
8200
8284
  flex-shrink: 0;
8201
8285
  }
8202
- .f-select__suffix[data-v-f556487f] > * {
8286
+ .f-select__suffix[data-v-476d8dd3] > * {
8203
8287
  grid-area: 1/1;
8204
8288
  }
8205
- .f-select__clear[data-v-f556487f] {
8289
+ .f-select__clear[data-v-476d8dd3] {
8206
8290
  font-size: 14px;
8207
8291
  color: #94a3b8;
8208
8292
  cursor: pointer;
@@ -8210,25 +8294,25 @@ to {
8210
8294
  pointer-events: none;
8211
8295
  transition: opacity 0.2s, color 0.2s;
8212
8296
  }
8213
- .f-select__clear[data-v-f556487f]:hover {
8297
+ .f-select__clear[data-v-476d8dd3]:hover {
8214
8298
  color: #64748b;
8215
8299
  }
8216
- .f-select__arrow[data-v-f556487f] {
8300
+ .f-select__arrow[data-v-476d8dd3] {
8217
8301
  font-size: 14px;
8218
8302
  color: #94a3b8;
8219
8303
  transition: transform 0.3s, color 0.2s, opacity 0.2s;
8220
8304
  }
8221
- .f-select:hover:not(.is-disabled) .f-select__arrow[data-v-f556487f] {
8305
+ .f-select:hover:not(.is-disabled) .f-select__arrow[data-v-476d8dd3] {
8222
8306
  color: #64748b;
8223
8307
  }
8224
- .f-select.is-clearable:hover:not(.is-disabled) .f-select__clear[data-v-f556487f] {
8308
+ .f-select.is-clearable:hover:not(.is-disabled) .f-select__clear[data-v-476d8dd3] {
8225
8309
  opacity: 1;
8226
8310
  pointer-events: auto;
8227
8311
  }
8228
- .f-select.is-clearable:hover:not(.is-disabled) .f-select__arrow[data-v-f556487f] {
8312
+ .f-select.is-clearable:hover:not(.is-disabled) .f-select__arrow[data-v-476d8dd3] {
8229
8313
  opacity: 0;
8230
8314
  }
8231
- .f-select__input[data-v-f556487f] {
8315
+ .f-select__input[data-v-476d8dd3] {
8232
8316
  flex: 1;
8233
8317
  min-width: 0;
8234
8318
  padding: 0;
@@ -8239,16 +8323,16 @@ to {
8239
8323
  line-height: 1.5;
8240
8324
  color: #1e293b;
8241
8325
  }
8242
- .f-select__input[data-v-f556487f]::placeholder {
8326
+ .f-select__input[data-v-476d8dd3]::placeholder {
8243
8327
  color: #94a3b8;
8244
8328
  }
8245
- .f-select__input.has-value[data-v-f556487f]::placeholder {
8329
+ .f-select__input.has-value[data-v-476d8dd3]::placeholder {
8246
8330
  color: #64748b;
8247
8331
  }
8248
- .f-select__input.is-multiple[data-v-f556487f] {
8332
+ .f-select__input.is-multiple[data-v-476d8dd3] {
8249
8333
  min-width: 60px;
8250
8334
  }
8251
- .f-select__tags[data-v-f556487f] {
8335
+ .f-select__tags[data-v-476d8dd3] {
8252
8336
  flex: 1;
8253
8337
  min-width: 0;
8254
8338
  display: flex;
@@ -8256,23 +8340,72 @@ to {
8256
8340
  gap: 4px;
8257
8341
  align-items: center;
8258
8342
  }
8259
- .f-select__tag[data-v-f556487f] {
8343
+ .f-select__tag[data-v-476d8dd3] {
8260
8344
  max-width: 200px;
8261
8345
  }
8262
- .f-select__tag[data-v-f556487f] .f-tag {
8346
+ .f-select__tag[data-v-476d8dd3] .f-tag {
8263
8347
  max-width: 100%;
8264
8348
  }
8265
8349
  @media (hover: none) {
8266
- .f-select.is-clearable .f-select__clear[data-v-f556487f] {
8350
+ .f-select.is-clearable .f-select__clear[data-v-476d8dd3] {
8267
8351
  opacity: 1;
8268
8352
  pointer-events: auto;
8269
8353
  }
8270
- .f-select.is-clearable .f-select__arrow[data-v-f556487f] {
8354
+ .f-select.is-clearable .f-select__arrow[data-v-476d8dd3] {
8271
8355
  opacity: 0;
8272
8356
  }
8273
8357
  }
8358
+ /* ---------- 下拉面板 ---------- */
8359
+ .f-select-dropdown[data-v-476d8dd3] {
8360
+ position: fixed;
8361
+ background: #fff;
8362
+ border-radius: 4px;
8363
+ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
8364
+ z-index: 2000;
8365
+ }
8366
+ .f-select-dropdown__content[data-v-476d8dd3] {
8367
+ padding: 4px 0;
8368
+ }
8369
+
8370
+ /* ---------- 选项 ---------- */
8371
+ .f-select-option[data-v-476d8dd3] {
8372
+ padding: 8px 12px;
8373
+ font-size: 14px;
8374
+ line-height: 1.5;
8375
+ color: #606266;
8376
+ cursor: pointer;
8377
+ transition: all 0.2s;
8378
+ user-select: none;
8379
+ }
8380
+ .f-select-option[data-v-476d8dd3]:hover:not(.is-disabled) {
8381
+ background-color: #f5f7fa;
8382
+ }
8383
+ .f-select-option.is-selected[data-v-476d8dd3] {
8384
+ color: #ec4899;
8385
+ font-weight: 500;
8386
+ background-color: #fdf2f8;
8387
+ }
8388
+ .f-select-option.is-disabled[data-v-476d8dd3] {
8389
+ color: #c0c4cc;
8390
+ cursor: not-allowed;
8391
+ }
8392
+ .f-select-option.is-empty[data-v-476d8dd3] {
8393
+ text-align: center;
8394
+ color: #909399;
8395
+ cursor: default;
8396
+ }
8397
+ .f-select-option.is-empty[data-v-476d8dd3]:hover {
8398
+ background-color: transparent;
8399
+ }
8400
+ .f-select-option__label[data-v-476d8dd3] {
8401
+ display: block;
8402
+ white-space: nowrap;
8403
+ overflow: hidden;
8404
+ text-overflow: ellipsis;
8405
+ }
8406
+
8274
8407
  /* ---------- 新增选项按钮 ---------- */
8275
- .f-select__add-option[data-v-f556487f] {
8408
+ .f-select__add-option[data-v-476d8dd3] {
8276
8409
  display: flex;
8277
8410
  align-items: center;
8278
8411
  gap: 8px;
@@ -8283,11 +8416,22 @@ to {
8283
8416
  border-top: 1px solid #e0e0e6;
8284
8417
  transition: all 0.2s ease;
8285
8418
  }
8286
- .f-select__add-option[data-v-f556487f]:hover {
8419
+ .f-select__add-option[data-v-476d8dd3]:hover {
8287
8420
  background-color: #fdf2f8;
8288
8421
  }
8289
- .f-select__add-option[data-v-f556487f]:active {
8422
+ .f-select__add-option[data-v-476d8dd3]:active {
8290
8423
  background-color: #fce7f3;
8424
+ }
8425
+
8426
+ /* ---------- 下拉动画 ---------- */
8427
+ .f-select-dropdown-enter-active[data-v-476d8dd3],
8428
+ .f-select-dropdown-leave-active[data-v-476d8dd3] {
8429
+ transition: all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
8430
+ }
8431
+ .f-select-dropdown-enter-from[data-v-476d8dd3],
8432
+ .f-select-dropdown-leave-to[data-v-476d8dd3] {
8433
+ opacity: 0;
8434
+ transform: scaleY(0.9);
8291
8435
  }.f-date-picker[data-v-0f901824] {
8292
8436
  position: relative;
8293
8437
  width: 100%;
@@ -13177,35 +13321,408 @@ to {
13177
13321
  .fade-enter-from[data-v-a2989c99],
13178
13322
  .fade-leave-to[data-v-a2989c99] {
13179
13323
  opacity: 0;
13180
- }.f-marquee[data-v-83eeea3d] {
13324
+ }.f-marquee[data-v-454360ad] {
13325
+ position: relative;
13326
+ width: 100%;
13181
13327
  overflow: hidden;
13182
- white-space: nowrap;
13183
- background: linear-gradient(90deg, #fff1f8, #fdf2f8, #fff7ed);
13184
- border: 1px solid #f9d8ea;
13185
- border-radius: 8px;
13186
- padding: 8px 0;
13187
13328
  }
13188
- .f-marquee__track[data-v-83eeea3d] {
13329
+ .f-marquee--left[data-v-454360ad], .f-marquee--right[data-v-454360ad] {
13330
+ height: auto;
13331
+ }
13332
+ .f-marquee--up[data-v-454360ad], .f-marquee--down[data-v-454360ad] {
13333
+ height: 100%;
13334
+ min-height: 20px;
13335
+ }
13336
+ .f-marquee__content[data-v-454360ad] {
13337
+ display: inline-block;
13338
+ will-change: transform;
13339
+ }
13340
+ /* 样式变量定义,默认不启用 */
13341
+ .f-slider-captcha[data-v-7b80ef8b] {
13189
13342
  display: inline-flex;
13343
+ flex-direction: column;
13344
+ background-color: #fff;
13345
+ border-radius: 4px;
13346
+ padding: 10px;
13347
+ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
13348
+ border: 1px solid #f0f0f0;
13349
+ width: 320px;
13350
+ user-select: none;
13351
+ }
13352
+ .f-slider-captcha .captcha-imgs[data-v-7b80ef8b] {
13353
+ position: relative;
13354
+ width: 300px;
13355
+ height: 150px;
13356
+ border-radius: 4px;
13357
+ overflow: hidden;
13358
+ background-color: #f7fafc;
13359
+ margin-bottom: 10px;
13360
+ }
13361
+ .f-slider-captcha .captcha-imgs .bg-canvas[data-v-7b80ef8b] {
13362
+ display: block;
13363
+ }
13364
+ .f-slider-captcha .captcha-imgs .fragment-canvas[data-v-7b80ef8b] {
13365
+ position: absolute;
13366
+ top: 0;
13367
+ left: 0;
13368
+ z-index: 10;
13369
+ pointer-events: none;
13370
+ /* 确保拖拽时平滑 */
13371
+ will-change: transform;
13372
+ }
13373
+ .f-slider-captcha .captcha-imgs .loading-overlay[data-v-7b80ef8b] {
13374
+ position: absolute;
13375
+ inset: 0;
13376
+ background: #f5f5f5;
13377
+ z-index: 20;
13378
+ }
13379
+ .f-slider-captcha .captcha-imgs .refresh-btn[data-v-7b80ef8b] {
13380
+ position: absolute;
13381
+ top: 8px;
13382
+ right: 8px;
13383
+ font-size: 20px;
13384
+ color: rgba(255, 255, 255, 0.4509803922);
13385
+ z-index: 11;
13386
+ transition: all 0.2s;
13387
+ }
13388
+ .f-slider-captcha .captcha-imgs .refresh-btn[data-v-7b80ef8b]:hover {
13389
+ color: #fff;
13390
+ }
13391
+ .f-slider-captcha .slider-track[data-v-7b80ef8b] {
13392
+ position: relative;
13393
+ height: 44px;
13394
+ background-color: #f0f2f5;
13395
+ border-radius: 4px;
13396
+ border: 1px solid #e6e8eb;
13397
+ overflow: hidden;
13398
+ }
13399
+ .f-slider-captcha .slider-track .slider-progress[data-v-7b80ef8b] {
13400
+ position: absolute;
13401
+ left: 2px;
13402
+ height: 40px;
13403
+ z-index: 2;
13404
+ border-radius: 4px;
13405
+ }
13406
+ .f-slider-captcha .slider-track .slider-progress.moving[data-v-7b80ef8b] {
13407
+ background-color: #4a5568;
13408
+ }
13409
+ .f-slider-captcha .slider-track .slider-progress.success[data-v-7b80ef8b] {
13410
+ background-color: #48bb78;
13411
+ }
13412
+ .f-slider-captcha .slider-track .slider-progress.error[data-v-7b80ef8b] {
13413
+ background-color: #ff4d4f;
13414
+ }
13415
+ .f-slider-captcha .slider-track .track-tip[data-v-7b80ef8b] {
13416
+ position: relative;
13417
+ z-index: 1;
13418
+ font-size: 13px;
13419
+ color: #999;
13420
+ pointer-events: none;
13421
+ }
13422
+ .f-slider-captcha .slider-track .slider-handle[data-v-7b80ef8b] {
13423
+ position: absolute;
13424
+ left: 2px;
13425
+ width: 40px;
13426
+ height: 40px;
13427
+ background-color: #fff;
13428
+ border-radius: 4px;
13429
+ cursor: grab;
13430
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
13431
+ z-index: 3;
13432
+ touch-action: none;
13433
+ transition: background-color 0.3s, box-shadow 0.3s, transform 0.3s;
13434
+ }
13435
+ .f-slider-captcha .slider-track .slider-handle .status-default[data-v-7b80ef8b] {
13436
+ display: flex;
13437
+ gap: 4px;
13190
13438
  align-items: center;
13191
- width: max-content;
13192
- min-width: 100%;
13193
- animation: f-marquee-scroll-83eeea3d var(--duration, 28s) linear infinite;
13194
- animation-direction: var(--dir, normal);
13195
- font-size: 14px;
13439
+ justify-content: center;
13440
+ transition: all 0.3s;
13441
+ }
13442
+ .f-slider-captcha .slider-track .slider-handle .status-default .stripe[data-v-7b80ef8b] {
13443
+ width: 2px;
13444
+ height: 20px;
13445
+ background-color: #ccc;
13446
+ border-radius: 2px;
13447
+ transition: all 0.3s;
13448
+ }
13449
+ .f-slider-captcha .slider-track .slider-handle[data-v-7b80ef8b]:hover, .f-slider-captcha .slider-track .slider-handle.dragging[data-v-7b80ef8b] {
13450
+ background-color: #4a5568;
13451
+ }
13452
+ .f-slider-captcha .slider-track .slider-handle:hover .status-default .stripe[data-v-7b80ef8b]:first-child, .f-slider-captcha .slider-track .slider-handle.dragging .status-default .stripe[data-v-7b80ef8b]:first-child {
13453
+ width: 0;
13454
+ height: 0;
13455
+ background-color: transparent;
13456
+ border-top: 4px solid transparent;
13457
+ border-bottom: 4px solid transparent;
13458
+ border-right: 6px solid #fff;
13459
+ transform: translateX(-2px);
13460
+ }
13461
+ .f-slider-captcha .slider-track .slider-handle:hover .status-default .stripe[data-v-7b80ef8b]:last-child, .f-slider-captcha .slider-track .slider-handle.dragging .status-default .stripe[data-v-7b80ef8b]:last-child {
13462
+ width: 0;
13463
+ height: 0;
13464
+ background-color: transparent;
13465
+ border-top: 4px solid transparent;
13466
+ border-bottom: 4px solid transparent;
13467
+ border-left: 6px solid #fff;
13468
+ transform: translateX(2px);
13469
+ }
13470
+ .f-slider-captcha .slider-track .slider-handle:hover .status-default .stripe[data-v-7b80ef8b]:nth-child(2), .f-slider-captcha .slider-track .slider-handle.dragging .status-default .stripe[data-v-7b80ef8b]:nth-child(2) {
13471
+ width: 4px;
13472
+ height: 4px;
13473
+ border-radius: 50%;
13474
+ background-color: #fff;
13475
+ }
13476
+ .f-slider-captcha .slider-track .slider-handle.dragging[data-v-7b80ef8b] {
13477
+ cursor: grabbing;
13478
+ }.f-carousel[data-v-187b78d3] {
13479
+ position: relative;
13480
+ width: 100%;
13481
+ overflow: hidden;
13482
+ border-radius: 4px;
13483
+ }
13484
+ .f-carousel--horizontal[data-v-187b78d3] {
13485
+ aspect-ratio: 16/9;
13486
+ height: var(--f-carousel-height, 400px);
13487
+ }
13488
+ .f-carousel--vertical[data-v-187b78d3] {
13489
+ height: var(--f-carousel-height, 300px);
13490
+ }
13491
+ .f-carousel__container[data-v-187b78d3] {
13492
+ position: relative;
13493
+ width: 100%;
13494
+ height: 100%;
13495
+ overflow: hidden;
13496
+ }
13497
+ .f-carousel__track[data-v-187b78d3] {
13498
+ display: flex;
13499
+ width: 100%;
13500
+ height: 100%;
13501
+ transition: transform 0.5s ease;
13502
+ }
13503
+ .f-carousel--horizontal .f-carousel__track[data-v-187b78d3] {
13504
+ flex-direction: row;
13505
+ }
13506
+ .f-carousel--vertical .f-carousel__track[data-v-187b78d3] {
13507
+ flex-direction: column;
13508
+ }
13509
+ .f-carousel__item[data-v-187b78d3] {
13510
+ flex: 0 0 100%;
13511
+ position: relative;
13512
+ width: 100%;
13513
+ height: 100%;
13514
+ }
13515
+ .f-carousel__image[data-v-187b78d3] {
13516
+ width: 100%;
13517
+ height: 100%;
13518
+ object-fit: cover;
13519
+ }
13520
+ .f-carousel__html-content[data-v-187b78d3], .f-carousel__content[data-v-187b78d3] {
13521
+ width: 100%;
13522
+ height: 100%;
13523
+ display: flex;
13524
+ align-items: center;
13525
+ justify-content: center;
13526
+ padding: 20px;
13527
+ }
13528
+ .f-carousel__content[data-v-187b78d3] {
13529
+ font-size: 18px;
13530
+ color: #333;
13531
+ background: #f5f5f5;
13532
+ }
13533
+ .f-carousel__overlay[data-v-187b78d3] {
13534
+ position: absolute;
13535
+ bottom: 0;
13536
+ left: 0;
13537
+ right: 0;
13538
+ padding: 20px;
13539
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
13540
+ color: white;
13541
+ }
13542
+ .f-carousel__title[data-v-187b78d3] {
13543
+ font-size: 24px;
13196
13544
  font-weight: 600;
13197
- color: #9d174d;
13198
- letter-spacing: 0.04em;
13545
+ margin-bottom: 8px;
13199
13546
  }
13200
- .f-marquee.is-pause:hover .f-marquee__track[data-v-83eeea3d] {
13201
- animation-play-state: paused;
13547
+ .f-carousel__description[data-v-187b78d3] {
13548
+ font-size: 14px;
13549
+ opacity: 0.9;
13202
13550
  }
13203
- @keyframes f-marquee-scroll-83eeea3d {
13204
- from {
13205
- transform: translateX(0);
13551
+ .f-carousel__empty[data-v-187b78d3] {
13552
+ width: 100%;
13553
+ height: 100%;
13554
+ display: flex;
13555
+ align-items: center;
13556
+ justify-content: center;
13557
+ color: #999;
13558
+ font-size: 16px;
13559
+ background: #f5f5f5;
13206
13560
  }
13207
- to {
13208
- transform: translateX(-50%);
13561
+ .f-carousel__controls[data-v-187b78d3] {
13562
+ position: absolute;
13563
+ top: 50%;
13564
+ left: 0;
13565
+ right: 0;
13566
+ transform: translateY(-50%);
13567
+ display: flex;
13568
+ justify-content: space-between;
13569
+ padding: 0 16px;
13570
+ pointer-events: none;
13571
+ z-index: 2;
13572
+ }
13573
+ .f-carousel__control[data-v-187b78d3] {
13574
+ width: 40px;
13575
+ height: 40px;
13576
+ border-radius: 50%;
13577
+ background: rgba(255, 255, 255, 0.8);
13578
+ border: none;
13579
+ cursor: pointer;
13580
+ display: flex;
13581
+ align-items: center;
13582
+ justify-content: center;
13583
+ color: #333;
13584
+ transition: all 0.3s;
13585
+ pointer-events: all;
13586
+ }
13587
+ .f-carousel__control[data-v-187b78d3]:hover:not(:disabled) {
13588
+ background: white;
13589
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
13590
+ }
13591
+ .f-carousel__control[data-v-187b78d3]:disabled {
13592
+ opacity: 0.3;
13593
+ cursor: not-allowed;
13594
+ }
13595
+ .f-carousel__control[data-v-187b78d3] svg {
13596
+ width: 20px;
13597
+ height: 20px;
13598
+ }
13599
+ .f-carousel__indicators[data-v-187b78d3] {
13600
+ position: absolute;
13601
+ display: flex;
13602
+ gap: 8px;
13603
+ z-index: 2;
13604
+ }
13605
+ .f-carousel__indicators--top[data-v-187b78d3] {
13606
+ top: 16px;
13607
+ left: 50%;
13608
+ transform: translateX(-50%);
13609
+ }
13610
+ .f-carousel--indicator-top .f-carousel__indicators[data-v-187b78d3] {
13611
+ top: 16px;
13612
+ left: 50%;
13613
+ transform: translateX(-50%);
13614
+ }
13615
+ .f-carousel--indicator-bottom .f-carousel__indicators[data-v-187b78d3] {
13616
+ bottom: 16px;
13617
+ left: 50%;
13618
+ transform: translateX(-50%);
13619
+ }
13620
+ .f-carousel--indicator-left .f-carousel__indicators[data-v-187b78d3] {
13621
+ left: 16px;
13622
+ top: 50%;
13623
+ transform: translateY(-50%);
13624
+ flex-direction: column;
13625
+ }
13626
+ .f-carousel--indicator-right .f-carousel__indicators[data-v-187b78d3] {
13627
+ right: 16px;
13628
+ top: 50%;
13629
+ transform: translateY(-50%);
13630
+ flex-direction: column;
13631
+ }
13632
+ .f-carousel__indicator[data-v-187b78d3] {
13633
+ border: none;
13634
+ background: none;
13635
+ cursor: pointer;
13636
+ padding: 4px;
13637
+ transition: all 0.3s;
13638
+ }
13639
+ .f-carousel__indicator--dot[data-v-187b78d3] {
13640
+ width: 8px;
13641
+ height: 8px;
13642
+ border-radius: 50%;
13643
+ background: rgba(255, 255, 255, 0.6);
13644
+ }
13645
+ .f-carousel__indicator--dot[data-v-187b78d3]:hover, .f-carousel__indicator--dot.f-carousel__indicator--active[data-v-187b78d3] {
13646
+ background: white;
13647
+ }
13648
+ .f-carousel__indicator--line[data-v-187b78d3] {
13649
+ width: 24px;
13650
+ height: 3px;
13651
+ background: rgba(255, 255, 255, 0.6);
13652
+ }
13653
+ .f-carousel__indicator--line[data-v-187b78d3]:hover, .f-carousel__indicator--line.f-carousel__indicator--active[data-v-187b78d3] {
13654
+ background: white;
13655
+ }
13656
+ .f-carousel__indicator--number[data-v-187b78d3] {
13657
+ width: 24px;
13658
+ height: 24px;
13659
+ border-radius: 4px;
13660
+ background: rgba(0, 0, 0, 0.5);
13661
+ color: white;
13662
+ font-size: 12px;
13663
+ display: flex;
13664
+ align-items: center;
13665
+ justify-content: center;
13666
+ }
13667
+ .f-carousel__indicator--number[data-v-187b78d3]:hover, .f-carousel__indicator--number.f-carousel__indicator--active[data-v-187b78d3] {
13668
+ background: rgba(0, 0, 0, 0.8);
13669
+ }
13670
+ .f-carousel__play-control[data-v-187b78d3] {
13671
+ position: absolute;
13672
+ top: 16px;
13673
+ right: 16px;
13674
+ z-index: 2;
13675
+ }
13676
+ .f-carousel__play-button[data-v-187b78d3] {
13677
+ width: 32px;
13678
+ height: 32px;
13679
+ border-radius: 50%;
13680
+ background: rgba(0, 0, 0, 0.5);
13681
+ border: none;
13682
+ color: white;
13683
+ cursor: pointer;
13684
+ display: flex;
13685
+ align-items: center;
13686
+ justify-content: center;
13687
+ transition: all 0.3s;
13688
+ }
13689
+ .f-carousel__play-button[data-v-187b78d3]:hover {
13690
+ background: rgba(0, 0, 0, 0.7);
13691
+ }
13692
+ .f-carousel__play-button[data-v-187b78d3] svg {
13693
+ width: 16px;
13694
+ height: 16px;
13695
+ }
13696
+ .f-carousel--fade .f-carousel__track[data-v-187b78d3] {
13697
+ display: block;
13698
+ }
13699
+ .f-carousel--fade .f-carousel__item[data-v-187b78d3] {
13700
+ position: absolute;
13701
+ top: 0;
13702
+ left: 0;
13703
+ opacity: 0;
13704
+ transition: opacity 1s ease;
13705
+ }
13706
+ .f-carousel--fade .f-carousel__item[data-v-187b78d3]:nth-child(1) {
13707
+ opacity: 1;
13708
+ }
13709
+ @media (max-width: 768px) {
13710
+ .f-carousel--horizontal[data-v-187b78d3] {
13711
+ height: var(--f-carousel-height, 300px);
13712
+ }
13713
+ .f-carousel--vertical[data-v-187b78d3] {
13714
+ height: var(--f-carousel-height, 250px);
13715
+ }
13716
+ .f-carousel__title[data-v-187b78d3] {
13717
+ font-size: 20px;
13718
+ }
13719
+ .f-carousel__control[data-v-187b78d3] {
13720
+ width: 32px;
13721
+ height: 32px;
13722
+ }
13723
+ .f-carousel__control[data-v-187b78d3] svg {
13724
+ width: 16px;
13725
+ height: 16px;
13209
13726
  }
13210
13727
  }.f-steps[data-v-39ce5b1c] {
13211
13728
  display: flex;
@@ -13535,7 +14052,7 @@ to {
13535
14052
  }
13536
14053
  .f-timeline-item--large .f-timeline-item__tail[data-v-d4425329] {
13537
14054
  left: 11px;
13538
- }.f-dialog-overlay[data-v-26ecd364] {
14055
+ }.f-dialog-overlay[data-v-7a2da7c7] {
13539
14056
  position: fixed;
13540
14057
  top: 0;
13541
14058
  left: 0;
@@ -13549,8 +14066,9 @@ to {
13549
14066
  padding: 20px;
13550
14067
  backdrop-filter: blur(2px);
13551
14068
  transition: background-color 0.25s ease;
14069
+ touch-action: none;
13552
14070
  }
13553
- .f-dialog[data-v-26ecd364] {
14071
+ .f-dialog[data-v-7a2da7c7] {
13554
14072
  position: relative;
13555
14073
  background: #fff;
13556
14074
  border-radius: 8px;
@@ -13564,7 +14082,7 @@ to {
13564
14082
  will-change: transform, opacity;
13565
14083
  transform-origin: center;
13566
14084
  }
13567
- .f-dialog__close[data-v-26ecd364] {
14085
+ .f-dialog__close[data-v-7a2da7c7] {
13568
14086
  position: absolute;
13569
14087
  top: 16px;
13570
14088
  right: 16px;
@@ -13582,20 +14100,20 @@ to {
13582
14100
  z-index: 1;
13583
14101
  padding: 0;
13584
14102
  }
13585
- .f-dialog__close[data-v-26ecd364]:hover {
14103
+ .f-dialog__close[data-v-7a2da7c7]:hover {
13586
14104
  background: #f5f7fa;
13587
14105
  color: #606266;
13588
14106
  }
13589
- .f-dialog__header[data-v-26ecd364] {
14107
+ .f-dialog__header[data-v-7a2da7c7] {
13590
14108
  padding: 20px 20px 16px;
13591
14109
  display: flex;
13592
14110
  align-items: center;
13593
14111
  gap: 12px;
13594
14112
  }
13595
- .f-dialog__header.has-divider[data-v-26ecd364] {
14113
+ .f-dialog__header.has-divider[data-v-7a2da7c7] {
13596
14114
  border-bottom: 1px solid #e4e7ed;
13597
14115
  }
13598
- .f-dialog__icon[data-v-26ecd364] {
14116
+ .f-dialog__icon[data-v-7a2da7c7] {
13599
14117
  flex-shrink: 0;
13600
14118
  width: 28px;
13601
14119
  height: 28px;
@@ -13604,11 +14122,11 @@ to {
13604
14122
  justify-content: center;
13605
14123
  border-radius: 50%;
13606
14124
  }
13607
- .f-dialog__icon[data-v-26ecd364] svg {
14125
+ .f-dialog__icon[data-v-7a2da7c7] svg {
13608
14126
  width: 20px;
13609
14127
  height: 20px;
13610
14128
  }
13611
- .f-dialog__title[data-v-26ecd364] {
14129
+ .f-dialog__title[data-v-7a2da7c7] {
13612
14130
  flex: 1;
13613
14131
  margin: 0;
13614
14132
  font-size: 18px;
@@ -13616,74 +14134,100 @@ to {
13616
14134
  color: #303133;
13617
14135
  line-height: 1.4;
13618
14136
  }
13619
- .f-dialog__body[data-v-26ecd364] {
14137
+ .f-dialog__body[data-v-7a2da7c7] {
13620
14138
  flex: 1;
13621
14139
  min-height: 0;
13622
- padding: 20px;
13623
14140
  color: #606266;
13624
14141
  font-size: 14px;
13625
14142
  line-height: 1.6;
14143
+ overflow: hidden;
14144
+ display: flex;
14145
+ flex-direction: column;
13626
14146
  }
13627
- .f-dialog__body[data-v-26ecd364] .f-scrollbar {
13628
- height: 100%;
14147
+ .f-dialog__body[data-v-7a2da7c7] .f-scrollbar {
14148
+ flex: 1;
14149
+ min-height: 0;
13629
14150
  }
13630
- .f-dialog__body[data-v-26ecd364] .f-scrollbar__view {
13631
- padding: 0;
14151
+ .f-dialog__body[data-v-7a2da7c7] .f-scrollbar__wrap {
14152
+ overflow-y: auto !important;
14153
+ overflow-x: hidden;
14154
+ -webkit-overflow-scrolling: touch;
14155
+ }
14156
+ .f-dialog__body[data-v-7a2da7c7] .f-scrollbar__view {
14157
+ padding: 20px;
13632
14158
  }
13633
- .f-dialog__body p[data-v-26ecd364] {
14159
+ .f-dialog__body p[data-v-7a2da7c7] {
13634
14160
  margin: 0;
13635
14161
  }
13636
- .f-dialog__footer[data-v-26ecd364] {
14162
+ .f-dialog__footer[data-v-7a2da7c7] {
13637
14163
  padding: 16px 20px;
13638
14164
  display: flex;
13639
14165
  align-items: center;
13640
14166
  justify-content: flex-end;
13641
14167
  gap: 12px;
13642
14168
  }
13643
- .f-dialog__footer.has-divider[data-v-26ecd364] {
14169
+ .f-dialog__footer.has-divider[data-v-7a2da7c7] {
13644
14170
  border-top: 1px solid #e4e7ed;
13645
14171
  }
13646
- .f-dialog--info .f-dialog__icon[data-v-26ecd364] {
14172
+ .f-dialog--info .f-dialog__icon[data-v-7a2da7c7] {
13647
14173
  background: #ecf5ff;
13648
14174
  color: #409eff;
13649
14175
  }
13650
- .f-dialog--success .f-dialog__icon[data-v-26ecd364] {
14176
+ .f-dialog--success .f-dialog__icon[data-v-7a2da7c7] {
13651
14177
  background: #f0f9ff;
13652
14178
  color: #67c23a;
13653
14179
  }
13654
- .f-dialog--warning .f-dialog__icon[data-v-26ecd364] {
14180
+ .f-dialog--warning .f-dialog__icon[data-v-7a2da7c7] {
13655
14181
  background: #fef0e6;
13656
14182
  color: #e6a23c;
13657
14183
  }
13658
- .f-dialog--error .f-dialog__icon[data-v-26ecd364] {
14184
+ .f-dialog--error .f-dialog__icon[data-v-7a2da7c7] {
13659
14185
  background: #fef0f0;
13660
14186
  color: #f56c6c;
13661
14187
  }
13662
- .f-dialog--confirm .f-dialog__icon[data-v-26ecd364] {
14188
+ .f-dialog--confirm .f-dialog__icon[data-v-7a2da7c7] {
13663
14189
  background: #fef0e6;
13664
14190
  color: #e6a23c;
13665
14191
  }
13666
- .dialog-fade-enter-active[data-v-26ecd364],
13667
- .dialog-fade-leave-active[data-v-26ecd364] {
14192
+ .dialog-fade-enter-active[data-v-7a2da7c7],
14193
+ .dialog-fade-leave-active[data-v-7a2da7c7] {
13668
14194
  transition: opacity 0.25s ease;
13669
14195
  }
13670
- .dialog-fade-enter-from[data-v-26ecd364],
13671
- .dialog-fade-leave-to[data-v-26ecd364] {
14196
+ .dialog-fade-enter-from[data-v-7a2da7c7],
14197
+ .dialog-fade-leave-to[data-v-7a2da7c7] {
13672
14198
  opacity: 0;
13673
14199
  }
13674
- .dialog-enter-active[data-v-26ecd364],
13675
- .dialog-leave-active[data-v-26ecd364] {
14200
+ .dialog-enter-active[data-v-7a2da7c7],
14201
+ .dialog-leave-active[data-v-7a2da7c7] {
13676
14202
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
13677
14203
  }
13678
- .dialog-enter-from[data-v-26ecd364],
13679
- .dialog-leave-to[data-v-26ecd364] {
14204
+ .dialog-enter-from[data-v-7a2da7c7],
14205
+ .dialog-leave-to[data-v-7a2da7c7] {
13680
14206
  opacity: 0;
13681
14207
  transform: scale(0.88) translateY(6px);
13682
14208
  }
13683
- .dialog-enter-to[data-v-26ecd364],
13684
- .dialog-leave-from[data-v-26ecd364] {
14209
+ .dialog-enter-to[data-v-7a2da7c7],
14210
+ .dialog-leave-from[data-v-7a2da7c7] {
13685
14211
  opacity: 1;
13686
14212
  transform: scale(1) translateY(0);
14213
+ }
14214
+ @media (max-width: 768px) {
14215
+ .f-dialog-overlay[data-v-7a2da7c7] {
14216
+ padding: 10px;
14217
+ }
14218
+ .f-dialog[data-v-7a2da7c7] {
14219
+ width: 95vw;
14220
+ max-height: 85vh;
14221
+ }
14222
+ .f-dialog__header[data-v-7a2da7c7] {
14223
+ padding: 16px 16px 12px;
14224
+ }
14225
+ .f-dialog__body[data-v-7a2da7c7] .f-scrollbar__view {
14226
+ padding: 16px;
14227
+ }
14228
+ .f-dialog__footer[data-v-7a2da7c7] {
14229
+ padding: 12px 16px;
14230
+ }
13687
14231
  }.f-drawer-backdrop[data-v-c7209ade] {
13688
14232
  position: fixed;
13689
14233
  inset: 0;