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