Небольшие функции и правки стилей

2026-03-25 22:57:01 +03:00
parent 2c490c8359
commit 7818fe062f
7 changed files with 101 additions and 79 deletions
@@ -23,4 +23,10 @@ function highlight() {
 }

 onMounted(highlight)
-</script>
+</script>
+
+<style scoped>
+pre {
+    padding-left: 10px;
+}
+</style>
@@ -12,7 +12,6 @@ const props = defineProps({
        default: false
    }
 })
-console.log(props.code)
 </script>

 <template>
@@ -32,16 +32,16 @@ function scrollToBottom() {
    gap: 2px;
    flex-direction: column;
    position: fixed;
-    right: 25px;
+    right: 15px;
    bottom: calc(50% - 50px);
 }

 .movement-buttons > button {
    width: auto;
    font-size: 15px;
-    border: 2px solid white;
+    border: 2px solid #d0d0d0;
    color: white;
-    background-color: #23aae3e2;
+    background-color: #383838;
    height: 50px;
 }

@@ -7,7 +7,7 @@
                        <strong>Заголовок по умолчанию</strong>
                    </slot>
                    <button class="modal-btn-close" @click.stop="onClose"
-                        aria-label="Закрыть модальное окно">
+                            aria-label="Закрыть модальное окно">
                        ×
                    </button>
                </header>
@@ -26,6 +26,7 @@

 <script setup>
 import {defineEmits} from 'vue'
+import {useEventListener} from "@vueuse/core";

 const emit = defineEmits({
    close: null,
@@ -46,6 +47,13 @@ function onClose() {
    emit('update:show')
    emit('close')
 }
+
+const handleKeydown = (event) => {
+    if (event.code === "Escape") {
+        emit('update:show')
+    }
+}
+useEventListener("keydown", handleKeydown);
 </script>

 <style>
@@ -104,14 +112,15 @@ function onClose() {
 .modal-footer {
    justify-content: flex-end;
    border-top: 1px solid white;
-
 }

 .modal-footer button {
    justify-content: flex-end;
    border-top: 1px solid white;
    padding: 5px;
-    color: rgb(0, 0, 0);
+    color: black;
+    font-size: 15px;
+    border-radius: 5px;
 }

 .modal-footer-success button {
@@ -146,16 +155,19 @@ function onClose() {
    opacity: 0;
    transform: translateY(20px);
 }
+
 /* Конец появления: на месте и видим */
 .modal-fade-enter-to {
    opacity: 1;
    transform: translateY(0);
 }
+
 /* Начало исчезания: на месте и видим */
 .modal-fade-leave-from {
    opacity: 1;
    transform: translateY(0);
 }
+
 /* Конец исчезания: выше и прозрачный */
 .modal-fade-leave-to {
    opacity: 0;
@@ -165,7 +177,7 @@ function onClose() {
 /* Общие настройки анимации (скорость + плавность) */
 .modal-fade-enter-active,
 .modal-fade-leave-active {
-    transition: transform 0.7s cubic-bezier(.22,.9,.31,1), opacity 0.7s ease;
+    transition: transform 0.7s cubic-bezier(.22, .9, .31, 1), opacity 0.7s ease;
    will-change: transform, opacity;
 }
 </style>
@@ -20,7 +20,7 @@
                </div>

                <nav class="menu-content">
-                    <custom-button @click="openInfoCard(link)" v-for="link in links">{{ link.title }}</custom-button>
+                    <custom-button @click="openInfoCard(item)" v-for="item in informationForDirectory">{{ item.title }}</custom-button>
                </nav>
            </aside>
        </transition>
@@ -47,6 +47,7 @@
 import {ref} from 'vue';
 import MyDialog from "@/components/MyDialog.vue";
 import CustomButton from '@/components/UI/CustomButton.vue'
+import informationForDirectory from "../data/informationForDirectory";

 const isOpen = ref(false);
 const isModalVisible = ref(false);
@@ -71,63 +72,6 @@ function openInfoCard(obj) {
    infoCard.value = obj
 }

-const links = [
-    {
-        title: 'ROS',
-        body: 'ROS (Robot Operating System) — экосистема для программирования роботов с открытым исходным кодом',
-        hrefToDoc: 'https://www.ros.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2260739/step/1?unit=2294748'
-    },
-    {
-        title: 'OpenCV',
-        body: 'OpenCV (Open Source Computer Vision Library) — библиотека алгоритмов компьютерного зрения, обработки изображений и численных алгоритмов общего назначения с открытым кодом.',
-        hrefToDoc: 'https://opencv.org/',
-        hrefToCourse: 'https://stepik.org/lesson/2272700/step/1?unit=2306893'
-    },
-    {
-        title: 'navigate_wait',
-        body: 'Navigate_wait — функция в библиотеке CLOVER, которая ожидает, пока дрон долетит до целевой точки, перед выполнением следующей команды. Это полезно, так как функция navigate сразу возвращает управление: скрипт продолжает выполняться, даже если дрон ещё летит к цели. ',
-        hrefToDoc: 'https://clover.coex.tech/ru/snippets.html',
-        hrefToCourse: 'https://stepik.org/lesson/2264712/step/1?unit=2298803'
-    },
-    {
-        title: 'Topic',
-        body: 'Топик (Topic) в ROS — это именованный канал передачи данных, через который ноды обмениваются сообщениями.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Нода',
-        body: 'Нода в ROS - исполняемая программа, которая выполняет одну задачу. ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2261765/step/1?unit=2295758'
-    },
-    {
-        title: 'Издатель',
-        body: 'Издатель (Publisher) в ROS — это узел, который производит данные. Он может публиковать сообщения определённого типа в заданной теме и делать их доступными для других узлов (подписчиков). ',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Подписчик',
-        body: 'Подписчик (Subscriber) в ROS — это узел, который получает сообщения и информацию, публикуемые в определённой теме (канале) ROS.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2262844/step/1?unit=2296866'
-    },
-    {
-        title: 'Сервис',
-        body: 'Сервис в ROS - это функция, которую мы можем вызвать, чтобы либо дать команду роботу,либо получить от него какую-то информацию.',
-        hrefToDoc: 'https://docs.voltbro.ru/starting-ros/basics.html',
-        hrefToCourse: 'https://stepik.org/lesson/2263182/step/1?unit=2297206'
-    },
-    {
-        title: 'Системы координат',
-        body: 'Системы координат в Clover позволяют определять местоположение дрона относительно разных точек отсчёта, что важно для автономного полёта, навигации и других задач. Наиболее часто используемые: aruco_map и body',
-        hrefToCourse: 'https://stepik.org/lesson/2264336/step/1?unit=2298407',
-        hrefToDoc: 'https://clover.coex.tech/ru/frames.html'
-    },
-]
-
 // Экспортируем методы, если захотим управлять меню извне
 defineExpose({open: () => (isOpen.value = true), close: closeMenu});
 </script>