可点击样式添加

2023-08-08 18:02:54 +08:00 · 2023-08-08 18:02:54 +08:00 · a05fe2de69
commit a05fe2de69
parent 8e7aefcce4
5 changed files with 102 additions and 50 deletions
--- a/src/components/detail/breadcrumb.vue
+++ b/src/components/detail/breadcrumb.vue
@ -1,14 +1,13 @@
 <template>
    <div class="pos-r" style="z-index: 1;">
-        <div class="authentication-top" 
-        :class="[pageType==2?'intermediary-top':'']"
-        v-if="data['data'] && data['data'].info && (data['data'].info.verified === 1||data['data'].isintermediary)">
+        <div class="authentication-top" :class="[pageType == 2 ? 'intermediary-top' : '']"
+            v-if="data['data'] && data['data'].info && (data['data'].info.verified === 1 || data['data'].isintermediary)">
            <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/authenticationTitle.png" class="title" alt="">
                </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/intermediaryDetailTItle.png" class="intermediaryDetail-title" alt="">
                </div>
@ -22,19 +21,22 @@
                    <div class="dis-f al-item" style="margin-left:20px;">
                        <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
                        <span>
-                            {{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明' }}
+                            {{ data['data'] && data['data'].info && data['data'].info.intermediary != 1 ? '房东身份证' : '身份证明'
+                            }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <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-s" :class="[pageType==2?'intermediary-bg':'']"></div>
+            <div class="top-round"
+                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 class="breadcrumb-box">
                <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">
                            {{ item.title }}
                        </span>
@ -47,8 +49,11 @@
                </div>
                <div class="tool-btn-box dis-f al-item">
                    <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="">
-                        <img src="../../assets/img/detail/collectT.png" v-show="!data.data.isfav" class="img-mouse" alt="">
+                        <div class="pos-r" style="width:20px;height:20px;">
+                            <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="">
                        <span class="mg-l-5">
                            {{ data.data.isfav ? data['data']['info'].count_fav : '收藏' }}
@ -96,17 +101,17 @@ let operation = props.operation
 //获取路由参数
 let router = useRouter()
 //页面类型
-let pageType=ref('')
-let {type}=router.currentRoute.value.query
-pageType.value=type
+let pageType = ref('')
+let { type } = router.currentRoute.value.query
+pageType.value = type
 //导航数据
-let storeData =reactive({})
-storeData['data']=store.state.routeList
+let storeData = reactive({})
+storeData['data'] = store.state.routeList

 watchEffect(() => {
    data['data'] = props.data
    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>
@ -179,21 +184,23 @@ img {
    font-style: normal;
    font-size: 15px;
    color: #FFFFFF;
-    .intermediaryDetail-logo{
-        width:25px;
-        height:20px;
-        margin-left:-8px;
+
+    .intermediaryDetail-logo {
+        width: 25px;
+        height: 20px;
+        margin-left: -8px;
    }
-    .intermediaryDetail-title{
-        width:77px;
-        height:20px;
-        margin-left:-3px;
+
+    .intermediaryDetail-title {
+        width: 77px;
+        height: 20px;
+        margin-left: -3px;
    }

    .logo {
        width: 20px;
        height: 20px;
-        margin-left:-8px;
+        margin-left: -8px;
    }

    .title {
@ -242,8 +249,9 @@ img {
            height: 24px;
            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;
        border-bottom: 1px solid #ebebeb;

-        .breadcrumb-text:hover{
-            color:#000;
+        .breadcrumb-text:hover {
+            color: #000;
            text-decoration: underline;
        }
+
        .breadcrumb-text {
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
@ -276,7 +285,7 @@ img {
            color: #000000;
            line-height: 35px;
            width: 820px;
-            word-wrap:break-word;
+            word-wrap: break-word;
        }

        .tool-btn-box {
@ -299,14 +308,16 @@ img {
                margin-left: 5px;
            }

-            .btn-s:hover .img-mouse{
-                display: block;
+            .btn-s:hover .img-mouse {
+                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 {
@ -320,17 +331,26 @@ img {
                line-height: 40px;
                cursor: pointer;

-                .img-mouse{
+                .img-mouse {
+                    position: absolute;
+                    top:0;
+                    left:0;
                    width: 20px;
                    height: 20px;
-                    opacity:0.4;
-                    display: none;
+                    opacity: 0;
+                    transition: all 0.2s linear;
                }
+
                .img {
+                    position: absolute;
+                    top:0;
+                    left:0;
                    width: 20px;
                    height: 20px;
-                    display: block;
+                    transition: all 0.2s linear;
+                    opacity: 1;
                }
+
                .img-t {
                    width: 20px;
                    height: 20px;
@ -348,6 +368,5 @@ img {
    }


-}
-</style>
+}</style>
  
--- a/src/components/pageTopBar/pageTopBar.vue
+++ b/src/components/pageTopBar/pageTopBar.vue
@ -1,7 +1,7 @@
 <template>
-  <div class="top-bg-img-box pos-r" :style="{ 'height': routePath === '/' ? '568px' : '260px' }">
-    <img src="../../assets/homeImage/indexBg.jpg" class="bg-img" alt="" v-if="routePath === '/'">
-    <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="routePath !== '/'">
+  <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="bannerLists.data.length">
+    <img src="../../assets//img/edit/bj-img1920.png" class="bg-img" alt="" v-if="!bannerLists.data.length">
    <div class="info-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()">
        </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">
          <el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
            <el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
--- a/src/views/housingView/intermediary.vue
+++ b/src/views/housingView/intermediary.vue
@ -1,6 +1,6 @@
 <template>
    <div class="box-min-1200-src">
-        <pageTopBar></pageTopBar>
+        <pageTopBar :bannerList="bannerList.data"></pageTopBar>
        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35" >
@ -51,6 +51,16 @@ let loading = ref(true)
 let loadingText=ref(' 下拉加载更多 ')
 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) => {
    pages.value = 1
@ -120,6 +130,7 @@ onMounted(() => {
        percentPosition: true
    });
    getDataList()
+    banner()
    window.addEventListener('scroll', downLoadMore, true);
 })

--- a/src/views/housingView/needHousing.vue
+++ b/src/views/housingView/needHousing.vue
@ -1,6 +1,6 @@
 <template>
    <div class="box-min-1200-src">
-        <pageTopBar></pageTopBar>
+        <pageTopBar :bannerList="bannerList.data"></pageTopBar>
        <seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35" >
@ -52,6 +52,16 @@ let loading = ref(true)
 let loadingText=ref(' 下拉加载更多 ')
 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) => {
    pages.value = 1
@ -120,6 +130,7 @@ onMounted(() => {
        gutter: 20,
        percentPosition: true
    });
+    banner()
    getDataList()
    window.addEventListener('scroll', downLoadMore, true);
 })
--- a/src/views/housingView/person.vue
+++ b/src/views/housingView/person.vue
@ -1,6 +1,6 @@
 <template>
    <div class="box-min-1200-src">
-        <pageTopBar></pageTopBar>
+        <pageTopBar :bannerList="bannerList.data"></pageTopBar>
        <seachModule :getDataList="setSeachSelectData"></seachModule>
        <div class="dis-f jus-x al-item">
            <div class="body-maxWidth mg-t-35">
@ -66,6 +66,16 @@ let setSeachSelectData = (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) => {
    loadingText.value=' 加载中..... '
@ -134,6 +144,7 @@ onMounted(() => {
    //         seachSelectData.data = { [type]: typeData }
    //     }
    // }
+    banner()
    getDataList(seachSelectData.data)
    window.addEventListener('scroll', downLoadMore, true);
 })