mirror of
https://github.com/robonen/metr.git
synced 2026-03-20 02:44:42 +00:00
+Vue +edited backend
This commit is contained in:
Konstantin Vinokurov
@@ -7,7 +7,7 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../src/assets/css/catalog.css">
|
||||
<link rel="stylesheet" href="assets/css/catalog.css">
|
||||
<title>Metr</title>
|
||||
</head>
|
||||
<body>
|
||||
@@ -64,35 +64,99 @@
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<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 class="prm__flat__block"><a href=""><h4>Коттедж</h4></a>
|
||||
<div class="prm__img">
|
||||
<img src="assets/images/galka.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prm__buy">
|
||||
<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>
|
||||
<div class="prm__komnaty">
|
||||
<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>1 комната</h4></a>
|
||||
<div class="prm__img">
|
||||
<img src="assets/images/galka.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="prm__flat__block"><a href=""><h4>2 комнаты</h4></a>
|
||||
<div class="prm__img">
|
||||
<img src="assets/images/galka.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="prm__flat__block"><a href=""><h4>3 комнаты и более</h4></a>
|
||||
<div class="prm__img">
|
||||
<img src="assets/images/galka.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="prm__price">
|
||||
<div class="prm__flat__block">
|
||||
<input class="price"type="text"><a href=""><h4>От</h4></a>
|
||||
<input class="price"type="text"><a href=""><h4>До</h4></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="suggestions">
|
||||
<div class="suggestions__title">
|
||||
<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="../src/assets/images/arrow.png" alt=""></a>
|
||||
<div class="prm__top">
|
||||
<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>
|
||||
<div class="prm">
|
||||
<div class="prm__inside">
|
||||
<div class="prm__text"><h2>Купить</h2></div>
|
||||
<a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
|
||||
<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="prm">
|
||||
<div class="prm__inside">
|
||||
<div class="prm__text"><h2>Комнаты</h2></div>
|
||||
<a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
|
||||
<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="prm">
|
||||
<div class="prm__inside">
|
||||
<div class="prm__text"><h2>Цена</h2></div>
|
||||
<a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
|
||||
<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>
|
||||
|
||||
665
frontend/raw/assets/css/catalog.css
Normal file
665
frontend/raw/assets/css/catalog.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
BIN
frontend/src/assets/images/galka.png
Normal file
BIN
frontend/src/assets/images/galka.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
4
frontend/src/assets/images/redact.svg
Normal file
4
frontend/src/assets/images/redact.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 599 B |
73
frontend/src/components/CatalogType.vue
Normal file
73
frontend/src/components/CatalogType.vue
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
@@ -29,7 +29,7 @@ const router = createRouter({
|
||||
component: ProfileView
|
||||
},
|
||||
{
|
||||
path: '/offer',
|
||||
path: '/catalog/:id',
|
||||
name: 'offer',
|
||||
component: OfferView
|
||||
},
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user