mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styles

This commit is contained in:
Kseninia Mikhaylova 2024-06-11 10:09:23 +03:00
parent 9c6d2e94e6
commit 65bb676ca0
3 changed files with 13 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/main.scss
View File

@ -48,7 +48,7 @@ a[href^="#"] {
} }
&-text { &-text {
@apply col-span-12 xl:col-span-5 text-sm prose whitespace-break-spaces; @apply col-span-12 xl:col-span-5 text-sm prose;
&-small { &-small {
@apply col-span-12 xl:col-span-10 text-xs min-w-full prose; @apply col-span-12 xl:col-span-10 text-xs min-w-full prose;
@ -76,11 +76,11 @@ a[href^="#"] {
} }
&-content { &-content {
@apply col-span-full xl:col-span-6 h-full flex flex-col justify-between min-w-full prose; @apply col-span-full xl:col-span-8 h-full flex flex-col justify-between min-w-full prose;
} }
&-text { &-text {
@apply whitespace-break-spaces; // @apply
} }
&-title { &-title {
@ -88,7 +88,7 @@ a[href^="#"] {
} }
&-image { &-image {
@apply col-span-full xl:col-span-6 flex justify-center items-center; @apply col-span-full xl:col-span-4 flex justify-center items-center;
min-height: 50vh; min-height: 50vh;
} }
} }

20
components/expDiagram.vue
View File

@ -1,12 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
import { TresCanvas } from '@tresjs/core' import { TresCanvas } from '@tresjs/core'
import { OrbitControls } from '@tresjs/cientos' import { OrbitControls, Environment } from '@tresjs/cientos'
const controlsState = reactive({ const controlsState = reactive({
minDistance: 1, minDistance: 1,
maxDistance: 10, maxDistance: 10,
enablePan: false, enablePan: false,
enableZoom: false, // enableZoom: false,
maxPolarAngle: (Math.PI / 2) - 0.2, maxPolarAngle: (Math.PI / 2) - 0.2,
}) })
const container = ref() const container = ref()
@ -22,23 +22,19 @@ const scrollBlock = (e: Event) => {
koef.value = visibleHeight / h koef.value = visibleHeight / h
} }
} }
onMounted(() => {
document.addEventListener('scroll', scrollBlock)
})
onUnmounted(() => {
document.removeEventListener('scroll', scrollBlock)
})
</script> </script>
<template> <template>
<div class="container min-w-full" ref="container"> <div class="container min-w-full" ref="container">
<TresCanvas shadows> <TresCanvas shadows>
<TresPerspectiveCamera :position="[-7, 2, 4]" /> <TresPerspectiveCamera :position="[-7, 2, 4]" />
<OrbitControls v-bind="controlsState" make-default /> <OrbitControls v-bind="controlsState" make-default />
<Suspense>
<Environment files='/hdrmaps/kloppenheim_06_4k.hdr' :background="true" />
</Suspense>
<ModelDiagram />
<ModelDiagram :koef="koef" /> <TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="#f2f2f2" cast-shadow />
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="#f2f2f2" cast-shadow />
<TresDirectionalLight :position="[2, 2, 2]" :intensity="2" color="violet" cast-shadow />
<TresDirectionalLight :position="[2, 2, -2]" :intensity="1" color="red" cast-shadow />
<TresAmbientLight /> <TresAmbientLight />
</TresCanvas> </TresCanvas>
</div> </div>

2
components/model/item.vue
View File

@ -16,7 +16,7 @@ box.getSize(size)
const getMaterial = () => { const getMaterial = () => {
return new MeshStandardMaterial({ return new MeshStandardMaterial({
color: props.color ? new Color(props.color) : new Color('#9c9c9c'), color: props.color ? new Color(props.color) : new Color('#9c9c9c'),
roughness: 0.5, roughness: 0.3,
metalness: 1, metalness: 1,
}) })
} }