332 lines
8.5 KiB
Plaintext
332 lines
8.5 KiB
Plaintext
/* pages/album/album.wxss - 日记式分组相册 */
|
|
@import '../../styles/common.wxss';
|
|
page { background: linear-gradient(180deg, #F4E2E3 0%, #FAF5EE 55%, #FAF5EE 100%); height: 100vh; overflow: hidden; }
|
|
scroll-view.page-bg { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; }
|
|
|
|
.upload-root {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
z-index: 1000;
|
|
background: #FAFAFA;
|
|
display: flex; flex-direction: column;
|
|
}
|
|
.upload-nav {
|
|
display: flex; align-items: center;
|
|
padding: 96rpx 32rpx 16rpx;
|
|
}
|
|
.upload-back {
|
|
width: 56rpx; height: 56rpx;
|
|
display: flex; align-items: center; justify-content: center;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.85);
|
|
backdrop-filter: blur(10rpx);
|
|
}
|
|
.upload-back .back-icon { width: 28rpx; height: 28rpx; }
|
|
.upload-body {
|
|
flex: 1; padding: 0 16rpx; overflow-y: auto;
|
|
}
|
|
|
|
/* 三宫格照片 - 精确三等分 */
|
|
.photo-grid {
|
|
display: flex; flex-wrap: wrap;
|
|
gap: 10rpx;
|
|
padding: 8rpx 0 20rpx;
|
|
}
|
|
.photo-grid-item {
|
|
width: calc((100% - 20rpx) / 3);
|
|
aspect-ratio: 1;
|
|
border-radius: 14rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
background: #f0f0f0;
|
|
box-sizing: border-box;
|
|
}
|
|
.photo-grid-item.selected {
|
|
border: 4rpx solid #B74768;
|
|
box-shadow: 0 0 0 2rpx rgba(255,107,157,0.3);
|
|
}
|
|
.photo-grid-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
.photo-has-form {
|
|
position: absolute;
|
|
bottom: 6rpx;
|
|
left: 6rpx;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255,107,157,0.85);
|
|
color: white;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
.photo-del-btn {
|
|
position: absolute;
|
|
top: 4rpx;
|
|
right: 4rpx;
|
|
width: 38rpx;
|
|
height: 38rpx;
|
|
border-radius: 50%;
|
|
background: rgba(0,0,0,0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2;
|
|
}
|
|
.photo-del-x {
|
|
color: white;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* 添加更多 */
|
|
.photo-grid-add {
|
|
background: #fff;
|
|
border: 2rpx dashed #ddd;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2rpx;
|
|
}
|
|
.add-plus { font-size: 44rpx; color: #ccc; font-weight: 300; }
|
|
.add-label { font-size: 20rpx; color: #bbb; }
|
|
|
|
/* 表单卡片 */
|
|
.upload-form-card {
|
|
background: white;
|
|
border-radius: 20rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
|
|
}
|
|
.form-card-head {
|
|
display: flex; align-items: center; gap: 16rpx;
|
|
margin-bottom: 20rpx;
|
|
padding-bottom: 16rpx;
|
|
border-bottom: 1rpx solid #F4E2E3;
|
|
}
|
|
.form-preview {
|
|
width: 80rpx; height: 80rpx;
|
|
border-radius: 12rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.form-card-desc {
|
|
font-size: 24rpx; color: #999;
|
|
}
|
|
.upload-form-card .input-group { margin-bottom: 16rpx; }
|
|
.upload-form-card .input-group:last-child { margin-bottom: 0; }
|
|
.upload-form-card .input-group label { font-size: 26rpx; font-weight: 500; color: #555; display: block; margin-bottom: 8rpx; }
|
|
.upload-form-card .input { padding: 18rpx 22rpx; font-size: 28rpx; background: #FFF5F8; border-radius: 14rpx; border: 1rpx solid #F4E2E3; }
|
|
|
|
/* 空状态 */
|
|
.upload-empty {
|
|
text-align: center; padding: 200rpx 40rpx;
|
|
}
|
|
.upload-empty .empty-icon { font-size: 80rpx; display: block; margin-bottom: 16rpx; }
|
|
.upload-empty .empty-desc { font-size: 28rpx; color: #bbb; display: block; }
|
|
|
|
/* 底部上传按钮 */
|
|
.upload-footer {
|
|
padding: 12rpx 24rpx;
|
|
padding-bottom: calc(12rpx + env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.container { padding-top: 16rpx; padding-bottom: 300rpx; }
|
|
|
|
/* ===== 留念卡片（复用日记样式） ===== */
|
|
.moments-list { display: flex; flex-direction: column; gap: 24rpx; }
|
|
.moments-item {
|
|
display: flex; gap: 24rpx; background: white; border-radius: 24rpx;
|
|
padding: 32rpx; box-shadow: 0 4rpx 20rpx rgba(0,0,0,0.04);
|
|
}
|
|
.moments-avatar { flex-shrink: 0; }
|
|
.moments-avatar-img { width: 72rpx; height: 72rpx; border-radius: 50%; }
|
|
.avatar-circle {
|
|
width: 72rpx; height: 72rpx; border-radius: 50%;
|
|
background: linear-gradient(135deg, #B74768, #B388FF);
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 28rpx; font-weight: 700; color: white;
|
|
}
|
|
.moments-body { flex: 1; min-width: 0; }
|
|
.moments-name-row {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 24rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
.moments-name { font-size: 28rpx; font-weight: 600; color: #B74768; }
|
|
.moments-count { font-size: 22rpx; color: #999; }
|
|
.moments-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12rpx; }
|
|
.moments-time { font-size: 22rpx; color: #999; font-weight: 500; flex-shrink: 0; margin-left: auto; }
|
|
|
|
/* ===== 朋友圈9宫格 ===== */
|
|
.moments-images {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin-top: 40rpx;
|
|
}
|
|
.album-img-wrap {
|
|
width: 33.333%;
|
|
height: 0;
|
|
padding-bottom: 33.333%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: #f0f0f0;
|
|
box-sizing: border-box;
|
|
}
|
|
.album-img-wrap:not(:nth-child(3n)) { padding-right: 4rpx; }
|
|
.album-img-wrap:nth-child(n+4):nth-child(-n+6) { padding-top: 4rpx; }
|
|
.album-img-wrap:nth-child(n+7) { padding-top: 4rpx; }
|
|
.album-img {
|
|
position: absolute;
|
|
top: 0; left: 0; width: 100%; height: 100%;
|
|
}
|
|
|
|
/* ===== 全屏明信片预览（导航栏下方整屏） ===== */
|
|
.preview-overlay {
|
|
position: fixed; top: var(--nav-height,64px); left: 0; right: 0;
|
|
height: calc(100vh - var(--nav-height,64px));
|
|
background: rgba(0,0,0,0.93); z-index: 9999;
|
|
}
|
|
.preview-swiper { width: 100%; height: 100%; }
|
|
.preview-postcard {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 640rpx;
|
|
background: #fffdf7;
|
|
background-image:
|
|
radial-gradient(circle at 12% 88%, rgba(255,107,157,0.05) 0, rgba(255,107,157,0.05) 60rpx, transparent 61rpx),
|
|
radial-gradient(circle at 90% 8%, rgba(255,186,210,0.08) 0, rgba(255,186,210,0.08) 46rpx, transparent 47rpx);
|
|
border: 1rpx solid #f5e3d0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20rpx 24rpx 18rpx;
|
|
box-sizing: border-box;
|
|
overflow-y: auto;
|
|
box-shadow: inset 0 0 0 6rpx rgba(255,255,255,0.6), 0 20rpx 60rpx rgba(0,0,0,0.35);
|
|
}
|
|
/* 左上角爱心印章（叠加在照片左上角） */
|
|
.postcard-seal {
|
|
position: absolute;
|
|
top: 20rpx; left: 20rpx;
|
|
width: 64rpx; height: 64rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,0.8);
|
|
border: 3rpx double rgba(255,107,157,0.6);
|
|
color: rgba(255,107,157,0.8);
|
|
font-size: 28rpx;
|
|
display: flex; align-items: center; justify-content: center;
|
|
transform: rotate(-12deg);
|
|
z-index: 3;
|
|
}
|
|
/* 右上角爱心邮票（叠加在照片右上角） */
|
|
.postcard-stamp {
|
|
position: absolute;
|
|
top: 14rpx; right: 14rpx;
|
|
width: 84rpx; height: 98rpx;
|
|
background: #fff;
|
|
border: 3rpx dashed #B74768;
|
|
border-radius: 8rpx;
|
|
display: flex; flex-direction: column; align-items: center; justify-content: center;
|
|
z-index: 3;
|
|
transform: rotate(4deg);
|
|
box-shadow: 0 4rpx 14rpx rgba(255,107,157,0.25);
|
|
}
|
|
.stamp-heart {
|
|
font-size: 36rpx;
|
|
line-height: 1.1;
|
|
color: #B74768;
|
|
}
|
|
.stamp-text {
|
|
font-size: 15rpx;
|
|
letter-spacing: 2rpx;
|
|
color: #B74768;
|
|
font-weight: 700;
|
|
margin-top: 2rpx;
|
|
}
|
|
/* 照片白边相框 */
|
|
.postcard-photo-frame {
|
|
position: relative;
|
|
flex: 1;
|
|
min-height: 220rpx;
|
|
padding: 10rpx;
|
|
background: #fff;
|
|
border-radius: 10rpx;
|
|
box-shadow: 0 10rpx 30rpx rgba(180,120,90,0.18);
|
|
box-sizing: border-box;
|
|
overflow: hidden;
|
|
}
|
|
.postcard-photo {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 6rpx;
|
|
background: #f2e8d5;
|
|
display: block;
|
|
}
|
|
/* 底部书写区 */
|
|
.postcard-body {
|
|
flex-shrink: 0;
|
|
margin-top: 14rpx;
|
|
padding: 12rpx 4rpx 6rpx;
|
|
border-top: 1rpx dashed #e8c9a8;
|
|
}
|
|
.postcard-rule {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10rpx;
|
|
padding: 6rpx 0;
|
|
line-height: 1.45;
|
|
font-size: 24rpx;
|
|
color: #6b4a2f;
|
|
}
|
|
.rule-icon {
|
|
font-size: 22rpx;
|
|
flex-shrink: 0;
|
|
line-height: 1.45;
|
|
}
|
|
.rule-text {
|
|
flex: 1;
|
|
word-break: break-all;
|
|
line-height: 1.45;
|
|
}
|
|
.postcard-empty {
|
|
color: #c9b294;
|
|
font-size: 24rpx;
|
|
}
|
|
.postcard-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 8rpx;
|
|
padding-top: 8rpx;
|
|
border-top: 1rpx dashed rgba(232,201,168,0.6);
|
|
}
|
|
.footer-slogan {
|
|
font-size: 20rpx;
|
|
color: #B74768;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
.footer-hint {
|
|
font-size: 18rpx;
|
|
color: #c9a98a;
|
|
}
|
|
.preview-counter {
|
|
position: absolute; bottom: 24rpx; left: 50%; transform: translateX(-50%);
|
|
background: rgba(0,0,0,0.55); color: white; padding: 8rpx 28rpx;
|
|
border-radius: 40rpx; font-size: 26rpx;
|
|
z-index: 20;
|
|
}
|
|
|
|
@import '../../styles/design.wxss';
|
|
|
|
@import '../../styles/journal.wxss';
|