RudongPC/src/views/ZhongdianRen/Xinxiguanli/zhongdianxiangqing/index.vue

<template>
  <div class="renyuan-box">
    <div class="box-top">
      <div class="enterprise-header">
        <span class="dataCloudMap-birght"></span>
        <div class="enterprise-header-title">基本信息</div>
      </div>
      <el-row class="base-info-box">
        <el-col :span="5" style="margin-right: 40px;">
          <div class="img-box">
            <span>人员照片：</span>
            <img src="@/assets/images/Nanjuese.jpg" alt="">
          </div>
        </el-col>
        <el-col :span="19">
          <el-col :span="12">
            <div class="info-items">
              <div class="item">
                <div>人员姓名：</div>
                <span>张三</span>
              </div>
              <div class="item">
                <div>身份证号：</div>
                <span>364xxxxxxxxxxxxxxx</span>
              </div>
            </div>
            <div class="info-cause">
              <div>监控原因：</div>
              <div class="specific-cause">重点监控对象，曾有违法行为</div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="info-items">
              <div class="item">
                <div>性别：</div>
                <span>男</span>
              </div>
              <div class="item">
                <div>联系方式：</div>
                <span>139xxxx5657</span>
              </div>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
    <el-row class="base-info-bootm-box">
      <el-tabs v-model="activeName" @tab-click="handleClick" style="color: #edeef0">
        <el-tab-pane label="详细信息" name="first" />
        <el-tab-pane label="人脸库" name="second" />
        <el-tab-pane label="轨迹回放" name="third" />
        <el-tab-pane label="边界预警" name="four" />
      </el-tabs>
      <div class="bottom-box-component">
        <tab-one v-if="activeName == 'first'"></tab-one>
        <tab-two v-if="activeName == 'second'"></tab-two>
        <tab-three v-if="activeName == 'third'"></tab-three>
        <tab-four v-if="activeName == 'four'"></tab-four>
      </div>
    </el-row>
  </div>
</template>

<script>
import { tabOne, tabTwo, tabThree, tabFour, tabFive, } from "./components"
export default {
  name: '',
  components: {
    tabOne,
    tabTwo,
    tabThree,
    tabFour,
    tabFive,
  },
  data() {
    return {
      activeName: "first",
    }
  },
  mounted() { },
  methods: {
    handleClick(e) {
      if (this.activeName == "first") {
      } else if (this.activeName == "second") {
      } else if (this.activeName == "third") {
      } else if (this.activeName == "four") {
      }
    },
  },
}
</script>
<style scoped lang='scss'>
.renyuan-box {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  .box-top {
    background-color: #fff;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 20px;
  }

  .enterprise-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .dataCloudMap-birght {
      width: 6px;
      height: 18px;
      background: #0086FF;
      box-shadow: 3px 0 3px 0px #0086FF;
      border-radius: 5px 5px 5px 5px;
    }

    .enterprise-header-title {
      font-family: AlibabaPuHuiTiB;
      margin: 0 10px;
      font-weight: bold;
      font-size: 18px;
      color: #333333;
    }
  }

  .base-info-box {
    font-family: "Source Han Sans CN-Regular";
    margin: 20px 0;
    padding: 0px 10px;
    display: flex;

    .img-box {
      font-size: 16px;
      display: flex;

      span {
        width: 80px;
      }

      img {
        // flex: 1;
        height: 150px;
      }
    }

    .info-items {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 30px;

      .item {
        display: flex;
        align-items: center;
        font-family: "Source Han Sans CN-Regular";
        font-size: 16px;


        span {
          flex: 1;
        }
      }
    }

    .info-cause {
      display: flex;
      align-items: center;
      margin-top: 20px;
      font-size: 16px;

      div {}

      .specific-cause {
        font-family: "Source Han Sans CN-Regular";
        font-size: 16px;
        border-radius: 3px;
        border: 1px solid #ccc;
        padding: 5px 10px;
      }
    }
  }

  .base-info-bootm-box {
    flex: 1;
    background-color: #fff;
    padding: 10px 0;
    border-radius: 5px;
    overflow: auto;

    ::v-deep .el-tabs {
      .el-tabs__item {
        width: 150px;
        font-weight: bold;
        text-align: center;
      }
    }
    .bottom-box-component {
      height: calc(100% - 65px);
    }
  }
}
</style>