layout.vue 864 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950
  1. <template>
  2. <div class="zhihui-contain">
  3. <div v-show="noNetwork" class="no-network" />
  4. <Head />
  5. <Aside />
  6. <Main />
  7. </div>
  8. </template>
  9. <script>
  10. import { mapGetters } from 'vuex'
  11. import Head from '@/components/newLayout/Head'
  12. import Aside from '@/components/newLayout/Aside'
  13. import Main from '@/components/newLayout/Main'
  14. export default {
  15. components: {
  16. Aside,
  17. Main,
  18. Head
  19. },
  20. computed: {
  21. ...mapGetters(['noNetwork'])
  22. }
  23. }
  24. </script>
  25. <style lang="scss" scoped>
  26. .zhihui-contain {
  27. display: flex;
  28. overflow: hidden;
  29. height: 100%;
  30. }
  31. .no-network {
  32. position: fixed;
  33. z-index: 999;
  34. top:0;
  35. left: 0;
  36. height: 3px;
  37. width: 100vw;
  38. animation: loading linear 5s infinite;
  39. background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
  40. }
  41. @keyframes loading{
  42. from{
  43. width: 0
  44. }
  45. to{
  46. width: 100%
  47. }
  48. }
  49. </style>