gogogo
This commit is contained in:
55
src/views/shoppingCart/sc-list-null.vue
Normal file
55
src/views/shoppingCart/sc-list-null.vue
Normal file
@@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div class="sc-list-null">
|
||||
<img src="@/assets/images/shopping-cart-null.png" alt="" />
|
||||
<div class="title">Your Cart is empty</div>
|
||||
<div class="tip">Discover new fashion assets and add them to your cart.</div>
|
||||
<button custom v-show="showButton" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
const props = defineProps({
|
||||
showButton: { type: Boolean, default: true }
|
||||
})
|
||||
const handleExploreClick = () => {
|
||||
console.log('探索')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sc-list-null {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
> img {
|
||||
width: 14rem;
|
||||
height: auto;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 1.6rem;
|
||||
color: #979797;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
> .tip {
|
||||
width: 50%;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #979797;
|
||||
}
|
||||
> button {
|
||||
min-width: 30rem;
|
||||
height: 4.4rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 1.6rem;
|
||||
color: #979797;
|
||||
margin-top: 4.2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -37,12 +37,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="list-null" v-show="list.length === 0">
|
||||
<img src="@/assets/images/shopping-cart-null.png" alt="" />
|
||||
<div class="title">Your Cart is empty</div>
|
||||
<div class="tip">Discover new fashion assets and add them to your cart.</div>
|
||||
<button custom v-if="!isMini" @click="handleExploreClick">EXPLORE DIGITAL ITEMS</button>
|
||||
</div>
|
||||
<sc-list-null v-show="list.length === 0" :show-button="!isMini" />
|
||||
<sc-item
|
||||
v-for="v in list"
|
||||
:key="v.id"
|
||||
@@ -59,13 +54,13 @@
|
||||
</sc-item>
|
||||
</div>
|
||||
<div class="footer" v-if="isMini">
|
||||
<div class="total size" v-show="list.length > 0">
|
||||
<div class="total size" v-show="isView">
|
||||
<span class="label">Total File Size</span>
|
||||
<span class="value"
|
||||
>{{ allTotalSize.size }}<span> {{ allTotalSize.unit }}</span></span
|
||||
>
|
||||
</div>
|
||||
<div class="total" v-show="list.length > 0">
|
||||
<div class="total" v-show="list.length > 0 || isView">
|
||||
<span class="label">Total</span>
|
||||
<span class="value">${{ allAmount }}<span> HKD</span></span>
|
||||
</div>
|
||||
@@ -80,6 +75,7 @@
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
import scItem from './sc-item.vue'
|
||||
import scListNull from './sc-list-null.vue'
|
||||
const emit = defineEmits(['close', 'selected-change'])
|
||||
const props = defineProps({
|
||||
title: { type: String, default: '' },
|
||||
@@ -286,7 +282,7 @@
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
> .list-null {
|
||||
> .sc-list-null {
|
||||
margin-top: 10rem;
|
||||
}
|
||||
}
|
||||
@@ -340,41 +336,6 @@
|
||||
}
|
||||
}
|
||||
> .list {
|
||||
// height: 1000px;
|
||||
> .list-null {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
> img {
|
||||
width: 14rem;
|
||||
height: auto;
|
||||
margin-bottom: 2.4rem;
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 1.6rem;
|
||||
color: #979797;
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
> .tip {
|
||||
width: 50%;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #979797;
|
||||
}
|
||||
> button {
|
||||
min-width: 30rem;
|
||||
height: 4.4rem;
|
||||
border: 0.1rem solid #c4c4c4;
|
||||
font-family: KaiseiOpti-Medium;
|
||||
font-size: 1.6rem;
|
||||
color: #979797;
|
||||
margin-top: 4.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .footer {
|
||||
margin-top: 3rem;
|
||||
|
||||
Reference in New Issue
Block a user