book-web/src/views/book/component/trolley.vue

<script setup lang="ts">
const tableData = [
	{
		id: 'string',
		book_name: 'string',
		price: 'string',
		book_cover: 'string',
		introduction: 'string'
	}
]

const handleSelect = item => {
	console.log(item)
}

const handleSelectAll = item => {
	console.log(item)
}
</script>

<template>
	<div class="trolley-main">
		<div class="torry-body">
			<div class="all">全部商品（30）</div>
			<el-button round>删除</el-button>
			<el-button round>移入收藏夹</el-button>
			<el-table :data="tableData" style="width: 100%" @select="handleSelect" @select-all="handleSelectAll">
				<el-table-column type="selection" width="55" />
				<el-table-column label="书本编号" width="120" property="id" />

				<el-table-column property="book_cover" label="封面" width="120" />
				<el-table-column property="book_name" label="书名" width="240" />
				<el-table-column property="price" label="价格" />
				<el-table-column property="introduction" label="介绍" show-overflow-tooltip />
			</el-table>
		</div>
		<div class="torry-sum">
			<div class="torry-top"><span class="title">结算明细</span> <span class="sp">已选0件商品</span></div>
			<div class="torry-b">
				<div style="color: #7c889c; text-align: center; margin-top: 80px">还没有待结算的商品</div>
			</div>
			<div class="torry-bottom">
				<div><span style="font-size: 14px; font-weight: bold">合计：</span><span style="font-size: 24px; color: #ff5500">0</span></div>
				<button>结算</button>
			</div>
		</div>
	</div>
</template>

<style scoped lang="scss">
.trolley-main {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 50px;

	.torry-body {
		width: 1000px;
		min-height: 18px;
		background: white;
		padding: 10px;

		.all {
			margin: 10px;
			font-size: 20px;
			font-weight: bold;
		}
	}
}

.torry-sum {
	width: 368px;
	min-height: 280px;
	position: fixed;
	background: white;
	z-index: 50;
	right: 40px;
	border-radius: 20px;
	box-shadow: rgba(180, 180, 180, 0.2) 3px 3px;
	padding: 20px;

	.torry-top {
		border-bottom: 1px solid #ccc;
		height: 40px;
		line-height: 40px;

		.title {
			font-size: 22px;
			font-weight: bold;
		}

		.sp {
			font-size: 18px;
			font-weight: bold;
			margin-left: 5px;
		}
	}

	.torry-b {
		width: 100%;
		height: 100px;
	}

	.torry-bottom {
		display: flex;
		width: 100%;
		height: 78px;
		align-items: center;
		justify-content: space-between;

		button {
			display: inline-block;
			height: 48px;
			width: 120px;
			background-color: #ff5000;
			border-radius: 8px;
			font-weight: 600;
			font-size: 16px;
			color: #fff;
			text-align: center;
			line-height: 48px;
			text-decoration: none;
			cursor: pointer;
			border: none;
		}
	}
}
</style>