lanecarford_front/src/views/Workshop/library.vue

<script setup lang="ts">
	import { ref, reactive, onMounted, inject } from 'vue'
	import HeaderTitle from '@/components/HeaderTitle.vue'
	import FooterNavigation from '@/components/FooterNavigation.vue'
	const emit = defineEmits(['view-type'])

	onMounted(() => {
		emit('view-type', 1)
	})

	const list = reactive([
		{ id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 8, userID: '8888888888', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 9, userID: '9999999999', datetime: '7/22/2025 18:20', lastopened: '18:20' },
		{ id: 10, userID: '0000000000', datetime: '7/22/2025 18:20', lastopened: '18:20' }
	])
	const onRetrieveItem = (i: number) => {
		console.log('检索' + i)
	}

	const deleteItem = (i: number) => {
		list.splice(i, 1)
	}
</script>

<template>
	<header-title style-type="2" />
	<div class="library">
		<div class="title">Library</div>
		<div class="list">
			<div class="item" v-for="(v, i) in list" :key="v.id">
				<div class="image">
					<img src="@/assets/images/workshop/posture/posture_1.png" />
				</div>
				<div class="content">
					<span class="userID">User ID: {{ v.userID }}</span>
					<span class="datetime">{{ v.datetime }}</span>
					<span class="lastopened">Last opened {{ v.lastopened }}</span>
					<button @click="onRetrieveItem(i)">Retrieve</button>
				</div>
				<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
			</div>
		</div>
	</div>
	<footer-navigation is-placeholder />
</template>

<style scoped lang="less">
	.workshop {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.library {
		width: 100%;
		flex: 1;
		overflow: hidden;
		background-color: #fff;
		border-radius: 1rem;
		position: relative;
		color: #000;
		display: flex;
		flex-direction: column;
		&::before {
			content: '';
			position: absolute;
			width: 92rem;
			height: 92rem;
			z-index: 0;
			top: -40rem;
			right: -40rem;
			background: linear-gradient(88.42deg, #ffffff 32.58%, #d9d9d9 94.9%);
			transform: rotate(-45deg);
		}

		> .title {
			font-family: satoshiRegular;
			font-size: 9rem;
			text-align: left;
			line-height: 124%;
			margin: 5rem;
		}
		> .list {
			flex: 1;
			overflow-y: auto;
			padding: 0 3.8rem;
			margin: 0 3rem;
			> .item {
				position: relative;
				padding: 2.8rem;
				width: 100%;
				height: 34.4rem;
				border-radius: 1.88rem;
				margin-bottom: 7.66rem;
				background-color: #f3f3f3;
				display: flex;
				align-items: center;
				> .image {
					width: 21.4rem;
					height: 100%;
					overflow: hidden;
					border-radius: 2rem;
					background-color: #fff;
					> img {
						width: 100%;
						height: 100%;
						object-fit: contain;
					}
				}
				> .content {
					margin-left: 5.6rem;
					display: flex;
					flex-direction: column;
					height: 90%;
					> .userID {
						font-family: satoshiRegular;
						font-weight: 500;
						font-size: 3.8rem;
						line-height: 89%;
						color: #000;
					}
					> .datetime {
						margin-top: 1.8rem;
						font-family: satoshiRegular;
						font-weight: 400;
						font-size: 3.2rem;
						line-height: 89%;
						color: #000;
					}
					> .lastopened {
						margin-top: 1rem;
						font-family: satoshiRegular;
						font-weight: 400;
						font-style: Regular;
						font-size: 2.6rem;
						line-height: 89%;
						color: #6f6f6f;
					}
					> button {
						margin-top: auto;
						width: 12.3rem;
						height: 3.8rem;
						border-radius: 0.5rem;
						box-sizing: content-box;
						border: 0.193rem solid #000;
						background: transparent;
						font-family: satoshiRegular;
						font-weight: 400;
						font-size: 2.576rem;
						color: #000;
						margin-right: 5rem;
						&:active {
							opacity: 0.7;
						}
					}
				}
				> .delete {
					position: absolute;
					top: 2.5rem;
					right: 2rem;
					width: 5.5rem;
					height: 5.5rem;
					border: 0.188rem solid #000;
					border-radius: 1.88rem;
					display: flex;
					align-items: center;
					justify-content: center;
					&:active {
						opacity: 0.7;
					}
				}
			}
		}
	}
</style>