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-08 18:02:54 +08:00
parent 8e7aefcce4
commit a05fe2de69
5 changed files with 102 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/detail/breadcrumb.vue
View File

@@ -1,14 +1,13 @@
<template> <template>
<div class="pos-r" style="z-index: 1;"> <div class="pos-r" style="z-index: 1;">
<div class="authentication-top" <div class="authentication-top" :class="[pageType == 2 ? 'intermediary-top' : '']"
:class="[pageType==2?'intermediary-top':'']" v-if="data['data'] && data['data'].info && (data['data'].info.verified === 1 || data['data'].isintermediary)">
v-if="data['data'] && data['data'].info && (data['data'].info.verified === 1||data['data'].isintermediary)">
<div class="dis-f al-item jus-bet"> <div class="dis-f al-item jus-bet">
<div v-if="pageType==1"> <div v-if="pageType == 1">
<img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt=""> <img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt="">
<img src="../../assets/img/detail/authenticationTitle.png" class="title" alt=""> <img src="../../assets/img/detail/authenticationTitle.png" class="title" alt="">
</div> </div>
<div v-if="pageType==2" class="dis-f al-item"> <div v-if="pageType == 2" class="dis-f al-item">
<img src="../../assets/img/detail/intermediaryDetailLogo.png" class="intermediaryDetail-logo" alt=""> <img src="../../assets/img/detail/intermediaryDetailLogo.png" class="intermediaryDetail-logo" alt="">
<img src="../../assets/img/detail/intermediaryDetailTItle.png" class="intermediaryDetail-title" alt=""> <img src="../../assets/img/detail/intermediaryDetailTItle.png" class="intermediaryDetail-title" alt="">
</div> </div>
@@ -22,19 +21,22 @@
<div class="dis-f al-item" style="margin-left:20px;"> <div class="dis-f al-item" style="margin-left:20px;">
<img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""> <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
<span> <span>
{{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明' }} {{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明'
}}
</span> </span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="title-top-box pos-r"> <div class="title-top-box pos-r">
<div class="top-round" v-if="data['data'] && data['data'].info && data['data'].info.verified === 1||data['data'].isintermediary"> <div class="top-round"
<div class="top-round-s" :class="[pageType==2?'intermediary-bg':'']"></div> v-if="data['data'] && data['data'].info && data['data'].info.verified === 1 || data['data'].isintermediary">
<div class="top-round-s" :class="[pageType == 2 ? 'intermediary-bg' : '']"></div>
</div> </div>
<div class="breadcrumb-box"> <div class="breadcrumb-box">
<el-breadcrumb :separator-icon="ArrowRight"> <el-breadcrumb :separator-icon="ArrowRight">
<el-breadcrumb-item v-for="(item, i) in storeData['data']" :key="i" :to="{ path: item.path,query:item.query }"> <el-breadcrumb-item v-for="(item, i) in storeData['data']" :key="i"
:to="{ path: item.path, query: item.query }">
<span class="breadcrumb-text"> <span class="breadcrumb-text">
{{ item.title }} {{ item.title }}
</span> </span>
@@ -47,8 +49,11 @@
</div> </div>
<div class="tool-btn-box dis-f al-item"> <div class="tool-btn-box dis-f al-item">
<div class="btn-s dis-f al-item jus-x" @click="operation"> <div class="btn-s dis-f al-item jus-x" @click="operation">
<img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt=""> <div class="pos-r" style="width:20px;height:20px;">
<img src="../../assets/img/detail/collectT.png" v-show="!data.data.isfav" class="img-mouse" alt=""> <img src="../../assets/img/detail/collect.png" v-show="!data.data.isfav" class="img" alt="">
<img src="../../assets/img/detail/collectT.png" v-show="!data.data.isfav" class="img-mouse"
alt="">
</div>
<img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img-t" alt=""> <img src="../../assets/img/detail/collectT.png" v-show="data.data.isfav" class="img-t" alt="">
<span class="mg-l-5"> <span class="mg-l-5">
{{ data.data.isfav ? data['data']['info'].count_fav : '收藏' }} {{ data.data.isfav ? data['data']['info'].count_fav : '收藏' }}
@@ -96,17 +101,17 @@ let operation = props.operation
//获取路由参数 //获取路由参数
let router = useRouter() let router = useRouter()
//页面类型 //页面类型
let pageType=ref('') let pageType = ref('')
let {type}=router.currentRoute.value.query let { type } = router.currentRoute.value.query
pageType.value=type pageType.value = type
//导航数据 //导航数据
let storeData =reactive({}) let storeData = reactive({})
storeData['data']=store.state.routeList storeData['data'] = store.state.routeList
watchEffect(() => { watchEffect(() => {
data['data'] = props.data data['data'] = props.data
storeData['data'] = store.state.routeList storeData['data'] = store.state.routeList
if(data['data']&&data['data']['info'])pageType.value=data['data']['info'].intermediary===1?2:data['data']['info'].intermediary===6?3:1 if (data['data'] && data['data']['info']) pageType.value = data['data']['info'].intermediary === 1 ? 2 : data['data']['info'].intermediary === 6 ? 3 : 1
}) })
</script> </script>
@@ -179,21 +184,23 @@ img {
font-style: normal; font-style: normal;
font-size: 15px; font-size: 15px;
color: #FFFFFF; color: #FFFFFF;
.intermediaryDetail-logo{
width:25px; .intermediaryDetail-logo {
height:20px; width: 25px;
margin-left:-8px; height: 20px;
margin-left: -8px;
} }
.intermediaryDetail-title{
width:77px; .intermediaryDetail-title {
height:20px; width: 77px;
margin-left:-3px; height: 20px;
margin-left: -3px;
} }
.logo { .logo {
width: 20px; width: 20px;
height: 20px; height: 20px;
margin-left:-8px; margin-left: -8px;
} }
.title { .title {
@@ -242,8 +249,9 @@ img {
height: 24px; height: 24px;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.117647058823529); box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.117647058823529);
} }
.intermediary-bg{
background: rgba(174,215,249,1) !important; .intermediary-bg {
background: rgba(174, 215, 249, 1) !important;
} }
} }
@@ -252,10 +260,11 @@ img {
padding: 20px; padding: 20px;
border-bottom: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb;
.breadcrumb-text:hover{ .breadcrumb-text:hover {
color:#000; color: #000;
text-decoration: underline; text-decoration: underline;
} }
.breadcrumb-text { .breadcrumb-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400; font-weight: 400;
@@ -276,7 +285,7 @@ img {
color: #000000; color: #000000;
line-height: 35px; line-height: 35px;
width: 820px; width: 820px;
word-wrap:break-word; word-wrap: break-word;
} }
.tool-btn-box { .tool-btn-box {
@@ -299,14 +308,16 @@ img {
margin-left: 5px; margin-left: 5px;
} }
.btn-s:hover .img-mouse{ .btn-s:hover .img-mouse {
display: block; opacity: 0.4;
} }
.btn-s:hover .img{
display: none; .btn-s:hover .img {
opacity: 0;
} }
.btn-s:hover{
color:#000; .btn-s:hover {
color: #000;
} }
.btn-s { .btn-s {
@@ -320,17 +331,26 @@ img {
line-height: 40px; line-height: 40px;
cursor: pointer; cursor: pointer;
.img-mouse{ .img-mouse {
position: absolute;
top:0;
left:0;
width: 20px; width: 20px;
height: 20px; height: 20px;
opacity:0.4; opacity: 0;
display: none; transition: all 0.2s linear;
} }
.img { .img {
position: absolute;
top:0;
left:0;
width: 20px; width: 20px;
height: 20px; height: 20px;
display: block; transition: all 0.2s linear;
opacity: 1;
} }
.img-t { .img-t {
width: 20px; width: 20px;
height: 20px; height: 20px;
@@ -348,6 +368,5 @@ img {
} }
} }</style>
</style>

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

@@ -1,7 +1,7 @@
<template> <template>
<div class="top-bg-img-box pos-r" :style="{ 'height': routePath === '/' ? '568px' : '260px' }"> <div class="top-bg-img-box pos-r" :style="{ 'height': bannerLists.data.length ? '568px' : '260px' }">
<img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="routePath === '/'"> <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="routePath !== '/'"> <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length">
<div class="info-box"> <div class="info-box">
<!-- 顶部导航 --> <!-- 顶部导航 -->
<div class="dis-f jus-x al-item index-top-navigation-box"> <div class="dis-f jus-x al-item index-top-navigation-box">
@@ -34,7 +34,7 @@
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()"> <img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="" @click="goIndex()">
</div> </div>
</div> </div>
<div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="routePath === '/'"> <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length">
<div class="body-maxWidth"> <div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;"> <el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId"> <el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">

13
src/views/housingView/intermediary.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="box-min-1200-src"> <div class="box-min-1200-src">
<pageTopBar></pageTopBar> <pageTopBar :bannerList="bannerList.data"></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule> <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35" > <div class="body-maxWidth mg-t-35" >
@@ -51,6 +51,16 @@ let loading = ref(true)
let loadingText=ref(' 下拉加载更多 ') let loadingText=ref(' 下拉加载更多 ')
provide('count', dataCount) provide('count', dataCount)
//轮播
let bannerList = reactive({ data: [] })
let banner = () => {
api.banner({ type: 'home' }).then(res => {
if (res.code === 200) {
bannerList.data = res.data
}
})
}
//保存搜索设置 //保存搜索设置
let setSeachSelectData = (data) => { let setSeachSelectData = (data) => {
pages.value = 1 pages.value = 1
@@ -120,6 +130,7 @@ onMounted(() => {
percentPosition: true percentPosition: true
}); });
getDataList() getDataList()
banner()
window.addEventListener('scroll', downLoadMore, true); window.addEventListener('scroll', downLoadMore, true);
}) })

