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

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>
</el-carousel-item>
</el-carousel>
<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>
</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>