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

适配小屏

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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"
: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>