13
src/views/housingView/needHousing.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="box-min-1200-src"> <div class="box-min-1200-src">
<pageTopBar></pageTopBar> <pageTopBar :bannerList="bannerList.data"></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule> <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35" > <div class="body-maxWidth mg-t-35" >
@@ -52,6 +52,16 @@ let loading = ref(true)
let loadingText=ref(' 下拉加载更多 ') let loadingText=ref(' 下拉加载更多 ')
provide('count', dataCount) provide('count', dataCount)
//轮播
let bannerList = reactive({ data: [] })
let banner = () => {
api.banner({ type: 'home' }).then(res => {
if (res.code === 200) {
bannerList.data = res.data
}
})
}
//保存搜索设置 //保存搜索设置
let setSeachSelectData = (data) => { let setSeachSelectData = (data) => {
pages.value = 1 pages.value = 1
@@ -120,6 +130,7 @@ onMounted(() => {
gutter: 20, gutter: 20,
percentPosition: true percentPosition: true
}); });
banner()
getDataList() getDataList()
window.addEventListener('scroll', downLoadMore, true); window.addEventListener('scroll', downLoadMore, true);
}) })

13
src/views/housingView/person.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div class="box-min-1200-src"> <div class="box-min-1200-src">
<pageTopBar></pageTopBar> <pageTopBar :bannerList="bannerList.data"></pageTopBar>
<seachModule :getDataList="setSeachSelectData"></seachModule> <seachModule :getDataList="setSeachSelectData"></seachModule>
<div class="dis-f jus-x al-item"> <div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35"> <div class="body-maxWidth mg-t-35">
@@ -66,6 +66,16 @@ let setSeachSelectData = (data) => {
getDataList(seachSelectData.data) getDataList(seachSelectData.data)
} }
//轮播
let bannerList = reactive({ data: [] })
let banner = () => {
api.banner({ type: 'home' }).then(res => {
if (res.code === 200) {
bannerList.data = res.data
}
})
}
//获取搜索数据 //获取搜索数据
let getDataList = (data) => { let getDataList = (data) => {
loadingText.value=' 加载中..... ' loadingText.value=' 加载中..... '
@@ -134,6 +144,7 @@ onMounted(() => {
// seachSelectData.data = { [type]: typeData } // seachSelectData.data = { [type]: typeData }
// } // }
// } // }
banner()
getDataList(seachSelectData.data) getDataList(seachSelectData.data)
window.addEventListener('scroll', downLoadMore, true); window.addEventListener('scroll', downLoadMore, true);
}) })