|
|
| 第1行： |
第1行： |
| #siteSub { | | /* Hero 区域 */ |
| display: block; | | .hero { |
| | width: 100%; |
| | padding: 60px 20px; |
| | background: linear-gradient(135deg, #9ac6ff, #c7e8ff); |
| | border-radius: 20px; |
| | margin-bottom: 30px; |
| | text-align: center; |
| } | | } |
| | | .hero h1 { |
| /* 顶部 LOGO */
| | font-size: 36px; |
| .homepage-banner { | | margin: 0; |
| text-align: center;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .homepage-banner h1 {
| |
| font-size: 2.5em;
| |
| font-weight: bold;
| |
| margin: 10px 0 0;
| |
| } | | } |
| | | .hero p { |
| /* 轮播推荐梗 */
| | font-size: 18px; |
| .homepage-carousel .gallery {
| | margin-top: 10px; |
| display: flex;
| |
| overflow-x: auto;
| |
| scroll-snap-type: x mandatory;
| |
| gap: 15px;
| |
| } | | } |
|
| |
|
| .homepage-carousel .gallery-item { | | /* 卡片布局 */ |
| flex: 0 0 auto;
| | .card-grid { |
| scroll-snap-align: center;
| | display: flex; |
| border-radius: 12px;
| | flex-wrap: wrap; |
| box-shadow: 0 4px 8px rgba(0,0,0,0.2);
| | gap: 20px; |
| | justify-content: space-between; |
| | margin-bottom: 40px; |
| } | | } |
| | | .card { |
| /* 热门条目网格 */
| | flex: 1 1 calc(50% - 20px); |
| .cards-grid {
| | background: white; |
| display: grid;
| | padding: 20px; |
| grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
| | border-radius: 16px; |
| gap: 15px;
| | box-shadow: 0 4px 12px rgba(0,0,0,0.08); |
| margin-top: 10px;
| | transition: transform 0.2s, box-shadow 0.2s; |
| } | | } |
| | | .card:hover { |
| .cards-grid .card {
| | transform: translateY(-4px); |
| background: rgba(255,255,255,0.95);
| | box-shadow: 0 6px 16px rgba(0,0,0,0.12); |
| border-radius: 12px;
| |
| box-shadow: 0 4px 10px rgba(0,0,0,0.15);
| |
| padding: 10px;
| |
| text-align: center;
| |
| } | | } |
| | | .card h2 { |
| .cards-grid .card img {
| | margin-top: 0; |
| width: 100%;
| |
| border-radius: 8px;
| |
| margin-bottom: 5px;
| |
| }
| |
| | |
| /* 最近更新列表 */
| |
| .homepage-latest ul {
| |
| list-style: none;
| |
| padding: 0;
| |
| }
| |
| | |
| .homepage-latest li {
| |
| background: rgba(255,255,255,0.9);
| |
| margin-bottom: 8px;
| |
| padding: 8px;
| |
| border-radius: 8px;
| |
| box-shadow: 0 2px 6px rgba(0,0,0,0.1);
| |
| }
| |
| | |
| /* 快速导航 */
| |
| .homepage-quicklinks {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 10px;
| |
| margin: 20px 0;
| |
| }
| |
| | |
| .homepage-quicklinks a {
| |
| padding: 8px 12px;
| |
| background: rgba(255,255,255,0.9);
| |
| border-radius: 8px;
| |
| text-decoration: none;
| |
| color: #333;
| |
| box-shadow: 0 2px 6px rgba(0,0,0,0.1);
| |
| transition: transform 0.2s;
| |
| }
| |
| | |
| .homepage-quicklinks a:hover {
| |
| transform: translateY(-2px);
| |
| }
| |
| | |
| /* 底部 */
| |
| .homepage-footer {
| |
| text-align: center;
| |
| padding: 15px;
| |
| margin-top: 30px;
| |
| background: #333;
| |
| color: white;
| |
| border-radius: 8px;
| |
| }
| |
| | |
| /* 响应式 */
| |
| @media (max-width: 768px) {
| |
| .cards-grid {
| |
| grid-template-columns: 1fr 1fr;
| |
| }
| |
| } | | } |
|
| |
|
| @media (max-width: 480px) { | | /* 手机适配 */ |
| .cards-grid {
| | @media (max-width: 700px) { |
| grid-template-columns: 1fr; | | .card-grid { |
| }
| | flex-direction: column; |
| | } |
| | .card { |
| | flex: 1 1 100%; |
| | } |
| } | | } |
