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

条件搜索查询组件

Browse Source
This commit is contained in:
luJianJun
2023-07-11 17:40:27 +08:00
parent ba761c23b9
commit ff631f5816
17 changed files with 966 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/views/HomeView.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="home">
<pageTopBar></pageTopBar>
<!-- <pageTopBar></pageTopBar> -->
<header></header>
<!-- 搜索模块 -->
<seachModule></seachModule>
<!-- 房源展示 -->
@@ -51,29 +52,41 @@
<div class="information-right-box dis-f jus-bet">
<div class="dis-f jus-bet al-item">
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<img src="../assets/homeImage/informationRightBoxFirst.svg" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationO.png" class="img" alt="">
<img src="../assets/homeImage/firstCode.png" class="img" alt="">
<div>
微信扫码关注
</div>
</div>
</div>
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<img src="../assets/homeImage/informationRightBoxSecond.svg" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationT.png" class="img" alt="">
<img src="../assets/homeImage/secondCode.png" class="img" alt="">
<div>
微信扫码关注
</div>
</div>
</div>
</div>
<div class="dis-f jus-bet al-item">
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<img src="../assets/homeImage/informationRightBoxThird.svg" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationO.png" class="img" alt="">
<img src="../assets/homeImage/thirdCode.png" class="img" alt="">
<div>
微信扫码关注
</div>
</div>
</div>
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<img src="../assets/homeImage/informationRightBoxFourth.svg" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationT.png" class="img" alt="">
<img src="../assets/homeImage/fourthCode.png" class="img" alt="">
<div>
微信扫码关注
</div>
</div>
</div>
</div>
@@ -157,7 +170,8 @@ import listItem from "../components/apartmentList/apartmentList.vue";
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import seachModule from "../components/seachModule/seachModule.vue";
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue'
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
import header from '../components/public/head.vue'
//
let informationData = [
@@ -324,26 +338,36 @@ img {
background-color: rgba(255, 255, 255, 0);
border: none;
border-radius: 8px;
background: #000;
.img-list {
width: 149px;
height: 200px;
border-radius: 8px;
position: absolute;
top: 0;
left: 0;
background: #fff;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
text-align: center;
line-height: 24px;
display: none;
padding-top:30px;
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
}
}
.img-list {
width: 149px;
height: 200px;
border-radius: 8px;
position: absolute;
top: 0;
left: 0;
}
.img {
width: 149px;
height: 200px;
width: 110px;
height: 110px;
border-radius: 8px;
display: none;
}
.img-box:hover .img {
.img-box:hover .img-list {
display: block;
}
}
@@ -498,4 +522,5 @@ img {
font-size: 16px;
color: #7F7F7F;
text-align: left;
}</style>
}
</style>