<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>