XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

筛选 虚线优化

Browse Source
This commit is contained in:
luJianJun
2023-08-03 18:51:24 +08:00
parent 7713620e32
commit 72af528484
2 changed files with 27 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/selectTabBox/selectTabBox.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="dis-f s-w-100" :style="[routePath === '/seachPage' ? '' : 'border-bottom:1px solid #ebebeb;']">
<div class="select-box s-w-50 bor-r">
<div class="dis-f bor-b-das" :class="{ 'al-item housing-pd': routePath === '/needHousing' }">
<div class="select-box s-w-50">
<div class="dis-f" :class="{ 'al-item housing-pd': routePath === '/needHousing' }">
<div class="tab-title">{{ routePath === '/needHousing' ? '目标区域' : '地理位置' }}</div>
<!-- 中介/个人房源页面 -->
<div class="tab-text" v-if="routePath !== '/needHousing'">
@@ -98,7 +98,8 @@
</div>
</div>
</div>
<div class="dis-f pad-t-b-15 bor-b-das" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing' }">
<div class="bor-b-das"></div>
<div class="dis-f pad-t-b-15" :class="{ 'housing-pd pd-t-25': routePath === '/needHousing' }">
<div class="tab-title">{{ routePath === '/needHousing' ? '求租方式' : '出租方式' }}</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">
@@ -131,6 +132,7 @@
</div>
</div>
</div>
<div class="bor-b-das"></div>
<div class="dis-f al-item" style="padding:30px 0;">
<div class="tab-title">{{ routePath === '/needHousing' ? '租金预算' : '租金' }}</div>
<div class="dis-f al-item rent-box jus-bet">
@@ -149,8 +151,9 @@
</div>
</div>
</div>
<div class="bor-r"></div>
<div class="select-box s-w-50">
<div class="dis-f bor-b-das">
<div class="dis-f">
<div class="tab-title">租期</div>
<div class="select-btn-box">
<div class="dis-f">
@@ -161,7 +164,8 @@
</div>
</div>
</div>
<div class="dis-f bor-b-das pd-t-20">
<div class="bor-b-das"></div>
<div class="dis-f pd-t-20">
<div class="tab-title">{{ routePath === '/needHousing' ? '求租者性别' : '性别' }}</div>
<div class="select-btn-box">
<div class="dis-f">
@@ -171,7 +175,8 @@
</div>
</div>
</div>
<div class="dis-f bor-b-das pd-t-20">
<div class="bor-b-das"></div>
<div class="dis-f pd-t-20">
<div class="tab-title">发布时间</div>
<div class="select-btn-box">
<div class="dis-f">
@@ -182,6 +187,7 @@
</div>
</div>
</div>
<div class="bor-b-das"></div>
<div class="dis-f pd-t-20">
<div class="tab-title">其他</div>
<div class="select-btn-box" style="margin-left:-11px;">
@@ -212,7 +218,8 @@
<div class="dis-f" style="flex-wrap: wrap;width:800px;">
<div v-for="(item, i) in selectData.data" :key="i" class="btm-btn">
{{ item.title }}
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i, item.id)" class="img" alt="">
<img src="../../assets/homeImage/closeIcon.svg" @click="deleteSelect(i, item.id)" class="img"
alt="">
</div>
</div>
</div>
@@ -747,7 +754,11 @@ export default {
}
.bor-r {
border-right: 1px dashed #ebebeb;
height: 291px;
width: 1px;
background-image: linear-gradient(to top, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
background-size: 1px 2px;
background-repeat: repeat-y;
}
.s-w-50 {
@@ -766,16 +777,12 @@ img {
padding: 10px;
}
.transverse-line {
height: 2px;
width: 743px;
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
background-size: 4px 2px;
background-repeat: repeat-x;
}
.bor-b-das {
border-bottom: 1px dashed #ebebeb;
height: 1px;
width: 100%;
background-image: linear-gradient(to right, #d7d7d7 0%, #d7d7d7 50%, transparent 0%);
background-size: 2px 1px;
background-repeat: repeat-x;
}
.housing-pd {
@@ -1210,9 +1217,7 @@ img {
color: #555555;
font-size: 15px;
.bold-text{
}
.bold-text {}
.btm-btn {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;