119 lines
2.8 KiB
Vue
119 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import { RouterLink } from 'vue-router';
|
|
import { onClickOutside } from '@vueuse/core'
|
|
import { usePromoSidebar } from '../../stores/promo_sidebar';
|
|
import { usePromoScene } from '../../stores/promo_scene';
|
|
|
|
const sidebar = usePromoSidebar()
|
|
const scene = usePromoScene()
|
|
const sidebar_obj = ref()
|
|
console.log(scene.list)
|
|
// onClickOutside(sidebar_obj, () => sidebar.close())
|
|
</script>
|
|
<template>
|
|
<div class="sidebar" :class="[{ 'open': sidebar.is_open }]" ref="sidebar_obj">
|
|
<a href="#" @click.prevent="sidebar.close" class="sidebar-close">
|
|
<i-mdi-close />
|
|
</a>
|
|
<div class="sidebar-content">
|
|
<template v-if="!sidebar.is_open"></template>
|
|
<template v-else-if="(sidebar.description && sidebar.title)">
|
|
<h2>{{ sidebar.title }}</h2>
|
|
<template v-for="p in sidebar.description.split('\n')">
|
|
<p>{{ p }}</p>
|
|
</template>
|
|
<RouterLink class="btn" :to="`/promo/main/${sidebar.target}`" v-if="sidebar.target">
|
|
{{ sidebar.target_name }}
|
|
</RouterLink>
|
|
</template>
|
|
<template v-else>
|
|
<template v-for="item in scene.list">
|
|
<h3>{{ item.name }}</h3>
|
|
<p>{{ item.description }}</p>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style scoped lang="scss">
|
|
.sidebar {
|
|
width: 23vw;
|
|
background-color: #fff;
|
|
position: fixed;
|
|
top: 0;
|
|
right: -27vw;
|
|
bottom: 0;
|
|
transition: all 300ms linear;
|
|
line-height: 1.25;
|
|
|
|
padding: 3rem 2rem 2rem;
|
|
|
|
&.open {
|
|
right: 0
|
|
}
|
|
|
|
&-close {
|
|
position: absolute;
|
|
left: 1.5rem;
|
|
top: 0.5rem;
|
|
font-size: 2rem;
|
|
color: black;
|
|
}
|
|
|
|
&-content {
|
|
max-height: 100%;
|
|
overflow: auto;
|
|
}
|
|
|
|
h2 {
|
|
text-align: center;
|
|
font-size: 2rem;
|
|
margin: 1rem
|
|
}
|
|
|
|
p,
|
|
h3 {
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
p {
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.5rem;
|
|
font-weight: bold
|
|
}
|
|
|
|
.btn {
|
|
display: block;
|
|
margin: 0 auto;
|
|
|
|
background: #4FD1C5;
|
|
background: linear-gradient(90deg, rgba(129, 230, 217, 1) 0%, rgba(79, 209, 197, 1) 100%);
|
|
color: #313133;
|
|
transition: .2s linear;
|
|
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
|
|
text-align: center;
|
|
text-decoration: none;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1.3px;
|
|
|
|
border-radius: 1000px;
|
|
|
|
box-shadow: 12px 12px 24px rgba(79, 209, 197, .64);
|
|
}
|
|
|
|
.btn:hover {
|
|
box-shadow: 0 0 0 2px white, 0 0 0 4px #3C82F8;
|
|
}
|
|
}
|
|
</style> |