From 45298e5f23946b63e90a451b78db88898628ecfe Mon Sep 17 00:00:00 2001
From: "X1627315083@163.com" <1627315083@qq.com>
Date: Thu, 23 Apr 2026 14:08:35 +0800
Subject: [PATCH] =?UTF-8?q?digital=20item=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/css/style.css                 |   1 +
 src/assets/css/style.less                |   1 +
 src/assets/icons/digital/Info.svg        |   5 +
 src/assets/icons/digital/back.svg        |   4 +
 src/assets/icons/digital/document.svg    |   8 +
 src/components/CommodityItem.vue         |  13 +-
 src/router/index.ts                      |   6 +
 src/views/brand/index.vue                |   7 +-
 src/views/digitalDetail/index.vue        | 319 +++++++++++++++++++++++
 src/views/digitalItem/commodity-list.vue |   8 +-
 src/views/digitalItem/index.vue          |  23 +-
 src/views/shoppingCart/sc-list.vue       |   3 +-
 12 files changed, 388 insertions(+), 10 deletions(-)
 create mode 100644 src/assets/icons/digital/Info.svg
 create mode 100644 src/assets/icons/digital/back.svg
 create mode 100644 src/assets/icons/digital/document.svg
 create mode 100644 src/views/digitalDetail/index.vue

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index a2f284e..ef2ec9c 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -20,6 +20,7 @@ body,
   height: 100%;
   overflow: hidden;
   font-family: 'KaiseiOpti-Medium';
+  color: #232323;
 }
 @keyframes loading {
   0% {
diff --git a/src/assets/css/style.less b/src/assets/css/style.less
index aa2c38d..1557dc7 100644
--- a/src/assets/css/style.less
+++ b/src/assets/css/style.less
@@ -22,6 +22,7 @@ body,
 	height: 100%;
 	overflow: hidden;
 	font-family: 'KaiseiOpti-Medium';
+	color: #232323;
 }
 
 @keyframes loading {
diff --git a/src/assets/icons/digital/Info.svg b/src/assets/icons/digital/Info.svg
new file mode 100644
index 0000000..2f8a672
--- /dev/null
+++ b/src/assets/icons/digital/Info.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.995 2C6.48087 2 2 6.48584 2 12C2 17.5142 6.48584 22 11.995 22C17.5042 22 21.9901 17.5142 21.9901 12C21.9901 6.48584 17.5092 2 11.995 2ZM11.995 20.8823C7.09687 20.8823 3.11277 16.8982 3.11277 12C3.11277 7.10184 7.09687 3.11773 11.995 3.11773C16.8932 3.11773 20.8773 7.10184 20.8773 12C20.8773 16.8982 16.8932 20.8823 11.995 20.8823Z" fill="#585858"/>
+<path d="M12.6169 11.0065C12.6169 10.6636 12.3389 10.3856 11.996 10.3856C11.653 10.3856 11.375 10.6636 11.375 11.0065V16.9678C11.375 17.3107 11.653 17.5887 11.996 17.5887C12.3389 17.5887 12.6169 17.3107 12.6169 16.9678V11.0065Z" fill="#585858"/>
+<path d="M11.9935 8.02584C12.54 8.02584 12.9871 7.57875 12.9871 7.0323C12.9871 6.48585 12.54 6.03876 11.9935 6.03876C11.4471 6.03876 11 6.48585 11 7.0323C11 7.57875 11.4471 8.02584 11.9935 8.02584Z" fill="#585858"/>
+</svg>
diff --git a/src/assets/icons/digital/back.svg b/src/assets/icons/digital/back.svg
new file mode 100644
index 0000000..714ef99
--- /dev/null
+++ b/src/assets/icons/digital/back.svg
@@ -0,0 +1,4 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.583333" y="0.583333" width="26.8333" height="26.8333" stroke="#232323" stroke-width="1.16667"/>
+<path d="M17.2441 19.3639C17.4438 19.5645 17.4438 19.8889 17.2441 20.0895C17.0442 20.2903 16.7205 20.2903 16.5205 20.0895L10.709 14.2506L10.707 14.2477C10.5752 14.1088 10.5718 13.8877 10.709 13.7496L16.5205 7.91077C16.7205 7.70981 17.0441 7.70981 17.2441 7.91077C17.4438 8.11136 17.4438 8.43576 17.2441 8.63635L12.0029 13.902V13.9078L11.9639 13.9489C11.9326 13.982 11.9358 14.0298 11.9619 14.0563L17.2441 19.3639Z" fill="#232323" stroke="#232323" stroke-width="0.28"/>
+</svg>
diff --git a/src/assets/icons/digital/document.svg b/src/assets/icons/digital/document.svg
new file mode 100644
index 0000000..41fc0db
--- /dev/null
+++ b/src/assets/icons/digital/document.svg
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14 3.5C17.0376 3.5 19.5 5.96243 19.5 9V20.5H4.5V3.5H14Z" stroke="#585858" stroke-linejoin="round"/>
+<path d="M14.5 3.5C14.5 8 14.7 8 19.5 8" stroke="#585858"/>
+<path d="M8 11H16" stroke="#585858" stroke-linecap="round"/>
+<path d="M8 8H12" stroke="#585858" stroke-linecap="round"/>
+<path d="M8 14H16" stroke="#585858" stroke-linecap="round"/>
+<path d="M8 17H16" stroke="#585858" stroke-linecap="round"/>
+</svg>
diff --git a/src/components/CommodityItem.vue b/src/components/CommodityItem.vue
index 281c18b..97e58d8 100644
--- a/src/components/CommodityItem.vue
+++ b/src/components/CommodityItem.vue
@@ -15,14 +15,17 @@ const props = defineProps({
 	}
 })
 const emit = defineEmits([
-	'addShopping'
+	'addShopping',
+	'openDetail'
 ])
 let data = reactive({
 })
 const addShopping = () => {
 	emit('addShopping')
 }
- 
+const openDetail = () => {
+	emit('openDetail')
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -32,7 +35,7 @@ const {} = toRefs(data);
 </script>
 <template>
 	<div class="commodity-item">
-		<img :src="props.url" alt="">
+		<img :src="props.url" alt="" @click="openDetail">
 		<div class="detail">
 			<div class="text">
 				<div class="name">
@@ -55,6 +58,7 @@ const {} = toRefs(data);
 		width: var(--commodity-width,100%);
 		> img{
 			width: 100%;
+			cursor: pointer;
 			height: var(--commodity-height,auto);
 			margin-bottom: var(--commodity-marginBottom,1rem);
 		}
@@ -79,5 +83,8 @@ const {} = toRefs(data);
 				}
 			}
 		}
