feat(components): figure page

src/assets/styles/_reset.scss

@@ -2,7 +2,6 @@
   margin: 0;
   padding: 0;
   border: 0;
-  outline: none;
   background: none;
   box-sizing: border-box;
 }

src/assets/styles/_scroll.scss

@@ -1,5 +1,5 @@
 ::-webkit-scrollbar {
-  width: 6px;
+  width: 3px;
 }
 
 ::-webkit-scrollbar-track {

src/assets/styles/_variables.scss

@@ -4,6 +4,7 @@
   --border-color: #e4e1e1;
   --icon-color: #5e5f60;
   --seconary-color: #8d8d8d;
+  --scroll-color: #d4d3d4;
   --shadow-color: rgba(163, 167, 174, 0.2);
   --border: 1px solid var(--border-color);
   --shadow: 0 0 9px 0 var(--shadow-color);

src/assets/styles/main.scss

@@ -20,3 +20,12 @@ button {
   height: 20px;
   cursor: pointer;
 }
+
+h1, h2 {
+  font-size: 20px;
+  font-weight: 600;
+}
+
+h2 {
+  font-weight: 500;
+}

src/components/accordion.vue

@@ -6,7 +6,7 @@ const showForm = ref<boolean>(false);
 <template>
   <section class="block">
     <div class="header" @click="showForm = !showForm">
-      <h2 class="title">{{ title }}</h2>
+      <h2>{{ title }}</h2>
       <button class="button">
         <IconClose v-if="showForm"/>
         <IconOpen v-else/>
@@ -18,7 +18,7 @@ const showForm = ref<boolean>(false);
   </section>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .block {
   display: flex;
   flex-direction: column;
@@ -35,11 +35,6 @@ const showForm = ref<boolean>(false);
   padding: 8px 0;
 }
 
-.title {
-  font-size: 1.04rem;
-  font-weight: 500;
-}
-
 .button {
   color: var(--icon-color);
 }

src/components/grid/container.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="grid">
+    <slot/>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-column-gap: 16px;
+  grid-row-gap: 16px;
+}
+</style>

src/components/grid/element.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+const {title, isActive = false} = defineProps<{ title?: string, isActive?: boolean }>();
+
+</script>
+
+<template>
+  <button class="block" :class="{'block_active': isActive}">
+    <div class="picture"></div>
+    <div v-if="title" class="title">{{ title }}</div>
+  </button>
+</template>
+
+<style scoped lang="scss">
+.block {
+  font-family: 'Formular', sans-serif;
+  font-weight: 400;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  row-gap: 8px;
+  width: 100%;
+  height: 200px;
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background-color: #fae9ef;
+  color: #67122c;
+  padding: 16px;
+  font-size: 17px;
+  transition: background-color 0.2s, transform 0.2s;
+
+  &_active {
+    background-color: #fdd2e2;
+  }
+
+  &:hover {
+    background-color: #fdd2e2;
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+.picture {
+  width: 48px;
+  height: 48px;
+  margin: 8px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: contain;
+}
+
+.title {
+  margin-top: 8px;
+  width: 100%;
+  text-align: left;
+}
+</style>

src/layouts/default.vue

@@ -21,7 +21,7 @@ const showMenu = ref<boolean>(true);
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
 .wrapper {
   width: 100%;
   height: 100%;
@@ -32,9 +32,10 @@ const showMenu = ref<boolean>(true);
 .content {
   position: relative;
   height: max-content;
-  margin: 20px;
+  padding: 20px;
   display: flex;
   column-gap: 16px;
+  max-height: 100%;
 }
 
 .controls {
@@ -44,15 +45,14 @@ const showMenu = ref<boolean>(true);
   background-color: white;
   border-radius: 8px;
   width: 480px;
-  height: max-content;
   max-height: calc(100% - 40px);
-  overflow-y: auto;
+  overflow: auto;
   border: var(--border);
   box-shadow: var(--shadow);
   z-index: 2;
   display: flex;
   flex-direction: column;
-  row-gap: 20px;
+  row-gap: 24px;
 }
 
 .button {

src/pages/catalog.vue

@@ -1,7 +0,0 @@
-<template>
-Test
-</template>
-
-<style scoped>
-
-</style>

src/pages/figure.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+const axes = ['x', 'y', 'z'];
+const projections = [
+  'Без проекции',
+  'Изометрическая',
+  'Диметрическая',
+  'Триметрическая',
+  'Одноточечная перспективная',
+  'Двухточечная перспективная',
+];
+
+const activeProjection = ref<number>(0);
+</script>
+
+<template>
+  <div class="container">
+    <Accordion title="Перемещение">
+      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
+    </Accordion>
+    <Accordion title="Вращение">
+      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
+    </Accordion>
+    <Accordion title="Масштабирование">
+      <FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1"
+                 :defaultValue="1"/>
+    </Accordion>
+    <Accordion title="Проекции">
+      <GridContainer>
+        <GridElement v-for="(projection, i) in projections" :is-active="activeProjection === i" :key="projection"
+                     :title="projection" @click="activeProjection = i"/>
+      </GridContainer>
+    </Accordion>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
+}
+</style>

src/pages/index.vue

@@ -1,25 +1,13 @@
 <script setup lang="ts">
-const axes = ['x', 'y', 'z'];
+const figures = ['Тетраэдр', 'Гексаэдр', 'Октаэдр', 'Додекаэдр', 'Икосаэдр'];
 </script>
 
 <template>
-  <div class="container">
+  <h1>Выберете фигуру</h1>
-    <Accordion title="Перемещение">
+  <GridContainer>
-      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="-10" :max="10" :step="0.1" :defaultValue="0"/>
+    <GridElement v-for="figure in figures" :key="figure" :title="figure"/>
-    </Accordion>
+  </GridContainer>
-    <Accordion title="Вращение">
-      <FormRange v-for="axis in axes" :label="`${axis} =`" :min="0" :max="359" :step="1" :defaultValue="0"/>
-    </Accordion>
-    <Accordion title="Масштабирование">
-      <FormRange v-for="axis in axes" :key="axis" :label="`${axis} =`" :min="0.1" :max="5" :step="0.1" :defaultValue="1"/>
-    </Accordion>
-  </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
-.container {
-  display: flex;
-  flex-direction: column;
-  row-gap: 16px;
-}
 </style>