Home.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <template>
  2. <div class="view-home">
  3. <div class="home-library" @click="$router.push('/library')">
  4. <div class="wrapper" />
  5. <b-button :to="{ name: 'library' }" variant="dark">
  6. {{ $t('sections.library') }}
  7. </b-button>
  8. </div>
  9. <div class="home-kit" @click="$router.push('/kit')">
  10. <div class="wrapper" />
  11. <b-button :to="{ name: 'kit' }" variant="kit">
  12. {{ $t('sections.kit') }}
  13. </b-button>
  14. </div>
  15. <div class="home-creations" @click="$router.push('/gallery')">
  16. <div class="wrapper" />
  17. <b-button :to="{ name: 'gallery' }" variant="creation">
  18. {{ $t('sections.gallery') }}
  19. </b-button>
  20. <div
  21. v-for="(item, i) in [['top', 'left'], ['top', 'right'], ['bottom', 'right'], ['bottom', 'left']]" :key="i"
  22. class="home-creations-circle" :class="item"
  23. />
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. export default {
  29. name: 'Home'
  30. }
  31. </script>
  32. <style lang="scss" scoped>
  33. .view-home {
  34. width: 100%;
  35. height: 100%;
  36. > div {
  37. display: flex;
  38. align-items: center;
  39. justify-content: center;
  40. position: relative;
  41. cursor: pointer;
  42. .wrapper {
  43. position: absolute;
  44. opacity: 0.5;
  45. height: 100%;
  46. width: 100%;
  47. pointer-events: none;
  48. }
  49. @include media-breakpoint-up($size-bp) {
  50. &:not(:hover) {
  51. .wrapper,
  52. .btn {
  53. display: none;
  54. }
  55. }
  56. }
  57. }
  58. @include media-breakpoint-down($size-bp-down) {
  59. display: flex;
  60. flex-direction: column;
  61. > div {
  62. height: 100%;
  63. }
  64. }
  65. @include media-breakpoint-up($size-bp) {
  66. display: grid;
  67. grid-template: 'a b'
  68. 'a c';
  69. grid-template-rows: repeat(2, 1fr);
  70. grid-template-columns: repeat(2, 1fr);
  71. .home-library {
  72. grid-area: a;
  73. }
  74. .home-kit {
  75. grid-area: b;
  76. }
  77. .home-creations {
  78. grid-area: c;
  79. }
  80. }
  81. .btn {
  82. font-family: $font-family-text;
  83. border-color: $black;
  84. padding: 0 1rem;
  85. font-size: 1.75rem;
  86. @include media-breakpoint-up($size-bp) {
  87. font-size: 2.5rem;
  88. }
  89. z-index: 1;
  90. }
  91. .home-library {
  92. background-image: url('~@/assets/imgs/home-library.svg');
  93. background-size: cover;
  94. background-position: center;
  95. border-bottom: $line;
  96. @include media-breakpoint-up($size-bp) {
  97. border-bottom: 0;
  98. border-right: $line;
  99. }
  100. .wrapper {
  101. background-color: $white;
  102. }
  103. }
  104. .home-kit {
  105. background-image: url('~@/assets/imgs/home-kit.svg');
  106. background-size: cover;
  107. .wrapper {
  108. background-color: lighten(theme-color('kit'), 15%);
  109. }
  110. }
  111. .home-creations {
  112. background-image: url('~@/assets/imgs/home-creations.svg');
  113. background-size: contain;
  114. background-position: center;
  115. background-repeat: no-repeat;
  116. border-top: $line;
  117. @include media-breakpoint-up($size-bp) {
  118. background-size: cover;
  119. }
  120. .wrapper {
  121. background-color: theme-color('creation');
  122. }
  123. &-circle {
  124. position: absolute;
  125. z-index: -1;
  126. width: 7vmin;
  127. height: 7vmin;
  128. background-color: #ccc;
  129. border-radius: 100%;
  130. @include media-breakpoint-up($size-bp) {
  131. width: 10vmin;
  132. height: 10vmin;
  133. }
  134. &.top {
  135. top: 0;
  136. }
  137. &.bottom {
  138. bottom: 0;
  139. }
  140. &.left {
  141. left: 0;
  142. }
  143. &.right {
  144. right: 0;
  145. }
  146. }
  147. }
  148. }
  149. </style>