优化样式 新增版本号

This commit is contained in:
gyq
2024-03-07 16:15:03 +08:00
parent 4a5b52fa45
commit 31ef882431
16 changed files with 291 additions and 186 deletions

View File

@@ -76,7 +76,7 @@ router.beforeEach((to, from) => {
--el-font-size-base: 16px !important;
--el-message-close-size: var(--el-font-size-base) !important;
--el-component-size-large: 50px !important;
--el-component-size-large: 40px !important;
--el-mask-color: rgba(255, 255, 255, 0.6) !important;
}
@@ -136,7 +136,7 @@ html {
}
.el-button--large {
--el-button-size: 50px !important;
--el-button-size: var(--el-component-size-large) !important;
font-size: var(--el-font-size-base) !important;
}
@@ -187,7 +187,6 @@ html {
background-color: #d3d3d3;
}
.mt50 {
margin-top: 50px;
}
@@ -198,7 +197,7 @@ html {
.view {
flex: 1;
height: 100vh;
padding: 20px;
padding: var(--el-font-size-base);
background-color: #efefef;
}
}

View File

@@ -64,7 +64,7 @@ const menus = ref([
<style scoped lang="scss">
.left_menu_wrap {
height: 100vh;
width: 90px;
width: 60px;
background-color: #555;
display: flex;
flex-direction: column;
@@ -104,12 +104,13 @@ const menus = ref([
.icon {
color: #999;
font-size: 32px;
font-size: 26px;
margin-bottom: 4px;
}
.text {
color: #999;
font-size: var(--el-font-size-base);
}
}
}

View File

@@ -201,7 +201,7 @@ onMounted(() => {
.t2 {
display: flex;
gap: 20px;
gap: var(--el-font-size-base);
color: #999;
padding-top: 10px;
}
@@ -241,7 +241,7 @@ onMounted(() => {
}
.img {
$size: 60px;
$size: 40px;
width: $size;
height: $size;
}
@@ -261,9 +261,9 @@ onMounted(() => {
display: flex;
align-items: center;
height: 60px;
border-radius: 10px;
border-radius: 6px;
border: 1px solid var(--primary-color);
font-size: calc(var(--el-font-size-base) + 10px);
font-size: calc(var(--el-font-size-base) + 6px);
padding: 0 var(--el-font-size-base);
}
}

View File

@@ -12,7 +12,8 @@
<span class="n">{{ props.amount }}</span>
</div>
<div class="input">
<el-input ref="inputRef" v-model="scanCode" style="height: 80px;" placeholder="请扫描付款码"
<el-input ref="inputRef" v-model="scanCode"
style="height: calc(var(--el-component-size-large) + 20px);" placeholder="请扫描付款码"
@keydown.enter="enterHandle" clearable></el-input>
</div>
<div class="number_warp">
@@ -26,7 +27,7 @@
</div>
</div>
<div class="btn">
<el-button type="primary" style="width: 100%;height: 60px;" v-loading="loading"
<el-button type="primary" style="width: 100%;" v-loading="loading"
@click="submitHandle">立即支付</el-button>
</div>
</div>
@@ -184,43 +185,43 @@ defineExpose({
.right {
flex: 1;
padding: 0 20px;
padding: 0 var(--el-font-size-base);
.amount {
display: flex;
height: 80px;
height: calc(var(--el-component-size-large) + 20px);
display: flex;
align-items: center;
justify-content: space-between;
color: var(--primary-color);
background-color: #555;
border-radius: 6px;
padding: 0 20px;
font-size: 30px;
padding: 0 var(--el-font-size-base);
font-size: calc(var(--el-font-size-base) + 10px);
}
.input {
padding: 20px 0;
padding: var(--el-font-size-base) 0;
:deep(.el-input__inner) {
font-size: 30px;
font-size: calc(var(--el-font-size-base) + 10px);
}
}
.number_warp {
--h: 70px;
--h: 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: var(--h) var(--h) var(--h) var(--h);
gap: 20px;
gap: var(--el-font-size-base);
.item {
background-color: #dddddd;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
border-radius: 6px;
font-size: calc(var(--el-font-size-base) + 10px);
border-radius: 4px;
&.disabled {
color: #999;
@@ -245,7 +246,7 @@ defineExpose({
.pay_wait {
flex: 1;
padding: 0 20px;
padding: 0 var(--el-font-size-base);
height: 600px;
padding-bottom: 100px;
display: flex;
@@ -265,7 +266,7 @@ defineExpose({
.btn {
width: 200px;
padding-top: 20px;
padding-top: var(--el-font-size-base);
}
}
}

View File

@@ -73,19 +73,19 @@ defineExpose({
<style scoped lang="scss">
:deep(.el-input__inner) {
height: 70px;
height: 60px;
font-size: 36px;
}
.keybord_wrap {
padding: 20px 0;
padding: var(--el-font-size-base) 0;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
gap: 20px;
gap: var(--el-font-size-base);
:deep(.el-button--large) {
height: 70px;
height: 60px;
}
}
</style>

View File

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

View File

@@ -40,10 +40,10 @@
<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%;" fit="cover"></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="empty" v-if="shopListType == 'text'"></div>
<div class="item_empty" v-if="shopListType == 'text'"></div>
<div class="price">
<el-text>{{ item.lowPrice }}</el-text>
</div>
@@ -210,7 +210,7 @@ defineExpose({
.header {
display: flex;
height: 60px;
height: var(--el-component-size-large);
justify-content: space-between;
border-bottom: 1px solid #ececec;
}
@@ -227,7 +227,6 @@ defineExpose({
span {
font-size: var(--el-font-size-base);
font-weight: bold;
}
&.active {
@@ -250,7 +249,7 @@ defineExpose({
}
.all {
width: 80px;
width: var(--el-component-size-large);
display: flex;
align-items: center;
justify-content: center;
@@ -299,7 +298,7 @@ defineExpose({
.item_wrap {
width: 20%;
padding: 0 5px;
padding-bottom: 5px;
padding-bottom: 10px;
.item {
border: 1px solid #ececec;
@@ -330,7 +329,7 @@ defineExpose({
.name {
padding: 0 10px;
height: 50px;
height: 40px;
margin-top: 20px;
span {
@@ -338,12 +337,12 @@ defineExpose({
}
}
.empty {
height: 50px;
.item_empty {
height: 30px;
}
.price {
padding: 10px 20px;
padding: 6px 10px;
background-color: var(--primary-color);
span {

View File

@@ -18,7 +18,7 @@
</div>
</div>
</div>
<div class="list_wrap card" style="margin-top: 20px;">
<div class="list_wrap card" style="margin-top: var(--el-font-size-base);">
<div class="item" v-for="item in props.cart" :key="item.id">
<div class="top">
<span class="name">{{ item.name }}</span>
@@ -60,10 +60,13 @@
<script setup>
import { ref } from 'vue'
import { useUser } from "@/store/user.js"
import payCard from '@/components/payCard/payCard.vue'
import { ipcRenderer } from 'electron'
const store = useUser()
const emit = defineEmits('paySuccess')
const dialogVisible = ref(false)
@@ -95,7 +98,7 @@ const isPrint = ref(true)
function printHandle() {
if (!isPrint.value) return
const data = {
shop_name: '大客餐饮',
shop_name: store.userInfo.merchantName,
carts: props.cart,
amount: props.amount,
remark: props.remark,
@@ -183,11 +186,11 @@ defineExpose({
.list_wrap {
padding: var(--el-font-size-base);
height: calc(100vh - 220px);
height: calc(100vh - 200px);
overflow-y: auto;
.item {
padding-bottom: 20px;
padding-bottom: var(--el-font-size-base);
.top {
display: flex;
@@ -247,7 +250,7 @@ defineExpose({
.footer {
display: flex;
padding-top: 20px;
padding-top: var(--el-font-size-base);
gap: var(--el-font-size-base);
.editor {
@@ -263,7 +266,7 @@ defineExpose({
flex: 1;
:deep(.el-checkbox.el-checkbox--large) {
height: 50px;
height: var(--el-component-size-large);
background-color: #fff;
}

View File

@@ -91,6 +91,7 @@
<div class="shop_manage card">
<!-- 分类/商品列表 -->
<goods ref="goodsRef" :masterId="masterId" @success="addCart" />
<!-- ©银收客 v{{ packageData.version }} -->
</div>
</div>
<!-- 备注 -->
@@ -122,6 +123,9 @@ import { createCart, queryCart, createCode, packall, delCart, cartStatus, clearC
// 商品列表
import goods from '@/views/home/components/goods.vue'
import member from '@/views/member/index.vue'
// import packageData from '../../../package.json'
const membershow = ref(false)
const store = useUser()
const remarkRef = ref(null)
@@ -289,11 +293,11 @@ async function queryCartAjax() {
// 获取取餐码
async function createCodeAjax() {
try {
// const res = await createCode({
// shopId: store.userInfo.shopId
// })
// masterId.value = res.code
masterId.value = '#50'
const res = await createCode({
shopId: store.userInfo.shopId
})
masterId.value = res.code
// masterId.value = '#8'
queryCartAjax()
} catch (error) {
console.log(error)
@@ -315,8 +319,7 @@ onMounted(() => {
.menu_top {
flex-shrink: 0;
display: flex;
height: 60px;
$fs: 20px;
height: var(--el-component-size-large);
.menu {
background-color: var(--el-color-warning);
@@ -327,7 +330,7 @@ onMounted(() => {
justify-content: center;
.icon {
font-size: 24px;
font-size: var(--el-font-size-base);
position: relative;
top: 2px;
}
@@ -335,7 +338,7 @@ onMounted(() => {
.t {
color: #fff;
margin-left: 4px;
font-size: $fs;
font-size: var(--el-font-size-base);
}
}
@@ -347,7 +350,7 @@ onMounted(() => {
padding-left: var(--el-font-size-base);
.t {
font-size: $fs;
font-size: var(--el-font-size-base);
}
}
@@ -363,7 +366,7 @@ onMounted(() => {
}
.t {
font-size: $fs;
font-size: var(--el-font-size-base);
padding: 0 10px;
}
@@ -382,7 +385,7 @@ onMounted(() => {
.shop_list {
flex: 1;
height: calc(100vh - 40px - 60px - 132px);
height: calc(100vh - 40px - 60px - 80px);
overflow-y: auto;
border-right: 1px solid #ececec;
@@ -405,6 +408,7 @@ onMounted(() => {
.sku_list {
display: flex;
flex-wrap: wrap;
padding-top: 10px;
.tag {
@@ -491,8 +495,8 @@ onMounted(() => {
$h: 70px;
display: flex;
height: $h;
padding-top: 20px;
gap: 20px;
padding-top: var(--el-font-size-base);
gap: var(--el-font-size-base);
.editor {
width: $h;
@@ -502,7 +506,7 @@ onMounted(() => {
align-items: center;
justify-content: center;
color: #555;
font-size: 22px;
font-size: var(--el-font-size-base);
}
.button {
@@ -513,7 +517,7 @@ onMounted(() => {
.t {
color: #fff;
font-size: 20px;
font-size: var(--el-font-size-base);
}
}
}
@@ -521,8 +525,8 @@ onMounted(() => {
}
.shop_manage {
flex: 2.5;
margin-left: 20px;
flex: 3;
margin-left: var(--el-font-size-base);
height: 100%;
}
</style>

View File

@@ -3,7 +3,7 @@
<div class="logo">
<el-image :src="logo" style="width: 180px"></el-image>
</div>
<div class="form-wrap" style="display: flex;align-items: center;">
<div class="form-wrap">
<div style="flex: 1;">
<!-- <div class="reg-wrap">
<router-link :to="{ name: 'register' }">
@@ -150,34 +150,36 @@ const logout = () => {
.form-wrap {
flex: 1.5;
height: inherit;
padding: 50px;
padding: 0 50px;
display: flex;
align-items: center;
}
.reg-wrap {
display: flex;
justify-content: flex-end;
padding-bottom: 100px;
padding-bottom: 30px;
}
.header {
display: flex;
flex-direction: column;
padding-bottom: 100px;
padding-bottom: 20px;
.t1 {
font-size: 52px;
font-size: 42px;
color: #999;
}
.t2 {
font-size: 24px;
font-size: var(--el-font-size-base);
color: #999;
}
}
}
.version {
padding-top: 50px;
padding-top: 20px;
display: flex;
flex-direction: column;
justify-content: center;