310 lines
7.0 KiB
Vue
310 lines
7.0 KiB
Vue
<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 myEvent from '@/utils/myEvent'
|
|
|
|
|
|
//const props = defineProps({
|
|
//})
|
|
//const emit = defineEmits([
|
|
//])
|
|
const router = useRouter()
|
|
let data = reactive({
|
|
})
|
|
const addShopping = (item) => {
|
|
myEvent.emit('addShopping', item)
|
|
}
|
|
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">
|
|
<span>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>
|
|
</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;
|
|
|
|
}
|
|
}
|
|
}
|
|
.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> |