|
@@ -0,0 +1,222 @@
|
|
|
+<template>
|
|
|
+ <div id="app">
|
|
|
+ <router-view class="router-view" v-slot="{ Component }">
|
|
|
+ <transition :name="transitionName">
|
|
|
+ <!-- 缓存组件,但是进入编辑页面就会有问题 -->
|
|
|
+ <!-- <keep-alive include="device,deviceSet,role"><component :is="Component" /></keep-alive> -->
|
|
|
+ <component :is="Component" />
|
|
|
+ </transition>
|
|
|
+ </router-view>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { reactive, toRefs } from "vue";
|
|
|
+import { useRouter } from "vue-router";
|
|
|
+import { getLocal } from "@/common/js/utils";
|
|
|
+export default {
|
|
|
+ setup() {
|
|
|
+ const router = useRouter();
|
|
|
+ const state = reactive({
|
|
|
+ transitionName: "slide-left",
|
|
|
+ });
|
|
|
+ router.beforeEach((to, from, next) => {
|
|
|
+ const token = getLocal("token");
|
|
|
+ // token为空跳转登陆页面
|
|
|
+ if (!token && to.path !== "/login") {
|
|
|
+ // next(`/login?redirect=${to.fullPath}`)
|
|
|
+ }
|
|
|
+ if (to.meta.index > from.meta.index) {
|
|
|
+ state.transitionName = "slide-left"; // 向左滑动
|
|
|
+ } else if (to.meta.index < from.meta.index) {
|
|
|
+ // 由次级到主级
|
|
|
+ state.transitionName = "slide-right";
|
|
|
+ } else {
|
|
|
+ state.transitionName = ""; // 同级无过渡效果
|
|
|
+ }
|
|
|
+ next();
|
|
|
+ });
|
|
|
+
|
|
|
+ return { ...toRefs(state) };
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+// 宽度动态
|
|
|
+// width: -moz-calc(100% - 70px);
|
|
|
+// width: -webkit-calc(100% - 70px);
|
|
|
+// width: calc(100% - 70px);
|
|
|
+/* 导入全局样式 */
|
|
|
+@import "./common/style/global.less";
|
|
|
+
|
|
|
+// 改变全局vant的样式
|
|
|
+:root {
|
|
|
+ --van-blue: #4d6add !important;
|
|
|
+ --vangreen: #4d6add !important;
|
|
|
+ --van-field-label-color: #404d74 !important;
|
|
|
+}
|
|
|
+
|
|
|
+.cust_vantBorder {
|
|
|
+ .van-cell {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ // .van-field__value {
|
|
|
+ // border: 1px solid #b9bad0;
|
|
|
+ // border-radius: 2px;
|
|
|
+ // height: 38px;
|
|
|
+ // line-height: 38px;
|
|
|
+ // padding-left: 6px;
|
|
|
+ // }
|
|
|
+ .van-field__body {
|
|
|
+ border: 1px solid #dddde8;
|
|
|
+ border-radius: 2px;
|
|
|
+ height: 38px;
|
|
|
+ line-height: 38px;
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 下边框线条
|
|
|
+.kBordBott {
|
|
|
+ border-bottom: 1px solid #fafafd;
|
|
|
+}
|
|
|
+
|
|
|
+html,
|
|
|
+body,
|
|
|
+#app,
|
|
|
+div,
|
|
|
+span,
|
|
|
+p {
|
|
|
+ // color: #404d74 !important;
|
|
|
+}
|
|
|
+
|
|
|
+html {
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+body {
|
|
|
+ height: 100%;
|
|
|
+ overflow-x: hidden;
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+#app {
|
|
|
+ height: 100%;
|
|
|
+ font-family: "Avenir", Helvetica, Arial, sans-serif;
|
|
|
+ -webkit-font-smoothing: antialiased;
|
|
|
+ -moz-osx-font-smoothing: grayscale;
|
|
|
+ // text-align: center;
|
|
|
+ color: #2c3e50;
|
|
|
+}
|
|
|
+
|
|
|
+.router-view {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: 0 auto;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+}
|
|
|
+
|
|
|
+.slide-right-enter-active,
|
|
|
+.slide-right-leave-active,
|
|
|
+.slide-left-enter-active,
|
|
|
+.slide-left-leave-active {
|
|
|
+ height: 100%;
|
|
|
+ will-change: transform;
|
|
|
+ transition: all 500ms;
|
|
|
+ position: absolute;
|
|
|
+ backface-visibility: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.slide-right-enter {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate3d(-100%, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.slide-right-leave-active {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate3d(100%, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.slide-left-enter {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate3d(100%, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.slide-left-leave-active {
|
|
|
+ opacity: 0;
|
|
|
+ transform: translate3d(-100%, 0, 0);
|
|
|
+}
|
|
|
+
|
|
|
+.van-badge--fixed {
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+
|
|
|
+/* 滚动条样式 */
|
|
|
+::-webkit-scrollbar {
|
|
|
+ /* 1 */
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: linear-gradient(
|
|
|
+ to right,
|
|
|
+ transparent 3px,
|
|
|
+ #565656 4px,
|
|
|
+ transparent 6px
|
|
|
+ ),
|
|
|
+ linear-gradient(to bottom, transparent 3px, #565656 4px, transparent 6px);
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-button {
|
|
|
+ /* 2 */
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 2px;
|
|
|
+ background-color: #0667a0;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-button:hover {
|
|
|
+ background-color: #29a7f0;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ /* 5 */
|
|
|
+ background-color: #006ac7;
|
|
|
+ border-radius: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-corner {
|
|
|
+ /* 6 */
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #565656;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar {
|
|
|
+ &-thumb {
|
|
|
+ border-radius: 10px;
|
|
|
+ background-color: #d2d2d2;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #bfbfbf;
|
|
|
+ // background: #A7A7A7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &-button {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ &-track {
|
|
|
+ background: #eee;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|