kya_vue/src/kpa_pages/privilegeManagement/index.vue

<template>
  <div class="page_privilegeManagement">
    <van-sticky>
      <div class="privilegeManagementTitle">
        <i class="iconfont icon-zuojiantou jiantou"></i>
        <span class="titleName">权限管理</span>
        <div class="iconBox">
          <van-icon class="iconOne add" name="add-o" />
        </div>
      </div>
    </van-sticky>
    <div class="peopleBox">
      <div class="peopleOne">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img src="../../assets/images/people5.jpg" alt />
            </div>
            <div class="peopleTitle">
              <p>子管理员</p>
              <div class="setting">
                <van-icon class="setting-o" name="setting-o" />
                <span>权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>子管理员具备平台全部功能的使用权限 请谨慎配置</p>
            <p class="hasUser">
              该角色目前已配置
              <span style="color:#338AFB">0</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p>新增用户</p>
          <p>用户管理</p>
        </div>
      </div>
      <div class="peopleOne">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img src="../../assets/images/people1.jpg" alt />
            </div>
            <div class="peopleTitle">
              <p>医生</p>
              <div class="setting">
                <van-icon class="setting-o" name="setting-o" />
                <span>权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>
              医生角色能够进行建立患者档案，制定和调整患者透
              析治疗方案，定期评价病人的透析质量等...
            </p>
            <p class="hasUser">
              该角色目前已配置
              <span style="color:#338AFB">0</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p>新增用户</p>
          <p>用户管理</p>
        </div>
      </div>
      <div class="peopleOne">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img src="../../assets/images/people2.jpg" alt />
            </div>
            <div class="peopleTitle">
              <p>护士</p>
              <div class="setting">
                <van-icon class="setting-o" name="setting-o" />
                <span>权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>护士角色能够进行病人透析管理，以及医院的感染控 制与消毒记录等...</p>
            <p class="hasUser">
              该角色目前已配置
              <span style="color:#338AFB">0</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p>新增用户</p>
          <p>用户管理</p>
        </div>
      </div>
      <div class="peopleOne">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img src="../../assets/images/people3.jpg" alt />
            </div>
            <div class="peopleTitle">
              <p>库存</p>
              <div class="setting">
                <van-icon class="setting-o" name="setting-o" />
                <span>权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>
              库存角色负责透析耗材的日常管理，对耗材的入库、出库、
              退库的登记操作
            </p>
            <p class="hasUser">
              该角色目前已配置
              <span style="color:#338AFB">0</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p>新增用户</p>
          <p>用户管理</p>
        </div>
      </div>
      <div class="peopleOne">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img src="../../assets/images/people6.png" alt />
            </div>
            <div class="peopleTitle">
              <p>运营</p>
              <div class="setting">
                <van-icon class="setting-o" name="setting-o" />
                <span>权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>运营角色能够在SCRM中管理微网站、使用营销工具、做会员管理和分销商品经营的操作</p>
            <p class="hasUser">
              该角色目前已配置
              <span style="color:#338AFB">0</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p>新增用户</p>
          <p>用户管理</p>
        </div>
      </div>
      <div class="peopleOne">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img src="../../assets/images/people7.png" alt />
            </div>
            <div class="peopleTitle">
              <p>技师</p>
              <div class="setting">
                <van-icon class="setting-o" name="setting-o" />
                <span>权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>技师角色能够进行设备的管理，日常维护维修记录等...</p>
            <p class="hasUser">
              该角色目前已配置
              <span style="color:#338AFB">0</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p>新增用户</p>
          <p>用户管理</p>
        </div>
      </div>
      <div class="peopleOne">
        <div>
          <div class="peopleTop">
            <div class="peopleImg">
              <img src="../../assets/images/people4.jpg" alt />
            </div>
            <div class="peopleTitle">
              <p>院长</p>
              <div class="setting">
                <van-icon class="setting-o" name="setting-o" />
                <span>权限配置</span>
              </div>
            </div>
          </div>
          <div class="peopleContent">
            <p>院长角色了解血透患者血液透析质量和相关的大数据，以及掌握透析中心整体运营情况</p>
            <p class="hasUser">
              该角色目前已配置
              <span style="color:#338AFB">0</span>个员工
            </p>
          </div>
        </div>
        <div class="operationBox">
          <p>新增用户</p>
          <p>用户管理</p>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.page_privilegeManagement {
  height: 100%;
  overflow-y: auto;
  background: #fafafa;
  .privilegeManagementTitle {
    background: #fff;
    padding: 0 1.125rem;
    height: 3.125rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .jiantou {
    font-size: 1.5rem;
    font-weight: 600;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .iconOne {
    font-size: 1.5rem;
  }
  .peopleBox {
    margin-bottom: 1.875rem;
  }
  .peopleOne {
    margin: 0.875rem 0.75rem 0;
    background: #fff;
    height: 10.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 0.3125rem;
    box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.05);
    .peopleTop {
      height: 3.125rem;
      display: flex;
      align-items: center;
      padding-left: 0.875rem;
      padding-right: 1.75rem;
    }
    .peopleImg {
      width: 10%;
      display: flex;
      align-items: center;
      img {
        width: 1.75rem;
        height: 1.75rem;
      }
    }
    .peopleTitle {
      width: 92%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-left: 0.625rem;
      p {
        font-weight: bold;
        font-size: 1.125rem;
      }
    }
    .setting {
      display: flex;
      align-items: center;
      color: #838487;
      height: 1.25rem;
      line-height: 1.25rem;
      .setting-o {
        font-size: 1.25rem;
        margin-right: 0.375rem;
      }
      span {
        font-size: 0.9375rem;
      }
    }
    .peopleContent {
      width: 90%;
      float: right;
      padding-left: 1.2rem;
      padding-right: 1.5rem;
      font-size: 0.8125rem;
      color: #989898;
      line-height: 1.125rem;
    }
    .hasUser {
      color: #666666;
      margin-top: 0.5rem;
    }
    .operationBox {
      height: 2.8125rem;
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
      > p:first-child {
        border-right: 1px solid #ccc;
      }
      p {
        width: 50%;
        font-size: 0.875rem;
        color: #338afb;
        text-align: center;
        height: 2.25rem;
        line-height: 2.25rem;
      }
    }
    .line {
      color: #e5e5e5;
    }
  }
}
::-webkit-scrollbar {
  width: 0;
}
</style>