PunchSettle-MiniProgram/pages/punchin-detail/punchin-detail.vue

<template>
	<main-layout>
		<uni-calendar />	
		<viwe class="info-box">
			<view class="left">打卡：12次</view>
			<view class="right">全勤率：80%</view>
		</viwe>
		<view class="log-box">
			<uni-section title="打卡记录" type="line">
				<uni-list>
					<uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
					<uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
					<uni-list-item title="2024-12-07 08:30:22 福彩 幸运88 中奖100元" time="2020-02-02 20:20" ></uni-list-item>
				</uni-list>
			</uni-section>
		</view>
		<uni-fab ref="fab" :content="content" horizontal="right" vertical="bottom"
					direction="vertical"  @trigger="trigger"/>
	</main-layout>
</template>

<script setup>
	import router from '@/common/constants/router';

	const content = [{
			text: '删除',
			active: false,
			iconPath: '/static/delete.svg',
			selectedIconPath: '/static/delete-active.svg'
		},
		{
			text: '归档',
			active: false,
			iconPath: '/static/archive.svg',
			selectedIconPath: '/static/archive-active.svg'
		},
		{
			text: '补卡',
			active: false,
			iconPath: '/static/append.svg',
			selectedIconPath: '/static/append-active.svg'
		},
		{
			text: '编辑',
			active: false,
			iconPath: '/static/edit.svg',
			selectedIconPath: '/static/edit-active.svg'
		}
	];
	
	const trigger = (e) => {
		if (e.index == 3) {
			uni.navigateTo({
				url: router.PUNCHIN_EDIT_URL
			})
		}
	}
</script>

<style lang="scss" scoped>
	.info-box, .log-box {
		margin-top: 24rpx;
	}
	
	.info-box {
		display: flex;
		background-color: #FFFFFF;
		padding: 20rpx 10rpx;
		
		.left, .right {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>