h5样式

schoolNewsWeb/src/views/user/home/HomeView.vue

@@ -101,11 +101,14 @@ import { bannerApi } from '@/apis/resource/banner';
 import { recommendApi } from '@/apis/homepage';
 import { ElMessage } from 'element-plus';
 import type { Banner, ResourceRecommendVO } from '@/types';
-import dangIcon from '@/assets/imgs/dang.svg';
+import dangIconUrl from '@/assets/imgs/dang.svg';
 import { useRouter } from 'vue-router';
 
 const router = useRouter();
 
+// 将导入的SVG URL转换为响应式变量以供模板使用
+const dangIcon = ref(dangIconUrl);
+
 // 轮播数据
 const banners = ref<Banner[]>([]);
 const loading = ref(false);
@@ -318,4 +321,97 @@ onMounted(() => {
 @keyframes spin {
   to { transform: rotate(360deg); }
 }
+
+// 移动端适配
+@media (max-width: 768px) {
+  .home-view {
+    padding-bottom: 80px; // 为移动端底部导航留出空间
+  }
+
+  .banner-section {
+    height: 200px; // 移动端轮播图高度调整
+  }
+
+  .section {
+    padding: 0 16px; // 移动端左右内边距
+    margin-top: 24px; // 减少上边距
+
+    .section-header {
+      margin-bottom: 16px; // 减少底部边距
+
+      .section-title {
+        font-size: 20px; // 移动端标题字体大小
+        line-height: 28px;
+      }
+
+      .more-link {
+        span {
+          font-size: 14px; // 移动端"查看更多"字体
+          line-height: 20px;
+        }
+
+        .el-icon {
+          width: 14px;
+          height: 14px;
+        }
+      }
+    }
+
+    .article-grid {
+      grid-template-columns: 1fr; // 移动端单列布局
+      gap: 16px; // 减少间距
+    }
+
+    .loading-container,
+    .empty-container {
+      padding: 40px 0; // 减少垂直内边距
+      min-height: 120px; // 减少最小高度
+    }
+  }
+
+  // 轮播图移动端优化
+  .banner-loading,
+  .banner-empty {
+    p {
+      font-size: 12px; // 移动端提示文字
+    }
+  }
+
+  .loading-spinner {
+    width: 32px; // 移动端加载图标大小
+    height: 32px;
+    border-width: 2px;
+  }
+}
+
+// 小屏移动端进一步优化
+@media (max-width: 480px) {
+  .section {
+    padding: 0 12px; // 更小的内边距
+    margin-top: 20px;
+
+    .section-header {
+      margin-bottom: 12px;
+
+      .section-title {
+        font-size: 18px; // 更小的标题
+        line-height: 24px;
+      }
+
+      .more-link {
+        span {
+          font-size: 13px;
+        }
+      }
+    }
+
+    .article-grid {
+      gap: 12px; // 更小的间距
+    }
+  }
+
+  .banner-section {
+    height: 160px; // 小屏幕更小的轮播图高度
+  }
+}
 </style>