cmc-oa/oa-ui/src/views/oa/study/components/studyHead.vue

<!--
 * @Author: ysh
 * @Date: 2025-03-05 14:19:02
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-03-06 14:26:32
-->
<template>
  <div class="head-bg">
    <div class="user-info">
      <div class="user-pic" data-is-fans="0" data-is-follows="">
        <div class="user-pic-bg">
          <img class="img" :src="$store.getters.avatar">
        </div>
      </div>
      <div class="user-name">
        {{ $store.getters.name }}
      </div>
      <div class="user-dept">
        {{ getDeptName($store.getters.deptId) }}
      </div>
      <div class="user-study">
        <div class="user-item">
          <div class="u-info-learn" style="cursor:pointer;">
            <em>{{ hours }}h</em>
            <span>2025学时</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hours: 0,
    }
  },
}
</script>

<style lang="scss" scoped>
.head-bg {
  background: url('~@/assets/images/temp1.png') no-repeat center top #000;
  background-size: cover;
  height: 100px;

  .user-info {
    display: flex;
    position: relative;
    width: 1200px;
    margin: 0 auto;

    .user-pic {
      float: left;
      width: 148px;
      height: 148px;

      .user-pic-bg {
        border: 4px solid #fff;
        box-shadow: 0 4px 8px 0 rgba(7, 17, 27, .1);
        width: 120px;
        height: 120px;
        position: relative;
        border-radius: 50%;
        background: #fff;
        top: 24px;

        img {
          text-align: center;
          width: 115px;
          height: 115px;
          border-radius: 50%;
        }
      }
    }

    .user-name {
      font-weight: 600;
      text-align: left;
      font-size: 24px;
      color: #fff;
      line-height: 28px;
      margin-top: 48px;
    }

    .user-dept {
      font-weight: 600;
      text-align: left;
      font-size: 16px;
      color: #ebe7e7;
      font-family: 'puhuiti';
      line-height: 28px;
      margin-top: 52px;
      margin-left:20px;
    }

    .user-study {
      position: absolute;
      top: 31px;
      right: 185px;
      min-width: 200px;
      text-align: right;

      .user-item {
        line-height: 48px;
        vertical-align: middle;
        height: 48px;
        float: left;

        em {
          display: block;
          text-align: center;
          font-weight: 700;
          font-size: 24px;
          color: rgba(255, 255, 255, .8);
          line-height: 28px;
        }

        span {
          display: block;
          text-align: center;
          font-size: 14px;
          color: rgba(255, 255, 255, .8);
          line-height: 20px;
          margin-top: 4px;
        }
      }
    }
  }

}
</style>