Предваарительный коммит

src/components/MyDialog.vue

@@ -2,20 +2,20 @@
   <transition name="modal-fade">
     <div class="modal-backdrop" @click="closeModal">
       <div class="modal" @click.stop>
-        <header class="modal-header">
+        <header :class="['modal-header', isSuccess ? 'modal-header-success': 'modal-header-error']">
           <slot name="header">
             <strong>Заголовок по умолчанию</strong>
           </slot>
-          <button type="button" class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
+          <button class="btn-close" @click="closeModal" aria-label="Закрыть модальное окно">
             ×
           </button>
         </header>
         <section class="modal-body">
           <slot name="body">Тело по умолчанию</slot>
         </section>
-        <footer class="modal-footer">
+        <footer :class="['modal-footer', isSuccess ? 'modal-footer-success': 'modal-footer-error']">
           <slot name="footer">
-            <button type="button" class="btn-green" @click="closeModal">Закрыть</button>
+            <button  @click="closeModal">Закрыть</button>
           </slot>
         </footer>
       </div>
@@ -25,6 +25,12 @@
 
 <script setup>
 const emit = defineEmits(['close'])
+const props = defineProps({
+  isSuccess: {
+    type: Boolean,
+    required: true
+  }
+})
 function closeModal() {
     emit('close');
 }
@@ -62,13 +68,37 @@ function closeModal() {
 
 .modal-header {
   border-bottom: 1px solid #eeeeee;
-  color: #4AAE9B;
   justify-content: space-between;
 }
+.modal-header-success {
+  color: #4AAE9B;
+}
+.modal-header-error {
+  color: red;
+}
+
+.modal-header [type = 'button'] {
+  color: red;
+  font-size: 25px;
+}
 
 .modal-footer {
-  border-top: 1px solid #eeeeee;
   justify-content: flex-end;
+  border-top: 1px solid white;
+}
+.modal-footer [type = 'button'] {
+  justify-content: flex-end;
+  border-top: 1px solid white;
+  padding: 5px;
+}
+.modal-footer-success [type = 'button'] {
+  background-color: #4AAE9B;
+  border: none;
+  margin: 3px;
+}
+.modal-footer-error [type = 'button'] {
+  background: red;
+  border: none;
 }
 
 .modal-body {
@@ -82,25 +112,10 @@ function closeModal() {
   padding: 0;
   cursor: pointer;
   font-weight: bold;
-  color: #4AAE9B;
+  color: red;
   background: transparent;
 }
 
-.btn-green {
-  color: white;
-  background: #4AAE9B;
-  border: 1px solid #4AAE9B;
-  border-radius: 2px;
-  padding: 5px;
-  margin: 0 5px;
-}
-.btn-green:hover {
-  background-color: #0fa386;
-}
-.btn-green:active {
-  background-color: #65ebd2;
-}
-
 .modal-fade-enter,
 .modal-fade-leave-active {
   opacity: 0;

src/components/MyDropMenu.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="dropdown">
+    <button @click="toggleDropdown">☰ Меню</button>
+    <ul v-show="isOpen" class="dropdown-menu-left">
+      <li><a href="#">Пункт 1</a></li>
+      <li><a href="#">Пункт 2</a></li>
+      <li><a href="#">Пункт 3</a></li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isOpen = ref(false);
+
+function toggleDropdown() {
+  isOpen.value = !isOpen.value;
+}
+</script>
+
+<style>
+.dropdown-menu-left {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  background: #fff;
+  border: 1px solid #ccc;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  min-width: 150px;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+}
+
+.dropdown-menu-left li a {
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+  color: #333;
+}
+
+.dropdown-menu-left li a:hover {
+  background: #f0f0f0;
+}
+</style>