mirror of
https://github.com/robonen/metr.git
synced 2026-03-20 02:44:42 +00:00
Merge pull request #13 from robonen/Frontend_+_backend
Frontend + backend
This commit is contained in:
Konstantin Vinokurov
GitHub
@@ -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>
|
||||
|
||||
@@ -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="assets/css/addingAdv.css">
|
||||
<link rel="stylesheet" href="../src/assets/css/addingAdv.css">
|
||||
<title>Metr</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
height: 96px;
|
||||
margin: 0 auto;
|
||||
|
||||
background: url("../images/metr.svg") center
|
||||
background: url("../../../raw/assets/images/metr.svg") center
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
border-right: 2px solid white;
|
||||
@@ -189,7 +189,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
padding-top: 250px;
|
||||
|
||||
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
|
||||
"../images/intro.jpg");
|
||||
"../../../raw/assets/images/intro.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
/* Container */
|
||||
.container {
|
||||
width: 100%;
|
||||
@@ -35,150 +34,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
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("@/assets/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%;
|
||||
@@ -344,22 +199,25 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.suggestions__title {
|
||||
font-size: 25px;
|
||||
padding-left: 10%;
|
||||
/*padding-left: 10%;*/
|
||||
margin: 0% 12%;
|
||||
}
|
||||
|
||||
.suggestions__images {
|
||||
margin: 2% 12%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
/*justify-content: space-between;*/
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sugg__img {
|
||||
flex-basis: 30%;
|
||||
height: 460px;
|
||||
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-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transition: transform .2s linear;
|
||||
}
|
||||
|
||||
@@ -377,7 +235,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
}
|
||||
|
||||
.gradient {
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
@@ -398,6 +255,12 @@ h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
.podlozhka {
|
||||
position: relative;
|
||||
width: 369px;
|
||||
height: 460px;
|
||||
|
||||
margin-top: 1em;
|
||||
margin-left: 1em;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.podlozhka:hover .sugg__img {
|
||||
@@ -451,7 +314,7 @@ h1, h2, h3, h4, h5, h6 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: left;
|
||||
margin: 2% 40% 2% 10%;
|
||||
margin: 2% 12%;
|
||||
}
|
||||
|
||||
.parametrs {
|
||||
@@ -531,3 +394,66 @@ h1, h2, h3, h4, h5, h6 {
|
||||
height: 48px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.parametrs__block ul {
|
||||
|
||||
padding:0;
|
||||
margin:0;
|
||||
list-style: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* применяем inline-block позиционирование к элементам навигации */
|
||||
.parametrs__block ul li {
|
||||
|
||||
margin: 0px 28px 0 0;
|
||||
display:inline-block;
|
||||
border-radius: 0px;
|
||||
background-color: #1A89C9;
|
||||
}
|
||||
|
||||
/* стилизуем ссылки */
|
||||
.parametrs__block a {
|
||||
|
||||
display:block;
|
||||
padding:0 20px;
|
||||
color:#FFF;
|
||||
font-size:20px;
|
||||
line-height: 60px;
|
||||
text-decoration:none;
|
||||
}
|
||||
|
||||
.parametrs__block b {
|
||||
display:block;
|
||||
padding:0 20px;
|
||||
}
|
||||
|
||||
/* изменяем цвет фона при наведении курсора */
|
||||
.parametrs__block a:hover, .parametrs__block__selected {
|
||||
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: 200px;
|
||||
float:none;
|
||||
display:list-item;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -35,150 +35,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
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("../../../raw/assets/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%;
|
||||
@@ -259,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;
|
||||
@@ -278,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;
|
||||
|
||||
@@ -35,154 +35,10 @@ h1, h2, h3, h4, h5, h6 {
|
||||
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("@/assets/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;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -203,18 +59,29 @@ h1, h2, h3, h4, h5, h6 {
|
||||
.user__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
/*justify-content: space-between;*/
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.user__logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
border-radius: 50%;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding-left: 20%;
|
||||
margin: 0 auto;
|
||||
|
||||
background: url("@/assets/images/user_standart.png") center
|
||||
no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.user__logo > img{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
width: 120%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.username {
|
||||
@@ -223,18 +90,18 @@ h1, h2, h3, h4, h5, h6 {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user__stat {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 2% 0 2% 5%;
|
||||
}
|
||||
/*.user__stat {*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: row;*/
|
||||
/* margin: 2% 0 2% 5%;*/
|
||||
/*}*/
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 5%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
/*.stars {*/
|
||||
/* display: flex;*/
|
||||
/* flex-direction: row;*/
|
||||
/* margin-left: 5%;*/
|
||||
/* padding-bottom: 1%;*/
|
||||
/*}*/
|
||||
|
||||
.user__hrefs {
|
||||
display: flex;
|
||||
|
||||
@@ -35,150 +35,6 @@ h1, h2, h3, h4, h5, h6 {
|
||||
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%;
|
||||
|
||||
BIN
frontend/src/assets/images/1.1.jpg
Normal file
BIN
frontend/src/assets/images/1.1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
3
frontend/src/assets/images/delete_log.svg
Normal file
3
frontend/src/assets/images/delete_log.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5.5 0.9375L5.0625 0.5L3 2.5625L0.9375 0.5L0.5 0.9375L2.5625 3L0.5 5.0625L0.9375 5.5L3 3.4375L5.0625 5.5L5.5 5.0625L3.4375 3L5.5 0.9375Z" fill="black"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 261 B |
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 |
BIN
frontend/src/assets/images/image_load.png
Normal file
BIN
frontend/src/assets/images/image_load.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 382 B |
3
frontend/src/assets/images/location.svg
Normal file
3
frontend/src/assets/images/location.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="10" height="15" viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M5 15C5 15 10 7.53315 10 4.85294C10 2.17274 7.76142 0 5 0C2.23858 0 0 2.17274 0 4.85294C0 7.53315 5 15 5 15ZM5 6.875C6.03553 6.875 6.875 6.03553 6.875 5C6.875 3.96447 6.03553 3.125 5 3.125C3.96447 3.125 3.125 3.96447 3.125 5C3.125 6.03553 3.96447 6.875 5 6.875Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 430 B |
3
frontend/src/assets/images/metr_header.svg
Normal file
3
frontend/src/assets/images/metr_header.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="185" height="100" viewBox="0 0 185 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M185 0H0V100H185V0ZM89.1875 51.48V49.08C89.1875 45.8533 88.3208 43.5333 86.5875 42.12C84.8542 40.7067 82.2275 40 78.7075 40C74.9208 40 72.1608 40.8 70.4275 42.4C68.7208 43.9733 67.8675 46.7467 67.8675 50.72C67.8675 54.5867 68.7342 57.3067 70.4675 58.88C72.2008 60.4267 74.9608 61.2 78.7475 61.2C82.1608 61.2 84.7075 60.6133 86.3875 59.44C88.0675 58.2667 89.0008 56.2533 89.1875 53.4H82.4675C82.2808 55.1867 81.0408 56.08 78.7475 56.08C77.3608 56.08 76.3208 55.7333 75.6275 55.04C74.9608 54.3467 74.6142 53.1867 74.5875 51.56V51.48H89.1875ZM74.5875 49.4V49.08C74.6408 47.64 75.0142 46.6267 75.7075 46.04C76.4008 45.4267 77.3875 45.12 78.6675 45.12C79.9208 45.12 80.8542 45.4533 81.4675 46.12C82.1075 46.76 82.4275 47.8533 82.4275 49.4H74.5875ZM43.48 50L49.04 55.8L54.6 50V60.6H61.08V40.6H55.72L49.04 48.16L42.36 40.6H37V60.6H43.48V50ZM94.3078 40.6H113.828V45.72H107.428V60.6H100.708V45.72H94.3078V40.6ZM127.142 56.48C127.942 59.6267 130.089 61.2 133.582 61.2C136.302 61.2 138.302 60.44 139.582 58.92C140.862 57.3733 141.502 54.6267 141.502 50.68C141.502 46.7067 140.862 43.9333 139.582 42.36C138.302 40.7867 136.302 40 133.582 40C131.876 40 130.462 40.4133 129.342 41.24C128.249 42.0667 127.516 43.2267 127.142 44.72H126.462V40.6H119.742V67.8H126.462V56.48H127.142ZM126.462 48.72C126.542 46.32 127.876 45.12 130.462 45.12C132.116 45.12 133.249 45.4933 133.862 46.24C134.502 46.96 134.822 48.44 134.822 50.68C134.822 52.8667 134.516 54.32 133.902 55.04C133.289 55.7333 132.142 56.08 130.462 56.08C127.796 56.08 126.462 54.8133 126.462 52.28V48.72Z" fill="white"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
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 |
4
frontend/src/assets/images/upload_log.svg
Normal file
4
frontend/src/assets/images/upload_log.svg
Normal file
@@ -0,0 +1,4 @@
|
||||
<svg width="49" height="47" viewBox="0 0 49 47" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.50936 29.4924C1.90967 29.4924 2.29359 29.6669 2.57665 29.9776C2.85971 30.2883 3.01873 30.7097 3.01873 31.1491V39.4326C3.01873 40.3114 3.33677 41.1542 3.90289 41.7756C4.46902 42.397 5.23684 42.7461 6.03746 42.7461H42.2622C43.0628 42.7461 43.8306 42.397 44.3968 41.7756C44.9629 41.1542 45.2809 40.3114 45.2809 39.4326V31.1491C45.2809 30.7097 45.44 30.2883 45.723 29.9776C46.0061 29.6669 46.39 29.4924 46.7903 29.4924C47.1906 29.4924 47.5745 29.6669 47.8576 29.9776C48.1406 30.2883 48.2997 30.7097 48.2997 31.1491V39.4326C48.2997 41.1902 47.6636 42.8757 46.5313 44.1185C45.3991 45.3613 43.8634 46.0595 42.2622 46.0595H6.03746C4.43622 46.0595 2.90057 45.3613 1.76833 44.1185C0.636088 42.8757 0 41.1902 0 39.4326V31.1491C0 30.7097 0.159022 30.2883 0.442083 29.9776C0.725143 29.6669 1.10906 29.4924 1.50936 29.4924Z" fill="#CCCCCC"/>
|
||||
<path d="M23.0813 0.486705C23.2216 0.332422 23.3881 0.210015 23.5715 0.126495C23.7549 0.0429757 23.9514 -1.52588e-05 24.15 -1.52588e-05C24.3485 -1.52588e-05 24.5451 0.0429757 24.7285 0.126495C24.9118 0.210015 25.0784 0.332422 25.2186 0.486705L34.2748 10.427C34.5582 10.738 34.7174 11.16 34.7174 11.5999C34.7174 12.0399 34.5582 12.4618 34.2748 12.7729C33.9914 13.0839 33.607 13.2587 33.2062 13.2587C32.8054 13.2587 32.421 13.0839 32.1375 12.7729L25.6593 5.65895V34.7938C25.6593 35.2332 25.5003 35.6546 25.2173 35.9653C24.9342 36.276 24.5503 36.4506 24.15 36.4506C23.7497 36.4506 23.3658 36.276 23.0827 35.9653C22.7996 35.6546 22.6406 35.2332 22.6406 34.7938V5.65895L16.1624 12.7729C16.0221 12.9269 15.8555 13.0491 15.6721 13.1324C15.4888 13.2158 15.2923 13.2587 15.0938 13.2587C14.8953 13.2587 14.6988 13.2158 14.5155 13.1324C14.3321 13.0491 14.1655 12.9269 14.0252 12.7729C13.8848 12.6188 13.7735 12.436 13.6976 12.2347C13.6216 12.0335 13.5825 11.8177 13.5825 11.5999C13.5825 11.3821 13.6216 11.1664 13.6976 10.9651C13.7735 10.7639 13.8848 10.581 14.0252 10.427L23.0813 0.486705Z" fill="#CCCCCC"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
BIN
frontend/src/assets/images/user_standart.png
Normal file
BIN
frontend/src/assets/images/user_standart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
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,20 +1,32 @@
|
||||
<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>
|
||||
<!-- <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="">-->
|
||||
<!-- </div>-->
|
||||
<div class="about_describtions">
|
||||
<h3>Занимаюсь продажей квартир более 10 лет.</h3>
|
||||
<h4>Имя Фамилия: </h4><h3>{{ name }}</h3>
|
||||
<h4>Почта: </h4><h3>{{ user.email }}</h3>
|
||||
<h4>Телефон: </h4><h3>{{ user.phone || 'Не указано' }}</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
name: "ProfileAbout"
|
||||
name: "ProfileAbout",
|
||||
computed: {
|
||||
...mapGetters({ user: 'user' }),
|
||||
name() {
|
||||
return this.user.last_name && this.user.first_name && this.user.middle_name
|
||||
? `${this.user.last_name} ${this.user.first_name} ${this.user.middle_name}`
|
||||
: 'Не указано';
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -22,6 +34,8 @@ export default {
|
||||
.about__user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
width: 888px;
|
||||
}
|
||||
|
||||
.about__images {
|
||||
@@ -32,7 +46,16 @@ export default {
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.about__images > img {
|
||||
width: 296px;
|
||||
height: 204px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.about_describtions {
|
||||
margin-top: 5%;
|
||||
margin-top: 2%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +1,199 @@
|
||||
<template>
|
||||
<div class="about__user">
|
||||
<div class="about__title"><h2>Добавить обьявление</h2></div>
|
||||
<div class="about__title"><h2>{{ editable ? 'Изменить' : 'Добавить' }} объявление</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="image__load" v-for="(img, i) in 3" :key="i">
|
||||
<input v-if="!files[i]" type="file" @change="uploadFile">
|
||||
<div v-else class="about__delete" @click="deletePhoto(i)">
|
||||
<img src="@/assets/images/delete_log.svg" alt="">
|
||||
</div>
|
||||
<img v-if="!files[i]" src="@/assets/images/image_load.png" alt="">
|
||||
<img v-else :src="url(files[i].file)" alt="">
|
||||
<div v-if="!files[i]" class="about__load">
|
||||
<img src="@/assets/images/upload_log.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="about_describtions">
|
||||
<h3>Однушка на Елизаровых, 44</h3>
|
||||
<!-- <div class="about__delete">-->
|
||||
<!-- <img src="@/assets/images/delete_log.svg" alt="">-->
|
||||
<!-- </div>-->
|
||||
<div class="about__describtions">
|
||||
<div class="descriptions__name">
|
||||
<h4>Название для объявления:</h4>
|
||||
<input type="text" size="40" v-model.trim="offer.name">
|
||||
</div>
|
||||
<div class="descriptions__name">
|
||||
<h4>Тип:</h4>
|
||||
<select v-model="offer.type">
|
||||
<option value="Flat" selected>Квартира</option>
|
||||
<option value="House">Дома</option>
|
||||
<option value="Land">Участок</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="descriptions__address">
|
||||
<h4>Адрес:</h4>
|
||||
<input type="text" size="40" v-model.trim="offer.location">
|
||||
</div>
|
||||
<div class="descriptions__price">
|
||||
<h4>Цена:</h4>
|
||||
<input type="text" size="40" v-model.number="offer.price">
|
||||
</div>
|
||||
<div class="descriptions__flats">
|
||||
<h4>Кол-во комнат:</h4>
|
||||
<select v-model="offer.rooms">
|
||||
<option value="Studio" selected>Студия</option>
|
||||
<option value="Room1">1 комната</option>
|
||||
<option value="Room2">2 комнаты</option>
|
||||
<option value="Room3More">3 комнаты и более</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="descriptions__square">
|
||||
<h4>Площадь:</h4>
|
||||
<input type="text" size="40" v-model.number="offer.space">
|
||||
</div>
|
||||
<div class="descriptions__text">
|
||||
<h4>Описание:</h4>
|
||||
<input type="text" size="40" v-model.trim="offer.description">
|
||||
</div>
|
||||
</div>
|
||||
<button @click="action">Отправить</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import offerService from "@/services/offer";
|
||||
import { getURL } from "@/services/images";
|
||||
|
||||
export default {
|
||||
name: "ProfileAbout"
|
||||
name: "ProfileAbout",
|
||||
emits: ['updated'],
|
||||
props: {
|
||||
editData: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
editable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return this.initialState()
|
||||
},
|
||||
methods: {
|
||||
async action() {
|
||||
const data = { ...this.offer };
|
||||
const files = [ ...this.files ];
|
||||
|
||||
if (!this.editable)
|
||||
offerService
|
||||
.add(data, files)
|
||||
.then(() => this.reset())
|
||||
.catch(() => alert('Ошибка создания объявления!'));
|
||||
else
|
||||
offerService
|
||||
.update(this.editData.id, data, files)
|
||||
.then(() => this.$emit('updated'))
|
||||
.catch(() => alert('Ошибка изменения объявления!'));
|
||||
},
|
||||
initialState() {
|
||||
const ed = this.editData;
|
||||
|
||||
return {
|
||||
offer: {
|
||||
name: ed ? ed.name : '',
|
||||
type: ed ? ed.type : 'Studio',
|
||||
location: ed ? ed.location : '',
|
||||
price: ed ? ed.price : '',
|
||||
rooms: ed ? ed.rooms : 1,
|
||||
space: ed ? ed.space : '',
|
||||
description: ed ? ed.description : '',
|
||||
is_group: 1,
|
||||
},
|
||||
files: ed ? ed.images : [],
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
Object.assign(this.$data, this.initialState());
|
||||
},
|
||||
async uploadFile(event) {
|
||||
const file = event.target.files[0];
|
||||
|
||||
const res = await offerService.uploadImage(file);
|
||||
|
||||
this.files.push(res.data.data);
|
||||
},
|
||||
async deletePhoto(index) {
|
||||
const id = this.files[index].id;
|
||||
|
||||
offerService.deleteImage(id);
|
||||
|
||||
this.files.splice(index, 1);
|
||||
},
|
||||
url(path) {
|
||||
return getURL(path);
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
editData() {
|
||||
this.reset();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.about__load{
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
margin-left: 40%;
|
||||
}
|
||||
|
||||
.about__images {
|
||||
width: 105%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.image__load {
|
||||
display: flex;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image__load > input[type="file"] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
z-index: 10;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image__load > img{
|
||||
width: 296px;
|
||||
height: 204px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 3%;
|
||||
}
|
||||
|
||||
.about__delete{
|
||||
position: absolute;
|
||||
top: 2%;
|
||||
right: 2%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.about__delete > img{
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.about__user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -32,7 +207,76 @@ export default {
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.about_describtions {
|
||||
margin-top: 5%;
|
||||
.about__images > img {
|
||||
width: 296px;
|
||||
height: 204px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 1%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.about__describtions {
|
||||
margin-top: 2%;
|
||||
}
|
||||
|
||||
.descriptions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.descriptions__name {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.descriptions__address {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.descriptions__price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.descriptions__flats {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.descriptions__square {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.descriptions__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.about__describtions input {
|
||||
background-color: rgb(201, 233, 252);
|
||||
border-radius: 5px;
|
||||
border-color: white;
|
||||
box-shadow: none;
|
||||
border: 1px solid rgb(83, 110, 136);
|
||||
}
|
||||
|
||||
.about__describtions h4 {
|
||||
margin-right: 3%;
|
||||
}
|
||||
|
||||
.descriptions__text input {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,38 +1,99 @@
|
||||
<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="(offer, i) in offers" :key="i">
|
||||
<div class="image__load">
|
||||
<img v-if="offer.images.length === 0" src="@/assets/images/image_load.png" alt="">
|
||||
<img v-else :src="url(offer.images[0].file)" 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>
|
||||
|
||||
<script>
|
||||
import offerService from "@/services/offer";
|
||||
import ProfileAddOffer from "@/components/ProfileAddOffer.vue";
|
||||
import { getURL } from "@/services/images";
|
||||
|
||||
export default {
|
||||
name: "ProfileAbout"
|
||||
name: "ProfileAbout",
|
||||
components: {ProfileAddOffer},
|
||||
data() {
|
||||
return {
|
||||
activeId: null,
|
||||
offers: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
async loadOffers() {
|
||||
const offers = await offerService.allUserOffers();
|
||||
this.offers = offers.data.data;
|
||||
},
|
||||
url(path) {
|
||||
return getURL(path);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.loadOffers();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<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>
|
||||
35
frontend/src/components/RatingStars.vue
Normal file
35
frontend/src/components/RatingStars.vue
Normal file
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div class="user__stat">
|
||||
<div class="stat"><h3>{{ totalStars }}</h3></div>
|
||||
<div class="stars">
|
||||
<img src="../assets/images/star.png" alt="" v-for="(star, i) in totalStars" :key="i">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "RatingStars",
|
||||
props: {
|
||||
totalStars: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user__stat {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 2% 0 2% 5%;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 5%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
</style>
|
||||
163
frontend/src/components/TheFooter.vue
Normal file
163
frontend/src/components/TheFooter.vue
Normal file
@@ -0,0 +1,163 @@
|
||||
<template>
|
||||
<footer class="footer">
|
||||
<div class="header__table">
|
||||
<div class="header__image">
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__content">
|
||||
<img src="@/assets/images/location.svg" alt="">
|
||||
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">вконтакте</a>
|
||||
</div>
|
||||
<div class="header__block__contentbott">
|
||||
<a class="nav__link" href="#">инстаграм</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">фэйсбук</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">твиттер</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__search">
|
||||
|
||||
</div>
|
||||
<div class="footer__contacts">
|
||||
<div class="footer__contacts__imgtop">
|
||||
<a class="nav__link" href="#">+7-495-291-32-01</a>
|
||||
</div>
|
||||
<div class="footer__contacts__img">
|
||||
<a class="nav__link" href="#">вконтакте</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TheFooter"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 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;
|
||||
}
|
||||
.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("@/assets/images/metr_header.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__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;
|
||||
}
|
||||
</style>
|
||||
225
frontend/src/components/TheHeader.vue
Normal file
225
frontend/src/components/TheHeader.vue
Normal file
@@ -0,0 +1,225 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header__table">
|
||||
<router-link to="/" class="nav__link_logo" href="#">
|
||||
<div class="header__image">
|
||||
</div>
|
||||
</router-link>
|
||||
<div class="header__block">
|
||||
<div class="header__block__content">
|
||||
<img src="@/assets/images/location.svg" alt="">
|
||||
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">блог</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">контакты</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__search">
|
||||
<div class="search">
|
||||
<div class="search__block">
|
||||
|
||||
</div>
|
||||
<div class="search__img">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/search.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__contacts">
|
||||
<div class="header__contacts__imgtop">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/tell.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header__contacts__img">
|
||||
<router-link to="/auth" class="nav__link" href="#" id="user">
|
||||
<img src="@/assets/images/user.jpg" alt="">
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TheHeader"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 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("@/assets/images/metr_header.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_logo{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav__link_tomsk {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
|
||||
}
|
||||
|
||||
.nav__link:hover, .nav__link_tomsk:hover {
|
||||
color: #389EEB;
|
||||
transition: color .2s linear;
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,4 @@
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import MainView from '@/views/MainView.vue'
|
||||
import AuthView from '@/views/AuthView.vue'
|
||||
import CatalogView from "@/views/CatalogView.vue";
|
||||
import ProfileView from "@/views/ProfileView.vue";
|
||||
import OfferView from "@/views/OfferView.vue";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@@ -11,27 +6,27 @@ const router = createRouter({
|
||||
{
|
||||
path: '/',
|
||||
name: 'home',
|
||||
component: MainView
|
||||
component: () => import(/* webpackChunkName: "MainView" */ '@/views/MainView.vue')
|
||||
},
|
||||
{
|
||||
path: '/auth',
|
||||
name: 'auth',
|
||||
component: AuthView
|
||||
component: () => import(/* webpackChunkName: "AuthView" */ '@/views/AuthView.vue')
|
||||
},
|
||||
{
|
||||
path: '/catalog',
|
||||
name: 'catalog',
|
||||
component: CatalogView
|
||||
component: () => import(/* webpackChunkName: "CatalogView" */ '@/views/CatalogView.vue')
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: ProfileView
|
||||
component: () => import(/* webpackChunkName: "ProfileView" */ '@/views/ProfileView.vue')
|
||||
},
|
||||
{
|
||||
path: '/offer',
|
||||
path: '/catalog/:id',
|
||||
name: 'offer',
|
||||
component: OfferView
|
||||
component: () => import(/* webpackChunkName: "OfferView" */ '@/views/OfferView.vue')
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
@@ -1,6 +1,21 @@
|
||||
import axios from 'axios';
|
||||
|
||||
export default axios.create({
|
||||
const instance = axios.create({
|
||||
baseURL: 'http://tusur.tk:9080/api',
|
||||
withCredentials: true,
|
||||
});
|
||||
|
||||
instance.interceptors.request.use(function (config) {
|
||||
const savedUser = JSON.parse(localStorage.getItem('auth')) || null;
|
||||
if (savedUser === null)
|
||||
return config;
|
||||
|
||||
const token = savedUser.data.token;
|
||||
config.headers.Authorization = `Bearer ${token}`;
|
||||
|
||||
return config;
|
||||
}, function (error) {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
export default instance;
|
||||
|
||||
4
frontend/src/services/images.js
Normal file
4
frontend/src/services/images.js
Normal file
@@ -0,0 +1,4 @@
|
||||
export const getURL = (path) => {
|
||||
const image = path.replace('public/', '');
|
||||
return `http://tusur.tk:9080/storage/${image}`;
|
||||
};
|
||||
45
frontend/src/services/offer.js
Normal file
45
frontend/src/services/offer.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import api from "@/services/api";
|
||||
|
||||
export const OfferService = {
|
||||
async add(data, files) {
|
||||
data.images = files;
|
||||
const resp = await api.post('/offers', data);
|
||||
return resp;
|
||||
},
|
||||
async update(id, data, files) {
|
||||
data.images = files;
|
||||
const resp = await api.put(`/offers/${id}`, data);
|
||||
return resp;
|
||||
},
|
||||
async all() {
|
||||
const resp = await api.get('/offers');
|
||||
return resp;
|
||||
},
|
||||
async allUserOffers() {
|
||||
const resp = await api.get('/users/offers');
|
||||
return resp;
|
||||
},
|
||||
async filter(filters) {
|
||||
const queryParamsObj = filters.reduce((obj, item) => (obj[item.name] = item.value, obj) ,{});
|
||||
const resp = await api.get('/offers', {
|
||||
params: queryParamsObj,
|
||||
});
|
||||
return resp;
|
||||
},
|
||||
async getById(id) {
|
||||
const resp = await api.get(`/offers/${id}`);
|
||||
return resp;
|
||||
},
|
||||
async uploadImage(file) {
|
||||
const resp = await api.postForm('/offers/images', {
|
||||
'image': file,
|
||||
});
|
||||
return resp;
|
||||
},
|
||||
async deleteImage(id) {
|
||||
const resp = await api.delete(`/offers/images/${id}`);
|
||||
return resp;
|
||||
}
|
||||
};
|
||||
|
||||
export default OfferService;
|
||||
@@ -8,6 +8,11 @@ export const state = {
|
||||
};
|
||||
|
||||
export const actions = {
|
||||
async registration({ commit }, { email, password }) {
|
||||
const { data: user } = await authService.registration(email, password);
|
||||
commit('SET_USER', user.data);
|
||||
commit('SET_TOKEN', user.token);
|
||||
},
|
||||
async login({ commit }, { email, password }) {
|
||||
const { data: user } = await authService.login(email, password);
|
||||
commit('SET_USER', user.data);
|
||||
|
||||
@@ -52,7 +52,9 @@ export default {
|
||||
});
|
||||
},
|
||||
registration() {
|
||||
|
||||
this.$store.dispatch('registration', this.credentials).then(() => {
|
||||
this.$router.push('/profile');
|
||||
});
|
||||
},
|
||||
auth() {
|
||||
if (this.authForm)
|
||||
@@ -60,6 +62,10 @@ export default {
|
||||
else
|
||||
this.registration();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$store.getters.userAuthenticated)
|
||||
this.$router.push('/profile');
|
||||
}
|
||||
}
|
||||
</script>>
|
||||
|
||||
@@ -1,137 +1,143 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header__table">
|
||||
<div class="header__image">
|
||||
<router-link to="/" class="nav__link" href="#">
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__content">
|
||||
<img src="~@/assets/images/location.png" alt="">
|
||||
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">каталог</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">блог</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">контакты</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__search">
|
||||
<div class="search">
|
||||
<div class="search__block">
|
||||
|
||||
</div>
|
||||
<div class="search__img">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/search.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__contacts">
|
||||
<div class="header__contacts__imgtop">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/tell.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header__contacts__img">
|
||||
<router-link to="/auth" class="nav__link" href="#" id="user">
|
||||
<img src="@/assets/images/user.jpg" alt="">
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<the-header></the-header>
|
||||
<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="@/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>
|
||||
<ul>
|
||||
<li><a href="#">Тип</a>
|
||||
<ul>
|
||||
<li @click="addSortParam('type', 'Flat')">
|
||||
<a href="#" :class="isSelected('type', 'Flat')">Квартира</a>
|
||||
</li>
|
||||
<li @click="addSortParam('type', 'Land')">
|
||||
<a href="#" :class="isSelected('type', 'Land')">Участок</a>
|
||||
</li>
|
||||
<li @click="addSortParam('type', 'House')">
|
||||
<a href="#" :class="isSelected('type', 'House')">Дом</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Площадь</a>
|
||||
<ul>
|
||||
<li><b href="#">От: <input type="text" v-model.trim="spaceParams.min"></b></li>
|
||||
<li><b href="#">До: <input type="text" v-model.trim="spaceParams.max"></b></li>
|
||||
<li @click="addRangeSortParam('spaceParams', 'Space')"><a href="#">Сортировать</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Кол - во комнат</a>
|
||||
<ul>
|
||||
<li @click="addSortParam('rooms', 'Studio')">
|
||||
<a href="#" :class="isSelected('rooms', 'Studio')">Студия</a>
|
||||
</li>
|
||||
<li @click="addSortParam('rooms', 'Room1')">
|
||||
<a href="#" :class="isSelected('rooms', 'Room1')">1 комната</a>
|
||||
</li>
|
||||
<li @click="addSortParam('rooms', 'Room2')">
|
||||
<a href="#" :class="isSelected('rooms', 'Room2')">2 комнаты</a>
|
||||
</li>
|
||||
<li @click="addSortParam('rooms', 'Room3More')">
|
||||
<a href="#" :class="isSelected('rooms', 'Room3More')">3 комнаты и более</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="#">Цена</a>
|
||||
<ul>
|
||||
<li><b href="#">От: <input type="text" v-model.trim="priceParams.min"></b></li>
|
||||
<li><b href="#">До: <input type="text" v-model.trim="priceParams.max"></b></li>
|
||||
<li @click="addRangeSortParam('priceParams', 'Price')"><a href="#">Сортировать</a></li>
|
||||
</ul>
|
||||
</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>
|
||||
<div class="podlozhka" v-for="offer in offers">
|
||||
<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 class="sugg__text"><p>{{offer.name}}</p><h2>{{ offer.price }}₽</h2></div>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<TheFooter></TheFooter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheHeader from "@/components/TheHeader.vue";
|
||||
import TheFooter from "@/components/TheFooter.vue";
|
||||
import CatalogType from "@/components/CatalogType.vue";
|
||||
import offerService from "@/services/offer";
|
||||
import { getURL } from "@/services/images";
|
||||
|
||||
export default {
|
||||
name: "CatalogView"
|
||||
name: "CatalogView",
|
||||
components: {TheHeader, TheFooter,CatalogType},
|
||||
data () {
|
||||
return {
|
||||
offers: [],
|
||||
sortParams: [],
|
||||
spaceParams: {
|
||||
min: null,
|
||||
max: null,
|
||||
},
|
||||
priceParams: {
|
||||
min: null,
|
||||
max: null,
|
||||
},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
url(path) {
|
||||
return `url(${getURL(path)})`;
|
||||
},
|
||||
isSelected(name, value) {
|
||||
return this.sortParams.some((e) => e.name === name && e.value === value) ? 'parametrs__block__selected' : '';
|
||||
},
|
||||
async addSortParam(name, value) {
|
||||
const element = this.sortParams.findIndex((e) => e.name === name && e.value === value);
|
||||
|
||||
if (~element) {
|
||||
this.sortParams.splice(element, 1);
|
||||
await this.reloadOffers();
|
||||
return;
|
||||
}
|
||||
|
||||
this.sortParams = this.sortParams.filter((e) => e.name !== name);
|
||||
this.sortParams.push({ name, value });
|
||||
|
||||
await this.reloadOffers();
|
||||
},
|
||||
async addRangeSortParam(range, paramName) {
|
||||
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.sortParams.push({ name: minName, value: min });
|
||||
|
||||
if (max)
|
||||
this.sortParams.push({ name: maxName, value: 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();
|
||||
this.offers = offers.data.data;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -1,58 +1,5 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header__table">
|
||||
<div class="header__image"></div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__content">
|
||||
<img src="@/assets/images/location.png" alt="">
|
||||
<a class="nav__link_tomsk" href="#"> Томск</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<router-link to="/catalog" class="nav__link" href="#" id="catalog">
|
||||
каталог
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">блог</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">контакты</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__search">
|
||||
<div class="search">
|
||||
<input class="search__block">
|
||||
<div class="search__img">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/search.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__contacts">
|
||||
<div class="header__contacts__imgtop">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/tell.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header__contacts__img">
|
||||
<router-link to="/auth" class="nav__link" href="#" id="user">
|
||||
<img src="@/assets/images/user.jpg" alt="">
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<the-header></the-header>
|
||||
|
||||
<div class="intro">
|
||||
<div class="container">
|
||||
@@ -71,7 +18,9 @@
|
||||
<a class="odnushka__price" href="#">1 580 000₽</a>
|
||||
</div>
|
||||
<div class="intro__btn">
|
||||
<a class="intro__button" href="#">посмотреть</a>
|
||||
<router-link to="/catalog/1" class="intro__button" href="#">
|
||||
посмотреть
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,69 +38,34 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="suggestions">
|
||||
<div class="suggestions__title">
|
||||
<h3 class="newhome">Интересные предложения</h3>
|
||||
</div>
|
||||
<div class="suggestions__images">
|
||||
<!-- <section class="suggestions">-->
|
||||
<!-- <div class="suggestions__title">-->
|
||||
<!-- <h3 class="newhome">Интересные предложения</h3>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="suggestions__images">-->
|
||||
|
||||
<div class="podlozhka" v-for="offer in offers">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<div class="afterword">
|
||||
<p class="afterword">Это подборка лучших вариантов, найденных</p>
|
||||
<p class="afterword">нашими сотрудниками.</p>
|
||||
<p class="after__afterword">Вдруг ваше будущее жилье здесь?</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<footer class="footer">
|
||||
<div class="header__table">
|
||||
<div class="header__image">
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__content">
|
||||
<img src="assets/images/location.png" alt="">
|
||||
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">вконтакте</a>
|
||||
</div>
|
||||
<div class="header__block__contentbott">
|
||||
<a class="nav__link" href="#">инстаграм</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">фэйсбук</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">твиттер</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer__search">
|
||||
|
||||
</div>
|
||||
<div class="footer__contacts">
|
||||
<div class="footer__contacts__imgtop">
|
||||
<a class="nav__link" href="#">+7-495-291-32-01</a>
|
||||
</div>
|
||||
<div class="footer__contacts__img">
|
||||
<a class="nav__link" href="#">вконтакте</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<!-- <div class="podlozhka" v-for="offer in offers">-->
|
||||
<!-- <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>-->
|
||||
|
||||
<!-- </div>-->
|
||||
<!-- <div class="afterword">-->
|
||||
<!-- <p class="afterword">Это подборка лучших вариантов, найденных</p>-->
|
||||
<!-- <p class="afterword">нашими сотрудниками.</p>-->
|
||||
<!-- <p class="after__afterword">Вдруг ваше будущее жилье здесь?</p>-->
|
||||
<!-- </div>-->
|
||||
<!-- </section>-->
|
||||
<TheFooter></TheFooter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TheHeader from "@/components/TheHeader.vue";
|
||||
import TheFooter from "@/components/TheFooter.vue";
|
||||
|
||||
|
||||
export default {
|
||||
components: {TheHeader, TheFooter},
|
||||
data () {
|
||||
return { offers: [] }
|
||||
},
|
||||
|
||||
@@ -1,72 +1,16 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header__table">
|
||||
<div class="header__image">
|
||||
<router-link to="/" class="nav__link" href="#">
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__content">
|
||||
<img src="@/assets/images/location.png" alt="">
|
||||
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">блог</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">контакты</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__search">
|
||||
<div class="search">
|
||||
<div class="search__block">
|
||||
|
||||
</div>
|
||||
<div class="search__img">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/search.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__contacts">
|
||||
<div class="header__contacts__imgtop">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/tell.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header__contacts__img">
|
||||
<router-link to="/auth" class="nav__link" href="#" id="user">
|
||||
<img src="@/assets/images/user.jpg" alt="">
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<the-header></the-header>
|
||||
<div class="intro">
|
||||
<div class="main">
|
||||
<div class="adv__info">
|
||||
<div class="adv__main">
|
||||
<div class="adv__main__title">
|
||||
<div class="mtitle">
|
||||
<h2>4-к. квартира, 78,4 м², 20/28 эт.</h2>
|
||||
<h2>{{ offer.name }}</h2>
|
||||
</div>
|
||||
<div class="mprice__fav">
|
||||
<div class="price">
|
||||
<h2>40 610 000 ₽</h2>
|
||||
<h2>{{ offer.price }} ₽</h2>
|
||||
</div>
|
||||
<!-- <a href="#" class="favoritext"><div class="favorite">-->
|
||||
<!-- <h4>Добавить в избранное</h4>-->
|
||||
@@ -75,13 +19,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="adv__main__images">
|
||||
<div class="main__image">
|
||||
<a href="#"><img src="../assets/images/offer1.png" alt=""></a>
|
||||
</div>
|
||||
<Transition>
|
||||
<div class="main__image" v-if="offer.images" :style="{ 'background-image': imagePreview }">
|
||||
<!-- <a href="#"><img v-if="offer.images" :src="imagePreview" alt=""></a>-->
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="other__images">
|
||||
<a href="#"><img src="../assets/images/offer3.png" alt=""></a>
|
||||
<a href="#"><img src="../assets/images/offer2.png" alt=""></a>
|
||||
<a href="#"><img src="../assets/images/offer4.png" alt=""></a>
|
||||
<a href="#" v-for="(image, i) in offer.images" :key="i" @click.prevent @mouseover="imagePreviewId = i">
|
||||
<img :src="url(image.file)" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -89,29 +35,18 @@
|
||||
<div class="adv__host">
|
||||
<div class="adv__host__about__user">
|
||||
<div class="username">
|
||||
<h2>Виктория</h2>
|
||||
<h2>{{ ownerName }}</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>
|
||||
<div class="number">
|
||||
<rating-stars></rating-stars>
|
||||
<div class="number" @click.prevent="showPhone">
|
||||
<a href="#" class="favoritextinf"><h5>Показать номер</h5></a>
|
||||
</div>
|
||||
<!-- <div class="message">-->
|
||||
<!-- <a href="#" class="favoritextinf"><h5>Написать владельцу</h5></a>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
<div class="userlogo">
|
||||
<img src="@/assets/images/userlogosmall.png" alt="">
|
||||
<div class="userlogo" :style="{'background-image': ownerPhoto}">
|
||||
<!-- <img :src="ownerPhoto" alt="">-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -121,15 +56,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>Кол-во комнат: {{ roomType }}</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">
|
||||
@@ -137,64 +74,103 @@
|
||||
<h2>Отзывы</h2>
|
||||
</div>
|
||||
<div class="reviews__blocks">
|
||||
<div class="review">
|
||||
<div v-if="offer?.user?.feedback" class="review" v-for="(review, i) in offer.user.feedback" :key="i">
|
||||
<div class="review__avatar">
|
||||
<img src="@/assets/images/forcomment.png" alt="">
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="review__avatar">
|
||||
<img src="@/assets/images/forcomment.png" alt="">
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
<div class="review">
|
||||
<div class="review__avatar">
|
||||
<img src="@/assets/images/forcomment.png" alt="">
|
||||
</div>
|
||||
<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="">
|
||||
<h5>{{ review.comment }}</h5>
|
||||
</div>
|
||||
<rating-stars :totalStars="review.rating"></rating-stars>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TheFooter></TheFooter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RatingStars from "@/components/RatingStars.vue";
|
||||
import TheHeader from "@/components/TheHeader.vue";
|
||||
import TheFooter from "@/components/TheFooter.vue";
|
||||
import offerService from "@/services/offer";
|
||||
import { getURL } from "@/services/images";
|
||||
|
||||
export default {
|
||||
name: "OfferView"
|
||||
name: "OfferView",
|
||||
components: {TheFooter, TheHeader, RatingStars},
|
||||
data() {
|
||||
return {
|
||||
imagePreviewId: 0,
|
||||
offer: {}
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
offerType() {
|
||||
return {
|
||||
'Flat': 'Квартира',
|
||||
'House': 'Дом',
|
||||
'Land': 'Участок',
|
||||
}[this.offer.type];
|
||||
},
|
||||
roomType() {
|
||||
return {
|
||||
'Studio': 'Студия',
|
||||
'Room1': '1 комната',
|
||||
'Room2': '2 комнаты',
|
||||
'Room3More': '3 комнаты и больше',
|
||||
}[this.offer.rooms]
|
||||
},
|
||||
imagePreview() {
|
||||
return this.offer.images.length !== 0
|
||||
? `url(${getURL(this.offer.images[this.imagePreviewId].file)})`
|
||||
: 'url(@/assets/images/offer1.png)';
|
||||
},
|
||||
ownerName() {
|
||||
if (!this.offer.user) return;
|
||||
|
||||
const user = this.offer.user;
|
||||
return user.first_name ?? `Пользователь #${user.id}`;
|
||||
},
|
||||
ownerPhoto() {
|
||||
if (!this.offer.user) return;
|
||||
|
||||
const user = this.offer.user;
|
||||
return user.photo ? `url(${getURL(user.photo)})` : 'url(/src/assets/images/user_standart.png)';
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
url(path) {
|
||||
return getURL(path);
|
||||
},
|
||||
showPhone() {
|
||||
const phone = this.offer.user.phone ?? 'отсутствует';
|
||||
alert(`Номер пользователя: ${phone}`);
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
const id = this.$route.params.id;
|
||||
|
||||
if (id === undefined)
|
||||
return this.$router.back();
|
||||
|
||||
const resp = await offerService.getById(id);
|
||||
this.offer = resp.data.data;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("@/assets/css/offer.css");
|
||||
|
||||
.v-enter-active,
|
||||
.v-leave-active {
|
||||
transition: opacity 0.5s ease;
|
||||
}
|
||||
|
||||
.v-enter-from,
|
||||
.v-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
@@ -1,80 +1,15 @@
|
||||
<template>
|
||||
<header class="header">
|
||||
<div class="container">
|
||||
<div class="header__table">
|
||||
<div class="header__image">
|
||||
<router-link to="/" class="nav__link" href="#">
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__content">
|
||||
<img src="@/assets/images/location.png" alt="">
|
||||
<a class="nav__link_tomsk" href="#">Томск</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<router-link to="/catalog" class="nav__link" href="#">каталог</router-link>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">блог</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#">контакты</a>
|
||||
</div>
|
||||
<div class="header__block__contentdown">
|
||||
<a class="nav__link" href="#">помощь</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__search">
|
||||
<div class="search">
|
||||
<div class="search__block">
|
||||
|
||||
</div>
|
||||
<div class="search__img">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/search.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header__contacts">
|
||||
<div class="header__contacts__imgtop">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/tell.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="header__contacts__img">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/user.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<the-header></the-header>
|
||||
<div class="intro">
|
||||
<div class="main">
|
||||
<div class="user__info">
|
||||
<div class="user__logo">
|
||||
<img src="../assets/images/userlogo.png" alt="">
|
||||
<!-- <img src="@/assets/images/1.1.jpg" alt="">-->
|
||||
</div>
|
||||
<div class="username">
|
||||
<h3>Виктория</h3>
|
||||
</div>
|
||||
<div class="user__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>
|
||||
<h3>{{ name }}</h3>
|
||||
</div>
|
||||
<rating-stars></rating-stars>
|
||||
<div class="user__hrefs">
|
||||
<div class="aboutme">
|
||||
<a @click.prevent="activeTab = 'profile-about'">
|
||||
@@ -93,25 +28,62 @@
|
||||
<!-- <div class="favorites">-->
|
||||
<!-- <a href="#"><h2>Избранное</h2></a>-->
|
||||
<!-- </div>-->
|
||||
<div class="add__notice">
|
||||
<a @click.prevent="logout">
|
||||
<h2>Выйти из аккаунта</h2>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<component :is="activeTab"></component>
|
||||
</div>
|
||||
</div>
|
||||
<TheFooter></TheFooter>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProfileAbout from "@/components/ProfileAbout.vue";
|
||||
import ProfileMyOffers from "@/components/ProfileMyOffers.vue";
|
||||
import ProfileAddOffer from "@/components/ProfileAddOffer.vue";
|
||||
import RatingStars from "@/components/RatingStars.vue";
|
||||
import TheHeader from "@/components/TheHeader.vue";
|
||||
import TheFooter from "@/components/TheFooter.vue";
|
||||
import {mapGetters} from "vuex";
|
||||
|
||||
export default {
|
||||
components: {ProfileAbout, ProfileMyOffers, ProfileAddOffer},
|
||||
components: {
|
||||
TheFooter,
|
||||
ProfileAbout,
|
||||
ProfileMyOffers,
|
||||
ProfileAddOffer,
|
||||
RatingStars,
|
||||
TheHeader,
|
||||
},
|
||||
data () {
|
||||
return { activeTab : "profile-about" }
|
||||
}
|
||||
return {
|
||||
activeTab : "profile-about"
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
user: 'user',
|
||||
}),
|
||||
name() {
|
||||
return this.user.first_name
|
||||
? this.user.first_name
|
||||
: `Пользователь #${this.user.id}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
logout() {
|
||||
this.$store.dispatch('logout').then(() => {
|
||||
this.$router.push('/');
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>>
|
||||
|
||||
<style scoped>
|
||||
@import url("@/assets/css/profile.css");
|
||||
@import url("@/assets/css/profile.css");
|
||||
</style>
|
||||
Reference in New Issue
Block a user