-
-
Комнаты
-
+
+
+
Комнаты
+
+
-
-
-
-
Цена
-
+
+
+
Цена
+
+
diff --git a/frontend/raw/assets/css/catalog.css b/frontend/raw/assets/css/catalog.css
new file mode 100644
index 0000000..42c59a6
--- /dev/null
+++ b/frontend/raw/assets/css/catalog.css
@@ -0,0 +1,665 @@
+/* Fonts */
+
+@import url("../../fonts/StapelS/style.css");
+
+body {
+ margin: 0;
+ font-family: 'Inter', sans-serif;
+ background-color: rgba(124, 173, 201, 1);
+ font-size: 17px;
+ color: white;
+ background: black;
+ line-height: 1.6;
+}
+
+*,
+*:before,
+*:after {
+ box-sizing: border-box;
+}
+
+h1, h2, h3, h4, h5, h6 {
+ margin: 0;
+}
+
+/* Main */
+.main {
+ width: 100%;
+}
+
+
+/* Container */
+.container {
+ width: 100%;
+ max-width: 1920px;
+ margin: 0 auto;
+}
+
+
+/* Header */
+
+.header {
+ width: 100%;
+
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ z-index: 1000;
+}
+
+.header__table {
+ width: 1052px;
+ height: 100px;
+ border: 2px solid white;
+ margin: 50px auto 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ color: white;
+
+}
+
+.header__image {
+ width: 140px;
+ height: 96px;
+ margin: 0 auto;
+
+ background: url("../images/metr.svg") center
+ no-repeat;
+ background-size: cover;
+ border-right: 2px solid white;
+}
+
+.header__block {
+ width: 145px;
+ height: 96px;
+ margin: 0 auto;
+ border-right: 2px solid white;
+}
+
+.header__search {
+ width: 426px;
+ height: 96px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ border-right: 2px solid white;
+}
+
+.search {
+ width: 340px;
+ height: 40px;
+ padding-top: 25px;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.search__block {
+ width: 300px;
+ height: 40px;
+ margin: 0;
+ padding-top: 20px;
+
+ background: white;
+ border: 1px solid black;
+}
+
+.search__img {
+ width: 40px;
+ height: 40px;
+ margin: 0;
+ padding-top: 2px;
+}
+
+.header__contacts {
+ width: 46px;
+ height: 96px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.header__contacts__imgtop {
+ width: 48px;
+ height: 48px;
+ padding-top: 5px;
+ border-bottom: 2px solid white;
+}
+
+.header__contacts__img {
+ width: 48px;
+ height: 48px;
+ padding-top: 5px;
+}
+
+.header__block__content {
+ width: 70px;
+ height: 20px;
+ margin: 0 auto;
+ padding-top: 35px;
+}
+
+.header__block__contenttop {
+ width: 145px;
+ height: 48px;
+ margin: 0 auto;
+ border-bottom: 2px solid white;
+}
+
+.header__block__contentbott {
+ width: 145px;
+ height: 48px;
+}
+
+.nav__link {
+ text-decoration: none;
+ color: white;
+ font-size: 15px;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ padding-top: 10px;
+}
+
+.nav__link_tomsk {
+ text-decoration: none;
+ color: white;
+ font-size: 15px;
+
+}
+
+.nav__link:hover, .nav__link_tomsk:hover {
+ color: #389EEB;
+ transition: color .2s linear;
+}
+
+/* Intro */
+.intro {
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
+ justify-content:center;
+ padding-top: 250px;
+
+ background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url(
+ "../images/intro.jpg");
+ background-size: cover;
+}
+
+.intro__text {
+ width: 100%;
+ height: 100px;
+ margin: 0 auto;
+}
+
+.intro__title {
+ font-size: 25px;
+ color: white;
+ text-align: center;
+}
+
+.newhome {
+ font-family: 'Inter', sans-serif;
+}
+
+.intro__subtitle {
+ font-size: 17px;
+ color: white;
+ text-align: center;
+ font-family: 'Inter', sans-serif;
+}
+
+.intro_footer {
+ width: 1050px;
+ height: 80px;
+ margin: 300px auto 0;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.intro__btn {
+ width: 185px;
+ height: 55px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ border-radius: 5px;
+
+ background-color: rgba(26, 137, 201, 1);
+
+}
+
+.intro__button {
+ font-size: 12px;
+ text-transform: uppercase;
+ text-decoration: none;
+ margin: 0 auto;
+
+ font-weight: 500;
+ color: white;
+}
+
+.intro__button:hover {
+ color: #0f171d;
+ font-weight: 600;
+ transition: color .2s linear;
+}
+
+.intro__odnushka {
+ width: 250px;
+ height: 50px;
+ display: flex;
+ flex-direction: column;
+}
+
+.odnushka {
+ font-size: 17px;
+ color: black;
+ background: white;
+ text-decoration: none;
+ padding: 2px;
+ font-weight: 600;
+}
+
+.odnushka__price {
+ width: 115px;
+ font-size: 17px;
+ text-decoration: none;
+ padding: 2px;
+ font-weight: 900;
+ color: black;
+ background: white;
+ font-family: 'Inter';
+}
+
+.title {
+ font-size: 25px;
+ font-family: 'Inter';
+ font-weight: 400;
+}
+
+/* About */
+
+.about {
+ height: 100vh;
+ background-color: rgba(124, 173, 201, 1);
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ font-family: 'Inter', sans-serif;
+}
+
+.about__title {
+ padding-left: 10%;
+ padding-top: 50px;
+ font-size: 40px;
+ font-family: 'Stapel';
+}
+
+.video {
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ width: 1300px;
+ height: 590px;
+ border: 1px solid black;
+ background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url(
+ "../images/video.jpg");
+ background-size: cover;
+
+}
+
+.about__us {
+ margin-right: 5%;
+ font-family: 'Inter';
+ font-weight: 100;
+ font-size: 17px;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+}
+
+/* Suggestions */
+
+.suggestions {
+ padding-top: 10%;
+ background-color: rgba(124, 173, 201, 1);
+ height: 100%;
+ min-height: 600px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ margin: 0 auto;
+}
+
+.suggestions__title {
+ font-size: 25px;
+ padding-left: 10%;
+}
+
+.suggestions__images {
+ margin: 2% 12%;
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ align-items: center;
+}
+
+.sugg__img {
+ flex-basis: 30%;
+ height: 460px;
+ margin: 4% 0 1% auto;
+ background: linear-gradient(to top, rgba(1, 80, 140, 1), rgba(37, 45, 45, 0.6));
+ transition: transform .2s linear;
+}
+
+.afterword {
+ margin: 0 5% 0 0;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ font-size: 17px;
+}
+
+.after__afterword {
+ font-weight: 600;
+ margin-right: 5%;
+}
+
+.gradient {
+
+ display: inline-block;
+ position: relative;
+ line-height: 0;
+}
+
+.gradient:after {
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: transparent;
+ background-image: linear-gradient(to bottom, rgba(15, 34, 38, 0.4), rgba(99, 137, 159, 0.8));
+ opacity: 0.8;
+}
+
+.podlozhka {
+ position: relative;
+}
+
+.podlozhka:hover .sugg__img {
+ transform: translate3d(-10px, -10px, 0);
+}
+
+
+.podlozhka:hover .sugg__img img {
+ opacity: 0.6;
+}
+
+.sugg__img img {
+ transition: opacity .1s linear;
+}
+
+.sugg__text {
+ width: 100%;
+ text-align: left;
+ position: absolute;
+ top: 90%;
+ left: 0;
+ z-index: 2;
+ transform: translate3d(0, -50%, 0);
+ opacity: 1;
+ transition: opacity .2s linear;
+ padding-bottom: 20%;
+}
+
+.sugg__text p {
+ width: 220px;
+ color: white;
+ font-family: 'Inter';
+ font-weight: 700;
+ font-size: 20px;
+ text-decoration: none;
+ margin: 0 auto 0 2%;
+ text-align: left;
+}
+
+.sugg__text h2 {
+ width: 200px;
+ font-weight: 600;
+ margin: 0 auto 0 2%;
+ color: white;
+ font-family: 'Inter';
+ font-size: 20px;
+ text-align: left;
+}
+
+.parametrs__block {
+ display: flex;
+ flex-direction: column;
+}
+
+.parametrs {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.prm {
+ width: 20%;
+ height: 150%;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ color: white;
+ font-family: 'Inter';
+ font-size: 10px;
+ background-color: rgba(26, 137, 201, 1);
+ border-radius: 5px;
+}
+
+.prm__top {
+ display: flex;
+ justify-content: space-between;
+ align-items: left;
+ margin: 2% 40% 0 10%;
+}
+
+.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__down {
+ display: flex;
+ flex-direction: row;
+ position: absolute;
+ z-index: 2;
+ margin-top: 252px;
+ margin-left: 70px;
+}
+
+.prm__flat {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ width: 130px;
+ height: 110px;
+ z-index: 2;
+ 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%;
+}
+
+.prm__buy {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ margin-top: 305px;
+ margin-left: 444px;
+ width: 150px;
+ z-index: 2;
+ background-color: rgba(26, 137, 201, 1);
+ border-radius: 5px;
+ padding: 1px 2px 0 2px;
+}
+
+.prm__buy a {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ color: white;
+ margin-right: 10%;
+}
+
+.prm__komnaty {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ margin-top: 305px;
+ margin-left: 698px;
+ z-index: 2;
+ background-color: rgba(26, 137, 201, 1);
+ border-radius: 5px;
+ padding: 1px 2px 0 2px;
+}
+
+.prm__komnaty a {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ color: white;
+ margin-right: 10%;
+}
+
+.prm__price {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ margin-top: 305px;
+ margin-left: 952px;
+ width: 220px;
+ height: 32px;
+ z-index: 2;
+ background-color: rgba(26, 137, 201, 1);
+ border-radius: 5px;
+ padding: 2px;
+}
+
+.prm__price a {
+ display: flex;
+ flex-direction: column;
+ text-decoration: none;
+ color: white;
+ margin-right: 10%;
+}
+
+.price {
+ width: 50%;
+ border-radius: 5px;
+ margin-right: 1%;
+ border-color: rgb(173, 172, 172);
+ box-shadow: none;
+ background-color: #8bb9dd;
+ border: none;
+}
+
+.prm__inside {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.prm__text {
+ margin-right: 15%;
+}
+
+.prm__inside img {
+ padding-top: 20%;
+}
+
+
+/* Footer */
+
+.footer {
+ height: 200px;
+ margin: 0 auto;
+ padding-top: 1%;
+ background-color: rgba(124, 173, 201, 1);
+}
+
+.footer__search {
+ width: 300px;
+ height: 96px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+
+ border-right: 2px solid white;
+}
+
+.footer__contacts {
+ width: 165px;
+ height: 96px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+}
+
+.footer__contacts__imgtop {
+ width: 165px;
+ height: 48px;
+ border-bottom: 2px solid white;
+ margin: 0;
+}
+
+.footer__contacts__img {
+ width: 166px;
+ height: 48px;
+ margin: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/assets/css/catalog.css b/frontend/src/assets/css/catalog.css
index 7753c05..f57a2df 100644
--- 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;
-}
\ No newline at end of file
+}
+
+
+
+
+.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;
+}
+
+
diff --git a/frontend/src/assets/css/profile.css b/frontend/src/assets/css/profile.css
index ba5e2c2..ec13cef 100644
--- 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;
diff --git a/frontend/src/assets/images/galka.png b/frontend/src/assets/images/galka.png
new file mode 100644
index 0000000..9678243
Binary files /dev/null and b/frontend/src/assets/images/galka.png differ
diff --git a/frontend/src/assets/images/redact.svg b/frontend/src/assets/images/redact.svg
new file mode 100644
index 0000000..aa93314
--- /dev/null
+++ b/frontend/src/assets/images/redact.svg
@@ -0,0 +1,4 @@
+
diff --git a/frontend/src/components/CatalogType.vue b/frontend/src/components/CatalogType.vue
new file mode 100644
index 0000000..810bb89
--- /dev/null
+++ b/frontend/src/components/CatalogType.vue
@@ -0,0 +1,73 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/frontend/src/components/ProfileMyOffers.vue b/frontend/src/components/ProfileMyOffers.vue
index e1bf498..f42f95a 100644
--- a/frontend/src/components/ProfileMyOffers.vue
+++ b/frontend/src/components/ProfileMyOffers.vue
@@ -1,13 +1,24 @@
-
Мои объявления
-
-
-
-
+
+
Мои объявления
-
-
Однушка на Елизаровых, 44
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -20,19 +31,46 @@ export default {
\ No newline at end of file
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index 45d7855..fb5b61b 100644
--- 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
},
diff --git a/frontend/src/views/CatalogView.vue b/frontend/src/views/CatalogView.vue
index 70ce36f..1b6d867 100644
--- a/frontend/src/views/CatalogView.vue
+++ b/frontend/src/views/CatalogView.vue
@@ -6,74 +6,58 @@
Найти недвижимость
-
-
-
-
Квартира
-
-
-
-
-
-
Купить
-
-
-
-
-
-
Комнаты
-
-
-
-
-
-
Цена
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
- {{offer.name}}}
{{ offer.price }}₽
{{offer.name}}
{{ offer.price }}₽
@@ -84,12 +68,16 @@
+ 