kya_vue/src/kpa_pages/managementConsole/index.vue

<template>
  <div class="page_managementConsole">
    <div class="managementConsoleTitle">
      <i class="iconfont icon-zuojiantou jiantou"></i>
      <span class="titleName">管理控制台</span>
    </div>
    <div class="consoleBox">
      <div class="consoleOne">
        <img src="../../assets/images/A1.jpg" alt />
        <div class="consoleRight">
          <div>
            <p class="rightName">员工管理</p>
            <p class="rightTip">添加员工加入医院/组织/团队</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="consoleOne">
        <img src="../../assets/images/A2.jpg" alt />
        <div class="consoleRight">
          <div>
            <p class="rightName">权限管理</p>
            <p class="rightTip">管理员可以设置角色并分配对应的权限</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="consoleOne">
        <img src="../../assets/images/A3.jpg" alt />
        <div class="consoleRight">
          <div>
            <p class="rightName">应用管理</p>
            <p class="rightTip">管理员可以添加或者停用应用</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="consoleOne">
        <img src="../../assets/images/A4.jpg" alt />
        <div class="consoleRight">
          <div>
            <p class="rightName">机构设置</p>
            <p class="rightTip">管理员可以修改医院/组织/团队信息</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="consoleOne">
        <img src="../../assets/images/S18.png" alt />
        <div class="consoleRight">
          <div>
            <p class="rightName">集成管理</p>
            <p class="rightTip">管理员可以管理集成密钥</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="consoleOne">
        <img src="../../assets/images/S15.png" alt />
        <div class="consoleRight">
          <div>
            <p class="rightName">配置中心</p>
            <p class="rightTip">分区、床位、透析方案、医嘱模板等</p>
          </div>
          <van-icon name="arrow" />
        </div>
      </div>
    </div>
    <div class="transfer">
      <img src="../../assets/images/A6.jpg" alt />
      <div class="transferRight">
        <p class="rightName">管理员转让</p>
        <van-icon name="arrow" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page_managementConsole {
  height: 100%;
  background: #f6f6f6;
  overflow: hidden;
  .managementConsoleTitle {
    height: 3.125rem;
    line-height: 3.125rem;
    display: flex;
    align-items: center;
    background: #fff;
  }
  .jiantou {
    margin-left: 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 6.4rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .consoleBox {
    margin-top: 0.8125rem;
    background: #fff;
  }
  .consoleOne {
    padding: 0 0.8125rem;
    height: 4.0625rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    img {
      width: 2rem;
      height: 2rem;
    }
    .consoleRight {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 88%;
    }
    .rightName {
      font-size: 1rem;
      color: #313234;
      margin-bottom: 0.375rem;
    }
    .rightTip {
      color: #9b9b9b;
      font-size: 0.8125rem;
    }
    .van-icon-arrow {
      color: #9f9f9f;
    }
  }
  .transfer {
    margin-top: 0.8125rem;
    background: #fff;
    padding: 0 0.8125rem;
    height: 3.125rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img {
      width: 2rem;
      height: 2rem;
    }
    .transferRight {
      width: 88%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .van-icon-arrow {
      color: #9f9f9f;
    }
  }
}
</style>