feat: refine profile and home UI with dynamic fortune rules
This commit is contained in:
zhouzhibo committed
1 parent
869376979c
commit
4608dbd5cf
59 files changed
+3424
-1347
No files matched your search
@@ -1,113 +1,364 @@
|
||||
.edit-page {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
color: #211c3a;
|
||||
background:
|
||||
radial-gradient(circle at 14% 12%, rgba(179, 154, 255, 0.72), transparent 34%),
|
||||
linear-gradient(180deg, #c2afff 0%, #e4d8ff 36%, #edf4ff 70%, #edf5ff 100%);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.edit-page .nav {
|
||||
height: calc(112px + env(safe-area-inset-top));
|
||||
padding: 0 32px 24px;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.edit-page .nav-title {
|
||||
color: #211c3a;
|
||||
font-size: 40px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.edit-page .back {
|
||||
left: 34px;
|
||||
bottom: 18px;
|
||||
color: #292244;
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.profile-loading {
|
||||
padding-top: calc(280px + env(safe-area-inset-top));
|
||||
text-align: center;
|
||||
color: rgba(33, 28, 58, 0.58);
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.edit-content {
|
||||
width: 100%;
|
||||
max-width: 750px;
|
||||
min-height: 100vh;
|
||||
margin: 0 auto;
|
||||
padding: calc(164px + env(safe-area-inset-top)) 64px calc(78px + env(safe-area-inset-bottom));
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 210px;
|
||||
}
|
||||
|
||||
.edit-avatar {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border-radius: 88px;
|
||||
background: #fbffd7;
|
||||
color: #17c9ea;
|
||||
font-size: 60px;
|
||||
.avatar-button {
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
flex: none;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 237, 0.94);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
box-shadow: 0 4px 12px rgba(102, 83, 151, 0.08);
|
||||
}
|
||||
|
||||
.avatar-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.water-mascot {
|
||||
width: 142px;
|
||||
height: 178px;
|
||||
position: relative;
|
||||
border-radius: 70% 70% 56% 56% / 82% 82% 42% 42%;
|
||||
background: linear-gradient(180deg, #a0f6ff 0%, #47d2ef 54%, #1fb7e4 100%);
|
||||
box-shadow: inset 16px 10px 30px rgba(255, 255, 255, 0.28);
|
||||
}
|
||||
|
||||
.mascot-eye {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
width: 10px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: #3275ef;
|
||||
}
|
||||
|
||||
.mascot-eye.left { left: 48px; }
|
||||
.mascot-eye.right { right: 48px; }
|
||||
|
||||
.mascot-smile {
|
||||
position: absolute;
|
||||
left: 56px;
|
||||
top: 116px;
|
||||
width: 34px;
|
||||
height: 22px;
|
||||
border: 7px solid #3275ef;
|
||||
border-top: 0;
|
||||
border-radius: 0 0 28px 28px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.avatar-add {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
bottom: 4px;
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(145deg, #ffb13b 0%, #ff8c1f 100%);
|
||||
border: 5px solid rgba(255, 255, 255, 0.9);
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 7px 16px rgba(188, 100, 19, 0.24);
|
||||
}
|
||||
|
||||
.plus-line {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 6px;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.plus-line.vertical {
|
||||
transform: translate(-50%, -50%) rotate(90deg);
|
||||
}
|
||||
|
||||
.form-card {
|
||||
width: 100%;
|
||||
min-height: 94px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.72);
|
||||
border-radius: 50px;
|
||||
background: rgba(255, 255, 255, 0.68);
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #28204e;
|
||||
}
|
||||
|
||||
.nickname-card {
|
||||
margin-top: 58px;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
flex: none;
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
height: 90px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 36px;
|
||||
color: #28204e;
|
||||
font-size: 31px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nickname-input input {
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
line-height: 90px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nickname-count {
|
||||
flex: none;
|
||||
color: #746c9c;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.gender-row {
|
||||
width: 100%;
|
||||
margin: 34px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 76px;
|
||||
}
|
||||
|
||||
.gender-option {
|
||||
height: 94px;
|
||||
flex: 1;
|
||||
border: 3px solid rgba(255, 255, 255, 0.7);
|
||||
border-radius: 50px;
|
||||
background: rgba(255, 255, 255, 0.66);
|
||||
color: #332463;
|
||||
font-size: 31px;
|
||||
font-weight: 700;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.gender-option.active {
|
||||
color: #fff;
|
||||
background: linear-gradient(90deg, #65c8f9 0%, #51b8ef 100%);
|
||||
}
|
||||
|
||||
.gender-option + .gender-option {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.gender-symbol {
|
||||
font-size: 52px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.picker-card {
|
||||
margin-bottom: 34px;
|
||||
padding: 0 28px 0 31px;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.field-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
margin-left: 36px;
|
||||
font-size: 29px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.field-value.location {
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.field-value.placeholder {
|
||||
color: #8e88aa;
|
||||
}
|
||||
|
||||
.chevron {
|
||||
flex: none;
|
||||
margin-left: 14px;
|
||||
font-size: 56px;
|
||||
font-weight: 300;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
width: 456px;
|
||||
height: 96px;
|
||||
margin-top: 36px;
|
||||
border-radius: 52px;
|
||||
color: #fff;
|
||||
background: #ff9828;
|
||||
font-size: 34px;
|
||||
font-weight: 800;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10px 20px rgba(222, 128, 32, 0.14);
|
||||
}
|
||||
|
||||
.save-button[disabled] {
|
||||
opacity: 0.68;
|
||||
}
|
||||
|
||||
.edit-note {
|
||||
margin-top: 28px;
|
||||
color: #666275;
|
||||
font-size: 27px;
|
||||
}
|
||||
|
||||
.edit-note text {
|
||||
color: #f13d57;
|
||||
}
|
||||
|
||||
.avatar-mask {
|
||||
position: fixed;
|
||||
z-index: 30;
|
||||
inset: 0;
|
||||
background: rgba(21, 17, 39, 0.62);
|
||||
}
|
||||
|
||||
.avatar-sheet {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
border-radius: 28px 28px 0 0;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.avatar-action {
|
||||
width: 100%;
|
||||
height: 118px;
|
||||
border-bottom: 1px solid #eeeef2;
|
||||
border-radius: 0;
|
||||
color: #202020;
|
||||
background: #fff;
|
||||
font-size: 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.edit-avatar text {
|
||||
position: absolute;
|
||||
right: -34px;
|
||||
bottom: 34px;
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.name-pill {
|
||||
width: 420px;
|
||||
height: 76px;
|
||||
margin-top: 56px;
|
||||
border-radius: 40px;
|
||||
background: #fff7de;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30px;
|
||||
gap: 20px;
|
||||
box-sizing: border-box;
|
||||
color: #8f640d;
|
||||
font-size: 38px;
|
||||
}
|
||||
|
||||
.name-pill input {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #8f640d;
|
||||
}
|
||||
|
||||
.gender-row {
|
||||
margin-top: 58px;
|
||||
display: flex;
|
||||
gap: 86px;
|
||||
}
|
||||
|
||||
.gender {
|
||||
color: #8f640d;
|
||||
font-size: 34px;
|
||||
display: flex;
|
||||
.wechat-avatar-action {
|
||||
height: 154px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
margin-top: 58px;
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
color: #8f640d;
|
||||
.wechat-avatar-preview {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.date-row,
|
||||
.region-row {
|
||||
margin-top: 34px;
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
.sheet-gap {
|
||||
height: 16px;
|
||||
background: #f5f5f7;
|
||||
}
|
||||
|
||||
.date-part {
|
||||
width: 150px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
.cancel-action {
|
||||
height: 126px;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.hour {
|
||||
width: 360px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32px;
|
||||
}
|
||||
@media screen and (max-height: 700px) {
|
||||
.edit-content {
|
||||
padding-top: calc(140px + env(safe-area-inset-top));
|
||||
}
|
||||
|
||||
.region-row .input-pill {
|
||||
width: 176px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
padding: 0 12px;
|
||||
}
|
||||
.avatar-button {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.start-button {
|
||||
width: 500px;
|
||||
margin-top: 110px;
|
||||
}
|
||||
.water-mascot {
|
||||
transform: scale(0.82);
|
||||
}
|
||||
|
||||
.edit-note {
|
||||
margin-top: 28px;
|
||||
color: #4b2d1a;
|
||||
font-size: 28px;
|
||||
.nickname-card {
|
||||
margin-top: 38px;
|
||||
}
|
||||
|
||||
.gender-row,
|
||||
.picker-card {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.gender-row {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.save-button {
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user