75 lines
2.2 KiB
Vue
75 lines
2.2 KiB
Vue
<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>
|