+Vue +edited backend

2026-03-20 10:54:41 +00:00 · 2022-05-31 00:39:24 +07:00
parent e20789565e
commit 2825c1a4c8
11 changed files with 994 additions and 139 deletions
--- a/frontend/src/assets/css/catalog.css
+++ b/frontend/src/assets/css/catalog.css
@@ -385,4 +385,58 @@ h1, h2, h3, h4, h5, h6 {
    width: 166px;
    height: 48px;
    margin: 0;
-}
+}
+
+
+
+
+.parametrs__block ul {
+    padding:0;
+    margin:0;
+    list-style: none;
+    position: relative;
+}
+
+/* применяем inline-block позиционирование к элементам навигации */
+.parametrs__block ul li {
+    margin: 0px -7px 0 0;
+    display:inline-block;
+    background-color: #E64A19;
+}
+
+/* стилизуем ссылки */
+.parametrs__block a {
+    display:block;
+    padding:0 10px;
+    color:#FFF;
+    font-size:20px;
+    line-height: 60px;
+    text-decoration:none;
+}
+
+/* изменяем цвет фона при наведении курсора */
+.parametrs__block a:hover {
+    background-color: #000000;
+}
+
+.parametrs__block ul ul {
+    display: none;
+    position: absolute;
+    top: 100%;
+}
+
+/* отображаем выпадающий список при наведении */
+.parametrs__block ul li:hover > ul {
+    display:inherit;
+}
+
+/* первый уровень выпадающего списка */
+.parametrs__block ul ul li {
+    z-index: 100;
+    min-width:170px;
+    float:none;
+    display:list-item;
+    position: relative;
+}
+
+
--- a/frontend/src/assets/css/profile.css
+++ b/frontend/src/assets/css/profile.css
@@ -38,7 +38,7 @@ h1, h2, h3, h4, h5, h6 {
 /* Intro */
 .intro {
    width: 100%;
-    height: 100vh;
+    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
--- a/frontend/src/assets/images/galka.png
+++ b/frontend/src/assets/images/galka.png
--- a/frontend/src/assets/images/redact.svg
+++ b/frontend/src/assets/images/redact.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.333 16.048L16.57 3.81C17.0534 3.34736 17.6988 3.0924 18.3679 3.09972C19.037 3.10703 19.6767 3.37603 20.1499 3.84912C20.6231 4.32221 20.8923 4.96178 20.8998 5.63088C20.9073 6.29998 20.6525 6.94542 20.19 7.429L7.951 19.667C7.6718 19.9462 7.31619 20.1366 6.929 20.214L3 21L3.786 17.07C3.86345 16.6828 4.05378 16.3272 4.333 16.048V16.048Z" stroke="#CCCCCC" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 6.5L17.5 9.5" stroke="#CCCCCC" stroke-width="2"/>
+</svg>
--- a/frontend/src/components/CatalogType.vue
+++ b/frontend/src/components/CatalogType.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="prm__flat">
+<!--    <div class="prm__flat__block"><a href=""><h4>Квартира</h4></a>-->
+<!--      <div class="prm__img">-->
+<!--        <img src="@/assets/images/galka.png" alt="">-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    <div class="prm__flat__block"><a href=""><h4>Дом, дача</h4></a>-->
+<!--      <div class="prm__img">-->
+<!--        <img src="@/assets/images/galka.png" alt="">-->
+<!--      </div>-->
+<!--    </div>-->
+<!--    <div class="prm__flat__block"><a href=""><h4>Участок</h4></a>-->
+<!--      <div class="prm__img">-->
+<!--        <img src="@/assets/images/galka.png" alt="">-->
+<!--      </div>-->
+<!--    </div>-->
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CatalogType"
+}
+</script>
+
+<style scoped>
+  .prm__flat__block {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    transition: color .2s linear;
+    border-radius: 5px;
+  }
+
+  .prm__flat__block:hover {
+    background-color: #779fbd;
+  }
+
+  .prm__flat__block:hover .prm__img{
+    opacity: 1;
+  }
+
+  .prm__flat {
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*position: absolute;*/
+    /*width: 130px;*/
+    /*height: 110px;*/
+    /*z-index: 2;*/
+    /*margin-top: 10%;*/
+    /*margin-top: 305px;*/
+    /*margin-left: 190px;*/
+    /*background-color: rgba(26, 137, 201, 1);*/
+    /*border-radius: 5px;*/
+    /*padding: 1px 1px 0 2px;*/
+  }
+
+  .prm__img {
+    width: 5%;
+    height: 5%;
+    margin-right: 10%;
+    opacity: 0;
+  }
+
+  .prm__flat a {
+    display: flex;
+    flex-direction: column;
+    text-decoration: none;
+    color: white;
+    margin-right: 10%;
+  }
+</style>
--- a/frontend/src/components/ProfileMyOffers.vue
+++ b/frontend/src/components/ProfileMyOffers.vue
@@ -1,13 +1,24 @@
 <template>
  <div class="about__user">
-    <div class="about__title"><h2>Мои объявления</h2></div>
-    <div class="about__images">
-      <img src="@/assets/images/metr.svg" alt="">
-      <img src="@/assets/images/metr.svg" alt="">
-      <img src="@/assets/images/metr.svg" alt="">
+    <div class="about__title">
+      <h2>Мои объявления</h2>
    </div>
-    <div class="about_describtions">
-      <h3>Однушка на Елизаровых, 44</h3>
+    <div class="my__offer">
+      <div class="about__images" @click="activeId = i" v-for="(img, i) in offers" :key="i">
+        <div class="image__load">
+          <img src="@/assets/images/image_load.png" alt="">
+        </div>
+      </div>
+      <profile-add-offer v-if="activeId !== null" :edit-data="offers[activeId]" editable @updated="loadOffers"></profile-add-offer>
+<!--      <div v-if="activeId !== null" class="about_describtions">-->
+<!--        <div class="about_inside">-->
+<!--          <h2>{{ offers[activeId].name }}</h2>-->
+<!--          <a href="#">-->
+<!--            <img src="@/assets/images/redact.svg" alt="">-->
+<!--          </a-->
+<!--        </div>-->
+<!--        <h3>{{ offers[activeId].location }}</h3>-->
+<!--      </div>-->
    </div>
  </div>
 </template>
@@ -20,19 +31,46 @@ export default {

 <style scoped>
 .about__user {
+  width: 888px;
+}
+
+.my__offer{
+  flex-direction: row;
  display: flex;
-  flex-direction: column;
+  column-gap: 1em;
+
+  flex-wrap: wrap;
 }

 .about__images {
-  width: 105%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 1%;
 }

+.image__load {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  align-items: center;
+}
+.image__load > img{
+  width: 296px;
+  height: 204px;
+  display: flex;
+  flex-direction: row;
+  margin-top: 3%;
+}
+
 .about_describtions {
  margin-top: 5%;
 }
+
+.about_inside{
+  display: flex;
+  flex-direction: row;
+}
+
+
 </style>
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -29,7 +29,7 @@ const router = createRouter({
      component: ProfileView
    },
    {
-      path: '/offer',
+      path: '/catalog/:id',
      name: 'offer',
      component: OfferView
    },
--- a/frontend/src/views/CatalogView.vue
+++ b/frontend/src/views/CatalogView.vue
@@ -6,74 +6,58 @@
      <h3 class="newhome">Найти недвижимость</h3>
    </div>
    <div class="parametrs__block">
-      <div class="parametrs">
-        <div class="prm">
-          <div class="prm__inside">
-            <div class="prm__text"><h2>Квартира</h2></div>
-            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
-          </div>
-        </div>
-        <div class="prm">
-          <div class="prm__inside">
-            <div class="prm__text"><h2>Купить</h2></div>
-            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
-          </div>
-        </div>
-        <div class="prm">
-          <div class="prm__inside">
-            <div class="prm__text"><h2>Комнаты</h2></div>
-            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
-          </div>
-        </div>
-        <div class="prm">
-          <div class="prm__inside">
-            <div class="prm__text"><h2>Цена</h2></div>
-            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>
-          </div>
-        </div>
-      </div>
+<!--      <div class="parametrs">-->
+<!--        <div class="prm">-->
+<!--          <div class="prm__inside">-->
+<!--            <div class="prm__text"><h2>Квартира</h2></div>-->
+<!--            <a @click.prevent="componentForm = 'type'"><img src="@/assets/images/arrow.png" alt=""></a>-->
+<!--          </div>-->
+<!--          <catalog-type v-if="componentForm === 'type'"></catalog-type>-->
+<!--        </div>-->
+<!--        <div class="prm">-->
+<!--          <div class="prm__inside">-->
+<!--            <div class="prm__text"><h2>Купить</h2></div>-->
+<!--            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="prm">-->
+<!--          <div class="prm__inside">-->
+<!--            <div class="prm__text"><h2>Комнаты</h2></div>-->
+<!--            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--        <div class="prm">-->
+<!--          <div class="prm__inside">-->
+<!--            <div class="prm__text"><h2>Цена</h2></div>-->
+<!--            <a href="#"><img src="@/assets/images/arrow.png" alt=""></a>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </div>-->
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">WordPress</a>
+          <ul>
+            <li><a href="#">Themes</a></li>
+            <li><a href="#">Plugins</a></li>
+            <li><a href="#">Tutorials</a></li>
+          </ul>
+        </li>
+        <li><a href="#">Graphic Design</a>
+          <ul>
+            <li><input type="text"></li>
+            <li><input type="text"></li>
+          </ul>
+        </li>
+        <li><a href="#">Inspiration</a></li>
+        <li><a href="#">Contact</a></li>
+        <li><a href="#">About</a></li>
+      </ul>
    </div>
    <div class="suggestions__images">
-<!--      <div class="podlozhka">-->
-<!--        <router-link to="/offer" class="nav__link" href="#">-->
-<!--          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>-->
-<!--          <div class="sugg__text"><p>2-к. Квартира, 34 м кв</p><h2>2 900 000₽</h2></div>-->
-<!--        </router-link>-->
-<!--      </div>-->
-<!--      <div class="podlozhka">-->
-<!--        <router-link to="/offer" class="nav__link" href="#">-->
-<!--          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>-->
-<!--          <div class="sugg__text"><p>3-к. Квартира, 34 м кв</p><h2>4 900 000₽</h2></div>-->
-<!--        </router-link>-->
-<!--      </div>-->
-<!--      <div class="podlozhka">-->
-<!--        <router-link to="/offer" class="nav__link" href="#">-->
-<!--          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/3.jpg" alt=""></a></div>-->
-<!--          <div class="sugg__text"><p>1-к. Квартира, 34 м кв</p><h2>1 900 000₽</h2></div>-->
-<!--        </router-link>-->
-<!--      </div>-->
-<!--      <div class="podlozhka">-->
-<!--        <router-link to="/offer" class="nav__link" href="#">-->
-<!--          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/4.jpg" alt=""></a></div>-->
-<!--          <div class="sugg__text"><p>5-к. Квартира, 34 м кв</p><h2>10 900 000₽</h2></div>-->
-<!--        </router-link>-->
-<!--      </div>-->
-<!--      <div class="podlozhka">-->
-<!--        <router-link to="/offer" class="nav__link" href="#">-->
-<!--          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>-->
-<!--          <div class="sugg__text"><p>6-к. Квартира, 34 м кв</p><h2>15 900 000₽</h2></div>-->
-<!--        </router-link>-->
-<!--      </div>-->
-<!--      <div class="podlozhka">-->
-<!--        <router-link to="/offer" class="nav__link" href="#">-->
-<!--          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>-->
-<!--          <div class="sugg__text"><p>3-к. Квартира, 34 м кв</p><h2>5 900 000₽</h2></div>-->
-<!--        </router-link>-->
-<!--      </div>-->
      <div class="podlozhka" v-for="offer in offers">
-        <router-link to="/offer" class="nav__link" href="#">
+        <router-link :to="`/catalog/${offer.id}`" class="nav__link" href="#">
          <div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
-          <div class="sugg__text"><p>{{offer.name}}}</p><h2>{{ offer.price }}₽</h2></div>
+          <div class="sugg__text"><p>{{offer.name}}</p><h2>{{ offer.price }}₽</h2></div>
        </router-link>
      </div>
    </div>
@@ -84,12 +68,16 @@
 <script>
 import TheHeader from "../components/TheHeader.vue";
 import TheFooter from "@/components/TheFooter.vue";
+import CatalogType from "@/components/CatalogType.vue";

 export default {
  name: "CatalogView",
-  components: {TheHeader, TheFooter},
+  components: {TheHeader, TheFooter,CatalogType},
  data ()  {
-    return { offers: [] }
+    return {
+      offers: [],
+      componentForm: ''
+    }
  },
  async mounted() {
    const requests = await fetch('http://tusur.tk:9080/api/offers');
--- a/frontend/src/views/OfferView.vue
+++ b/frontend/src/views/OfferView.vue
@@ -35,18 +35,6 @@
            <div class="username">
              <h2>Виктория</h2>
            </div>
-<!--            <div class="host__stat">-->
-<!--              <div class="stat">-->
-<!--                <h3>5</h3>-->
-<!--              </div>-->
-<!--              <div class="stars">-->
-<!--                <img src="@/assets/images/star.png" alt="">-->
-<!--                <img src="@/assets/images/star.png" alt="">-->
-<!--                <img src="@/assets/images/star.png" alt="">-->
-<!--                <img src="@/assets/images/star.png" alt="">-->
-<!--                <img src="@/assets/images/star.png" alt="">-->
-<!--              </div>-->
-<!--            </div>-->
            <rating-stars></rating-stars>
            <div class="number">
              <a href="#" class="favoritextinf"><h5>Показать номер</h5></a>
@@ -66,15 +54,17 @@
          <h2>О квартире</h2>
        </div>
        <div class="about__adv__info">
-          <h4>Кол-во комнат: 4</h4>
-          <h4>Общая площадь: 78.4 м²</h4>
-          <h4>Площадь кухни: 12 м²</h4>
-          <h4>Этаж: 20</h4>
+          <h4>Тип: {{ offerType }}</h4>
+
+          <h4>Адрес: {{ offer.location }}</h4>
+
+          <h4>Кол-во комнат: {{ offer.rooms }}</h4>
+
+          <h4>Общая площадь: {{ offer.space }} м²</h4>
        </div>
        <div class="about__adv__descriptions">
-          <p>Продается 4х комнатная квартира, уютная, светлая, теплая. Натяжные потолки,
-            ламинат, деревянные евроокна, два кондиционера. Теплые полы в туалете, ванной,
-            кухне, частично в прихожей. Хороший вид из окна.</p>
+          <h2>Описание</h2>
+          <p>{{ offer.description }}</p>
        </div>
      </div>
      <div class="reviews">
@@ -89,13 +79,6 @@
            <div class="rewiew__comment">
              <h5>Очень приятный владелец, все чисто и опрятно</h5>
            </div>
-<!--            <div class="rewiew__stars">-->
-<!--               <img src="@/assets/images/star.png" alt="">-->
-<!--               <img src="@/assets/images/star.png" alt="">-->
-<!--               <img src="@/assets/images/star.png" alt="">-->
-<!--               <img src="@/assets/images/star.png" alt="">-->
-<!--               <img src="@/assets/images/star.png" alt="">-->
-<!--            </div>-->
            <rating-stars></rating-stars>
          </div>
          <div class="review">
@@ -105,13 +88,6 @@
            <div class="rewiew__comment">
              <h5>Очень приятный владелец, все чисто и опрятно</h5>
            </div>
-<!--            <div class="rewiew__stars">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--            </div>-->
            <rating-stars></rating-stars>
          </div>
          <div class="review">
@@ -121,13 +97,6 @@
            <div class="rewiew__comment">
              <h5>Очень приятный владелец, все чисто и опрятно</h5>
            </div>
-<!--            <div class="rewiew__stars">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--              <img src="@/assets/images/star.png" alt="">-->
-<!--            </div>-->
            <rating-stars></rating-stars>
          </div>
        </div>