czg_team/cashierdesktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增收银页面

Browse Source
This commit is contained in:
gyq
2024-02-22 09:41:27 +08:00
parent 113bc4d730
commit 7558889840
13 changed files with 905 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/skuModal.vue Normal file
View File

@@ -0,0 +1,94 @@
<template>
<el-dialog title="选择规格" width="800" v-model="show">
<div class="header">选择规格</div>
<div class="row">
<div class="title">规格</div>
<div class="sku_wrap">
<div class="item">默认（1人份）</div>
</div>
</div>
<div class="row">
<div class="title">温度</div>
<div class="sku_wrap">
<div class="item">冰</div>
<div class="item">热</div>
</div>
</div>
<div class="row">
<div class="title">糖度</div>
<div class="sku_wrap">
<div class="item">不另外加糖</div>
<div class="item">半糖</div>
<div class="item">标准糖</div>
</div>
</div>
<div class="footer">
<div class="btn">
<el-button plain style="width: 100%;" @click="show = false">取消</el-button>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;">确认</el-button>
</div>
</div>
</el-dialog>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(true)
</script>
<style scoped lang="scss">
.header {
color: #999;
font-size: 20px;
}
.row {
border-bottom: 1px solid #ececec;
margin-top: 20px;
.title {
font-size: 20px;
}
.sku_wrap {
display: flex;
padding: 14px 0;
.item {
color: var(--primary-color);
padding: 8px 16px;
font-size: 18px;
border: 1px solid var(--primary-color);
margin-right: 14px;
border-radius: 2px;
&.active {
background-color: var(--primary-color);
color: #fff;
}
&:hover {
cursor: pointer;
background-color: var(--primary-color);
color: #fff;
}
}
}
}
.footer {
display: flex;
padding-top: 100px;
.btn {
flex: 1;
&:last-child {
margin-left: 14px;
}
}
}
</style>