modified: begushiybashkir/bbvue/src/App.vue

modified:   begushiybashkir/bbvue/src/views/About.vue
opacute for header and link for write log header to home page
This commit is contained in:
2025-10-02 01:26:48 +05:00
parent c4830ffe86
commit e61734f448
2 changed files with 47 additions and 41 deletions
+44 -38
View File
@@ -3,26 +3,24 @@
<header class="app-header"> <header class="app-header">
<div class="container header-container"> <div class="container header-container">
<!-- Логотип --> <!-- Логотип -->
<div class="logo"> <router-link to="/">
<div class="logo-box"> <div class="logo">
<img src="./assets/logo/Logo.png" alt="Little logo begushiy bashkir" class="little-logo"> <div class="logo-box">
<img src="./assets/logo/Logo.png" alt="Little logo begushiy bashkir" class="little-logo">
</div>
<div class="logo-box">
<span><i>Бегущий Башкир</i></span>
</div>
<div class="logo-box team">
<span>team</span>
</div>
</div> </div>
<div class="logo-box"> </router-link>
<span><i>Бегущий Башкир</i></span>
</div>
<div class="logo-box team">
<span>team</span>
</div>
</div>
<!-- Бургер-меню для всех устройств --> <!-- Бургер-меню для всех устройств -->
<div class="burger-menu-container"> <div class="burger-menu-container">
<button <button class="burger-menu" :class="{ 'active': isMobileMenuOpen }" @click="toggleMobileMenu"
class="burger-menu" aria-label="Открыть меню">
:class="{ 'active': isMobileMenuOpen }"
@click="toggleMobileMenu"
aria-label="Открыть меню"
>
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
@@ -113,7 +111,7 @@ export default {
mounted() { mounted() {
document.addEventListener('click', this.handleClickOutside) document.addEventListener('click', this.handleClickOutside)
document.addEventListener('keydown', this.handleEscapeKey) document.addEventListener('keydown', this.handleEscapeKey)
this.$router.afterEach(() => { this.$router.afterEach(() => {
this.closeMobileMenu() this.closeMobileMenu()
}) })
@@ -132,6 +130,11 @@ export default {
box-sizing: border-box; box-sizing: border-box;
} }
a {
text-decoration: none;
color: inherit;
}
body { body {
font-family: 'Arial', sans-serif; font-family: 'Arial', sans-serif;
line-height: 1.6; line-height: 1.6;
@@ -147,7 +150,7 @@ body {
/* Header Styles */ /* Header Styles */
.app-header { .app-header {
background-color: #2e8b57; background-color: #2e8b5670;
color: white; color: white;
padding: 1rem 0; padding: 1rem 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
@@ -355,12 +358,12 @@ body {
.dropdown-menu { .dropdown-menu {
min-width: 320px; min-width: 320px;
} }
.dropdown-nav-link { .dropdown-nav-link {
padding: 1.2rem 2rem; padding: 1.2rem 2rem;
font-size: 1.1rem; font-size: 1.1rem;
} }
.logo { .logo {
font-size: 1.4rem; font-size: 1.4rem;
} }
@@ -371,18 +374,19 @@ body {
.dropdown-menu { .dropdown-menu {
min-width: 300px; min-width: 300px;
} }
.dropdown-nav-link { .dropdown-nav-link {
padding: 1.1rem 1.8rem; padding: 1.1rem 1.8rem;
font-size: 1.05rem; font-size: 1.05rem;
} }
.logo { .logo {
font-size: 1.3rem; font-size: 1.3rem;
} }
.team { .team {
display: none; /* Скрываем team на планшетах */ display: none;
/* Скрываем team на планшетах */
} }
} }
@@ -400,43 +404,44 @@ body {
transition: right 0.3s ease; transition: right 0.3s ease;
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
} }
.dropdown-menu.active { .dropdown-menu.active {
right: 0; right: 0;
} }
.dropdown-nav { .dropdown-nav {
padding-top: 4rem; padding-top: 4rem;
height: 100%; height: 100%;
} }
.dropdown-nav-link { .dropdown-nav-link {
padding: 1.3rem 1.5rem; padding: 1.3rem 1.5rem;
font-size: 1.1rem; font-size: 1.1rem;
border-left: none; border-left: none;
border-bottom: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
} }
.dropdown-nav-link:hover, .dropdown-nav-link:hover,
.dropdown-nav-link.router-link-active { .dropdown-nav-link.router-link-active {
border-left: none; border-left: none;
border-bottom: 1px solid #2e8b57; border-bottom: 1px solid #2e8b57;
padding-left: 1.5rem; padding-left: 1.5rem;
} }
.logo { .logo {
font-size: 1.2rem; font-size: 1.2rem;
} }
.team { .team {
display: none; /* Скрываем team на мобильных */ display: none;
/* Скрываем team на мобильных */
} }
.little-logo { .little-logo {
width: 2.2rem; width: 2.2rem;
height: 2.2rem; height: 2.2rem;
} }
.container { .container {
padding: 0 15px; padding: 0 15px;
} }
@@ -448,22 +453,22 @@ body {
width: 100%; width: 100%;
max-width: none; max-width: none;
} }
.dropdown-nav-link { .dropdown-nav-link {
padding: 1.4rem 1.5rem; padding: 1.4rem 1.5rem;
font-size: 1.2rem; font-size: 1.2rem;
} }
.logo { .logo {
font-size: 1.1rem; font-size: 1.1rem;
gap: 0.3rem; gap: 0.3rem;
} }
.little-logo { .little-logo {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
} }
.main-content { .main-content {
padding: 1rem 0; padding: 1rem 0;
} }
@@ -474,7 +479,7 @@ body {
.dropdown-menu { .dropdown-menu {
min-width: 350px; min-width: 350px;
} }
.dropdown-nav-link { .dropdown-nav-link {
padding: 1.3rem 2.2rem; padding: 1.3rem 2.2rem;
font-size: 1.15rem; font-size: 1.15rem;
@@ -535,6 +540,7 @@ body {
opacity: 0; opacity: 0;
transform: translateY(-10px); transform: translateY(-10px);
} }
to { to {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
+3 -3
View File
@@ -252,15 +252,15 @@
<h3>📞 Свяжитесь с нами</h3> <h3>📞 Свяжитесь с нами</h3>
<div class="contact-item"> <div class="contact-item">
<strong>Телефон:</strong> <strong>Телефон:</strong>
<a href="tel:+79273093095">+7 (927) 30-93-095</a> <a href="tel:+79273093095"> +7 (927) 30-93-095</a>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<strong>Email:</strong> <strong>Email:</strong>
<a href="mailto:zog1r@mail.ru">zog1r@mail.ru</a> <a href="mailto:zog1r@mail.ru"> zog1r@mail.ru</a>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<strong>Telegram:</strong> <strong>Telegram:</strong>
<a href="https://t.me/begushiybashkir" target="_blank">@begushiybashkir</a> <a href="https://t.me/begushiybashkir" target="_blank"> @begushiybashkir</a>
</div> </div>
<div class="contact-item"> <div class="contact-item">
<strong>Город:</strong> <strong>Город:</strong>