中介房源
This commit is contained in:
parent
50baf3f699
commit
231612fe12
6
src/assets/homeImage/intermediaryCode.svg
Normal file
6
src/assets/homeImage/intermediaryCode.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1061 -3458 )">
|
||||
<path d="M 3.63636363636364 14.5454545454545 L 5.45454545454545 14.5454545454545 L 5.45454545454545 16.3636363636364 L 3.63636363636364 16.3636363636364 L 3.63636363636364 14.5454545454545 Z M 3.63636363636364 3.63636363636364 L 5.45454545454545 3.63636363636364 L 5.45454545454545 5.45454545454545 L 3.63636363636364 5.45454545454545 L 3.63636363636364 3.63636363636364 Z M 14.5454545454545 3.63636363636364 L 16.3636363636364 3.63636363636364 L 16.3636363636364 5.45454545454545 L 14.5454545454545 5.45454545454545 L 14.5454545454545 3.63636363636364 Z M 1.81818181818182 12.7272727272727 L 1.81818181818182 18.1676136363636 L 7.27272727272727 18.1676136363636 L 7.27272727272727 12.7272727272727 L 1.81818181818182 12.7272727272727 Z M 1.81818181818182 1.81818181818182 L 1.81818181818182 7.27272727272727 L 7.27272727272727 7.27272727272727 L 7.27272727272727 1.81818181818182 L 1.81818181818182 1.81818181818182 Z M 12.7272727272727 1.81818181818182 L 12.7272727272727 7.27272727272727 L 18.1818181818182 7.27272727272727 L 18.1818181818182 1.81818181818182 L 12.7272727272727 1.81818181818182 Z M 0 10.9090909090909 L 9.09090909090909 10.9090909090909 L 9.09090909090909 20 L 0 20 L 0 10.9090909090909 Z M 14.5454545454545 18.1818181818182 L 16.3636363636364 18.1818181818182 L 16.3636363636364 20 L 14.5454545454545 20 L 14.5454545454545 18.1818181818182 Z M 18.1818181818182 18.1818181818182 L 20 18.1818181818182 L 20 20 L 18.1818181818182 20 L 18.1818181818182 18.1818181818182 Z M 18.1818181818182 10.9090909090909 L 20 10.9090909090909 L 20 16.3636363636364 L 14.5454545454545 16.3636363636364 L 14.5454545454545 14.5454545454545 L 12.7272727272727 14.5454545454545 L 12.7272727272727 20 L 10.9090909090909 20 L 10.9090909090909 10.9090909090909 L 16.3636363636364 10.9090909090909 L 16.3636363636364 12.7272727272727 L 18.1818181818182 12.7272727272727 L 18.1818181818182 10.9090909090909 Z M 0 0 L 9.09090909090909 0 L 9.09090909090909 9.09090909090909 L 0 9.09090909090909 L 0 0 Z M 10.9090909090909 0 L 20 0 L 20 9.09090909090909 L 10.9090909090909 9.09090909090909 L 10.9090909090909 0 Z " fill-rule="nonzero" fill="#438cb0" stroke="none" transform="matrix(1 0 0 1 1061 3458 )" />
|
||||
</g>
|
||||
</svg>
|
||||
6
src/assets/homeImage/intermediaryCorner.svg
Normal file
6
src/assets/homeImage/intermediaryCorner.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="33px" height="32px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -1527 -1077 )">
|
||||
<path d="M 33 8 L 33 32 C 33 14.08 18.9200000000001 0 0.992435082777774 0 L 25 0 C 29.48 0 33 3.51999999999998 33 8 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 1527 1077 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
src/assets/homeImage/intermediaryTabImg.png
Normal file
BIN
src/assets/homeImage/intermediaryTabImg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
BIN
src/assets/homeImage/intermediaryText.png
Normal file
BIN
src/assets/homeImage/intermediaryText.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
@ -18,31 +18,41 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="address-text dis-f al-item">
|
||||
<img src="" class="img" alt="">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="img" alt="">
|
||||
<span>九龙 > 尖沙咀/佐敦</span>
|
||||
</div>
|
||||
<div class="price-text dis-f" style="align-items: end;">
|
||||
<span class="unit">HK$</span>
|
||||
<span class="price">5600</span>
|
||||
<span>/月</span>
|
||||
<span class="time">[123456]</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="img">
|
||||
<img src="" class="img" alt="">
|
||||
<img src="" class="img " alt="">
|
||||
<img src="" class="s-img" alt="" v-if="false">
|
||||
</div>
|
||||
</div>
|
||||
<img src="../../assets/homeImage/corner.svg" class="tab-img" alt="">
|
||||
<img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath==='/personHousing'" alt="">
|
||||
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath==='/intermediaryHousing'" class="tab-img" alt="">
|
||||
</div>
|
||||
<div class="btm-box dis-f al-item">
|
||||
<img src="" class="user-img" alt="">
|
||||
<span class="user-name">123</span>
|
||||
<div class="btn">456456</div>
|
||||
<img src="../../assets/homeImage/intermediaryTabImg.png" class="intermediary-tab-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
//监听路由
|
||||
const route = useRoute()
|
||||
let routePath = ref('')
|
||||
routePath.value = route.path
|
||||
</script>
|
||||
<style scoped>
|
||||
img {
|
||||
@ -123,6 +133,11 @@ img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.s-img {
|
||||
width: 110px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.top-box {
|
||||
padding: 20px;
|
||||
|
||||
@ -180,7 +195,7 @@ img {
|
||||
.img {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -192,6 +207,15 @@ img {
|
||||
color: #555555;
|
||||
margin-top: 15px;
|
||||
|
||||
.time {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
margin-left:15px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
@ -218,6 +242,12 @@ img {
|
||||
padding: 20px;
|
||||
border-top: 1px dashed #d7d7d7;
|
||||
|
||||
.intermediary-tab-img{
|
||||
width:85px;
|
||||
height: 20px;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
.user-img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
||||
@ -39,6 +39,10 @@ const routes = [
|
||||
{//个人房源
|
||||
path:'/personHousing',
|
||||
component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue')
|
||||
},
|
||||
{//中介房源
|
||||
path:'/intermediaryHousing',
|
||||
component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue')
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
62
src/views/housingView/intermediary.vue
Normal file
62
src/views/housingView/intermediary.vue
Normal file
@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<div>
|
||||
<pageTopBar></pageTopBar>
|
||||
<seachModule></seachModule>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="body-maxWidth mg-t-35">
|
||||
<div class="dis-f jus-bet">
|
||||
<div>
|
||||
<biserialItem></biserialItem>
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
|
||||
import seachModule from "../../components/seachModule/seachModule.vue";
|
||||
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
|
||||
</script>
|
||||
<style scoped>
|
||||
img {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.mg-t-35 {
|
||||
margin-top: 35px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user