home修改
This commit is contained in:
李志鹏
@@ -122,11 +122,11 @@ button[custom="white"] {
|
||||
height: 5rem;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--button-font-size, 2rem);
|
||||
color: var(--button-color, #232323);
|
||||
background: var(--button-bgcolor, #fff);
|
||||
border: var(--button-border, none);
|
||||
cursor: pointer;
|
||||
}
|
||||
button[custom]:active,
|
||||
@@ -141,6 +141,11 @@ button[custom="black"] {
|
||||
--button-click-color: #fff;
|
||||
--button-font-size: 1.6rem;
|
||||
}
|
||||
.el-select-dropdown__item {
|
||||
padding: 0 2rem !important;
|
||||
button[custom="black-box"] {
|
||||
--button-bgcolor: transparent;
|
||||
--button-color: #232323;
|
||||
--button-border: 0.2rem solid #979797;
|
||||
--button-click-bgcolor: #979797;
|
||||
--button-click-color: #fff;
|
||||
--button-font-size: 1.6rem;
|
||||
}
|
||||
|
||||
@@ -149,11 +149,11 @@ button[custom="white"] {
|
||||
height: 5rem;
|
||||
padding: 0 1rem;
|
||||
border-radius: 0;
|
||||
border: none;
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--button-font-size, 2rem);
|
||||
color: var(--button-color, #232323);
|
||||
background: var(--button-bgcolor, #fff);
|
||||
border: var(--button-border, none);
|
||||
cursor: pointer;
|
||||
|
||||
&:active {
|
||||
@@ -168,4 +168,13 @@ button[custom="black"] {
|
||||
--button-click-bgcolor: #333;
|
||||
--button-click-color: #fff;
|
||||
--button-font-size: 1.6rem;
|
||||
}
|
||||
|
||||
button[custom="black-box"] {
|
||||
--button-bgcolor: transparent;
|
||||
--button-color: #232323;
|
||||
--button-border: 0.2rem solid #979797;
|
||||
--button-click-bgcolor: #979797;
|
||||
--button-click-color: #fff;
|
||||
--button-font-size: 1.6rem;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 851 KiB |
BIN
src/assets/images/home/bg.png
Normal file
BIN
src/assets/images/home/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 652 KiB |
BIN
src/assets/images/home/designer-bg.png
Normal file
BIN
src/assets/images/home/designer-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 688 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 569 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 151 KiB |
BIN
src/assets/images/logos/aidaAndStylish.png
Normal file
BIN
src/assets/images/logos/aidaAndStylish.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
@@ -2,8 +2,7 @@ export default {
|
||||
Login: {
|
||||
login: 'Log in',
|
||||
register: 'Register',
|
||||
loginTo: 'Log on to <span>FiDA</span>',
|
||||
loginTitle: 'A multi-agent canvas for rapid, trend driven design iteration.',
|
||||
loginTip: 'Platform integrated with AiDA.<br />AiDA account login required.',
|
||||
name: 'Name',
|
||||
email: 'Email',
|
||||
password: 'Password',
|
||||
|
||||
@@ -2,9 +2,7 @@ export default {
|
||||
Login: {
|
||||
login: '登录',
|
||||
register: '注册',
|
||||
signUp: '注册',
|
||||
loginTo: '登录到 <span>FiDA</span',
|
||||
loginTitle: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
|
||||
loginTip: '与 AiDA 集成的平台。<br />需要登录 AiDA 账户。',
|
||||
name: '姓名',
|
||||
email: '邮箱',
|
||||
password: '密码',
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="home-index">
|
||||
<section-index />
|
||||
<section-designers />
|
||||
<section-designer />
|
||||
<section-design />
|
||||
<section-digital-items1 />
|
||||
<section-digital-items2 />
|
||||
@@ -12,7 +12,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import SectionIndex from './section-index.vue'
|
||||
import SectionDesigners from './section-designers.vue'
|
||||
import SectionDesigner from './section-designer.vue'
|
||||
import SectionDesign from './section-design.vue'
|
||||
import SectionDigitalItems1 from './section-digital-items1.vue'
|
||||
import SectionDigitalItems2 from './section-digital-items2.vue'
|
||||
|
||||
51
src/views/home/section-designer.vue
Normal file
51
src/views/home/section-designer.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<section class="section-designer">
|
||||
<div class="title">Designer Community</div>
|
||||
<div class="tip">
|
||||
Discover the designers shaping AiDA’s creative landscape. <br />
|
||||
Each month, we will showcase a curated selection of their most distinguished works.
|
||||
</div>
|
||||
<button custom="black" @click="onSearchBrand">Search Brands</button>
|
||||
<img src="@/assets/images/home/designer-bg.png" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const onSearchBrand = () => {
|
||||
router.push({ name: 'brand' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.section-designer {
|
||||
padding: 9rem 8rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 5.6rem;
|
||||
line-height: 6.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> .tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
text-align: center;
|
||||
color: #979797;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
> button {
|
||||
margin-bottom: 4.6rem;
|
||||
}
|
||||
> img {
|
||||
width: 73%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,130 +0,0 @@
|
||||
<template>
|
||||
<section class="section-designers">
|
||||
<div class="title">Popular Designers</div>
|
||||
<div class="tip">
|
||||
Discover the designers shaping AiDA’s creative landscape,<br />as we present their most
|
||||
distinguished works each month.
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="@/assets/images/home/designers-left.jpg" />
|
||||
<div class="box">
|
||||
<div class="intro">
|
||||
<span>{{ list[index]?.intro || '' }}</span>
|
||||
<img src="@/assets/images/home/designers-right.jpg" />
|
||||
</div>
|
||||
<div
|
||||
class="name-item"
|
||||
v-for="(v, i) in list"
|
||||
:key="i"
|
||||
:class="{ active: i === index }"
|
||||
@click="index = i"
|
||||
>
|
||||
<span class="name">{{ v.name }}</span>
|
||||
<span class="icon">
|
||||
<svg-icon name="arrow_right" size="20" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue'
|
||||
const index = ref(0)
|
||||
const list = ref([
|
||||
{
|
||||
name: 'Ji-Yeon Park',
|
||||
intro:
|
||||
'Through its fragile tulle layers over a grounded silhouette, the garment reflects the tension between vulnerability and strength within one’s journey.'
|
||||
},
|
||||
{
|
||||
name: 'Lian Su',
|
||||
intro: '阿巴阿巴~'
|
||||
},
|
||||
{
|
||||
name: 'Céline Moreau',
|
||||
intro: '这是Céline Moreau的设计~'
|
||||
}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.section-designers {
|
||||
padding: 9rem 8rem;
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 5.6rem;
|
||||
line-height: 6.2rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
> .tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2rem;
|
||||
line-height: 2.8rem;
|
||||
text-align: center;
|
||||
color: #979797;
|
||||
}
|
||||
> .content {
|
||||
margin-top: 5rem;
|
||||
border: 0.1rem solid #979797;
|
||||
border-left: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
box-sizing: content-box;
|
||||
--height: 45rem;
|
||||
min-height: var(--height);
|
||||
display: flex;
|
||||
> img {
|
||||
width: var(--height);
|
||||
height: var(--height);
|
||||
margin: 2.4rem 2.4rem 2.4rem 0;
|
||||
}
|
||||
> .box {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> .intro {
|
||||
display: flex;
|
||||
margin: 2rem 2rem 2rem 0;
|
||||
> span {
|
||||
flex: 1;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2rem;
|
||||
line-height: 3rem;
|
||||
color: #232323;
|
||||
margin-right: 9rem;
|
||||
}
|
||||
> img {
|
||||
width: 25rem;
|
||||
height: 25rem;
|
||||
}
|
||||
}
|
||||
> .name-item {
|
||||
flex: 1;
|
||||
min-height: 5rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-top: 0.1rem solid #7b7b7b;
|
||||
padding: 0 2.1rem;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 2.4rem;
|
||||
color: #7b7b7b;
|
||||
> .icon {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
&.active {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
color: #232323;
|
||||
background: #f6f6f6;
|
||||
> .icon {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,74 +1,58 @@
|
||||
<template>
|
||||
<section class="section-index bgw">
|
||||
<img src="@/assets/images/home/bg.jpg" class="bg" />
|
||||
<div class="shade-1"></div>
|
||||
<div class="shade-2"></div>
|
||||
<img src="@/assets/images/home/bg.png" class="bg" />
|
||||
<div class="content">
|
||||
<div class="title">Windswept Burden</div>
|
||||
<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div>
|
||||
<button custom>View More</button>
|
||||
<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div>
|
||||
<p class="tip">
|
||||
What you wear is how you present yourself to the world, especially today, when human
|
||||
contacts are so quick. Fashion is instant language
|
||||
</p>
|
||||
<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
|
||||
<div class="title" v-html="title"></div>
|
||||
<div class="tip">
|
||||
Discover collections through the stories behind their creation. A curated space connecting
|
||||
designers, narratives, and fashion commerce.
|
||||
</div>
|
||||
<button custom="black-box" @click="handleClickArrow">
|
||||
<svg-icon name="arrow_right" size="34" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
const router = useRouter()
|
||||
const title =
|
||||
'We’re Seeking<br /><span>Fashion Voice</span><br /><span class="small">Worth Featuring.</span>'
|
||||
const handleClickArrow = () => {
|
||||
router.push({ name: 'collectionStory' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.section-index {
|
||||
> .shade-1 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 96rem;
|
||||
height: 100%;
|
||||
background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.25) 100%);
|
||||
}
|
||||
> .shade-2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 30rem;
|
||||
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38.37%, rgba(0, 0, 0, 0.192) 90.74%);
|
||||
}
|
||||
> .content {
|
||||
top: 16rem;
|
||||
top: 13.7rem;
|
||||
left: 9rem;
|
||||
color: #fff;
|
||||
color: #232323;
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: 6rem;
|
||||
font-size: 7rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
> div.tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 3.2rem;
|
||||
line-height: 4.3rem;
|
||||
}
|
||||
> button {
|
||||
margin-top: 11.6rem;
|
||||
margin-bottom: 13.9rem;
|
||||
}
|
||||
> .aida-logo {
|
||||
margin-bottom: 3rem;
|
||||
> img {
|
||||
width: auto;
|
||||
height: 5rem;
|
||||
span {
|
||||
font-family: KaiseiOpti-Medium;
|
||||
&.small {
|
||||
font-size: 6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
> p.tip {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.2rem;
|
||||
line-height: 2rem;
|
||||
color: #ededed;
|
||||
> .tip {
|
||||
width: 50rem;
|
||||
font-size: 1.8rem;
|
||||
line-height: 2.6rem;
|
||||
color: #585858;
|
||||
}
|
||||
> button {
|
||||
margin-top: 12rem;
|
||||
min-width: 0;
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
<template>
|
||||
<div class="login">
|
||||
<div class="header">
|
||||
<img src="@/assets/images/logos/aidaAndStylish.png" alt="" />
|
||||
<div v-html="$t('Login.loginTip')"></div>
|
||||
</div>
|
||||
<el-form :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
|
||||
<el-form-item :label="$t('Login.email')" prop="email">
|
||||
<el-input v-model="formData.email" :placeholder="$t('Login.enterEmail')" name="email" />
|
||||
@@ -72,4 +76,24 @@
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import './less/style.less';
|
||||
.login {
|
||||
> .header {
|
||||
width: 100%;
|
||||
margin: 1rem 0 3rem;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: auto;
|
||||
height: 2.8rem;
|
||||
}
|
||||
> div {
|
||||
text-align: right;
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.1rem;
|
||||
color: #232323;
|
||||
line-height: 1.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -62,6 +62,10 @@
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
<div class="language" @click="onLanguageClick">
|
||||
<span :class="{ active: locale === 'CHINESE_SIMPLIFIED' }">中</span> /
|
||||
<span :class="{ active: locale === 'ENGLISH' }">ENG</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -70,6 +74,8 @@
|
||||
import { computed, ref } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import myEvent from '@/utils/myEvent'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
const { t, locale } = useI18n()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const activePath = computed(() => route.path)
|
||||
@@ -131,6 +137,10 @@
|
||||
hideProfilePopover()
|
||||
console.log('logout')
|
||||
}
|
||||
const onLanguageClick = () => {
|
||||
locale.value = locale.value === 'ENGLISH' ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'
|
||||
localStorage.setItem('language', locale.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -159,7 +169,6 @@
|
||||
height: 2.4rem;
|
||||
}
|
||||
> .login {
|
||||
font-family: Kaisei Opti;
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
> .profile {
|
||||
@@ -168,6 +177,15 @@
|
||||
border-radius: 50%;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
> .language {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.6rem;
|
||||
color: #c2c2c2;
|
||||
> .active {
|
||||
color: #232323;
|
||||
font-family: KaiseiOpti-Medium;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .center,
|
||||
> .right {
|
||||
@@ -195,7 +213,6 @@
|
||||
font-size: 1.6rem;
|
||||
color: #232323;
|
||||
border-bottom: 0.1rem solid transparent;
|
||||
font-family: Kaisei Opti;
|
||||
}
|
||||
&.active {
|
||||
> span {
|
||||
|
||||
@@ -18,16 +18,6 @@
|
||||
>
|
||||
</div>
|
||||
<br />
|
||||
<div class="total-file-size">
|
||||
<span class="label">
|
||||
<span class="icon"><svg-icon name="order-file" size="18" /></span>
|
||||
<span class="text">Total File Size</span>
|
||||
</span>
|
||||
<span class="value"
|
||||
>{{ totalSize.size }} <span>{{ totalSize.unit }}</span></span
|
||||
>
|
||||
</div>
|
||||
<div class="hr"></div>
|
||||
<br />
|
||||
<div class="total">
|
||||
<span class="label">Total</span>
|
||||
@@ -65,14 +55,6 @@
|
||||
})
|
||||
return arr
|
||||
})
|
||||
const totalSize = computed(() => {
|
||||
const total = props.list.reduce((pre, cur) => pre + cur.fileSize, 0)
|
||||
const str = FormatBytes(total)
|
||||
return {
|
||||
size: str.split(' ')[0],
|
||||
unit: str.split(' ')[1]
|
||||
}
|
||||
})
|
||||
const totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
|
||||
const handleCheckout = () => {
|
||||
console.log('购买：', props.list)
|
||||
|
||||
@@ -1,200 +1,200 @@
|
||||
<template>
|
||||
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
|
||||
<slot name="checkbox" />
|
||||
<img :src="info.url" />
|
||||
<div class="content">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="brand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ info.brand }}</span>
|
||||
</div>
|
||||
<div class="tags" v-if="showTags">
|
||||
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="size" v-if="showSize">
|
||||
<div class="icon"><svg-icon name="order-file" size="18" /></div>
|
||||
<div class="text">
|
||||
<span>{{ FormatBytes(info.fileSize) }}</span>
|
||||
<span v-if="showSizeDate"
|
||||
> | {{
|
||||
FormatDate(info.date, 'SM D, YYYY, h:mm A')
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount">${{ info.amount }}<span> HKD</span></div>
|
||||
<SvgIcon v-if="orderActionsLayout" class="download" name="download" size="32" color="#232323" />
|
||||
<div class="remove" v-if="showRemove" @click="onRemove">
|
||||
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
|
||||
<span class="text">Remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
|
||||
<slot name="checkbox" />
|
||||
<img :src="info.url" />
|
||||
<div class="content">
|
||||
<div class="title">{{ info.title }}</div>
|
||||
<div class="brand">
|
||||
<span class="icon"><svg-icon name="order-shop" size="24" /></span>
|
||||
<span class="text">{{ info.brand }}</span>
|
||||
</div>
|
||||
<div class="tags" v-if="showTags">
|
||||
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
|
||||
</div>
|
||||
<div class="date" v-if="showDate">
|
||||
<!-- <div class="icon"><svg-icon name="order-file" size="18" /></div> -->
|
||||
<div class="text">
|
||||
{{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="amount">${{ info.amount }}<span> HKD</span></div>
|
||||
<SvgIcon
|
||||
v-if="orderActionsLayout"
|
||||
class="download"
|
||||
name="download"
|
||||
size="32"
|
||||
color="#232323"
|
||||
/>
|
||||
<div class="remove" v-if="showRemove" @click="onRemove">
|
||||
<span class="icon"><svg-icon name="order-delete" size="18" /></span>
|
||||
<span class="text">Remove</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const emit = defineEmits(['remove'])
|
||||
const props = defineProps({
|
||||
showTags: { type: Boolean, default: true },
|
||||
showSize: { type: Boolean, default: true },
|
||||
showSizeDate: { type: Boolean, default: true },
|
||||
showRemove: { type: Boolean, default: true },
|
||||
orderActionsLayout: { type: Boolean, default: false },
|
||||
info: { type: Object, default: () => {} }
|
||||
})
|
||||
const onRemove = () => {
|
||||
emit('remove', props.info.id)
|
||||
}
|
||||
import { computed, ref, onMounted } from 'vue'
|
||||
import { FormatBytes, FormatDate } from '@/utils/tools'
|
||||
const emit = defineEmits(['remove'])
|
||||
const props = defineProps({
|
||||
showTags: { type: Boolean, default: true },
|
||||
showDate: { type: Boolean, default: true },
|
||||
showRemove: { type: Boolean, default: true },
|
||||
orderActionsLayout: { type: Boolean, default: false },
|
||||
info: { type: Object, default: () => {} }
|
||||
})
|
||||
const onRemove = () => {
|
||||
emit('remove', props.info.id)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sc-item {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding: var(--sc-item-padding, 2.4rem 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: var(--sc-item-img-width, 14.8rem);
|
||||
height: var(--sc-item-img-height, 18.8rem);
|
||||
object-fit: contain;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
margin: var(--sc-item-content-margin, 0 4rem);
|
||||
align-self: var(--sc-item-content-align-self);
|
||||
> * {
|
||||
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-title-font-size, 2.4rem);
|
||||
color: #232323;
|
||||
}
|
||||
> .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: var(--sc-item-brand-font-size, 1.6rem);
|
||||
text-decoration: underline;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
> .tag {
|
||||
min-width: var(--sc-item-tag-min-width, 8.8rem);
|
||||
height: var(--sc-item-tag-height, 2.4rem);
|
||||
line-height: var(--sc-item-tag-height, 2.4rem);
|
||||
border-radius: var(--sc-item-tag-radius, 2.4rem);
|
||||
font-size: var(--sc-item-tag-font-size, 1.4rem);
|
||||
padding: var(--sc-item-tag-padding, 0 1rem);
|
||||
text-align: center;
|
||||
color: #8f8f8f;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
> .size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #808080;
|
||||
}
|
||||
.sc-item {
|
||||
border-bottom: 0.1rem solid #c4c4c4;
|
||||
padding: var(--sc-item-padding, 2.4rem 0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> img {
|
||||
width: var(--sc-item-img-width, 14.8rem);
|
||||
height: var(--sc-item-img-height, 18.8rem);
|
||||
object-fit: contain;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
> .content {
|
||||
flex: 1;
|
||||
margin: var(--sc-item-content-margin, 0 4rem);
|
||||
align-self: var(--sc-item-content-align-self);
|
||||
> * {
|
||||
margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
> .title {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-title-font-size, 2.4rem);
|
||||
color: #232323;
|
||||
}
|
||||
> .brand {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
> .text {
|
||||
font-size: var(--sc-item-brand-font-size, 1.6rem);
|
||||
text-decoration: underline;
|
||||
color: #232323;
|
||||
}
|
||||
}
|
||||
> .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.8rem;
|
||||
> .tag {
|
||||
min-width: var(--sc-item-tag-min-width, 8.8rem);
|
||||
height: var(--sc-item-tag-height, 2.4rem);
|
||||
line-height: var(--sc-item-tag-height, 2.4rem);
|
||||
border-radius: var(--sc-item-tag-radius, 2.4rem);
|
||||
font-size: var(--sc-item-tag-font-size, 1.4rem);
|
||||
padding: var(--sc-item-tag-padding, 0 1rem);
|
||||
text-align: center;
|
||||
color: #8f8f8f;
|
||||
background-color: #eee;
|
||||
}
|
||||
}
|
||||
> .date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .icon {
|
||||
width: 2.4rem;
|
||||
height: 2.4rem;
|
||||
margin-right: 1rem;
|
||||
color: #808080;
|
||||
}
|
||||
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
align-self: var(--sc-item-right-align-self, end);
|
||||
display: var(--sc-item-right-display);
|
||||
flex-direction: var(--sc-item-right-flex-direction);
|
||||
justify-content: var(--sc-item-right-justify-content);
|
||||
align-items: var(--sc-item-right-align-items);
|
||||
height: var(--sc-item-right-height);
|
||||
margin-top: var(--sc-item-right-margin-top);
|
||||
> .amount {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-amount-font-size, 2.2rem);
|
||||
color: #232323;
|
||||
> span {
|
||||
font-size: var(--sc-item-currency-font-size, 1.4rem);
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .remove {
|
||||
margin-top: var(--sc-item-remove-margin-top, 9rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-order-actions-layout {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
var(--sc-item-img-width, 14.8rem)
|
||||
minmax(0, 1fr)
|
||||
var(--sc-item-order-amount-width, 12rem)
|
||||
var(--sc-item-order-action-width, 18rem);
|
||||
column-gap: var(--sc-item-order-column-gap, 2rem);
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .right {
|
||||
align-self: var(--sc-item-right-align-self, end);
|
||||
display: var(--sc-item-right-display);
|
||||
flex-direction: var(--sc-item-right-flex-direction);
|
||||
justify-content: var(--sc-item-right-justify-content);
|
||||
align-items: var(--sc-item-right-align-items);
|
||||
height: var(--sc-item-right-height);
|
||||
margin-top: var(--sc-item-right-margin-top);
|
||||
> .amount {
|
||||
font-family: KaiseiOpti-Bold;
|
||||
font-size: var(--sc-item-amount-font-size, 2.2rem);
|
||||
color: #232323;
|
||||
> span {
|
||||
font-size: var(--sc-item-currency-font-size, 1.4rem);
|
||||
color: #585858;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
}
|
||||
> .remove {
|
||||
margin-top: var(--sc-item-remove-margin-top, 9rem);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
> .icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
> .text {
|
||||
font-family: KaiseiOpti-Regular;
|
||||
font-size: 1.4rem;
|
||||
color: #808080;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.is-order-actions-layout {
|
||||
display: grid;
|
||||
grid-template-columns:
|
||||
var(--sc-item-img-width, 14.8rem)
|
||||
minmax(0, 1fr)
|
||||
var(--sc-item-order-amount-width, 12rem)
|
||||
var(--sc-item-order-action-width, 18rem);
|
||||
column-gap: var(--sc-item-order-column-gap, 2rem);
|
||||
|
||||
> .content {
|
||||
min-width: 0;
|
||||
}
|
||||
> .content {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
> .right {
|
||||
display: contents;
|
||||
> .right {
|
||||
display: contents;
|
||||
|
||||
> .amount {
|
||||
grid-column: 3;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
transform: translateX(var(--sc-item-order-actions-offset, 0));
|
||||
}
|
||||
> .amount {
|
||||
grid-column: 3;
|
||||
align-self: center;
|
||||
white-space: nowrap;
|
||||
transform: translateX(var(--sc-item-order-actions-offset, 0));
|
||||
}
|
||||
|
||||
.c-svg {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
> .download {
|
||||
grid-column: 4;
|
||||
cursor: pointer;
|
||||
transform: translateX(var(--sc-item-order-actions-offset, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.c-svg {
|
||||
width: initial;
|
||||
height: initial;
|
||||
}
|
||||
> .download {
|
||||
grid-column: 4;
|
||||
cursor: pointer;
|
||||
transform: translateX(var(--sc-item-order-actions-offset, 0));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -43,8 +43,7 @@
|
||||
:key="v.id"
|
||||
:info="v"
|
||||
:show-tags="!isMini || isView"
|
||||
:show-size="!isMini"
|
||||
:show-size-date="!isMini"
|
||||
:show-date="!isMini"
|
||||
:show-remove="!isView"
|
||||
@remove="handleRemoveClick"
|
||||
>
|
||||
@@ -54,12 +53,6 @@
|
||||
</sc-item>
|
||||
</div>
|
||||
<div class="footer" v-if="isMini">
|
||||
<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 || isView">
|
||||
<span class="label">Total</span>
|
||||
<span class="value">${{ allAmount }}<span> HKD</span></span>
|
||||
@@ -117,7 +110,6 @@
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
|
||||
title: 'North Outfit Set',
|
||||
brand: 'Roaming Clouds',
|
||||
fileSize: 1024, // kb
|
||||
date: '2026-5-20 5:20',
|
||||
amount: 49.99,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
@@ -128,7 +120,6 @@
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
|
||||
title: 'Weekend Drift Co-ord',
|
||||
brand: 'Urban Line Edit',
|
||||
fileSize: 1225, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 9.99,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
@@ -139,7 +130,6 @@
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png',
|
||||
title: 'Static Street Suit',
|
||||
brand: 'Off Grid Apparel',
|
||||
fileSize: 1024 * 18, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 12,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
@@ -150,7 +140,6 @@
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png',
|
||||
title: 'Maison Contour Suit',
|
||||
brand: 'Ivory Muse Studio',
|
||||
fileSize: 100, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 18,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
@@ -161,7 +150,6 @@
|
||||
url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png',
|
||||
title: 'Prime Atelier Set',
|
||||
brand: 'Ivory Muse Studio',
|
||||
fileSize: 1024 * 24, // kb
|
||||
date: '2026-5-21 13:14',
|
||||
amount: 20,
|
||||
tags: ['female', 'skirt', 'blouse', 'outwear'],
|
||||
|
||||
@@ -65,8 +65,7 @@
|
||||
class="order-card__item"
|
||||
:style="{ '--order-item-placeholder': item.color }"
|
||||
:info="item"
|
||||
:show-size="false"
|
||||
:show-size-date="false"
|
||||
:show-date="false"
|
||||
:show-remove="false"
|
||||
order-actions-layout
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user