选项卡样式修改
This commit is contained in:
BIN
src/assets/img/detail/infoIcon.png
Normal file
BIN
src/assets/img/detail/infoIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 774 B |
6
src/assets/img/detail/videoStop.svg
Normal file
6
src/assets/img/detail/videoStop.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -444 -741 )">
|
||||
<path d="M 7.470703125 2.01171875 C 9.76888020833333 0.670572916666664 12.2786458333333 0 15 0 C 17.7213541666667 0 20.2311197916667 0.670572916666664 22.529296875 2.01171875 C 24.8274739583333 3.35286458333333 26.6471354166667 5.17252604166667 27.98828125 7.470703125 C 29.3294270833333 9.76888020833333 30 12.2786458333333 30 15 C 30 17.7213541666667 29.3294270833333 20.2311197916667 27.98828125 22.529296875 C 26.6471354166667 24.8274739583333 24.8274739583333 26.6471354166667 22.529296875 27.98828125 C 20.2311197916667 29.3294270833333 17.7213541666667 30 15 30 C 12.2786458333333 30 9.76888020833333 29.3294270833333 7.470703125 27.98828125 C 5.17252604166667 26.6471354166667 3.35286458333333 24.8274739583333 2.01171875 22.529296875 C 0.670572916666667 20.2311197916667 0 17.7213541666667 0 15 C 0 12.2786458333333 0.670572916666667 9.76888020833333 2.01171875 7.470703125 C 3.35286458333333 5.17252604166667 5.17252604166667 3.35286458333333 7.470703125 2.01171875 Z M 11.875 22.32421875 L 22.5 16.07421875 C 22.9166666666667 15.83984375 23.125 15.4817708333333 23.125 15 C 23.125 14.5182291666667 22.9166666666667 14.16015625 22.5 13.92578125 L 11.875 7.67578125 C 11.4713541666667 7.42838541666667 11.0546875 7.421875 10.625 7.65625 C 10.2083333333333 7.90364583333333 10 8.26822916666666 10 8.75 L 10 21.25 C 10 21.7317708333333 10.2083333333333 22.0963541666667 10.625 22.34375 C 10.8333333333333 22.4479166666667 11.0416666666667 22.5 11.25 22.5 C 11.4713541666667 22.5 11.6796875 22.44140625 11.875 22.32421875 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.8" transform="matrix(1 0 0 1 444 741 )" />
|
||||
</g>
|
||||
</svg>
|
||||
@@ -171,7 +171,7 @@ let seachList = (item) => {
|
||||
query: {
|
||||
keyword: seachAllType.keyword,
|
||||
isNeedHousing:routePath.value === '/needHousing',
|
||||
houseingPageType:routePath.value === '/needHousing'?6:routePath.value === '/intermediaryHousing'?1:routePath.value === '/personHousing'?0:''
|
||||
houseingPageType:routePath.value === '/needHousing'?6:routePath.value === '/intermediaryHousing'?1:routePath.value === '/personHousing'?0:0
|
||||
}
|
||||
})
|
||||
// if (routePath.value === '/') {
|
||||
|
||||
@@ -46,6 +46,14 @@
|
||||
</div>
|
||||
求房源
|
||||
</div>
|
||||
<div class="top-btn dis-f jus-x al-item second" v-if="isNeedHousing"
|
||||
@click="selectPage('intermediary')" :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
|
||||
<div class="first-select">
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-btn dis-f jus-x al-item second" v-if="!isNeedHousing"
|
||||
@click="selectPage('intermediary')" :class="{ 'select-top-btn-bg': tabType === 'intermediary' }">
|
||||
<div class="first-select" v-show="tabType === 'person'">
|
||||
@@ -77,6 +85,13 @@
|
||||
</div>
|
||||
学生公寓 {{ seachKey.key && seachKey.key.studentapartment && seachKey.key.studentapartment.count }}
|
||||
</div>
|
||||
<div class="top-btn dis-f jus-x al-item four" v-if="!isNeedHousing">
|
||||
<div class="second-select-third-box" v-show="tabType === 'apartment'">
|
||||
<div class="box">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="tabType === 'apartment'" :class="{ 'show-box-pd': !showSelectModule }">
|
||||
<apartmentSelect @handleTransfer="setSeachConditions" :seachPage="false" ref="apartmentSelectInfo">
|
||||
@@ -181,11 +196,11 @@ let selectTabBoxInfo = ref(null)//个人/中介筛选实例
|
||||
let apartmentSelectInfo = ref(null)//公寓筛选实例
|
||||
//设置请求数据
|
||||
let selectPage = (type) => {
|
||||
if(type===seachAllType['tabType'])return
|
||||
if (type === seachAllType['tabType']) return
|
||||
if (type === 'apartment') {
|
||||
selectTabBoxInfo.value.cleanSelect()//清空筛选数据
|
||||
} else {
|
||||
apartmentSelectInfo.value.cleanSelect&&apartmentSelectInfo.value.cleanSelect()
|
||||
apartmentSelectInfo.value.cleanSelect && apartmentSelectInfo.value.cleanSelect()
|
||||
}
|
||||
//清空数据
|
||||
if (type === 'apartment')
|
||||
@@ -369,15 +384,15 @@ let getLocationData = (data) => {
|
||||
}
|
||||
|
||||
//更新当前数据数量
|
||||
let setListCount=(item,num)=>{
|
||||
console.log(item,num)
|
||||
let setListCount = (item, num) => {
|
||||
console.log(item, num)
|
||||
console.log(seachKey.key)
|
||||
if(item.tabType==="intermediary"){
|
||||
seachKey.key['intermediary']['count']=num
|
||||
}else if(item.tabType==="person"){
|
||||
seachKey.key['personal']['count']=num
|
||||
}else if(item.tabType==="apartment"){
|
||||
seachKey.key['studentapartment']['count']=num
|
||||
if (item.tabType === "intermediary") {
|
||||
seachKey.key['intermediary']['count'] = num
|
||||
} else if (item.tabType === "person") {
|
||||
seachKey.key['personal']['count'] = num
|
||||
} else if (item.tabType === "apartment") {
|
||||
seachKey.key['studentapartment']['count'] = num
|
||||
}
|
||||
}
|
||||
|
||||
@@ -641,6 +656,31 @@ img {
|
||||
}
|
||||
}
|
||||
|
||||
.four {
|
||||
left:600px;
|
||||
bottom: 0;
|
||||
background: #62b1ff;
|
||||
|
||||
.second-select-third-box {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
top: 0;
|
||||
left: -4px;
|
||||
height: 45px;
|
||||
width: 30px;
|
||||
z-index: 88;
|
||||
|
||||
.box {
|
||||
border-radius: 0 0 0 16px;
|
||||
background: #62b1ff;
|
||||
height: 45px;
|
||||
width: 30px;
|
||||
position: absolute;
|
||||
left:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-btn {
|
||||
width: 200px;
|
||||
height: 45px;
|
||||
|
||||
@@ -51,16 +51,79 @@
|
||||
<img src="../assets/img/detail/imageIcon.png" class="img-icon" alt="">
|
||||
<div class="num-box">2</div>
|
||||
</div>
|
||||
<div>
|
||||
<img src="../assets/img/detail/moreNot.svg" alt="">
|
||||
<img src="../assets/img/detail/moreAllow.svg" alt="">
|
||||
<el-carousel indicator-position="outside" height="150" :autoplay="false" ref="imgCarousel">
|
||||
<el-carousel-item v-for="item in 1" :key="item">
|
||||
<div >
|
||||
|
||||
<div class="img-list-box dis-f jus-x al-item">
|
||||
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
|
||||
@click="moveImageList('left')">
|
||||
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
|
||||
@click="moveImageList('right')">
|
||||
<div class="dis-f al-item list-box" ref="imageList">
|
||||
<div v-for="(item, i) in imgList" :key="i">
|
||||
<div class="video" v-if="item === 1">
|
||||
<div class="icon-box dis-f jus-x al-item">
|
||||
<img src="../assets/img/detail/videoStop.svg" class="icon" alt="">
|
||||
</div>
|
||||
<img class="video" ref="imgData" src="" @load="setImageWidth(i)"
|
||||
@error="setImageWidth(i)" alt="">
|
||||
</div>
|
||||
<div class="img" v-if="item > 1"
|
||||
:style="{ 'background': i % 2 === 0 ? '#000' : '#eee' }">
|
||||
<img class="img" ref="imgData" src="" @load="setImageWidth(i)"
|
||||
@error="setImageWidth(i)" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="housing-info">
|
||||
<div class="title dis-f al-item">
|
||||
<img src="../assets/img/detail/infoIcon.png" class="img" alt="">
|
||||
<span>
|
||||
基本信息
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-box-s dis-f">
|
||||
<div class="info">
|
||||
<span>
|
||||
房屋类型
|
||||
</span>
|
||||
<span class="text">
|
||||
洋楼
|
||||
</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>
|
||||
所在楼层
|
||||
</span>
|
||||
<span class="text">
|
||||
28
|
||||
</span>|<span class="text">
|
||||
有电梯
|
||||
</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>
|
||||
晾晒区
|
||||
</span>
|
||||
<span class="text">
|
||||
阳台
|
||||
</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>
|
||||
面积
|
||||
</span>
|
||||
<span class="text">
|
||||
680 平方呎
|
||||
</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<span>
|
||||
性别要求
|
||||
</span>
|
||||
<span class="text">
|
||||
男女皆可
|
||||
</span>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -80,14 +143,47 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, onMounted, ref } from 'vue'
|
||||
import { reactive, onMounted, ref, nextTick } from 'vue'
|
||||
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
||||
import circleBtn from '@/components/public/circle-btn.vue'
|
||||
import api from "../utils/api";
|
||||
import footerTool from '@/components/footer/footer.vue'
|
||||
import breadcrumb from '../components/detail/breadcrumb.vue'
|
||||
|
||||
//视频实例
|
||||
let imageList = ref(null)
|
||||
|
||||
let imgList = ref([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20])
|
||||
|
||||
let imgListTab = ref(0)
|
||||
//计时器
|
||||
let interval = ''
|
||||
//点击方向按钮
|
||||
let moveImageList = (type) => {
|
||||
if ((type === 'left' && imgListTab.value === 0) || (imgListTab.value === imgList.value.length - 1 && type === 'right')) return
|
||||
type === 'left' ? imgListTab.value-- : imgListTab.value++
|
||||
setOffsetWidth(imgList.value[imgListTab.value] * imgListTab.value, type)
|
||||
}
|
||||
//设置滚动
|
||||
let setOffsetWidth = (num, type) => {
|
||||
let scroll = null
|
||||
interval = setInterval(() => {
|
||||
scroll = type === 'left' ? imageList.value.scrollLeft -= 10 : imageList.value.scrollLeft += 10
|
||||
if (num === scroll) {
|
||||
clearInterval(interval)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let imgData = ref(null)
|
||||
//获取图片宽度
|
||||
let setImageWidth = (num) => {
|
||||
imgList.value[num] = imgData.value[num].offsetWidth + 10
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
<style scoped>
|
||||
@@ -214,7 +310,7 @@ img {
|
||||
.img-icon {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin: 0 5px 0 10px
|
||||
margin: 0 5px 0 10px;
|
||||
}
|
||||
|
||||
.num-box {
|
||||
@@ -230,6 +326,116 @@ img {
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.img-list-box {
|
||||
padding: 0 20px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 100px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
margin-top: 20px;
|
||||
|
||||
.list-box::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.list-box {
|
||||
overflow-x: scroll;
|
||||
height: 100px;
|
||||
color: #fff;
|
||||
|
||||
.icon-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
background: rgba(51, 51, 51, 0.733333333333333);
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
|
||||
.icon {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.video {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border-radius: 10px;
|
||||
background: #000;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.img {
|
||||
height: 100px;
|
||||
width: 120px;
|
||||
border-radius: 10px;
|
||||
background: #000;
|
||||
margin-right: 10px;
|
||||
flex-shrink: 0
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 10px;
|
||||
height: 17px;
|
||||
}
|
||||
|
||||
.left-icon {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.right-icon {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.housing-info {
|
||||
margin-top: 50px;
|
||||
|
||||
.info-box-s {
|
||||
margin-top: 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.info {
|
||||
width: 150px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #7F7F7F;
|
||||
font-size: 14px;
|
||||
|
||||
.text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
margin-left:30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user