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 19:26:29 +08:00
parent 57b5448072
commit 600fd1a430
6 changed files with 159 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/detail.vue
View File

@@ -54,8 +54,12 @@
<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 left-icon" alt=""
style="transform: rotate(180deg);" @click="moveImageList('left')">
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
@click="moveImageList('right')">
<img src="../assets/img/detail/moreNot.svg" class="icon right-icon" alt=""
style="transform: rotate(180deg);" @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">
@@ -81,7 +85,7 @@
基本信息
</span>
</div>
<div class="info-box-s dis-f">
<div class="info-box-s">
<div class="info">
<span>
房屋类型
@@ -96,7 +100,7 @@
</span>
<span class="text">
28
</span>|<span class="text">
</span>|<span class="text" style="margin-left:0;">
有电梯
</span>
</div>
@@ -108,7 +112,7 @@
阳台
</span>
</div>
<div class="info">
<div class="info" style="margin-top:30px;">
<span>
面积
</span>
@@ -116,7 +120,7 @@
680 平方呎
</span>
</div>
<div class="info">
<div class="info" style="margin-top:30px;">
<span>
性别要求
</span>
@@ -126,6 +130,37 @@
</div>
</div>
</div>
<div class="map-box">
<div class="dis-f al-item title-box">
<img src="../assets/img/detail/mapIcon.png" class="img" alt="">
<span class="title">九龙 > 油麻地/旺角/太子</span>
</div>
<div class="dis-f jus-x" style="margin-top:15px;">
<div class="map-s">
<div class="pop-box">
<div class="address-box dis-f al-item jus-bet">
<div class="dis-f al-item">
<img src="../assets/img/detail/mapMarkIcon.png" class="img" alt="">
<span>独立大厦</span>
</div>
<img src="../assets/img/detail/moreNot.svg" class="icon" alt="">
</div>
</div>
</div>
</div>
</div>
<div class="dis-f jus-x">
<div class="distance-box dis-f jus-bet">
<div class="dis-f al-item">
<!-- <img src="../assets/img/detail/line.svg" class="line-img" alt=""> -->
<div class="line-img"></div>
</div>
<div class="info-btn-bg">
<img src="../assets/img/detail/infoBtnBg.svg" class="info-btn-bg" alt="">
</div>
</div>
</div>
</div>
<div>
<div></div>
@@ -402,10 +437,11 @@ img {
.info-box-s {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
.info {
width: 150px;
width: 276px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
@@ -418,7 +454,7 @@ img {
font-style: normal;
font-size: 16px;
color: #333;
margin-left:30px;
margin-left: 30px;
}
}
}
@@ -437,6 +473,98 @@ img {
color: #000000;
}
}
.map-box {
margin-top: 50px;
.title-box {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 20px;
color: #000000;
.img {
width: 20px;
height: 24px;
margin-right: 10px;
}
}
.map-s {
width: 100%;
height: 300px;
border-radius: 10px;
position: relative;
.pop-box {
position: absolute;
width: 100%;
height: 300px;
background-color: rgba(51, 51, 51, 0.298039215686275);
border-radius: 10px;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
.address-box {
width: 180px;
height: 40px;
background: inherit;
background-color: rgba(51, 51, 51, 0.8);
border: none;
border-radius: 10px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
color: #FFFFFF;
padding: 10px;
.img {
width: 22px;
height: 22px;
margin-right: 8px;
}
.icon {
width: 8px;
height: 12px;
transform: rotate(180deg);
}
}
}
}
}
.distance-box {
width: 100%;
height: 101px;
background: inherit;
background-color: rgba(255, 255, 255, 1);
box-sizing: border-box;
border-width: 1px;
border-style: solid;
border-color: rgba(242, 242, 242, 1);
border-radius: 12px;
margin-top:20px;
.line-img {
height: 1px;
width: 743px;
border: 1px dashed #d7d7d7;
}
.info-btn-bg {
width: 90px;
height: 101px;
}
}
}
</style>