OA/pages/views/personal_center_two.vue

<template>
	<!-- 个人中心 2 -->
	<view>
		<!-- 绩效考核 -->
		<view class="assessment_box">
			<view class="title_box">
				<text class="line"></text>
				<text>绩效考核</text>
			</view>
			<view class="detail_box">
				<view class="assessment">
					<view class="num">{{salaryInfo.cs_salary}}</view>
					<view class="tip">绩效考核</view>
				</view>
				<view class="jian">-</view>
				<view class="assessment">
					<view class="num">{{salaryInfo.work_deduction_money}}</view>
					<view class="tip">延期任务扣除</view>
				</view>
				<view class="jian">*</view>
				<view class="assessment">
					<view class="num">{{salaryInfo.rw}}</view>
					<view class="tip">任务完成率</view>
				</view>
				<view class="jian">=</view>
				<view class="assessment last_box">
					<view class="num last">{{salaryInfo.salary}}</view>
				</view>
			</view>
			<view class="deduction_box">
				<text class="deduction_info">扣除详情:</text>
				<text>无</text>
			</view>
		</view>
		<!-- 部门奖金 -->
		<view class="assessment_box">
			<view class="title_box">
				<text class="line"></text>
				<text>部门奖金</text>
			</view>
			<view class="detail_box bonus">
				<view class="assessment">
					<view class="num1 num">{{salaryInfo.cs_department_money}}</view>
					<view class="tip">部门奖金</view>
				</view>
				<view class="jian">-</view>
				<view class="assessment">
					<view class="num1 num">{{salaryInfo.project}}</view>
					<view class="tip">项目完成率</view>
				</view>
				<view class="jian">=</view>
				<view class="assessment last_box">
					<view class="num1 num last">{{salaryInfo.department_money}}</view>
				</view>
			</view>
			<view class="deduction_box">
				<text>部门计划完成率必须大于50%</text>
			</view>
		</view>
		<!-- 公司奖金 -->
		<view class="com_box">
			<view class="company">
				<text class="line"></text>
				<text>公司奖金</text>
			</view>
			<view class="company_bonus">
				<view class="" class="bonus">{{salaryInfo.company_money}}</view>
				<view class="com_tip">公司目标低于百分之百无公司奖金</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSalaryDeatilsApi
	} from '@/api/oa.js'
	export default {
		data() {
			return {
				salaryInfo: {}
			};
		},
		onLoad() {},
		onShow() {
			this.getSalaryList()
		},
		methods: {
			//获取工资详情
			async getSalaryList() {
				const res = await getSalaryDeatilsApi()
				console.log(res);
				this.salaryInfo = res
			}
		}
	}
</script>

<style lang="scss" scoped>
	.line {
		display: inline-block;
		width: 4rpx;
		height: 33rpx;
		background: #3274F9;
		border-radius: 2rpx;
		margin-right: 11rpx;
	}

	.assessment_box {
		color: #333333;
		font-weight: 500;
		font-size: 32rpx;
		width: 750rpx;
		height: 335rpx;
		background: #FFFFFF;
		padding: 0 28rpx;
		margin-bottom: 28rpx;

		.title_box {
			width: 100%;
			height: 77rpx;
			display: flex;
			align-items: center;


		}

		.detail_box {
			padding-top: 28rpx;
			width: 100%;

			.assessment {
				display: inline-block;
				text-align: center;

				.num {
					width: 158rpx;
					height: 81rpx;
					line-height: 81rpx;
					background: #F3F4F8;
					border-radius: 7rpx;
					display: inline-block;
				}

				.num1 {
					width: 212rpx;
				}

				.tip {
					height: 35rpx;
					color: #666666;
					font-size: 25rpx;
				}

			}

			.jian {
				font-weight: 500;
				font-size: 32rpx;
				display: inline-block;
				transform: translateY(-50rpx);
			}

			.last_box {
				color: #3274F9;
				display: inline-block;
				transform: translateY(-50rpx);
			}

		}

		.deduction_box {
			margin-top: 31.54rpx;
			font-weight: 500;
			font-size: 28rpx;

			.deduction_info {
				font-size: 32rpx;
			}
		}
	}

	.com_box {
		width: 750rpx;
		height: 280rpx;

		.company {
			padding: 0 28rpx;
			width: 750rpx;
			height: 77rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			font-size: 32rpx;
		}

		.company_bonus {
			width: 750rpx;
			height: 203rpx;
			background: #FFFFFF;
			padding: 0 28rpx;
			padding-top: 28rpx;

			.bonus {
				width: 694rpx;
				height: 81rpx;
				line-height: 81rpx;
				padding-left: 23rpx;
				background: #F3F4F8;
				border-radius: 7rpx;
			}

			.com_tip {
				margin-top: 28rpx;
				font-size: 28rpx;
			}
		}
	}
</style>