create-weapp-vite 2.0.36 → 2.0.38
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.
|
@@ -5,10 +5,10 @@ import fs2 from "fs-extra";
|
|
|
5
5
|
import path2 from "pathe";
|
|
6
6
|
|
|
7
7
|
// ../weapp-vite/package.json
|
|
8
|
-
var version = "6.6.
|
|
8
|
+
var version = "6.6.15";
|
|
9
9
|
|
|
10
10
|
// ../wevu/package.json
|
|
11
|
-
var version2 = "6.6.
|
|
11
|
+
var version2 = "6.6.15";
|
|
12
12
|
|
|
13
13
|
// src/enums.ts
|
|
14
14
|
var TemplateName = /* @__PURE__ */ ((TemplateName2) => {
|
package/dist/cli.js
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -4,5 +4,59 @@
|
|
|
4
4
|
"setting": {
|
|
5
5
|
"compileHotReLoad": true
|
|
6
6
|
},
|
|
7
|
+
"condition": {
|
|
8
|
+
"miniprogram": {
|
|
9
|
+
"list": [
|
|
10
|
+
{
|
|
11
|
+
"name": "首页",
|
|
12
|
+
"pathName": "pages/index/index",
|
|
13
|
+
"query": "",
|
|
14
|
+
"scene": null
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"name": "数据页",
|
|
18
|
+
"pathName": "pages/data/index",
|
|
19
|
+
"query": "",
|
|
20
|
+
"scene": null
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"name": "表单页",
|
|
24
|
+
"pathName": "pages/form/index",
|
|
25
|
+
"query": "",
|
|
26
|
+
"scene": null
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"name": "清单页",
|
|
30
|
+
"pathName": "pages/list/index",
|
|
31
|
+
"query": "",
|
|
32
|
+
"scene": null
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"name": "能力页",
|
|
36
|
+
"pathName": "pages/ability/index",
|
|
37
|
+
"query": "",
|
|
38
|
+
"scene": null
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"name": "组件实验室",
|
|
42
|
+
"pathName": "subpackages/lab/index",
|
|
43
|
+
"query": "",
|
|
44
|
+
"scene": null
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"name": "Class 绑定实验室",
|
|
48
|
+
"pathName": "subpackages/lab/class-binding/index",
|
|
49
|
+
"query": "",
|
|
50
|
+
"scene": null
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"name": "系统能力页",
|
|
54
|
+
"pathName": "subpackages/ability/index",
|
|
55
|
+
"query": "",
|
|
56
|
+
"scene": null
|
|
57
|
+
}
|
|
58
|
+
]
|
|
59
|
+
}
|
|
60
|
+
},
|
|
7
61
|
"libVersion": "3.14.0"
|
|
8
62
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { computed, reactive, ref,
|
|
2
|
+
import { computed, reactive, ref, watch } from 'wevu'
|
|
3
3
|
|
|
4
4
|
import SectionTitle from '@/components/SectionTitle/index.vue'
|
|
5
5
|
|
|
@@ -12,11 +12,42 @@ const isActive = ref(true)
|
|
|
12
12
|
const hasError = ref(false)
|
|
13
13
|
const isRound = ref(false)
|
|
14
14
|
const isGhost = ref(false)
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
|
|
16
|
+
function resolveSwitchValue(event: unknown, fallback: boolean) {
|
|
17
|
+
if (typeof event === 'boolean') {
|
|
18
|
+
return event
|
|
19
|
+
}
|
|
20
|
+
if (event && typeof event === 'object') {
|
|
21
|
+
const payload = event as Record<string, any>
|
|
22
|
+
const detail = payload.detail
|
|
23
|
+
if (typeof detail === 'boolean') {
|
|
24
|
+
return detail
|
|
25
|
+
}
|
|
26
|
+
if (detail && typeof detail === 'object' && typeof detail.value === 'boolean') {
|
|
27
|
+
return detail.value
|
|
28
|
+
}
|
|
29
|
+
if (typeof payload.value === 'boolean') {
|
|
30
|
+
return payload.value
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
return fallback
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
function onActiveChange(event: unknown) {
|
|
37
|
+
isActive.value = resolveSwitchValue(event, !isActive.value)
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
function onErrorChange(event: unknown) {
|
|
41
|
+
hasError.value = resolveSwitchValue(event, !hasError.value)
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
function onRoundChange(event: unknown) {
|
|
45
|
+
isRound.value = resolveSwitchValue(event, !isRound.value)
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function onGhostChange(event: unknown) {
|
|
49
|
+
isGhost.value = resolveSwitchValue(event, !isGhost.value)
|
|
50
|
+
}
|
|
20
51
|
|
|
21
52
|
const classObject = reactive({
|
|
22
53
|
'demo-active': true,
|
|
@@ -42,6 +73,87 @@ const errorClassIf = computed(() => (hasError.value ? errorClass.value : ''))
|
|
|
42
73
|
const roundClassIf = computed(() => (isRound.value ? roundClass.value : ''))
|
|
43
74
|
const ghostClassIf = computed(() => (isGhost.value ? ghostClass.value : ''))
|
|
44
75
|
const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value }))
|
|
76
|
+
|
|
77
|
+
const styleObject = computed(() => ({
|
|
78
|
+
background: hasError.value
|
|
79
|
+
? '#fff1f2'
|
|
80
|
+
: isActive.value
|
|
81
|
+
? 'linear-gradient(135deg,#2563eb,#6366f1)'
|
|
82
|
+
: '#ffffff',
|
|
83
|
+
borderColor: hasError.value ? '#ef4444' : isActive.value ? '#1e40af' : '#d7d9f2',
|
|
84
|
+
borderStyle: isGhost.value ? 'dashed' : 'solid',
|
|
85
|
+
borderRadius: isRound.value ? '999rpx' : '18rpx',
|
|
86
|
+
color: hasError.value ? '#b91c1c' : isActive.value ? '#ffffff' : '#1f1a3f',
|
|
87
|
+
}))
|
|
88
|
+
|
|
89
|
+
const styleArray = computed(() => ([
|
|
90
|
+
{ transition: 'all 0.2s ease' },
|
|
91
|
+
isActive.value ? { transform: 'translateY(-4rpx)' } : { transform: 'translateY(0rpx)' },
|
|
92
|
+
hasError.value
|
|
93
|
+
? { boxShadow: '0 18rpx 32rpx rgba(239,68,68,0.2)' }
|
|
94
|
+
: { boxShadow: '0 10rpx 20rpx rgba(37,99,235,0.28)' },
|
|
95
|
+
isRound.value ? { borderRadius: '999rpx' } : { borderRadius: '18rpx' },
|
|
96
|
+
isGhost.value ? { opacity: '0.78' } : { opacity: '1' },
|
|
97
|
+
]))
|
|
98
|
+
|
|
99
|
+
const styleString = computed(() => {
|
|
100
|
+
const fontSize = isActive.value ? 26 : 24
|
|
101
|
+
const color = hasError.value ? '#b91c1c' : '#1f1a3f'
|
|
102
|
+
const spacing = isGhost.value ? 1.2 : 0.5
|
|
103
|
+
return `font-size:${fontSize}rpx;color:${color};letter-spacing:${spacing}rpx;`
|
|
104
|
+
})
|
|
105
|
+
|
|
106
|
+
const styleWithVar = computed(() => {
|
|
107
|
+
const accent = hasError.value ? '#ef4444' : '#2563eb'
|
|
108
|
+
return {
|
|
109
|
+
'--lab-accent': accent,
|
|
110
|
+
'borderColor': 'var(--lab-accent)',
|
|
111
|
+
'color': 'var(--lab-accent)',
|
|
112
|
+
}
|
|
113
|
+
})
|
|
114
|
+
|
|
115
|
+
function applyScenarioBase() {
|
|
116
|
+
isActive.value = false
|
|
117
|
+
hasError.value = false
|
|
118
|
+
isRound.value = false
|
|
119
|
+
isGhost.value = false
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
function applyScenarioAllOn() {
|
|
123
|
+
isActive.value = true
|
|
124
|
+
hasError.value = true
|
|
125
|
+
isRound.value = true
|
|
126
|
+
isGhost.value = true
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
function applyScenarioMixed() {
|
|
130
|
+
isActive.value = true
|
|
131
|
+
hasError.value = false
|
|
132
|
+
isRound.value = true
|
|
133
|
+
isGhost.value = false
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
function applyScenarioErrorGhost() {
|
|
137
|
+
isActive.value = false
|
|
138
|
+
hasError.value = true
|
|
139
|
+
isRound.value = false
|
|
140
|
+
isGhost.value = true
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
function runE2EState() {
|
|
144
|
+
return {
|
|
145
|
+
isActive: isActive.value,
|
|
146
|
+
hasError: hasError.value,
|
|
147
|
+
isRound: isRound.value,
|
|
148
|
+
isGhost: isGhost.value,
|
|
149
|
+
classObject: { ...classObject },
|
|
150
|
+
activeClassIf: activeClassIf.value,
|
|
151
|
+
errorClassIf: errorClassIf.value,
|
|
152
|
+
roundClassIf: roundClassIf.value,
|
|
153
|
+
ghostClassIf: ghostClassIf.value,
|
|
154
|
+
styleString: styleString.value,
|
|
155
|
+
}
|
|
156
|
+
}
|
|
45
157
|
</script>
|
|
46
158
|
|
|
47
159
|
<template>
|
|
@@ -86,17 +198,31 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
86
198
|
</view>
|
|
87
199
|
</view>
|
|
88
200
|
</view>
|
|
201
|
+
<view class="mt-[12rpx] flex flex-wrap gap-[12rpx]">
|
|
202
|
+
<t-button size="small" variant="outline" @tap="applyScenarioBase">
|
|
203
|
+
Base
|
|
204
|
+
</t-button>
|
|
205
|
+
<t-button size="small" variant="outline" @tap="applyScenarioAllOn">
|
|
206
|
+
All On
|
|
207
|
+
</t-button>
|
|
208
|
+
<t-button size="small" variant="outline" @tap="applyScenarioMixed">
|
|
209
|
+
Mixed
|
|
210
|
+
</t-button>
|
|
211
|
+
<t-button size="small" variant="outline" @tap="applyScenarioErrorGhost">
|
|
212
|
+
Error+Ghost
|
|
213
|
+
</t-button>
|
|
214
|
+
</view>
|
|
89
215
|
</view>
|
|
90
216
|
|
|
91
217
|
<view class="mt-[18rpx] space-y-[14rpx]">
|
|
92
218
|
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
93
219
|
<SectionTitle title="对象语法" subtitle="状态驱动 class" />
|
|
94
|
-
<view class="mt-[12rpx] demo-block" :class="{ 'demo-active': isActive }">
|
|
220
|
+
<view class="mt-[12rpx] demo-block" data-e2e="class-object" :class="{ 'demo-active': isActive }">
|
|
95
221
|
<view>
|
|
96
222
|
<text class="block text-[24rpx] font-semibold">
|
|
97
223
|
Object Syntax
|
|
98
224
|
</text>
|
|
99
|
-
<text class="mt-[6rpx] block text-[20rpx]
|
|
225
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
100
226
|
active 触发高亮
|
|
101
227
|
</text>
|
|
102
228
|
</view>
|
|
@@ -108,12 +234,16 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
108
234
|
|
|
109
235
|
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
110
236
|
<SectionTitle title="静态 + 对象" subtitle="静态 class + 动态对象" />
|
|
111
|
-
<view
|
|
237
|
+
<view
|
|
238
|
+
class="mt-[12rpx] demo-block demo-ghost"
|
|
239
|
+
data-e2e="class-static-object"
|
|
240
|
+
:class="{ 'demo-active': isActive, 'text-danger': hasError }"
|
|
241
|
+
>
|
|
112
242
|
<view>
|
|
113
243
|
<text class="block text-[24rpx] font-semibold">
|
|
114
244
|
Static + Object
|
|
115
245
|
</text>
|
|
116
|
-
<text class="mt-[6rpx] block text-[20rpx]
|
|
246
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
117
247
|
error 显示警示色
|
|
118
248
|
</text>
|
|
119
249
|
</view>
|
|
@@ -125,12 +255,12 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
125
255
|
|
|
126
256
|
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
127
257
|
<SectionTitle title="响应式对象" subtitle="reactive classObject" />
|
|
128
|
-
<view class="mt-[12rpx] demo-block" :class="classObject">
|
|
258
|
+
<view class="mt-[12rpx] demo-block" data-e2e="class-reactive" :class="classObject">
|
|
129
259
|
<view>
|
|
130
260
|
<text class="block text-[24rpx] font-semibold">
|
|
131
261
|
Reactive Object
|
|
132
262
|
</text>
|
|
133
|
-
<text class="mt-[6rpx] block text-[20rpx]
|
|
263
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
134
264
|
多状态合并控制
|
|
135
265
|
</text>
|
|
136
266
|
</view>
|
|
@@ -142,12 +272,12 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
142
272
|
|
|
143
273
|
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
144
274
|
<SectionTitle title="数组语法" subtitle="数组传入多个 class" />
|
|
145
|
-
<view class="mt-[12rpx] demo-block" :class="[activeClassIf, errorClassIf, roundClassIf]">
|
|
275
|
+
<view class="mt-[12rpx] demo-block" data-e2e="class-array" :class="[activeClassIf, errorClassIf, roundClassIf]">
|
|
146
276
|
<view>
|
|
147
277
|
<text class="block text-[24rpx] font-semibold">
|
|
148
278
|
Array Syntax
|
|
149
279
|
</text>
|
|
150
|
-
<text class="mt-[6rpx] block text-[20rpx]
|
|
280
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
151
281
|
组合多个 class
|
|
152
282
|
</text>
|
|
153
283
|
</view>
|
|
@@ -159,12 +289,12 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
159
289
|
|
|
160
290
|
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
161
291
|
<SectionTitle title="数组条件" subtitle="条件判断决定 class" />
|
|
162
|
-
<view class="mt-[12rpx] demo-block" :class="[isActive ? activeClass : '', errorClassIf]">
|
|
292
|
+
<view class="mt-[12rpx] demo-block" data-e2e="class-cond-array" :class="[isActive ? activeClass : '', errorClassIf]">
|
|
163
293
|
<view>
|
|
164
294
|
<text class="block text-[24rpx] font-semibold">
|
|
165
295
|
Conditional Array
|
|
166
296
|
</text>
|
|
167
|
-
<text class="mt-[6rpx] block text-[20rpx]
|
|
297
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
168
298
|
条件表达式返回 class
|
|
169
299
|
</text>
|
|
170
300
|
</view>
|
|
@@ -176,12 +306,12 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
176
306
|
|
|
177
307
|
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
178
308
|
<SectionTitle title="数组 + 动态 key" subtitle="对象 + 字符串混合" />
|
|
179
|
-
<view class="mt-[12rpx] demo-block" :class="[dynamicKeyClass, errorClassIf, ghostClassIf]">
|
|
309
|
+
<view class="mt-[12rpx] demo-block" data-e2e="class-array-key" :class="[dynamicKeyClass, errorClassIf, ghostClassIf]">
|
|
180
310
|
<view>
|
|
181
311
|
<text class="block text-[24rpx] font-semibold">
|
|
182
312
|
Array + Key
|
|
183
313
|
</text>
|
|
184
|
-
<text class="mt-[6rpx] block text-[20rpx]
|
|
314
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
185
315
|
支持计算属性 key
|
|
186
316
|
</text>
|
|
187
317
|
</view>
|
|
@@ -190,6 +320,83 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
190
320
|
</view>
|
|
191
321
|
</view>
|
|
192
322
|
</view>
|
|
323
|
+
|
|
324
|
+
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
325
|
+
<SectionTitle title="Style 对象语法" subtitle="对象绑定动态 style" />
|
|
326
|
+
<view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-object" :style="styleObject">
|
|
327
|
+
<view>
|
|
328
|
+
<text class="block text-[24rpx] font-semibold">
|
|
329
|
+
Style Object
|
|
330
|
+
</text>
|
|
331
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
332
|
+
多属性对象绑定
|
|
333
|
+
</text>
|
|
334
|
+
</view>
|
|
335
|
+
<view class="demo-chip">
|
|
336
|
+
StyObj
|
|
337
|
+
</view>
|
|
338
|
+
</view>
|
|
339
|
+
</view>
|
|
340
|
+
|
|
341
|
+
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
342
|
+
<SectionTitle title="Style 数组语法" subtitle="按状态合并样式片段" />
|
|
343
|
+
<view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-array" :style="styleArray">
|
|
344
|
+
<view>
|
|
345
|
+
<text class="block text-[24rpx] font-semibold">
|
|
346
|
+
Style Array
|
|
347
|
+
</text>
|
|
348
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
349
|
+
条件 style 片段
|
|
350
|
+
</text>
|
|
351
|
+
</view>
|
|
352
|
+
<view class="demo-chip">
|
|
353
|
+
StyArr
|
|
354
|
+
</view>
|
|
355
|
+
</view>
|
|
356
|
+
</view>
|
|
357
|
+
|
|
358
|
+
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
359
|
+
<SectionTitle title="Style 字符串语法" subtitle="拼接结果直出字符串" />
|
|
360
|
+
<view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-string" :style="styleString">
|
|
361
|
+
<view>
|
|
362
|
+
<text class="block text-[24rpx] font-semibold">
|
|
363
|
+
Style String
|
|
364
|
+
</text>
|
|
365
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
366
|
+
string 绑定与条件拼接
|
|
367
|
+
</text>
|
|
368
|
+
</view>
|
|
369
|
+
<view class="demo-chip">
|
|
370
|
+
StyStr
|
|
371
|
+
</view>
|
|
372
|
+
</view>
|
|
373
|
+
</view>
|
|
374
|
+
|
|
375
|
+
<view class="rounded-[24rpx] bg-white p-[20rpx] shadow-[0_18rpx_40rpx_rgba(17,24,39,0.08)]">
|
|
376
|
+
<SectionTitle title="Style 变量语法" subtitle="CSS 变量与对象混合" />
|
|
377
|
+
<view class="mt-[12rpx] demo-block demo-style-anchor" data-e2e="style-var" :style="styleWithVar">
|
|
378
|
+
<view>
|
|
379
|
+
<text class="block text-[24rpx] font-semibold">
|
|
380
|
+
Style Variable
|
|
381
|
+
</text>
|
|
382
|
+
<text class="mt-[6rpx] block text-[20rpx] demo-subtext">
|
|
383
|
+
变量透传与消费
|
|
384
|
+
</text>
|
|
385
|
+
</view>
|
|
386
|
+
<view class="demo-chip">
|
|
387
|
+
StyVar
|
|
388
|
+
</view>
|
|
389
|
+
</view>
|
|
390
|
+
</view>
|
|
391
|
+
|
|
392
|
+
<view class="rounded-[24rpx] bg-[#111827] p-[18rpx] text-white">
|
|
393
|
+
<text class="text-[20rpx] text-slate-300">
|
|
394
|
+
E2E 状态快照
|
|
395
|
+
</text>
|
|
396
|
+
<text class="mt-[8rpx] block text-[20rpx]" data-e2e="state-line">
|
|
397
|
+
{{ runE2EState() }}
|
|
398
|
+
</text>
|
|
399
|
+
</view>
|
|
193
400
|
</view>
|
|
194
401
|
</view>
|
|
195
402
|
</template>
|
|
@@ -200,19 +407,24 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
200
407
|
align-items: center;
|
|
201
408
|
justify-content: space-between;
|
|
202
409
|
padding: 20rpx;
|
|
203
|
-
border: 2rpx solid #d7d9f2;
|
|
204
|
-
background: #ffffff;
|
|
205
410
|
color: #1f1a3f;
|
|
411
|
+
background: #fff;
|
|
412
|
+
border: 2rpx solid #d7d9f2;
|
|
206
413
|
border-radius: 18rpx;
|
|
207
414
|
transition: all 0.2s ease;
|
|
208
415
|
}
|
|
209
416
|
|
|
210
417
|
.demo-chip {
|
|
211
418
|
padding: 6rpx 16rpx;
|
|
212
|
-
border-radius: 999rpx;
|
|
213
419
|
font-size: 18rpx;
|
|
214
|
-
border: 2rpx solid currentColor;
|
|
215
420
|
letter-spacing: 0.5rpx;
|
|
421
|
+
border: 2rpx solid currentcolor;
|
|
422
|
+
border-radius: 999rpx;
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
.demo-subtext {
|
|
426
|
+
color: currentcolor;
|
|
427
|
+
opacity: 0.82;
|
|
216
428
|
}
|
|
217
429
|
|
|
218
430
|
.demo-ghost {
|
|
@@ -225,17 +437,23 @@ const dynamicKeyClass = computed(() => ({ [activeClass.value]: isActive.value })
|
|
|
225
437
|
}
|
|
226
438
|
|
|
227
439
|
.demo-active {
|
|
440
|
+
color: #fff;
|
|
228
441
|
background: linear-gradient(135deg, #2563eb, #6366f1);
|
|
229
442
|
border-color: #1e40af;
|
|
230
|
-
|
|
231
|
-
box-shadow: 0 18rpx 32rpx rgba(37, 99, 235, 0.35);
|
|
443
|
+
box-shadow: 0 18rpx 32rpx rgb(37 99 235 / 35%);
|
|
232
444
|
transform: translateY(-4rpx);
|
|
233
445
|
}
|
|
234
446
|
|
|
235
447
|
.text-danger {
|
|
448
|
+
color: #b91c1c;
|
|
236
449
|
background: #fff1f2;
|
|
237
450
|
border-color: #ef4444;
|
|
238
|
-
|
|
239
|
-
|
|
451
|
+
box-shadow: 0 18rpx 32rpx rgb(239 68 68 / 20%);
|
|
452
|
+
}
|
|
453
|
+
|
|
454
|
+
.demo-style-anchor {
|
|
455
|
+
border-color: #d7d9f2;
|
|
456
|
+
border-style: solid;
|
|
457
|
+
border-width: 2rpx;
|
|
240
458
|
}
|
|
241
459
|
</style>
|