完成适配移动端

pages/bsnx-h5/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="min-h-screen bg-gray-100">
+    <!-- 顶部banner -->
+    <div class="relative bg-center"
+         style="background-image: url('https://oss.wsdns.cn/20250224/0972ad2dbe9c4934919186d13509ef8d.jpg')">
+<!--      <h1 class="text-2xl mb-2">百色中学 120 周年校庆</h1>-->
+<!--      <p class="text-sm">百廿风华，教育兴邦；桃李百中，领梦远航</p>-->
+    </div>
+
+    <!-- 功能导航 -->
+    <div class="grid grid-cols-4 bg-white p-5 mx-2.5 my-2.5 rounded-lg">
+      <div v-for="(item, index) in navItems"
+           :key="index"
+           class="flex flex-col items-center gap-2">
+        <img :alt="item.text" :src="item.icon" class="w-10 h-10">
+        <span class="text-sm">{{ item.text }}</span>
+      </div>
+    </div>
+
+    <!-- 新闻列表 -->
+    <div class="mx-2.5">
+      <div v-for="(item, index) in newsItems"
+           :key="index"
+           class="flex bg-white p-2.5 mb-2.5 rounded-lg">
+        <img :alt="item.title"
+             :src="item.image"
+             class="w-20 h-20 object-cover rounded">
+        <div class="ml-2.5 flex-1">
+          <h3 class="text-base font-normal">{{ item.title }}</h3>
+          <p class="text-xs text-gray-400 mt-1.5">{{ item.date }}</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const navItems = ref([
+  { text: '报名活动', icon: 'https://oss.wsdns.cn/20250224/7af6663228f3435cabc85cfd9760f215.jpg' },
+  { text: '认款项目', icon: 'https://oss.wsdns.cn/20250224/56f6659ffad949458019d501f3f6bae6.jpg' },
+  { text: '校友风采', icon: 'https://oss.wsdns.cn/20250224/75befc1b351845319c7ff54f52d822e0.jpg' },
+  { text: '母校动态', icon: 'https://oss.wsdns.cn/20250224/83f03f020bda46b383e2f39dfbc62734.jpg' }
+])
+
+const newsItems = ref([
+  {
+    title: '千班万元',
+    image: '/images/news1.jpg',
+    date: '02-09'
+  },
+  {
+    title: '百中故事长廊',
+    image: '/images/news2.jpg',
+    date: '02-09'
+  },
+  {
+    title: '百色中学校史馆建设',
+    image: '/images/news3.jpg',
+    date: '02-13'
+  },
+  {
+    title: '百色中学尚美艺术展厅',
+    image: '/images/news4.jpg',
+    date: '02-13'
+  }
+])
+</script>
+<style>
+.sdf{
+  background-color: #ff6d6d;
+}
+</style>