01 网站维护说明
一、基本信息
为方便代码调试，目前管理员登录的账号和密码分别是： XXXXX 、XXXXX，后续将进行修改。
二、新闻管理与展示
（1） 管理员使用特定的账号和密码可登录此系统，进入后台管理界面，在“赛届管理”中添加或删除赛届，在“新闻类别管理”中添加或删除新闻类别。
▲ 图1.2.1 增加与减少比赛内容
（2） 点击“新闻管理”，可以查看到全部的新闻列表信息。
▲ 图1.2.2 新闻管理界面
（3） 点击“添加新闻”，可以编辑新的新闻，其中，文章类型和所属赛届的内容分别通过上文所述的“赛届管理”和“新闻类别管理”实现。
▲ 图1.2.3 添加新闻的界面
▲ 图1.2.4 新闻类别筛选
支持上传图片和文件，如下图所示，上传的文件可以点击链接进行文件下载。
▲ 图1.2.5 新闻编辑界面
进行外部视频的引入：以bilibili为例，选择分享，点击嵌入代码,，获得复制的代码，复制到markdown编辑器内即可:
▲ 图1.2.6 对BILIBILI网站中的视频链接
代码类似于下表，嵌入iframe标签，如果需要进行宽度高度的修改，需要加入属性 width：height, 如表格第二列所示:
<iframe src="//player.bilibili.com/player.html?aid=970322212&bvid=BV1op4y167dU&cid=257140547&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
<iframe src="//player.bilibili.com/player.html?aid=970322212&bvid=BV1op4y167dU&cid=257140547&page=1" width=500 height=500 scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">
</iframe>
▲ 图1.2.7 粘贴B站的视频效果
（4） 编辑的新闻信息可以在网站前台的“新闻动态”中进行展示。
▲ 图1.2.8 新闻动态界面
（5） 点击某条新闻可进入新闻详情页面。
▲ 图1.2.9 新闻详情界面
（6） 点击“关于大赛”进入相应界面，此界面展示了“新闻动态”、“大赛简介”、“赛题介绍”、“往届赛题”、“学习专区”等信息，其中“大赛简介”、“赛题介绍”和“学习专区”分别展示了对应类别的新闻信息，“新闻动态”展示了全部的新闻信息，“往届赛题”根据不同年度的赛事对新闻信息进行了分类。
▲ 图1.2.10 关于大赛的相关界面
三、赛题管理与展示
（1） 管理员进入后台管理界面，可在“赛题管理”中对比赛题目进行增删改查操作。
▲ 图1.3.1 赛题管理界面
▲ 图1.3.2 赛题介绍界面
（2） 网站首页的“赛题介绍”中会展示相关的赛题信息。其中优先级的数字越小，在网站首页展示的位置越靠前。
四、赛场管理与展示
（1） 管理员进入后台管理界面，可在“赛程管理”中对比赛进程进行管理操作，对于“是否已结束/在进行”字段，“1”表示此阶段已经结束或正在进行，"0表示还未进行到此阶段。
▲ 图1.4.1 赛程管理界面
（2） 网站首页的“赛程安排”会展示对应的赛程信息。
▲ 图1.4.2 赛场安排
五、精彩回顾管理与展示
（1） 管理员进入后台管理界面，可在“精彩回顾”中对此部分进行管理。
▲ 图1.5.1 精彩回顾界面
（2） 网站首页的“精彩回顾”会展示对应的信息。
▲ 图1.5.2 精彩回顾界面展示
六、支持单位与媒体
（1） 管理员进入后台管理界面，可在“支持单位与媒体”中对此部分进行管理。
▲ 图1.6.1 支持单位与媒体
（2） 网站首页的“支持企业与高校”会展示对应的信息。
▲ 图1.6.2 支持企业与单位
七、首页样式管理与展示
（1） 在管理员端，点击“样式管理”进入样式管理页面。
▲ 图1.7.1 样式管理界面
（2） 在表格的字段中，id代表前端代码的id，class代表前端代码的class，所属页面代表这个元素所属的页面，这三者不可缺少，对组件进行唯一控制。备注名为对这个控制组件的介绍，背景颜色为这个组件的背景颜色(优先级小于背景图片，如果有背景图片，背景颜色失效)，背景图片为此组件的背景图片，可为空，内容为该组件的内容，也就是展示的文字，内容字体为该组件文字的字体，内容颜色为该组件文字的颜色，内容大小为该组件文字的字体大小，链接代表该组件链接的地址(只有a标签有效，目前设计的只有新闻动态左侧的四个图片为a标签)，点击操作可以对这些内容进行修改，但是id、class、备注名、所属页面不可编辑。
▲ 图1.7.2 样式管理属性管理
- 注:所有字段可为空，空即不进行改变，默认颜色为透明，如果透明则不进行样式修改 。
（3） 下面表格是id、class与首页页面组件的对应关系:
- Id=header, Class=header
▲ 图1.7.3 代表顶部的导航栏
- Id=logoimg, Class=logoimg
▲ 图1.7.4 左上角的LOGO
- Id=carspic, Class=carspic
▲ 图1.7.5 车的组件图片
- Id=bigimg, Class=bigimg
▲ 图1.7.6 背景大图
- Id=bigimg_1, Class=bigimg_1
▲ 图1.7.7 首页标题大字
- Id=ogh2, Class=ogh2
▲ 图1.7.8 主办单位文字
- Id=logoh, Class=logoh
▲ 图1.7.9 网站名称
- Id=newstitle, Class=newstitle
▲ 图1.7.10 新闻动态标题
- Id=compettitle, Class=compettitle
▲ 图1.7.11 赛提介绍标题
- Id=plantitle, Class=plantitle
▲ 图1.7.12 赛事安排标题
- Id=reviewtitle, Class=reviewtitle
▲ 图1.7.13 精彩回顾的标题
- Id=supporth, Class=supporth
▲ 图1.7.14 支持企业与高校
- Id=leftnew_left, Class=leftnew_left
▲ 图1.7.15 左侧新闻的背景图片
- Id=leftnew_top_middle, Class=leftnew_top-middle
▲ 图1.7.16 中间新闻背景
- Id=left_top_right, Class=leftnew_top_right
▲ 图1.7.17 右上侧新闻图片
- Id=leftnew_bottom, Class=leftnew_bottom
▲ 图1.7.18 右下侧新闻图片
- leftnew_left_title, Class=leftnew_left_title
▲ 图1.7.19 左侧新闻标题
- Id=leftnew_left_p, Class=leftnew_left_p
▲ 图1.7.20 左侧新闻副标题
- Id=leftnew_top_middle_title, Class=leftnew_top_middle_title
▲ 图1.7.21 中测新闻标题
- Id=leftnew_top_middle_p, Class=leftnew_top_middle_p
▲ 图1.7.22 中测新闻副标题
- Id=leftnew_top_right_title, Class=leftnew_top_right_title
▲ 图1.7.23 右侧新闻上部分标题
- Id=leftnew_top_right_p, Class=leftnew_top_right_p
▲ 图1.7.24 右侧新闻上部分副标题
- Id=leftnew_bottom_title, Class=leftnew_bottom_title
▲ 图1.7.25 左侧新闻下侧标题
- Id=leftnew_bottom_p, Class=leftnew_bottom_p
▲ 图1.7.26 左侧新闻下侧副标题
- Id=footer, Class=footer
▲ 图1.7.27 底部分图片
- Id=slectinpage, Class=selectinpage
▲ 图1.7.28 选中的背景样式
（4） 以下是id，class与其他介绍页的对应关系所属页面属性为”其他页面” ，其他页面指的是关于大赛、新闻动态、往届赛事、学习专区这四个展示页面)。在管理员端可以通过筛选进行查询与修改。
▲ 图1.7.29 其它页面样式修改
- Id=header, Class=header
▲ 图1.7.30 顶部导航栏
- Id=logoimg, class=logoimg
▲ 图1.7.31 左上角的LOGO
- Id=logoh, Class=logoh
▲ 图1.7.32 左上角网站名称
- Id=bigimg_1, Class=bigimg_1
▲ 图1.7.33 大标题
- Id=bigimg, Class=bigimg
▲ 图1.7.34 背景大图
- Id=footer, Class=footer
▲ 图1.7.35 底部栏
- Id=selectinpage, Class=selectinpage
▲ 图1.7.36 选中的背景样式
（5） 以下是id，class与登录注册页的对应关系，在管理员端可以通过筛选进行查询与修改。
- Id=header, Class=header
▲ 图1.7.37 登录注册页样式控制
- Id=header, Class=heaser
▲ 图1.7.38 顶部样式
- Id=logoimg, Class=logoimg
▲ 图1.7.39 左上角的LOGO
- Id=logoh, Class=logoh
▲ 图1.7.40 左上角的网站
- Id=lefttitle, Class=lefttitle
▲ 图1.7.41 左部标题
- Id=leftcont, Class=leftcont
▲ 图1.7.42 左部分的内容
- Id=bg-cover, Class=bg-cover
▲ 图1.7.43 左侧的大图
八、首页布局与展示
（1） 在管理员端，点击“布局管理”进入布局管理页面。
▲ 图1.8.1 首页布局管理页面
（2） 在表格的字段中，id代表前端代码的id，class代表前端代码的class，所属页面代表这个元素所属的页面，这三者不可缺少。备注名为对这个控制组件的介绍，陈列为布局样式，通常为grid布局，列分布和行分布分别表示包含的元素按列和按行分布的比例，定位为absolute表示绝对布局，定位为relative表示相对布局。可以对这些内容进行修改，但是id、class、备注名、所属页面不可编辑。
▲ 图1.8.2 布局管理页面
注 ： 此部分为控制页面元素的布局，可能需要花一定时间调整，目前录入部分布局，如若需要录入其他的布局，参考样式管理，在此部分绑定好id，class，所属页面，这三个属性后即可进行某一个元素的布局管理，管理方式和样式管理相同，修改内容即可，其他字段可为空，id，class与页面对应关系参考上面样式管理的表格，可自行增加。
九、用户管理
在管理员端，点击“用户管理”进入用户管理页面。此页面将所有在本网站注册的用户信息以表格的形式进行展示，点击“导出”，可以直接进行表格的导出，将报名信息转化为xlsx表格下载到本地。
▲ 图1.9.1 导出注册用户信息
十、管理员管理
在超级管理员端，可以进行管理员账号的增删改查，可以设置管理员身份，
- 1 ：为超级管理员
- 2：为区域赛管理员，
超级管理员能够进行所有功能的管理，区域赛管理员只支持新闻的发布。可以对管理员的密码进行修改，如果需要修改账号，可以直接删除原有账号，新加一个账号即可。
▲ 图1.10.1 管理员管理页面
▲ 图1.10.2 新增管理员页面
● 相关图表链接:
- 图1.2.1 增加与减少比赛内容
- 图1.2.2 新闻管理界面
- 图1.2.3 添加新闻的界面
- 图1.2.4 新闻类别筛选
- 图1.2.5 新闻编辑界面
- 图1.2.6 对BILIBILI网站中的视频链接
- 图1.2.7 粘贴B站的视频效果
- 图1.2.8 新闻动态界面
- 图1.2.9 新闻详情界面
- 图1.2.10 关于大赛的相关界面
- 图1.3.1 赛题管理界面
- 图1.3.2 赛题介绍界面
- 图1.4.1 赛程管理界面
- 图1.4.2 赛场安排
- 图1.5.1 精彩回顾界面
- 图1.5.2 精彩回顾界面展示
- 图1.6.1 支持单位与媒体
- 图1.6.2 支持企业与单位
- 图1.7.1 样式管理界面
- 图1.7.2 样式管理属性管理
- 图1.7.3 代表顶部的导航栏
- 图1.7.4 左上角的LOGO
- 图1.7.5 车的组件图片
- 图1.7.6 背景大图
- 图1.7.7 首页标题大字
- 图1.7.8 主办单位文字
- 图1.7.9 网站名称
- 图1.7.10 新闻动态标题
- 图1.7.11 赛提介绍标题
- 图1.7.12 赛事安排标题
- 图1.7.13 精彩回顾的标题
- 图1.7.14 支持企业与高校
- 图1.7.15 左侧新闻的背景图片
- 图1.7.16 中间新闻背景
- 图1.7.17 右上侧新闻图片
- 图1.7.18 右下侧新闻图片
- 图1.7.19 左侧新闻标题
- 图1.7.20 左侧新闻副标题
- 图1.7.21 中测新闻标题
- 图1.7.22 中测新闻副标题
- 图1.7.23 右侧新闻上部分标题
- 图1.7.24 右侧新闻上部分副标题
- 图1.7.25 左侧新闻下侧标题
- 图1.7.26 左侧新闻下侧副标题
- 图1.7.27 底部分图片
- 图1.7.28 选中的背景样式
- 图1.7.29 其它页面样式修改
- 图1.7.30 顶部导航栏
- 图1.7.31 左上角的LOGO
- 图1.7.32 左上角网站名称
- 图1.7.33 大标题
- 图1.7.34 背景大图
- 图1.7.35 底部栏
- 图1.7.36 选中的背景样式
- 图1.7.37 登录注册页样式控制
- 图1.7.38 顶部样式
- 图1.7.39 左上角的LOGO
- 图1.7.40 左上角的网站
- 图1.7.41 左部标题
- 图1.7.42 左部分的内容
- 图1.7.43 左侧的大图
- 图1.8.1 首页布局管理页面
- 图1.8.2 布局管理页面
- 图1.9.1 导出注册用户信息
- 图1.10.1 管理员管理页面
- 图1.10.2 新增管理员页面