App.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
  1. <template>
  2. <div id="app">
  3. <div class="view-container">
  4. <AppHeader :visible="visible"></AppHeader>
  5. <transition :name="transitionName">
  6. <router-view />
  7. </transition>
  8. <AppBackTop></AppBackTop>
  9. </div>
  10. <el-dialog width="30%" title="联系我们" :visible.sync="dialogVisible">
  11. <div>座机:010-82783688转122</div>
  12. <div>邮箱:guowl@dgtis.com</div>
  13. </el-dialog>
  14. </div>
  15. </template>
  16. <script>
  17. import AppHeader from '@/components/AppHeader.vue';
  18. import AppBackTop from '@/components/AppBackTop.vue';
  19. export default {
  20. name: 'app',
  21. components: {
  22. AppHeader,
  23. AppBackTop
  24. },
  25. data() {
  26. return {
  27. dialogVisible: false,
  28. transitionName: "",
  29. isGray: false,
  30. visible:true,
  31. };
  32. },
  33. created(){
  34. this.$store.dispatch('GetUserInfo');
  35. },
  36. methods:{
  37. fatherMethod() {
  38. this.dialogVisible = true;
  39. },
  40. // 保存滚动值,这是兼容的写法
  41. handleScroll () {
  42. var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  43. //变量scrollTop是滚动条滚动时,距离顶部的距离
  44. // var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  45. // //变量windowHeight是可视区的高度
  46. // var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  47. // //变量windowHeight是可视区的高度
  48. // var scrollHeight =document.documentElement.scrollHeight || document.body.scrollHeight;
  49. // //滚动条到底部的条件
  50. // if(scrollTop + windowHeight == scrollHeight){
  51. // //你要触发的方法
  52. // }
  53. if(scrollTop >= 80){
  54. this.visible = false;
  55. }else{
  56. this.visible = true;
  57. }
  58. },
  59. },
  60. mounted () {
  61. window.addEventListener('scroll', this.handleScroll)
  62. },
  63. destroyed () {
  64. // 离开该页面需要移除这个监听的事件,不然会报错
  65. window.removeEventListener('scroll', this.handleScroll)
  66. },
  67. watch: {
  68.   //使用watch 监听$router的变化
  69.   $route(to, from) {
  70.     //如果to索引大于from索引,判断为前进状态,反之则为后退状态
  71.     console.log(to, "to");
  72.     console.log(from, "from");
  73.     if (to.meta.index > from.meta.index) {
  74.       //设置动画名称
  75.       this.transitionName = "slide-left";
  76.     } else {
  77.       this.transitionName = "slide-right";
  78.     }
  79.   },
  80. },
  81. }
  82. </script>
  83. <style>
  84. ::-webkit-scrollbar-track {
  85. background: rgba(0, 0, 0, 0.1);
  86. border-radius: 0;
  87. }
  88. ::-webkit-scrollbar {
  89. -webkit-appearance: none;
  90. width: 5px;
  91. height: 6px;
  92. }
  93. ::-webkit-scrollbar-thumb {
  94. cursor: pointer;
  95. border-radius: 5px;
  96. background: rgba(0, 0, 0, 0.15);
  97. transition: color 0.2s ease;
  98. }
  99. .el-card__body{
  100. padding: 0 10px !important;
  101. }
  102. .el-dialog__body{
  103. padding-top: 0px !important;
  104. }
  105. .view-container{
  106. position: relative;
  107. margin: 0 auto;
  108. width: 100%;
  109. max-width: 1200px;
  110. }
  111. .slide-right-enter-active,
  112. .slide-right-leave-active,
  113. .slide-left-enter-active,
  114. .slide-left-leave-active {
  115. will-change: transform;
  116. transition: all 80ms;
  117. position: fixed;
  118. }
  119. .slide-right-enter {
  120. opacity: 0;
  121. transform: translate3d(-100%, 0, 0);
  122. }
  123. .slide-right-leave-active {
  124. opacity: 0;
  125. transform: translate3d(100%, 0, 0);
  126. }
  127. .slide-left-enter {
  128. opacity: 0;
  129. transform: translate3d(100%, 0, 0);
  130. }
  131. .slide-left-leave-active {
  132. opacity: 0;
  133. transform: translate3d(-100%, 0, 0);
  134. }
  135. </style>