147 lines
2.5 KiB
Plaintext
147 lines
2.5 KiB
Plaintext
/* ========================================
|
|
首页样式
|
|
======================================== */
|
|
|
|
.home-page {
|
|
min-height: 100vh;
|
|
background: #f7f8fa;
|
|
}
|
|
|
|
/* ========== 自定义导航栏 (毛玻璃) ========== */
|
|
.custom-navbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 999;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
}
|
|
|
|
.navbar-content {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
|
|
.navbar-search {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
/* ========== 滚动区域 ========== */
|
|
.page-scroll {
|
|
height: 100vh;
|
|
}
|
|
|
|
/* ========== 轮播图区域 ========== */
|
|
.swiper-section {
|
|
padding: 20px 24px 0;
|
|
|
|
.banner-swiper {
|
|
height: 320px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.swiper-card {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
|
|
.banner-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.banner-title {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding: 24px 20px;
|
|
font-size: 30px;
|
|
font-weight: 500;
|
|
color: #fff;
|
|
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.5) 100%);
|
|
border-radius: 0 0 12px 12px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* ========== 导航组 ========== */
|
|
.nav-section {
|
|
margin: 24px 24px;
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 24px 12px 12px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* ========== 标签区域 ========== */
|
|
.tabs-section {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
margin: 0 24px 20px;
|
|
|
|
.van-tabs__wrap {
|
|
border-radius: 16px 16px 0 0;
|
|
}
|
|
}
|
|
|
|
/* ========== 文章列表 ========== */
|
|
.article-list {
|
|
padding: 0 24px;
|
|
|
|
.article-item {
|
|
background: #fff;
|
|
border-radius: 16px;
|
|
padding: 24px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
|
|
transition: transform 0.2s;
|
|
|
|
&:active {
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.empty-tip {
|
|
text-align: center;
|
|
padding: 80px 0;
|
|
font-size: 28px;
|
|
color: #969799;
|
|
}
|
|
}
|
|
|
|
/* 底部安全距离 */
|
|
.bottom-safe {
|
|
height: 40px;
|
|
}
|
|
|
|
/* ========== 文章卡片通用样式 ========== */
|
|
.article-card {
|
|
.card-meta {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 24px;
|
|
color: #969799;
|
|
|
|
.meta-source {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.meta-time {
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.meta-read {
|
|
flex: 1;
|
|
text-align: right;
|
|
}
|
|
}
|
|
}
|