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

购物车

Browse Source
This commit is contained in:
李志鹏
2026-04-23 11:48:22 +08:00
parent 32a801b24f
commit b0ee5a0783
11 changed files with 689 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/views/shoppingCart/order-summary.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<div class="order-summary">
<div class="title">Order Summary</div>
<div class="count">
<span class="label">Selected</span>
<span class="value">3</span>
</div>
<div class="hr"></div>
<div class="brands-header">
<span class="icon"><svg-icon name="order-shop" size="18" /></span>
<span class="text">Brands</span>
</div>
<div class="brands-item" v-for="v in brandsList" :key="v.name">
<span class="label">{{ v.name }}</span>
<span class="value"
><span>{{ v.count }}</span
>item</span
>
</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">36 <span>mb</span></span>
</div>
<div class="hr"></div>
<br />
<div class="total">
<span class="label">Total</span>
<span class="value"><span>$45.00</span> HKD</span>
</div>
<div class="hr"></div>
<button class="checkout-btn" custom="black">CHECKOUT SELECTED</button>
<div class="tip">Digital assets. Creator retains copyright.</div>
</div>
</template>
<script setup lang="ts">
import { computed, ref } from 'vue'
const brandsList = ref([
{
name: 'Roaming Clouds',
count: 1
},
{
name: 'Off Grid Apparel',
count: 1
},
{
name: 'Ivory Muse Studio',
count: 1
}
])
</script>
<style lang="less" scoped>
.order-summary {
width: 39.8rem;
padding: 3rem 2rem 3rem 2.4rem;
height: auto;
background-color: #f6f6f6;
> .title {
font-family: KaiseiOpti-Bold;
font-size: 2.4rem;
line-height: 2.3rem;
color: #232323;
margin-bottom: 1.8rem;
}
> div {
display: flex;
justify-content: space-between;
align-items: center;
}
> .count {
color: #232323;
> .label {
font-size: 1.6rem;
}
> .value {
font-size: 1.4rem;
}
}
> .hr {
margin: 1.2rem 0;
width: 100%;
height: 0;
border-top: 0.1rem solid #c4c4c4;
}
> .brands-header {
justify-content: flex-start;
margin-bottom: 1rem;
> .icon {
width: 2.4rem;
height: 2.4rem;
margin-right: 0.4rem;
}
> .text {
font-size: 1.4rem;
color: #232323;
}
}
> .brands-item {
margin-bottom: 0.8rem;
padding-left: 1rem;
font-size: 1.2rem;
> .label {
text-decoration: underline;
color: #585858;
}
> .value {
color: #808080;
&:deep(span) {
font-size: 1.4rem;
color: #585858;
margin-right: 0.8rem;
}
}
}
> .total-file-size {
> .label {
display: flex;
align-items: center;
> .icon {
width: 2.4rem;
height: 2.4rem;
margin-right: 0.4rem;
}
}
> .value {
> span {
color: #808080;
}
}
}
> .total {
> .value {
color: #585858;
> span {
font-size: 2.2rem;
color: #232323;
}
}
}
> .checkout-btn {
width: 100%;
margin-top: 3rem;
}
> .tip {
margin-top: 1rem;
font-family: KaiseiOpti-Regular;
font-size: 1.2rem;
justify-content: center;
color: #808080;
}
}
</style>