123123

src/views/Workshop/library.vue

@@ -0,0 +1,170 @@
+<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>