样式修改

2023-08-07 12:17:11 +08:00
parent a1084f0091
commit 3fcd5185ca
4 changed files with 78 additions and 46 deletions
--- a/src/components/seachPage/input.vue
+++ b/src/components/seachPage/input.vue
@@ -31,6 +31,9 @@
                        <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 }} 
+                            <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 }">
@@ -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;
        }
    }
 }
--- a/src/components/selectTabBox/selectTabBox.vue
+++ b/src/components/selectTabBox/selectTabBox.vue
@@ -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;
        }
    }

--- a/src/main.js
+++ b/src/main.js
@@ -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)

--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -481,7 +481,7 @@
                                    <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 }">
@@ -510,7 +510,10 @@
                                                </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;