From 2825c1a4c862ac95b6189bd6faa2e78e3ece402e Mon Sep 17 00:00:00 2001 From: Konstantin Vinokurov Date: Tue, 31 May 2022 00:39:24 +0700 Subject: [PATCH] +Vue +edited backend --- frontend/raw/Catalog.html | 106 +++- frontend/raw/assets/css/catalog.css | 665 ++++++++++++++++++++ frontend/src/assets/css/catalog.css | 56 +- frontend/src/assets/css/profile.css | 2 +- frontend/src/assets/images/galka.png | Bin 0 -> 265 bytes frontend/src/assets/images/redact.svg | 4 + frontend/src/components/CatalogType.vue | 73 +++ frontend/src/components/ProfileMyOffers.vue | 56 +- frontend/src/router/index.js | 2 +- frontend/src/views/CatalogView.vue | 120 ++-- frontend/src/views/OfferView.vue | 49 +- 11 files changed, 994 insertions(+), 139 deletions(-) create mode 100644 frontend/raw/assets/css/catalog.css create mode 100644 frontend/src/assets/images/galka.png create mode 100644 frontend/src/assets/images/redact.svg create mode 100644 frontend/src/components/CatalogType.vue diff --git a/frontend/raw/Catalog.html b/frontend/raw/Catalog.html index c5fc7ad..67f4cec 100644 --- a/frontend/raw/Catalog.html +++ b/frontend/raw/Catalog.html @@ -7,7 +7,7 @@ - + Metr @@ -64,35 +64,99 @@ +
+

Квартира

 +
+ +
+
+

Комната

 +
+ +
+
+

Дом, дача

 +
+ +
+
+

Коттедж

 +
+ +
+
+
+
+

Купить

 +
+ +
+
+

Продать

 +
+ +
+
+
+
+

Студия

 +
+ +
+
+

1 комната

 +
+ +
+
+

2 комнаты

 +
+ +
+
+

3 комнаты и более

 +
+ +
+
+
+
+
+

От

 +

До

 +
+

Найти недвижимость

-
-
-
-

Квартира

- +
+
+
+
+

Квартира

+ +
-
-
-
-

Купить

- +
+
+

Купить

+ +
-
-
-
-

Комнаты

- +
+
+

Комнаты

+ +
-
-
-
-

Цена

- +
+
+

Цена

+ +
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 0000000000000000000000000000000000000000..96782436172691764258f432931125b77a9dcf12 GIT binary patch literal 265 zcmeAS@N?(olHy`uVBq!ia0vp^f*{Pn1|+R>-G2co&H|6fVg?3oVGw3ym^DWND9BhG zB_b^?$J!RGt+4;g5cjZ%`Hz57TAh1A7lXAe;~pi41JS}2F3rms_&#*7g)^qy zU8mXSSD}oiaxDz&gEt0Z&lA=qpaGQ0qfqc zx;CHlo6GOVr&>O#FESUNYM+s|NI2+s^NY@H4Udx5cw%|qXoOyP-g^${QU*^~KbLh* G2~7Y9q+H$r literal 0 HcmV?d00001 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 @@ @@ -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 @@