# 高校官网及模拟学工系统模板

**Repository Path**: lichaocode/campusWeb

## Basic Information

- **Project Name**: 高校官网及模拟学工系统模板
- **Description**: 高校官网及模拟学工系统模板
- **Primary Language**: HTML
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2023-06-05
- **Last Updated**: 2023-06-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 高校官网及模拟学工系统模板

#### 介绍
​		高校官网及模拟学工系统模板

#### 在线预览

​		https://mty365.gitee.io/campusWeb

#### 项目简介
​		本次设计网页包括学校官网首页和模拟学工系统两部分，学校官网页面包括导航栏弹出菜单、轮播图、鼠标移入移出实现列表切换、列表、排版文字等。模拟学工系统主要实现对学生请假审批的管理，包括菜单menu，头部header，底部footer，主要内容main内含表格、form表单、对话框dialog等，实现数据的展示、增加、状态改变等功能。

#### 结构分析

​		本项目使用了vue 3.2，elementui plus流行web框架辅助页面样式的设计和逻辑设计。

（1）网站首页分析

​		头部使用logo文字，搜索框组成。然后是无序列表组成菜单，几张图片组成的轮播图，每隔几秒自动更换图片；若干个自定义container组成各个内容块，配合div和css设置，实现各种排版和效果。底部footer展示关于网站本身的相关信息，和前往学工网站的链接。页面刚刚加载时，添加1s 页面loading状态动效。

（2）轮播图分析

​		通过第三方UI库轮播图组件，让图片每隔一段时间自动切换，同时支持手动切换。

（3）模拟学工系统页面分析

​		本页面支持判断浏览器窗口宽度，低于设定值会自动设置侧边菜单收起。页面布局方面首先是一个table表格，刚刚打开时延迟2s+loading状态模拟加载过程，随后展示模拟的学生请假数据，及其管理功能。支持添加审批意见和查看更多详情(本次作业所有form表单支持内容校验，检查各输入框内是否有内容和是否符合要求，有问题会提示用户；提交时延迟2s 有按钮loading状态效果)。“更多详情”功能显示一个对话框，内容以steps组件显示当前审批状态。可以设置某条请假审批的状态，并且以标签和颜色显示当前的审批状态；通过审批的，审批按钮不再显示。

​		然后上方有“申请请假”按钮(正常项目肯定不会让管理页面中也包含申请请假功能，肯定会分开设计，本次为了演示功能所以做到了一起)，点击后是一个form表单，表单实现了识别是否离鞍，并给出warning提示；form表单识别是否前往大连，并给出warning提示；form表单识别学院和专业的关系，通过逻辑判断隐藏不对应的选项；form表单是否离鞍和前往地区联动，选“否”会隐藏除鞍山以外地区。填写内容后提交，会在table中新增刚才提交的申请内容。

​		底部区域主要展示本项目的开发历程，以时间线格式倒序显示。 


#### 安装教程

​		获得本仓库代码后，打开index.html即可查看。

#### 使用说明

​		本仓库代码仅供演示和参考只用途，请谨慎用在真实项目，使用本仓库代码造成的不良后果由使用者自行承担。