Develop #17
+24
-21
@@ -1,11 +1,12 @@
|
||||
<script setup>
|
||||
import {ref, onMounted, h} from "vue";
|
||||
import izitoast from "./shared/izitoast";
|
||||
import izitoast from "@/shared/izitoast";
|
||||
import {useEventListener} from "@vueuse/core";
|
||||
import MyDialog from "./components/MyDialog.vue";
|
||||
import MyDropMenu from "./components/MyDropMenu.vue";
|
||||
import copyToclipboard from "./shared/copyToclipboard";
|
||||
import MyDialog from "@/components/MyDialog.vue";
|
||||
import MyDropMenu from "@/components/MyDropMenu.vue";
|
||||
import copyToclipboard from "@/shared/copyToclipboard";
|
||||
import ContextMenu from "@imengyu/vue3-context-menu";
|
||||
import CustomButton from '@/components/UI/CustomButton.vue'
|
||||
|
||||
const numbers = ref([]); // Инициализируем массив с пустыми строками
|
||||
const clickCount = ref(1); // Счетчик нажатий
|
||||
@@ -214,6 +215,7 @@ function deletePointMap(item) {
|
||||
item.BgImg = 'images/ArUco-marker.jpg'
|
||||
}
|
||||
}
|
||||
|
||||
function createIcon(src) {
|
||||
return h('img', {
|
||||
src: src,
|
||||
@@ -223,6 +225,7 @@ function createIcon(src) {
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
function onContextMenu(e, item) {
|
||||
ContextMenu.showContextMenu({
|
||||
theme: 'mac dark',
|
||||
@@ -293,24 +296,27 @@ function onContextMenu(e, item) {
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button @click="saveResult">Сохранить</button>
|
||||
<button @click="cleanResult">Очистить</button>
|
||||
<button @click="cancel">Отменить</button>
|
||||
<custom-button class="actions__btn">Сохранить</custom-button>
|
||||
<custom-button class="actions__btn" @click="cleanResult">Очистить</custom-button>
|
||||
<custom-button class="actions__btn" @click="cancel">Отменить</custom-button>
|
||||
</div>
|
||||
<MyDropMenu/>
|
||||
</div>
|
||||
|
||||
|
||||
<MyDialog v-show="isModalVisible" @close="isModalVisible = false" class="dialogWindow"
|
||||
:is-success=Boolean(listOfTrips.length)>
|
||||
<MyDialog
|
||||
v-model:show="isModalVisible"
|
||||
class="dialogWindow"
|
||||
:is-success=Boolean(listOfTrips.length)
|
||||
>
|
||||
<template #header>
|
||||
<strong v-if="listOfTrips.length">Код готов!</strong>
|
||||
<strong v-else>Код не готов!</strong>
|
||||
</template>
|
||||
<template #body>
|
||||
<main>
|
||||
<p v-if="listOfTrips.length">Скопируйте или скачайте ваш код</p>
|
||||
<p v-else>Выстройте маршрут перед сохранением кода.</p>
|
||||
</template>
|
||||
</main>
|
||||
<template #footer>
|
||||
<div v-if="listOfTrips.length">
|
||||
<button @click="handleDownloadBtn">Скачать код</button>
|
||||
@@ -324,6 +330,7 @@ function onContextMenu(e, item) {
|
||||
<style>
|
||||
html {
|
||||
background-image: radial-gradient(#383838e2, #222222);
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
:root {
|
||||
@@ -356,7 +363,6 @@ html {
|
||||
transition: background-color 0.3s ease;
|
||||
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
text-shadow: -1px -1px 0 black,
|
||||
1px -1px 0 black,
|
||||
-1px 1px 0 black,
|
||||
@@ -380,19 +386,16 @@ html {
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-left: 10px;
|
||||
margin: 3px 0 0 10px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.actions button {
|
||||
border: 2px solid rgb(251, 251, 251);
|
||||
padding: 15px 30px;
|
||||
font-size: 15px;
|
||||
background-color: #383838;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
margin: 5px;
|
||||
transition: 0.3s;
|
||||
padding: 20px 35px;
|
||||
//background-color: red;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,22 @@
|
||||
<template>
|
||||
<transition name="modal-fade">
|
||||
<div class="modal-backdrop" @click="closeModal">
|
||||
<div class="modal-backdrop" v-if="show" @click.stop="$emit('update:show', false)">
|
||||
<div class="modal" @click.stop>
|
||||
<header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
|
||||
<slot name="header">
|
||||
<strong>Заголовок по умолчанию</strong>
|
||||
</slot>
|
||||
<button class="modal-btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
|
||||
<button class="modal-btn-close" @click.stop="$emit('update:show', false)"
|
||||
aria-label="Закрыть модальное окно">
|
||||
×
|
||||
</button>
|
||||
</header>
|
||||
<section class="modal-body">
|
||||
<slot name="body">Тело по умолчанию</slot>
|
||||
<slot>Тело по умолчанию</slot>
|
||||
</section>
|
||||
<footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
|
||||
<slot name="footer">
|
||||
<button @click="closeModal">Закрыть</button>
|
||||
<button @click.stop="$emit('update:show', false)">Закрыть</button>
|
||||
</slot>
|
||||
</footer>
|
||||
</div>
|
||||
@@ -24,17 +25,16 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const emit = defineEmits(['close'])
|
||||
const props = defineProps({
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
function closeModal() {
|
||||
emit('close');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@@ -48,6 +48,7 @@ function closeModal() {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 501;
|
||||
}
|
||||
|
||||
.modal {
|
||||
|
||||
+180
-80
@@ -1,120 +1,220 @@
|
||||
<template>
|
||||
<div class="navigation-wrapper">
|
||||
<!-- Кнопка Бургер -->
|
||||
<button
|
||||
class="burger-btn"
|
||||
@click="toggleMenu"
|
||||
:class="{ 'is-active': isOpen }"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
<div class="navigation-wrapper">
|
||||
<!-- Кнопка Бургер -->
|
||||
<button
|
||||
class="burger-btn"
|
||||
@click="toggleMenu"
|
||||
:class="{ 'is-active': isOpen }"
|
||||
aria-label="Menu"
|
||||
>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
</button>
|
||||
|
||||
<!-- Затемнение заднего фона (Overlay) -->
|
||||
<transition name="fade">
|
||||
<div v-if="isOpen" class="overlay" @click="closeMenu"></div>
|
||||
</transition>
|
||||
<!-- Затемнение заднего фона (Overlay) -->
|
||||
<transition name="fade">
|
||||
<div v-if="isOpen" class="overlay" @click="closeMenu"></div>
|
||||
</transition>
|
||||
|
||||
<!-- Выпадающая панель -->
|
||||
<transition name="slide">
|
||||
<aside v-if="isOpen" class="side-panel">
|
||||
<div class="menu-header">
|
||||
<h1>SkyVue</h1>
|
||||
</div>
|
||||
|
||||
<nav class="menu-content">
|
||||
<a href="https://clover.coex.tech/ru/simple_offboard.html" target="_blank">COEX Автономный полет</a>
|
||||
<slot>
|
||||
<p class="placeholder">Здесь будут ваши ссылки...</p>
|
||||
</slot>
|
||||
</nav>
|
||||
</aside>
|
||||
</transition>
|
||||
</div>
|
||||
<!-- Выпадающая панель -->
|
||||
<transition name="slide">
|
||||
<aside v-if="isOpen" class="side-panel">
|
||||
<div class="menu-header">
|
||||
<h1>SkyVue</h1>
|
||||
</div>
|
||||
|
||||
<nav class="menu-content">
|
||||
<custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
|
||||
</nav>
|
||||
</aside>
|
||||
</transition>
|
||||
<MyDialog
|
||||
isSuccess
|
||||
v-model:show="isModalVisible"
|
||||
>
|
||||
<template #header>
|
||||
<strong>{{ infoCard.title }}</strong>
|
||||
</template>
|
||||
<main>
|
||||
<p>{{ infoCard.body }}</p>
|
||||
</main>
|
||||
<template #footer>
|
||||
<custom-button title="Посмотреть на stepike">Курс</custom-button>
|
||||
<custom-button title="Посмотреть в официальной документации">Документация</custom-button>
|
||||
<custom-button>ОК</custom-button>
|
||||
</template>
|
||||
</MyDialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import {ref} from 'vue';
|
||||
import MyDialog from "@/components/MyDialog.vue";
|
||||
import CustomButton from '@/components/UI/CustomButton.vue'
|
||||
|
||||
const isOpen = ref(false);
|
||||
const isModalVisible = ref(false);
|
||||
const infoCard = ref({})
|
||||
|
||||
const toggleMenu = () => {
|
||||
isOpen.value = !isOpen.value;
|
||||
isOpen.value = !isOpen.value;
|
||||
};
|
||||
|
||||
const closeMenu = () => {
|
||||
isOpen.value = false;
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
function openInfoCard(obj) {
|
||||
isModalVisible.value = true
|
||||
infoCard.value = obj
|
||||
}
|
||||
|
||||
const links = [
|
||||
{
|
||||
title: 'Что такое ROS?',
|
||||
body: 'ROS — переводится как robot operation system',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '2',
|
||||
body: 'Информация для учащихся 2',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '3',
|
||||
body: 'Информация для учащихся 3',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '4',
|
||||
body: 'Информация для учащихся 4',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '5',
|
||||
body: 'Информация для учащихся 5',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '6',
|
||||
body: 'Информация для учащихся 6',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '7',
|
||||
body: 'Информация для учащихся 7',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '8',
|
||||
body: 'Информация для учащихся 8',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '9',
|
||||
body: 'Информация для учащихся 9',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
{
|
||||
title: '0',
|
||||
body: 'Информация для учащихся 0',
|
||||
hrefToDoc: 'https://clover.coex.tech/ru/simple_offboard.html',
|
||||
hrefToCourse: 'https://stepic.org'
|
||||
},
|
||||
]
|
||||
|
||||
// Экспортируем методы, если захотим управлять меню извне
|
||||
defineExpose({ open: () => (isOpen.value = true), close: closeMenu });
|
||||
defineExpose({open: () => (isOpen.value = true), close: closeMenu});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.burger-btn {
|
||||
position: fixed; /* Она всегда на одном месте при скролле */
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.508);
|
||||
border: 1px solid #383838;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
position: fixed; /* Она всегда на одном месте при скролле */
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
z-index: 9999; /* Максимальный приоритет, чтобы быть ПОВЕРХ всего */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
width: 40px;
|
||||
height: 30px;
|
||||
background: rgba(255, 255, 255, 0.508);
|
||||
border: 1px solid #383838;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
h1{
|
||||
text-align: center;
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #383838; /* Ярко-красный цвет для теста */
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background-color: #383838; /* Ярко-красный цвет для теста */
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Анимация бургера в крестик */
|
||||
.is-active .line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
|
||||
.is-active .line:nth-child(2) { opacity: 0; }
|
||||
.is-active .line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
|
||||
.is-active .line:nth-child(1) {
|
||||
transform: translateY(6px) rotate(45deg);
|
||||
}
|
||||
|
||||
.is-active .line:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.is-active .line:nth-child(3) {
|
||||
transform: translateY(-6px) rotate(-45deg);
|
||||
}
|
||||
|
||||
/* Боковая панель */
|
||||
.side-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 100vh;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
padding: 0 20px 20px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 300px;
|
||||
height: 100%;
|
||||
background: white;
|
||||
z-index: 1000;
|
||||
padding: 0 20px 20px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* Затемнение фона */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 999;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* Анимации появления */
|
||||
.slide-enter-active, .slide-leave-active { transition: transform 0.3s ease; }
|
||||
.slide-enter-from, .slide-leave-to { transform: translateX(-100%); }
|
||||
.slide-enter-active, .slide-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s ease; }
|
||||
.fade-enter-from, .fade-leave-to { opacity: 0; }
|
||||
.slide-enter-from, .slide-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #00e44c;
|
||||
/* цвет текста */
|
||||
font-style: italic;
|
||||
.fade-enter-active, .fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from, .fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
isSuccess: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
},
|
||||
to: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<a v-if="to" :href="props.to" class="btn">
|
||||
<slot/>
|
||||
</a>
|
||||
<button v-else class="btn">
|
||||
<slot/>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.btn {
|
||||
border: 2px solid white;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
padding: 5px;
|
||||
background-color: #383838;
|
||||
color: white;
|
||||
width: 100%;
|
||||
font-size: 17px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user