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-24 15:42:30 +08:00
parent 841d22d47b
commit 26c4b9c17b
33 changed files with 1773 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

207
src/components/detail/imageWatch.vue
View File

@@ -0,0 +1,207 @@
<template>
<div class="watch-box">
<div class="pos-r dis-f al-item mg-t-60">
<div class="s-w-100">
<el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
<el-carousel-item v-for="(item, i) in list" :key="i">
<div class="dis-f jus-x al-item">
<div class="img-box">
{{ item }}
<img src="" class="img" alt="">
</div>
</div>
</el-carousel-item>
</el-carousel>
</div>
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="next" alt="">
<img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="prev" alt="">
</div>
<div class="tab-text">
{{ `${imageTab + 1}/${list.length}` }}
</div>
<div class="dis-f jus-x al-item">
<div class="list-img-box dis-f al-item">
<div v-for="(item, i) in list" :key="i">
<div class="voide" :class="{ 'select-box': imageTab === i }">
<div class="icon-box dis-f jus-x al-item">
<img src="" class="icon" alt="">
</div>
</div>
<!-- <div class="img" :class="{ 'select-box': imageTab === i }"></div> -->
</div>
</div>
</div>
<img src="../../assets/img/detail/imageClose.svg" class="close-img" alt="">
</div>
</template>
<script setup>
import { reactive, onMounted, ref, defineProps } from 'vue'
const props = defineProps({
list: {
type: Array,
default: function () {
return [1, 2, 3, 4, 5]
}
}
})
let list = props.list
let carousel = ref(null)
let imageTab = ref(0)
//上一张
let prev = () => {
if (imageTab.value === list.length) return
imageTab.value++
carousel.value.prev()
console.log(imageTab.value)
}
//下一张
let next = () => {
if (imageTab.value <= 0) return
imageTab.value--
carousel.value.next()
console.log(imageTab.value)
}
</script>
<style scoped>
img {
object-fit: contain;
}
.dis-f {
display: flex;
}
.jus-x {
justify-content: center;
}
.al-item {
align-items: center;
}
.pos-r {
position: relative;
}
.body-maxWidth {
width: 1200px;
min-width: 1200px;
}
.s-w-100 {
width: 100%;
}
.jus-bet {
justify-content: space-between;
}
.close-img {
width: 20px;
height: 20px;
position: absolute;
right: 20px;
top: 20px;
}
.right-arrow {
right: 30px;
z-index: 66;
}
.left-arrow {
left: 30px;
z-index: 66;
transform: rotate(180deg);
}
.image-arrow-icon {
width: 18px;
height: 30px;
position: absolute;
}
.mg-t-60 {
margin-top: 60px;
}
.watch-box {
width: 100%;
height: 100%;
background: #4c4c4c;
position: fixed;
top: 0;
left: 0;
z-index: 999;
.tab-text {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
text-align: center;
padding: 20px 0;
}
.list-img-box {
overflow-x: scroll;
width: 800px;
height: 100px;
.select-box {
border: 1px solid #50e3c2;
}
.img {
height: 60px;
border: 1px solid transparent;
margin-left: 5px;
border-radius: 8px;
}
.voide {
width: 60px;
height: 60px;
border: 1px solid transparent;
margin-left: 5px;
border-radius: 8px;
.icon-box {
width: 60px;
height: 60px;
background: inherit;
background-color: rgba(51, 51, 51, 0.733333333333333);
border: none;
border-radius: 8px;
.icon {
width: 18px;
height: 18px;
}
}
}
}
.img-box {
width: 800px;
height: 600px;
background: #fff;
border-radius: 10px;
overflow: hidden;
.img {
height: 600px;
}
}
}
::-webkit-scrollbar {
display: none;
}
</style>