129 lines
2.7 KiB
Vue
129 lines
2.7 KiB
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>
|