App.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
  1. <template>
  2. <div id="app">
  3. <router-view class="router-view" v-slot="{ Component }">
  4. <transition :name="transitionName">
  5. <!-- 缓存组件,但是进入编辑页面就会有问题 -->
  6. <!-- <keep-alive include="device,deviceSet,role"><component :is="Component" /></keep-alive> -->
  7. <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
  8. </transition>
  9. <keep-alive>
  10. <component :is="Component" :key="$route.name" 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 === 'device' || currentRouteName === 'robotranking' || 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: #4d6add !important;
  71. --vangreen: #4d6add !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__body {
  80. // border: 1px solid #dddde8;
  81. // border-radius: 2px;
  82. // height: 38px;
  83. // line-height: 38px;
  84. // padding-left: 6px;
  85. // width: auto;
  86. // }
  87. .van-field__control {
  88. height: 38px;
  89. line-height: 38px;
  90. padding: 6px;
  91. border-radius: 1px;
  92. border: 1px solid #dddde8;
  93. }
  94. }
  95. // 下边框线条
  96. .kBordBott {
  97. border-bottom: 1px solid #fafafd;
  98. }
  99. html,
  100. body,
  101. #app,
  102. div,
  103. span,
  104. // p {
  105. // color: #404d74 !important;
  106. // }
  107. p {
  108. // color: #333333;
  109. font-family: "Arial", sans-serif;
  110. font-size: 12px;
  111. // .van-dialog {
  112. // font-size: 0.4rem;
  113. // }
  114. .van-checkbox__icon {
  115. font-size: 0.5rem;
  116. }
  117. .van-dialog {
  118. width: 85%;
  119. }
  120. .van-dropdown-menu__title {
  121. font-size: 10px;
  122. color: #404d74;
  123. width: 70px;
  124. text-align: center;
  125. }
  126. .van-nav-bar__title {
  127. color: #404d74;
  128. font-size: 15px;
  129. font-weight: 600;
  130. }
  131. }
  132. html {
  133. height: 100%;
  134. // overflow: hidden;
  135. }
  136. body {
  137. height: 100%;
  138. // overflow-x: hidden;
  139. overflow: auto;
  140. }
  141. #app {
  142. height: 100%;
  143. font-family: "Avenir", Helvetica, Arial, sans-serif;
  144. -webkit-font-smoothing: antialiased;
  145. -moz-osx-font-smoothing: grayscale;
  146. // text-align: center;
  147. color: #2c3e50;
  148. }
  149. .router-view {
  150. width: 100%;
  151. height: auto;
  152. position: absolute;
  153. top: 0;
  154. bottom: 0;
  155. margin: 0 auto;
  156. -webkit-overflow-scrolling: touch;
  157. }
  158. .slide-right-enter-active,
  159. .slide-right-leave-active,
  160. .slide-left-enter-active,
  161. .slide-left-leave-active {
  162. height: 100%;
  163. will-change: transform;
  164. transition: all 500ms;
  165. position: absolute;
  166. backface-visibility: hidden;
  167. }
  168. .slide-right-enter {
  169. opacity: 0;
  170. transform: translate3d(-100%, 0, 0);
  171. }
  172. .slide-right-leave-active {
  173. opacity: 0;
  174. transform: translate3d(100%, 0, 0);
  175. }
  176. .slide-left-enter {
  177. opacity: 0;
  178. transform: translate3d(100%, 0, 0);
  179. }
  180. .slide-left-leave-active {
  181. opacity: 0;
  182. transform: translate3d(-100%, 0, 0);
  183. }
  184. .van-badge--fixed {
  185. z-index: 1000;
  186. }
  187. /* 滚动条样式 */
  188. ::-webkit-scrollbar {
  189. /* 1 */
  190. width: 8px;
  191. height: 8px;
  192. background: linear-gradient(to right,
  193. transparent 3px,
  194. #565656 4px,
  195. transparent 6px),
  196. linear-gradient(to bottom, transparent 3px, #565656 4px, transparent 6px);
  197. }
  198. ::-webkit-scrollbar-button {
  199. /* 2 */
  200. width: 8px;
  201. height: 8px;
  202. border-radius: 2px;
  203. background-color: #0667a0;
  204. }
  205. ::-webkit-scrollbar-button:hover {
  206. background-color: #29a7f0;
  207. cursor: pointer;
  208. }
  209. ::-webkit-scrollbar-thumb {
  210. /* 5 */
  211. background-color: #d2d2d2;
  212. border-radius: 2px;
  213. }
  214. ::-webkit-scrollbar-corner {
  215. /* 6 */
  216. width: 8px;
  217. height: 8px;
  218. border-radius: 50%;
  219. background-color: #565656;
  220. }
  221. ::-webkit-scrollbar {
  222. &-thumb {
  223. border-radius: 10px;
  224. background-color: #d2d2d2;
  225. &:hover {
  226. background-color: #bfbfbf;
  227. // background: #A7A7A7;
  228. }
  229. }
  230. &-button {
  231. display: none;
  232. }
  233. &-track {
  234. background: #eee;
  235. border-radius: 10px;
  236. }
  237. }
  238. </style>