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-08 15:04:11 +08:00
parent 6e3a4c5ce3
commit 11290d1505
15 changed files with 114 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/views/table/components/countCard.vue
View File

@@ -61,25 +61,25 @@ onUnmounted(() => {
<style scoped lang="scss">
.time {
font-family: 'num';
font-size: 82px;
font-size: 42px;
letter-spacing: 10px;
font-weight: bold;
}
.count_wrap {
padding: 0 20px;
padding: 0 var(--el-font-size-base);
.date_wrap {
padding: 40px 0;
padding: var(--el-font-size-base) 0;
border-bottom: 1px solid #ececec;
.date {
font-size: 26px;
padding-left: 6px;
font-size: var(--el-font-size-base);
}
}
.order_info {
padding: 40px 0;
padding: var(--el-font-size-base) 0;
display: flex;
.item {
@@ -87,9 +87,10 @@ onUnmounted(() => {
.num {
font-family: 'num';
font-size: 46px;
font-size: 26px;
letter-spacing: 4px;
padding-top: 10px;
font-weight: bold;
}
}
}

12
src/views/table/components/tableInfo.vue
View File

@@ -64,7 +64,7 @@ function close() {
justify-content: space-between;
.t {
font-size: 26px;
font-size: calc(var(--el-font-size-base) + 10px);
}
.close {
@@ -75,7 +75,7 @@ function close() {
justify-content: flex-end;
.icon {
font-size: 30px;
font-size: 24px;
color: #999;
}
}
@@ -84,11 +84,11 @@ function close() {
.status_wrap {
display: flex;
align-items: center;
padding-bottom: 20px;
padding-bottom: var(--el-font-size-base);
.icon {
color: #666;
font-size: 24px;
font-size: var(--el-font-size-base);
}
.t {
@@ -99,7 +99,7 @@ function close() {
.place_order {
background-color: #efefef;
height: calc(100vh - 180px);
height: calc(100vh - 160px);
border-radius: 6px;
display: flex;
align-items: center;
@@ -123,7 +123,7 @@ function close() {
.icon {
color: #fff;
font-size: 50px;
font-size: 40px;
}
.t {

36
src/views/table/index.vue
View File

@@ -9,7 +9,7 @@
</div>
</div>
<div class="all">
<el-button type="primary" icon="Clock">预定管理</el-button>
<el-button type="text" icon="Clock">预定管理</el-button>
</div>
</div>
<div class="tab_container">
@@ -17,13 +17,13 @@
<el-radio-group v-model="area" @change="queryShopTableAjax">
<el-radio-button label="">全部</el-radio-button>
<el-radio-button :label="item.id" v-for="item in areaList" :key="item.id">{{ item.name
}}</el-radio-button>
}}</el-radio-button>
</el-radio-group>
</div>
<div class="overflow_y" v-loading="loading">
<div class="tab_list">
<div class="item" :class="{ active: tableItemActive == index }" v-for="(item, index) in tableList"
:key="item.id" @click="slectTableHandle(index, item)">
<div class="item" :class="{ active: tableItemActive == index }"
v-for="(item, index) in tableList" :key="item.id" @click="slectTableHandle(index, item)">
<div class="tab_title" :class="`${item.status}`">
<span>{{ item.name }}</span>
<span>0/{{ item.maxCapacity }}</span>
@@ -156,18 +156,18 @@ onMounted(() => {
<style scoped lang="scss">
.cart_wrap {
flex: 1;
flex: 2;
}
.right_card {
width: 550px;
flex: 1;
height: 100%;
margin-left: 20px;
margin-left: var(--el-font-size-base);
}
.header {
display: flex;
height: 80px;
height: var(--el-component-size-large);
justify-content: space-between;
border-bottom: 1px solid #ececec;
@@ -182,7 +182,7 @@ onMounted(() => {
position: relative;
span {
font-size: 24px;
font-size: var(--el-font-size-base);
}
&.active {
@@ -208,15 +208,14 @@ onMounted(() => {
.all {
display: flex;
align-items: center;
padding-right: 20px;
}
}
.tab_container {
padding: 20px;
padding: var(--el-font-size-base);
.tab_head {
padding-bottom: 20px;
padding-bottom: var(--el-font-size-base);
}
.overflow_y {
@@ -226,17 +225,18 @@ onMounted(() => {
.tab_list {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
gap: 20px;
gap: var(--el-font-size-base);
.item {
background-color: #efefef;
border-radius: 6px;
overflow: hidden;
border: 2px solid #fff;
&.active {
box-shadow: inset 0 0 0 2px var(--primary-color);
border-color: var(--primary-color);
}
&:hover {
@@ -244,7 +244,7 @@ onMounted(() => {
}
.tab_title {
height: 50px;
height: var(--el-component-size-large);
display: flex;
align-items: center;
justify-content: space-between;
@@ -269,14 +269,14 @@ onMounted(() => {
}
.tab_cont {
height: 160px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
.icon {
color: #555;
font-size: 40px;
font-size: 30px;
transform: rotate(45deg);
}
}