123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245 |
- <template>
- <div id="app">
- <router-view class="router-view" v-slot="{ Component }">
- <transition :name="transitionName">
- <!-- 缓存组件,但是进入编辑页面就会有问题 -->
- <!-- <keep-alive include="trading,tradingSet,role"><component :is="Component" /></keep-alive> -->
- <component :is="Component" v-if="!$route.meta.keepAlive" />
- </transition>
- <keep-alive>
- <component :is="Component" v-if="$route.meta.keepAlive" />
- </keep-alive>
- </router-view>
- <nav-bar v-if="tabType"></nav-bar>
- </div>
- </template>
- <script>
- import { reactive, toRefs } from "vue";
- import { useRouter } from "vue-router";
- import { getLocal } from "@/common/js/utils";
- import navBar from "@/components/NavBar";
- import { ref } from "vue";
- export default {
- setup() {
- const router = useRouter();
- const state = reactive({
- transitionName: "slide-left",
- });
- const tabType = ref(true);
- 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();
- });
- router.afterEach(()=>{
- let currentRouteName = router.currentRoute.value.name;
- if (currentRouteName === 'home' || currentRouteName === 'trading' || currentRouteName === 'position' || currentRouteName === 'user') {
- tabType.value = true;
- } else {
- tabType.value = false;
- }
- })
-
- return {
- ...toRefs(state),
- tabType,
- };
- },
- components: { navBar }
- };
- </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: #FF3456 !important;
- --vangreen: #FF3456 !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;
- // }
- p {
- // color: #333333;
- font-family: "Arial", sans-serif;
- }
- html {
- height: 100%;
- // overflow: hidden;
- }
- body {
- height: 100%;
- // overflow-x: hidden;
- overflow: 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: #d2d2d2;
- 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>
|