fix: 修改按钮样式
This commit is contained in:
阿梦
parent
1569ddc094
commit
1c2d429b11
@ -41,3 +41,86 @@ body {
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.lx-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
transition:
|
||||
background-color 0.2s ease,
|
||||
border-color 0.2s ease,
|
||||
color 0.2s ease;
|
||||
}
|
||||
|
||||
.lx-btn:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.lx-btn--xl {
|
||||
--lx-btn-short-width: 192px;
|
||||
|
||||
height: 72px;
|
||||
padding: 0 40px;
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.lx-btn--lg {
|
||||
--lx-btn-short-width: 168px;
|
||||
|
||||
height: 66px;
|
||||
padding: 0 32px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.lx-btn--md {
|
||||
--lx-btn-short-width: 144px;
|
||||
|
||||
height: 60px;
|
||||
padding: 0 24px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.lx-btn--sm {
|
||||
--lx-btn-short-width: 104px;
|
||||
|
||||
height: 52px;
|
||||
padding: 0 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.lx-btn--short {
|
||||
width: var(--lx-btn-short-width);
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.lx-btn--primary {
|
||||
border-color: #2f80ed;
|
||||
background: #2f80ed;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.lx-btn--secondary {
|
||||
border-color: #eef4ff;
|
||||
background: #eef4ff;
|
||||
color: #5f8fd2;
|
||||
}
|
||||
|
||||
.lx-btn--default {
|
||||
border-color: #d9dde5;
|
||||
background: #fff;
|
||||
color: #2d3138;
|
||||
}
|
||||
|
||||
.lx-btn--outline-primary {
|
||||
border-color: #8eb7df;
|
||||
background: #fff;
|
||||
color: #5f8fd2;
|
||||
}
|
||||
|
||||
@ -42,7 +42,11 @@
|
||||
<h2>账号</h2>
|
||||
<div class="account-line">
|
||||
<span>账号：123453147358</span>
|
||||
<button class="change-password" type="button" @click="showPasswordDialog = true">
|
||||
<button
|
||||
class="change-password lx-btn lx-btn--md lx-btn--default"
|
||||
type="button"
|
||||
@click="showPasswordDialog = true"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M4.8 16.7 16.6 4.9a2 2 0 0 1 2.8 0l.2.2a2 2 0 0 1 0 2.8L7.8 19.7l-3.7.7.7-3.7Z"
|
||||
@ -83,7 +87,7 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<button class="logout-btn" type="button">
|
||||
<button class="logout-btn lx-btn lx-btn--xl lx-btn--default" type="button">
|
||||
<svg viewBox="0 0 24 24" fill="none">
|
||||
<path
|
||||
d="M10 6H6.8A1.8 1.8 0 0 0 5 7.8v8.4A1.8 1.8 0 0 0 6.8 18H10"
|
||||
@ -109,8 +113,8 @@
|
||||
<button
|
||||
v-for="speed in speeds"
|
||||
:key="speed"
|
||||
class="speed-btn"
|
||||
:class="{ active: selectedSpeed === speed }"
|
||||
class="speed-btn lx-btn lx-btn--sm lx-btn--short"
|
||||
:class="selectedSpeed === speed ? 'lx-btn--primary active' : 'lx-btn--secondary'"
|
||||
type="button"
|
||||
@click="selectedSpeed = speed"
|
||||
>
|
||||
@ -165,8 +169,20 @@
|
||||
</label>
|
||||
|
||||
<div class="dialog-actions">
|
||||
<button class="cancel-btn" type="button" @click="showPasswordDialog = false">取消</button>
|
||||
<button class="confirm-btn" type="button" @click="showPasswordDialog = false">确认</button>
|
||||
<button
|
||||
class="cancel-btn lx-btn lx-btn--sm lx-btn--short lx-btn--default"
|
||||
type="button"
|
||||
@click="showPasswordDialog = false"
|
||||
>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
class="confirm-btn lx-btn lx-btn--sm lx-btn--short lx-btn--primary"
|
||||
type="button"
|
||||
@click="showPasswordDialog = false"
|
||||
>
|
||||
确认
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
@ -370,17 +386,7 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
|
||||
}
|
||||
|
||||
.change-password {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
height: 60px;
|
||||
border: 1px solid #e0e4ec;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #15171c;
|
||||
cursor: pointer;
|
||||
font-size: 24px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
||||
.change-password svg {
|
||||
@ -434,17 +440,7 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 18px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 12px 40px;
|
||||
justify-content: center;
|
||||
border: 1px solid #d9dde5;
|
||||
border-radius: 999px;
|
||||
background: #fff;
|
||||
color: #2d3138;
|
||||
cursor: pointer;
|
||||
font-size: 32px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
@ -465,22 +461,8 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.speed-btn {
|
||||
min-width: 76px;
|
||||
height: 34px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 999px;
|
||||
background: #f4f7fb;
|
||||
color: #404854;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.speed-btn.active {
|
||||
border-color: #a9c7e8;
|
||||
background: #edf4ff;
|
||||
box-shadow: inset 0 0 0 1px rgba(47, 128, 237, 0.14);
|
||||
color: #2a689b;
|
||||
}
|
||||
|
||||
.avatar-face {
|
||||
@ -653,25 +635,4 @@ const visiblePasswords = reactive<Record<PasswordKey, boolean>>({
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.cancel-btn,
|
||||
.confirm-btn {
|
||||
width: 104px;
|
||||
height: 42px;
|
||||
border-radius: 999px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.cancel-btn {
|
||||
border: 1px solid #e1e4ec;
|
||||
background: #fff;
|
||||
color: #2f3137;
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
border: none;
|
||||
background: #347af0;
|
||||
color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user