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

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

@@ -2,13 +2,13 @@
<template>
<div class="header">
<div class="menus">
<div class="menus scroll-x">
<div class="item" :class="{ active: categorysActive == index }" v-for="(item, index) in categorys"
:key="item.id" @click="changeCategory(item, index)">
<el-text>{{ item.name }}</el-text>
</div>
</div>
<el-popover trigger="click" :width="800" title="全部分类" :visible="showPopover">
<el-popover trigger="click" :width="600" title="全部分类" :visible="showPopover">
<template #reference>
<div class="all" @click="showMoreMenu">
<el-icon class="icon" :class="{ active: showPopover }">
@@ -16,7 +16,6 @@
</el-icon>
</div>
</template>
<template #default>
<div class="popover_wrap">
<el-button :plain="categorysActive != index" type="primary" v-for="(item, index) in categorys"
@@ -29,7 +28,7 @@
</div>
<div class="search_wrap">
<div class="input">
<el-input placeholder="商品名称或首字母简称" prefix-icon="Search" v-model="commdityName" clearable
<el-input placeholder="请输入商品名称查询" prefix-icon="Search" v-model="commdityName" clearable
@input="inputChange"></el-input>
</div>
<el-button :icon="shopListType == 'text' ? 'PictureRounded' : 'PriceTag'"
@@ -40,7 +39,8 @@
<div class="item">
<div class="dot" v-if="item.orderCount">{{ item.orderCount }}</div>
<div class="cover" v-if="shopListType == 'img'">
<el-image :src="item.coverImg" style="width: 100%;height: 100%;background-color: #efefef;" fit="contain"></el-image>
<el-image :src="item.coverImg" style="width: 100%;height: 100%;background-color: #efefef;"
fit="contain"></el-image>
</div>
<div class="name"><el-text line-clamp="2">{{ item.name }}</el-text></div>
<div class="item_empty" v-if="shopListType == 'text'"></div>
@@ -205,7 +205,8 @@ defineExpose({
.popover_wrap {
display: flex;
flex-wrap: wrap;
padding: 20px 0;
gap: var(--el-font-size-base);
padding: var(--el-font-size-base) 0;
}
.header {
@@ -216,14 +217,18 @@ defineExpose({
}
.menus {
flex: 1;
display: flex;
padding: 0 10px;
overflow-x: auto;
width: 100px;
.item {
padding: 0 10px;
display: flex;
align-items: center;
position: relative;
white-space: nowrap;
span {
font-size: var(--el-font-size-base);
@@ -249,11 +254,12 @@ defineExpose({
}
.all {
width: var(--el-component-size-large);
width: calc(var(--el-component-size-large) + 10px);
display: flex;
align-items: center;
justify-content: center;
position: relative;
flex-shrink: 0;
&::before {
content: "";

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

@@ -219,6 +219,7 @@ defineExpose({
.tag_wrap {
display: flex;
flex-wrap: wrap;
padding-top: 10px;
padding-bottom: 10px;
@@ -227,6 +228,7 @@ defineExpose({
background-color: var(--el-color-danger);
color: #fff;
margin-right: 10px;
margin-bottom: 10px;
}
}

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

@@ -76,13 +76,8 @@
<div class="button">
<el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
@click="createOrderHandle">
<div class="js">
<el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
<el-text class="t" style="margin-left: 30px">
<span v-if="!createOrderLoading">结算</span>
<span v-else>下单中...</span>
</el-text>
</div>
<span v-if="!createOrderLoading">结算(￥{{ cartInfo.totalAmount || 0 }})</span>
<span v-else>下单中...</span>
</el-button>
</div>
</div>
@@ -294,7 +289,7 @@ async function queryCartAjax() {
async function createCodeAjax() {
try {
if (process.env.VITE_DEV_SERVER_URL) {
masterId.value = '#8'
masterId.value = '#10'
} else {
const res = await createCode({
shopId: store.userInfo.shopId
@@ -396,7 +391,7 @@ onMounted(() => {
padding: var(--el-font-size-base);
&.active {
background-color: #f5f5f5;
background-color: var(--primary-color-hover);
}
&:not(:last-child) {
@@ -419,6 +414,7 @@ onMounted(() => {
background-color: var(--el-color-danger);
color: #fff;
margin-right: 10px;
margin-bottom: 10px;
}
}

4
src/views/login.vue
View File

@@ -42,7 +42,7 @@
</el-form-item>
</el-form>
<div class="version">
<el-text size="large">Ver2.1.6</el-text>
<el-text size="large">Ver{{ packageData.version }}</el-text>
<el-text size="large">陕西超掌柜科技有限公司</el-text>
</div>
</div>
@@ -51,6 +51,8 @@
</template>
<script setup>
import packageData from '../../package.json'
import logo from "@/assets/logo.png";
import { ElMessage, ElMessageBox } from "element-plus";
import { reactive, ref } from "vue";

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);
}
}