robonen/metr
1
0
Fork 0
mirror of https://github.com/robonen/metr.git synced 2026-03-20 02:44:42 +00:00
Code Releases Activity

+Vue

Browse Source
This commit is contained in:
Konstantin Vinokurov
2022-05-27 18:03:55 +07:00
parent 4c7db78fcc
commit 1071177df9
23 changed files with 326 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
frontend/raw/index.html → frontend/index.html
View File

10
frontend/raw/Catalog.html
View File

@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/catalog.css"> <link rel="stylesheet" href="../src/assets/css/catalog.css">
<title>Metr</title> <title>Metr</title>
</head> </head>
<body> <body>
@@ -74,25 +74,25 @@
<div class="prm"> <div class="prm">
<div class="prm__inside"> <div class="prm__inside">
<div class="prm__text"><h2>Квартира</h2></div> <div class="prm__text"><h2>Квартира</h2></div>
<a href="#"><img src="assets/images/arrow.png" alt=""></a> <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
</div> </div>
</div> </div>
<div class="prm"> <div class="prm">
<div class="prm__inside"> <div class="prm__inside">
<div class="prm__text"><h2>Купить</h2></div> <div class="prm__text"><h2>Купить</h2></div>
<a href="#"><img src="assets/images/arrow.png" alt=""></a> <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
</div> </div>
</div> </div>
<div class="prm"> <div class="prm">
<div class="prm__inside"> <div class="prm__inside">
<div class="prm__text"><h2>Комнаты</h2></div> <div class="prm__text"><h2>Комнаты</h2></div>
<a href="#"><img src="assets/images/arrow.png" alt=""></a> <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
</div> </div>
</div> </div>
<div class="prm"> <div class="prm">
<div class="prm__inside"> <div class="prm__inside">
<div class="prm__text"><h2>Цена</h2></div> <div class="prm__text"><h2>Цена</h2></div>
<a href="#"><img src="assets/images/arrow.png" alt=""></a> <a href="#"><img src="../src/assets/images/arrow.png" alt=""></a>
</div> </div>
</div> </div>
</div> </div>

14
frontend/raw/profile.html
View File

@@ -7,7 +7,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <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 href="https://fonts.googleapis.com/css2?family=Inter:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/profile.css"> <link rel="stylesheet" href="../src/assets/css/profile.css">
<title>Metr</title> <title>Metr</title>
</head> </head>
<body> <body>
@@ -69,7 +69,7 @@
<div class="main"> <div class="main">
<div class="user__info"> <div class="user__info">
<div class="user__logo"> <div class="user__logo">
<img src="assets/images/userlogo.png" alt=""> <img src="../src/assets/images/userlogo.png" alt="">
</div> </div>
<div class="username"> <div class="username">
<h3>Виктория</h3> <h3>Виктория</h3>
@@ -77,11 +77,11 @@
<div class="user__stat"> <div class="user__stat">
<div class="stat"><h3>4,5</h3></div> <div class="stat"><h3>4,5</h3></div>
<div class="stars"> <div class="stars">
<img src="assets/images/star.png" alt=""> <img src="../src/assets/images/star.png" alt="">
<img src="assets/images/star.png" alt=""> <img src="../src/assets/images/star.png" alt="">
<img src="assets/images/star.png" alt=""> <img src="../src/assets/images/star.png" alt="">
<img src="assets/images/star.png" alt=""> <img src="../src/assets/images/star.png" alt="">
<img src="assets/images/star.png" alt=""> <img src="../src/assets/images/star.png" alt="">
</div> </div>
</div> </div>
<div class="user__hrefs"> <div class="user__hrefs">

8
frontend/raw/assets/css/catalog.css → frontend/src/assets/css/catalog.css
View File

@@ -1,6 +1,6 @@
/* Fonts */ /* Fonts */
@import url("../../fonts/StapelS/style.css"); @import url("@/assets/fonts/StapelS/style.css");
body { body {
margin: 0; margin: 0;
@@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
height: 96px; height: 96px;
margin: 0 auto; margin: 0 auto;
background: url("../images/metr.svg") center background: url("@/assets/images/metr.svg") center
no-repeat; no-repeat;
background-size: cover; background-size: cover;
border-right: 2px solid white; border-right: 2px solid white;
@@ -189,7 +189,7 @@ h1, h2, h3, h4, h5, h6 {
padding-top: 250px; padding-top: 250px;
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url( background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.3)), url(
"../images/intro.jpg"); "@/assets/images/intro.jpg");
background-size: cover; background-size: cover;
} }
@@ -314,7 +314,7 @@ h1, h2, h3, h4, h5, h6 {
height: 590px; height: 590px;
border: 1px solid black; border: 1px solid black;
background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url( background-image: linear-gradient(to top, rgb(124, 173, 201, 0.6), rgb(94, 196, 242, 0.2)), url(
"../images/video.jpg"); "@/assets/images/video.jpg");
background-size: cover; background-size: cover;
} }

