From 94b1bcd0a2e8e993285c10fca4f4c979b4aa3498 Mon Sep 17 00:00:00 2001
From: xuesinan <1404152492@qq.com>
Date: Tue, 9 Nov 2021 16:52:22 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=B7=A5=E8=B5=84=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js         |   7 +-
 src/views/Salary/Salary.vue | 265 ++++++++++++++++++++++++++++++++++++
 2 files changed, 271 insertions(+), 1 deletion(-)
 create mode 100644 src/views/Salary/Salary.vue

diff --git a/src/router/index.js b/src/router/index.js
index 9738e40..223f4b0 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,6 @@
+import Home from 'views/FirstPage/FirstPage.vue';
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import Home from 'views/FirstPage/FirstPage.vue';
 
 Vue.use(VueRouter);
 
@@ -11,6 +11,11 @@ const routes = [
     name: 'Home',
     component: Home,
   },
+  {
+    path: '/salary',
+    name: 'salary',
+    component: () => import('views/Salary/Salary.vue'),
+  },
 ];
 
 const router = new VueRouter({
diff --git a/src/views/Salary/Salary.vue b/src/views/Salary/Salary.vue
new file mode 100644
index 0000000..059db46
--- /dev/null
+++ b/src/views/Salary/Salary.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="salary-detail">
+    <div class="salary-all text-center flex flex-col justify-center">
+      <div class="salary-num white--text">5000.00</div>
+      <div class="salary-title font-12">实发金额（元）</div>
+    </div>
+
+    <div class="salary-menu">
+      <div class="one-level mt-3 px-4 white">
+        <div class="one-level-box flex justify-between items-center h-48 border-b">
+          <div>固定工资</div>
+          <div class="flex items-center">
+            <span>5000</span>
+            <!-- <a-icon class="icon" type="right" /> -->
+            <a-icon class="icon" type="down" />
+          </div>
+        </div>
+
+        <div class="two-level">
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>基本工资</div>
+            <div class="flex items-center">
+              <span>4000</span>
+              <!-- <a-icon class="icon" type="right" /> -->
+              <a-icon class="icon" type="down" />
+            </div>
+          </div>
+
+          <div class="three-level px-4">
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>应出勤天数</div>
+              <div class="flex items-center"><span>22</span></div>
+            </div>
+
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>实际出勤天数</div>
+              <div class="flex items-center"><span>18</span></div>
+            </div>
+
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>弹性天数</div>
+              <div class="flex items-center"><span>2</span></div>
+            </div>
+
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>请假天数</div>
+              <div class="flex items-center"><span>2</span></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="two-level">
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>岗位工资</div>
+            <div class="flex items-center">
+              <span>500</span>
+              <a-icon class="icon" type="right" />
+              <!-- <a-icon class="icon" type="down" /> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="two-level">
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>工龄工资</div>
+            <div class="flex items-center">
+              <span>500</span>
+              <a-icon class="icon" type="right" />
+              <!-- <a-icon class="icon" type="down" /> -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="one-level mt-3 px-4 white">
+        <div class="one-level-box flex justify-between items-center h-48 border-b">
+          <div>固定工资</div>
+          <div class="flex items-center">
+            <span>5000</span>
+            <!-- <a-icon class="icon" type="right" /> -->
+            <a-icon class="icon" type="down" />
+          </div>
+        </div>
+
+        <div class="two-level">
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>基本工资</div>
+            <div class="flex items-center">
+              <span>4000</span>
+              <!-- <a-icon class="icon" type="right" /> -->
+              <a-icon class="icon" type="down" />
+            </div>
+          </div>
+
+          <div class="three-level px-4">
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>应出勤天数</div>
+              <div class="flex items-center"><span>22</span></div>
+            </div>
+
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>实际出勤天数</div>
+              <div class="flex items-center"><span>18</span></div>
+            </div>
+
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>弹性天数</div>
+              <div class="flex items-center"><span>2</span></div>
+            </div>
+
+            <div class="three-level-box flex justify-between items-center h-48">
+              <div>请假天数</div>
+              <div class="flex items-center"><span>2</span></div>
+            </div>
+          </div>
+        </div>
+
+        <div class="two-level">
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>岗位工资</div>
+            <div class="flex items-center">
+              <span>500</span>
+              <a-icon class="icon" type="right" />
+              <!-- <a-icon class="icon" type="down" /> -->
+            </div>
+          </div>
+        </div>
+
+        <div class="two-level">
+          <div class="two-level-box flex justify-between items-center h-48 border-b">
+            <div>工龄工资</div>
+            <div class="flex items-center">
+              <span>500</span>
+              <a-icon class="icon" type="right" />
+              <!-- <a-icon class="icon" type="down" /> -->
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="one-level mt-3 px-4 white">
+        <div class="one-level-box flex justify-between items-center h-48 border-b">
+          <div>绩效收入</div>
+          <div class="flex items-center">
+            <span>1000</span>
+            <a-icon class="icon" type="right" />
+            <!-- <a-icon class="icon" type="down" /> -->
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="action mt-3 border-t px-6 w-full white flex justify-between items-center">
+      <a-button @click="showModal">对工资有疑问</a-button>
+      <a-button>确认</a-button>
+    </div>
+
+    <a-modal title="对工资有疑问" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
+      <textarea class="w-full outline-none" v-model="ModalText" placeholder="请输入问题" />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      ModalText: '',
+      visible: false,
+      confirmLoading: false,
+    };
+  },
+
+  methods: {
+    showModal() {
+      this.visible = true;
+    },
+
+    handleOk(e) {
+      console.log(this.ModalText);
+      this.confirmLoading = true;
+      setTimeout(() => {
+        this.visible = false;
+        this.confirmLoading = false;
+      }, 2000);
+    },
+
+    handleCancel(e) {
+      this.visible = false;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.salary-detail {
+  width: 100%;
+  min-height: 100vh;
+  padding-bottom: 70px;
+  background: #f3f3f3;
+}
+
+.salary-all {
+  height: 160px;
+  background: #40a9ff;
+
+  .salary-num {
+    font-size: 40px;
+  }
+
+  .salary-title {
+    color: #f3f3f3;
+  }
+}
+
+.h-48 {
+  height: 48px;
+}
+
+.one-level-box {
+  color: #262626;
+  font-weight: bold;
+}
+
+.two-level-box {
+  color: #595959;
+}
+
+.three-level-box {
+  color: #929292;
+}
+
+.icon {
+  margin-left: 5px;
+  color: #969799;
+  font-size: 12px;
+}
+
+.action {
+  position: fixed;
+  bottom: 0;
+  height: 50px;
+
+  button {
+    width: 47%;
+    height: 36px;
+    font-size: 16px;
+
+    &:first-child {
+      color: #929292;
+      border: none;
+    }
+
+    &:last-child {
+      background: #1890ff;
+      border: #1890ff;
+      color: #fff;
+    }
+  }
+}
+
+/deep/ .ant-modal {
+  top: calc(~'50vh - 130px');
+}
+</style>