ccsens_fe
/
check-work
forked from TALL/check-work
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

增加工资详情页

master
xuesinan 4 years ago
parent
112847e2cc
commit
94b1bcd0a2
2 changed files with 271 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/router/index.js
  2. 265
      src/views/Salary/Salary.vue

7
src/router/index.js
View File

@ -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({

265
src/views/Salary/Salary.vue
View File

@ -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>
Write Preview
Loading…
Cancel
Save