条件搜索查询组件
This commit is contained in:
11
src/assets/homeImage/closeIcon.svg
Normal file
11
src/assets/homeImage/closeIcon.svg
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="8px" height="8px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter1115">
|
||||||
|
<feColorMatrix type="matrix" values="1 0 0 0 0.333333333333333 0 1 0 0 0.333333333333333 0 0 1 0 0.333333333333333 0 0 0 1 0 " in="SourceGraphic" />
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -177 -6 )">
|
||||||
|
<image preserveAspectRatio="none" style="overflow:visible" width="8" height="8" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAMAAACdt4HsAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAJBQTFRFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwyGIIwAAAC90Uk5TABNKPQQKSVMVTO/OIjDc4iMx7esMS+Mk7CrMvgHWGB/f2BoZF8sDIFI7Cbw6PCsDqUolAAAAAWJLR0QAiAUdSAAAAAlwSFlzAAAASAAAAEgARslrPgAAAX9JREFUWMPtlttWwjAQRSOFilVpK1i8gHgDFdH5/78zNaRNmzTJmeWjeZp0rb2TQpM5QvzBOBklY5yapKdTVZ1lROcXKH85I8rS3/UlT5QXGF9e1dR8IctrItygeKJE1okqqVoC+785QrdyMr6DDQ1/v6qnRU7YW+j90/pBPdg8Qnto1n961o8gg4OHDE4eMAzw0YZBPtLg4aMMXj7CEOCDhiAfMETwXkMU7zFE8oOGln8RgmEAeKcB4h0GkLcMMN8zMPiOgcXLe7LShv79B++Btb5twPmugcMbvwOtXzl8+/9BXc/F8wwmzzF0edzQ9s/8WGD5wfh+wc5r8XDvtniGwTp/7PzQfL/M/GB8/6z80Dk/jPzQO39wfrDOL5gfHOcfyg/O+wPIDwP3z39+8Bqi+WB+CPKB/BDBu/ID2j+XTect6ulkBvKGYbuTsxG0fzXe9FuUcvKOrm/u4UPW0wzntaHa13U6J/oEedm7t5I/qHrx9b1CeSF25WGPU/b4AazFu1v2/ZorAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDIyLTExLTE0VDE5OjI3OjEzKzA4OjAwWwLoYgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyMi0xMS0xNFQxOToyNzoxMyswODowMCpfUN4AAABJdEVYdHN2ZzpiYXNlLXVyaQBmaWxlOi8vL2hvbWUvYWRtaW4vaWNvbi1mb250L3RtcC9pY29uXzZibmxndG1jdXh0L2d1YW5iaS5zdmeJnhE5AAAAAElFTkSuQmCC" x="177px" y="6px" filter="url(#filter1115)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
src/assets/homeImage/dropDownIcon.svg
Normal file
6
src/assets/homeImage/dropDownIcon.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="10px" height="10px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -279 -10 )">
|
||||||
|
<path d="M 5 7.74739583333333 C 5.11284722222222 7.74739583333333 5.21050347222222 7.70616319444445 5.29296875 7.62369791666667 L 8.24869791666667 4.66796875 C 8.33116319444444 4.58550347222222 8.37239583333333 4.48784722222222 8.37239583333333 4.375 C 8.37239583333333 4.26215277777778 8.33116319444444 4.16449652777778 8.24869791666667 4.08203125 L 7.58463541666667 3.41796875 C 7.50217013888889 3.33550347222222 7.40451388888889 3.29427083333333 7.29166666666667 3.29427083333333 C 7.17881944444445 3.29427083333333 7.08116319444445 3.33550347222222 6.99869791666667 3.41796875 L 5 5.41666666666667 L 3.00130208333333 3.41796875 C 2.91883680555556 3.33550347222222 2.82118055555556 3.29427083333333 2.70833333333333 3.29427083333333 C 2.59548611111111 3.29427083333333 2.49782986111111 3.33550347222222 2.41536458333333 3.41796875 L 1.75130208333333 4.08203125 C 1.66883680555556 4.16449652777778 1.62760416666667 4.26215277777778 1.62760416666667 4.375 C 1.62760416666667 4.48784722222222 1.66883680555556 4.58550347222222 1.75130208333333 4.66796875 L 4.70703125 7.62369791666667 C 4.78949652777778 7.70616319444445 4.88715277777778 7.74739583333333 5 7.74739583333333 Z M 9.32942708333333 2.490234375 C 9.77647569444444 3.25629340277778 10 4.09288194444444 10 5 C 10 5.90711805555556 9.77647569444444 6.74370659722222 9.32942708333333 7.509765625 C 8.88237847222222 8.27582465277778 8.27582465277778 8.88237847222222 7.509765625 9.32942708333333 C 6.74370659722222 9.77647569444444 5.90711805555556 10 5 10 C 4.09288194444444 10 3.25629340277778 9.77647569444444 2.490234375 9.32942708333333 C 1.72417534722222 8.88237847222222 1.11762152777778 8.27582465277778 0.670572916666667 7.509765625 C 0.223524305555556 6.74370659722222 0 5.90711805555556 0 5 C 0 4.09288194444444 0.223524305555556 3.25629340277778 0.670572916666667 2.490234375 C 1.11762152777778 1.72417534722222 1.72417534722222 1.11762152777778 2.490234375 0.670572916666666 C 3.25629340277778 0.223524305555555 4.09288194444444 0 5 0 C 5.90711805555556 0 6.74370659722222 0.223524305555555 7.509765625 0.670572916666666 C 8.27582465277778 1.11762152777778 8.88237847222222 1.72417534722222 9.32942708333333 2.490234375 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 279 10 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
src/assets/homeImage/firstCode.png
Normal file
BIN
src/assets/homeImage/firstCode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
src/assets/homeImage/fourthCode.png
Normal file
BIN
src/assets/homeImage/fourthCode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
11
src/assets/homeImage/informationRightBoxFirst.svg
Normal file
11
src/assets/homeImage/informationRightBoxFirst.svg
Normal file
File diff suppressed because one or more lines are too long
11
src/assets/homeImage/informationRightBoxFourth.svg
Normal file
11
src/assets/homeImage/informationRightBoxFourth.svg
Normal file
File diff suppressed because one or more lines are too long
11
src/assets/homeImage/informationRightBoxSecond.svg
Normal file
11
src/assets/homeImage/informationRightBoxSecond.svg
Normal file
File diff suppressed because one or more lines are too long
11
src/assets/homeImage/informationRightBoxThird.svg
Normal file
11
src/assets/homeImage/informationRightBoxThird.svg
Normal file
File diff suppressed because one or more lines are too long
12
src/assets/homeImage/schoolRegionBg.svg
Normal file
12
src/assets/homeImage/schoolRegionBg.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="459px" height="55px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<mask fill="white" id="clip1117">
|
||||||
|
<path d="M 115.615234375 0.263888888888914 L 120.286986430358 5 L 449 5 C 454.6 5 459 9.40000000000009 459 15 L 459 45 C 459 50.5999999999999 454.6 55 449 55 L 10 55 C 4.40000000000009 55 0 50.5999999999999 0 45 L 0 15 C 0 9.40000000000009 4.40000000000009 5 10 5 L 109.724942028788 5 L 114.384765625 0.263888888888914 C 114.557942708333 0.0879629629630472 114.763020833333 0 115 0 C 115.236979166667 0 115.442057291667 0.0879629629630472 115.615234375 0.263888888888914 Z " fill-rule="evenodd" />
|
||||||
|
</mask>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -750 -4550 )">
|
||||||
|
<path d="M 115.615234375 0.263888888888914 L 120.286986430358 5 L 449 5 C 454.6 5 459 9.40000000000009 459 15 L 459 45 C 459 50.5999999999999 454.6 55 449 55 L 10 55 C 4.40000000000009 55 0 50.5999999999999 0 45 L 0 15 C 0 9.40000000000009 4.40000000000009 5 10 5 L 109.724942028788 5 L 114.384765625 0.263888888888914 C 114.557942708333 0.0879629629630472 114.763020833333 0 115 0 C 115.236979166667 0 115.442057291667 0.0879629629630472 115.615234375 0.263888888888914 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 750 4550 )" />
|
||||||
|
<path d="M 115.615234375 0.263888888888914 L 120.286986430358 5 L 449 5 C 454.6 5 459 9.40000000000009 459 15 L 459 45 C 459 50.5999999999999 454.6 55 449 55 L 10 55 C 4.40000000000009 55 0 50.5999999999999 0 45 L 0 15 C 0 9.40000000000009 4.40000000000009 5 10 5 L 109.724942028788 5 L 114.384765625 0.263888888888914 C 114.557942708333 0.0879629629630472 114.763020833333 0 115 0 C 115.236979166667 0 115.442057291667 0.0879629629630472 115.615234375 0.263888888888914 Z " stroke-width="2" stroke="#ebebeb" fill="none" transform="matrix(1 0 0 1 750 4550 )" mask="url(#clip1117)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
src/assets/homeImage/secondCode.png
Normal file
BIN
src/assets/homeImage/secondCode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 KiB |
BIN
src/assets/homeImage/sortIcon.png
Normal file
BIN
src/assets/homeImage/sortIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
src/assets/homeImage/thirdCode.png
Normal file
BIN
src/assets/homeImage/thirdCode.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
@@ -2,42 +2,30 @@
|
|||||||
<div class="seach-box" :class="{ 'seach-history-h': show }">
|
<div class="seach-box" :class="{ 'seach-history-h': show }">
|
||||||
<div class="seach-info-box">
|
<div class="seach-info-box">
|
||||||
<div class="select-module-box">
|
<div class="select-module-box">
|
||||||
<div class="top-box" @click="checkList.value.splice(0, checkList.value.length)">
|
<div class="top-box" @click="checkList.list.splice(0, checkList.list.length)">
|
||||||
<img src="../../assets/homeImage/topTitleIcon.svg"
|
<img src="../../assets/homeImage/topTitleIcon.svg"
|
||||||
v-show="!checkList.value || (checkList.value && !checkList.value.length)" class="img" alt="">
|
v-show="!checkList.list || (checkList.list && !checkList.list.length)" class="img" alt="">
|
||||||
<div class="none-btn" v-show="(checkList.value && checkList.value.length)"></div>
|
<div class="none-btn" v-show="(checkList.list && checkList.list.length)"></div>
|
||||||
<span :class="[(checkList.value && checkList.value.length) ? 'none-title' : 'title']">不限</span>
|
<span :class="[(checkList.list && checkList.list.length) ? 'none-title' : 'title']">不限</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="padding-top:10px;">
|
<div style="padding-top:10px;">
|
||||||
<el-checkbox-group v-model="checkList.value">
|
<el-checkbox-group v-model="checkList.list">
|
||||||
<el-checkbox label="复选框 A"></el-checkbox>
|
<el-checkbox :label="item.id" v-for="(item, i) in list" :key="i">{{ item.title }}</el-checkbox>
|
||||||
<el-checkbox label="复选框 B"></el-checkbox>
|
|
||||||
<el-checkbox label="复选框 C"></el-checkbox>
|
|
||||||
<el-checkbox label="复选框 D"></el-checkbox>
|
|
||||||
<el-checkbox label="复选框 E"></el-checkbox>
|
|
||||||
<el-checkbox label="复选框 F"></el-checkbox>
|
|
||||||
<el-checkbox label="复选框 G"></el-checkbox>
|
|
||||||
<el-checkbox label="复选框 H"></el-checkbox>
|
|
||||||
<el-checkbox label="复选框 I"></el-checkbox>
|
|
||||||
</el-checkbox-group>
|
</el-checkbox-group>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="seach-check-btn-box">
|
<div class="seach-check-btn-box">
|
||||||
<div class="true-btn seach-btn" @click="selectSeach">选好了</div>
|
<div class="true-btn seach-btn" @click="selectSeach(checkList.list)">选好了</div>
|
||||||
<div class="seach-btn" @click="closeSeach">取消</div>
|
<div class="seach-btn" @click="closeBtn">取消</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { reactive } from 'vue';
|
import { reactive ,ref,watchEffect,watch} from 'vue';
|
||||||
//
|
//props
|
||||||
let checkList = reactive([])
|
const props = defineProps({
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
list: {
|
list: {
|
||||||
type: Array,
|
type: Array,
|
||||||
default: function () {
|
default: function () {
|
||||||
@@ -53,9 +41,44 @@ export default {
|
|||||||
},
|
},
|
||||||
selectSeach: {
|
selectSeach: {
|
||||||
type: Function
|
type: Function
|
||||||
|
},
|
||||||
|
watchData: {
|
||||||
|
type: Function,
|
||||||
|
default:()=>{
|
||||||
|
return ()=>{}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
let list =reactive([])
|
||||||
|
let show =null
|
||||||
|
let closeSeach = props.closeSeach
|
||||||
|
let selectSeach = props.selectSeach
|
||||||
|
let watchData= props.watchData
|
||||||
|
|
||||||
|
//所选选项
|
||||||
|
let checkList = reactive({list:[]})
|
||||||
|
|
||||||
|
//监听刷新
|
||||||
|
watchEffect(() => {
|
||||||
|
show = props.show
|
||||||
|
list.splice(0,list.length)
|
||||||
|
list.push(...props.list)
|
||||||
|
// console.log(show)
|
||||||
|
if(show){
|
||||||
|
checkList.list=[]
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
watch(()=>checkList.list,(nval,avl)=>{
|
||||||
|
watchData(nval)
|
||||||
|
})
|
||||||
|
|
||||||
|
//取消
|
||||||
|
let closeBtn=()=>{
|
||||||
|
checkList.list.splice(0,checkList.list.length)
|
||||||
|
closeSeach()
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.seach-history-h {
|
.seach-history-h {
|
||||||
@@ -64,9 +87,6 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.seach-box {
|
.seach-box {
|
||||||
position: absolute;
|
|
||||||
top: 100px;
|
|
||||||
z-index: 666;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 0;
|
max-height: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@@ -80,9 +100,9 @@ export default {
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: rgba(235, 235, 235, 1);
|
border-color: rgba(235, 235, 235, 1);
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
/* -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196); */
|
||||||
|
|
||||||
.seach-check-btn-box {
|
.seach-check-btn-box {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@@ -168,5 +188,16 @@ export default {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label{
|
||||||
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
|
||||||
|
background:#50e3c2;
|
||||||
|
border-color:#50e3c2;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -8,22 +8,24 @@
|
|||||||
<div class="info-box-bg">
|
<div class="info-box-bg">
|
||||||
<div class="box"
|
<div class="box"
|
||||||
:class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
|
:class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
|
||||||
<div class="btn" v-for="(item, i) in btn" :key="i" :class="{ 'mg-l-15': i % 4 !== 0 }"
|
<div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn" :key="i" :class="[
|
||||||
v-if="seachType === '1'">
|
{ 'btn': seachType === '1' },
|
||||||
{{ item.text }}</div>
|
{ 'mg-l-15': seachType === '1' && i % 4 !== 0 },
|
||||||
|
{ 'seach-long-btn btn': seachType === '2' },
|
||||||
<div class="btn seach-long-btn" :class="{ 'mg-l-15': i % 3 !== 0 }" v-if="seachType === '2'"
|
{ 'mg-l-15': seachType === '2' && i % 3 !== 0 },
|
||||||
v-for="(item, i) in btn" :key="i">{{ item.text }}</div>
|
{ 'select-btn': seachType === '3' },
|
||||||
|
{ 'mg-l-15': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
|
||||||
<div class="select-btn" v-if="seachType === '3'" @click="setSelectType(i + 1)"
|
]">
|
||||||
:class="[{ 'mg-l-15': i + 1 !== 1 }, { 'select-btn-click': i + 1 === selectType }]"
|
|
||||||
v-for="(item, i) in btn" :key="i">
|
|
||||||
{{ item.text }}
|
{{ item.text }}
|
||||||
<img :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
|
<img v-if="seachType === '3'"
|
||||||
|
:src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||||
class="img" alt="">
|
class="img" alt="">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<checkBoxGroup :show="selectType!==''" v-if="seachType === '3'" :selectSeach="selectSeach" :closeSeach="closeSeach"></checkBoxGroup>
|
<div v-if="seachType === '3'" class="hid-box">
|
||||||
|
<checkBoxGroup :show="selectType !== ''" :selectSeach="selectSeach" :closeSeach="closeSeach" :list="selectData.data">
|
||||||
|
</checkBoxGroup>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -33,29 +35,11 @@
|
|||||||
import { reactive, ref } from 'vue';
|
import { reactive, ref } from 'vue';
|
||||||
import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
|
import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
|
||||||
|
|
||||||
let selectType = ref('')
|
const props = defineProps({
|
||||||
//
|
seachType: {
|
||||||
let setSelectType = (num) => {
|
type: String,
|
||||||
if (num === selectType.value) {
|
default: null
|
||||||
selectType.value = ''
|
},
|
||||||
} else {
|
|
||||||
selectType.value = num
|
|
||||||
}
|
|
||||||
}
|
|
||||||
//取消按钮
|
|
||||||
let closeSeach = () => {
|
|
||||||
selectType.value = ''
|
|
||||||
}
|
|
||||||
|
|
||||||
//确认按钮
|
|
||||||
let selectSeach=()=>{
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
props: {
|
|
||||||
title: {
|
title: {
|
||||||
type: String,
|
type: String,
|
||||||
default: '123'
|
default: '123'
|
||||||
@@ -65,13 +49,37 @@ export default {
|
|||||||
default: function () {
|
default: function () {
|
||||||
return []
|
return []
|
||||||
}
|
}
|
||||||
},
|
}
|
||||||
seachType: {
|
})
|
||||||
type: String,
|
|
||||||
default: null
|
let seachType = props.seachType
|
||||||
|
let title = props.title
|
||||||
|
let btn = JSON.parse(JSON.stringify(props.btn))
|
||||||
|
//
|
||||||
|
|
||||||
|
let selectType = ref('')
|
||||||
|
let selectData = reactive({data:[]})
|
||||||
|
//点击选项
|
||||||
|
let setSelectType = (num,data) => {
|
||||||
|
if (seachType == 3) {
|
||||||
|
if (num === selectType.value) {
|
||||||
|
selectType.value = ''
|
||||||
|
} else {
|
||||||
|
selectType.value = num
|
||||||
|
selectData.data=data
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
//取消按钮
|
||||||
|
let closeSeach = () => {
|
||||||
|
selectType.value = ''
|
||||||
|
}
|
||||||
|
|
||||||
|
//确认按钮
|
||||||
|
let selectSeach = (data) => {
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.pad-15 {
|
.pad-15 {
|
||||||
@@ -121,6 +129,13 @@ export default {
|
|||||||
width: 550px;
|
width: 550px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
.hid-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 100px;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 666;
|
||||||
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<div class="s-w-100 seach-box-bg">
|
<div class="s-w-100 seach-box-bg">
|
||||||
<div class="seach-box">
|
<div class="seach-box">
|
||||||
<div class="top-seach dis-f al-item">
|
<div class="top-seach dis-f al-item">
|
||||||
<div style="position: absolute;left: -5px;top: 20px;">
|
<div style="position: absolute;left: -8px;top: 20px;">
|
||||||
<div class="location-box dis-f jus-x al-item">
|
<div class="location-box dis-f jus-x al-item">
|
||||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
||||||
香港
|
香港
|
||||||
@@ -63,9 +63,9 @@
|
|||||||
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
|
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
|
||||||
</div>
|
</div>
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<div class="dis-f">
|
<!-- <div>
|
||||||
<selectTabBox></selectTabBox>
|
<selectTabBox></selectTabBox>
|
||||||
</div>
|
</div> -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -109,9 +109,9 @@ let allHireType = [
|
|||||||
{ text: '四房以上' }
|
{ text: '四房以上' }
|
||||||
]
|
]
|
||||||
let seachArea = [
|
let seachArea = [
|
||||||
{ text: '港岛' },
|
{ text: '港岛',data:[{title:1,id:1},{title:2,id:2},{title:3,id:3},{title:4,id:4}] },
|
||||||
{ text: '九龙' },
|
{ text: '九龙',data:[{title:5,id:5},{title:2,id:2},{title:3,id:3},{title:7,id:7}] },
|
||||||
{ text: '新界' }
|
{ text: '新界',data:[{title:6,id:6},{title:8,id:8},{title:11,id:11},{title:9,id:9}] }
|
||||||
]
|
]
|
||||||
let historyArr = [
|
let historyArr = [
|
||||||
{ title: '有阳台' },
|
{ title: '有阳台' },
|
||||||
@@ -282,13 +282,13 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.triangle {
|
.triangle {
|
||||||
border: 5px solid;
|
border: 7px solid;
|
||||||
border-color: transparent #000 transparent transparent;
|
border-color: transparent #000 transparent transparent;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: -44px;
|
bottom: -47px;
|
||||||
left: -5px;
|
left: -7px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.seach-btn {
|
.seach-btn {
|
||||||
|
|||||||
@@ -1,32 +1,342 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="dis-f s-w-100">
|
<div class="dis-f s-w-100" style="border-bottom:1px solid #ebebeb;">
|
||||||
<div class="select-box s-w-50 bor-r">
|
<div class="select-box s-w-50 bor-r">
|
||||||
<div class="dis-f">
|
<div class="dis-f bor-b-das">
|
||||||
<div class="tab-title">地理位置</div>
|
<div class="tab-title">地理位置</div>
|
||||||
<div class="tab-text">
|
<div class="tab-text">
|
||||||
<div class="dis-f">
|
<div class="dis-f">
|
||||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='region'}" @click="selectPosition='region'">按区域</div>
|
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'region' }"
|
||||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='school'}" @click="selectPosition='school'">按学校</div>
|
@click="selectPosition = 'region'">按区域</div>
|
||||||
|
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': selectPosition === 'school' }"
|
||||||
|
@click="selectPosition = 'school'">按学校</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="select-tab-info">
|
<div class="select-tab-info">
|
||||||
<img src="../../assets/homeImage/checkBG.svg" class="img" alt="">
|
<img :src="selectPosition === 'school' ? require('../../assets/homeImage/schoolRegionBg.svg') : require('../../assets/homeImage/checkBG.svg')"
|
||||||
|
class="img" alt="">
|
||||||
|
<div class="info-box" v-show="selectPosition === 'region'">
|
||||||
|
<div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
|
||||||
|
@click="setSelectData(item.id, item.data, item.title)" v-for="(item, i) in list" :key="i">
|
||||||
|
<div class="dis-f al-item">{{ item.title }} <div class="dis-f al-item"
|
||||||
|
v-show="selectTabCheck.id === item.id && selectTabCheck.id">  >  
|
||||||
|
<div :class="{ 'check-data': selectData.data && selectData.data.length > 0 }">
|
||||||
|
{{
|
||||||
|
selectData.data && selectData.data.length === 0 ? '不限' :
|
||||||
|
selectData.data && selectData.data.length
|
||||||
|
}}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div></div>
|
<img src="../../assets/homeImage/selectInfoTabIcon.svg"
|
||||||
<div></div>
|
v-show="selectTabCheck.id !== item.id" class="img" alt="">
|
||||||
|
<img src="../../assets/homeImage/selectImg.svg" v-show="selectTabCheck.id === item.id"
|
||||||
|
class="img" alt="">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div class="hid-box">
|
||||||
|
<checkBoxGroup :show="showSelect && selectTabCheck.id !== ''" :selectSeach="selectSeach"
|
||||||
|
:closeSeach="closeSeach" :list="selectTabCheck.data" :watchData="watchData">
|
||||||
|
</checkBoxGroup>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="school-info-box" v-show="selectPosition === 'school'">
|
||||||
|
<div class="lef-btn" @click="prevSchoolData">
|
||||||
|
<img :src="schoolPages === 0 ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||||
|
class="img" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="right-btn" @click="nextSchoolData">
|
||||||
|
<img :src="schoolPages === shcoolData.length ? require('../../assets/homeImage/selectInfoTabIcon.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||||
|
class="img" alt="">
|
||||||
|
</div>
|
||||||
|
<el-carousel :autoplay="false" arrow="never" :loop="false" height="50px"
|
||||||
|
indicator-position="none" class="s-w-100" ref="schoolData">
|
||||||
|
<el-carousel-item v-for="(item, i) in shcoolData" :key="i">
|
||||||
|
<div class="school-carousel-box">
|
||||||
|
<div v-for="(items, i) in item" :key="items" @click="setSchoolObj(items)"
|
||||||
|
class="carousel-info-box"
|
||||||
|
:class="[{ 'info-box-check': schoolSelectObj.title === items.title }, { 'mg-r-15': (i + 1) % 9 !== 0 }]">
|
||||||
|
{{ items.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dis-f pad-t-b-15 bor-b-das">
|
||||||
|
<div class="tab-title">出租方式</div>
|
||||||
|
<div class="tab-text dis-f al-item" style="padding-bottom:0;">
|
||||||
|
<div class="dis-f" v-for="(item, i) in hireTypeArr" :key="i">
|
||||||
|
<div v-if="item.title !== '不限'">
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<span class="dropdown-btn jus-x dis-f al-item"
|
||||||
|
:class="{ 'btn-check': hireTypeObj.hireId === item.title }"
|
||||||
|
@click="setHireId(item.title)">
|
||||||
|
{{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> > {{
|
||||||
|
hireTypeObj.title || '不限' }}</span>
|
||||||
|
<img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
|
||||||
|
class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt="">
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu class="pd-10 el-dropdown-menu">
|
||||||
|
<el-dropdown-item v-for="(items, j) in item.hireType" :key="j">
|
||||||
|
<div class="dropdown-text" @click="dropdownCommand(items)"
|
||||||
|
:class="{ 'dropdown-check-text': hireTypeObj.id === items.id }">{{
|
||||||
|
items.title
|
||||||
|
}}
|
||||||
|
<div class="type-icon" v-show="hireTypeObj.id === items.id"></div>
|
||||||
|
</div>
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="btn jus-x al-item dis-f" :class="{ 'btn-check': hireTypeObj.hireId === item.title }"
|
||||||
|
v-if="item.title === '不限'" @click="setHireId(item.title)">{{
|
||||||
|
item.title }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dis-f al-item" style="padding:25px 0;">
|
||||||
|
<div class="tab-title">租金</div>
|
||||||
|
<div class="dis-f al-item rent-box">
|
||||||
|
<input type="text" class="input" v-model="rentObj.min">
|
||||||
|
<span class="tab-icon">~</span>
|
||||||
|
<input type="text" class="input" v-model="rentObj.max">
|
||||||
|
<span class="unit-box">HK$/月</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="select-box s-w-50 bor-r">
|
||||||
|
<div class="dis-f bor-b-das">
|
||||||
|
<div class="tab-title">租期</div>
|
||||||
|
<div class="select-btn-box">
|
||||||
|
<div class="dis-f">
|
||||||
|
<div class="btn jus-x al-item dis-f" v-for="(item, i) in hireData" :key="i"
|
||||||
|
:class="{ 'btn-check': hireDate.id === item.id }" @click="hireDate.id = item.id">{{ item.title
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dis-f bor-b-das pd-t-20">
|
||||||
|
<div class="tab-title">性别</div>
|
||||||
|
<div class="select-btn-box">
|
||||||
|
<div class="dis-f">
|
||||||
|
<div class="btn jus-x al-item dis-f" v-for="(item, i) in genderData" :key="i"
|
||||||
|
:class="{ 'btn-check': gender.id === item.id }" @click="gender.id = item.id">{{ item.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dis-f bor-b-das pd-t-20">
|
||||||
|
<div class="tab-title">发布时间</div>
|
||||||
|
<div class="select-btn-box">
|
||||||
|
<div class="dis-f">
|
||||||
|
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in releaseTime" :key="i"
|
||||||
|
:class="{ 'btn-check': releaseObj.id === item.id }" @click="releaseObj.id = item.id">{{
|
||||||
|
item.title }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="dis-f pd-t-20">
|
||||||
|
<div class="tab-title">其他</div>
|
||||||
|
<div class="select-btn-box">
|
||||||
|
<div class="dis-f">
|
||||||
|
<div class="dropdown-btn min-btn jus-x al-item dis-f" v-for="(item, i) in otherData" :key="i">
|
||||||
|
<el-checkbox-group v-model="otherCheck.list">
|
||||||
|
<el-checkbox :label="item.id">{{ item.title }}</el-checkbox>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="btm-list">
|
||||||
|
<div class="dis-f al-item">
|
||||||
|
共<span class="count">123</span>条个人房源 <span v-show="selectTabCheck.title">   |  </span>
|
||||||
|
<div class="dis-f al-item">
|
||||||
|
<div v-show="selectTabCheck.title">{{ selectTabCheck.title }}:</div>
|
||||||
|
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
|
||||||
|
{{ item.title }}
|
||||||
|
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i)" class="img" alt="">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span class="dis-f al-item sort-text">
|
||||||
|
最新发布
|
||||||
|
<img class="img" src="../../assets/homeImage/sortIcon.png" alt="">
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref } from 'vue';
|
import { reactive, ref, getCurrentInstance } from 'vue';
|
||||||
|
import checkBoxGroup from "../../components/checkGroup/checkBoxGroup.vue";
|
||||||
|
|
||||||
|
const { proxy } = getCurrentInstance()
|
||||||
|
|
||||||
|
let list = [{
|
||||||
|
title: '不限',
|
||||||
|
id: ''
|
||||||
|
}, {
|
||||||
|
title: '港岛',
|
||||||
|
id: 1,
|
||||||
|
data: [{
|
||||||
|
title: '上环',
|
||||||
|
id: 1
|
||||||
|
}, {
|
||||||
|
title: '铜锣湾',
|
||||||
|
id: 2
|
||||||
|
}, {
|
||||||
|
title: '天后',
|
||||||
|
id: 3
|
||||||
|
}, {
|
||||||
|
title: '北角',
|
||||||
|
id: 4
|
||||||
|
}]
|
||||||
|
}, {
|
||||||
|
title: '九龙',
|
||||||
|
id: 2,
|
||||||
|
data:[{
|
||||||
|
title:'1',
|
||||||
|
id:'1'
|
||||||
|
},{
|
||||||
|
title:'2',
|
||||||
|
id:'2'
|
||||||
|
},{
|
||||||
|
title:'3',
|
||||||
|
id:'3'
|
||||||
|
}]
|
||||||
|
}]
|
||||||
|
//按区域/学校选择的地区
|
||||||
|
let selectData = reactive({ data: [] })
|
||||||
|
let selectTabCheck = reactive({
|
||||||
|
id: '',
|
||||||
|
title: '',
|
||||||
|
data: []
|
||||||
|
})
|
||||||
|
//区域状态
|
||||||
let selectPosition = ref('region')
|
let selectPosition = ref('region')
|
||||||
|
let showSelect = ref(false)
|
||||||
|
|
||||||
|
//学校区域状态
|
||||||
|
let schoolSelectObj = reactive({ id: '', title: '不限' })
|
||||||
|
let schoolPages = ref(0) //页数
|
||||||
|
let shcoolData = [{ title: '不限' }, { title: '港大' }, { title: '科大' }, { title: '中大' }, { title: '城大' }, { title: '理工' }, { title: '浸会' }, { title: '教大' }, { title: '岭南' }, { title: '123' }, { title: '123' },]
|
||||||
|
let setSchoolData = () => {
|
||||||
|
let arr = []
|
||||||
|
let num = 0
|
||||||
|
for (let i = 0; i < shcoolData.length; i++) {
|
||||||
|
if (!arr[num]) {
|
||||||
|
arr[num] = []
|
||||||
|
}
|
||||||
|
if (arr[num].length < 9) arr[num].push(shcoolData[i])
|
||||||
|
|
||||||
|
if (arr[num].length === 9) {
|
||||||
|
num++
|
||||||
|
}
|
||||||
|
}
|
||||||
|
shcoolData = arr
|
||||||
|
}
|
||||||
|
setSchoolData()
|
||||||
|
//选择学校区域属性
|
||||||
|
let setSchoolObj = (obj) => {
|
||||||
|
schoolSelectObj.id = obj.id
|
||||||
|
schoolSelectObj.title = obj.title
|
||||||
|
console.log(schoolSelectObj)
|
||||||
|
}
|
||||||
|
|
||||||
|
//学校轮播组件
|
||||||
|
let prevSchoolData = () => {
|
||||||
|
const schoolData = proxy.$refs.schoolData
|
||||||
|
schoolPages.value--
|
||||||
|
schoolData.prev()
|
||||||
|
}
|
||||||
|
|
||||||
|
let nextSchoolData = () => {
|
||||||
|
const schoolData = proxy.$refs.schoolData
|
||||||
|
schoolPages.value++
|
||||||
|
schoolData.next()
|
||||||
|
}
|
||||||
|
|
||||||
|
//点击区域/学校选项
|
||||||
|
let setSelectData = (id, data = [], title) => {
|
||||||
|
selectTabCheck.id = id;
|
||||||
|
selectTabCheck.title = title
|
||||||
|
selectTabCheck.data = data;
|
||||||
|
selectData.data=[]
|
||||||
|
showSelect.value = true
|
||||||
|
}
|
||||||
|
//取消按钮
|
||||||
|
let closeSeach = () => {
|
||||||
|
selectTabCheck.id = ''
|
||||||
|
selectData.data = []
|
||||||
|
showSelect.value = false
|
||||||
|
}
|
||||||
|
//确认按钮
|
||||||
|
let selectSeach = (data = []) => {
|
||||||
|
let arr = []
|
||||||
|
data.map(res => {
|
||||||
|
selectTabCheck.data.map(item => {
|
||||||
|
if (res === item.id) {
|
||||||
|
arr.push(item)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
selectData.data = arr
|
||||||
|
showSelect.value = false
|
||||||
|
}
|
||||||
|
//监听选项
|
||||||
|
let watchData = (data) => {
|
||||||
|
// selectData.data = data
|
||||||
|
// console.log(selectData)
|
||||||
|
}
|
||||||
|
//底部删除按钮
|
||||||
|
let deleteSelect = (id)=>{
|
||||||
|
console.log(id)
|
||||||
|
selectData.data.splice(id,1)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//出租方式
|
||||||
|
let hireTypeArr = reactive([
|
||||||
|
{ hireType: [], title: '不限' },
|
||||||
|
{ hireType: [{ id: '', title: '不限' }, { id: '1', title: '独卫套房' }, { id: '2', title: '房间' },], title: '合租' },
|
||||||
|
{ hireType: [{ id: '', title: '不限' }, { id: '3', title: '3' }, { id: '4', title: '3' },], title: '整租' }])
|
||||||
|
let hireTypeObj = reactive({ id: '', title: '', hireId: '不限' })//出租方式所选
|
||||||
|
|
||||||
|
let setHireId = (title) => {
|
||||||
|
hireTypeObj.hireId = title
|
||||||
|
hireTypeObj.id=''
|
||||||
|
hireTypeObj.title=''
|
||||||
|
}
|
||||||
|
|
||||||
|
let dropdownCommand = (obj) => {
|
||||||
|
hireTypeObj.id = obj.id
|
||||||
|
hireTypeObj.title = obj.title
|
||||||
|
}
|
||||||
|
|
||||||
|
//租金
|
||||||
|
let rentObj = reactive({ min: '', max: '' })
|
||||||
|
|
||||||
|
//租期
|
||||||
|
let hireData = reactive([{ title: '不限', id: '' }, { title: '一年以上', id: 1 }, { title: '低于一年', id: 2 }])
|
||||||
|
let hireDate = reactive({ id: '', title: '' })
|
||||||
|
|
||||||
|
//性别
|
||||||
|
let genderData = reactive([{ title: '不限', id: '' }, { title: '女', id: 1 }, { title: '男', id: 2 }])
|
||||||
|
let gender = reactive({ id: '' })
|
||||||
|
|
||||||
|
//发布时间
|
||||||
|
let releaseTime = reactive([{ title: '不限', id: '' }, { title: '三天', id: 1 }, { title: '一周', id: 2 }, { title: '一个月内', id: 3 }, { title: '两个月内', id: 4 }, { title: '三个月内', id: 5 }])
|
||||||
|
let releaseObj = reactive({ id: '' })
|
||||||
|
|
||||||
|
//其他
|
||||||
|
let otherData = reactive([{ title: '认证房源', id: '' }, { title: '有电梯', id: 1 }, { title: '有阳台', id: 2 }])
|
||||||
|
let otherCheck = reactive({ list: [] })
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
@@ -39,9 +349,11 @@ export default {
|
|||||||
.dis-f {
|
.dis-f {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.jus-x {
|
.jus-x {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.al-item {
|
.al-item {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
@@ -57,17 +369,229 @@ export default {
|
|||||||
.s-w-50 {
|
.s-w-50 {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.select-box {
|
.pad-t-b-15 {
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pd-10 {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bor-b-das {
|
||||||
|
border-bottom: 1px dashed #ebebeb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-text {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7F7F7F;
|
||||||
|
text-align: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 20px;
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.type-icon {
|
||||||
|
width: 6px;
|
||||||
|
height: 14px;
|
||||||
|
background: inherit;
|
||||||
|
background-color: rgba(80, 227, 194, 1);
|
||||||
|
border: none;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-dropdown-menu {
|
||||||
|
width: 150px;
|
||||||
|
background: inherit;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(235, 235, 235, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
|
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-check-text {
|
||||||
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-box {
|
||||||
|
padding: 20px 24px 0px 25px;
|
||||||
|
|
||||||
.select-tab-info {
|
.select-tab-info {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
|
||||||
|
.school-info-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 5px 0px;
|
||||||
|
|
||||||
|
.school-carousel-box {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.mg-r-15 {
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.carousel-info-box {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7F7F7F;
|
||||||
|
line-height: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box-check {
|
||||||
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lef-btn {
|
||||||
|
width: 30px;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
border-right: 1px dashed #ebebeb;
|
||||||
|
border-left: 1px solid #ebebeb;
|
||||||
|
border-top: 1px solid #ebebeb;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 10px 0 0 10px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
z-index: 66;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-btn {
|
||||||
|
border-left: 1px dashed #ebebeb;
|
||||||
|
border-right: 1px solid #ebebeb;
|
||||||
|
border-top: 1px solid #ebebeb;
|
||||||
|
border-bottom: 1px solid #ebebeb;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 0 10px 10px 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 30px;
|
||||||
|
height: 50px;
|
||||||
|
z-index: 66;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-box {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 50px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
.hid-box {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 666;
|
||||||
|
left: 0;
|
||||||
|
top: 56px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-text {
|
||||||
|
font-family: 'ArialMT', 'Arial', sans-serif;
|
||||||
|
font-weight: 600 !important;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 13px;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: #000 !important;
|
||||||
|
vertical-align: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.check-none {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7F7F7F;
|
||||||
|
line-height: 20px;
|
||||||
|
vertical-align: none;
|
||||||
|
text-align: center;
|
||||||
|
line-height: normal;
|
||||||
|
text-transform: none;
|
||||||
|
margin-right: 30px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.check-data {
|
||||||
|
width: 24px;
|
||||||
|
height: 16px;
|
||||||
|
background: inherit;
|
||||||
|
background-color: rgba(0, 0, 0, 1);
|
||||||
|
border: none;
|
||||||
|
border-radius: 13px;
|
||||||
|
-moz-box-shadow: none;
|
||||||
|
-webkit-box-shadow: none;
|
||||||
|
box-shadow: none;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 16px;
|
||||||
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 459px;
|
width: 459px;
|
||||||
height: 55px;
|
height: 55px;
|
||||||
@@ -84,11 +608,13 @@ img{
|
|||||||
height: 30px;
|
height: 30px;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
margin-right: 35px;
|
margin-right: 35px;
|
||||||
|
width: 60px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.info-bor-b {
|
.info-bor-b {
|
||||||
border-bottom: 1px dashed #ebebeb;
|
border-bottom: 1px dashed #ebebeb;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-text {
|
.tab-text {
|
||||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@@ -96,10 +622,25 @@ img{
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #7F7F7F;
|
color: #7F7F7F;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding-bottom:10px;
|
padding-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pd-t-20 {
|
||||||
|
padding-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-btn-box {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #7F7F7F;
|
||||||
|
text-align: center;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
width: 70px;
|
padding: 5px 10px;
|
||||||
height: 30px;
|
height: 30px;
|
||||||
display: flex;
|
display: flex;
|
||||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
@@ -109,14 +650,138 @@ img{
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 30px;
|
line-height: 30px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
margin-right:30px;
|
margin-right: 10px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-btn {
|
||||||
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 30px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-right: 10px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 5px 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.mg-l-30 {
|
||||||
|
margin-left: 30px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-btn {
|
||||||
|
padding: 5px 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-check {
|
.btn-check {
|
||||||
color: #50E3C2;
|
color: #50E3C2;
|
||||||
border: 1px solid #50E3C2;
|
border: 1px solid #50E3C2;
|
||||||
|
background: #eefcf9;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rent-box {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #555555;
|
||||||
|
|
||||||
|
.tab-icon {
|
||||||
|
margin: 0 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unit-box {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
background: inherit;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(179, 179, 179, 1);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btm-list {
|
||||||
|
padding: 25px 20px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #555555;
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
.btm-btn {
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #50e3c2;
|
||||||
|
margin-left:10px;
|
||||||
|
.img{
|
||||||
|
width:8px;
|
||||||
|
height:8px;
|
||||||
|
margin-left:8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
font-family: 'Arial-BoldMT', 'Arial Bold', 'Arial', sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #000000;
|
||||||
|
margin: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sort-text {
|
||||||
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-dropdown-menu__item {
|
||||||
|
--el-dropdown-menuItem-hover-color: #7F7F7F;
|
||||||
|
--el-dropdown-menuItem-hover-fill: rgba(246, 246, 246, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||||
|
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||||
|
background: #50e3c2;
|
||||||
|
border-color: #50e3c2;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<pageTopBar></pageTopBar>
|
<!-- <pageTopBar></pageTopBar> -->
|
||||||
|
<header></header>
|
||||||
<!-- 搜索模块 -->
|
<!-- 搜索模块 -->
|
||||||
<seachModule></seachModule>
|
<seachModule></seachModule>
|
||||||
<!-- 房源展示 -->
|
<!-- 房源展示 -->
|
||||||
@@ -51,29 +52,41 @@
|
|||||||
<div class="information-right-box dis-f jus-bet">
|
<div class="information-right-box dis-f jus-bet">
|
||||||
<div class="dis-f jus-bet al-item">
|
<div class="dis-f jus-bet al-item">
|
||||||
<div class="img-box pos-r">
|
<div class="img-box pos-r">
|
||||||
<img src="" class="img-box" alt="">
|
<img src="../assets/homeImage/informationRightBoxFirst.svg" class="img-box" alt="">
|
||||||
<div class="img-list">
|
<div class="img-list">
|
||||||
<img src="../assets/homeImage/informationO.png" class="img" alt="">
|
<img src="../assets/homeImage/firstCode.png" class="img" alt="">
|
||||||
|
<div>
|
||||||
|
微信扫码关注
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="img-box pos-r">
|
<div class="img-box pos-r">
|
||||||
<img src="" class="img-box" alt="">
|
<img src="../assets/homeImage/informationRightBoxSecond.svg" class="img-box" alt="">
|
||||||
<div class="img-list">
|
<div class="img-list">
|
||||||
<img src="../assets/homeImage/informationT.png" class="img" alt="">
|
<img src="../assets/homeImage/secondCode.png" class="img" alt="">
|
||||||
|
<div>
|
||||||
|
微信扫码关注
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="dis-f jus-bet al-item">
|
<div class="dis-f jus-bet al-item">
|
||||||
<div class="img-box pos-r">
|
<div class="img-box pos-r">
|
||||||
<img src="" class="img-box" alt="">
|
<img src="../assets/homeImage/informationRightBoxThird.svg" class="img-box" alt="">
|
||||||
<div class="img-list">
|
<div class="img-list">
|
||||||
<img src="../assets/homeImage/informationO.png" class="img" alt="">
|
<img src="../assets/homeImage/thirdCode.png" class="img" alt="">
|
||||||
|
<div>
|
||||||
|
微信扫码关注
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="img-box pos-r">
|
<div class="img-box pos-r">
|
||||||
<img src="" class="img-box" alt="">
|
<img src="../assets/homeImage/informationRightBoxFourth.svg" class="img-box" alt="">
|
||||||
<div class="img-list">
|
<div class="img-list">
|
||||||
<img src="../assets/homeImage/informationT.png" class="img" alt="">
|
<img src="../assets/homeImage/fourthCode.png" class="img" alt="">
|
||||||
|
<div>
|
||||||
|
微信扫码关注
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -157,7 +170,8 @@ import listItem from "../components/apartmentList/apartmentList.vue";
|
|||||||
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
||||||
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
|
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
|
||||||
import seachModule from "../components/seachModule/seachModule.vue";
|
import seachModule from "../components/seachModule/seachModule.vue";
|
||||||
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue'
|
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
|
||||||
|
import header from '../components/public/head.vue'
|
||||||
|
|
||||||
//
|
//
|
||||||
let informationData = [
|
let informationData = [
|
||||||
@@ -324,8 +338,6 @@ img {
|
|||||||
background-color: rgba(255, 255, 255, 0);
|
background-color: rgba(255, 255, 255, 0);
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-list {
|
.img-list {
|
||||||
width: 149px;
|
width: 149px;
|
||||||
@@ -334,16 +346,28 @@ img {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
background: #fff;
|
||||||
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 24px;
|
||||||
|
display: none;
|
||||||
|
padding-top:30px;
|
||||||
|
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 149px;
|
width: 110px;
|
||||||
height: 200px;
|
height: 110px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-box:hover .img {
|
.img-box:hover .img-list {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -498,4 +522,5 @@ img {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #7F7F7F;
|
color: #7F7F7F;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}</style>
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user