bx-1379-redesign #15
|
@ -34,7 +34,7 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
|
||||||
|
|
||||||
.itemnav {
|
.itemnav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100vh - 15rem);
|
bottom: 5rem;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr 1fr 1fr;
|
||||||
|
@ -46,6 +46,8 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
>* {
|
>* {
|
||||||
|
grid-row-start: 2;
|
||||||
|
grid-row-end: 2;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -81,16 +83,20 @@ $boxShadow: 0px 0px 8px rgba(0, 0, 0, .25);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&-close {
|
&_one {
|
||||||
grid-column-start: 2;
|
grid-column-start: 2;
|
||||||
grid-column-end: 4;
|
grid-column-end: 4;
|
||||||
|
grid-row-start: 1;
|
||||||
|
grid-row-end: 1;
|
||||||
margin: 1rem 0.75rem;
|
margin: 1rem 0.75rem;
|
||||||
}
|
}
|
||||||
|
&_big {
|
||||||
&-deep {
|
|
||||||
width: 4rem;
|
width: 4rem;
|
||||||
height: 4rem;
|
height: 4rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
&-enter {
|
||||||
svg {
|
svg {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
height: 80%;
|
height: 80%;
|
||||||
|
|
|
@ -94,7 +94,7 @@ const nextClickableId = () => {
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</TresCanvas>
|
</TresCanvas>
|
||||||
<div class="itemnav" v-if="sidebar.is_open">
|
<div class="itemnav" v-if="sidebar.is_open">
|
||||||
<div class="itemnav-close">
|
<div class="itemnav-close itemnav_one" v-if="sidebar.target">
|
||||||
<a href="#" @click.prevent="sidebar.close()">
|
<a href="#" @click.prevent="sidebar.close()">
|
||||||
<icon_plus />
|
<icon_plus />
|
||||||
</a>
|
</a>
|
||||||
|
@ -104,11 +104,16 @@ const nextClickableId = () => {
|
||||||
<icon_left />
|
<icon_left />
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="itemnav-deep">
|
<div class="itemnav-deep itemnav_big" v-if="sidebar.target">
|
||||||
<RouterLink :to="`/${route.params.item}/${sidebar.target}`">
|
<RouterLink :to="`/${route.params.item}/${sidebar.target}`">
|
||||||
<icon_enter />
|
<icon_enter />
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="itemnav-close itemnav_big" v-else>
|
||||||
|
<a href="#" @click.prevent="sidebar.close()">
|
||||||
|
<icon_plus />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
<div class="itemnav-forward">
|
<div class="itemnav-forward">
|
||||||
<a href="#" @click.prevent="sidebar.open(nextClickableId())">
|
<a href="#" @click.prevent="sidebar.open(nextClickableId())">
|
||||||
<icon_right />
|
<icon_right />
|
||||||
|
|
|
@ -41,7 +41,7 @@ const controls_targetto_count = ref(COUNT)
|
||||||
const camera_moveto = ref() as Ref<Vector3 | undefined>;
|
const camera_moveto = ref() as Ref<Vector3 | undefined>;
|
||||||
const camera_moveto_count = ref(COUNT)
|
const camera_moveto_count = ref(COUNT)
|
||||||
const camera_rotatetoto = ref() as Ref<Quaternion | undefined>;
|
const camera_rotatetoto = ref() as Ref<Quaternion | undefined>;
|
||||||
const camera_rotatetoto_count = ref(10)
|
const camera_rotatetoto_count = ref(COUNT)
|
||||||
|
|
||||||
const sidebar = usePromoSidebar();
|
const sidebar = usePromoSidebar();
|
||||||
const sidebar_scene = usePromoScene();
|
const sidebar_scene = usePromoScene();
|
||||||
|
@ -313,13 +313,13 @@ onAfterRender(() => {
|
||||||
camera_moveto_count.value = COUNT;
|
camera_moveto_count.value = COUNT;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (!controls_targetto.value && !camera_moveto.value && camera_rotatetoto.value) {
|
if (camera_rotatetoto.value) {
|
||||||
timer.stopTimer();
|
timer.stopTimer();
|
||||||
camera.value?.quaternion.slerp(camera_rotatetoto.value, 0.5);
|
camera.value?.quaternion.slerp(camera_rotatetoto.value, koef);
|
||||||
camera.value?.quaternion.normalize()
|
camera.value?.quaternion.normalize()
|
||||||
camera_rotatetoto_count.value -= 1;
|
camera_rotatetoto_count.value -= 1;
|
||||||
if (camera_rotatetoto_count.value == 0) {
|
if (camera_rotatetoto_count.value == 0) {
|
||||||
camera_rotatetoto_count.value = 10;
|
camera_rotatetoto_count.value = COUNT;
|
||||||
camera_rotatetoto.value = undefined
|
camera_rotatetoto.value = undefined
|
||||||
}
|
}
|
||||||
camera.value?.updateMatrixWorld()
|
camera.value?.updateMatrixWorld()
|
||||||
|
|
|
@ -43,7 +43,7 @@ watch(() => sidebar.id_clickable, () => {
|
||||||
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('clickable')">
|
<div class="sidebar-accordion-title" @click="sidebar.toggleAccordion('clickable')">
|
||||||
<i-mdi-minus-circle v-if="sidebar.isAccOpen('clickable')" />
|
<i-mdi-minus-circle v-if="sidebar.isAccOpen('clickable')" />
|
||||||
<i-mdi-plus-circle v-else />
|
<i-mdi-plus-circle v-else />
|
||||||
<h3>Кликабельные области</h3>
|
<h3>Виртуальный тур</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('clickable')">
|
<div class="sidebar-accordion-content" v-if="sidebar.isAccOpen('clickable')">
|
||||||
|
|
|
@ -35,7 +35,7 @@ export const usePromoSidebar = defineStore('promo_sidebar', {
|
||||||
this.loading = true
|
this.loading = true
|
||||||
},
|
},
|
||||||
setData(data: PromoSidebarData) {
|
setData(data: PromoSidebarData) {
|
||||||
this.$state = Object.assign(this.$state, data)
|
this.$state = Object.assign(this.$state, { target: undefined }, data)
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
if (this.is_open) {
|
if (this.is_open) {
|
||||||
|
|
Loading…
Reference in New Issue