robonen/canvas-3d
1
0
Fork 0
mirror of https://github.com/robonen/canvas-3d.git synced 2026-03-20 02:44:40 +00:00
Code Activity

feat(pages): default app layout and index page

Browse Source
This commit is contained in:
Andrew Robonen
2022-11-09 19:58:03 +07:00
parent 0a5c607387
commit 10498fe8b3
3 changed files with 95 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
src/layouts/default.vue Normal file
View File

@@ -0,0 +1,71 @@
<script setup lang="ts">
const showMenu = ref<boolean>(true);
</script>
<template>
<div class="wrapper">
<div class="content">
<button v-if="!showMenu" class="button" @click="showMenu = true">
<IconMenu/>
</button>
<template v-else>
<div class="controls">
<slot/>
</div>
<button class="button" @click="showMenu = false">
<IconHide/>
</button>
</template>
</div>
<canvas class="canvas"/>
</div>
</template>
<style scoped>
.wrapper {
width: 100%;
height: 100%;
position: relative;
display: flex;
}
.content {
position: relative;
height: max-content;
margin: 20px;
display: flex;
column-gap: 16px;
}
.controls {
position: relative;
box-sizing: border-box;
padding: 28px 24px;
background-color: white;
border-radius: 8px;
width: 480px;
height: max-content;
max-height: calc(100% - 40px);
overflow-y: auto;
border: var(--border);
box-shadow: var(--shadow);
z-index: 2;
display: flex;
flex-direction: column;
row-gap: 20px;
}
.button {
margin-top: 8px;
z-index: 3;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
}
</style>

7
src/pages/catalog.vue Normal file
View File

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

26
src/pages/index.vue
View File

@@ -1,17 +1,25 @@
<script setup lang="ts">
const axes = ['x', 'y', 'z'];
</script>
<template>
<div>
<Head>
<Title>Главная</Title>
</Head>
<h1>Hello, Nuxt ✌</h1>
<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>
</div>
</template>
<style scoped>
div {
height: 100%;
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
row-gap: 16px;
}
</style>