适配小屏
This commit is contained in:
parent
b550cf3fd8
commit
396d237710
|
|
@ -52,7 +52,7 @@ router.beforeEach((to, from) => {
|
|||
}
|
||||
|
||||
:root {
|
||||
--r:24;
|
||||
--r: 24;
|
||||
--g: 124;
|
||||
--b: 170;
|
||||
--r-lighter: calc(var(--r) + (255 - var(--r)) * 0.2);
|
||||
|
|
@ -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-light-5: rgb(var(--r-lighter2), var(--g-lighter2), var(--b-lighter2)) !important;
|
||||
|
||||
--el-font-size-base: 20px !important;
|
||||
--el-message-close-size: 20px !important;
|
||||
--el-font-size-base: 16px !important;
|
||||
--el-message-close-size: var(--el-font-size-base) !important;
|
||||
--el-component-size-large: 50px !important;
|
||||
--el-mask-color: rgba(255, 255, 255, 0.6) !important;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'num';
|
||||
src: url('@/assets/font/Ignotum-Regular.ttf');
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ const menus = ref([
|
|||
<style scoped lang="scss">
|
||||
.left_menu_wrap {
|
||||
height: 100vh;
|
||||
width: 120px;
|
||||
width: 90px;
|
||||
background-color: #555;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<div class="item" :class="{ active: payActive == index }" v-for="(item, index) in payList"
|
||||
:key="item.id" @click="payTypeChange(index, item)">
|
||||
<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>
|
||||
<span class="title">{{ item.payName }}</span>
|
||||
</div>
|
||||
|
|
@ -175,12 +175,12 @@ onMounted(() => {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.card {
|
||||
padding: 20px;
|
||||
padding: var(--el-font-size-base);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding-bottom: 30px;
|
||||
padding-bottom: var(--el-font-size-base);
|
||||
border-bottom: 1px solid #ececec;
|
||||
|
||||
.t1 {
|
||||
|
|
@ -189,13 +189,13 @@ onMounted(() => {
|
|||
font-weight: bold;
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-size: var(--el-font-size-base);
|
||||
position: relative;
|
||||
top: 14px;
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 40px;
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -208,21 +208,21 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.number_wrap {
|
||||
padding: 20px 0;
|
||||
padding: var(--el-font-size-base) 0;
|
||||
|
||||
.menus {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.item {
|
||||
height: 196px;
|
||||
height: 130px;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #efefef;
|
||||
padding: 50px 0;
|
||||
padding: 10px 0;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
$lineHeight: 4px;
|
||||
|
|
@ -230,18 +230,20 @@ onMounted(() => {
|
|||
&.active {
|
||||
&::after {
|
||||
content: "";
|
||||
width: 60%;
|
||||
width: 50%;
|
||||
height: $lineHeight;
|
||||
background-color: var(--primary-color);
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 20%;
|
||||
left: 25%;
|
||||
border-radius: $lineHeight;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 30px;
|
||||
.img {
|
||||
$size: 60px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
}
|
||||
|
||||
.title {
|
||||
|
|
@ -252,38 +254,36 @@ onMounted(() => {
|
|||
|
||||
.input_wrap {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
padding: 20px 0;
|
||||
gap: var(--el-font-size-base);
|
||||
padding: var(--el-font-size-base) 0;
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 80px;
|
||||
height: 60px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--primary-color);
|
||||
font-size: 26px;
|
||||
font-weight: 400;
|
||||
padding: 0 30px;
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
padding: 0 var(--el-font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
.blance {
|
||||
color: var(--el-color-danger);
|
||||
font-size: 26px;
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
}
|
||||
}
|
||||
|
||||
.keybord_wrap {
|
||||
display: flex;
|
||||
padding-top: 20px;
|
||||
|
||||
.left {
|
||||
--item-height: calc((100vh - 650px) / 4);
|
||||
--item-height: calc((100vh - 440px) / 4);
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-template-rows: var(--item-height) var(--item-height) var(--item-height) var(--item-height);
|
||||
gap: 20px;
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.item {
|
||||
background-color: #efefef;
|
||||
|
|
@ -291,7 +291,7 @@ onMounted(() => {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
font-size: 28px;
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
|
||||
&:active {
|
||||
background-color: #dbdbdb;
|
||||
|
|
@ -300,16 +300,16 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.pay_btn {
|
||||
flex: 0.3;
|
||||
border-radius: 6px;
|
||||
width: 200px;
|
||||
color: #fff;
|
||||
background-color: var(--el-color-warning);
|
||||
margin-left: 20px;
|
||||
margin-left: var(--el-font-size-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -176,34 +176,20 @@ defineExpose({
|
|||
|
||||
.row {
|
||||
border-bottom: 1px solid #ececec;
|
||||
margin-top: 20px;
|
||||
margin-top: var(--el-font-size-base);
|
||||
|
||||
.title {
|
||||
font-size: 20px;
|
||||
font-size: var(--el-font-size-base);
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
padding-top: 100px;
|
||||
padding-top: 30px;
|
||||
|
||||
.info {
|
||||
height: 50px;
|
||||
|
|
|
|||
|
|
@ -122,14 +122,14 @@ function skuConfirm(e) {
|
|||
|
||||
<style scoped lang="scss">
|
||||
.operation_wrap {
|
||||
padding: 20px;
|
||||
padding: var(--el-font-size-base);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.item {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
width: 80px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
|
|||
|
|
@ -210,7 +210,7 @@ defineExpose({
|
|||
|
||||
.header {
|
||||
display: flex;
|
||||
height: 80px;
|
||||
height: 60px;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid #ececec;
|
||||
}
|
||||
|
|
@ -226,7 +226,8 @@ defineExpose({
|
|||
position: relative;
|
||||
|
||||
span {
|
||||
font-size: 24px;
|
||||
font-size: var(--el-font-size-base);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -279,11 +280,11 @@ defineExpose({
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
padding: var(--el-font-size-base);
|
||||
}
|
||||
|
||||
.shop_list {
|
||||
max-height: calc(100vh - 40px - 80px - 80px);
|
||||
max-height: calc(100vh - 40px - 80px - 60px);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -297,8 +298,8 @@ defineExpose({
|
|||
|
||||
.item_wrap {
|
||||
width: 20%;
|
||||
padding: 0 10px;
|
||||
padding-bottom: 20px;
|
||||
padding: 0 5px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
.item {
|
||||
border: 1px solid #ececec;
|
||||
|
|
@ -311,7 +312,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
.dot {
|
||||
padding: 0 14px;
|
||||
padding: 0 8px;
|
||||
background-color: var(--el-color-danger);
|
||||
color: #fff;
|
||||
border-radius: 20px;
|
||||
|
|
@ -320,12 +321,11 @@ defineExpose({
|
|||
right: 4px;
|
||||
z-index: 1;
|
||||
font-size: 12px;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.cover {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.name {
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ import { ipcRenderer } from 'electron'
|
|||
|
||||
const emit = defineEmits('paySuccess')
|
||||
|
||||
const dialogVisible = ref(true)
|
||||
const dialogVisible = ref(false)
|
||||
const props = defineProps({
|
||||
cart: {
|
||||
type: Array,
|
||||
|
|
@ -130,7 +130,7 @@ defineExpose({
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
padding: var(--el-font-size-base) 0;
|
||||
|
||||
.cart_list {
|
||||
flex: 1;
|
||||
|
|
@ -138,38 +138,40 @@ defineExpose({
|
|||
.nav_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
padding: 0 var(--el-font-size-base);
|
||||
|
||||
.return {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
$size: 50px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
border: 3px solid #333;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
color: #333;
|
||||
font-size: 26px;
|
||||
font-size: var(--el-font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: 20px;
|
||||
padding-left: var(--el-font-size-base);
|
||||
$padding: 10px;
|
||||
|
||||
.master_id {
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
border-bottom: 1px solid #ececec;
|
||||
padding: 16px 0;
|
||||
padding: $padding 0;
|
||||
}
|
||||
|
||||
.btm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 0;
|
||||
padding: $padding 0;
|
||||
|
||||
|
||||
.p {
|
||||
|
|
@ -180,8 +182,8 @@ defineExpose({
|
|||
}
|
||||
|
||||
.list_wrap {
|
||||
padding: 20px;
|
||||
height: calc(100vh - 260px);
|
||||
padding: var(--el-font-size-base);
|
||||
height: calc(100vh - 220px);
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
|
|
@ -218,7 +220,7 @@ defineExpose({
|
|||
padding-bottom: 10px;
|
||||
|
||||
.tag {
|
||||
padding: 4px 10px;
|
||||
padding: 2px 6px;
|
||||
background-color: var(--el-color-danger);
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
|
|
@ -246,7 +248,7 @@ defineExpose({
|
|||
.footer {
|
||||
display: flex;
|
||||
padding-top: 20px;
|
||||
gap: 20px;
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.editor {
|
||||
border: 1px solid #ececec;
|
||||
|
|
@ -255,7 +257,6 @@ defineExpose({
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #555;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.button {
|
||||
|
|
|
|||
|
|
@ -344,7 +344,7 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--el-color-info-light-7);
|
||||
padding-left: 20px;
|
||||
padding-left: var(--el-font-size-base);
|
||||
|
||||
.t {
|
||||
font-size: $fs;
|
||||
|
|
@ -355,7 +355,7 @@ onMounted(() => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--el-color-info-light-8);
|
||||
padding: 0 20px;
|
||||
padding: 0 var(--el-font-size-base);
|
||||
|
||||
.icon {
|
||||
color: var(--el-color-primary);
|
||||
|
|
@ -382,12 +382,12 @@ onMounted(() => {
|
|||
|
||||
.shop_list {
|
||||
flex: 1;
|
||||
height: calc(100vh - 40px - 60px - 130px);
|
||||
height: calc(100vh - 40px - 60px - 132px);
|
||||
overflow-y: auto;
|
||||
border-right: 1px solid #ececec;
|
||||
|
||||
.item {
|
||||
padding: 20px;
|
||||
padding: var(--el-font-size-base);
|
||||
|
||||
&.active {
|
||||
background-color: #f5f5f5;
|
||||
|
|
@ -400,7 +400,7 @@ onMounted(() => {
|
|||
.name_wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 20px;
|
||||
font-size: var(--el-font-size-base);
|
||||
}
|
||||
|
||||
.sku_list {
|
||||
|
|
@ -408,7 +408,7 @@ onMounted(() => {
|
|||
padding-top: 10px;
|
||||
|
||||
.tag {
|
||||
padding: 4px 10px;
|
||||
padding: 2px 6px;
|
||||
background-color: var(--el-color-danger);
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
|
|
@ -416,7 +416,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.num {
|
||||
padding-top: 20px;
|
||||
padding-top: var(--el-font-size-base);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -448,7 +448,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.footer {
|
||||
padding: 20px;
|
||||
padding: var(--el-font-size-base);
|
||||
border-top: 1px solid #ececec;
|
||||
|
||||
.left {
|
||||
|
|
@ -465,7 +465,7 @@ onMounted(() => {
|
|||
|
||||
.icon {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
font-size: var(--el-font-size-base);
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
|
|
@ -521,7 +521,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
.shop_manage {
|
||||
flex: 2;
|
||||
flex: 2.5;
|
||||
margin-left: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue