lanecarford_front/src/views/Workshop/library.vue

<script setup lang="ts">
	import { ref, 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 onRetrieveItem = (i: number) => {
		console.log('检索' + i)
	}

	const deleteItem = (i: number) => {
		console.log('删除' + i)
	}
</script>

<template>
	<header-title style-type="2" />
	<div class="library">
		<div class="title">Library</div>
		<div class="list">
			<div class="item" v-for="i in 10" :key="i">
				<div class="image">
					<img src="@/assets/images/workshop/posture/posture_1.png" />
				</div>
				<div class="content">
					<span class="userID">User ID: 1234567890</span>
					<span class="datetime">7/22/2025 18:20</span>
					<span class="lastopened">Last opened 18:20</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>