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-21 18:39:20 +08:00
parent e3d74f85ec
commit 57b5448072
5 changed files with 274 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/detail/infoIcon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 774 B

6
src/assets/img/detail/videoStop.svg Normal file
View 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>

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

@@ -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 === '/') {

40
src/components/seachPage/input.vue
View File

@@ -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">
@@ -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;

228
src/views/detail.vue
View File

@@ -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>