完成人员页面的查看布局

src/views/person/components/Change.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        人事变动记录
+    </div>
+</template>
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/person/components/PersonInformation.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+        个人信息
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/person/components/PersonPicture.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="content-body">
+    <div class="content-side"></div>
+    <div class="content-main">
+      <div>
+        <div class="pp-half-block1">技能地图</div>
+        <div class="pp-half-block1">人才评价</div>
+      </div>
+
+      <div class="pp-block2">
+        <div class="pp-half-block2">
+          <p class="item-title-p">个人经历</p>
+          <div class="item-content-div" style="margin-right: 10px"></div>
+        </div>
+        <div class="pp-half-block2">
+          <p class="item-title-p">绩效</p>
+          <div class="item-content-div"></div>
+        </div>
+      </div>
+
+      <div class="pp-block2">
+        <div class="pp-half-block2">
+          <p class="item-title-p">个人经历</p>
+          <div class="item-content-div" style="margin-right: 10px"></div>
+        </div>
+        <div class="pp-half-block2">
+          <p class="item-title-p">绩效</p>
+          <div class="item-content-div"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+.content-body {
+  margin: 0 auto;
+  width: 100%;
+  overflow: auto;
+}
+
+.content-main {
+  /* background: #ccffff; */
+  margin-right: 210px;
+}
+
+.content-side {
+  width: 200px;
+  height: 1100px;
+  background: #ffcccc;
+  float: right;
+}
+
+.pp-half-block1 {
+  display: inline-block;
+  border: 1px #e4e7ed solid;
+  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
+  height: 200px;
+  width: 50%;
+}
+
+.pp-block2 {
+  margin-top: 10px;
+}
+
+.pp-half-block2 {
+  display: inline-block;
+  /* border: 1px #e4e7ed solid; */
+  /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
+  height: 200px;
+  width: 50%;
+}
+
+.item-title-p {
+  border-left: 4px solid #000;
+  padding-left: 10px;
+  font-weight: bold;
+}
+
+.item-content-div {
+  /* width: 100%; */
+  height: 80%;
+  border: 1px #e4e7ed solid;
+}
+</style>

src/views/person/components/WorkInformation.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>在职信息</div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/views/person/person.vue

@@ -1,20 +1,114 @@
 <template>
-    <div>
-        person
-    </div>
+  <el-container class="main-body">
+    <el-header height="150px" class="main-head">
+      <div class="person-pic">
+        <img
+          :src="getPicUrl"
+          alt="人员头像"
+          style="height: 130px; width: 130px"
+        />
+      </div>
+      <div class="basic-msg-box">
+        <p>
+          <span class="basic-msg-item">{{ personData.name }}</span>
+        </p>
+        <p>
+          <span class="basic-msg-item">{{ personData.sex }}</span>
+          <span class="basic-msg-item">{{ personData.age }}岁</span>
+          <span class="basic-msg-item">{{ personData.education }}</span>
+          <span class="basic-msg-item">{{
+            personData.political_identity
+          }}</span>
+        </p>
+        <p>
+          <span class="basic-msg-item">工号：{{ workData.person_id }}</span>
+          <span class="basic-msg-item">手机号：{{ personData.phone }}</span>
+        </p>
+      </div>
+    </el-header>
+    <el-tabs v-model="comName">
+      <el-tab-pane label="人才画像" name="ComPersonPicture"></el-tab-pane>
+      <el-tab-pane label="在职信息" name="ComWorkInformation"></el-tab-pane>
+      <el-tab-pane label="个人信息" name="ComPersonInformation"></el-tab-pane>
+      <el-tab-pane label="人事变动记录" name="ComChange"></el-tab-pane>
+    </el-tabs>
+
+    <component :is="comName"></component>
+  </el-container>
 </template>
 
 <script>
+import ComPersonPicture from "./components/PersonPicture.vue";
+import ComWorkInformation from "./components/WorkInformation.vue";
+import ComPersonInformation from "./components/PersonInformation.vue";
+import ComChange from "./components/Change.vue";
+
 export default {
-    name: 'person',
-    data() {
-        return {
-            
-        }
-    }
-}
+  name: "person",
+  components: {
+    ComPersonPicture,
+    ComWorkInformation,
+    ComPersonInformation,
+    ComChange,
+  },
+  data() {
+    return {
+      comName: "ComPersonPicture",
+      personData: {
+        age: 49,
+        education: "大学",
+        id_card: "422827197309031821",
+        major: "人力资源管理",
+        name: "杨秀芬",
+        nation: "苗族",
+        phone: "13986854131",
+        political_identity: "中共党员",
+        sex: "女",
+        working_date: "1994-05-01",
+        working_years: 28.24,
+      },
+      workData: {
+        person_id: "1242280311961615",
+        archives_unit: "恩施卷烟厂",
+        department: "厂办公室",
+        employer: "恩施卷烟厂",
+        employment_relationship: "在职",
+        job: "档案管理员",
+        team: "",
+        wage_relation_unit: "恩施卷烟厂",
+      },
+    };
+  },
+  computed: {
+    getPicUrl() {
+      return require("@/assets/images/" + this.personData.sex + ".png");
+    },
+  },
+};
 </script>
 
 <style scoped>
+.main-body {
+  width: 100%;
+  height: calc(100vh - 50px);
+  padding: 20px 20px 10px 20px;
+}
+
+.main-head {
+  padding: 0px;
+}
+
+.person-pic {
+  float: left;
+  margin-right: 20px;
+}
+
+.basic-msg-box {
+}
+
+.basic-msg-item {
+  margin-right: 20px;
+}
+
 
 </style>

vue.config.js

@@ -38,8 +38,8 @@ module.exports = {
     },
     proxy: {
       '/': {
-        // target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
-        target: 'http://192.168.31.102:8000',
+        target: 'http://127.0.0.1:4523/m1/1256020-0-default/',
+        // target: 'http://192.168.31.102:8000',
         changeOrigin: true,
         pathRewrite: {
         }