<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>
