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

适配小屏

This commit is contained in:
gyq 2024-03-07 09:47:25 +08:00
parent b550cf3fd8
commit 396d237710
8 changed files with 73 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.vue
View File

@ -74,13 +74,12 @@ router.beforeEach((to, from) => {
--el-color-primary-dark-2: rgb(var(--r-darker), var(--g-darker), var(--b-darker)) !important; --el-color-primary-dark-2: rgb(var(--r-darker), var(--g-darker), var(--b-darker)) !important;
--el-color-primary-light-5: rgb(var(--r-lighter2), var(--g-lighter2), var(--b-lighter2)) !important; --el-color-primary-light-5: rgb(var(--r-lighter2), var(--g-lighter2), var(--b-lighter2)) !important;
--el-font-size-base: 20px !important; --el-font-size-base: 16px !important;
--el-message-close-size: 20px !important; --el-message-close-size: var(--el-font-size-base) !important;
--el-component-size-large: 50px !important; --el-component-size-large: 50px !important;
--el-mask-color: rgba(255, 255, 255, 0.6) !important; --el-mask-color: rgba(255, 255, 255, 0.6) !important;
} }
@font-face { @font-face {
font-family: 'num'; font-family: 'num';
src: url('@/assets/font/Ignotum-Regular.ttf'); src: url('@/assets/font/Ignotum-Regular.ttf');

2
src/components/leftMenu.vue
View File

@ -64,7 +64,7 @@ const menus = ref([
<style scoped lang="scss"> <style scoped lang="scss">
.left_menu_wrap { .left_menu_wrap {
height: 100vh; height: 100vh;
width: 120px; width: 90px;
background-color: #555; background-color: #555;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

54
src/components/payCard/payCard.vue
View File

@ -15,7 +15,7 @@
<div class="item" :class="{ active: payActive == index }" v-for="(item, index) in payList" <div class="item" :class="{ active: payActive == index }" v-for="(item, index) in payList"
:key="item.id" @click="payTypeChange(index, item)"> :key="item.id" @click="payTypeChange(index, item)">
<div class="icon"> <div class="icon">
<el-image :src="item.icon" style="width: 50px;height: 50px;"></el-image> <el-image :src="item.icon" class="img"></el-image>
</div> </div>
<span class="title">{{ item.payName }}</span> <span class="title">{{ item.payName }}</span>
</div> </div>
@ -175,12 +175,12 @@ onMounted(() => {
<style scoped lang="scss"> <style scoped lang="scss">
.card { .card {
padding: 20px; padding: var(--el-font-size-base);
height: 100%; height: 100%;
} }
.header { .header {
padding-bottom: 30px; padding-bottom: var(--el-font-size-base);
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
.t1 { .t1 {
@ -189,13 +189,13 @@ onMounted(() => {
font-weight: bold; font-weight: bold;
.title { .title {
font-size: 24px; font-size: var(--el-font-size-base);
position: relative; position: relative;
top: 14px; top: 14px;
} }
.num { .num {
font-size: 40px; font-size: 30px;
} }
} }
@ -208,21 +208,21 @@ onMounted(() => {
} }
.number_wrap { .number_wrap {
padding: 20px 0; padding: var(--el-font-size-base) 0;
.menus { .menus {
display: flex; display: flex;
gap: 20px; gap: var(--el-font-size-base);
.item { .item {
height: 196px; height: 130px;
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: #efefef; background-color: #efefef;
padding: 50px 0; padding: 10px 0;
border-radius: 10px; border-radius: 10px;
position: relative; position: relative;
$lineHeight: 4px; $lineHeight: 4px;
@ -230,18 +230,20 @@ onMounted(() => {
&.active { &.active {
&::after { &::after {
content: ""; content: "";
width: 60%; width: 50%;
height: $lineHeight; height: $lineHeight;
background-color: var(--primary-color); background-color: var(--primary-color);
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 20%; left: 25%;
border-radius: $lineHeight; border-radius: $lineHeight;
} }
} }
.icon { .img {
font-size: 30px; $size: 60px;
width: $size;
height: $size;
} }
.title { .title {
@ -252,38 +254,36 @@ onMounted(() => {
.input_wrap { .input_wrap {
display: flex; display: flex;
gap: 20px; gap: var(--el-font-size-base);
padding: 20px 0; padding: var(--el-font-size-base) 0;
.input { .input {
display: flex; display: flex;
align-items: center; align-items: center;
height: 80px; height: 60px;
border-radius: 10px; border-radius: 10px;
border: 1px solid var(--primary-color); border: 1px solid var(--primary-color);
font-size: 26px; font-size: calc(var(--el-font-size-base) + 10px);
font-weight: 400; padding: 0 var(--el-font-size-base);
padding: 0 30px;
} }
} }
.blance { .blance {
color: var(--el-color-danger); color: var(--el-color-danger);
font-size: 26px; font-size: calc(var(--el-font-size-base) + 10px);
} }
} }
.keybord_wrap { .keybord_wrap {
display: flex; display: flex;
padding-top: 20px;
.left { .left {
--item-height: calc((100vh - 650px) / 4); --item-height: calc((100vh - 440px) / 4);
flex: 1; flex: 1;
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: var(--item-height) var(--item-height) var(--item-height) var(--item-height); grid-template-rows: var(--item-height) var(--item-height) var(--item-height) var(--item-height);
gap: 20px; gap: var(--el-font-size-base);
.item { .item {
background-color: #efefef; background-color: #efefef;
@ -291,7 +291,7 @@ onMounted(() => {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 6px; border-radius: 6px;
font-size: 28px; font-size: calc(var(--el-font-size-base) + 10px);
&:active { &:active {
background-color: #dbdbdb; background-color: #dbdbdb;
@ -300,16 +300,16 @@ onMounted(() => {
} }
.pay_btn { .pay_btn {
flex: 0.3;
border-radius: 6px; border-radius: 6px;
width: 200px;
color: #fff; color: #fff;
background-color: var(--el-color-warning); background-color: var(--el-color-warning);
margin-left: 20px; margin-left: var(--el-font-size-base);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 26px; font-size: calc(var(--el-font-size-base) + 10px);
} }
} }
</style> </style>

20
src/components/skuModal.vue
View File

@ -176,34 +176,20 @@ defineExpose({
.row { .row {
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
margin-top: 20px; margin-top: var(--el-font-size-base);
.title { .title {
font-size: 20px; font-size: var(--el-font-size-base);
} }
.sku_wrap { .sku_wrap {
display: flex; display: flex;
padding: 14px 0; 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;
}
}
} }
} }
.footer { .footer {
padding-top: 100px; padding-top: 30px;
.info { .info {
height: 50px; height: 50px;

8
src/views/home/components/cartOperation.vue
View File

@ -122,14 +122,14 @@ function skuConfirm(e) {
<style scoped lang="scss"> <style scoped lang="scss">
.operation_wrap { .operation_wrap {
padding: 20px; padding: var(--el-font-size-base);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: var(--el-font-size-base);
.item { .item {
width: 100px; width: 80px;
height: 40px; height: 34px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;

18
src/views/home/components/goods.vue
View File

@ -210,7 +210,7 @@ defineExpose({
.header { .header {
display: flex; display: flex;
height: 80px; height: 60px;
justify-content: space-between; justify-content: space-between;
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
} }
@ -226,7 +226,8 @@ defineExpose({
position: relative; position: relative;
span { span {
font-size: 24px; font-size: var(--el-font-size-base);
font-weight: bold;
} }
&.active { &.active {
@ -279,11 +280,11 @@ defineExpose({
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 10px; gap: 10px;
padding: 20px; padding: var(--el-font-size-base);
} }
.shop_list { .shop_list {
max-height: calc(100vh - 40px - 80px - 80px); max-height: calc(100vh - 40px - 80px - 60px);
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -297,8 +298,8 @@ defineExpose({
.item_wrap { .item_wrap {
width: 20%; width: 20%;
padding: 0 10px; padding: 0 5px;
padding-bottom: 20px; padding-bottom: 5px;
.item { .item {
border: 1px solid #ececec; border: 1px solid #ececec;
@ -311,7 +312,7 @@ defineExpose({
} }
.dot { .dot {
padding: 0 14px; padding: 0 8px;
background-color: var(--el-color-danger); background-color: var(--el-color-danger);
color: #fff; color: #fff;
border-radius: 20px; border-radius: 20px;
@ -320,12 +321,11 @@ defineExpose({
right: 4px; right: 4px;
z-index: 1; z-index: 1;
font-size: 12px; font-size: 12px;
font-size: 18px;
} }
.cover { .cover {
width: 100%; width: 100%;
height: 150px; height: 80px;
} }
.name { .name {

31
src/views/home/components/settleAccount.vue
View File

@ -66,7 +66,7 @@ import { ipcRenderer } from 'electron'
const emit = defineEmits('paySuccess') const emit = defineEmits('paySuccess')
const dialogVisible = ref(true) const dialogVisible = ref(false)
const props = defineProps({ const props = defineProps({
cart: { cart: {
type: Array, type: Array,
@ -130,7 +130,7 @@ defineExpose({
width: 100%; width: 100%;
height: 100%; height: 100%;
display: flex; display: flex;
padding: 20px 0; padding: var(--el-font-size-base) 0;
.cart_list { .cart_list {
flex: 1; flex: 1;
@ -138,38 +138,40 @@ defineExpose({
.nav_wrap { .nav_wrap {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0 20px; padding: 0 var(--el-font-size-base);
.return { .return {
width: 60px; $size: 50px;
height: 60px; width: $size;
height: $size;
border-radius: 50%; border-radius: 50%;
border: 3px solid #333; border: 2px solid #333;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.icon { .icon {
color: #333; color: #333;
font-size: 26px; font-size: var(--el-font-size-base);
} }
} }
.info { .info {
flex: 1; flex: 1;
padding-left: 20px; padding-left: var(--el-font-size-base);
$padding: 10px;
.master_id { .master_id {
font-size: calc(var(--el-font-size-base) + 10px); font-size: calc(var(--el-font-size-base) + 10px);
border-bottom: 1px solid #ececec; border-bottom: 1px solid #ececec;
padding: 16px 0; padding: $padding 0;
} }
.btm { .btm {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 16px 0; padding: $padding 0;
.p { .p {
@ -180,8 +182,8 @@ defineExpose({
} }
.list_wrap { .list_wrap {
padding: 20px; padding: var(--el-font-size-base);
height: calc(100vh - 260px); height: calc(100vh - 220px);
overflow-y: auto; overflow-y: auto;
.item { .item {
@ -218,7 +220,7 @@ defineExpose({
padding-bottom: 10px; padding-bottom: 10px;
.tag { .tag {
padding: 4px 10px; padding: 2px 6px;
background-color: var(--el-color-danger); background-color: var(--el-color-danger);
color: #fff; color: #fff;
margin-right: 10px; margin-right: 10px;
@ -246,7 +248,7 @@ defineExpose({
.footer { .footer {
display: flex; display: flex;
padding-top: 20px; padding-top: 20px;
gap: 20px; gap: var(--el-font-size-base);
.editor { .editor {
border: 1px solid #ececec; border: 1px solid #ececec;
@ -255,7 +257,6 @@ defineExpose({
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #555; color: #555;
font-size: 22px;
} }
.button { .button {

20
src/views/home/index.vue
View File

@ -344,7 +344,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--el-color-info-light-7); background-color: var(--el-color-info-light-7);
padding-left: 20px; padding-left: var(--el-font-size-base);
.t { .t {
font-size: $fs; font-size: $fs;
@ -355,7 +355,7 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
background-color: var(--el-color-info-light-8); background-color: var(--el-color-info-light-8);
padding: 0 20px; padding: 0 var(--el-font-size-base);
.icon { .icon {
color: var(--el-color-primary); color: var(--el-color-primary);
@ -382,12 +382,12 @@ onMounted(() => {
.shop_list { .shop_list {
flex: 1; flex: 1;
height: calc(100vh - 40px - 60px - 130px); height: calc(100vh - 40px - 60px - 132px);
overflow-y: auto; overflow-y: auto;
border-right: 1px solid #ececec; border-right: 1px solid #ececec;
.item { .item {
padding: 20px; padding: var(--el-font-size-base);
&.active { &.active {
background-color: #f5f5f5; background-color: #f5f5f5;
@ -400,7 +400,7 @@ onMounted(() => {
.name_wrap { .name_wrap {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
font-size: 20px; font-size: var(--el-font-size-base);
} }
.sku_list { .sku_list {
@ -408,7 +408,7 @@ onMounted(() => {
padding-top: 10px; padding-top: 10px;
.tag { .tag {
padding: 4px 10px; padding: 2px 6px;
background-color: var(--el-color-danger); background-color: var(--el-color-danger);
color: #fff; color: #fff;
margin-right: 10px; margin-right: 10px;
@ -416,7 +416,7 @@ onMounted(() => {
} }
.num { .num {
padding-top: 20px; padding-top: var(--el-font-size-base);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
@ -448,7 +448,7 @@ onMounted(() => {
} }
.footer { .footer {
padding: 20px; padding: var(--el-font-size-base);
border-top: 1px solid #ececec; border-top: 1px solid #ececec;
.left { .left {
@ -465,7 +465,7 @@ onMounted(() => {
.icon { .icon {
display: block; display: block;
font-size: 20px; font-size: var(--el-font-size-base);
color: var(--primary-color); color: var(--primary-color);
} }
@ -521,7 +521,7 @@ onMounted(() => {
} }
.shop_manage { .shop_manage {
flex: 2; flex: 2.5;
margin-left: 20px; margin-left: 20px;
height: 100%; height: 100%;
} }