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">
        <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 leftMenu from '@/components/leftMenu.vue'

import { useRouter, useRoute } from "vue-router";
import { ref } from "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-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;
}

html {
  font-size: 20px;
  color: #333;
}

/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-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>