189 lines
4.7 KiB
Plaintext
189 lines
4.7 KiB
Plaintext
/* pages/timeline-detail/timeline-detail.wxss */
|
|
@import '../../styles/common.wxss';
|
|
page { background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%); height: 100vh; }
|
|
|
|
.container { padding: 380rpx 24rpx 180rpx; position: relative; z-index: 1; }
|
|
.page-bg-has-bg .container { padding-top: 400rpx; }
|
|
scroll-view.page-bg { height: 100vh; overflow-y: scroll; -webkit-overflow-scrolling: touch; padding-top: 0; }
|
|
.page-bg-has-bg { background: transparent !important; }
|
|
.page-bg-has-bg::after { display: none !important; }
|
|
|
|
/* ========== 背景图片（参考首页实现） ========== */
|
|
.detail-bg-custom {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
}
|
|
.detail-bg-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 0;
|
|
background: rgba(0,0,0,0.45);
|
|
pointer-events: none;
|
|
}
|
|
.has-bg .detail-hero-num,
|
|
.has-bg .detail-hero-sign,
|
|
.has-bg .detail-hero-unit,
|
|
.has-bg .detail-hero-bar,
|
|
.has-bg .detail-title,
|
|
.has-bg .detail-info-line text,
|
|
.has-bg .detail-meta-tag,
|
|
.has-bg .detail-meta-date,
|
|
.has-bg .detail-repeat text {
|
|
color: rgba(255,255,255,0.9) !important;
|
|
}
|
|
.has-bg .detail-hero-bar {
|
|
background: rgba(255,255,255,0.35) !important;
|
|
}
|
|
.has-bg .detail-repeat {
|
|
background: rgba(255,255,255,0.15);
|
|
}
|
|
.tab-bar-transparent {
|
|
display: none !important;
|
|
}
|
|
|
|
.top-nav-card-transparent {
|
|
background: transparent !important;
|
|
border-bottom: none !important;
|
|
}
|
|
.nav-back-hidden {
|
|
display: none !important;
|
|
}
|
|
.top-nav-card-transparent .nav-back-icon {
|
|
filter: brightness(0) invert(1) !important;
|
|
}
|
|
|
|
/* 无背景图时，top-nav-card 背景与 page 背景融合 */
|
|
.top-nav-card:not(.top-nav-card-transparent) {
|
|
background: linear-gradient(180deg, #FDE4EC 0%, #FFF0F5 48%, #FFF7FA 100%);
|
|
}
|
|
|
|
|
|
|
|
/* ========== 主区域（点击编辑） ========== */
|
|
.container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
min-height: 60vh;
|
|
}
|
|
|
|
/* ========== 大大的天数 ========== */
|
|
.detail-hero {
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
}
|
|
.detail-hero-num-wrap {
|
|
display: inline-flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
}
|
|
.detail-hero-num {
|
|
font-size: 120rpx;
|
|
font-weight: 900;
|
|
color: #B74768;
|
|
line-height: 1;
|
|
display: inline;
|
|
}
|
|
.detail-hero-sign {
|
|
font-size: 40rpx;
|
|
font-weight: 700;
|
|
color: #B74768;
|
|
vertical-align: super;
|
|
line-height: 1;
|
|
margin-left: 4rpx;
|
|
}
|
|
.detail-hero-unit {
|
|
font-size: 40rpx;
|
|
font-weight: 600;
|
|
color: #B74768;
|
|
margin-left: 8rpx;
|
|
display: inline;
|
|
}
|
|
.detail-hero-bar {
|
|
width: 400rpx;
|
|
height: 4rpx;
|
|
background: #B74768;
|
|
opacity: 0.25;
|
|
border-radius: 4rpx;
|
|
margin: 40rpx auto 0;
|
|
}
|
|
.page-bg-has-bg .detail-hero-bar {
|
|
background: rgba(255,255,255,0.5) !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* ========== 事件标题 ========== */
|
|
.detail-title-wrap {
|
|
text-align: center;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.detail-title {
|
|
font-size: 36rpx;
|
|
font-weight: 700;
|
|
color: #333;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ========== 信息行 ========== */
|
|
.detail-info-line {
|
|
text-align: center;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
.detail-info-line text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* ========== 重复标签 ========== */
|
|
.detail-repeat {
|
|
display: inline-block;
|
|
padding: 8rpx 24rpx;
|
|
background: #FFF0F3;
|
|
border-radius: 30rpx;
|
|
font-size: 22rpx;
|
|
color: #B74768;
|
|
margin-bottom: 24rpx;
|
|
}
|
|
|
|
|
|
|
|
/* ========== 空状态 ========== */
|
|
.empty-state { text-align: center; padding: 80rpx; color: #999; font-size: 26rpx; }
|
|
|
|
@import '../../styles/design.wxss';
|
|
|
|
@import '../../styles/journal.wxss';
|
|
|
|
@import '../../styles/button-theme.wxss';
|
|
|
|
@import '../../styles/typography.wxss';
|
|
|
|
/* 有背景图时采用全屏照片布局，顶部不再显示色块与标题。 */
|
|
.detail-immersive { background:transparent!important; }
|
|
.detail-photo-nav { position:fixed; top:var(--status-height,20px); left:16rpx; width:80rpx; display:flex; align-items:center; justify-content:center; z-index:900; }
|
|
.detail-photo-nav image { width:36rpx; height:36rpx; }
|
|
.detail-immersive .page-bg { padding-top:0!important; }
|
|
.detail-immersive .page-bg > .container {
|
|
padding:25vh 48rpx calc(56rpx + env(safe-area-inset-bottom))!important;
|
|
min-height:100vh;
|
|
box-sizing:border-box;
|
|
}
|
|
.detail-immersive .detail-bg-overlay { background:rgba(0,0,0,.42); }
|
|
.detail-immersive .detail-hero { margin-bottom:36rpx; }
|
|
.detail-immersive .detail-hero-bar { margin-top:40rpx; }
|
|
.detail-immersive .detail-title-wrap { margin-bottom:24rpx; }
|
|
.detail-immersive .detail-info-line { margin-bottom:12rpx; }
|
|
.detail-immersive .detail-title,
|
|
.detail-immersive .detail-info-line,
|
|
.detail-immersive .detail-meta-line { max-width:100%; overflow-wrap:break-word; text-shadow:0 2rpx 8rpx rgba(0,0,0,.2); }
|