web-test/src/layout/personnel/rightcontrencai.vue

<template>
  <div id="rightcont">
    <el-col class="zhengce">
      <el-col class="tittop">
        <el-col class="tittxt">专家详情</el-col>
      </el-col>
      <el-col class="titleimage">
        <el-col :span="24">
          <el-col :span="8" class="bgcolor">
            <el-col class="images" :span="12">
              <el-image style="width:140px;height:140px" :src="policyInfo.imgpath"></el-image>
            </el-col>
            <el-col :span="12" class="bgcolorWenzi">
              <p class="name">名称:{{ policyInfo.name }}</p>
              <p>民族: {{ policyInfo.nation }}</p>
              <p>学历:{{ policyInfo.education }}</p>
              <p>电话:{{ policyInfo.phone }}</p>
              <p>邮箱:{{ policyInfo.email }}</p>
            </el-col>
          </el-col>
        </el-col>
      </el-col>

      <el-col class="date">
        更新时间：{{ policyInfo.meta && policyInfo.meta.createdAt ? new Date(policyInfo.meta.createdAt).toLocaleDateString() : '' || '' }}
      </el-col>
      <el-row class="info">
        <el-col :span="24" class="xiangxi">
          <el-col :span="24" class="infoTop">
            <span>详细信息</span>
          </el-col>
          <el-col :span="24">
            <el-col :span="12" class="mess"> <i class="el-icon-watch"></i>出生年月:{{ policyInfo.birth }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-s-custom"></i>证件类型:{{ policyInfo.cardtype }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-magic-stick"></i>身份证号:{{ policyInfo.cardnumber }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-s-help"></i>初级职称:{{ policyInfo.technical }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-pie-chart"></i>具体职称:{{ policyInfo.technical_actual }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-user"></i>职务:{{ policyInfo.position }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-office-building"></i>毕业院校:{{ policyInfo.school }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-user"></i>学历:{{ policyInfo.eduback }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-collection"></i>学位:{{ policyInfo.degree }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-user"></i>所学专业:{{ policyInfo.major_studied }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-collection"></i>从事专业:{{ policyInfo.professional }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-s-goods"></i>可供咨询领域:{{ policyInfo.field_py }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-collection"></i>论文论著:{{ policyInfo.paper }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-s-cooperation"></i>邮箱:{{ policyInfo.email }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-edit"></i>办公电话:{{ policyInfo.tel }} </el-col>
            <el-col :span="12" class="mess"><i class="el-icon-phone-outline"></i>手机号:{{ policyInfo.phone }}</el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-edit"></i>主持或参与项目情况:{{ policyInfo.project_profile }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-picture-outline-round"></i>主要学术成就及获奖情况:{{ policyInfo.achievement }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-edit"></i>领域拼音:{{ policyInfo.field_py }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-s-custom"></i>性别:{{ policyInfo.gender }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-edit-outline"></i>户口所在：{{ policyInfo.hukou }} </el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-edit"></i>当前住址：{{ policyInfo.addr }}</el-col>
            <el-col :span="12" class="mess"> <i class="el-icon-magic-stick"></i> 婚姻状况：{{ policyInfo.marital == 0 ? '已婚' : '未婚' }} </el-col>
            <el-col :span="24" class="mess"> <i class="el-icon-edit"></i>备注:{{ policyInfo.remark }} </el-col>
            <el-col :span="24" class="mess"> <i class="el-icon-edit"></i>业务工作简介:{{ policyInfo.job_profile }} </el-col>
          </el-col>
        </el-col>
      </el-row>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'rightcont',
  props: { policyInfo: null },
  components: {},
  data: () => ({}),
  created() {},
  computed: {},
  methods: {},
};
</script>

<style lang="less" scoped>
.zhengce {
  height: 1600px;
  padding: 20px;
  width: 99.6%;
  margin: 10px 0 10px 2px;
  box-shadow: 0 0 10px #2d64b3;
  background: #ffffff;
  overflow: hidden;
}

p {
  padding: 0;
  margin: 0;
}
.tittop {
  width: 100%;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #215299;
}
.tittxt {
  width: 135px;
  height: 60px;
  line-height: 60px;
  background: #215299;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-family: 'Microsoft Yahei';
}
.titleimage {
  margin: 20px 20px 0 20px;
  width: 1160px;
  height: 200px;
}
.bgcolor {
  width: 450px;
  height: 200px;
  background-color: #215299;
}
.images {
  text-align: center;
  padding: 28px 0;
}
.bgcolorWenzi {
  height: 200px;
  padding: 30px 0;
}
.bgcolorWenzi p {
  color: #fff;
  padding: 5px 0;
}
.titletop1 {
  width: 710px;
  height: 200px;
  background-color: #eeeeee;
  text-align: center;
}
.titletop1 .title {
  font-weight: bold;

  height: 60px;
  line-height: 60px;
  color: #215299;
  font-size: 24px;
}
.titletop1 .name {
  height: 50px;
  line-height: 50px;
  color: #215299;
  font-size: 24px;
}
.titletop1 .profession {
  height: 65px;
  line-height: 65px;
  text-align: center;
  color: #215299;
  font-size: 18px;
}
.date {
  height: 50px;
  line-height: 50px;
  text-align: right;
  padding: 0 50px 0 0;
}
.info {
  padding: 0 30px;
}
.xiangxi {
  height: 210px;
}
.jianjie {
  height: 280px;
}
.infoTop {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #215299;
  width: 110%;
}
.infoTop span {
  display: inline-block;
  height: 40px;
  background: #215299;
  padding: 0 20px;
  color: #fff;
}
.content {
  line-height: 30px;
  padding: 30px 0 30px 30px;
}
.content p {
  font-size: 16px;
  color: #666;
}
.mess {
  padding: 29px 20px;
  font-size: 16px;
  color: #666;
}
.mess i {
  padding: 0 10px 0 0;
}
</style>