1007 lines
20 KiB
Plaintext
1007 lines
20 KiB
Plaintext
/*
|
|
* 全局样式 - Ins风 · 00后情侣主题
|
|
* 配色: 暖粉 #B74768 · 柔紫 #B388FF · 雾蓝 #E8EAF6
|
|
*/
|
|
|
|
/* ========== CSS Variables ========== */
|
|
page {
|
|
--pink: #B74768;
|
|
--pink-light: #FFA4B4;
|
|
--pink-pastel: #FFF0F3;
|
|
--purple: #B388FF;
|
|
--purple-light: #E8D5FF;
|
|
--blue: #82B1FF;
|
|
--blue-light: #E3F2FD;
|
|
--yellow: #FFD54F;
|
|
--yellow-pastel: #FFF9C4;
|
|
--mint: #A7FFEB;
|
|
--coral: #B74768;
|
|
--cream: #FFFBF5;
|
|
--white: #FFFFFF;
|
|
--text: #262626;
|
|
--text-light: #8E8E8E;
|
|
--text-muted: #C7C7C7;
|
|
--shadow: rgba(0, 0, 0, 0.04);
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
|
|
font-size: 28rpx;
|
|
color: var(--text);
|
|
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
|
background-attachment: fixed;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ========== 按钮样式 ========== */
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8rpx;
|
|
width: 100%;
|
|
padding: 32rpx 48rpx;
|
|
border-radius: 50rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
border: none;
|
|
box-sizing: border-box;
|
|
line-height: 1.4;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.btn::after { border: none; }
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--pink), var(--coral));
|
|
color: white;
|
|
box-shadow: 0 16rpx 48rpx rgba(255, 107, 157, 0.4);
|
|
}
|
|
|
|
.btn-primary:active {
|
|
transform: translateY(-4rpx);
|
|
box-shadow: 0 24rpx 64rpx rgba(255, 107, 157, 0.5);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: white;
|
|
color: var(--pink);
|
|
border: 4rpx solid var(--pink);
|
|
}
|
|
|
|
.btn-secondary:active { background: var(--pink-pastel); }
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
color: var(--pink);
|
|
border: 4rpx solid var(--pink);
|
|
}
|
|
|
|
.btn-outline:active { background: var(--pink-pastel); }
|
|
|
|
.btn-small {
|
|
padding: 16rpx 32rpx;
|
|
font-size: 26rpx;
|
|
border-radius: 40rpx;
|
|
background: linear-gradient(135deg, var(--pink), var(--coral));
|
|
color: white;
|
|
border: none;
|
|
font-weight: 500;
|
|
width: auto;
|
|
font-family: inherit;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.btn-camera {
|
|
position: fixed;
|
|
bottom: 240rpx;
|
|
right: 40rpx;
|
|
z-index: 1001;
|
|
width: 84rpx;
|
|
height: 84rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #FF9FB4 0%, #FF6B93 100%);
|
|
border: 2rpx solid rgba(255,255,255,0.9);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 6rpx 20rpx rgba(255,107,147,0.32);
|
|
transition: box-shadow 0.18s ease;
|
|
animation: camera-bounce 2s ease-in-out infinite;
|
|
}
|
|
.btn-camera:active {
|
|
animation: none;
|
|
transform: scale(0.9);
|
|
box-shadow: 0 3rpx 10rpx rgba(255,107,147,0.28);
|
|
}
|
|
@keyframes camera-bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-14rpx); }
|
|
}
|
|
.camera-icon {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
/* ========== 输入框 ========== */
|
|
.input-group { margin-bottom: 32rpx; }
|
|
|
|
.input-group label {
|
|
display: block;
|
|
font-size: 26rpx;
|
|
font-weight: 500;
|
|
color: var(--text-light);
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.input {
|
|
width: 100%;
|
|
padding: 36rpx 40rpx;
|
|
min-height: 100rpx;
|
|
background: white;
|
|
border: 4rpx solid var(--pink-light);
|
|
border-radius: 40rpx;
|
|
font-size: 30rpx;
|
|
line-height: 1.6;
|
|
font-family: inherit;
|
|
color: #000000;
|
|
font-weight: 500;
|
|
transition: all 0.3s;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.input:focus {
|
|
outline: none;
|
|
border-color: var(--pink);
|
|
box-shadow: 0 0 0 8rpx rgba(255, 107, 157, 0.1);
|
|
}
|
|
|
|
/* ========== 容器 ========== */
|
|
.container {
|
|
max-width: 100%;
|
|
padding: 16rpx 20rpx;
|
|
padding-bottom: 300rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.content {
|
|
padding: 16rpx 20rpx;
|
|
padding-bottom: 160rpx;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.card {
|
|
background: white;
|
|
border-radius: 16rpx;
|
|
padding: 28rpx;
|
|
box-shadow: 0 1rpx 4rpx var(--shadow);
|
|
}
|
|
.stat-item { text-align: center; }
|
|
.stat-item text { font-size: 36rpx; font-weight: 700; color: var(--text); display: block; }
|
|
.stat-item small { font-size: 20rpx; color: var(--text-muted); margin-top: 4rpx; display: block; }
|
|
|
|
.home-header { text-align: center; }
|
|
.couple-avatars {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16rpx;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
.heart-icon { width: 64rpx; height: 64rpx; }
|
|
.avatar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #B74768, #B388FF);
|
|
color: white;
|
|
font-weight: 700;
|
|
box-shadow: 0 4rpx 16rpx var(--shadow);
|
|
}
|
|
.days-count {
|
|
font-size: 96rpx;
|
|
font-weight: 800;
|
|
background: linear-gradient(135deg, #B74768, #B388FF);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
line-height: 1.1;
|
|
}
|
|
.stats-bar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 28rpx;
|
|
padding: 20rpx 0;
|
|
border-top: 1rpx solid rgba(0,0,0,0.06);
|
|
}
|
|
|
|
/* ========== 功能卡片网格 ========== */
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 32rpx;
|
|
padding: 0 8rpx;
|
|
}
|
|
|
|
.feature-card {
|
|
background: white;
|
|
border-radius: 40rpx;
|
|
padding: 32rpx 24rpx;
|
|
text-align: center;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
|
|
border: 4rpx solid transparent;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.feature-card:active {
|
|
transform: scale(0.95);
|
|
border-color: var(--pink-light);
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.feature-icon-text {
|
|
display: block;
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
line-height: 52rpx;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
margin: 0 auto 16rpx;
|
|
}
|
|
|
|
.feature-card .feature-title {
|
|
font-size: 26rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 6rpx;
|
|
display: block;
|
|
}
|
|
|
|
.feature-card .feature-desc {
|
|
font-size: 22rpx;
|
|
color: var(--text-light);
|
|
display: block;
|
|
}
|
|
|
|
/* ========== 首页头部 ========== */
|
|
.home-header {
|
|
text-align: center;
|
|
padding: 92rpx 40rpx;
|
|
background: linear-gradient(135deg, rgba(255,107,157,0.1), rgba(179,136,255,0.1));
|
|
border-radius: 64rpx;
|
|
margin-bottom: 48rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.home-header::before {
|
|
content: '✨';
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: 40rpx;
|
|
font-size: 40rpx;
|
|
}
|
|
|
|
.couple-avatars {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 32rpx;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.heart-icon {
|
|
font-size: 64rpx;
|
|
animation: heartbeat 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes heartbeat {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.2); }
|
|
}
|
|
|
|
.days-count {
|
|
font-size: 128rpx;
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--pink), var(--coral));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
line-height: 1;
|
|
}
|
|
|
|
.days-label {
|
|
font-size: 32rpx;
|
|
color: var(--text-light);
|
|
margin-top: 16rpx;
|
|
display: block;
|
|
}
|
|
.days-name {
|
|
font-weight: 700;
|
|
background: linear-gradient(135deg, var(--pink), var(--coral));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
.start-date {
|
|
font-size: 28rpx;
|
|
color: var(--text-light);
|
|
margin-top: 12rpx;
|
|
display: block;
|
|
}
|
|
|
|
/* 统计条 */
|
|
.stats-bar {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-top: 32rpx;
|
|
padding: 24rpx 16rpx;
|
|
background: rgba(255,255,255,0.8);
|
|
border-radius: 32rpx;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.stat-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
}
|
|
|
|
.stat-item text {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: var(--pink);
|
|
}
|
|
|
|
.stat-item small {
|
|
font-size: 20rpx;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* 生日倒计时卡片 */
|
|
.countdown-card {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
padding: 28rpx 32rpx;
|
|
background: linear-gradient(135deg, #B74768, #943C58);
|
|
border-radius: 32rpx;
|
|
color: white;
|
|
box-shadow: 0 8rpx 32rpx rgba(255, 71, 87, 0.3);
|
|
margin-top: 24rpx;
|
|
}
|
|
|
|
.countdown-icon { font-size: 64rpx; flex-shrink: 0; }
|
|
|
|
.countdown-info { flex: 1; }
|
|
|
|
.countdown-title { font-size: 26rpx; opacity: 0.9; margin-bottom: 4rpx; }
|
|
|
|
.countdown-time { font-size: 36rpx; font-weight: 700; }
|
|
|
|
/* 设置日期提示 */
|
|
.set-date-banner {
|
|
background: linear-gradient(135deg, var(--yellow-pastel), var(--pink-pastel));
|
|
border-radius: 40rpx;
|
|
padding: 40rpx;
|
|
margin-bottom: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 32rpx;
|
|
}
|
|
|
|
.set-date-banner .subtitle {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
display: block;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.set-date-banner text {
|
|
font-size: 26rpx;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* ========== 头像 ========== */
|
|
.avatar {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--pink), var(--purple));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 48rpx;
|
|
font-weight: 700;
|
|
color: white;
|
|
box-shadow: 0 16rpx 48rpx rgba(255, 107, 157, 0.3);
|
|
border: 6rpx solid white;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.avatar-small {
|
|
width: 96rpx;
|
|
height: 96rpx;
|
|
font-size: 36rpx;
|
|
border: 4rpx solid white;
|
|
}
|
|
|
|
.avatar-large {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
font-size: 64rpx;
|
|
border: 6rpx solid white;
|
|
}
|
|
|
|
/* ========== 布局 ========== */
|
|
.page-bg {
|
|
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
|
height: 100vh;
|
|
overflow-y: scroll;
|
|
position: relative;
|
|
padding-top: 196rpx;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* 浮动装饰 */
|
|
.floating-deco {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 0;
|
|
font-size: 40rpx;
|
|
opacity: 0.3;
|
|
animation: float 6s ease-in-out infinite;
|
|
}
|
|
|
|
.floating-deco:nth-child(1) { top: 10%; left: 5%; animation-delay: 0s; }
|
|
.floating-deco:nth-child(2) { top: 20%; right: 8%; animation-delay: 1s; }
|
|
.floating-deco:nth-child(3) { bottom: 30%; left: 3%; animation-delay: 2s; }
|
|
.floating-deco:nth-child(4) { bottom: 15%; right: 5%; animation-delay: 3s; }
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0) rotate(0deg); }
|
|
50% { transform: translateY(-40rpx) rotate(10deg); }
|
|
}
|
|
|
|
/* ========== 时间线 ========== */
|
|
.timeline-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
|
|
.timeline-header .title {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.timeline-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32rpx;
|
|
}
|
|
|
|
.timeline-item {
|
|
background: white;
|
|
border-radius: 48rpx;
|
|
padding: 40rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.timeline-date {
|
|
font-size: 24rpx;
|
|
color: var(--pink);
|
|
font-weight: 600;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.timeline-content {
|
|
font-size: 30rpx;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.timeline-mood {
|
|
display: inline-block;
|
|
margin-top: 16rpx;
|
|
padding: 8rpx 24rpx;
|
|
background: var(--yellow-pastel);
|
|
border-radius: 40rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
/* ========== 相册 ========== */
|
|
.photo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.photo-item {
|
|
aspect-ratio: 1;
|
|
border-radius: 40rpx;
|
|
background: linear-gradient(135deg, var(--pink-pastel), var(--purple-light));
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 96rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.photo-item image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
/* ========== 日记 ========== */
|
|
.diary-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 32rpx;
|
|
}
|
|
|
|
.diary-item {
|
|
background: white;
|
|
border-radius: 48rpx;
|
|
padding: 40rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.diary-date {
|
|
font-size: 24rpx;
|
|
color: var(--purple);
|
|
font-weight: 600;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.diary-content {
|
|
font-size: 30rpx;
|
|
line-height: 1.6;
|
|
color: var(--text);
|
|
}
|
|
|
|
/* ========== 打卡 ========== */
|
|
.checkin-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.checkin-item {
|
|
background: white;
|
|
border-radius: 40rpx;
|
|
padding: 32rpx 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.checkin-checkbox {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
border: 6rpx solid var(--pink-light);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 0.3s;
|
|
flex-shrink: 0;
|
|
color: white;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.checkin-item.checked .checkin-checkbox {
|
|
background: var(--pink);
|
|
border-color: var(--pink);
|
|
}
|
|
|
|
.checkin-text {
|
|
flex: 1;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.checkin-item.checked .checkin-text {
|
|
text-decoration: line-through;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 80rpx 0;
|
|
color: var(--text-light);
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.empty-state text:first-child {
|
|
font-size: 80rpx;
|
|
}
|
|
|
|
/* ========== 个人中心 ========== */
|
|
.profile-card {
|
|
background: white;
|
|
border-radius: 48rpx;
|
|
padding: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 28rpx;
|
|
box-shadow: 0 8rpx 40rpx rgba(255, 107, 157, 0.1);
|
|
margin-bottom: 32rpx;
|
|
}
|
|
|
|
.profile-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.profile-info .nickname {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: var(--text);
|
|
margin-bottom: 8rpx;
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.profile-info .status {
|
|
font-size: 26rpx;
|
|
color: var(--text-light);
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.profile-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
margin-top: 12rpx;
|
|
font-size: 24rpx;
|
|
color: var(--text-light);
|
|
}
|
|
|
|
.profile-meta .meta-row {
|
|
display: flex;
|
|
gap: 32rpx;
|
|
}
|
|
|
|
.profile-edit-btn {
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border-radius: 50%;
|
|
background: var(--pink-pastel);
|
|
font-size: 28rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ========== 设置卡片 ========== */
|
|
.setting-section {
|
|
margin-bottom: 80rpx;
|
|
}
|
|
|
|
.setting-title {
|
|
display: block;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: var(--text-light);
|
|
margin-bottom: 40rpx;
|
|
padding-left: 12rpx;
|
|
}
|
|
|
|
.setting-card {
|
|
background: white;
|
|
border-radius: 40rpx;
|
|
padding: 36rpx 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 32rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
.setting-icon {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
border-radius: 28rpx;
|
|
background: var(--pink-pastel);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 40rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.setting-info { flex: 1; }
|
|
|
|
.setting-name { font-size: 30rpx; font-weight: 600; margin-bottom: 4rpx; }
|
|
|
|
.setting-desc { font-size: 26rpx; color: var(--text-light); }
|
|
|
|
.setting-arrow { font-size: 48rpx; color: var(--pink-light); font-weight: 300; }
|
|
|
|
/* ========== Tab 导航 ========== */
|
|
.tab-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: rgba(255,255,255,0.96);
|
|
backdrop-filter: blur(20rpx);
|
|
display: flex;
|
|
justify-content: space-around;
|
|
padding: 16rpx 0;
|
|
padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
|
|
padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
|
|
border-top: 1rpx solid rgba(0,0,0,0.06);
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
z-index: 999;
|
|
}
|
|
|
|
.tab-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4rpx;
|
|
padding: 12rpx 24rpx;
|
|
border-radius: 32rpx;
|
|
color: var(--text-light);
|
|
font-size: 22rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.tab-icon { width: 44rpx; height: 44rpx; transition: all 0.2s; }
|
|
.tab-item.active { color: var(--text); }
|
|
.tab-item.active .tab-icon { opacity: 1; filter: none; }
|
|
.tab-item .tab-icon { opacity: 0.4; }
|
|
|
|
/* ========== 模态框 ========== */
|
|
.modal-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 40rpx;
|
|
z-index: 1000;
|
|
}
|
|
|
|
.modal {
|
|
background: white;
|
|
border-radius: 32rpx;
|
|
padding: 56rpx 40rpx 48rpx;
|
|
width: 100%;
|
|
max-width: 560rpx;
|
|
max-height: 80vh;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
}
|
|
|
|
.modal-heart {
|
|
font-size: 64rpx;
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
animation: heartbeat 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
.modal-close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
background: linear-gradient(135deg, var(--pink-pastel), rgba(255,107,157,0.2));
|
|
border: none;
|
|
border-radius: 0 24rpx 0 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.modal-close image {
|
|
width: 26rpx;
|
|
height: 26rpx;
|
|
}
|
|
|
|
.modal .title {
|
|
text-align: center;
|
|
font-size: 34rpx;
|
|
margin-bottom: 12rpx;
|
|
display: block;
|
|
background: linear-gradient(135deg, var(--pink), var(--purple));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.modal-subtitle {
|
|
text-align: center;
|
|
color: var(--text-light);
|
|
font-size: 26rpx;
|
|
margin-bottom: 32rpx;
|
|
display: block;
|
|
}
|
|
|
|
/* ========== 动画 ========== */
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(20rpx); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: scale(1); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from { transform: translateY(100rpx); opacity: 0; }
|
|
to { transform: translateY(0); opacity: 1; }
|
|
}
|
|
|
|
/* ========== 全页编辑 ========== */
|
|
.edit-page {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
|
background-attachment: fixed;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.edit-page::after {
|
|
content: '';
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0;
|
|
height: 200rpx;
|
|
background: linear-gradient(180deg, rgba(220,180,180,0.35) 0%, rgba(240,220,220,0.15) 40%, transparent 100%);
|
|
pointer-events: none;
|
|
z-index: 10000;
|
|
}
|
|
.edit-nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 120rpx 32rpx 16rpx;
|
|
}
|
|
.edit-cancel {
|
|
font-size: 30rpx;
|
|
color: #888;
|
|
padding: 8rpx 16rpx;
|
|
}
|
|
.edit-title {
|
|
font-size: 34rpx;
|
|
font-weight: 700;
|
|
color: #4A4A4A;
|
|
}
|
|
.edit-body {
|
|
flex: 1;
|
|
padding: 0 48rpx;
|
|
}
|
|
.edit-avatar-wrap {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
.edit-avatar-img {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
border: 5rpx solid white;
|
|
box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.08);
|
|
}
|
|
.edit-avatar-placeholder {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 50%;
|
|
border: 5rpx solid white;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 44rpx;
|
|
}
|
|
.edit-avatar-hint {
|
|
font-size: 22rpx;
|
|
color: #bbb;
|
|
margin-top: 10rpx;
|
|
}
|
|
.edit-id {
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
color: #B388FF;
|
|
font-weight: 500;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.edit-footer {
|
|
padding: 20rpx 48rpx;
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
/* ========== 固定顶部导航卡片（独立卡片，不会被内容覆盖）========== */
|
|
.top-nav-card {
|
|
position: fixed;
|
|
top: 100rpx;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
height: 96rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
|
}
|
|
.top-nav-card .nav-back {
|
|
position: absolute;
|
|
left: 24rpx;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.7);
|
|
border: 2rpx solid rgba(255,190,210,0.4);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.top-nav-card .nav-back-icon {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
}
|
|
.top-nav-card .nav-title {
|
|
font-size: 34rpx;
|
|
font-weight: 600;
|
|
color: #C96A85;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
/* ========== 返回按钮（兼容旧引用，逐步迁移） ========== */
|
|
.back-btn {
|
|
position: fixed;
|
|
top: 120rpx;
|
|
left: 24rpx;
|
|
z-index: 999;
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.9);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.08);
|
|
}
|
|
.back-btn .back-icon {
|
|
width: 28rpx;
|
|
height: 28rpx;
|
|
}
|
|
|
|
/* ========== 其他 ========== */
|
|
.hidden { display: none !important; }
|