mirror of
https://github.com/robonen/metr.git
synced 2026-03-20 10:54:41 +00:00
+Vue
This commit is contained in:
Konstantin Vinokurov
533
frontend/src/assets/css/catalog.css
Normal file
533
frontend/src/assets/css/catalog.css
Normal file
@@ -0,0 +1,533 @@
|
||||
/* Fonts */
|
||||
|
||||
@import url("@/assets/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("@/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;
|
||||
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(
|
||||
"@/assets/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(
|
||||
"@/assets/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;
|
||||
justify-content: space-between;
|
||||
align-items: left;
|
||||
margin: 2% 40% 2% 10%;
|
||||
}
|
||||
|
||||
.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__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;
|
||||
}
|
||||
254
frontend/src/assets/css/profile.css
Normal file
254
frontend/src/assets/css/profile.css
Normal file
@@ -0,0 +1,254 @@
|
||||
/* Fonts */
|
||||
|
||||
@import url("@/assets/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("@/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;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 250px;
|
||||
|
||||
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
|
||||
"@/assets/images/intro.jpg");
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
margin: 0 10%;
|
||||
}
|
||||
|
||||
.user__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-right: 5%;
|
||||
}
|
||||
|
||||
.user__logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
border-radius: 20px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding-left: 20%;
|
||||
}
|
||||
|
||||
.username {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.user__stat {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin: 2% 0 2% 5%;
|
||||
}
|
||||
|
||||
.stars {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
margin-left: 5%;
|
||||
padding-bottom: 1%;
|
||||
}
|
||||
|
||||
.user__hrefs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: left;
|
||||
width: 110%;
|
||||
padding-left: 5%;
|
||||
}
|
||||
|
||||
.user__hrefs a{
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
/* Fonts */
|
||||
|
||||
@import url("../../fonts/StapelS/style.css");
|
||||
@import url("@/assets/fonts/StapelS/style.css");
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
|
||||
BIN
frontend/src/assets/images/adv1.png
Normal file
BIN
frontend/src/assets/images/adv1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 473 KiB |
BIN
frontend/src/assets/images/adv2.png
Normal file
BIN
frontend/src/assets/images/adv2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
BIN
frontend/src/assets/images/adv3.png
Normal file
BIN
frontend/src/assets/images/adv3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
frontend/src/assets/images/adv4.png
Normal file
BIN
frontend/src/assets/images/adv4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
frontend/src/assets/images/arrow.png
Normal file
BIN
frontend/src/assets/images/arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 285 B |
BIN
frontend/src/assets/images/forcomment.png
Normal file
BIN
frontend/src/assets/images/forcomment.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
frontend/src/assets/images/heart.png
Normal file
BIN
frontend/src/assets/images/heart.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
BIN
frontend/src/assets/images/star.png
Normal file
BIN
frontend/src/assets/images/star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/src/assets/images/star1.png
Normal file
BIN
frontend/src/assets/images/star1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 409 B |
BIN
frontend/src/assets/images/starsmall.png
Normal file
BIN
frontend/src/assets/images/starsmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/src/assets/images/userlogo.png
Normal file
BIN
frontend/src/assets/images/userlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
frontend/src/assets/images/userlogosmall.png
Normal file
BIN
frontend/src/assets/images/userlogosmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
38
frontend/src/components/ProfileAbout.vue
Normal file
38
frontend/src/components/ProfileAbout.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<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_describtions">
|
||||
<h3>Занимаюсь продажей квартир более 10 лет.</h3>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "ProfileAbout"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.about__user {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.about__images {
|
||||
width: 105%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 1%;
|
||||
}
|
||||
|
||||
.about_describtions {
|
||||
margin-top: 5%;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,8 @@
|
||||
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";
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
@@ -15,6 +17,16 @@ const router = createRouter({
|
||||
name: 'auth',
|
||||
component: AuthView
|
||||
},
|
||||
{
|
||||
path: '/catalog',
|
||||
name: 'catalog',
|
||||
component: CatalogView
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: ProfileView
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
125
frontend/src/views/CatalogView.vue
Normal file
125
frontend/src/views/CatalogView.vue
Normal file
@@ -0,0 +1,125 @@
|
||||
<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">
|
||||
<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">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/user.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
</div>
|
||||
<div class="suggestions__images">
|
||||
<div class="podlozhka">
|
||||
<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>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<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>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<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>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<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>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<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>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<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>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CatalogView"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("@/assets/css/catalog.css");
|
||||
</style>
|
||||
@@ -11,8 +11,11 @@
|
||||
</div>
|
||||
<div class="header__block">
|
||||
<div class="header__block__contenttop">
|
||||
<a class="nav__link" href="#" id="catalog">каталог</a>
|
||||
<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>
|
||||
@@ -27,9 +30,7 @@
|
||||
</div>
|
||||
<div class="header__search">
|
||||
<div class="search">
|
||||
<div class="search__block">
|
||||
|
||||
</div>
|
||||
<input class="search__block">
|
||||
<div class="search__img">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/search.jpg" alt="">
|
||||
@@ -93,30 +94,12 @@
|
||||
<h3 class="newhome">Интересные предложения</h3>
|
||||
</div>
|
||||
<div class="suggestions__images">
|
||||
<div class="podlozhka">
|
||||
|
||||
<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>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/1.jpg" alt=""></a></div>
|
||||
<div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/3.jpg" alt=""></a></div>
|
||||
<div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/4.jpg" alt=""></a></div>
|
||||
<div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
|
||||
<div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
|
||||
</div>
|
||||
<div class="podlozhka">
|
||||
<div class="sugg__img"><a class="gradient" href="#"><img src="@/assets/images/6.jpg" alt=""></a></div>
|
||||
<div class="sugg__text"><p>Студия на Кирова, 12</p><h2>1298000₽</h2></div>
|
||||
<div class="sugg__text"><p>{{offer.name}}}</p><h2>{{ offer.price }}₽</h2></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="afterword">
|
||||
<p class="afterword">Это подборка лучших вариантов, найденных</p>
|
||||
@@ -167,6 +150,21 @@
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return { offers: [] }
|
||||
},
|
||||
async mounted() {
|
||||
const requests = await fetch('http://tusur.tk:9080/api/offers');
|
||||
const offers = await requests.json();
|
||||
this.offers = offers.data;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("@/assets/css/main.css");
|
||||
</style>
|
||||
|
||||
107
frontend/src/views/ProfileView.vue
Normal file
107
frontend/src/views/ProfileView.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<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">
|
||||
<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">
|
||||
<a class="nav__link" href="#">
|
||||
<img src="@/assets/images/user.jpg" alt="">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="intro">
|
||||
<div class="main">
|
||||
<div class="user__info">
|
||||
<div class="user__logo">
|
||||
<img src="../assets/images/userlogo.png" 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>
|
||||
</div>
|
||||
<div class="user__hrefs">
|
||||
<div class="aboutme">
|
||||
<a href="#"><h2>Обо мне</h2></a>
|
||||
</div>
|
||||
<div class="my__notice">
|
||||
<a href="#"><h2>Мои объявления</h2></a>
|
||||
</div>
|
||||
<!-- <div class="add__notice">-->
|
||||
<!-- <a href="#"><h2>Добавить объявление</h2></a>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div class="favorites">-->
|
||||
<!-- <a href="#"><h2>Избранное</h2></a>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
<profile-about></profile-about>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProfileAbout from "@/components/ProfileAbout.vue";
|
||||
export default {
|
||||
components: {ProfileAbout},
|
||||
data () {
|
||||
return { ButtonForm: true }
|
||||
}
|
||||
}
|
||||
</script>>
|
||||
|
||||
<style scoped>
|
||||
@import url("@/assets/css/profile.css");
|
||||
</style>
|
||||
Reference in New Issue
Block a user