<template>
	<div class="shopping-cart">
		<div class="content">
			<sc-list @selected-change="(v) => (selectedList = v)" />
			<order-summary :list="selectedList" />
		</div>
		<my-footer />
	</div>
</template>

<script setup lang="ts">
	import { computed, onMounted, ref } from 'vue'
	import orderSummary from './order-summary.vue'
	import scList from './sc-list.vue'
	import myFooter from '@/components/Footer.vue'
	const selectedList = ref([])
</script>

<style lang="less" scoped>
	.shopping-cart {
		width: 100%;
		height: 100%;
		overflow: hidden;
		overflow-y: auto;
		--content-top: 4.8rem;
		> .content {
			max-width: 126rem;
			padding-top: var(--content-top);
			margin: 0 auto;
			min-height: var(--app-view-height);
			display: flex;
			align-items: flex-start;
			> .sc-list {
				flex: 1;
				margin-right: 7.5rem;
				margin-bottom: 8rem;
				--sc-list-header-top: var(--content-top);
			}
			> .order-summary {
				position: sticky;
				top: var(--content-top);
				max-height: var(--app-view-height);
			}
		}
	}
</style>
