modified: main_dc/yalarba/easySite/easySite/app/components/layout/Header.vue
modified: main_dc/yalarba/easySite/easySite/app/composables/useObjects.ts modified: main_dc/yalarba/easySite/easySite/app/pages/auth/login.vue modified: main_dc/yalarba/easySite/easySite/app/pages/auth/register.vue modified: main_dc/yalarba/easySite/easySite/app/pages/index.vue modified: main_dc/yalarba/easySite/easySite/app/pages/objects/[id]/edit.vue modified: main_dc/yalarba/easySite/easySite/app/pages/objects/create.vue modified: main_dc/yalarba/easySite/easySite/app/pages/objects/my-objects.vue modified: main_dc/yalarba/easySite/easySite/app/pages/profile/index.vue modified: main_dc/yalarba/easySite/easySite/nuxt.config.ts set main index page for easysite102.ru with header and search bar
This commit is contained in:
@@ -1,86 +1,41 @@
|
||||
<template>
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<div class="page-wrapper">
|
||||
<!-- Хедер -->
|
||||
<Header />
|
||||
|
||||
<!-- Hero Section -->
|
||||
<section class="hero-section">
|
||||
<div class="container">
|
||||
<div class="relative z-10 py-20">
|
||||
<div class="max-w-2xl mx-auto text-center">
|
||||
<h1 class="text-5xl font-bold mb-6">База объектов для путешествий</h1>
|
||||
<p class="text-xl mb-8 opacity-90">Добавляйте и находите лучшие места для ваших маршрутов</p>
|
||||
<div class="hero-content">
|
||||
<div class="hero-text">
|
||||
<h1 class="hero-title">Поиск объектов для путешествий</h1>
|
||||
<p class="hero-subtitle">Найдите лучшие места для ваших маршрутов</p>
|
||||
|
||||
<!-- Простой поиск -->
|
||||
<div class="max-w-xl mx-auto mb-12">
|
||||
<div class="flex gap-2">
|
||||
<!-- Поисковая строка -->
|
||||
<div class="search-container">
|
||||
<div class="search-box">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Поиск объектов..."
|
||||
class="form-input flex-1"
|
||||
placeholder="Введите название, город или описание..."
|
||||
class="search-input"
|
||||
@keyup.enter="handleSearch"
|
||||
v-model="searchQuery"
|
||||
>
|
||||
<button @click="handleSearch" class="btn btn-primary">
|
||||
<button @click="handleSearch" class="btn btn-primary search-button">
|
||||
Найти
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Кнопки авторизации -->
|
||||
<div class="flex gap-4 justify-center">
|
||||
<NuxtLink to="/auth/login" class="btn btn-outline text-lg px-8 py-3">
|
||||
Войти
|
||||
</NuxtLink>
|
||||
<NuxtLink to="/auth/register" class="btn btn-primary text-lg px-8 py-3">
|
||||
Регистрация
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Быстрая навигация -->
|
||||
<section class="py-16 bg-white">
|
||||
<div class="container">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
|
||||
<NuxtLink
|
||||
to="/objects"
|
||||
class="category-card text-center group"
|
||||
>
|
||||
<div class="category-card__icon group-hover:bg-primary-200">
|
||||
🔍
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Все объекты</h3>
|
||||
<p class="text-sm text-gray-600">Просмотр всей базы объектов</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
to="/objects/my-objects"
|
||||
class="category-card text-center group"
|
||||
>
|
||||
<div class="category-card__icon group-hover:bg-primary-200">
|
||||
📝
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Мои объекты</h3>
|
||||
<p class="text-sm text-gray-600">Управление вашими объектами</p>
|
||||
</NuxtLink>
|
||||
|
||||
<NuxtLink
|
||||
to="/objects/create"
|
||||
class="category-card text-center group"
|
||||
>
|
||||
<div class="category-card__icon group-hover:bg-primary-200">
|
||||
➕
|
||||
</div>
|
||||
<h3 class="font-semibold text-lg mb-2">Добавить объект</h3>
|
||||
<p class="text-sm text-gray-600">Создать новую запись</p>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Header from '~/components/layout/Header.vue'
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
const handleSearch = () => {
|
||||
@@ -90,4 +45,137 @@ const handleSearch = () => {
|
||||
navigateTo('/objects')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
|
||||
color: var(--text-inverse);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.hero-section::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="%230ea5e9" points="0,1000 1000,0 1000,1000"/></svg>');
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 2rem 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1.5rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.25rem;
|
||||
opacity: 0.9;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
background: var(--bg-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: 0.5rem;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1rem;
|
||||
font-size: 1.125rem;
|
||||
background: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
min-width: 0; /* Важно для правильного сжатия в flex */
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
.search-button {
|
||||
padding: 1rem 2rem;
|
||||
font-size: 1.125rem;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.search-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.hero-title {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
padding: 0.75rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user