22
frontend/raw/assets/css/profile.css → frontend/src/assets/css/profile.css
View File

@@ -1,6 +1,6 @@
/* Fonts */ /* Fonts */
@import url("../../fonts/StapelS/style.css"); @import url("@/assets/fonts/StapelS/style.css");
body { body {
margin: 0; margin: 0;
@@ -66,7 +66,7 @@ h1, h2, h3, h4, h5, h6 {
height: 96px; height: 96px;
margin: 0 auto; margin: 0 auto;
background: url("../images/metr.svg") center background: url("@/assets/images/metr.svg") center
no-repeat; no-repeat;
background-size: cover; background-size: cover;
border-right: 2px solid white; border-right: 2px solid white;
@@ -189,7 +189,7 @@ h1, h2, h3, h4, h5, h6 {
padding-top: 250px; padding-top: 250px;
background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url( background-image: linear-gradient(to top, rgb(124, 173, 201, 1), rgb(94, 196, 242, 0.6)), url(
"../images/intro.jpg"); "@/assets/images/intro.jpg");
background-size: cover; background-size: cover;
} }
@@ -252,19 +252,3 @@ h1, h2, h3, h4, h5, h6 {
font-weight: 600; font-weight: 600;
} }
.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%;
}

2
frontend/src/assets/css/style.css
View File

@@ -1,6 +1,6 @@
/* Fonts */ /* Fonts */
@import url("../../fonts/StapelS/style.css"); @import url("@/assets/fonts/StapelS/style.css");
body { body {
margin: 0; margin: 0;

BIN
frontend/src/assets/images/adv1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 473 KiB

BIN
frontend/src/assets/images/adv2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 44 KiB

BIN
frontend/src/assets/images/adv3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
frontend/src/assets/images/adv4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

0
frontend/raw/assets/images/arrow.png → frontend/src/assets/images/arrow.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 285 B

After

Width:  |  Height:  |  Size: 285 B

BIN
frontend/src/assets/images/forcomment.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
frontend/src/assets/images/heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 422 B

0
frontend/raw/assets/images/star.png → frontend/src/assets/images/star.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
frontend/src/assets/images/star1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 409 B

BIN
frontend/src/assets/images/starsmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

0
frontend/raw/assets/images/userlogo.png → frontend/src/assets/images/userlogo.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

BIN
frontend/src/assets/images/userlogosmall.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

38
frontend/src/components/ProfileAbout.vue Normal file
View 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>

12
frontend/src/router/index.js
View File

@@ -1,6 +1,8 @@
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import MainView from '@/views/MainView.vue' import MainView from '@/views/MainView.vue'
import AuthView from '@/views/AuthView.vue' import AuthView from '@/views/AuthView.vue'
import CatalogView from "@/views/CatalogView.vue";
import ProfileView from "@/views/ProfileView.vue";
const router = createRouter({ const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL), history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +17,16 @@ const router = createRouter({
name: 'auth', name: 'auth',
component: AuthView component: AuthView
}, },
{
path: '/catalog',
name: 'catalog',
component: CatalogView
},
{
path: '/profile',
name: 'profile',
component: ProfileView
},
] ]
}) })

125
frontend/src/views/CatalogView.vue Normal file
View 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>

50
frontend/src/views/MainView.vue
View File

@@ -11,8 +11,11 @@
</div> </div>
<div class="header__block"> <div class="header__block">
<div class="header__block__contenttop"> <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>
<div class="header__block__contentdown"> <div class="header__block__contentdown">
<a class="nav__link" href="#">блог</a> <a class="nav__link" href="#">блог</a>
</div> </div>
@@ -27,9 +30,7 @@
</div> </div>
<div class="header__search"> <div class="header__search">
<div class="search"> <div class="search">
<div class="search__block"> <input class="search__block">
</div>
<div class="search__img"> <div class="search__img">
<a class="nav__link" href="#"> <a class="nav__link" href="#">
<img src="@/assets/images/search.jpg" alt=""> <img src="@/assets/images/search.jpg" alt="">
@@ -93,30 +94,12 @@
<h3 class="newhome">Интересные предложения</h3> <h3 class="newhome">Интересные предложения</h3>
</div> </div>
<div class="suggestions__images"> <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__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 class="sugg__text"><p>{{offer.name}}}</p><h2>{{ offer.price }}₽</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> </div>
</div> </div>
<div class="afterword"> <div class="afterword">
<p class="afterword">Это подборка лучших вариантов, найденных</p> <p class="afterword">Это подборка лучших вариантов, найденных</p>
@@ -167,6 +150,21 @@
</template> </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> <style scoped>
@import url("@/assets/css/main.css"); @import url("@/assets/css/main.css");
</style> </style>

107
frontend/src/views/ProfileView.vue Normal file
View 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>