513 lines
11 KiB
Vue
513 lines
11 KiB
Vue
|
<template>
|
||
|
|
<view class="home-page">
|
||
|
|
<!-- 自定义导航栏 -->
|
||
|
|
<view class="custom-navbar">
|
||
|
|
<text class="page-title">智慧校园</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="content-container">
|
||
|
|
<!-- 用户信息卡片 -->
|
||
|
|
<view class="user-info-card">
|
||
|
|
<view class="user-avatar-placeholder"></view>
|
||
|
|
<view
|
||
|
|
class="user-details"
|
||
|
|
@click="navigateTo('/pages/base/parentRegister/index')"
|
||
|
|
>
|
||
|
|
<text class="user-name">{{ currentStudent.name }}</text>
|
||
|
|
<view class="user-class-container">
|
||
|
|
<text class="user-class"
|
||
|
|
>{{ currentStudent.grade }} {{ currentStudent.class }}</text
|
||
|
|
>
|
||
|
|
<u-icon name="edit-pen" size="14" color="#909399"></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="switch-btn" @click="showStudentSelector">切换</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 学校横幅 -->
|
||
|
|
<view class="school-banner">
|
||
|
|
<view class="banner-placeholder"></view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 功能菜单 -->
|
||
|
|
<view class="grid-menu">
|
||
|
|
<view
|
||
|
|
v-for="(item, index) in menuItems"
|
||
|
|
:key="index"
|
||
|
|
class="grid-item"
|
||
|
|
@click="handleMenuClick(item)"
|
||
|
|
>
|
||
|
|
<view class="grid-icon-placeholder"></view>
|
||
|
|
<text class="grid-text">{{ item.title }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 通知公告 -->
|
||
|
|
<view class="notice-section">
|
||
|
|
<view class="section-header">
|
||
|
|
<view class="blue-dot"></view>
|
||
|
|
<text class="section-title">通知公告</text>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<view class="notice-list">
|
||
|
|
<view
|
||
|
|
v-for="(notice, index) in announcements"
|
||
|
|
:key="index"
|
||
|
|
class="notice-item"
|
||
|
|
@click="navigateTo('/pages/base/home/detail')"
|
||
|
|
>
|
||
|
|
<view class="notice-img-placeholder"></view>
|
||
|
|
<view class="notice-content">
|
||
|
|
<text class="notice-title">{{ notice.title }}</text>
|
||
|
|
<text class="notice-desc">{{ notice.description }}</text>
|
||
|
|
<text class="notice-date">{{ notice.date }}</text>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
<!-- 学生选择弹窗 -->
|
||
|
|
<u-popup
|
||
|
|
:show="showSelector"
|
||
|
|
@close="showSelector = false"
|
||
|
|
mode="bottom"
|
||
|
|
round="10"
|
||
|
|
>
|
||
|
|
<view class="student-selector">
|
||
|
|
<view class="selector-header">
|
||
|
|
<text class="selector-title">选择学生</text>
|
||
|
|
<u-icon name="close" size="20" @click="showSelector = false"></u-icon>
|
||
|
|
</view>
|
||
|
|
<view class="student-list">
|
||
|
|
<view
|
||
|
|
v-for="(student, index) in studentList"
|
||
|
|
:key="index"
|
||
|
|
class="student-item"
|
||
|
|
:class="{ 'student-item-active': currentStudent.id === student.id }"
|
||
|
|
@click="switchStudent(student)"
|
||
|
|
>
|
||
|
|
<view class="student-avatar-placeholder"></view>
|
||
|
|
<view class="student-info">
|
||
|
|
<text class="student-name">{{ student.name }}</text>
|
||
|
|
<text class="student-class"
|
||
|
|
>{{ student.grade }} {{ student.class }}</text
|
||
|
|
>
|
||
|
|
</view>
|
||
|
|
<u-icon
|
||
|
|
v-if="currentStudent.id === student.id"
|
||
|
|
name="checkmark"
|
||
|
|
color="#409EFF"
|
||
|
|
size="20"
|
||
|
|
></u-icon>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</u-popup>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { navigateTo } from "@/utils/uniapp";
|
||
|
|
import { ref } from "vue";
|
||
|
|
// 菜单项数据
|
||
|
|
const menuItems = ref([
|
||
|
|
{
|
||
|
|
title: "班级课表",
|
||
|
|
icon: "",
|
||
|
|
path: "/pages/base/class-schedule/index",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "在线请假",
|
||
|
|
icon: "",
|
||
|
|
path: "/pages/base/leave-request/index",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "进出校园",
|
||
|
|
icon: "",
|
||
|
|
path: "/pages/base/campus-access/index",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "兴趣课",
|
||
|
|
icon: "",
|
||
|
|
path: "/pages/base/interest-class/index",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "俱乐部",
|
||
|
|
icon: "",
|
||
|
|
path: "/pages/base/club/index",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "成绩查询",
|
||
|
|
icon: "",
|
||
|
|
path: "/pages/base/grades/index",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
// 通知公告数据
|
||
|
|
const announcements = ref([
|
||
|
|
{
|
||
|
|
image: "",
|
||
|
|
title: "关于《泸州市xxxxxxxx管理办法》的通知",
|
||
|
|
description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
|
||
|
|
date: "2025-02-12 12:33:44",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: "",
|
||
|
|
title: "关于《泸州市xxxxxxxx管理办法》的通知",
|
||
|
|
description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
|
||
|
|
date: "2025-02-12 12:33:44",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
image: "",
|
||
|
|
title: "关于《泸州市xxxxxxxx管理办法》的通知",
|
||
|
|
description: "为规范本市就业见习管理工作，促进高校毕业生等青年...",
|
||
|
|
date: "2025-02-12 12:33:44",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
// 学生列表数据
|
||
|
|
const studentList = ref([
|
||
|
|
{
|
||
|
|
id: "1",
|
||
|
|
name: "陶亦菲",
|
||
|
|
grade: "2年级",
|
||
|
|
class: "01班",
|
||
|
|
avatar: "",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "2",
|
||
|
|
name: "张小明",
|
||
|
|
grade: "4年级",
|
||
|
|
class: "03班",
|
||
|
|
avatar: "",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: "3",
|
||
|
|
name: "王小红",
|
||
|
|
grade: "1年级",
|
||
|
|
class: "02班",
|
||
|
|
avatar: "",
|
||
|
|
},
|
||
|
|
]);
|
||
|
|
|
||
|
|
// 当前选中的学生
|
||
|
|
const currentStudent = ref(studentList.value[0]);
|
||
|
|
|
||
|
|
// 控制选择器显示状态
|
||
|
|
const showSelector = ref(false);
|
||
|
|
|
||
|
|
// 处理菜单点击
|
||
|
|
function handleMenuClick(item: any) {
|
||
|
|
console.log("点击菜单:", item.title);
|
||
|
|
if (item.path) {
|
||
|
|
uni.navigateTo({
|
||
|
|
url: item.path,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// 显示学生选择器
|
||
|
|
function showStudentSelector() {
|
||
|
|
showSelector.value = true;
|
||
|
|
}
|
||
|
|
|
||
|
|
// 切换学生
|
||
|
|
function switchStudent(student: any) {
|
||
|
|
currentStudent.value = student;
|
||
|
|
showSelector.value = false;
|
||
|
|
|
||
|
|
// 这里可以添加切换学生后的其他操作，如刷新页面数据等
|
||
|
|
uni.showToast({
|
||
|
|
title: `已切换到${student.name}`,
|
||
|
|
icon: "none",
|
||
|
|
});
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.home-page {
|
||
|
|
background-color: #f8f8f8;
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 自定义导航栏 */
|
||
|
|
.custom-navbar {
|
||
|
|
height: 44px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
position: relative;
|
||
|
|
padding: 0 15px;
|
||
|
|
padding-top: var(--status-bar-height);
|
||
|
|
background-color: #ffffff;
|
||
|
|
|
||
|
|
.page-title {
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navbar-right {
|
||
|
|
position: absolute;
|
||
|
|
right: 15px;
|
||
|
|
top: 50%;
|
||
|
|
transform: translateY(-50%);
|
||
|
|
height: 44px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.content-container {
|
||
|
|
padding: 15px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 用户信息卡片 */
|
||
|
|
.user-info-card {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 12px 15px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
|
||
|
|
.user-avatar-placeholder {
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border: 1px dashed #d0d0d0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-details {
|
||
|
|
flex: 1;
|
||
|
|
margin-left: 12px;
|
||
|
|
|
||
|
|
.user-name {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #303133;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.user-class-container {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
|
||
|
|
.user-class {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #606266;
|
||
|
|
margin-right: 5px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.switch-btn {
|
||
|
|
padding: 4px 12px;
|
||
|
|
background-color: rgba(64, 158, 255, 0.05);
|
||
|
|
color: #409eff;
|
||
|
|
border: 1px solid #409eff;
|
||
|
|
border-radius: 20px;
|
||
|
|
font-size: 13px;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 学校横幅 */
|
||
|
|
.school-banner {
|
||
|
|
margin-bottom: 15px;
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.banner-placeholder {
|
||
|
|
width: 100%;
|
||
|
|
height: 150px;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border: 1px dashed #d0d0d0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 功能菜单 */
|
||
|
|
.grid-menu {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-radius: 12px;
|
||
|
|
padding: 10px;
|
||
|
|
margin-bottom: 20px;
|
||
|
|
|
||
|
|
.grid-item {
|
||
|
|
width: 33.33%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15px 0;
|
||
|
|
|
||
|
|
.grid-icon-placeholder {
|
||
|
|
width: 40px;
|
||
|
|
height: 40px;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border-radius: 6px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.grid-text {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 通知公告 */
|
||
|
|
.notice-section {
|
||
|
|
.section-header {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
|
||
|
|
.blue-dot {
|
||
|
|
width: 8px;
|
||
|
|
height: 8px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #1976d2;
|
||
|
|
margin-right: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.notice-list {
|
||
|
|
border-radius: 12px;
|
||
|
|
overflow: hidden;
|
||
|
|
|
||
|
|
.notice-item {
|
||
|
|
display: flex;
|
||
|
|
background-color: #ffffff;
|
||
|
|
padding: 15px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
border-radius: 12px;
|
||
|
|
|
||
|
|
.notice-img-placeholder {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border: 1px dashed #d0d0d0;
|
||
|
|
border-radius: 8px;
|
||
|
|
margin-right: 12px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notice-content {
|
||
|
|
flex: 1;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
|
||
|
|
.notice-title {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #303133;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 1;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notice-desc {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #909399;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
display: -webkit-box;
|
||
|
|
-webkit-line-clamp: 2;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
flex: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.notice-date {
|
||
|
|
font-size: 12px;
|
||
|
|
color: #c0c4cc;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 学生选择器弹窗样式 */
|
||
|
|
.student-selector {
|
||
|
|
background-color: #ffffff;
|
||
|
|
border-top-left-radius: 12px;
|
||
|
|
border-top-right-radius: 12px;
|
||
|
|
padding-bottom: 20px;
|
||
|
|
|
||
|
|
.selector-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15px;
|
||
|
|
border-bottom: 1px solid #f2f2f2;
|
||
|
|
|
||
|
|
.selector-title {
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #303133;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.student-list {
|
||
|
|
padding: 0 15px;
|
||
|
|
|
||
|
|
.student-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 15px 0;
|
||
|
|
border-bottom: 1px solid #f2f2f2;
|
||
|
|
|
||
|
|
&:last-child {
|
||
|
|
border-bottom: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-active {
|
||
|
|
background-color: rgba(64, 158, 255, 0.05);
|
||
|
|
}
|
||
|
|
|
||
|
|
.student-avatar-placeholder {
|
||
|
|
width: 45px;
|
||
|
|
height: 45px;
|
||
|
|
border-radius: 50%;
|
||
|
|
background-color: #f0f0f0;
|
||
|
|
border: 1px dashed #d0d0d0;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.student-info {
|
||
|
|
flex: 1;
|
||
|
|
margin-left: 12px;
|
||
|
|
|
||
|
|
.student-name {
|
||
|
|
font-size: 15px;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #303133;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.student-class {
|
||
|
|
font-size: 13px;
|
||
|
|
color: #606266;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|