519 lines
17 KiB
Vue
519 lines
17 KiB
Vue
<template>
|
|
<view class="home-page">
|
|
<view class="content-container">
|
|
<!-- 用户信息卡片 -->
|
|
<view class="user-info-card" v-if="curXs">
|
|
<view class="banner-content">
|
|
<image src="/static/base/home/2211.png" class="banner-img"></image>
|
|
<view class="banner-overlay">
|
|
</view>
|
|
</view>
|
|
<!-- 学生信息 -->
|
|
<XsPicker :is-bar="false" @change="switchXs" />
|
|
|
|
<view class="glxs-btn" @click="goToGlxs">
|
|
<u-icon name="plus" size="12" color="#fff"></u-icon>
|
|
<text>新增学生</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 功能菜单 -->
|
|
<view class="menu-section">
|
|
<view class="section-title">
|
|
<text class="title-text">校园服务</text>
|
|
<view class="title-line"></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-container">
|
|
<view class="icon-background"></view>
|
|
<image :src="item.icon" class="grid-icon"></image>
|
|
</view>
|
|
<text class="grid-text">{{ item.title }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 通知公告 -->
|
|
<view class="notice-section">
|
|
<view class="section-title">
|
|
<text class="title-text">通知公告</text>
|
|
<view class="title-line"></view>
|
|
</view>
|
|
|
|
<view class="notice-list">
|
|
<view
|
|
v-for="(notice, index) in announcements"
|
|
:key="index"
|
|
class="notice-item"
|
|
@click="goToDetail(notice)"
|
|
>
|
|
<view class="notice-icon">
|
|
<u-icon name="bell" size="20" color="#4A90E2"></u-icon>
|
|
</view>
|
|
<view class="notice-content">
|
|
<text class="notice-title">{{ notice.title }}</text>
|
|
<text class="notice-desc">{{ notice.description }}</text>
|
|
<view class="notice-footer">
|
|
<text class="notice-date">{{ notice.releaseTime }}</text>
|
|
<view class="notice-arrow">
|
|
<u-icon name="arrow-right" size="12" color="#C8C9CC"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import XsPicker from "@/pages/base/components/XsPicker/index.vue"
|
|
import { cmsArticlePageApi } from "@/api/base/server";
|
|
import { useUserStore } from "@/store/modules/user";
|
|
import { useDataStore } from "@/store/modules/data";
|
|
const { getCurXs } = useUserStore();
|
|
const { setData, getAppCode } = useDataStore();
|
|
|
|
// 菜单项数据
|
|
const menuItems = ref([
|
|
{
|
|
title: "班级课表",
|
|
icon: "/static/base/home/book-read-line.png",
|
|
path: "/pages/base/class-schedule/index",
|
|
},
|
|
{
|
|
title: "成绩查询",
|
|
icon: "/static/base/home/file-search-line.png",
|
|
path: "/pages/base/grades/list",
|
|
},
|
|
{
|
|
title: "在线请假",
|
|
icon: "/static/base/home/draft-line.png",
|
|
path: "/pages/base/leave-request/index",
|
|
},
|
|
// TODO:需求待协商硬件对接
|
|
// {
|
|
// title: "进出校园",
|
|
// icon: "/static/base/home/file-transfer-line.png",
|
|
// path: "/pages/base/campus-access/index",
|
|
// },
|
|
{
|
|
title: "家校沟通",
|
|
icon: "/static/base/home/file-transfer-line.png",
|
|
path: "/pages/base/jl/index",
|
|
},
|
|
{
|
|
title: "兴趣课",
|
|
icon: "/static/base/home/file-text-line.png",
|
|
path: "/pages/base/interest-class/index",
|
|
},
|
|
{
|
|
title: "俱乐部",
|
|
icon: "/static/base/home/contacts-book-3-line.png",
|
|
path: "/pages/base/club/index",
|
|
},
|
|
]);
|
|
|
|
// 通知公告数据
|
|
const announcements = ref<any>([
|
|
{
|
|
"id": 2142746416,
|
|
"createdTime": "2024-10-10 09:37:45",
|
|
"updatedTime": "2024-10-12 15:47:44",
|
|
"createdUserName": "管理员",
|
|
"updatedUserName": "管理员",
|
|
"title": "值周学生常规规范",
|
|
"columnId": 24,
|
|
"sort": 1,
|
|
"description": "",
|
|
"releaseTime": "2024-10-10 09:32:36",
|
|
"author": "",
|
|
"source": "",
|
|
"content": "<p style=\"text-align: center;\"><br></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">1.值周前一周放假前清楚自己常规检查的位楼栋、楼层和班级；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">2.检查时段包括早读、大课间、下午眼保健操。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">3.检查内容。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>早读八看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否有教师值守；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看值守教师是否长时间玩手机；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看黑板上的值日课程贴是否填写；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看同学是否到班即读，有无疯玩打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看课桌椅、讲桌是否整齐、整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看红领巾佩戴(队徽)情况；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看教室、走廊是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑻看黑板上是否书写(课件)有早读的内容和要求。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>大课间七看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否认真组织室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看室外操班级是否留有学生在教室且打闹；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看室内操是否安静、动用是否整齐；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看是否有教师值守室内操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看教室、走廊地面是否有垃圾；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑹看室外操班级桌面是否收拾整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑺看室外操班级是否关闭用电设备。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px; font-family: 黑体;\"><strong>眼保健操五看：</strong></span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑴看是否按要求组织眼保健操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑵看做操时是否关灯；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑶看是否有学生讲话、未做、未闭眼做操；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑷看教室、走廊地面是否整洁；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">⑸看走廊书吧是否整齐。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">4.检查时实行蹲点检查，整个时段来回巡查。</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">5.校门口礼仪队同学要保持良好的精神状态，着装整洁，可设计个性的欢迎口号、动作、道具等，热情向师生问好；</span></p><p style=\"text-indent: 30pt; line-height: 2;\"><span style=\"color: black; font-size: 19px;\">6.常规检查同学到班检查要佩戴好绶带，进入教室要喊“报告”。</span></p>",
|
|
"columnName": "师、生值周工作要求",
|
|
"pk": 2142746416
|
|
}
|
|
])
|
|
|
|
// 当前选中的学生
|
|
let curXs = computed(() => getCurXs)
|
|
|
|
let pageParams = ref({
|
|
page: 1,
|
|
rows: 10,
|
|
appCode: getAppCode
|
|
})
|
|
|
|
const goToGlxs = () => {
|
|
uni.navigateTo({
|
|
url: "/pages/base/home/glxs",
|
|
});
|
|
}
|
|
|
|
// 处理菜单点击
|
|
function handleMenuClick(item: any) {
|
|
console.log("点击菜单:", item.title);
|
|
if (item.path) {
|
|
uni.navigateTo({
|
|
url: item.path,
|
|
});
|
|
}
|
|
}
|
|
|
|
// 切换学生
|
|
function switchXs(xs: any) {
|
|
getArticleList();
|
|
}
|
|
|
|
// 跳转到详情页面
|
|
function goToDetail(notice: any) {
|
|
setData(notice)
|
|
uni.navigateTo({
|
|
url: '/pages/base/home/detail'
|
|
})
|
|
}
|
|
|
|
const getArticleList = async () => {
|
|
const params = Object.assign({}, pageParams.value, { njmcId: curXs.value.njmcId });
|
|
cmsArticlePageApi(params).then(res => {
|
|
announcements.value = res.rows;
|
|
})
|
|
.catch((error) => {
|
|
// 接口调用失败
|
|
console.error("调用检查通知公告接口失败:", error);
|
|
});
|
|
};
|
|
|
|
onMounted(async () => {
|
|
getArticleList();
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.home-page {
|
|
background-color: #ffffff;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
}
|
|
|
|
.content-container {
|
|
padding: 15px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 用户信息卡片 */
|
|
.user-info-card {
|
|
position: relative;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
|
|
border-radius: 20px;
|
|
padding: 20px;
|
|
margin-bottom: 20px;
|
|
margin-top: 20px;
|
|
box-shadow: 0 12px 40px rgba(74, 144, 226, 0.25);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
overflow: hidden;
|
|
|
|
.banner-content {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
|
|
.banner-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.banner-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, rgba(74, 144, 226, 0.8) 0%, rgba(53, 122, 189, 0.9) 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
}
|
|
|
|
.glxs-btn {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
padding: 8px 16px;
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
|
|
color: #ffffff;
|
|
border-top-left-radius: 20px;
|
|
border-bottom-right-radius: 20px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
|
|
transition: all 0.3s ease;
|
|
flex-shrink: 0;
|
|
min-width: 60px;
|
|
height: 16px;
|
|
|
|
text {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 功能菜单 */
|
|
.menu-section {
|
|
margin-bottom: 25px;
|
|
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 0 5px;
|
|
|
|
.title-text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
position: relative;
|
|
padding-left: 12px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 16px;
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.title-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, #e0e6ed 0%, transparent 100%);
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
.grid-menu {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 0;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 32px rgba(74, 144, 226, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
|
|
.grid-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px 10px;
|
|
transition: all 0.3s ease;
|
|
border-radius: 12px;
|
|
position: relative;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
background-color: rgba(74, 144, 226, 0.05);
|
|
}
|
|
|
|
.grid-icon-container {
|
|
position: relative;
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-bottom: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.icon-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 12px;
|
|
background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
|
|
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
|
|
}
|
|
|
|
.grid-icon {
|
|
position: relative;
|
|
z-index: 1;
|
|
width: 28px;
|
|
height: 28px;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.grid-text {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: #303133;
|
|
text-align: center;
|
|
line-height: 1.2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 通知公告 */
|
|
.notice-section {
|
|
.section-title {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
padding: 0 5px;
|
|
|
|
.title-text {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
position: relative;
|
|
padding-left: 12px;
|
|
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 16px;
|
|
background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
|
|
border-radius: 2px;
|
|
}
|
|
}
|
|
|
|
.title-line {
|
|
flex: 1;
|
|
height: 1px;
|
|
background: linear-gradient(90deg, #e0e6ed 0%, transparent 100%);
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
.notice-list {
|
|
.notice-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
|
|
padding: 18px;
|
|
margin-bottom: 12px;
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 24px rgba(74, 144, 226, 0.18);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 12px 36px rgba(74, 144, 226, 0.25);
|
|
}
|
|
|
|
.notice-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 100%);
|
|
border-radius: 12px;
|
|
margin-right: 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 8px rgba(74, 144, 226, 0.15);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.notice-content {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
|
|
.notice-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 8px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.notice-desc {
|
|
font-size: 13px;
|
|
color: #606266;
|
|
margin-bottom: 12px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.notice-footer {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.notice-date {
|
|
font-size: 12px;
|
|
color: #909399;
|
|
font-weight: 400;
|
|
line-height: 1;
|
|
}
|
|
|
|
.notice-arrow {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: #f5f7fa;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 响应式优化 */
|
|
@media (max-width: 375px) {
|
|
.content-container {
|
|
padding: 12px;
|
|
}
|
|
|
|
.grid-menu .grid-item {
|
|
padding: 15px 8px;
|
|
}
|
|
}
|
|
</style>
|