首页

2026-07-01 21:05:42 +08:00
parent ee7ffcc1cc
commit 0ee14678b6
15 changed files with 831 additions and 30 deletions
@@ -0,0 +1,146 @@
+/* ========================================
+   首页样式
+   ======================================== */
+
+.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;
+    }
+  }
+}