/* 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; }