+Vue +edited backend

frontend/src/assets/css/catalog.css

@@ -206,7 +206,7 @@ h1, h2, h3, h4, h5, h6 {
 .suggestions__images {
     margin: 2% 12%;
     display: flex;
-    justify-content: space-between;
+    /*justify-content: space-between;*/
     flex-wrap: wrap;
     align-items: center;
 }
@@ -215,7 +215,7 @@ h1, h2, h3, h4, h5, h6 {
     width: 100%;
     height: 100%;
     margin: 4% 0 1% auto;
-    /*background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));*/
+    background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
     background-repeat: no-repeat;
     background-size: cover;
     transition: transform .2s linear;
@@ -235,7 +235,6 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 .gradient {
-    
 	display: inline-block;
 	position: relative;    
 	line-height: 0;
@@ -258,6 +257,10 @@ h1, h2, h3, h4, h5, h6 {
     position: relative;
     width: 369px;
     height: 460px;
+
+    margin-top: 1em;
+    margin-left: 1em;
+    margin-right: 1em;
 }
 
 .podlozhka:hover .sugg__img {

frontend/src/assets/css/offer.css

@@ -115,10 +115,27 @@ h1, h2, h3, h4, h5, h6 {
     flex-direction: row;
 }
 
+.main__image {
+    width: 728px;
+    height: 416px;
+
+    background-size: cover;
+    background-repeat: no-repeat;
+    transition: background 0.2s ease;
+}
+
 .other__images a{
+    margin-top: 2%;
     margin-right: 2%;
 }
 
+.other__images a > img{
+    margin-right: 2%;
+
+    width: 220px;
+    height: 140px;
+}
+
 .adv__host {
     display: flex;
     flex-direction: row;
@@ -134,6 +151,15 @@ h1, h2, h3, h4, h5, h6 {
     margin: 3% 0;
 }
 
+.userlogo {
+    width: 148px;
+    height: 148px;
+    border-radius: 50%;
+
+    background: center no-repeat;
+    background-size: cover;
+}
+
 .host__stat {
     display: flex;
     flex-direction: row;

frontend/src/components/ProfileAbout.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="about__user">
     <div class="about__title"><h2>Обо мне</h2></div>
-    <div class="about__images">
+<!--    <div class="about__images">-->
-      <img src="@/assets/images/user_standart.png" alt="">
+<!--      <img src="@/assets/images/user_standart.png" alt="">-->
-      <img src="@/assets/images/user_standart.png" alt="">
+<!--      <img src="@/assets/images/user_standart.png" alt="">-->
-      <img src="@/assets/images/user_standart.png" alt="">
+<!--      <img src="@/assets/images/user_standart.png" alt="">-->
-    </div>
+<!--    </div>-->
     <div class="about_describtions">
       <h4>Имя Фамилия: </h4><h3>{{ name }}</h3>
       <h4>Почта: </h4><h3>{{ user.email }}</h3>
@@ -34,6 +34,8 @@ export default {
 .about__user {
   display: flex;
   flex-direction: column;
+
+  width: 888px;
 }
 
 .about__images {
@@ -54,6 +56,6 @@ export default {
 }
 
 .about_describtions {
-  margin-top: 5%;
+  margin-top: 2%;
 }
 </style>

frontend/src/views/CatalogView.vue

@@ -6,33 +6,6 @@
       <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 @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="#">Тип</a>
           <ul>
@@ -84,7 +57,8 @@
         <router-link :to="`/catalog/${offer.id}`" class="nav__link" href="#">
           <div class="sugg__img" :style="{
             'background-image': url(offer.images.length !== 0 ? offer.images[0].file : '@/assets/images/1.jpg')
-          }"></div>
+          }">
+          </div>
           <div class="sugg__text"><p>{{offer.name}}</p><h2>{{ offer.price }}₽</h2></div>
         </router-link>
       </div>
@@ -139,16 +113,24 @@ export default {
       const min = this[range].min;
       const max = this[range].max;
 
+      const minName = 'start' + paramName;
+      const maxName = 'end' + paramName;
+
+      this.sortParams = this.sortParams.filter((e) => e.name !== minName);
+      this.sortParams = this.sortParams.filter((e) => e.name !== maxName);
+
       if (min)
-        this.addSortParam('start' + paramName, min, true);
+        this.sortParams.push({ name: minName, value: min });
-      else
-        this.addSortParam('start' + paramName, min);
 
       if (max)
-        this.addSortParam('end' + paramName, max, true);
+        this.sortParams.push({ name: maxName, value: max });
-      else
+
-        this.addSortParam('end' + paramName, max);
+      await this.reloadOffers();
-    }
+    },
+    async reloadOffers() {
+      const offers = await offerService.filter(this.sortParams);
+      this.offers = offers.data.data;
+    },
   },
   async mounted() {
     const offers = await offerService.all();