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

修改头部样式

Browse Source
This commit is contained in:
A1300399510
2023-12-04 19:10:31 +08:00
parent ac9b6ac89e
commit 8bf4ac8da1
21 changed files with 300 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/homeImage/indexBg.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 160 KiB

After

Width:  |  Height:  |  Size: 835 KiB

8
src/components/apartment/seach.vue
View File

@@ -359,8 +359,8 @@ defineExpose({
}
.location-box {
width: 80px;
height: 40px;
width: 64px;
height: 32px;
background: inherit;
background-color: rgba(68, 68, 68, 1);
border: none;
@@ -386,7 +386,7 @@ defineExpose({
width: 0;
height: 0;
position: absolute;
bottom: -47px;
bottom: -39px;
left: -7px;
}
@@ -408,7 +408,7 @@ defineExpose({
width: 16px;
// height: 20px;
object-fit: contain;
margin-right: 5px;
margin-right: 1px;
}

316
src/components/apartment/seachModule.vue
View File

@@ -1,25 +1,21 @@
<template>
<div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
<div class="body-maxWidth" :class="{ 'seachPage': !props.seachPage }">
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
<div class="body-maxWidth" :class="{seachPage: !props.seachPage}">
<div class="s-w-100 seach-box-bg">
<div class="seach-box">
<div class="top-seach dis-f al-item" v-if="props.seachPage">
<div style="position: absolute;left: -8px;top: 20px;">
<div style="position: absolute; left: -8px; top: 20px;">
<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="" />
香港
</div>
<div class="triangle"></div>
</div>
<div class="flexacenter">
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click"
:show-arrow="false"
popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
<div class="flexacenter seek-input">
<el-popover v-model:visible="historyShow" placement="bottom" :width="560" trigger="click" :show-arrow="false" popper-style="background: transparent;padding:0;box-shadow: none;border: none;transform: translateX(50px);">
<template #reference>
<el-input class="search-input" v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID"
@keyup.enter='handleKeyword(pitchValue["keyword"])' style="height:48px;width:460px;"
maxlength="15"></el-input>
<el-input class="search-input " v-model="pitchValue['keyword']" placeholder="搜索房源或输入房源ID" @keyup.enter="handleKeyword(pitchValue['keyword'])" style="height: 40px; width: 460px;" maxlength="15"></el-input>
</template>
<div class="dis-f al-item pos-r">
<div class="seach-hiosory-box scrollbar">
@@ -27,57 +23,51 @@
<div v-if="historyArr.length != 0" style="margin-bottom: 30px;">
<div class="title">历史搜索</div>
<div class="info-box">
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i"
class="btn flexacenter" @click="handleKeyword(item)">
<div :class="flexacenter" v-for="(item, i) in historyArr" :key="i" class="btn flexacenter" @click="handleKeyword(item)">
<div class="flexflex">{{ item }}</div>
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg"
@click.stop="deleteSeachVal(i)" alt="">
<img>
<img class="btn-icon" src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" alt="" />
<img />
</div>
</div>
</div>
<div>
<div class="title">热门推荐</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
@click="handleKeyword(item)">{{ item }}
</div>
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="handleKeyword(item)">{{ item }}</div>
</div>
</div>
</div>
</div>
</div>
</el-popover>
<div class="seach-btn dis-f al-item jus-x"
@click="pitchValue['keyword'] ? handleKeyword(pitchValue['keyword']) : ''">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索
<div class="seach-btn dis-f al-item jus-x" @click="pitchValue['keyword'] ? handleKeyword(pitchValue['keyword']) : ''">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="" />
<!-- 搜索 -->
</div>
</div>
<div class="tool-btn dis-f jus-x al-item add-btn" style="position: relative;">
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
<img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
发布房源
<choosing-identity></choosing-identity>
</div>
<el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300"
trigger="hover" :show-arrow="false"
popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
<el-popover placement="bottom-end" popper-class="consult-popover flexcenter" :width="300" trigger="hover" :show-arrow="false" popper-style="background-color:transparent;border: none;box-shadow: none;padding:0;">
<template #reference>
<div class="tool-btn consult-btn flexcenter">
<img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png">
<img class="consult-icon" src="@/assets/img/publicImage/consult-icon.png" />
咨询方同学
</div>
</template>
<div class="consult-pop flexacenter">
<div class="consult-title flexacenter">欢迎联系 <b>{{ wechat['nickname'] }}</b> 咨询房源</div>
<div class="consult-title flexacenter">
欢迎联系 <b>{{ wechat["nickname"] }}</b> 咨询房源
</div>
<div class="consult-QRcode flexcenter">
<img class="consult-QRcode-img" :src="wechat['personalqrcode']" />
</div>
<div class="consult-hint">微信扫码添加好友</div>
<div class="consult-remark flexacenter">备注：<b>寄托租房</b></div>
</div>
</el-popover>
</div>
@@ -85,39 +75,34 @@
<!-- 展示的 展开和隐藏按钮 -->
<div class="screen-btn flexcenter" v-if="state == 'pack'" @click="state = 'unfold'">
<b>筛选</b>
<div class="screen-btn-text" style="margin-left:0;">：学校附近</div> | <div class="screen-btn-text">品牌
</div> | <div class="screen-btn-text">租金</div> | <div class="screen-btn-text">房型</div> | <div
class="screen-btn-text">楼型</div>
<div class="screen-btn-text" style="margin-left: 0;">：学校附近</div>
|
<div class="screen-btn-text">品牌</div>
|
<div class="screen-btn-text">租金</div>
|
<div class="screen-btn-text">房型</div>
|
<div class="screen-btn-text">楼型</div>
<img class="triangle" src="@/assets/img/publicImage/triangle-black.svg" />
</div>
<div class="option-area flexflex" :class="{ 'option-area-unfold': state == 'unfold' }">
<div class="option-area flexflex" :class="{'option-area-unfold': state == 'unfold'}">
<div class="option-left">
<div class="option-item flexflex">
<div class="option-title">学校附近</div>
<div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['school'] }"
@click="selectOption('nearSchool', 0)">不限</div>
<div class="item flexcenter" v-for="item in nearSchoolList"
:class="{ 'pitch': item['id'] == pitchValue['school'] }"
@click="selectOption('nearSchool', item.id)">{{ item['name']
}}</div>
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['school']}" @click="selectOption('nearSchool', 0)">不限</div>
<div class="item flexcenter" v-for="item in nearSchoolList" :class="{pitch: item['id'] == pitchValue['school']}" @click="selectOption('nearSchool', item.id)">{{ item["name"] }}</div>
</div>
</div>
<div class="option-item flexflex">
<div class="option-title flexacenter">租金</div>
<div class="option-box flexacenter flex1 option-input-box">
<div class="flex1">
<input class="option-input" type="number" v-model="pitchValue['rent_min']"
@blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span
style="font-size: 18px;">~</span><input class="option-input" type="number"
v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput"
@keyup.enter="rentBlur" />HK$/月
</div>
<div class="flex1"><input class="option-input" type="number" v-model="pitchValue['rent_min']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" /><span style="font-size: 18px;">~</span><input class="option-input" type="number" v-model="pitchValue['rent_max']" @blur="rentBlur" @input="rentInput" @keyup.enter="rentBlur" />HK$/月</div>
<div class="eliminate flexcenter" @click="clearingAmount"
v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg">
<div class="eliminate flexcenter" @click="clearingAmount" v-if="pitchValue['rent_min'] || pitchValue['rent_max']">
<img class="eliminate-icon" src="@/assets/img/publicImage/round-fork.svg" />
清除金额
</div>
</div>
@@ -126,47 +111,36 @@
<div class="option-item flexflex">
<div class="option-title">房型</div>
<div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomtype'] }"
@click="selectOption('roomType', 0)">不限</div>
<div class="item flexcenter" :class="{ 'pitch': item['id'] == pitchValue['roomtype'] }"
v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{
item['name'] }}</div>
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomtype']}" @click="selectOption('roomType', 0)">不限</div>
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['roomtype']}" v-for="item in roomTypeList" @click="selectOption('roomType', item.id)">{{ item["name"] }}</div>
</div>
</div>
</div>
<div class="option-right">
<div class="option-item flexflex">
<div class="option-title">品牌</div>
<div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['companyid'] }"
@click="selectOption('brand', 0)">不限</div>
<div class="item flexcenter" :class="{ 'pitch': item['id'] == pitchValue['companyid'] }"
v-for="item in brandList" @click="selectOption('brand', item.id)">
{{ item['name'] }}</div>
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['companyid']}" @click="selectOption('brand', 0)">不限</div>
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['companyid']}" v-for="item in brandList" @click="selectOption('brand', item.id)">
{{ item["name"] }}
</div>
</div>
</div>
<div class="option-item flexflex">
<div class="option-title">楼型</div>
<div class="option-box flexflex flex1">
<div class="item flexcenter" :class="{ 'pitch': 0 == pitchValue['roomlistings'] }"
@click="selectOption('roomlistings', 0)">不限</div>
<div class="item flexcenter"
:class="{ 'pitch': item['id'] == pitchValue['roomlistings'] }"
v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
{{
item['name'] }}</div>
<div class="item flexcenter" :class="{pitch: 0 == pitchValue['roomlistings']}" @click="selectOption('roomlistings', 0)">不限</div>
<div class="item flexcenter" :class="{pitch: item['id'] == pitchValue['roomlistings']}" v-for="item in roomlistingsList" @click="selectOption('roomlistings', item.id)">
{{ item["name"] }}
</div>
</div>
</div>
</div>
</div>
<!-- 收起按钮 -->
<div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">
收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" />
</div>
<div class="pack-up flexcenter" v-if="state == 'unfold'" @click="state = 'pack'">收起筛选条件<img class="icon" src="@/assets/img/publicImage/triangle-black.svg" /></div>
<div class="screen-footer flexacenter" v-if="props.seachPage">
<div class="quantity flexacenter">
@@ -178,16 +152,16 @@
</div>
</div>
</template>
<script setup>
import { ref, toRefs, watchEffect, reactive, defineProps, nextTick } from 'vue';
import { useStore } from 'vuex';
import store from '../../store/index';
import { useRoute, useRouter } from 'vue-router';
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
const usestore = useStore();
const { wechat } = toRefs(usestore.state);
<script setup>
import {ref, toRefs, watchEffect, reactive, defineProps, nextTick} from "vue"
import {useStore} from "vuex"
import store from "../../store/index"
import {useRoute, useRouter} from "vue-router"
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
const usestore = useStore()
const {wechat} = toRefs(usestore.state)
const router = useRouter()
const route = useRoute()
@@ -195,36 +169,35 @@ const route = useRoute()
const props = defineProps({
count: {
type: Number,
default: 0
default: 0,
},
seachPage: {
type: Boolean,
default: true
}
default: true,
},
})
const emit = defineEmits(['handleTransfer'])
const emit = defineEmits(["handleTransfer"])
let state = ref('pack') // 筛选状态 unfold 展开 pack 收起
let state = ref("pack") // 筛选状态 unfold 展开 pack 收起
//搜索框
let historyShow = ref(false);
let setHistoryShow = () => historyShow.value = historyShow.value // 修改历史记录框的显示状态 通过input的 焦点状态判断的
let historyShow = ref(false)
let setHistoryShow = () => (historyShow.value = historyShow.value) // 修改历史记录框的显示状态 通过input的 焦点状态判断的
let historyArr = ref([])//历史查找记录
let hotArr = reactive({ data: [] })
let historyArr = ref([]) //历史查找记录
let hotArr = reactive({data: []})
//获取历史搜索记录
historyArr.value = JSON.parse(localStorage.getItem('historyArr')) || []
historyArr.value = JSON.parse(localStorage.getItem("historyArr")) || []
let nearSchoolList = reactive([{ name: "不限", id: 0 }]); //学校附近
let nearSchoolList = reactive([{name: "不限", id: 0}]) //学校附近
let roomTypeList = reactive([]); // 房型
let roomTypeList = reactive([]) // 房型
let roomlistingsList = reactive([]); // 楼型
let roomlistingsList = reactive([]) // 楼型
let brandList = reactive([]); // 品牌数据
let brandList = reactive([]) // 品牌数据
watchEffect(() => {
nearSchoolList = store.state.apartment.school || []
@@ -234,46 +207,44 @@ watchEffect(() => {
hotArr.data = store.state.indexData.hotSearcheWords
})
let pitchValue = ref({
companyid: 0,
roomtype: 0,
rent_min: null, // 租金
rent_max: null, // 租金
rent_min: null, // 租金
rent_max: null, // 租金
school: 0,
roomlistings: 0,
keyword: "",
})
if (route.query['companyid']) {
pitchValue.value['companyid'] = route.query['companyid']
if (route.query["companyid"]) {
pitchValue.value["companyid"] = route.query["companyid"]
state.value = "unfold"
}
// 是否点击里 清除金额按钮 因为输入金额后再点击清除按钮是会先请求有金额的列表
let clearingAmountState = false
// 点击清除金额
const clearingAmount = () => {
clearingAmountState = true
pitchValue.value['rent_min'] = null
pitchValue.value['rent_max'] = null
emit('handleTransfer', pitchValue)
pitchValue.value["rent_min"] = null
pitchValue.value["rent_max"] = null
emit("handleTransfer", pitchValue)
}
// 金额的失去焦点事件
const rentBlur = () => {
setTimeout(() => {
if (!clearingAmountState) emit('handleTransfer', pitchValue)
if (!clearingAmountState) emit("handleTransfer", pitchValue)
}, 300)
}
// 搜索框输入中
const rentInput = () => clearingAmountState = false
const rentInput = () => (clearingAmountState = false)
// 点击历史搜索和热门推荐
const handleKeyword = value => {
sessionStorage.setItem('houseingPageType', '')
sessionStorage.setItem("houseingPageType", "")
router.push(`/seachPage?keyword=${value}`)
if (historyArr.value.indexOf(value) == -1 && value) {
historyArr.value.unshift(value)
@@ -283,54 +254,54 @@ const handleKeyword = value => {
//搜索数据
let seachList = () => {
if (historyArr.value.indexOf(pitchValue.value['keyword'] && pitchValue.value['keyword']) == -1) {
historyArr.value.unshift(pitchValue.value['keyword'])
if (historyArr.value.indexOf(pitchValue.value["keyword"] && pitchValue.value["keyword"]) == -1) {
historyArr.value.unshift(pitchValue.value["keyword"])
storingHistory()
}
historyShow.value = false
emit('handleTransfer', pitchValue)
emit("handleTransfer", pitchValue)
}
// 存储历史记录 并判断长度
const storingHistory = () => {
if (historyArr.value.length > 10) historyArr.value = historyArr.value.slice(0, 10)
localStorage.setItem('historyArr', JSON.stringify(historyArr.value));
localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
}
// 选择选项
const selectOption = (type, value) => {
switch (type) {
case 'nearSchool':
pitchValue.value['school'] = value
break;
case 'roomType':
pitchValue.value['roomtype'] = value
break;
case 'brand':
pitchValue.value['companyid'] = value
break;
case 'roomlistings':
pitchValue.value['roomlistings'] = value
break;
case "nearSchool":
pitchValue.value["school"] = value
break
case "roomType":
pitchValue.value["roomtype"] = value
break
case "brand":
pitchValue.value["companyid"] = value
break
case "roomlistings":
pitchValue.value["roomlistings"] = value
break
default:
break;
break
}
nextTick(() => {
emit('handleTransfer', pitchValue)
emit("handleTransfer", pitchValue)
})
}
//删除历史记录
let deleteSeachVal = (i) => {
let deleteSeachVal = i => {
historyArr.value.splice(i, 1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.value));
localStorage.setItem("historyArr", JSON.stringify(historyArr.value))
}
</script>
<style scoped lang="less">
* {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
}
.dis-f {
@@ -368,7 +339,6 @@ let deleteSeachVal = (i) => {
box-shadow: none;
padding-top: 0;
.seach-box {
transform: translate(0, 0);
box-shadow: none;
@@ -391,7 +361,7 @@ let deleteSeachVal = (i) => {
padding-top: 3px;
.seach-box {
background: #FFFFFF;
background: #ffffff;
// transform: translate(0, 3px);
border-radius: 16px;
@@ -405,8 +375,8 @@ let deleteSeachVal = (i) => {
}
.location-box {
width: 80px;
height: 40px;
width: 62px;
height: 32px;
background: inherit;
background-color: rgba(68, 68, 68, 1);
border-radius: 8px;
@@ -415,10 +385,10 @@ let deleteSeachVal = (i) => {
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
// font-weight: 650;
font-size: 16px;
color: #FFFFFF;
color: #ffffff;
line-height: 48px;
position: absolute;
z-index: 666;
@@ -432,7 +402,7 @@ let deleteSeachVal = (i) => {
position: absolute;
// bottom: -46px;
// left: -6px;
bottom: -47px;
bottom: -39px;
left: -7px;
}
@@ -446,7 +416,7 @@ let deleteSeachVal = (i) => {
color: #000;
font-size: 16px;
font-weight: 400;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
&:hover {
opacity: 0.8;
@@ -457,16 +427,14 @@ let deleteSeachVal = (i) => {
width: 20px;
height: 20px;
object-fit: contain;
margin-right: 5px;
margin-right: 1px;
}
.tool-btn {
width: 160px;
height: 48px;
border-radius: 8px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
height: 40px;
border-radius: 68px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
@@ -474,8 +442,6 @@ let deleteSeachVal = (i) => {
line-height: 48px;
cursor: pointer;
&.add-btn {
background: rgba(253, 218, 85, 1);
margin-left: 20px;
@@ -512,7 +478,7 @@ let deleteSeachVal = (i) => {
.search-input {
/deep/ .el-input__wrapper {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
&:hover {
border-color: #c0c4cc;
@@ -525,7 +491,7 @@ let deleteSeachVal = (i) => {
border-right: none;
.el-input__inner {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
&::placeholder {
color: #7f7f7f;
@@ -540,7 +506,7 @@ let deleteSeachVal = (i) => {
color: #d7d7d7;
line-height: 21px;
height: 60px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
background-color: rgba(246, 246, 246, 1);
cursor: pointer;
border-top: 1px solid #ebebeb;
@@ -559,7 +525,6 @@ let deleteSeachVal = (i) => {
height: 6px;
margin-left: 10px;
}
}
.pack-up {
@@ -587,7 +552,7 @@ let deleteSeachVal = (i) => {
color: #555555;
font-size: 15px;
height: 72px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
.b {
font-weight: 700;
@@ -595,15 +560,13 @@ let deleteSeachVal = (i) => {
margin: 0 5px;
}
}
}
.option-area {
flex-wrap: wrap;
overflow: hidden;
height: 0;
transition: height .25s linear 0s;
transition: height 0.25s linear 0s;
&.option-area-unfold {
height: 335px;
@@ -630,7 +593,7 @@ let deleteSeachVal = (i) => {
.option-title {
font-size: 14px;
color: #B5B5B5;
color: #b5b5b5;
width: 90px;
line-height: 30px;
}
@@ -642,7 +605,7 @@ let deleteSeachVal = (i) => {
padding: 5px 10px;
height: 30px;
display: flex;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-size: 14px;
text-align: center;
@@ -651,7 +614,7 @@ let deleteSeachVal = (i) => {
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
color: #7F7F7F;
color: #7f7f7f;
border: 1px solid transparent;
&:hover {
@@ -659,8 +622,8 @@ let deleteSeachVal = (i) => {
}
&.pitch {
color: #50E3C2;
border: 1px solid #50E3C2;
color: #50e3c2;
border: 1px solid #50e3c2;
background: #eefcf9;
}
}
@@ -677,7 +640,7 @@ let deleteSeachVal = (i) => {
background-color: rgba(246, 246, 246, 1);
border-radius: 50px;
font-size: 14px;
color: #7F7F7F;
color: #7f7f7f;
cursor: pointer;
.eliminate-icon {
@@ -700,14 +663,11 @@ let deleteSeachVal = (i) => {
&:first-of-type {
margin-left: 0;
}
}
}
}
}
}
}
.seach-hiosory-box {
@@ -727,7 +687,7 @@ let deleteSeachVal = (i) => {
padding: 20px 25px;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
@@ -737,7 +697,7 @@ let deleteSeachVal = (i) => {
.info-box {
display: flex;
flex-wrap: wrap;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
@@ -758,7 +718,6 @@ let deleteSeachVal = (i) => {
}
}
.btn-icon {
position: absolute;
top: 50%;
@@ -772,7 +731,6 @@ let deleteSeachVal = (i) => {
}
}
}
}
.el-popover.el-popper.consult-popover {
@@ -781,7 +739,7 @@ let deleteSeachVal = (i) => {
height: 300px;
border-radius: 10px;
padding-top: 45px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.101960784313725);
@@ -835,5 +793,27 @@ let deleteSeachVal = (i) => {
}
}
}
.seek-input {
border-radius: 65px;
overflow: hidden;
background-color: #f6f6f6;
border: solid 1px var(--el-input-border-color, var(--el-border-color));
::v-deep .el-input__wrapper {
box-shadow: none;
background: none;
}
img {
width: 18px !important;
}
}
.seach-btn {
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
margin-right: 3px;
}
</style>

2
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -28,7 +28,7 @@
{{ `· ${itemData.gender}` }}
{{ itemData.leaseterm ? `· ${itemData.leaseterm}` : "" }}
</span>
<span v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
<span class="ellipsis" style="width: 272px;display: block;" v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
</div>
<div style="padding: 0 10px; margin-top: 15px;" class="dis-f al-item" v-if="itemData.type === 'housing'">
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" />

12
src/components/pageTopBar/pageTopBar.vue
View File

@@ -1,5 +1,6 @@
<template>
<div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }">
<!-- <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '530px' : '260px' }"> -->
<div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '470px' : '260px' }">
<img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="bannerLists.data.length">
<img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length">
<div class="info-box">
@@ -37,7 +38,8 @@
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()">
</div>
</div>
<div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length">
<!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
<div class="dis-f jus-x al-item" v-if="bannerLists.data.length">
<div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
@@ -49,7 +51,7 @@
</div>
</div>
<div class="btm-seach-btn-box dis-f al-item jus-x" v-if="pageTopBarShow">
<div class="body-maxWidth dis-f" style="height:48px;">
<div class="body-maxWidth dis-f" style="height:40px;">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }"
v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
@@ -274,7 +276,7 @@ const goIndex = () => router.push("/")
.top-bg-img-box .info-box .btm-seach-btn-box {
width: 100%;
height: 50px;
height: 44px;
position: absolute;
bottom: 0;
left: 0;
@@ -288,7 +290,7 @@ const goIndex = () => router.push("/")
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
width: 120px;
height: 47px;
height: 40px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;

254
src/components/seachModule/seachModule.vue
View File

@@ -1,25 +1,23 @@
<template>
<div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
<div class="dis-f jus-x al-item" style="position: relative; z-index: 333;">
<div class="body-maxWidth">
<div class="s-w-100 seach-box-bg">
<div class="seach-box">
<div class="top-seach dis-f al-item">
<div style="position: absolute;left: -8px;top: 20px;">
<div style="position: absolute; left: -8px; top: 20px;">
<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="" />
香港
</div>
<div class="triangle"></div>
</div>
<div class="dis-f al-item pos-r">
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter='seachList'
@blur="setHistoryShow" @focus="setHistoryShow"
style="height:48px;width:460px;background:rgba(246, 246, 246, 1);border-radius:8px;"></el-input>
<div class="dis-f al-item pos-r seek-input">
<el-input v-model="seachAllType.keyword" placeholder="搜索房源或输入房源ID" @keyup.enter="seachList" @blur="setHistoryShow" @focus="setHistoryShow" style="height: 40px; width: 460px; background: rgba(246, 246, 246, 1); border-radius: 8px;"></el-input>
<div class="seach-btn dis-f al-item jus-x" @click="seachList">
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
搜索
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="" />
<!-- 搜索 -->
</div>
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
<div class="seach-hiosory-box" :class="{'seach-history-h': historyShow}">
<el-scrollbar height="375px">
<div class="seach-history-info">
<div>
@@ -27,19 +25,15 @@
历史搜索
</div>
<div class="info-box">
<div v-for="(item, i) in historyArr.data" :key="i" class="btn"
@click="setSeachVal(item)">
{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="">
</div>
<div v-for="(item, i) in historyArr.data" :key="i" class="btn" @click="setSeachVal(item)">{{ item }} <img src="../../assets/homeImage/closeIcon.svg" @click.stop="deleteSeachVal(i)" class="img" alt="" /></div>
</div>
</div>
<div style="margin-top:30px;">
<div style="margin-top: 30px;">
<div class="title">
热门推荐
</div>
<div class="info-box">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn"
@click="setHotSeach(item)">
<div v-for="(item, i) in hotArr.data" :key="i" class="btn" @click="setHotSeach(item)">
{{ item }}
</div>
</div>
@@ -52,25 +46,23 @@
<img src="../assets/homeImage/mapImg.png" class="img" alt="">
地图找房
</div> -->
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{ 'mg-l-10': routePath === '/' }"
style="position: relative;">
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
<div class="tool-btn dis-f jus-x al-item add-btn" :class="{'mg-l-10': routePath === '/'}" style="position: relative;">
<img style="margin-right: 5px;" src="../../assets/homeImage/addBtn.png" class="img" alt="" />
发布房源
<choosing-identity></choosing-identity>
</div>
<div class=" dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
<div class="dis-f jus-x al-item authentication-btn" v-if="routePath === '/personHousing'">
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="" />
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="" />
<div class="btn-qrcode">
<authentication-info :type="1"></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg">
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth"> -->
</div>
</div>
<div class=" dis-f jus-x al-item authentication-btn intermediary-btn"
v-if="routePath === '/intermediaryHousing'">
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="">
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="">
<div class="dis-f jus-x al-item authentication-btn intermediary-btn" v-if="routePath === '/intermediaryHousing'">
<img src="../../assets/homeImage/intermediaryText.png" class="text-img" alt="" />
<img src="../../assets/homeImage/intermediaryCode.svg" class="code-img" alt="" />
<div class="btn-qrcode">
<authentication-info :type="2"></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
@@ -79,19 +71,13 @@
</div>
</div>
<div class="seach-info-box dis-f" v-if="routePath === '/'">
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length"
:checkBtn="checkBtn">
</seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length"
:checkBtn="checkBtn"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"
:checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"
:checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
<seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1" v-if="seachSchoolBtn.data.length" :checkBtn="checkBtn"> </seachInfo>
<seachInfo title="合租" seachType="2" :btn="hireType.data" v-if="hireType.data.length" :checkBtn="checkBtn"></seachInfo>
<seachInfo title="区域找房" seachType="3" style="margin-top: 30px;" :btn="seachArea.data" :checkBtn="checkBtn" v-if="seachArea.data.length"></seachInfo>
<seachInfo title="整租" seachType="2" style="margin-top: 30px;" :btn="allHireType.data" :checkBtn="checkBtn" v-if="allHireType.data.length"></seachInfo>
</div>
<!-- -->
<div
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
<div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
<selectTabBox :setSeachCondition="setSeachConditions" :setLocation="setLocation"></selectTabBox>
</div>
</div>
@@ -99,57 +85,56 @@
</div>
</div>
</template>
<script setup>
import { ref, watchEffect, reactive, defineProps } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
import { useRouter } from 'vue-router';
import store from '../../store/index';
import api from "../../utils/api";
import authenticationInfo from './authenticationInfo.vue'
import {ref, watchEffect, reactive, defineProps} from "vue"
import seachInfo from "../indexSeachInfo/indexSeachInfo.vue"
import selectTabBox from "../selectTabBox/selectTabBox.vue"
import choosingIdentity from "@/components/edit/choosingIdentity.vue"
import {useRouter} from "vue-router"
import store from "../../store/index"
import api from "../../utils/api"
import authenticationInfo from "./authenticationInfo.vue"
const props = defineProps({
getDataList: {
type: Function
}
type: Function,
},
})
let getDataList = props.getDataList
//搜索框
let historyShow = ref(false);
let historyShow = ref(false)
let setHistoryShow = () => {
if (historyShow.value) {
setTimeout(() => {
historyShow.value = !historyShow.value
}, 500);
}, 500)
return
}
historyShow.value = !historyShow.value
}
let seachSchoolBtn = reactive({ data: [] });//学校地区
let hireType = {};//整租
let allHireType = {};//合租
let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
let seachSchoolBtn = reactive({data: []}) //学校地区
let hireType = {} //整租
let allHireType = {} //合租
let seachArea = {} //区域找房
let historyArr = reactive({data: []}) //历史查找记录
let hotArr = reactive({data: []})
let seachAllType = reactive({
keyword: '',
keyword: "",
location: [],
orderby: 'timestamp'
orderby: "timestamp",
})
//获取区域下列数据
let getLocationData = (data) => {
let getLocationData = data => {
for (let item in data) {
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
if (item.length > 1) {
seachArea.data[item.substring(0, 1) - 1].data.push({
title: data[item],
id: item
id: item,
})
}
}
@@ -157,7 +142,7 @@ let getLocationData = (data) => {
//监听路由
const route = useRouter()
let routePath = ref('')
let routePath = ref("")
routePath.value = route.currentRoute.value.meta.path
watchEffect(() => {
@@ -170,51 +155,51 @@ watchEffect(() => {
})
//获取历史搜索记录
historyArr.data = JSON.parse(localStorage.getItem('historyArr')) || []
historyArr.data = JSON.parse(localStorage.getItem("historyArr")) || []
//搜索数据
let seachList = (item) => {
let seachList = item => {
let string = seachAllType.keyword
if (!string.replace(/\s/g, "")) return
if (historyArr.data.indexOf(seachAllType.keyword) === -1) {
historyArr.data.unshift(seachAllType.keyword)
}
if(historyArr.data.length>10)historyArr.data.splice(historyArr.data.length-1,1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
sessionStorage.setItem('houseingPageType', routePath.value === '/needHousing' ? '6' : routePath.value === '/intermediaryHousing' ? '1' : routePath.value === '/personHousing' ? '0' : '0')
if (historyArr.data.length > 10) historyArr.data.splice(historyArr.data.length - 1, 1)
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
sessionStorage.setItem("houseingPageType", routePath.value === "/needHousing" ? "6" : routePath.value === "/intermediaryHousing" ? "1" : routePath.value === "/personHousing" ? "0" : "0")
route.push({
path: '/seachPage',
path: "/seachPage",
query: {
keyword: seachAllType.keyword,
isNeedHousing: routePath.value === '/needHousing',
}
isNeedHousing: routePath.value === "/needHousing",
},
})
}
//设置点击一级区域
let setLocation = (type, data) => {
seachAllType[type] = data
seachAllType['school'] = ''
seachAllType["school"] = ""
}
//设置搜索数据
let setSeachConditions = (type, data, second = null) => {
if (type === 'rent') {
seachAllType['rent_min'] = data.min
seachAllType['rent_max'] = data.max
} else if (type !== '') {
if (type === "rent") {
seachAllType["rent_min"] = data.min
seachAllType["rent_max"] = data.max
} else if (type !== "") {
seachAllType[type] = data
} else if (type === '') {
data.indexOf('isintermediary') !== -1 ? seachAllType['isintermediary'] = 1 : seachAllType['isintermediary'] = 0
data.indexOf('isverified') !== -1 ? seachAllType['isverified'] = 1 : seachAllType['isverified'] = 0
data.indexOf('iselevator') !== -1 ? seachAllType['iselevator'] = 1 : seachAllType['iselevator'] = 0
data.indexOf('issunshinearea') !== -1 ? seachAllType['issunshinearea'] = 1 : seachAllType['issunshinearea'] = 0
} else if (type === "") {
data.indexOf("isintermediary") !== -1 ? (seachAllType["isintermediary"] = 1) : (seachAllType["isintermediary"] = 0)
data.indexOf("isverified") !== -1 ? (seachAllType["isverified"] = 1) : (seachAllType["isverified"] = 0)
data.indexOf("iselevator") !== -1 ? (seachAllType["iselevator"] = 1) : (seachAllType["iselevator"] = 0)
data.indexOf("issunshinearea") !== -1 ? (seachAllType["issunshinearea"] = 1) : (seachAllType["issunshinearea"] = 0)
}
if (type === 'school') {
if (type === "school") {
seachAllType.location = []
}
if (type === 'location') {
seachAllType.school = ''
if (type === "location") {
seachAllType.school = ""
}
if (second) {
seachAllType[second.type] = second.id
@@ -223,23 +208,23 @@ let setSeachConditions = (type, data, second = null) => {
}
//点击历史搜索记录
let setSeachVal = (item) => {
let setSeachVal = item => {
seachAllType.keyword = item
seachList()
// getDataList(seachAllType)
}
//删除历史记录
let deleteSeachVal=(i)=>{
historyArr.data.splice(i,1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
let deleteSeachVal = i => {
historyArr.data.splice(i, 1)
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
}
//点击热门地区
let setHotSeach = (item) => {
let setHotSeach = item => {
seachAllType.keyword = item
if (historyArr.data.indexOf(item) === -1) historyArr.data.unshift(item)
if(historyArr.data.length>10)historyArr.data.slice(historyArr.data.length-1,1)
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
if (historyArr.data.length > 10) historyArr.data.slice(historyArr.data.length - 1, 1)
localStorage.setItem("historyArr", JSON.stringify(historyArr.data))
seachList()
}
@@ -248,9 +233,8 @@ let checkBtn = (data, type, areaItem) => {
getDataList(type, data, areaItem)
}
defineExpose({
historyShow
historyShow,
})
</script>
<style scoped lang="less">
@@ -325,7 +309,7 @@ defineExpose({
padding-top: 5px;
.seach-box {
background: #FFFFFF;
background: #ffffff;
/* transform: translate(0, 5px); */
border-radius: 16px;
@@ -334,23 +318,23 @@ defineExpose({
position: relative;
justify-content: end;
border-bottom: 1px solid #ebebeb;
.intermediary-btn:hover{
.intermediary-btn:hover {
background: #f4f7f9 !important;
}
.intermediary-btn {
background: rgba(241, 245, 247, 1) !important;
}
.authentication-btn:hover{
background:#f6f5ff;
.authentication-btn:hover {
background: #f6f5ff;
}
.authentication-btn {
width: 160px;
height: 48px;
height: 40px;
background: inherit;
background-color: rgba(244, 243, 255, 1);
border: none;
border-radius: 8px;
border-radius: 68px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
@@ -360,13 +344,13 @@ defineExpose({
.text-img {
width: 100px;
height: 26px;
height: 20px;
}
.code-img {
width: 20px;
height: 20px;
margin-left: 8px;
height: 16px;
margin-left: 0px;
}
}
@@ -399,21 +383,21 @@ defineExpose({
overflow-y: auto;
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 16px;
color: #000000;
}
.info-box :hover .img{
.info-box :hover .img {
display: block;
}
.info-box {
display: flex;
flex-wrap: wrap;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 15px;
@@ -424,8 +408,8 @@ defineExpose({
width: 8px;
height: 8px;
position: absolute;
top:6px;
right:-8px;
top: 6px;
right: -8px;
cursor: pointer;
display: none;
}
@@ -443,8 +427,8 @@ defineExpose({
}
.location-box {
width: 80px;
height: 40px;
width: 64px;
height: 32px;
background: inherit;
background-color: rgba(68, 68, 68, 1);
border: none;
@@ -454,11 +438,11 @@ defineExpose({
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
color: #ffffff;
line-height: 48px;
position: absolute;
z-index: 666;
@@ -470,16 +454,16 @@ defineExpose({
width: 0;
height: 0;
position: absolute;
bottom: -47px;
bottom: -39px;
left: -7px;
}
.seach-btn:hover{
background:#81c1ff !important;
.seach-btn:hover {
background: #81c1ff !important;
}
.seach-btn {
width: 100px;
height: 48px;
width: 32px;
height: 32px;
background: inherit;
background-color: rgba(98, 177, 255, 1);
border: none;
@@ -488,7 +472,7 @@ defineExpose({
line-height: 48px;
cursor: pointer;
transform: translateX(-3px);
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
@@ -499,7 +483,7 @@ defineExpose({
width: 20px;
// height: 20px;
object-fit: contain;
margin-right: 5px;
margin-right: 1px;
}
.map-btn {
@@ -507,8 +491,8 @@ defineExpose({
margin-left: 20px;
}
.add-btn:hover{
background:#fde177 !important;
.add-btn:hover {
background: #fde177 !important;
}
.add-btn {
background: rgba(253, 218, 85, 1);
@@ -522,15 +506,21 @@ defineExpose({
.tool-btn {
width: 160px;
height: 48px;
height: 40px;
border: none;
border-radius: 8px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
border-radius: 68px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #000000;
line-height: 48px;
img {
width: 15px;
margin-right: 5px;
}
}
}
@@ -546,5 +536,21 @@ defineExpose({
background: rgba(246, 246, 246, 1);
border-radius: 8px 0 0 8px;
}
.seek-input {
border-radius: 65px;
overflow: hidden;
background-color: #f6f6f6;
border: solid 1px var(--el-input-border-color, var(--el-border-color));
.seach-btn {
border-radius: 50% !important;
img {
width: 18px !important;
}
}
::v-deep .el-input__wrapper {
box-shadow: none;
background: none;
}
}
</style>