更新最新代码
This commit is contained in:
CodeBuddy
@@ -0,0 +1,24 @@
|
||||
/* 所有页面和独立组件共用按钮配色，与首页天数一致。 */
|
||||
button:not(.modal-close),
|
||||
.btn-primary,
|
||||
.btn-camera,
|
||||
.access-panel-action {
|
||||
background:#F47FA5!important;
|
||||
color:#FFFFFF!important;
|
||||
border-color:#F47FA5!important;
|
||||
box-shadow:none!important;
|
||||
}
|
||||
/* 次要操作保留描边形式，统一使用同一粉色。 */
|
||||
.btn-outline,
|
||||
.btn-secondary,
|
||||
button.smoke-secondary,
|
||||
button.photo-editor-cancel {
|
||||
background:#FFF7FA!important;
|
||||
color:#F47FA5!important;
|
||||
border:1rpx solid #F47FA5!important;
|
||||
}
|
||||
button[disabled] {
|
||||
background:#F0E2E8!important;
|
||||
color:#A39386!important;
|
||||
border-color:#F0E2E8!important;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,20 @@
|
||||
/* 二级内容页共用的纸色、排版和信息间距。 */
|
||||
.c-body { padding:32rpx 44rpx calc(44rpx + env(safe-area-inset-bottom)); box-sizing:border-box; }
|
||||
.c-heading { margin-bottom:32rpx; align-items:center; }
|
||||
.c-heading .j-eyebrow { font-size:19rpx; letter-spacing:2rpx; }
|
||||
.c-heading .j-page-title { font-size:34rpx; margin:12rpx 0 0; line-height:1.4; }
|
||||
.c-heading .j-button-small { min-height:72rpx; padding:14rpx 20rpx; font-size:24rpx; border-radius:16rpx; margin:0; }
|
||||
.c-small-title { font-size:27rpx; font-weight:600; color:#352E2A; }
|
||||
.checkin-card,.detail-card { background:#FFFDF8; border:1rpx solid #E9DDD0; border-radius:12rpx 32rpx 12rpx 12rpx; padding:28rpx; box-shadow:none; }
|
||||
.card-row { display:flex; align-items:center; gap:12rpx; margin-top:14rpx; }
|
||||
.card-row.card-theme { margin-top:0; margin-bottom:22rpx; }
|
||||
.card-icon { width:34rpx; height:34rpx; font-size:30rpx; flex-shrink:0; }
|
||||
.card-title { min-width:0; flex:1; font-size:30rpx; font-weight:600; color:#352E2A; line-height:1.45; overflow-wrap:break-word; }
|
||||
.card-label { color:#85776D; font-size:23rpx; width:112rpx; flex-shrink:0; }
|
||||
.card-value,.chip-name,.creator-name { color:#65594F; font-size:23rpx; line-height:1.5; }
|
||||
.card-users,.user-chip,.card-creator-info { display:flex; align-items:center; gap:8rpx; min-width:0; }
|
||||
.card-users { flex-wrap:wrap; flex:1; }.chip-name,.creator-name { overflow-wrap:break-word; }
|
||||
.chip-avatar,.creator-avatar,.chip-avatar-fallback,.creator-avatar-fallback { width:32rpx; height:32rpx; border-radius:50%; flex-shrink:0; border:0; }
|
||||
.chip-avatar-fallback,.creator-avatar-fallback { display:flex; align-items:center; justify-content:center; background:#F4E2E3; color:#943C58; font-size:20rpx; }
|
||||
.chip-sep { color:#A39386; font-size:22rpx; }
|
||||
@media (max-width:350px) { .c-body { padding-left:32rpx; padding-right:32rpx; }.c-heading .j-page-title { font-size:31rpx; } }
|
||||
@@ -0,0 +1,364 @@
|
||||
/* Shared theme and viewport layout. Each selector has one definition. */
|
||||
page {
|
||||
--primary: #B74768;
|
||||
--primary-color: #B74768;
|
||||
--secondary-color: #D5A6AE;
|
||||
--pink: #B74768;
|
||||
--purple: #8C719D;
|
||||
--text: #352E2A;
|
||||
--text-primary: #352E2A;
|
||||
--text-secondary: #85776D;
|
||||
--bg: #FFF7FA;
|
||||
--radius: 28rpx;
|
||||
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%)!important;
|
||||
background-attachment: fixed;
|
||||
color: #352E2A;
|
||||
}
|
||||
|
||||
.app-shell {
|
||||
--primary-color: #B74768;
|
||||
--secondary-color: #D5A6AE;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.page-bg {
|
||||
padding-top: var(--nav-height,64px)!important;
|
||||
box-sizing: border-box!important;
|
||||
background: transparent!important;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.page-bg>.container,.page-bg>.content {
|
||||
padding: 28rpx 28rpx calc(var(--content-bottom-space,140rpx) + env(safe-area-inset-bottom))!important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.floating-deco {
|
||||
display: none!important;
|
||||
}
|
||||
|
||||
.card,.hero-card,.stats-grid,.profile-card,.setting-card,.feature-card,.period-status-card,.quick-actions,.album-card,.diary-card {
|
||||
background: #FFFDF8!important;
|
||||
border: 1rpx solid #E9DDD0!important;
|
||||
border-radius: 28rpx!important;
|
||||
box-shadow: 0 8rpx 28rpx rgba(62,35,47,.035)!important;
|
||||
}
|
||||
|
||||
.btn-primary,.btn-camera,.access-panel-action {
|
||||
background: #B74768!important;
|
||||
color: #FFFDF8!important;
|
||||
box-shadow: none!important;
|
||||
border-radius: 20rpx!important;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
border-color: #D9BBB0!important;
|
||||
color: #B74768!important;
|
||||
background: #FFFDF8!important;
|
||||
}
|
||||
|
||||
button:after {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.input {
|
||||
background: #FAF5EE!important;
|
||||
border: 1rpx solid #E9DDD0!important;
|
||||
border-radius: 18rpx!important;
|
||||
color: #352E2A;
|
||||
}
|
||||
|
||||
.nav-title,.nickname,.setting-name,.feature-title {
|
||||
color: #352E2A!important;
|
||||
}
|
||||
|
||||
.setting-desc,.feature-desc {
|
||||
color: #85776D!important;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 12rpx 0 20rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #352E2A;
|
||||
}
|
||||
|
||||
.section-caption {
|
||||
display: block;
|
||||
font-size: 25rpx;
|
||||
line-height: 1.6;
|
||||
color: #85776D;
|
||||
margin: 0 0 24rpx;
|
||||
}
|
||||
|
||||
.section-link {
|
||||
font-size: 24rpx;
|
||||
font-weight: 400;
|
||||
color: #B74768;
|
||||
}
|
||||
|
||||
.profile-card {
|
||||
padding: 32rpx!important;
|
||||
}
|
||||
|
||||
.profile-card .avatar {
|
||||
border: 0!important;
|
||||
background: #F4E2E3!important;
|
||||
color: #B74768!important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
.setting-card {
|
||||
padding: 28rpx!important;
|
||||
}
|
||||
|
||||
.setting-icon {
|
||||
border-radius: 20rpx!important;
|
||||
background: #F3EBE1!important;
|
||||
}
|
||||
|
||||
.access-panel {
|
||||
margin: 0 28rpx!important;
|
||||
position: relative;
|
||||
top: calc(var(--nav-height,64px) + 14px);
|
||||
padding: 32rpx!important;
|
||||
border: 1rpx solid #E9DDD0;
|
||||
box-shadow: none!important;
|
||||
border-radius: 28rpx!important;
|
||||
}
|
||||
|
||||
.access-panel-title {
|
||||
font-size: 32rpx!important;
|
||||
color: #352E2A!important;
|
||||
}
|
||||
|
||||
.access-panel-desc {
|
||||
color: #85776D!important;
|
||||
}
|
||||
|
||||
.edit-root {
|
||||
padding-top: var(--nav-height,64px)!important;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%)!important;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.edit-body {
|
||||
padding-top: 24rpx!important;
|
||||
}
|
||||
|
||||
.modal,.modal-box,.modal-content {
|
||||
border-radius: 28rpx!important;
|
||||
background: #FFFDF8!important;
|
||||
box-shadow: none!important;
|
||||
}
|
||||
|
||||
.modal-overlay,.modal-mask {
|
||||
background: rgba(40,29,35,.38)!important;
|
||||
}
|
||||
|
||||
.album-name,.diary-title {
|
||||
color: #352E2A!important;
|
||||
}
|
||||
|
||||
.album-desc,.diary-meta {
|
||||
color: #85776D!important;
|
||||
}
|
||||
|
||||
.btn-camera {
|
||||
top: calc(var(--nav-height,64px) + 14px)!important;
|
||||
right: 28rpx!important;
|
||||
width: 76rpx!important;
|
||||
height: 76rpx!important;
|
||||
z-index: 50!important;
|
||||
}
|
||||
|
||||
.bg-overlay {
|
||||
background: rgba(252,249,247,.55)!important;
|
||||
}
|
||||
.period-loading {
|
||||
padding-top: var(--nav-height,64px);
|
||||
}
|
||||
|
||||
.visibility-card {
|
||||
background: #FFFDF8;
|
||||
border: 1rpx solid #E9DDD0;
|
||||
border-radius: 28rpx;
|
||||
padding: 24rpx 28rpx;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.visibility-card .permission-row {
|
||||
padding: 0!important;
|
||||
}
|
||||
|
||||
.period-status-card,.calendar-card {
|
||||
margin-bottom: 24rpx!important;
|
||||
}
|
||||
|
||||
.status-num {
|
||||
color: #B74768!important;
|
||||
font-size: 42rpx!important;
|
||||
}
|
||||
|
||||
.status-label {
|
||||
color: #85776D!important;
|
||||
}
|
||||
|
||||
.settings-modal {
|
||||
position: absolute!important;
|
||||
top: calc(var(--nav-height,64px) + 12px)!important;
|
||||
bottom: calc(16px + env(safe-area-inset-bottom))!important;
|
||||
left: 16px!important;
|
||||
right: 16px!important;
|
||||
width: auto!important;
|
||||
max-width: none!important;
|
||||
max-height: none!important;
|
||||
height: auto!important;
|
||||
padding: 32rpx!important;
|
||||
box-sizing: border-box!important;
|
||||
}
|
||||
|
||||
.settings-modal .modal-title {
|
||||
margin-top: 0!important;
|
||||
text-align: left!important;
|
||||
font-size: 34rpx!important;
|
||||
}
|
||||
|
||||
.settings-modal .modal-subtitle {
|
||||
text-align: left!important;
|
||||
font-size: 24rpx!important;
|
||||
margin-bottom: 24rpx!important;
|
||||
}
|
||||
|
||||
.settings-modal .modal-actions {
|
||||
padding-top: 24rpx!important;
|
||||
padding-bottom: 16rpx!important;
|
||||
}
|
||||
|
||||
.prediction-box {
|
||||
background: #FAF5EE!important;
|
||||
border-color: #E9DDD0!important;
|
||||
}
|
||||
|
||||
.form-picker {
|
||||
background: #F4E2E3!important;
|
||||
color: #B74768!important;
|
||||
}
|
||||
|
||||
.stepper-btn {
|
||||
background: #F4E2E3!important;
|
||||
color: #B74768!important;
|
||||
}
|
||||
|
||||
.edit-nav {
|
||||
top: var(--status-height,20px)!important;
|
||||
height: 44px!important;
|
||||
background: transparent!important;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0 24rpx!important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edit-footer {
|
||||
background: #FFFDF8!important;
|
||||
padding-bottom: calc(24rpx + env(safe-area-inset-bottom))!important;
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%)!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.invite-strip {
|
||||
padding: 24rpx 28rpx;
|
||||
border-radius: 24rpx;
|
||||
background: linear-gradient(110deg,#FBE5ED,#FFF1F5)!important;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1rpx solid #F3CFDB;
|
||||
}
|
||||
|
||||
.upcoming-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24rpx;
|
||||
background: #FFF0E1!important;
|
||||
border-radius: 28rpx;
|
||||
padding: 28rpx;
|
||||
}
|
||||
|
||||
|
||||
.feature-card:nth-child(1) {
|
||||
background: #FFF3F7!important;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(2) {
|
||||
background: #FFF8EC!important;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(3) {
|
||||
background: #F1F9F5!important;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(4) {
|
||||
background: #F3F6FF!important;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(5) {
|
||||
background: #F7F3FD!important;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(6) {
|
||||
background: #FFF0F5!important;
|
||||
}
|
||||
|
||||
.feature-card:nth-child(7) {
|
||||
background: #FFF6EE!important;
|
||||
}
|
||||
|
||||
.profile-card:first-child {
|
||||
background: linear-gradient(120deg,#FFF6F9,#FCEBF1)!important;
|
||||
border-color: #F3DCE4!important;
|
||||
}
|
||||
|
||||
.feed-text-card {
|
||||
background: linear-gradient(145deg,#FFFDF8,#FFF6F9)!important;
|
||||
align-items: flex-start!important;
|
||||
justify-content: flex-start!important;
|
||||
padding: 28rpx 24rpx!important;
|
||||
min-height: 240rpx!important;
|
||||
}
|
||||
|
||||
.feed-text-title {
|
||||
color: #9B4660!important;
|
||||
font-size: 30rpx!important;
|
||||
text-align: left!important;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.modal-overlay { box-sizing:border-box; padding:calc(var(--nav-height,64px) + 20rpx) 28rpx calc(28rpx + env(safe-area-inset-bottom)); }.modal { box-sizing:border-box; max-height:calc(100vh - var(--nav-height,64px) - 60rpx - env(safe-area-inset-bottom)); }.edit-nav { top:var(--status-height,20px); height:calc(var(--nav-height,64px) - var(--status-height,20px)); align-items:center; }.input-group label { color:#85776D; }.input { box-sizing:border-box; }
|
||||
|
||||
/* 二级页面没有底部 tab，仅保留内容间距与设备安全区。 */
|
||||
.app-shell--secondary { --content-bottom-space:40rpx; --journal-bottom-space:40rpx; }
|
||||
@@ -0,0 +1,123 @@
|
||||
/* Journal components. Product data and permissions remain in page controllers. */
|
||||
.j-body { padding: 40rpx 44rpx calc(var(--journal-bottom-space,170rpx) + env(safe-area-inset-bottom)); position: relative; box-sizing: border-box; }
|
||||
.j-eyebrow { display: block; font-size: 21rpx; letter-spacing: 3rpx; color: #85776D; }
|
||||
.j-page-title { display: block; font-size: 40rpx; line-height: 1.45; font-weight: 600; color: #352E2A; margin: 12rpx 0 40rpx; }
|
||||
.j-row { display: flex; justify-content: space-between; align-items: center; gap: 20rpx; }
|
||||
.j-row > view:first-child { flex: 1; min-width: 0; }
|
||||
.j-small-title { display: block; font-size: 27rpx; font-weight: 500; color: #352E2A; line-height: 1.6; }
|
||||
.j-caption { display: block; font-size: 23rpx; color: #85776D; line-height: 1.7; margin-top: 6rpx; }
|
||||
.j-link { font-size: 24rpx; color: #B74768; padding: 18rpx 0; min-height: 44rpx; line-height: 1.5; flex-shrink: 0; }
|
||||
.j-center { text-align: center; }
|
||||
.j-button { background: #B74768; color: #FFFFFF; border: 0; border-radius: 26rpx; min-height: 88rpx; padding: 20rpx 32rpx; font-size: 27rpx; line-height: 1.6; margin: 0; box-sizing: border-box; }
|
||||
.j-button-small { width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; max-width: 190rpx; font-size: 24rpx; min-height: 80rpx; padding: 18rpx 24rpx; margin-bottom: 24rpx; }
|
||||
.j-button::after { border: 0; }
|
||||
.j-cover { position: relative; padding: 48rpx 44rpx 36rpx; margin: 12rpx 0 48rpx; border-radius: 12rpx 60rpx 12rpx 60rpx; background: #FFFDF8; border: 1rpx solid #E9DDD0; box-shadow: 0 16rpx 50rpx rgba(114,82,64,.07); }
|
||||
.j-tape { position: absolute; top: -16rpx; left: calc(50% - 52rpx); width: 104rpx; height: 36rpx; background: rgba(233,213,183,.75); transform: rotate(-5deg); }
|
||||
.j-cover-heart { width: 32rpx; height: 32rpx; transform: rotate(12deg); }
|
||||
.j-days { display: flex; align-items: baseline; gap: 24rpx; margin-top: 24rpx; }
|
||||
.j-days-number { font-family: Georgia, 'Times New Roman', serif; font-size: 146rpx; line-height: 1.1; color: #B74768; letter-spacing: -7rpx; }
|
||||
.j-days-unit { font-size: 27rpx; color: #85776D; }
|
||||
.j-cover-date { display: block; color: #85776D; font-size: 22rpx; line-height: 1.6; margin-top: 16rpx; }
|
||||
.j-couple-line { display: flex; align-items: center; gap: 16rpx; border-top: 1rpx dashed #E9DDD0; padding-top: 30rpx; margin-top: 40rpx; }
|
||||
.j-avatar { width: 66rpx; height: 66rpx; border-radius: 50%; background: #F4E2E3; color: #B74768; border: 5rpx solid #FFFDF8; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 26rpx; overflow: hidden; box-sizing: border-box; }
|
||||
.j-avatar image { width: 100%; height: 100%; }
|
||||
.j-avatar-partner { background: #E4EBE3; color: #526B57; margin-left: -32rpx; }
|
||||
.j-couple-names { flex: 1; min-width: 0; font-size: 24rpx; line-height: 1.6; overflow-wrap: break-word; }
|
||||
.j-couple-names .j-caption { font-size: 21rpx; }
|
||||
.j-cover-meta { display: flex; flex-wrap: wrap; gap: 14rpx 22rpx; font-size: 21rpx; color: #85776D; margin-top: 20rpx; line-height: 1.6; }
|
||||
.j-invite { display: flex; justify-content: space-between; align-items: center; gap: 20rpx; border: 1rpx dashed #E9DDD0; border-radius: 28rpx; padding: 28rpx; margin-bottom: 38rpx; }
|
||||
.j-invite > view { min-width: 0; flex: 1; }.j-invite .j-small-title { font-size: 25rpx; }.j-invite .j-caption { font-size: 22rpx; }
|
||||
.j-outline-label { color: #B74768; background: #FFFDF8; border: 1rpx solid #E9DDD0; border-radius: 22rpx; padding: 22rpx 28rpx; flex-shrink: 0; font-size: 24rpx; }
|
||||
.j-memory { display: flex; align-items: center; gap: 28rpx; margin: 0 0 44rpx; padding: 8rpx 0; }
|
||||
.j-stamp { flex-shrink: 0; width: 88rpx; border: 1rpx solid #E9DDD0; background: #FFFDF8; border-radius: 12rpx; overflow: hidden; text-align: center; transform: rotate(-5deg); }
|
||||
.j-stamp text:first-child { display: block; background: #F4E2E3; color: #B74768; font-size: 20rpx; padding: 8rpx 0; }
|
||||
.j-stamp text:last-child { display: block; font-family: Georgia, serif; font-size: 46rpx; padding: 8rpx 0; }
|
||||
.j-memory-info { flex: 1; min-width: 0; }.j-memory-info .j-caption { font-size: 22rpx; }
|
||||
.j-countdown { flex-shrink: 0; display: flex; align-items: baseline; gap: 8rpx; color: #B74768; }.j-countdown text:first-child { font-family: Georgia, serif; font-size: 58rpx; }.j-countdown text:last-child { font-size: 22rpx; }
|
||||
.j-shortcuts { display: flex; justify-content: space-between; border-top: 1rpx solid #E9DDD0; border-bottom: 1rpx solid #E9DDD0; padding: 22rpx 0; margin: 4rpx 0 44rpx; }
|
||||
.j-shortcuts > view { display: flex; align-items: center; gap: 10rpx; min-height: 88rpx; font-size: 23rpx; }.j-shortcuts image { width: 32rpx; height: 32rpx; }
|
||||
.j-section { margin: 0 0 42rpx; }.j-section-head { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-bottom: 20rpx; font-size: 31rpx; font-weight: 600; }.j-section-head .j-link { font-weight: 400; }
|
||||
.j-story { background: #FFFDF8; border: 1rpx solid #E9DDD0; border-radius: 32rpx; padding: 30rpx; box-shadow: 0 14rpx 36rpx rgba(114,82,64,.05); margin: 10rpx 0 34rpx; }
|
||||
.j-story-date { display: block; font-family: Georgia, serif; font-size: 24rpx; color: #85776D; letter-spacing: 2rpx; margin-bottom: 16rpx; }
|
||||
.j-story-title { display: block; font-size: 32rpx; font-weight: 600; color: #352E2A; line-height: 1.6; overflow-wrap: break-word; }
|
||||
.j-story-summary { display: block; font-size: 25rpx; color: #85776D; line-height: 1.9; margin: 12rpx 0 20rpx; overflow-wrap: break-word; }
|
||||
.j-story-photo { position: relative; margin-top: 20rpx; }.j-story-photo image { display: block; width: 100%; height: 330rpx; border-radius: 20rpx; background: #EEE5DA; }
|
||||
.j-photo-count { position: absolute; right: 14rpx; bottom: 14rpx; color: #FFFFFF; background: rgba(53,46,42,.55); font-size: 21rpx; padding: 6rpx 14rpx; border-radius: 8rpx; }
|
||||
.j-story-footer { display: flex; align-items: center; gap: 8rpx; font-size: 22rpx; color: #85776D; padding-top: 22rpx; line-height: 1.6; flex-wrap: wrap; }.j-story-footer image { width: 25rpx; height: 25rpx; }
|
||||
.j-background { position: fixed; inset: 0; }.j-background > image { width: 100%; height: 100%; }.j-background-wash { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(253,228,236,.88) 0%, rgba(255,240,245,.88) 48%, rgba(255,247,250,.88) 100%); }
|
||||
.j-photo-strip { display: flex; gap: 20rpx; }.j-photo-print { min-width: 0; flex: 1; border-radius: 24rpx; padding: 12rpx 12rpx 20rpx; border: 1rpx solid #E9DDD0; background: #FFFDF8; box-shadow: 0 8rpx 20rpx rgba(114,82,64,.05); }.j-photo-print:nth-child(2) { transform: rotate(3deg); }.j-photo-print image { width: 100%; height: 160rpx; display: block; border-radius: 16rpx; }.j-photo-print text { display: block; font-size: 22rpx; color: #85776D; margin-top: 14rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
.j-filters { display: flex; gap: 38rpx; border-bottom: 1rpx solid #E9DDD0; margin: -10rpx 0 42rpx; }.j-filter { color: #85776D; padding: 22rpx 4rpx; min-height: 44rpx; font-size: 27rpx; }.j-filter.is-active { color: #B74768; border-bottom: 3rpx solid #B74768; font-weight: 600; }
|
||||
/* Compact photo books: two columns, real covers, restrained empty states. */
|
||||
.j-album-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32rpx 24rpx; }
|
||||
.j-album-print { position: relative; min-width: 0; background: #FFFDF8; padding: 12rpx 12rpx 22rpx; border-radius: 28rpx; box-shadow: 0 4rpx 16rpx rgba(114,82,64,.04); }
|
||||
.j-album-print > image { width: 100%; height: 218rpx; display: block; border-radius: 20rpx; background: #F3EBE1; margin-bottom: 18rpx; }
|
||||
.j-album-placeholder { width: 100%; height: 218rpx; display: flex; flex-direction: column; gap: 16rpx; align-items: center; justify-content: center; border-radius: 20rpx; background: #FAF5EE; margin-bottom: 18rpx; }
|
||||
.j-album-placeholder image { width: 42rpx; height: 42rpx; opacity: .7; }
|
||||
.j-album-placeholder text { color: #85776D; font-size: 22rpx; }
|
||||
.j-album-print .j-story-title { padding: 0 8rpx; font-size: 27rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
.j-album-print .j-caption { padding: 0 8rpx; font-size: 22rpx; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||
.j-album-print .j-row { gap: 4rpx; align-items: flex-start; }
|
||||
.j-album-menu { width: 62rpx; min-height: 62rpx; padding: 0; text-align: center; font-size: 27rpx; }
|
||||
|
||||
.j-memory-list { padding: 20rpx 0 28rpx; border-bottom: 1rpx solid #E9DDD0; margin-bottom: 20rpx; }
|
||||
.j-tools { padding-top: 34rpx; border-top: 1rpx solid #E9DDD0; margin-top: 42rpx; }.j-tool-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16rpx; margin-top: 24rpx; }.j-tool-grid > view { display: flex; flex-direction: column; align-items: center; gap: 16rpx; background: #FFFDF8; border: 1rpx solid #E9DDD0; border-radius: 24rpx; padding: 24rpx 4rpx; font-size: 23rpx; color: #85776D; }.j-tool-grid image { width: 36rpx; height: 36rpx; }
|
||||
.j-sheet-mask { position: fixed; inset: 0; z-index: 1100; background: rgba(53,46,42,.35); display: flex; align-items: flex-end; }.j-sheet { width: 100%; background: #FFFDF8; border-radius: 48rpx 48rpx 0 0; padding: 18rpx 44rpx calc(48rpx + env(safe-area-inset-bottom)); box-sizing: border-box; }.j-sheet-grip { height: 7rpx; width: 64rpx; border-radius: 7rpx; background: #E9DDD0; margin: 0 auto 30rpx; }.j-publish-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22rpx; }.j-publish-grid > view { display: flex; flex-direction: column; align-items: flex-start; gap: 20rpx; background: #FAF5EE; border: 1rpx solid #E9DDD0; border-radius: 28rpx; padding: 34rpx; font-size: 27rpx; }.j-publish-grid image { width: 42rpx; height: 42rpx; }
|
||||
.j-period-summary { margin-bottom: 38rpx; }.j-period-title { display: block; color: #B74768; font-size: 47rpx; line-height: 1.5; margin: 14rpx 0; font-weight: 600; }.j-period-description { color: #85776D; font-size: 25rpx; line-height: 1.7; }
|
||||
.j-permission { display: flex; align-items: center; justify-content: space-between; gap: 24rpx; padding: 32rpx 0; border-top: 1rpx solid #E9DDD0; margin-top: 42rpx; }.j-permission > view { flex: 1; min-width: 0; }.j-permission .j-caption { font-size: 22rpx; }
|
||||
.j-denied { padding: calc(var(--nav-height,64px) + 50rpx) 44rpx calc(var(--journal-bottom-space,170rpx) + env(safe-area-inset-bottom)); }.j-denied-card { border: 1rpx dashed #E9DDD0; border-radius: 12rpx 50rpx 12rpx 50rpx; background: #FFFDF8; padding: 46rpx 30rpx; text-align: center; }.j-denied-card .j-page-title { font-size: 34rpx; margin-bottom: 20rpx; }.j-denied-card .j-button { margin-top: 30rpx; }
|
||||
.j-profile-summary { display: flex; align-items: center; gap: 30rpx; padding: 42rpx 0; margin-bottom: 32rpx; border-bottom: 1rpx solid #E9DDD0; }.j-profile-summary .j-avatar { width: 116rpx; height: 116rpx; font-size: 42rpx; border-width: 6rpx; }.j-profile-info { flex: 1; min-width: 0; }.j-profile-name { display: block; font-size: 40rpx; font-weight: 600; overflow-wrap: break-word; }.j-relation-card { background: #FFFDF8; border: 1rpx solid #E9DDD0; border-radius: 12rpx 40rpx 12rpx 40rpx; padding: 30rpx; margin: 20rpx 0 24rpx; }.j-relation-card .j-avatar { width: 84rpx; height: 84rpx; font-size: 30rpx; }.j-profile-setting { display: flex; align-items: center; gap: 22rpx; border-bottom: 1rpx solid #E9DDD0; padding: 30rpx 0; }.j-profile-setting > image { width: 36rpx; height: 36rpx; }.j-profile-setting > view { flex: 1; }.j-profile-setting .j-link { font-size: 32rpx; }
|
||||
@media (max-width: 350px) { .j-body { padding-left: 32rpx; padding-right: 32rpx; }.j-page-title { font-size: 36rpx; }.j-shortcuts > view { gap: 6rpx; font-size: 22rpx; }.j-cover { padding-left: 32rpx; padding-right: 32rpx; }.j-tool-grid { gap: 10rpx; } }
|
||||
|
||||
/* 主页面页眉与胶囊对齐，内容独立滚动。 */
|
||||
.j-fixed-header { position:fixed; top:0; left:0; right:0; z-index:900; padding:var(--status-height,20px) 0 0; margin:0; text-align:left; box-sizing:border-box; background:#FDE4EC; }
|
||||
.j-fixed-heading { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; box-sizing:border-box; padding-left:44rpx; }
|
||||
.j-fixed-heading .j-eyebrow { font-size:20rpx; line-height:1.2; letter-spacing:2rpx; white-space:nowrap; }
|
||||
.j-fixed-heading .j-page-title { font-size:34rpx; line-height:1.35; margin:4rpx 0 0; white-space:nowrap; }
|
||||
scroll-view.j-main-scroll { position:fixed; top:var(--nav-height,64px); left:0; right:0; height:calc(100vh - var(--nav-height,64px)); padding-top:0!important; }
|
||||
.j-main-scroll > .j-body { padding-top:48rpx; }
|
||||
@media (max-width:350px) { .j-fixed-heading { padding-left:32rpx; } }
|
||||
|
||||
/* 页面与分区标题统一使用手账笔迹，列表正文、字段和操作保持原有字体。 */
|
||||
.j-page-title,
|
||||
.j-section-head > text,
|
||||
.records-action-row > .j-small-title {
|
||||
font-family:'Kaiti SC','STKaiti','KaiTi',cursive;
|
||||
font-weight:400;
|
||||
font-style:normal;
|
||||
letter-spacing:1rpx;
|
||||
color:#64424D;
|
||||
}
|
||||
.j-section-head > text,
|
||||
.records-action-row > .j-small-title {
|
||||
display:inline-block;
|
||||
}
|
||||
|
||||
/* 分区右侧入口与手写标题配套，较小字号和粉色区分操作层级。 */
|
||||
.j-section-head > .j-link {
|
||||
display:flex;
|
||||
align-items:center;
|
||||
font-family:'Kaiti SC','STKaiti','KaiTi',cursive;
|
||||
font-weight:400;
|
||||
font-style:normal;
|
||||
font-size:26rpx;
|
||||
letter-spacing:1rpx;
|
||||
white-space:nowrap;
|
||||
}
|
||||
|
||||
/* 记录、我的：入口文字与页眉统一，正文和输入内容仍使用常规字体。 */
|
||||
.j-handwritten-page .j-link,
|
||||
.j-handwritten-page .j-small-title,
|
||||
.j-handwritten-page .j-filter,
|
||||
.j-handwritten-page .j-button,
|
||||
.j-handwritten-page .j-outline-label,
|
||||
.j-handwritten-page .j-tool-grid > view > text,
|
||||
.j-handwritten-page .j-publish-grid > view > text {
|
||||
font-family:'Kaiti SC','STKaiti','KaiTi',cursive;
|
||||
font-weight:400;
|
||||
font-style:normal;
|
||||
letter-spacing:1rpx;
|
||||
}
|
||||
.j-handwritten-page .j-link { font-size:26rpx; }
|
||||
.j-handwritten-page .j-profile-setting .j-link { font-size:32rpx; }
|
||||
|
||||
.j-pagination { padding:28rpx 0 40rpx; text-align:center; color:#85776D; font-size:23rpx; }
|
||||
@@ -0,0 +1,15 @@
|
||||
/* 小程序统一字体：端正手写体，覆盖页面及组件中的旧字体。 */
|
||||
page,
|
||||
view,
|
||||
text,
|
||||
scroll-view,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
label,
|
||||
picker,
|
||||
.handwritten-placeholder {
|
||||
font-family:'Kaiti SC','STKaiti','KaiTi',cursive!important;
|
||||
font-style:normal!important;
|
||||
font-weight:400!important;
|
||||
}
|
||||
Reference in New Issue
Block a user