digital item 页面
This commit is contained in:
X1627315083@163.com
@@ -20,6 +20,7 @@ body,
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
color: #232323;
|
||||
}
|
||||
@keyframes loading {
|
||||
0% {
|
||||
|
||||
@@ -22,6 +22,7 @@ body,
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
font-family: 'KaiseiOpti-Medium';
|
||||
color: #232323;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
|
||||
5
src/assets/icons/digital/Info.svg
Normal file
5
src/assets/icons/digital/Info.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 928 B |
4
src/assets/icons/digital/back.svg
Normal file
4
src/assets/icons/digital/back.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 679 B |
8
src/assets/icons/digital/document.svg
Normal file
8
src/assets/icons/digital/document.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 516 B |
@@ -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>
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
|
||||
319
src/views/digitalDetail/index.vue
Normal file
319
src/views/digitalDetail/index.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user