EmploymentSite/h5app/src/views/pages/wxMessage/jobUserInfo.vue

<template>
  <ion-content>
    <div class="user_info_title">
      您好！惠州就业驿站给您推荐《java工程师》的简历，请查阅！
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_info_img">
        <div class="user_img">
          <img class="img-user" src="@/assets/icon/icon-user-2x.png"
               onerror="this.src='@/assets/icon/icon-user-2x.png'"/>
        </div>
        <div class="user_text">
          <h4>张三</h4>
          <p>java工程师</p>
        </div>
      </div>
      <div class="user_info_flex">
        <div>
          <h6>男</h6>
          <p>性别</p>
        </div>
        <div>
          <h6>24</h6>
          <p>年龄</p>
        </div>
        <div>
          <h6>本科</h6>
          <p>学历</p>
        </div>
        <div>
          <h6>3</h6>
          <p>经验</p>
        </div>
      </div>
      <div class="user_info_text">
        <span>待业，惠州市惠城区xxx街道</span>
      </div>
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_panel_title">
        <h6>联系方式</h6>
      </div>
      <div class="user_info_label user_info_border">
        <ion-label>电话</ion-label>
        <ion-text>123456789</ion-text>
      </div>
      <div class="user_info_label">
        <ion-label>邮箱</ion-label>
        <ion-text>张xx</ion-text>
      </div>
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_panel_title">
        <h6>教育经历</h6>
      </div>
      <div class="user_info_label2">
        <h6>惠州学院</h6>
        <p>软件开发 | 2021毕业</p>
      </div>
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_panel_title">
        <h6>工作经历</h6>
      </div>
      <div class="user_info_label2">
        <h6>惠州市xx科技有限公司</h6>
        <p>java开发 | 2019-01 ~ 2020-01</p>
      </div>
      <div class="user_info_label2">
        <h6>广州市xx科技有限公司</h6>
        <p>java开发 | 2019-01 ~ 2020-01</p>
      </div>
    </div>
    <div class="user_panel user_baseinfo">
      <div class="user_panel_title">
        <h6>个人技能</h6>
      </div>
      <div class="user_info_label2">
        <p>1、熟悉xxxx</p>
        <p>2、熟悉xxxx</p>
        <p>3、熟悉xxxx</p>
        <p>4、熟悉xxxx</p>
      </div>
    </div>
  </ion-content>
</template>
<style lang="less">
@border_color: #f1f5f7;
@p_color: #8c8f93;

.user_info_title {
  padding: 20px 20px 10px 20px;
  text-indent: 2em;
}

.user_panel {
  border: 1px solid @border_color;
  border-radius: 10px;
  margin: 10px;

  .user_panel_title {
    padding: 12px 10px 10px 10px;
    margin: 0 10px;
    border-bottom: 1px solid @border_color;

    h6 {
      margin: 0px;
    }
  }
}

.user_baseinfo {
  .user_info_img {
    display: flex;
    align-items: center;
    padding: 10px;
    border-radius: 10px;

    .user_text {
      padding-left: 20px;

      p {
        color: @p_color;
        font-size: 14px;
      }
    }
  }

  .user_info_flex {
    display: flex;
    justify-content: space-around;
    align-items: center;
    vertical-align: middle;
    padding: 10px;
    margin: 0 10px;
    border-top: 1px solid @border_color;
    border-bottom: 1px solid @border_color;

    div {
      text-align: center;

      h6 {
        padding: 5px 0px;
        margin: 0px;
      }

      p {
        font-size: 14px;
        color: @p_color;
        padding: 5px 0px;
        margin: 0px;
      }
    }
  }

  .user_info_text {
    margin: 13px 20px;
    color: @p_color;
  }

  .user_info_label {
    display: flex;
    justify-content: space-between;
    vertical-align: middle;
    padding: 10px;
    margin: 0 10px;

    ion-label {
      min-width: 80px;
      padding: 0 5px 0 0;
    }

    ion-text {
      color: @p_color;
    }
  }

  .user_info_label2 {
    padding: 0 10px;
    margin: 0 10px;

    p {
      color: @p_color;
      font-size: 14px;
    }
  }

  .user_info_border {
    border-bottom: 1px solid @border_color;
  }
}
</style>