<!--  -->
<template>
<div class='tab4-4-1'>
  <div class="left">
      <div class="el-icon-arrow-left" @click="$router.push('/tab4-4')"></div>
      <img src="../../assets/img/demo.png" alt="">
      <p>张国荣</p>
  </div>
  <div class="right">
    <div>
    <span>基本信息</span>
    </div>
    <p>性别：男</p>
    <p>政治面貌：党员</p>
    <p>任职职位：财政部主任</p>
    <p>任期：2005年10月 - 2009年12月</p>
    <div>
    <span>领导简介</span>
    </div>
    <p>领导简介</p>
  </div>
</div>
</template>

<script>
export default {
  name: 'tab4-4-1',
  components: {},
  data () {
    // 这里存放数据
    return {

    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {

  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='less' scoped>
.tab4-4-1{
  display: flex;
  min-width: 1000px;
  height: 100%;
  padding: 40px 0 0 100px;
  color: #707070;
  .left{
    margin-right: 100px;
    padding-top: 50px;
    width: 200px;
    height: auto;
    &>div {
      margin-left: -12px;
      cursor: pointer;
      font-size: 50px;
      margin-bottom: 50px;
    }
    &>img{
      width: 200px;
      height: 230px;
      object-fit: cover;
    }
    &>P {
      margin-top: 8px;
      text-align: center;
    }
  }
  .right{
    flex: 1;
    padding-top: 150px;
    &>div {
      margin-top: 30px;
      width: 1000px;
      border-bottom: 1px solid #AFAFAF;
      &>span{
        transform: translateY(2px);
        width: 105px;
        border-bottom: 4px solid #b9412e;
        display: block;
        height: 50px;
        font-size: 26px;
        font-weight: 700;
        color: #b9412e;
      }
    }
    &>p {
      margin: 15px 0;
    }
  }
}

</style>
