员工工资信息完善

src/router/index.js

@@ -10,25 +10,25 @@ const routes = [
     path: '/',
     name: 'Home',
     component: Home,
-    meta: {
+    meta: { title: '考勤' },
-      title: '考勤',
-    },
   },
   {
     path: '/salary',
     name: 'salary',
     component: () => import('views/Salary/Salary.vue'),
-    meta: {
+    meta: { title: '工资表' },
-      title: '工资表',
-    },
   },
   {
     path: '/salary-summary',
     name: 'salary-summary',
     component: () => import('views/SalarySummary/SalarySummary.vue'),
-    meta: {
+    meta: { title: '工资汇总' },
-      title: '工资汇总',
+  },
-    },
+  {
+    path: '/staff-info',
+    name: 'staff-info',
+    component: () => import('views/StaffInfo/StaffInfo.vue'),
+    meta: { title: '员工信息完善' },
   },
 ];
 

src/views/SalarySummary/SalarySummary.vue

@@ -408,8 +408,4 @@ export default {
 .color-gray {
   color: #929292;
 }
-
-/deep/ .ant-modal {
-  top: calc(~'50vh - 130px');
-}
 </style>

src/views/StaffInfo/StaffInfo.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="staff-detail">
+    <div class="staff-flex white">
+      <div class="flex-title px-4 h-48 flex justify-between items-center border-b">个人信息</div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>姓名</div>
+        <div>张三</div>
+      </div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>性别</div>
+        <div>女</div>
+      </div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>年龄</div>
+        <div>20</div>
+      </div>
+    </div>
+
+    <div class="staff-flex mt-2 white">
+      <div class="flex-title px-4 h-48 flex justify-between items-center border-b">岗位信息</div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>部门</div>
+        <div>软件部</div>
+      </div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>职务</div>
+        <div>项目负责人</div>
+      </div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>入职时间</div>
+        <div>2021-10-20</div>
+      </div>
+    </div>
+
+    <div class="staff-flex mt-2 white">
+      <div class="flex-title px-4 h-48 flex justify-between items-center border-b">薪资信息</div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>固定工资</div>
+        <div>
+          <a-input class="flex-input text-right" placeholder="请完善信息" type="number" v-model="fixed_salary" @change="onChange" />
+        </div>
+      </div>
+      <div class="flex-con px-4 h-48 flex justify-between items-center border-b">
+        <div>期权置换</div>
+        <div>
+          <a-input class="flex-input text-right" placeholder="请完善信息" type="number" v-model="option_salary" @change="onChange" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      fixed_salary: null, // 固定工资
+      option_salary: '', // 期权
+    };
+  },
+
+  methods: {
+    onChange(e) {
+      console.log(e);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.staff-detail {
+  width: 100%;
+  min-height: 100vh;
+  padding-bottom: 70px;
+  background: #f3f3f3;
+}
+
+.h-48 {
+  height: 48px;
+}
+
+.flex-title {
+  color: #595959;
+  font-weight: bold;
+}
+
+.flex-con {
+  color: #595959;
+}
+
+.flex-input {
+  padding: 0;
+  border: none;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+</style>