chongqing-web/src/views/portraitManagement/employeeProfile/indexNew.vue

<template>
  <Page>
    <div class="content">
      <div class="content-search">
        <SearchBar v-model:visible="visible" @search="searchHandler"/>
      </div>
      <div class="content-info">
        <Card title="个人基本信息"> </Card>
      </div>
      <div class="content-bottom">
        <div class="content-bottom-left">
          <Card title="个人基本信息">
            <div class="work-history">2020.1.1入职，司龄6年、开机年限5年，现任职班组长。</div>
          </Card>
          <Card title="个人基本信息"> </Card>
        </div>
        <div class="content-bottom-center">
          <Card title="个人基本信息"></Card>
        </div>
        <div class="content-bottom-right">
          <Card title="个人基本信息"></Card>
        </div>
      </div>
    </div>
  </Page>
</template>

<script setup>
import Page from '../components/page.vue'
import Card from '../components/card.vue'
import SearchBar from '../components/SearchBar.vue'
import { ref } from 'vue'
const visible = ref(false)
const searchHandler = () => {
  
}
</script>

<style lang="scss" scoped>

.content {
  height: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding: 15px;
  .content-search {}
  .content-info {
    height: 230px;
    & > * {
        height: 100%;
      }
  }
  .content-bottom {
    flex: 1;
    display: flex;
    column-gap: 15px;
    .content-bottom-left {
      width: 380px;
      display: flex;
      flex-direction: column;
      row-gap: 15px;
      & > *:nth-child(1) {
        flex: 1;
        .work-history {
          padding: 15px;
        }
      }
      & > *:nth-child(2) {
        flex: 1.6;
      }
    }
    .content-bottom-center {
      flex: 1;
      & > * {
        height: 100%;
      }
    }
    .content-bottom-right {
      width: 380px;
      & > * {
        height: 100%;
      }
    }
  }
}
</style>