新增收银页面

src/App.vue

@@ -1,18 +1,33 @@
 <template>
-  <div class="wrapper">
-    <div class="animation">
-      <router-view v-slot="{ Component }">
-        <transition :name="transitionName">
-          <component :is="Component"></component>
-        </transition>
-      </router-view>
+  <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>
-  </div>
+  </el-config-provider>
 </template>
 
 <script setup>
-import { useRouter } from "vue-router";
+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) => {
@@ -36,44 +51,107 @@ router.beforeEach((to, from) => {
   box-sizing: border-box;
   user-select: none;
 }
+
+:root {
+  --primary-color: #2FAFA2;
+  --el-color-primary: var(--primary-color) !important;
+  --el-button-hover-bg-color: var(--primary-color) !important;
+  --el-color-primary-light-3: lighten(var(--primary-color), 20%) !important;
+  --el-color-primary-dark-2: darken(var(--primary-color), 20%) !important;
+}
+
+/*定义滚动条高宽及背景
+ 高宽分别对应横竖滚动条的尺寸*/
+::-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 {
+
+    &>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%);
     }