+		.btn{
+			cursor: pointer;
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index be8cbea..212aab6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -27,6 +27,12 @@ const router = createRouter({
 		path: '/digitalItem',
 		name: 'digitalItem',
 		component: () => import('../views/digitalItem/index.vue'),
+		meta: { cache: true }
+	},
+	{
+		path: '/digitalItem/:id',
+		name: 'digitalItemDetail',
+		component: () => import('../views/digitalDetail/index.vue'),
 	},
     {
       path: '/settings',
diff --git a/src/views/brand/index.vue b/src/views/brand/index.vue
index 9e2999d..b96b418 100644
--- a/src/views/brand/index.vue
+++ b/src/views/brand/index.vue
@@ -2,13 +2,18 @@
 import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
 import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
+import { useRouter } from "vue-router";
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const router = useRouter()
 let data = reactive({
 })
 const addShopping = (item) => {}
+const openDetail = (item) => {	
+	router.push({name: 'digitalDetail', params: {id: item.id}})
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -26,7 +31,7 @@ const {} = toRefs(data);
 				<MerchantInfo></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping"></CommodityList>
+				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
 			</div>
 		</div>
 		<Footer></Footer>
diff --git a/src/views/digitalDetail/index.vue b/src/views/digitalDetail/index.vue
new file mode 100644
index 0000000..d1776aa
--- /dev/null
+++ b/src/views/digitalDetail/index.vue
@@ -0,0 +1,319 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { useRouter } from "vue-router";
+import img from "@/assets/images/collectionStory/Rectangle.png";
+import scList from '@/views/shoppingCart/sc-list.vue'
+
+
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+const router = useRouter()
+let data = reactive({
+})
+const isShoppingShow = ref(false)
+const addShopping = (item) => {
+	isShoppingShow.value = true
+}
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="digitalItemDetail">
+		<div class="center">
+			<div class="img-list">
+				<div class="title">
+					<div>Sketch</div>
+					<div>Illustration</div>
+					<div>Product</div>
+				</div>
+				<div class="img">
+					<div class="sketch">
+						<img :src="img" v-for="item in 4" :key="item" alt="">
+					</div>
+					<div class="illustration">
+						<img :src="img" v-for="item in 4" :key="item" alt="">
+					</div>
+					<div class="product">
+						<img :src="img" v-for="item in 4" :key="item" alt="">
+					</div>
+				</div>
+				
+			</div>
+			<div class="img-detail">
+				<div class="back" @click="router.back()">
+					<div class="icon">
+						<svg-icon name="digital-back" size="28"></svg-icon>
+					</div>
+					<span>Back</span>
+				</div>
+				<div class="img-info">
+					<div class="img-type">FEMALE / skirt, blouse, Outwear</div>
+					<div class="img-name">Heritage Layered Set</div>
+					<div class="img-price">$100 <span class="mini-scrollbar">HKD</span></div>
+				</div>
+				<div class="commodity">
+					<div class="info">
+						<img class="profile" :src="img" alt="">
+						<div class="detail">
+							<div class="name">Roaming Clouds</div>
+							<div class="release-time">
+								<div class="icon">
+									<svg-icon name="digital-document" size="24"></svg-icon>
+								</div>
+								<span>12mb  |  Release in Feb 26, 2026</span>
+							</div>
+						</div>
+					</div>
+					<div class="introduce">
+						This ensemble artfully merges traditional folk heritage with contemporary tailoring, creating a timeless silhouette that honors ancestral craftsmanship while embracing modern sophistication.
+					</div>
+				</div>
+				<div class="notice">
+					<div class="title">Copyright & License Notice</div>
+					<div class="conter">
+						<div class="contet-title">
+							<div class="icon">
+								<svg-icon name="digital-Info" size="24"></svg-icon>
+							</div>
+							<span>License Included in Asset</span>
+						</div>
+						<div class="info">
+							All products on this platform are digital assets, not physical goods. Purchase grants a usage license only; copyright and intellectual property rights remain with the original creator, unless otherwise stated.
+						</div>
+					</div>
+				</div>
+				<div class="button">
+					<div class="buy-now">Buy Now</div>
+					<div class="add-cart" @click="addShopping(item)">
+						<div class="icon">
+							<svg-icon name="cart_0" size="24"></svg-icon>
+						</div>
+						Add to Cart 
+					</div>
+				</div>
+			</div>
+		</div>
+		<Footer></Footer>
+		<el-drawer v-model="isShoppingShow" width="50rem" :close-on-click-modal="false" title="I am the title" :with-header="false">
+			<sc-list is-mini style="flex: 0.6;" @close="isShoppingShow = false"/>
+	  	</el-drawer>
+	</div>
+</template>
+<style lang="less" scoped>
+	:deep(.el-drawer__body){
+		--el-drawer-padding-primary: 2.4rem 3.4rem 2.4rem 6rem;
+	}
+	.digitalItemDetail{
+		width: 100%;
+		height: 100%;
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		.center{
+			flex: 1;
+			display: flex;
+			overflow: hidden;
+			.img-list{
+				display: flex;
+				flex: 1;
+				flex-direction: column;
+				--row-width: 33.333%;
+				// --row-width: 29.3rem;
+				overflow-y: auto;
+				&::-webkit-scrollbar{
+					display: none;
+				}
+				> .title{
+					display: flex;
+					position: sticky;
+					top: 0;
+					> div{
+						width: var(--row-width);
+						line-height: 8.6rem;
+						padding-left: 2.4rem;
+						border-right: 0.5px solid #C4C4C4;
+						font-weight: 500;
+						font-size: 1.6rem;
+						background-color: #f5f5f5;
+						&:last-child{
+							border: none;
+						}
+					}
+				}
+				> .img{
+					display: flex;
+					
+					> div{
+						display: flex;
+						width: var(--row-width);
+						border-right: 0.5px solid #C4C4C4;
+						flex-direction: column;
+						&:last-child{
+							border: none;
+						}
+					}
+				}
+			}
+			.img-detail{
+				border-left: 0.5px solid #585858;
+				padding-left: 3.2rem;
+				width: 57rem;
+				display: flex;
+				flex-direction: column;
+				overflow-y: auto;
+				&::-webkit-scrollbar{
+					display: none;
+				}
+				.back{
+					display: flex;
+					margin-top: 2.8rem;
+					gap: 1.4rem;
+					align-items: center;
+					width: min-content;
+					cursor: pointer;
+					> span{
+						font-weight: 500;
+						font-size: 1.6rem;
+						line-height: 120%;
+					}
+				}
+				.img-info{
+					margin-top: 2.8rem;
+					.img-type{
+						font-weight: 500;
+						font-size: 1.2rem;
+						line-height: 120%;
+						color: #808080;
+						margin-bottom: 1rem;
+					}
+					.img-name{
+						font-family: KaiseiOpti-Bold;
+						font-weight: 700;
+						font-size: 3rem;
+						line-height: 120%;
+						margin-bottom: 1rem;
+					}
+					.img-price{
+						font-family: KaiseiOpti-Bold;
+						font-weight: 700;
+						font-size: 3rem;
+						line-height: 120%;
+						> span{
+							font-weight: 500;
+							font-size: 2rem;
+							line-height: 120%;
+							color: #585858;
+						}
+					}
+				}
+				.commodity{
+					margin-top: 4rem;
+					.info{
+						display: flex;
+						gap: 1.4rem;
+						margin-bottom: 1.4rem;
+						> .profile{
+							width: 5.4rem;
+							height: 5.4rem;
+							object-fit: cover;
+						}
+						> .detail{
+							.name{
+								text-decoration: underline;
+								font-weight: 500;
+								font-size: 1.8rem;
+								line-height: 100%;
+								margin-bottom: .8rem;
+							}
+							.release-time{
+								font-family: KaiseiOpti-Regular;
+								font-weight: 400;
+								font-size: 1.4rem;
+								line-height: 140%;
+								color: #585858;
+								display: flex;
+								align-items: center;
+								> span{
+									margin-left: 1rem;
+								}
+							}
+						}
+					}
+					.introduce{
+						font-family: KaiseiOpti-Regular;
+						font-weight: 400;
+						font-size: 14px;
+						line-height: 140%;
+						color: #585858;
+						width: 50.8rem;
+					}
+				}
+				.notice{
+					margin-top: 6rem;
+					.title{
+						margin-bottom: 1rem;
+						font-weight: 500;
+						font-size: 1.8rem;
+						line-height: 140%;
+					}
+					.conter{
+						width: 50.8rem;
+						background-color: #f6f6f6;
+						padding: 2rem;
+						.contet-title{
+							margin-bottom: 1.2rem;
+							display: flex;
+							gap: .8rem;
+							align-items: center;
+							> span{
+								font-family: KaiseiOpti-Regular;
+								font-weight: 400;
+								font-size: 1.4rem;
+								line-height: 140%;
+							}
+						}
+						.info{
+							font-family: KaiseiOpti-Regular;
+							font-weight: 400;
+							font-size: 1.2rem;
+							line-height: 140%;
+							color: #585858;
+						}
+					}
+				}
+				.button{
+					width: 50.8rem;
+					margin-top: auto;
+					> div{
+						width: 100%;
+						font-weight: 500;
+						font-size: 1.6rem;
+						line-height: 120%;
+						letter-spacing: 3%;
+						border: 1px solid #232323;
+						line-height: 4.8rem;
+						cursor: pointer;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin-bottom: 2rem;
+					}
+					.buy-now{
+						background-color: #232323;
+						color: #fff;
+					}
+					.add-cart{
+						background-color: #fff;
+						color: #000;
+					}
+				}
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/views/digitalItem/commodity-list.vue b/src/views/digitalItem/commodity-list.vue
index 9c99b70..199ec6a 100644
--- a/src/views/digitalItem/commodity-list.vue
+++ b/src/views/digitalItem/commodity-list.vue
@@ -4,7 +4,8 @@ import img from "@/assets/images/collectionStory/Rectangle.png";
 //const props = defineProps({
 //})
 const emit = defineEmits([
-	'addShopping'
+	'addShopping',
+	'openDetail'
 ])
 let data = reactive({
 })
@@ -47,6 +48,9 @@ const type = ref('All')
 const addShopping = (item) => {
 	emit('addShopping', item)
 }
+const openDetail = (item) => {
+	emit('openDetail', item)
+}
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -58,7 +62,7 @@ const {} = toRefs(data);
 	<div class="commodityList">
 		<div class="list">
 			<div class="item" v-for="item in list" :key="item.url">
-				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)"></CommodityItem>
+				<CommodityItem :url="item.url" :name="item.title" :price="item.price" @addShopping="addShopping(item)" @openDetail="openDetail(item)"></CommodityItem>
 			</div>
 		</div>
 	</div>
diff --git a/src/views/digitalItem/index.vue b/src/views/digitalItem/index.vue
index dcfb1cd..897cbc5 100644
--- a/src/views/digitalItem/index.vue
+++ b/src/views/digitalItem/index.vue
@@ -1,14 +1,31 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { ref, onMounted, onUnmounted, reactive, toRefs, onActivated } from "vue";
 import CommodityList from "./commodity-list.vue";
 import MerchantInfo from "./merchant-info.vue";
+import { useRouter } from "vue-router";
+// 定义组件名称
+defineOptions({
+  name: 'digitalItem'
+})
 //const props = defineProps({
 //})
 //const emit = defineEmits([
 //])
+const digitalItemRef = ref(null)
+const scrollTop = ref(0)
+const router = useRouter()
 let data = reactive({
 })
 const addShopping = (item) => {}
+const openDetail = (item) => {
+	scrollTop.value = digitalItemRef.value.scrollTop
+	router.push({
+		path: '/digitalItem/' + 123,
+	})
+}
+onActivated(()=>{
+	digitalItemRef.value.scrollTop = scrollTop.value
+})
 onMounted(()=>{
 })
 onUnmounted(()=>{
@@ -17,7 +34,7 @@ defineExpose({})
 const {} = toRefs(data);
 </script>
 <template>
-	<div class="digitalItem">
+	<div class="digitalItem" ref="digitalItemRef">
 		<div class="header-img">
 			<img src="@/assets/images/digitalItem/digital_item_banner.png" alt="">
 			<div class="text">
@@ -30,7 +47,7 @@ const {} = toRefs(data);
 				<MerchantInfo></MerchantInfo>
 			</div>
 			<div class="commodity-list">
-				<CommodityList @addShopping="addShopping"></CommodityList>
+				<CommodityList @addShopping="addShopping" @openDetail="openDetail"></CommodityList>
 			</div>
 		</div>
 		<Footer></Footer>
diff --git a/src/views/shoppingCart/sc-list.vue b/src/views/shoppingCart/sc-list.vue
index 6458175..7a1748f 100644
--- a/src/views/shoppingCart/sc-list.vue
+++ b/src/views/shoppingCart/sc-list.vue
@@ -137,6 +137,7 @@
 			height: 100%;
 			overflow: hidden;
 			--sc-list-title-font-size: 2rem;
+			--sc-list-title-padding-bottom: 3rem;
 			--sc-list-list-item-padding: 2rem 0;
 			--sc-list-list-item-img-width: 10.4rem;
 			--sc-list-list-item-img-height: 13.2rem;
@@ -184,7 +185,7 @@
 		}
 		> .header {
 			border-bottom: 0.1rem solid #c4c4c4;
-			padding-bottom: 3rem;
+			padding-bottom: var(--sc-list-title-padding-bottom, 3rem);
 			> .title {
 				display: flex;
 				justify-content: space-between;