style: 样式修改

This commit is contained in:
2025-12-01 11:30:31 +08:00
parent 5d6ad32c80
commit 81df571ddf
11 changed files with 70 additions and 270 deletions

View File

@@ -2,7 +2,7 @@
<div class="customer-container safe-area-top" :class="{ 'form-mode': pageMode === 'form' }">
<template v-if="pageMode === 'entry'">
<div class="setting flex flex-between">
<SvgIcon name="left" size="70" @click="handleBack" />
<SvgIcon name="left" size="70" @click="handleBack" />
<SvgIcon name="setting" size="70" />
</div>
@@ -13,13 +13,17 @@
</template>
<template v-else>
<div class="form-container">
<div class="back-container flex flex-center" @click="handleBack">
<SvgIcon name="left" size="70" @click="handleBack" />
<div class="menu flex flex-between">
<div class="back-container flex flex-between" @click="handleBack">
<SvgIcon name="left" size="70" @click="handleBack" />
</div>
<SvgIcon name="setting" size="70" />
</div>
<div class="text">
<div class="form-title">Customer ID</div>
<div class="description">
Redefine the styling experience with AI. Use<br />Styling Angel to speed up your fashion<br />journey.
Redefine the styling experience with AI. Use<br />Styling Angel to speed up your
fashion<br />journey.
</div>
</div>
@@ -149,25 +153,19 @@ const handleConfirm = async () => {
}
.form-container {
.back-container {
width: 7.3rem;
height: 7.3rem;
// border: 0.2rem solid #fff;
border-radius: 1.8rem;
font-size: 4.3rem;
// background: rgba(0, 0, 0, 0.2);
// backdrop-filter: blur(20px);
// -webkit-backdrop-filter: blur(20px);
// -moz-backdrop-filter: blur(20px);
// -ms-backdrop-filter: blur(20px);
// -o-backdrop-filter: blur(20px);
margin-left: 7rem;
position: relative;
// box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 #000000;
.menu {
padding: 0 4.8rem 0 8.4rem;
.back-container {
width: 7.3rem;
height: 7.3rem;
border-radius: 1.8rem;
font-size: 4.3rem;
position: relative;
.back-icon {
width: 2.08rem;
height: 3.47rem;
.back-icon {
width: 2.08rem;
height: 3.47rem;
}
}
}
.text {
@@ -193,8 +191,8 @@ const handleConfirm = async () => {
border: 0.2rem solid #ffffff;
border-radius: 4.7rem;
margin: 0 14.2rem;
// padding: 8.2rem 7.9rem;
padding: 11rem 7.5rem;
// padding: 8.2rem 7.9rem;
padding: 11rem 7.5rem;
margin-top: 11rem;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
display: flex;
@@ -206,10 +204,10 @@ const handleConfirm = async () => {
rgba(0, 0, 0, 0) 100%
);
backdrop-filter: blur(35px);
justify-content: flex-start;
justify-content: flex-start;
.form-field {
margin-bottom: 6.8rem;
margin-bottom: 6.8rem;
&.email {
margin-bottom: 6.8rem;
}
@@ -265,4 +263,7 @@ const handleConfirm = async () => {
}
}
}
.c-svg {
width: initial;
}
</style>