@atooyu/uxto-ui 1.1.48 → 1.1.49
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/dist/index.js +58 -64
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +58 -64
- package/dist/index.mjs.map +1 -1
- package/dist/style.css +14 -21
- package/package.json +1 -1
- package/src/components/u-tabbar/u-tabbar.vue +27 -40
package/dist/style.css
CHANGED
|
@@ -2380,7 +2380,7 @@ to {
|
|
|
2380
2380
|
}
|
|
2381
2381
|
.u-read-more__toggle-icon[data-v-b31720eb] {
|
|
2382
2382
|
font-size: 12px;
|
|
2383
|
-
}.u-tabbar[data-v-
|
|
2383
|
+
}.u-tabbar[data-v-745a84ac] {
|
|
2384
2384
|
position: fixed;
|
|
2385
2385
|
left: 0;
|
|
2386
2386
|
right: 0;
|
|
@@ -2391,7 +2391,7 @@ to {
|
|
|
2391
2391
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
2392
2392
|
padding-bottom: env(safe-area-inset-bottom);
|
|
2393
2393
|
}
|
|
2394
|
-
.u-tabbar__nav-wrap[data-v-
|
|
2394
|
+
.u-tabbar__nav-wrap[data-v-745a84ac] {
|
|
2395
2395
|
position: absolute;
|
|
2396
2396
|
left: 14px;
|
|
2397
2397
|
right: 14px;
|
|
@@ -2407,7 +2407,7 @@ to {
|
|
|
2407
2407
|
padding: 0 8px;
|
|
2408
2408
|
box-sizing: border-box;
|
|
2409
2409
|
}
|
|
2410
|
-
.u-tabbar__tab-btn[data-v-
|
|
2410
|
+
.u-tabbar__tab-btn[data-v-745a84ac] {
|
|
2411
2411
|
height: 40px;
|
|
2412
2412
|
border-radius: 20px;
|
|
2413
2413
|
background: transparent;
|
|
@@ -2422,30 +2422,23 @@ to {
|
|
|
2422
2422
|
padding: 0 16px;
|
|
2423
2423
|
margin: 0 20px;
|
|
2424
2424
|
}
|
|
2425
|
-
.u-tabbar__tab-btn--active[data-v-
|
|
2425
|
+
.u-tabbar__tab-btn--active[data-v-745a84ac] {
|
|
2426
2426
|
background: #ffffff;
|
|
2427
2427
|
box-shadow: inset 0 0 0 1px rgba(17, 135, 128, 0.14);
|
|
2428
2428
|
}
|
|
2429
|
-
.u-tabbar__tab-
|
|
2430
|
-
display: flex;
|
|
2431
|
-
align-items: center;
|
|
2432
|
-
justify-content: center;
|
|
2433
|
-
gap: 4px;
|
|
2434
|
-
pointer-events: none;
|
|
2435
|
-
}
|
|
2436
|
-
.u-tabbar__tab-text[data-v-eb2ab9a2] {
|
|
2429
|
+
.u-tabbar__tab-text[data-v-745a84ac] {
|
|
2437
2430
|
font-weight: 600;
|
|
2438
2431
|
font-size: 14px;
|
|
2439
2432
|
overflow: hidden;
|
|
2440
2433
|
text-overflow: ellipsis;
|
|
2441
2434
|
}
|
|
2442
|
-
.u-tabbar__center[data-v-
|
|
2435
|
+
.u-tabbar__center[data-v-745a84ac] {
|
|
2443
2436
|
position: relative;
|
|
2444
2437
|
width: 72px;
|
|
2445
2438
|
height: 56px;
|
|
2446
2439
|
flex-shrink: 0;
|
|
2447
2440
|
}
|
|
2448
|
-
.u-tabbar__center-btn[data-v-
|
|
2441
|
+
.u-tabbar__center-btn[data-v-745a84ac] {
|
|
2449
2442
|
position: absolute;
|
|
2450
2443
|
left: 50%;
|
|
2451
2444
|
top: -22px;
|
|
@@ -2463,29 +2456,29 @@ to {
|
|
|
2463
2456
|
box-shadow: 0 8px 20px rgba(8, 112, 106, 0.25);
|
|
2464
2457
|
transition: all 200ms ease;
|
|
2465
2458
|
}
|
|
2466
|
-
.u-tabbar__center-btn[data-v-
|
|
2459
|
+
.u-tabbar__center-btn[data-v-745a84ac]:active {
|
|
2467
2460
|
transform: translateX(-50%) scale(0.95);
|
|
2468
2461
|
}
|
|
2469
|
-
.u-tabbar__center-btn--active[data-v-
|
|
2462
|
+
.u-tabbar__center-btn--active[data-v-745a84ac] {
|
|
2470
2463
|
border-color: #12b6af;
|
|
2471
2464
|
box-shadow: 0 8px 24px rgba(8, 112, 106, 0.35);
|
|
2472
2465
|
}
|
|
2473
|
-
.u-tabbar__center-btn--side-active[data-v-
|
|
2466
|
+
.u-tabbar__center-btn--side-active[data-v-745a84ac] {
|
|
2474
2467
|
background: linear-gradient(135deg, #12b6af 0%, #65d8d1 100%);
|
|
2475
2468
|
border-color: #9fe4dd;
|
|
2476
2469
|
}
|
|
2477
|
-
.u-tabbar__center-btn--side-active .u-tabbar__center-brand[data-v-
|
|
2478
|
-
.u-tabbar__center-btn--side-active .u-tabbar__center-text[data-v-
|
|
2470
|
+
.u-tabbar__center-btn--side-active .u-tabbar__center-brand[data-v-745a84ac],
|
|
2471
|
+
.u-tabbar__center-btn--side-active .u-tabbar__center-text[data-v-745a84ac] {
|
|
2479
2472
|
color: #ffffff;
|
|
2480
2473
|
}
|
|
2481
|
-
.u-tabbar__center-brand[data-v-
|
|
2474
|
+
.u-tabbar__center-brand[data-v-745a84ac] {
|
|
2482
2475
|
font-size: 22px;
|
|
2483
2476
|
line-height: 1;
|
|
2484
2477
|
font-weight: 700;
|
|
2485
2478
|
color: #12b6af;
|
|
2486
2479
|
letter-spacing: 1px;
|
|
2487
2480
|
}
|
|
2488
|
-
.u-tabbar__center-text[data-v-
|
|
2481
|
+
.u-tabbar__center-text[data-v-745a84ac] {
|
|
2489
2482
|
font-size: 12px;
|
|
2490
2483
|
letter-spacing: 0.5px;
|
|
2491
2484
|
color: #12b6af;
|
package/package.json
CHANGED
|
@@ -6,22 +6,20 @@
|
|
|
6
6
|
<view
|
|
7
7
|
class="u-tabbar__tab-btn"
|
|
8
8
|
:class="{ 'u-tabbar__tab-btn--active': modelValue === leftTab.value }"
|
|
9
|
-
@tap
|
|
9
|
+
@tap="switchTab(leftTab.value)"
|
|
10
10
|
>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
</text>
|
|
24
|
-
</view>
|
|
11
|
+
<u-icon
|
|
12
|
+
v-if="leftTab.icon"
|
|
13
|
+
:name="leftTab.icon"
|
|
14
|
+
:size="16"
|
|
15
|
+
:color="modelValue === leftTab.value ? activeColor : inactiveColor"
|
|
16
|
+
/>
|
|
17
|
+
<text
|
|
18
|
+
class="u-tabbar__tab-text"
|
|
19
|
+
:style="{ color: modelValue === leftTab.value ? activeColor : inactiveColor }"
|
|
20
|
+
>
|
|
21
|
+
{{ leftTab.label }}
|
|
22
|
+
</text>
|
|
25
23
|
</view>
|
|
26
24
|
|
|
27
25
|
<!-- 中间占位 + 凸起按钮 -->
|
|
@@ -32,7 +30,7 @@
|
|
|
32
30
|
'u-tabbar__center-btn--active': modelValue === centerTab.value,
|
|
33
31
|
'u-tabbar__center-btn--side-active': modelValue === leftTab.value || modelValue === rightTab.value
|
|
34
32
|
}"
|
|
35
|
-
@tap
|
|
33
|
+
@tap="switchTab(centerTab.value)"
|
|
36
34
|
>
|
|
37
35
|
<text class="u-tabbar__center-brand">
|
|
38
36
|
{{ centerBrand }}
|
|
@@ -47,22 +45,20 @@
|
|
|
47
45
|
<view
|
|
48
46
|
class="u-tabbar__tab-btn"
|
|
49
47
|
:class="{ 'u-tabbar__tab-btn--active': modelValue === rightTab.value }"
|
|
50
|
-
@tap
|
|
48
|
+
@tap="switchTab(rightTab.value)"
|
|
51
49
|
>
|
|
52
|
-
<
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
</text>
|
|
65
|
-
</view>
|
|
50
|
+
<u-icon
|
|
51
|
+
v-if="rightTab.icon"
|
|
52
|
+
:name="rightTab.icon"
|
|
53
|
+
:size="16"
|
|
54
|
+
:color="modelValue === rightTab.value ? activeColor : inactiveColor"
|
|
55
|
+
/>
|
|
56
|
+
<text
|
|
57
|
+
class="u-tabbar__tab-text"
|
|
58
|
+
:style="{ color: modelValue === rightTab.value ? activeColor : inactiveColor }"
|
|
59
|
+
>
|
|
60
|
+
{{ rightTab.label }}
|
|
61
|
+
</text>
|
|
66
62
|
</view>
|
|
67
63
|
</view>
|
|
68
64
|
</view>
|
|
@@ -194,15 +190,6 @@ $--paper: #ffffff;
|
|
|
194
190
|
}
|
|
195
191
|
}
|
|
196
192
|
|
|
197
|
-
// Tab内容容器 - 防止子元素拦截点击
|
|
198
|
-
&__tab-content {
|
|
199
|
-
display: flex;
|
|
200
|
-
align-items: center;
|
|
201
|
-
justify-content: center;
|
|
202
|
-
gap: 4px;
|
|
203
|
-
pointer-events: none;
|
|
204
|
-
}
|
|
205
|
-
|
|
206
193
|
&__tab-text {
|
|
207
194
|
font-weight: 600;
|
|
208
195
|
font-size: 14px;
|