App.vue 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245
  1. <template>
  2. <div id="app">
  3. <router-view class="router-view" v-slot="{ Component }">
  4. <transition :name="transitionName">
  5. <!-- 缓存组件,但是进入编辑页面就会有问题 -->
  6. <!-- <keep-alive include="trading,tradingSet,role"><component :is="Component" /></keep-alive> -->
  7. <component :is="Component" v-if="!$route.meta.keepAlive" />
  8. </transition>
  9. <keep-alive>
  10. <component :is="Component" v-if="$route.meta.keepAlive" />
  11. </keep-alive>
  12. </router-view>
  13. <nav-bar v-if="tabType"></nav-bar>
  14. </div>
  15. </template>
  16. <script>
  17. import { reactive, toRefs } from "vue";
  18. import { useRouter } from "vue-router";
  19. import { getLocal } from "@/common/js/utils";
  20. import navBar from "@/components/NavBar";
  21. import { ref } from "vue";
  22. export default {
  23. setup() {
  24. const router = useRouter();
  25. const state = reactive({
  26. transitionName: "slide-left",
  27. });
  28. const tabType = ref(true);
  29. router.beforeEach((to, from, next) => {
  30. const token = getLocal("token");
  31. // token为空跳转登陆页面
  32. if (!token && to.path !== "/login") {
  33. // next(`/login?redirect=${to.fullPath}`)
  34. }
  35. if (to.meta.index > from.meta.index) {
  36. state.transitionName = "slide-left"; // 向左滑动
  37. } else if (to.meta.index < from.meta.index) {
  38. // 由次级到主级
  39. state.transitionName = "slide-right";
  40. } else {
  41. state.transitionName = ""; // 同级无过渡效果
  42. }
  43. next();
  44. });
  45. router.afterEach(()=>{
  46. let currentRouteName = router.currentRoute.value.name;
  47. if (currentRouteName === 'home' || currentRouteName === 'trading' || currentRouteName === 'position' || currentRouteName === 'user') {
  48. tabType.value = true;
  49. } else {
  50. tabType.value = false;
  51. }
  52. })
  53. return {
  54. ...toRefs(state),
  55. tabType,
  56. };
  57. },
  58. components: { navBar }
  59. };
  60. </script>
  61. <style lang="less">
  62. // 宽度动态
  63. // width: -moz-calc(100% - 70px);
  64. // width: -webkit-calc(100% - 70px);
  65. // width: calc(100% - 70px);
  66. /* 导入全局样式 */
  67. @import "./common/style/global.less";
  68. // 改变vant的全局样式
  69. :root {
  70. --van-blue: #FF3456 !important;
  71. --vangreen: #FF3456 !important;
  72. --van-field-label-color: #404d74 !important;
  73. }
  74. .cust_vantBorder {
  75. .van-cell {
  76. display: flex;
  77. align-items: center;
  78. }
  79. // .van-field__value {
  80. // border: 1px solid #b9bad0;
  81. // border-radius: 2px;
  82. // height: 38px;
  83. // line-height: 38px;
  84. // padding-left: 6px;
  85. // }
  86. .van-field__body {
  87. border: 1px solid #dddde8;
  88. border-radius: 2px;
  89. height: 38px;
  90. line-height: 38px;
  91. padding-left: 6px;
  92. }
  93. }
  94. // 下边框线条
  95. .kBordBott {
  96. border-bottom: 1px solid #fafafd;
  97. }
  98. html,
  99. body,
  100. #app,
  101. div,
  102. span,
  103. // p {
  104. // color: #404d74 !important;
  105. // }
  106. p {
  107. // color: #333333;
  108. font-family: "Arial", sans-serif;
  109. }
  110. html {
  111. height: 100%;
  112. // overflow: hidden;
  113. }
  114. body {
  115. height: 100%;
  116. // overflow-x: hidden;
  117. overflow: auto;
  118. }
  119. #app {
  120. height: 100%;
  121. font-family: "Avenir", Helvetica, Arial, sans-serif;
  122. -webkit-font-smoothing: antialiased;
  123. -moz-osx-font-smoothing: grayscale;
  124. // text-align: center;
  125. color: #2c3e50;
  126. }
  127. .router-view {
  128. width: 100%;
  129. height: auto;
  130. position: absolute;
  131. top: 0;
  132. bottom: 0;
  133. margin: 0 auto;
  134. -webkit-overflow-scrolling: touch;
  135. }
  136. .slide-right-enter-active,
  137. .slide-right-leave-active,
  138. .slide-left-enter-active,
  139. .slide-left-leave-active {
  140. height: 100%;
  141. will-change: transform;
  142. transition: all 500ms;
  143. position: absolute;
  144. backface-visibility: hidden;
  145. }
  146. .slide-right-enter {
  147. opacity: 0;
  148. transform: translate3d(-100%, 0, 0);
  149. }
  150. .slide-right-leave-active {
  151. opacity: 0;
  152. transform: translate3d(100%, 0, 0);
  153. }
  154. .slide-left-enter {
  155. opacity: 0;
  156. transform: translate3d(100%, 0, 0);
  157. }
  158. .slide-left-leave-active {
  159. opacity: 0;
  160. transform: translate3d(-100%, 0, 0);
  161. }
  162. .van-badge--fixed {
  163. z-index: 1000;
  164. }
  165. /* 滚动条样式 */
  166. ::-webkit-scrollbar {
  167. /* 1 */
  168. width: 8px;
  169. height: 8px;
  170. background: linear-gradient(to right,
  171. transparent 3px,
  172. #565656 4px,
  173. transparent 6px),
  174. linear-gradient(to bottom, transparent 3px, #565656 4px, transparent 6px);
  175. }
  176. ::-webkit-scrollbar-button {
  177. /* 2 */
  178. width: 8px;
  179. height: 8px;
  180. border-radius: 2px;
  181. background-color: #0667a0;
  182. }
  183. ::-webkit-scrollbar-button:hover {
  184. background-color: #29a7f0;
  185. cursor: pointer;
  186. }
  187. ::-webkit-scrollbar-thumb {
  188. /* 5 */
  189. background-color: #d2d2d2;
  190. border-radius: 2px;
  191. }
  192. ::-webkit-scrollbar-corner {
  193. /* 6 */
  194. width: 8px;
  195. height: 8px;
  196. border-radius: 50%;
  197. background-color: #565656;
  198. }
  199. ::-webkit-scrollbar {
  200. &-thumb {
  201. border-radius: 10px;
  202. background-color: #d2d2d2;
  203. &:hover {
  204. background-color: #bfbfbf;
  205. // background: #A7A7A7;
  206. }
  207. }
  208. &-button {
  209. display: none;
  210. }
  211. &-track {
  212. background: #eee;
  213. border-radius: 10px;
  214. }
  215. }
  216. </style>