hzd/salaryAccounting
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

4.18

Browse Source
This commit is contained in:
hezhidong
2025-04-18 18:01:03 +08:00
parent 9103270895
commit 44cba1950d
10 changed files with 1327 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/salaryDetails/salaryDetails.vue
+260
View File
@@ -0,0 +1,260 @@
<template>
<view class="salary-details">
<!-- 顶部蓝色卡片 -->
<view class="salary-card">
<text class="date">2025年04月实发工资</text>
<text class="amount">3000.00</text>
<text class="tips">感谢您为公司的付出，辛苦了</text>
</view>
<!-- 收入项目 -->
<view class="salary-section">
<view class="section-title">收入项目</view>
<view class="salary-items">
<view class="item">
<text class="label">基本工资</text>
<text class="value">2500</text>
</view>
<view class="item">
<text class="label">年度绩效奖金</text>
<text class="value">500</text>
</view>
<view class="item">
<text class="label">月度绩效奖金</text>
<text class="value">500</text>
</view>
<view class="item">
<text class="label">其他奖金</text>
<text class="value">1000</text>
</view>
<view class="item">
<text class="label">总经理补贴</text>
<text class="value">0</text>
</view>
<view class="item">
<text class="label">交通补贴</text>
<text class="value">50</text>
</view>
<view class="item">
<text class="label">其他补贴</text>
<text class="value">0</text>
</view>
<view class="item">
<text class="label">工龄工资</text>
<text class="value">50</text>
</view>
<view class="item">
<text class="label">加班工资</text>
<text class="value">0</text>
</view>
<view class="item total">
<text class="label">应发小计</text>
<text class="value highlight">5000</text>
</view>
</view>
</view>
<!-- 扣除项目 -->
<view class="salary-section">
<view class="section-title">扣除项目</view>
<view class="salary-items">
<view class="item">
<text class="label">年度绩效奖金</text>
<text class="value">2500</text>
</view>
<view class="item">
<text class="label">月度绩效奖金</text>
<text class="value">500</text>
</view>
<view class="item">
<text class="label">事假</text>
<text class="value">500</text>
</view>
<view class="item">
<text class="label">病假</text>
<text class="value">1000</text>
</view>
<view class="item">
<text class="label">婚假、丧假、陪产假</text>
<text class="value">0</text>
</view>
<view class="item">
<text class="label">迟到、早退</text>
<text class="value">50</text>
</view>
<view class="item">
<text class="label">签到、签退</text>
<text class="value">0</text>
</view>
<view class="item">
<text class="label">缺卡</text>
<text class="value">50</text>
</view>
<view class="item">
<text class="label">旷工</text>
<text class="value">0</text>
</view>
<view class="item">
<text class="label">违纪</text>
<text class="value">0</text>
</view>
</view>
</view>
<!-- 福利 -->
<view class="salary-section">
<view class="section-title">福利</view>
<view class="salary-items">
<view class="item">
<text class="label">基本养老</text>
<text class="value">2500</text>
</view>
<view class="item">
<text class="label">失业保险</text>
<text class="value">500</text>
</view>
<view class="item">
<text class="label">基本医疗</text>
<text class="value">500</text>
</view>
<view class="item">
<text class="label">大额医疗</text>
<text class="value">1000</text>
</view>
<view class="item">
<text class="label">住房公积金</text>
<text class="value">0</text>
</view>
</view>
</view>
<!-- 其他 -->
<view class="salary-section">
<view class="section-title">其他</view>
<view class="salary-items">
<view class="item">
<text class="label">其他扣款</text>
<text class="value">2500</text>
</view>
<view class="item">
<text class="label">个税</text>
<text class="value">500</text>
</view>
<view class="item total">
<text class="label">扣款小计</text>
<text class="value highlight red">2000</text>
</view>
</view>
</view>
<!-- 备注 -->
<view class="salary-section"><view>备注</view></view>
</view>
</template>
<script>
export default {
data() {
return {};
},
created() {
this.$setNavigationBar('工资条');
}
};
</script>
<style lang="scss" scoped>
.salary-details {
min-height: 100vh;
background-color: #f8f9fa;
padding-bottom: 40rpx;
.salary-card {
margin: 0 auto;
box-sizing: border-box;
width: 690rpx;
height: 326rpx;
margin-top: 30rpx;
background: #0078ff;
padding: 54rpx 30rpx 42rpx 30rpx;
display: flex;
flex-direction: column;
align-items: center;
color: #ffffff;
border-radius: 20rpx;
.date {
font-size: 32rpx;
margin-bottom: 20rpx;
}
.amount {
font-size: 72rpx;
font-weight: 500;
margin-bottom: 30rpx;
}
.tips {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 24rpx;
color: rgba(255, 255, 255, 0.6);
}
}
.salary-section {
background: #ffffff;
margin: 20rpx 30rpx 0;
border-radius: 12rpx;
padding: 30rpx;
.section-title {
font-size: 32rpx;
color: #111827;
font-weight: 500;
margin-bottom: 30rpx;
}
.salary-items {
.item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
&:last-child {
margin-bottom: 0;
}
.label {
font-size: 28rpx;
color: #4b5563;
}
.value {
font-size: 28rpx;
color: #4b5563;
}
&.total {
margin-top: 20rpx;
padding-top: 20rpx;
border-top: 2rpx solid #e5e7eb;
.label {
font-weight: 500;
}
.value.highlight {
font-weight: 700;
font-size: 32rpx;
color: #0078ff;
&.red {
color: #ff4d4f;
}
}
}
}
}
}
}
</style>