From Admin, 8 Months ago, written in JavaScript.
Embed
  1. <template>
  2.   <div id="app">
  3.     <i id="desctopBg"></i>
  4.     <Navigation></Navigation>
  5.     <section id="main">
  6.       <router-view :key="$route.fullPath"></router-view>
  7.     </section>
  8.   </div>
  9. </template>
  10.  
  11. <script>
  12. import Navigation from '@/components/shared/Navigation';
  13.  
  14. export default {
  15.   name: 'App',
  16.   components: {
  17.     Navigation,
  18.   },
  19. };
  20. </script>
  21.  
  22. <style>
  23. .custom-control-label::before,
  24. .custom-control-label::after {
  25.   top: .8rem !important;
  26.   width: 1.25rem !important;
  27.   height: 1.25rem !important;
  28. }
  29. .navbar-light .navbar-toggler-icon {
  30.   background-image: url('./assets/img/hamburger.png') !important;
  31.   width: 50px;
  32.   height: 50px;
  33.   z-index: 1000;
  34. }
  35. #app {
  36.   font-family: 'Lato', sans-serif !important;
  37.   -webkit-font-smoothing: antialiased;
  38.   -moz-osx-font-smoothing: grayscale;
  39.   color: #2c3e50;
  40.   height: 100%;
  41. }
  42. #main {
  43.   height: calc(100% - 500px);
  44. }
  45.  
  46. @media only screen and (max-width: 2560px) {
  47.   #desctopBg {
  48.     position: absolute;
  49.     left: 0;
  50.     right: 0;
  51.     top: 0;
  52.     bottom: 0;
  53.     margin: auto;
  54.     background: url('./assets/img/bg-rest.png');
  55.     background-color: #343b7c;
  56.     background-repeat: no-repeat;
  57.     background-position: center center;
  58.     background-attachment: fixed;
  59.     -webkit-background-size: cover;
  60.     -moz-background-size: cover;
  61.     -o-background-size: cover;
  62.     background-size: cover;
  63.     width: 100%;
  64.     height: 100vh;
  65.   }
  66. }
  67. @media only screen and (max-width: 1023px) {
  68.   #desctopBg {
  69.     display: none;
  70.   }
  71. }
  72. @media only screen and (max-width: 1022px) {
  73.   #app {
  74.     background-color: #111d61;
  75.     height: 100vh;
  76.   }
  77. }
  78. @media only screen and (max-width: 991px) {
  79.   .navbar-collapse .collapse .show ul {
  80.     background-color: #111d61;
  81.   }
  82. }
  83. @media only screen and (max-width: 768px) {
  84.   #app {
  85.     background-color: #111d61;
  86.     height: auto;
  87.   }
  88. }
  89. </style>
  90.