warst/warst-h5/pages/home/oftenModular.vue

<template>
	<!--常用功能-->
	<view class="card-container">
		<view class="header">
			<image :src="icon" class="h-icon"></image>
			<text class="title">
				{{ title }}
			</text>
		</view>
		<view class="card-content">
			<view
				@click="$u.route('/pages/attendanceClock/index')"
				class="kqdk-bg card-item"
			>
				<image
					class="card-img clock-icon"
					src="@/static/images/home/kqdk.png"
				></image>
				<view class="kqdk-title c-title">考勤打卡</view>
			</view>

			<view class="bk-bg card-item" @click="goApproval('0')">
				<image
					class="card-img card-icon"
					src="@/static/images/home/bk.png"
				></image>
				<view class="bk-title c-title">补卡</view>
			</view>

			<view class="jia-bg card-item" @click="goApproval('3')">
				<image
					class="card-img leave-icon"
					src="@/static/images/home/jia.png"
				></image>
				<view class="jia-title c-title">请假</view>
			</view>

			<view class="jiaban-bg card-item" @click="goApproval('1')">
				<image
					class="card-img work-time-icon"
					src="@/static/images/home/jiaban.png"
				></image>
				<view class="jb-title c-title">加班</view>
			</view>

			<view class="chuchai-bg card-item" @click="goApproval('2')">
				<image
					class="card-img travel-icon"
					src="@/static/images/home/chuchai.png"
				></image>
				<view class="chuchai-title c-title">出差</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'oftenModular',
	props: {
		title: String,
		icon: String,
	},
	methods: {
		goApproval(type) {
			uni.$u.route('pages/approval/index', { type });
		},
	},
};
</script>

<style scoped lang="scss">
.card-container {
	position: relative;
	z-index: 1;
	background-color: #fff;
	border-radius: 6px;
	padding: 32rpx;

	.header {
		display: flex;
		align-items: center;
		.h-icon {
			width: 48rpx;
			height: 48rpx;
			margin-right: 12rpx;
		}
	}

	.card-content {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.card-item {
			width: 22.75%;
			height: 158rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			margin-right: 3%;
			margin-bottom: 20rpx;
			border-radius: 6px;
			overflow: hidden;

			&:nth-child(4n) {
				margin-right: 0;
			}

			&:last-child {
				margin-bottom: 0;
			}

			.card-img {
				margin-top: 10px;
				border-radius: 6px;
				overflow: hidden;
			}
			.clock-icon,
			.card-icon {
				width: 50rpx;
				height: 50rpx;
			}

			.leave-icon {
				width: 44rpx;
				height: 46rpx;
			}
			.work-time-icon {
				width: 44rpx;
				height: 52rpx;
			}

			.travel-icon {
				width: 48rpx;
				height: 48rpx;
			}

			.c-title {
				font-size: 14px;
				margin-top: 32rpx;
			}
		}
		.kqdk-bg {
			background: url('~@/static/images/home/kqdk-bg.png') no-repeat;
			background-size: cover;
			.kqdk-title {
				color: #083698;
			}
		}

		.bk-bg {
			background: url('~@/static/images/home/bk-bg.png') no-repeat;
			background-size: cover;

			.bk-title {
				color: #0a5a9c;
			}
		}

		.jia-bg {
			background: url('~@/static/images/home/jia-bg.png') no-repeat;
			background-size: cover;

			.jia-title {
				color: #9b4d0c;
			}
		}

		.jiaban-bg {
			background: url('~@/static/images/home/jiaban-bg.png') no-repeat;
			background-size: cover;

			.jb-title {
				color: #0d6c55;
			}
		}

		.chuchai-bg {
			background: url('~@/static/images/home/chuchai-bg.png')
				no-repeat;
			background-size: cover;

			.chuchai-title {
				color: #9b390c;
			}
		}
	}
}
</style>