HIS/front/src/pages/HomePage.vue

<script setup>


</script>

<template>

  <d-content>
    <div class="container">
      <div class="container-left">
        <d-card shadow="never" class="item-card container-left-card" style="height: auto;">
          <template #title> 快捷导航 </template>
          <template #subtitle> 最近访问 </template>
          <template #content>
            <d-button type="primary" class="me-1 mb-2" size="small" @click="$router.push('/menjizhen-item')"><i class="icon-system me-1" />门急诊医生站</d-button>
            <d-button type="primary" class="me-1" size="small" @click="$router.push('/zhuyuan-item')"><i class="icon-system me-1" />住院医生站</d-button>
            <d-button type="primary" class="me-1" size="small" @click="$router.push('/form')"><i class="icon-system me-1" />日间手术门诊工作站</d-button>
            <d-button type="primary" class="me-1" size="small" @click="$router.push('/table')"><i class="icon-system me-1" />日间手术住院工作站</d-button>
            <d-button type="primary" class="me-1" size="small" @click="$router.push('/docs')"><i class="icon-system me-1" />会诊记录管理</d-button>
            <div class="mt-5 mb-3">自定义快捷入口</div>
            <d-button type="primary" class="me-1 mb-2" size="small" @click="$router.push('/menjizhenItemView')"><i class="icon-system me-1" />门急诊医生站</d-button>
            <d-button type="primary" class="me-1" size="small" @click="$router.push('/charts')"><i class="icon-system me-1" />住院医生站</d-button>
            <d-button type="primary" class="me-1" size="small" @click="$router.push('/form')"><i class="icon-system me-1" />日间手术门诊工作站</d-button>
            <d-button icon="add" variant="text" title="Add"/>

          </template>

        </d-card>
        <d-card class="item-card container-left-card">
          <template #title> 我的日程</template>
          <template #content>
          </template>
        </d-card>
      </div>
      <div class="container-right" >
        <d-card shadow="never" class="item-card container-right-card">
          <template #title>公告</template>
          <template #content>
          <li>
            <a href="#" style="text-decoration: none; color: #333;">医生工作站使用手册</a>
          </li>
          <li>
            <a href="#" style="text-decoration: none; color: #333;">医生工作站操作视频</a>
          </li>
          <li>
            <a href="#" style="text-decoration: none; color: #333;">新版本发布公告</a>
          </li>
          </template>
        </d-card>
        <d-card shadow="never" class="item-card container-right-card">
          <template #title>今日数据</template>
          <template #content>
              <d-row>
                <d-col span="6">今日就诊量</d-col>
                <d-col span="6">待就诊人数</d-col>
                <d-col span="6">今日入院人数</d-col>
                <d-col span="6">今日出院人数</d-col>
              </d-row>
              <d-row>
                <d-col span="6">100</d-col>
                <d-col span="6">50</d-col>
                <d-col span="6">20</d-col>
                <d-col span="6">10</d-col>
              </d-row>
          </template>
        </d-card>
        <d-card shadow="never" class="item-card container-right-card" style="height: 300px;">
          <template #title>今日待办</template>
          <template #content>

          </template>
        </d-card>
      </div>

    </div>

  </d-content>
</template>

<style lang="scss" scoped>
header{
  background-color: var(--primary-color);
  position: relative;
  text-align: right;
}

.card-demo-basic {
  cursor: pointer;

  .card-demo-icon {
    cursor: pointer;
    font-size: 16px;
    margin-right: 8px;
    vertical-align: middle;
  }

  .card-demo-icon + span {
    vertical-align: middle;
  }
  .card-block {
    margin-right: 16px;

    i {
      cursor: pointer;
      font-size: 16px;
      margin-right: 8px;
      vertical-align: middle;
    }

    i + span {
      vertical-align: middle;
    }
  }

  .card-container {
    width: 350px;
  }

  .action-text {
    color: #8a8e99;
  }
}

.docs-devui-row:not(:last-of-type) {
  margin-bottom: 0;
}
.docs-devui-row .devui-col {
  text-align: center;
  min-height: 44px;
  line-height: 44px;
}
.docs-devui-row .devui-col:nth-of-type(2n + 1) {
  background: var(--devui-global-bg);
}
.docs-devui-row .devui-col:nth-of-type(2n) {
  background: var(--devui-brand);
}

.container {
  width: calc(100vw);
  display: flex;
  display: -webkit-flex;
  /* 从左端开始沿水平轴防止flex item */
  flex-direction: row;
  /* 强制 flex item不换行，沿着同一行堆叠 */
  flex-wrap: nowrap;
  /* flex item在主轴上的对齐方式，这里定义左对齐 */
  justify-content: flex-start;
  /* 定义交叉轴对其方式 */
  align-items: flex-start;
}


.container-left {
  width: 50%;
  margin-right: 16px;
}

.container-right {
  width: 40%;

}
.container-left-card {
  margin-bottom: 16px;
}
.container-right-card {
  margin-bottom: 16px;
}


</style>