cashier_desktop/src/App.vue

<template>
  <el-config-provider size="large">
    <div class="container">
      <div class="left" v-if="route.path != '/login'">
        <left-menu />
      </div>
      <div :class="{ view: route.path != '/login' }">
        <router-view />
        <!-- <div class="wrapper">
          <div class="animation">
            <router-view v-slot="{ Component }">
              <transition :name="transitionName">
                <component :is="Component"></component>
              </transition>
            </router-view>
          </div>
        </div> -->
      </div>
    </div>
  </el-config-provider>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router"
import leftMenu from '@/components/leftMenu.vue'

const route = useRoute()

let transitionName = ref();
let router = useRouter();
router.beforeEach((to, from) => {
  // 根据路由标记判断触发哪个动画
  if (to.meta.index > from.meta.index) {
    // 从右往左动画
    transitionName.value = "slide-right";
  } else if (to.meta.index < from.meta.index) {
    // 从左往右动画
    transitionName.value = "slide-left";
  } else {
    transitionName.value = "";
  }
});
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

:root {
  --r: 47;
  --g: 175;
  --b: 162;
  --r-lighter: calc(var(--r) + (255 - var(--r)) * 0.2);
  --g-lighter: calc(var(--g) + (255 - var(--g)) * 0.2);
  --b-lighter: calc(var(--b) + (255 - var(--b)) * 0.2);

  --r-lighter2: calc(var(--r) + (255 - var(--r)) * 0.5);
  --g-lighter2: calc(var(--g) + (255 - var(--g)) * 0.5);
  --b-lighter2: calc(var(--b) + (255 - var(--b)) * 0.5);

  --r-darker: calc(var(--r) * 0.8);
  --g-darker: calc(var(--g) * 0.8);
  --b-darker: calc(var(--b) * 0.8);

  --primary-color: rgb(var(--r), var(--g), var(--b));
  --el-color-primary: var(--primary-color) !important;
  --el-button-hover-bg-color: var(--primary-color) !important;
  --el-color-primary-light-3: rgb(var(--r-lighter), var(--g-lighter), var(--b-lighter)) !important;
  --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-component-size-large: 50px !important;
}


@font-face {
  font-family: 'num';
  src: url('@/assets/font/Ignotum-Regular.ttf');
}

html {
  font-size: var(--el-font-size-base);
  color: #333;
}

.el-dialog__headerbtn {
  top: 10px !important;
}

.el-pagination {
  justify-content: center;
}

.el-drawer__header {
  // padding: 0 !important;
  margin-bottom: 5px !important;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}

.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.el-drawer__body {
  padding: 0 var(--el-drawer-padding-primary) !important;

}

.el-textarea {
  font-size: var(--el-font-size-base) !important;
}

.el-popover__title {
  font-size: var(--el-font-size-base) !important;
}

.el-dialog__header {
  background-color: #555;
  margin-right: 0 !important;
  padding-bottom: 20px !important;
  border-radius: var(--el-dialog-border-radius) var(--el-dialog-border-radius) 0 0;
}

.el-dialog__title {
  color: #fff !important;
}

.el-button--large {
  --el-button-size: 50px !important;
  font-size: var(--el-font-size-base) !important;
}

.el-input--large {
  font-size: var(--el-font-size-base) !important;
}

.el-dialog {
  padding: 0 !important;
}

.el-dialog__body {
  padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
}

.el-dialog__header {
  padding: var(--el-dialog-padding-primary);
  padding-bottom: 10px;
  margin-right: 16px;
}

.el-input__suffix {
  font-size: 20px !important;
}

.empty {
  display: flex;
  justify-content: center;
  padding-top: 100px;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
  width: 4px;
}

/*定义滚动条轨道
 内阴影+圆角*/
::-webkit-scrollbar-track {
  background-color: #F5F5F5;
}

/*定义滑块
     内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #d3d3d3;
}


.mt50 {
  margin-top: 50px;
}

.container {
  display: flex;

  .view {
    flex: 1;
    height: 100vh;
    padding: 20px;
    background-color: #efefef;
  }
}

.content {
  display: flex;
  height: 100%;
}

.card {
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.wrapper {
  overflow-x: hidden;

  .animation {
    display: flex;
    width: 200%;

    &>div {
      width: 50%;
    }

    .slide-left-enter-active,
    .slide-left-leave-active,
    .slide-right-enter-active,
    .slide-right-leave-active {
      transition: transform 0.3s;
    }

    .slide-right-enter-from {
      transform: translateX(0);
    }

    .slide-right-enter-to {
      transform: translateX(-100%);
    }

    .slide-right-leave-from {
      transform: translateX(0);
    }

    .slide-right-leave-to {
      transform: translateX(-100%);
    }

    .slide-left-enter-from {
      transform: translateX(-200%);
    }

    .slide-left-enter-to {
      transform: translateX(-100%);
    }

    .slide-left-leave-from {
      transform: translateX(0);
    }

    .slide-left-leave-to {
      transform: translateX(100%);
    }
  }
}</style>