Aida_Purchaser_Front/src/views/shoppingCart/order-summary.vue

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