261 lines
5.8 KiB
Vue
261 lines
5.8 KiB
Vue
<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>
|