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
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