web-test/src/layout/direct/exportDetail.vue

<template>
  <div id="exportDetail">
    <el-row>
      <el-col :span="24" class="top">
        <el-col :span="7" class="image">
          <el-image :src="exportInfo.imgpath"></el-image>
        </el-col>
        <el-col :span="17" class="info">
          <p>
            <span>姓名:{{ exportInfo.name }}</span>
            <span>性別:{{ exportInfo.gender }}</span>
          </p>
          <p>
            <span>民族:{{ exportInfo.nation }}</span>
            <span>出生年月:{{ exportInfo.birth }}</span>
          </p>
          <p>
            <span>毕业院校:{{ exportInfo.school }}</span>
            <span>所学专业:{{ exportInfo.major_studied }}</span>
          </p>
          <p>
            <span>学历:{{ exportInfo.eduback }}</span>
            <span>学位:{{ exportInfo.degree }}</span>
          </p>
          <p>
            <span>电话:{{ exportInfo.tel }}</span>
            <span>邮箱:{{ exportInfo.phone }}</span>
          </p>
        </el-col>
        <el-col :span="24" class="down">
          <div>
            <span>职务:{{ exportInfo.position }}</span>
            <span>从事专业:{{ exportInfo.professional }}</span>
          </div>
          <div>
            <span>当前住址:{{ exportInfo.addr }}</span>
          </div>
          <div>
            <p>可供咨询领域:</p>
            <p>{{ exportInfo.field }}</p>
          </div>
          <div>
            <p>工作简介:</p>
            <p class="profile" v-if="scope != ''">{{ exportInfo.job_profile }}</p>
            <p class="profile1" v-else>{{ exportInfo.job_profile }}</p>
            <el-button size="mini" v-if="exportInfo.job_profile != null">
              <span v-if="scope != ''" @click="scopeMore()">更多</span>
              <span v-else @click="scopeMore1()">收起</span>
            </el-button>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'exportDetail',
  props: {
    exportInfo: null,
  },
  components: {},
  data: () => ({
    scope: '123',
  }),
  created() {},
  computed: {},
  methods: {
    // 更多
    scopeMore() {
      this.scope = '';
    },
    // 收起
    scopeMore1() {
      this.scope = '123';
    },
  },
};
</script>

<style lang="less" scoped>
.top {
  .image {
    box-shadow: 0 0 3px #ccc;
  }
  .info {
    padding: 0 15px;
    p {
      font-size: 18px;
      color: #000;
      padding: 0 0 20px 0;
      span {
        display: inline-block;
        width: 50%;
      }
    }
    p:first-child {
      padding: 20px 0;
    }
    p:first-child span:first-child {
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.down {
  margin: 30px 0 0 0;
  border-top: 1px dashed red;
  padding: 20px;
  div {
    padding: 0 0 15px 0;
    font-size: 18px;
    p {
      padding: 0 0 10px 0;
    }
    span {
      display: inline-block;
      width: 50%;
    }
    p:last-child {
      text-indent: 1rem;
    }
  }
  div:last-child .profile {
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 6;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    padding: 0 0 0px 0;
    text-indent: 2rem;
  }
  div:last-child .profile1 {
    overflow: none;
    text-indent: 2rem;
  }
  div:last-child .el-button {
    float: right;
  }
}
</style>