aidlab/Aida_Purchaser_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home修改

Browse Source
This commit is contained in:
李志鹏
2026-05-11 13:56:10 +08:00
parent 51e6933f9f
commit 33043eedf1
20 changed files with 340 additions and 414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/assets/css/style.css
View File

@@ -122,11 +122,11 @@ button[custom="white"] {
height: 5rem; height: 5rem;
padding: 0 1rem; padding: 0 1rem;
border-radius: 0; border-radius: 0;
border: none;
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
font-size: var(--button-font-size, 2rem); font-size: var(--button-font-size, 2rem);
color: var(--button-color, #232323); color: var(--button-color, #232323);
background: var(--button-bgcolor, #fff); background: var(--button-bgcolor, #fff);
border: var(--button-border, none);
cursor: pointer; cursor: pointer;
} }
button[custom]:active, button[custom]:active,
@@ -141,6 +141,11 @@ button[custom="black"] {
--button-click-color: #fff; --button-click-color: #fff;
--button-font-size: 1.6rem; --button-font-size: 1.6rem;
} }
.el-select-dropdown__item { button[custom="black-box"] {
padding: 0 2rem !important; --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;
} }

11
src/assets/css/style.less
View File

@@ -149,11 +149,11 @@ button[custom="white"] {
height: 5rem; height: 5rem;
padding: 0 1rem; padding: 0 1rem;
border-radius: 0; border-radius: 0;
border: none;
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
font-size: var(--button-font-size, 2rem); font-size: var(--button-font-size, 2rem);
color: var(--button-color, #232323); color: var(--button-color, #232323);
background: var(--button-bgcolor, #fff); background: var(--button-bgcolor, #fff);
border: var(--button-border, none);
cursor: pointer; cursor: pointer;
&:active { &:active {
@@ -168,4 +168,13 @@ button[custom="black"] {
--button-click-bgcolor: #333; --button-click-bgcolor: #333;
--button-click-color: #fff; --button-click-color: #fff;
--button-font-size: 1.6rem; --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;
} }

BIN
src/assets/images/home/bg.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 851 KiB

BIN
src/assets/images/home/bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 652 KiB

BIN
src/assets/images/home/designer-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 688 KiB

BIN
src/assets/images/home/designers-left.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 569 KiB

BIN
src/assets/images/home/designers-right.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 151 KiB

BIN
src/assets/images/logos/aidaAndStylish.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.9 KiB

3
src/lang/en.ts
View File

@@ -2,8 +2,7 @@ export default {
Login: { Login: {
login: 'Log in', login: 'Log in',
register: 'Register', register: 'Register',
loginTo: 'Log on to <span>FiDA</span>', loginTip: 'Platform integrated with AiDA.<br />AiDA account login required.',
loginTitle: 'A multi-agent canvas for rapid, trend driven design iteration.',
name: 'Name', name: 'Name',
email: 'Email', email: 'Email',
password: 'Password', password: 'Password',

4
src/lang/zh-cn.ts
View File

@@ -2,9 +2,7 @@ export default {
Login: { Login: {
login: '登录', login: '登录',
register: '注册', register: '注册',
signUp: '注册', loginTip: '与 AiDA 集成的平台。<br />需要登录 AiDA 账户。',
loginTo: '登录到 <span>FiDA</span',
loginTitle: '一个多智能体画布，用于快速、趋势驱动的设计迭代。',
name: '姓名', name: '姓名',
email: '邮箱', email: '邮箱',
password: '密码', password: '密码',

4
src/views/home/index.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div class="home-index"> <div class="home-index">
<section-index /> <section-index />
<section-designers /> <section-designer />
<section-design /> <section-design />
<section-digital-items1 /> <section-digital-items1 />
<section-digital-items2 /> <section-digital-items2 />
@@ -12,7 +12,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' import { computed } from 'vue'
import SectionIndex from './section-index.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 SectionDesign from './section-design.vue'
import SectionDigitalItems1 from './section-digital-items1.vue' import SectionDigitalItems1 from './section-digital-items1.vue'
import SectionDigitalItems2 from './section-digital-items2.vue' import SectionDigitalItems2 from './section-digital-items2.vue'

51
src/views/home/section-designer.vue Normal file
View 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>

130
src/views/home/section-designers.vue
View File

@@ -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>

86
src/views/home/section-index.vue
View File

@@ -1,74 +1,58 @@
<template> <template>
<section class="section-index bgw"> <section class="section-index bgw">
<img src="@/assets/images/home/bg.jpg" class="bg" /> <img src="@/assets/images/home/bg.png" class="bg" />
<div class="shade-1"></div>
<div class="shade-2"></div>
<div class="content"> <div class="content">
<div class="title">Windswept Burden</div> <div class="title" v-html="title"></div>
<div class="tip">We are spiritual nomads carrying<br />what wind cannot take.</div> <div class="tip">
<button custom>View More</button> Discover collections through the stories behind their creation. A curated space connecting
<div class="aida-logo"><img src="@/assets/images/logos/aida.png" /></div> designers, narratives, and fashion commerce.
<p class="tip"> </div>
What you wear is how you present yourself to the world, especially today, when human <button custom="black-box" @click="handleClickArrow">
contacts are so quick. Fashion is instant language <svg-icon name="arrow_right" size="34" />
</p> </button>
<p class="tip">I firmly believe that with the right footwear one can rule the world.</p>
</div> </div>
</section> </section>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed } from 'vue' 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> </script>
<style lang="less"> <style lang="less">
.section-index { .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 { > .content {
top: 16rem; top: 13.7rem;
left: 9rem; left: 9rem;
color: #fff; color: #232323;
> .title { > .title {
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
font-size: 6rem; font-size: 7rem;
margin-bottom: 3rem; margin-bottom: 3rem;
} span {
> div.tip { font-family: KaiseiOpti-Medium;
font-family: KaiseiOpti-Regular; &.small {
font-size: 3.2rem; font-size: 6rem;
line-height: 4.3rem; }
}
> button {
margin-top: 11.6rem;
margin-bottom: 13.9rem;
}
> .aida-logo {
margin-bottom: 3rem;
> img {
width: auto;
height: 5rem;
} }
} }
> p.tip { > .tip {
font-family: KaiseiOpti-Regular; width: 50rem;
font-size: 1.2rem; font-size: 1.8rem;
line-height: 2rem; line-height: 2.6rem;
color: #ededed; color: #585858;
}
> button {
margin-top: 12rem;
min-width: 0;
width: 8rem;
height: 8rem;
} }
} }
} }

24
src/views/login/login.vue
View File

@@ -1,5 +1,9 @@
<template> <template>
<div class="login"> <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 :model="formData" :rules="ruleForm" label-position="top" ref="formRef">
<el-form-item :label="$t('Login.email')" prop="email"> <el-form-item :label="$t('Login.email')" prop="email">
<el-input v-model="formData.email" :placeholder="$t('Login.enterEmail')" name="email" /> <el-input v-model="formData.email" :placeholder="$t('Login.enterEmail')" name="email" />
@@ -72,4 +76,24 @@
<style lang="less" scoped> <style lang="less" scoped>
@import './less/style.less'; @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> </style>

21
src/views/main-header.vue
View File

@@ -62,6 +62,10 @@
</div> </div>
</template> </template>
</el-popover> </el-popover>
<div class="language" @click="onLanguageClick">
<span :class="{ active: locale === 'CHINESE_SIMPLIFIED' }">中</span> /
<span :class="{ active: locale === 'ENGLISH' }">ENG</span>
</div>
</div> </div>
</div> </div>
</template> </template>
@@ -70,6 +74,8 @@
import { computed, ref } from 'vue' import { computed, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router' import { useRouter, useRoute } from 'vue-router'
import myEvent from '@/utils/myEvent' import myEvent from '@/utils/myEvent'
import { useI18n } from 'vue-i18n'
const { t, locale } = useI18n()
const router = useRouter() const router = useRouter()
const route = useRoute() const route = useRoute()
const activePath = computed(() => route.path) const activePath = computed(() => route.path)
@@ -131,6 +137,10 @@
hideProfilePopover() hideProfilePopover()
console.log('logout') console.log('logout')
} }
const onLanguageClick = () => {
locale.value = locale.value === 'ENGLISH' ? 'CHINESE_SIMPLIFIED' : 'ENGLISH'
localStorage.setItem('language', locale.value)
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -159,7 +169,6 @@
height: 2.4rem; height: 2.4rem;
} }
> .login { > .login {
font-family: Kaisei Opti;
font-size: 1.6rem; font-size: 1.6rem;
} }
> .profile { > .profile {
@@ -168,6 +177,15 @@
border-radius: 50%; border-radius: 50%;
background: #f5f5f5; background: #f5f5f5;
} }
> .language {
font-family: KaiseiOpti-Regular;
font-size: 1.6rem;
color: #c2c2c2;
> .active {
color: #232323;
font-family: KaiseiOpti-Medium;
}
}
} }
> .center, > .center,
> .right { > .right {
@@ -195,7 +213,6 @@
font-size: 1.6rem; font-size: 1.6rem;
color: #232323; color: #232323;
border-bottom: 0.1rem solid transparent; border-bottom: 0.1rem solid transparent;
font-family: Kaisei Opti;
} }
&.active { &.active {
> span { > span {

18
src/views/shoppingCart/order-summary.vue
View File

@@ -18,16 +18,6 @@
> >
</div> </div>
<br /> <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 /> <br />
<div class="total"> <div class="total">
<span class="label">Total</span> <span class="label">Total</span>
@@ -65,14 +55,6 @@
}) })
return arr 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 totalAmount = computed(() => props.list.reduce((pre, cur) => pre + cur.amount, 0).toFixed(2))
const handleCheckout = () => { const handleCheckout = () => {
console.log('购买：', props.list) console.log('购买：', props.list)

374
src/views/shoppingCart/sc-item.vue
View File

@@ -1,200 +1,200 @@
<template> <template>
<div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }"> <div class="sc-item" :class="{ 'is-order-actions-layout': orderActionsLayout }">
<slot name="checkbox" /> <slot name="checkbox" />
<img :src="info.url" /> <img :src="info.url" />
<div class="content"> <div class="content">
<div class="title">{{ info.title }}</div> <div class="title">{{ info.title }}</div>
<div class="brand"> <div class="brand">
<span class="icon"><svg-icon name="order-shop" size="24" /></span> <span class="icon"><svg-icon name="order-shop" size="24" /></span>
<span class="text">{{ info.brand }}</span> <span class="text">{{ info.brand }}</span>
</div> </div>
<div class="tags" v-if="showTags"> <div class="tags" v-if="showTags">
<span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span> <span v-for="tag in info.tags" :key="tag" class="tag">{{ tag }}</span>
</div> </div>
<div class="size" v-if="showSize"> <div class="date" v-if="showDate">
<div class="icon"><svg-icon name="order-file" size="18" /></div> <!-- <div class="icon"><svg-icon name="order-file" size="18" /></div> -->
<div class="text"> <div class="text">
<span>{{ FormatBytes(info.fileSize) }}</span> {{ FormatDate(info.date, 'SM D, YYYY, h:mm A') }}
<span v-if="showSizeDate" </div>
>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;{{ </div>
FormatDate(info.date, 'SM D, YYYY, h:mm A') </div>
}}</span <div class="right">
> <div class="amount">${{ info.amount }}<span> HKD</span></div>
</div> <SvgIcon
</div> v-if="orderActionsLayout"
</div> class="download"
<div class="right"> name="download"
<div class="amount">${{ info.amount }}<span> HKD</span></div> size="32"
<SvgIcon v-if="orderActionsLayout" class="download" name="download" size="32" color="#232323" /> color="#232323"
<div class="remove" v-if="showRemove" @click="onRemove"> />
<span class="icon"><svg-icon name="order-delete" size="18" /></span> <div class="remove" v-if="showRemove" @click="onRemove">
<span class="text">Remove</span> <span class="icon"><svg-icon name="order-delete" size="18" /></span>
</div> <span class="text">Remove</span>
</div> </div>
</div> </div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref, onMounted } from 'vue' import { computed, ref, onMounted } from 'vue'
import { FormatBytes, FormatDate } from '@/utils/tools' import { FormatBytes, FormatDate } from '@/utils/tools'
const emit = defineEmits(['remove']) const emit = defineEmits(['remove'])
const props = defineProps({ const props = defineProps({
showTags: { type: Boolean, default: true }, showTags: { type: Boolean, default: true },
showSize: { type: Boolean, default: true }, showDate: { type: Boolean, default: true },
showSizeDate: { type: Boolean, default: true }, showRemove: { type: Boolean, default: true },
showRemove: { type: Boolean, default: true }, orderActionsLayout: { type: Boolean, default: false },
orderActionsLayout: { type: Boolean, default: false }, info: { type: Object, default: () => {} }
info: { type: Object, default: () => {} } })
}) const onRemove = () => {
const onRemove = () => { emit('remove', props.info.id)
emit('remove', props.info.id) }
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.sc-item { .sc-item {
border-bottom: 0.1rem solid #c4c4c4; border-bottom: 0.1rem solid #c4c4c4;
padding: var(--sc-item-padding, 2.4rem 0); padding: var(--sc-item-padding, 2.4rem 0);
display: flex; display: flex;
align-items: center; align-items: center;
> img { > img {
width: var(--sc-item-img-width, 14.8rem); width: var(--sc-item-img-width, 14.8rem);
height: var(--sc-item-img-height, 18.8rem); height: var(--sc-item-img-height, 18.8rem);
object-fit: contain; object-fit: contain;
background-color: #f6f6f6; background-color: #f6f6f6;
} }
> .content { > .content {
flex: 1; flex: 1;
margin: var(--sc-item-content-margin, 0 4rem); margin: var(--sc-item-content-margin, 0 4rem);
align-self: var(--sc-item-content-align-self); align-self: var(--sc-item-content-align-self);
> * { > * {
margin-bottom: var(--sc-item-margin-bottom, 1.6rem); margin-bottom: var(--sc-item-margin-bottom, 1.6rem);
&:last-child { &:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
} }
> .title { > .title {
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-title-font-size, 2.4rem); font-size: var(--sc-item-title-font-size, 2.4rem);
color: #232323; color: #232323;
} }
> .brand { > .brand {
display: flex; display: flex;
align-items: center; align-items: center;
> .icon { > .icon {
width: 2.4rem; width: 2.4rem;
height: 2.4rem; height: 2.4rem;
margin-right: 1rem; margin-right: 1rem;
} }
> .text { > .text {
font-size: var(--sc-item-brand-font-size, 1.6rem); font-size: var(--sc-item-brand-font-size, 1.6rem);
text-decoration: underline; text-decoration: underline;
color: #232323; color: #232323;
} }
} }
> .tags { > .tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.8rem; gap: 0.8rem;
> .tag { > .tag {
min-width: var(--sc-item-tag-min-width, 8.8rem); min-width: var(--sc-item-tag-min-width, 8.8rem);
height: var(--sc-item-tag-height, 2.4rem); height: var(--sc-item-tag-height, 2.4rem);
line-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); border-radius: var(--sc-item-tag-radius, 2.4rem);
font-size: var(--sc-item-tag-font-size, 1.4rem); font-size: var(--sc-item-tag-font-size, 1.4rem);
padding: var(--sc-item-tag-padding, 0 1rem); padding: var(--sc-item-tag-padding, 0 1rem);
text-align: center; text-align: center;
color: #8f8f8f; color: #8f8f8f;
background-color: #eee; background-color: #eee;
} }
} }
> .size { > .date {
display: flex; display: flex;
align-items: center; align-items: center;
> .icon { > .icon {
width: 2.4rem; width: 2.4rem;
height: 2.4rem; height: 2.4rem;
margin-right: 1rem; margin-right: 1rem;
color: #808080; color: #808080;
} }
> .text { > .text {
font-family: KaiseiOpti-Regular; font-family: KaiseiOpti-Regular;
font-size: 1.4rem; font-size: 1.4rem;
color: #808080; color: #808080;
} }
} }
} }
> .right { > .right {
align-self: var(--sc-item-right-align-self, end); align-self: var(--sc-item-right-align-self, end);
display: var(--sc-item-right-display); display: var(--sc-item-right-display);
flex-direction: var(--sc-item-right-flex-direction); flex-direction: var(--sc-item-right-flex-direction);
justify-content: var(--sc-item-right-justify-content); justify-content: var(--sc-item-right-justify-content);
align-items: var(--sc-item-right-align-items); align-items: var(--sc-item-right-align-items);
height: var(--sc-item-right-height); height: var(--sc-item-right-height);
margin-top: var(--sc-item-right-margin-top); margin-top: var(--sc-item-right-margin-top);
> .amount { > .amount {
font-family: KaiseiOpti-Bold; font-family: KaiseiOpti-Bold;
font-size: var(--sc-item-amount-font-size, 2.2rem); font-size: var(--sc-item-amount-font-size, 2.2rem);
color: #232323; color: #232323;
> span { > span {
font-size: var(--sc-item-currency-font-size, 1.4rem); font-size: var(--sc-item-currency-font-size, 1.4rem);
color: #585858; color: #585858;
vertical-align: bottom; vertical-align: bottom;
} }
} }
> .remove { > .remove {
margin-top: var(--sc-item-remove-margin-top, 9rem); margin-top: var(--sc-item-remove-margin-top, 9rem);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
> .icon { > .icon {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
margin-right: 0.4rem; margin-right: 0.4rem;
} }
> .text { > .text {
font-family: KaiseiOpti-Regular; font-family: KaiseiOpti-Regular;
font-size: 1.4rem; font-size: 1.4rem;
color: #808080; color: #808080;
} }
} }
} }
&.is-order-actions-layout { &.is-order-actions-layout {
display: grid; display: grid;
grid-template-columns: grid-template-columns:
var(--sc-item-img-width, 14.8rem) var(--sc-item-img-width, 14.8rem)
minmax(0, 1fr) minmax(0, 1fr)
var(--sc-item-order-amount-width, 12rem) var(--sc-item-order-amount-width, 12rem)
var(--sc-item-order-action-width, 18rem); var(--sc-item-order-action-width, 18rem);
column-gap: var(--sc-item-order-column-gap, 2rem); column-gap: var(--sc-item-order-column-gap, 2rem);
> .content { > .content {
min-width: 0; min-width: 0;
} }
> .right { > .right {
display: contents; display: contents;
> .amount { > .amount {
grid-column: 3; grid-column: 3;
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
transform: translateX(var(--sc-item-order-actions-offset, 0)); transform: translateX(var(--sc-item-order-actions-offset, 0));
} }
.c-svg { .c-svg {
width: initial; width: initial;
height: initial; height: initial;
} }
> .download { > .download {
grid-column: 4; grid-column: 4;
cursor: pointer; cursor: pointer;
transform: translateX(var(--sc-item-order-actions-offset, 0)); transform: translateX(var(--sc-item-order-actions-offset, 0));
} }
} }
} }
} }
</style> </style>

14
src/views/shoppingCart/sc-list.vue
View File

@@ -43,8 +43,7 @@
:key="v.id" :key="v.id"
:info="v" :info="v"
:show-tags="!isMini || isView" :show-tags="!isMini || isView"
:show-size="!isMini" :show-date="!isMini"
:show-size-date="!isMini"
:show-remove="!isView" :show-remove="!isView"
@remove="handleRemoveClick" @remove="handleRemoveClick"
> >
@@ -54,12 +53,6 @@
</sc-item> </sc-item>
</div> </div>
<div class="footer" v-if="isMini"> <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>&nbsp;{{ allTotalSize.unit }}</span></span
>
</div>
<div class="total" v-show="list.length > 0 || isView"> <div class="total" v-show="list.length > 0 || isView">
<span class="label">Total</span> <span class="label">Total</span>
<span class="value">${{ allAmount }}<span> HKD</span></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', url: 'http://118.31.39.42:3000/falls/shopping-cart-1.png',
title: 'North Outfit Set', title: 'North Outfit Set',
brand: 'Roaming Clouds', brand: 'Roaming Clouds',
fileSize: 1024, // kb
date: '2026-5-20 5:20', date: '2026-5-20 5:20',
amount: 49.99, amount: 49.99,
tags: ['female', 'skirt', 'blouse', 'outwear'], tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -128,7 +120,6 @@
url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png', url: 'http://118.31.39.42:3000/falls/shopping-cart-2.png',
title: 'Weekend Drift Co-ord', title: 'Weekend Drift Co-ord',
brand: 'Urban Line Edit', brand: 'Urban Line Edit',
fileSize: 1225, // kb
date: '2026-5-21 13:14', date: '2026-5-21 13:14',
amount: 9.99, amount: 9.99,
tags: ['female', 'skirt', 'blouse', 'outwear'], tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -139,7 +130,6 @@
url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png', url: 'http://118.31.39.42:3000/falls/shopping-cart-3.png',
title: 'Static Street Suit', title: 'Static Street Suit',
brand: 'Off Grid Apparel', brand: 'Off Grid Apparel',
fileSize: 1024 * 18, // kb
date: '2026-5-21 13:14', date: '2026-5-21 13:14',
amount: 12, amount: 12,
tags: ['female', 'skirt', 'blouse', 'outwear'], tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -150,7 +140,6 @@
url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png', url: 'http://118.31.39.42:3000/falls/shopping-cart-4.png',
title: 'Maison Contour Suit', title: 'Maison Contour Suit',
brand: 'Ivory Muse Studio', brand: 'Ivory Muse Studio',
fileSize: 100, // kb
date: '2026-5-21 13:14', date: '2026-5-21 13:14',
amount: 18, amount: 18,
tags: ['female', 'skirt', 'blouse', 'outwear'], tags: ['female', 'skirt', 'blouse', 'outwear'],
@@ -161,7 +150,6 @@
url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png', url: 'http://118.31.39.42:3000/falls/shopping-cart-5.png',
title: 'Prime Atelier Set', title: 'Prime Atelier Set',
brand: 'Ivory Muse Studio', brand: 'Ivory Muse Studio',
fileSize: 1024 * 24, // kb
date: '2026-5-21 13:14', date: '2026-5-21 13:14',
amount: 20, amount: 20,
tags: ['female', 'skirt', 'blouse', 'outwear'], tags: ['female', 'skirt', 'blouse', 'outwear'],

3
src/views/wardrobe/Orders.vue
View File

@@ -65,8 +65,7 @@
class="order-card__item" class="order-card__item"
:style="{ '--order-item-placeholder': item.color }" :style="{ '--order-item-placeholder': item.color }"
:info="item" :info="item"
:show-size="false" :show-date="false"
:show-size-date="false"
:show-remove="false" :show-remove="false"
order-actions-layout order-actions-layout
/> />