样式修改
This commit is contained in:
@@ -30,7 +30,10 @@
|
||||
:class="{ 'select-top-btn-bg': tabType === 'person' }">
|
||||
<div class="top-btn" :class="[tabType === 'person' ? 'select-top-btn' : 'first-no-select']"
|
||||
v-show="tabType === 'person'">
|
||||
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
|
||||
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
|
||||
<div class="dis-f jus-x btm-line-mg">
|
||||
<div class="btm-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
个人房源 {{ seachKey.key && seachKey.key.personal && seachKey.key.personal.count }}
|
||||
<div class="second-select" v-show="tabType === 'intermediary'">
|
||||
@@ -44,6 +47,9 @@
|
||||
<div class="top-btn" :class="[tabType === 'need' ? 'select-top-btn' : 'first-no-select']"
|
||||
v-show="tabType === 'need'">
|
||||
求房源
|
||||
<div class="dis-f jus-x btm-line-mg">
|
||||
<div class="btm-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
求房源{{ tabType }}
|
||||
</div>
|
||||
@@ -70,6 +76,9 @@
|
||||
<div class="top-btn" :class="[tabType === 'intermediary' ? 'select-top-btn' : 'first-no-select']"
|
||||
v-show="tabType === 'intermediary'">
|
||||
中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
|
||||
<div class="dis-f jus-x btm-line-mg">
|
||||
<div class="btm-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
中介房源 {{ seachKey.key && seachKey.key.intermediary && seachKey.key.intermediary.count }}
|
||||
</div>
|
||||
@@ -84,6 +93,9 @@
|
||||
<div class="top-btn" :class="[tabType === 'apartment' ? 'select-top-btn' : 'first-no-select']"
|
||||
v-show="tabType === 'apartment'">
|
||||
品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
|
||||
<div class="dis-f jus-x btm-line-mg">
|
||||
<div class="btm-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
品牌公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
|
||||
</div>
|
||||
@@ -102,7 +114,8 @@
|
||||
<div class="seach-select-info" v-show="tabType !== 'apartment'">
|
||||
<div class="select-box" :class="{ 'seach-select-h': showSelectModule }"
|
||||
:style="{ 'overflow': showSelectModule ? 'visible' : 'hidden' }">
|
||||
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation" ref="selectTabBoxInfo"></selectTabBox>
|
||||
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"
|
||||
ref="selectTabBoxInfo"></selectTabBox>
|
||||
</div>
|
||||
<div :class="{ 'show-box-pd': !showSelectModule }">
|
||||
<div class="box" :class="{ 'show-box': showSelectModule }">
|
||||
@@ -307,9 +320,9 @@ let setSeachVal = () => {
|
||||
}
|
||||
|
||||
//设置点击一级区域
|
||||
let setLocation=(type,data)=>{
|
||||
let setLocation = (type, data) => {
|
||||
seachAllType[type] = data
|
||||
seachAllType['school']=''
|
||||
seachAllType['school'] = ''
|
||||
}
|
||||
|
||||
//设置搜索数据
|
||||
@@ -341,7 +354,7 @@ let setSeachConditions = (type, data) => {
|
||||
|
||||
if (tabType.value != 'need') {
|
||||
setSeachVal()
|
||||
}else if(tabType.value=='need'){
|
||||
} else if (tabType.value == 'need') {
|
||||
seachVal.value = seachAllType.keyword
|
||||
}
|
||||
|
||||
@@ -601,6 +614,18 @@ img {
|
||||
font-size: 17px;
|
||||
color: #FFFFFF;
|
||||
|
||||
.btm-line {
|
||||
height: 4px;
|
||||
width:102px;
|
||||
background: inherit;
|
||||
background-color: rgba(253, 223, 109, 1);
|
||||
border: none;
|
||||
border-radius: 53px;
|
||||
}
|
||||
.btm-line-mg{
|
||||
margin-top:-5px;
|
||||
}
|
||||
|
||||
.select-top-bos-show {
|
||||
-moz-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
||||
-webkit-box-shadow: -3px -4px 4px rgba(0, 0, 0, 0.07647058823529) !important;
|
||||
@@ -620,7 +645,7 @@ img {
|
||||
.select-top-btn {
|
||||
height: 45px;
|
||||
width: 180px !important;
|
||||
line-height: 50px;
|
||||
line-height: 45px;
|
||||
background: #fff !important;
|
||||
border-radius: 16px 16px 0 0;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
@@ -760,6 +785,7 @@ img {
|
||||
position: absolute;
|
||||
border-radius: 16px 16px 0 0;
|
||||
cursor: pointer;
|
||||
line-height:45px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -137,9 +137,9 @@
|
||||
<div class="tab-title">{{ routePath === '/needHousing'||routeQuery.data && routeQuery.data.houseingPageType === '6' ? '租金预算' : '租金' }}</div>
|
||||
<div class="dis-f al-item rent-box jus-bet">
|
||||
<div class="dis-f al-item">
|
||||
<input type="text" class="input" v-model="rentObj.min" @blur="setRent">
|
||||
<input type="number" class="input" v-model="rentObj.min" @blur="setRent">
|
||||
<span class="tab-icon">~</span>
|
||||
<input type="text" class="input" v-model="rentObj.max" @blur="setRent">
|
||||
<input type="number" class="input" v-model="rentObj.max" @blur="setRent">
|
||||
<span class="unit-box">HK$/月</span>
|
||||
</div>
|
||||
<div class="clean-btn dis-f al-item jus-x" v-show="rentObj.min || rentObj.max" @click="cleanRent">
|
||||
@@ -221,15 +221,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<span class="dis-f al-item sort-text">
|
||||
<el-dropdown trigger="click">
|
||||
<el-dropdown trigger="click" @command="listSortCheck">
|
||||
<span class="dis-f al-item sort-text">
|
||||
{{ listSort.check }}<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu class="pd-10 el-dropdown-menu">
|
||||
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j">
|
||||
<el-dropdown-item v-for="(items, j) in listSort.type" :key="j" :command="j">
|
||||
<div class="dropdown-text" :class="{ 'dropdown-check-text': listSort.checkType === items.type }"
|
||||
@click="listSortCheck(items)">{{
|
||||
>{{
|
||||
items.title
|
||||
}}
|
||||
<div class="type-icon" v-show="listSort.checkType === items.type"></div>
|
||||
@@ -243,7 +243,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick } from 'vue';
|
||||
import { reactive, ref, getCurrentInstance, defineProps, watchEffect, inject, shallowReactive, defineExpose, nextTick,watch } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
|
||||
import store from '../../store/index';
|
||||
@@ -385,7 +385,6 @@ let setSelectPosition = (type) => {
|
||||
//点击区域/学校选项
|
||||
let clearSelectTabCheck = ref(true)
|
||||
let setSelectData = (id, data = [], title) => {
|
||||
console.log(data)
|
||||
showSelect.value = true
|
||||
if (id === selectTabCheck.id) {
|
||||
clearSelectTabCheck.value = false
|
||||
@@ -464,9 +463,10 @@ let deleteSelect = (i, id) => {
|
||||
|
||||
//搜索列表排序
|
||||
let listSortCheck = (item) => {
|
||||
listSort.checkType = item.type
|
||||
listSort.check = item.title
|
||||
setSeachCondition('orderby', item.type)
|
||||
let obj= listSort.type[item]
|
||||
listSort.checkType = obj.type
|
||||
listSort.check = obj.title
|
||||
setSeachCondition('orderby', obj.type)
|
||||
}
|
||||
|
||||
|
||||
@@ -1170,6 +1170,7 @@ img {
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-top:1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -25,7 +25,8 @@ import {
|
||||
ElBreadcrumb,
|
||||
ElAffix,
|
||||
ElConfigProvider,
|
||||
ElProgress
|
||||
ElProgress,
|
||||
ElScrollbar
|
||||
// 其他需要的组件
|
||||
} from 'element-plus'
|
||||
|
||||
@@ -71,6 +72,7 @@ app.use(ElAffix)
|
||||
app.use(ElProgress)
|
||||
|
||||
app.use(ElConfigProvider)
|
||||
app.use(ElScrollbar)
|
||||
|
||||
app.use(lazyPlugin)
|
||||
|
||||
|
||||
@@ -481,36 +481,39 @@
|
||||
<img src="../assets/img/detail/close.png" class="close-icon"
|
||||
@click="showDistance = false" alt="">
|
||||
</div>
|
||||
<div class="distance-box-s" v-if="distanceList.length > 0">
|
||||
<el-scrollbar v-if="distanceList.length > 0" height="500px">
|
||||
<div class="distance-info-data dis-f">
|
||||
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
|
||||
:key="index" :class="{ 'mg-t-50': index > 0 }">
|
||||
<div class="icon-box dis-f al-item jus-x"
|
||||
:class="{ 'home-icon': item && item.address }">
|
||||
<div class="line" v-show="index > 0"></div>
|
||||
<img src="../assets/img/detail/school.png" class="icon"
|
||||
v-show="item && !item.address" alt="">
|
||||
<img src="../assets/img/detail/home.png" class="icon"
|
||||
v-show="item && item.address" alt="">
|
||||
</div>
|
||||
<div style="width:200px">
|
||||
{{ item && item.name }}
|
||||
</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;width:480px">
|
||||
<div v-for="(items, i) in item && item.point" :key="i">
|
||||
<span class="address-info">
|
||||
{{ items.title }}
|
||||
</span>
|
||||
<span v-html="setDistanceList(items && `${items.distance}`)">
|
||||
</span>
|
||||
<!-- <span class="distance-text">
|
||||
<div class="dis-f al-item school-info" v-for="(item, index) in distanceList"
|
||||
:key="index" :class="{ 'mg-t-50': index > 0 }">
|
||||
<div class="icon-box dis-f al-item jus-x"
|
||||
:class="{ 'home-icon': item && item.address }">
|
||||
<div class="line" v-show="index > 0"></div>
|
||||
<img src="../assets/img/detail/school.png" class="icon"
|
||||
v-show="item && !item.address" alt="">
|
||||
<img src="../assets/img/detail/home.png" class="icon"
|
||||
v-show="item && item.address" alt="">
|
||||
</div>
|
||||
<div style="width:200px">
|
||||
{{ item && item.name }}
|
||||
</div>
|
||||
<div class="dis-f" style="flex-wrap: wrap;width:480px">
|
||||
<div v-for="(items, i) in item && item.point" :key="i">
|
||||
<span class="address-info">
|
||||
{{ items.title }}
|
||||
</span>
|
||||
<span v-html="setDistanceList(items && `${items.distance}`)">
|
||||
</span>
|
||||
<!-- <span class="distance-text">
|
||||
1.1公里
|
||||
</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="distance-box-s">
|
||||
|
||||
</div> -->
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="distance-box dis-f jus-bet">
|
||||
<div class="dis-f al-item" style="position:relative;" @click="setShowDistance">
|
||||
@@ -2766,12 +2769,12 @@ img {
|
||||
|
||||
.distance-box-s {
|
||||
height: 500px;
|
||||
overflow-y: scroll;
|
||||
// overflow-y: scroll;
|
||||
}
|
||||
|
||||
.distance-box-s ::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
// .distance-box-s ::-webkit-scrollbar {
|
||||
// width: 8px;
|
||||
// }
|
||||
|
||||
.distance-info-data {
|
||||
padding: 30px 45px 0 45px;
|
||||
@@ -2861,7 +2864,7 @@ img {
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user