lizongxi/ai-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加按钮和切换组件样式

Browse Source
This commit is contained in:
bakaECC 2025-12-10 16:26:26 +08:00
parent bbb9b4e6b1
commit aa7bec34a6
1 changed files with 92 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
prototype.tsx Normal file
View File

@ -0,0 +1,92 @@
<template>
}
/* 通用按钮 */
.ghost-btn {
border-radius: 999px;
border: 1px solid rgba(143, 154, 183, 0.5);
background: transparent;
font-size: 12px;
padding: 4px 10px;
cursor: pointer;
color: #4b536c;
}
.ghost-btn-xs {
padding: 2px 8px;
font-size: 11px;
}
.primary-btn {
border-radius: 999px;
border: none;
background: #2f7cf6;
color: #ffffff;
font-size: 12px;
padding: 5px 12px;
cursor: pointer;
}
.primary-chip {
border-radius: 999px;
border: none;
background: var(--primary-soft);
color: var(--primary);
font-size: 12px;
padding: 5px 10px;
cursor: pointer;
}
/* toggle */
.toggle {
position: relative;
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: var(--text-sub);
}
.toggle input {
display: none;
}
.toggle-slider {
position: relative;
width: 32px;
height: 18px;
border-radius: 999px;
background: #d3d8e6;
}
.toggle-slider::after {
content: '';
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
border-radius: 999px;
background: #ffffff;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.2);
transition: transform 0.18s ease;
}
.toggle input:checked + .toggle-slider {
background: #2f7cf6;
}
.toggle input:checked + .toggle-slider::after {
transform: translateX(14px);
}
</style>