xybpkmweb/src/components/DocIndex.vue

<template>
  <div class="container">
    <div style="position:relative;">
      <img src="../assets/images/infobg.png" alt="" width="100%" style="">
      <div class="docinfo">
        <img class="docavatar" src="../assets/images/doch1.jpg" width="60rem" height="60rem" />
        <p class="docname">{{doctorInfo.name}} 医生,您好!</p>
      </div>
    </div>
    <div class="content">
      <div class="footer">
        <div class="csbtn" @click="goPage('/regpatinfo')">病例信息录入</div>
        <div class="jbbtn" @click="goPage('patcaselist')">病例管理</div>
        <button class="jbbtn" @click="logout">退出登录</button>
        <div class="usageInfo">使用说明</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Index',
    data() {
      return {
        doctorInfo: {}
      }
    },
    methods: {
      goPage(path) {
        this.$router.push(path)
      },
      logout(){
        window.localStorage.removeItem('token')
        window.localStorage.removeItem('authinfo')
        window.location.reload()
      },
      getData() {
        this.$api.getAccountInfo().then(res => {
          if (!res.data.code) {
            this.doctorInfo = res.data.data
          }
        })
      }
    },
    created() {
      this.getData()
    }
  }

</script>

<style scoped lang="scss">
  .container {
    .bgcolor {
      width: 100%;
      height: 10rem;
      // border:1px solid red;
      position: absolute;
      /* z-index:-1; */
      background: #016AFA;
    }

    .bgimg {
      width: 100%;
      height: 24.8rem;
      // border:1px solid red;
      /* top: 10rem; */
      position: absolute;
      /* z-index:-1; */
      background-image: url("../assets/images/infobg.png");
      background-size: 100% 100%;
    }

    .docinfo {
      position: absolute;
      top:30%;
      left:0;
      right: 0;
      .docavatar {
        border-radius: 60rem;
      }

      .docname {
        color: #fff;
        margin: 0.1rem;
      }

      z-index:3;
    }

    .footer {
      margin-bottom: 2rem;

      .usageInfo {
        width: 6rem;
        height: 2.4rem;
        line-height: 2.4rem;
        border-radius: 1rem;
        background: #595758;
        color: #fff;
        margin:2rem 1rem;
      }

    }
  }

</style>