62 lines
2.7 KiB
Vue
62 lines
2.7 KiB
Vue
<template>
|
||
<a-card class="markdown-body">
|
||
<h3>1. 全部房间概览</h3>
|
||
<p><img
|
||
src='./img/全部房间概览0.png'
|
||
alt='全部房间概览0' referrerPolicy='no-referrer'/></p>
|
||
<p>登陆后，该页面展示全部房间的预约状态</p>
|
||
<ol start=''>
|
||
<li>最上面是日期选择栏，可以前后跳转也可以点击中间的日期直接选择。<img
|
||
src='./img/全部房间概览1.png'
|
||
alt='全部房间概览1' referrerPolicy='no-referrer'/></li>
|
||
<li>中间的每个方块表示一个房间，第一行是房间名，第二行是这一天该房间预约的条数，剩余时间段百分比，点击即可进入该房间详细预约概览。</li>
|
||
<li>状态栏显示全部房间的预约条数与剩余时间段百分比，右侧有自动刷新选项，每分钟自动刷新一次。</li>
|
||
|
||
</ol>
|
||
<h3>2. 指定房间概览</h3>
|
||
<p><img
|
||
src='./img/指定房间概览0.png'
|
||
alt='指定房间概览0' referrerPolicy='no-referrer'/></p>
|
||
<ol start=''>
|
||
<li><p>最上面是日期选择栏，可以前后跳转也可以点击中间的日期直接选择。</p>
|
||
</li>
|
||
<li><p>中间是时间段选择表</p>
|
||
<ol start=''>
|
||
<li>横向表头是时间段，纵向表头是座位名</li>
|
||
<li>中间的白色方框代表可以选择的时间段；红色方框代表已经被预约的时间段，不可以选择；蓝色方框代表选择的时间段。</li>
|
||
<li>鼠标悬停红色方框会显示该时间段的预约信息。<img
|
||
src='./img/指定房间预约概览3.png'
|
||
alt='指定房间预约概览3' referrerPolicy='no-referrer'/></li>
|
||
<li>选择一个座位的两个白色方框，会自动选中两个中的所有连续方框。</li>
|
||
<li>一次只能选择一个座位的一个连续时间段。</li>
|
||
|
||
</ol>
|
||
</li>
|
||
<li><p>点击新建预约跳转到确认新建页面。</p>
|
||
</li>
|
||
<li><p>状态栏显示该房间的预约条数与剩余时间段百分比，右侧有自动刷新选项，每分钟自动刷新一次。</p>
|
||
</li>
|
||
</ol>
|
||
<h3>3. 新建预约</h3>
|
||
<p><img
|
||
src='./img/指定房间概览1.png'
|
||
alt='指定房间概览1' referrerPolicy='no-referrer'/></p>
|
||
<p>该页面显示预约的详情</p>
|
||
<p>选择预约人，可以输入预约人关键字进行查找</p>
|
||
<p>
|
||
<img
|
||
src='./img/指定房间概览2.png'
|
||
alt='指定房间概览2' referrerPolicy='no-referrer'/></p>
|
||
<p>点击提交申请</p>
|
||
</a-card>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Dashboard'
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import "css/markdown.css";
|
||
</style> |