详情
This commit is contained in:
12
src/assets/img/detail/infoBtnBg.svg
Normal file
12
src/assets/img/detail/infoBtnBg.svg
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="90px" height="101px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient gradientUnits="userSpaceOnUse" x1="1240.69879518072" y1="1382" x2="1072.6265060241" y2="1584" id="LinearGradient932">
|
||||||
|
<stop id="Stop933" stop-color="#50e3c2" offset="0" />
|
||||||
|
<stop id="Stop934" stop-color="#ffffff" stop-opacity="0.8" offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -1116 -1424 )">
|
||||||
|
<path d="M 1116 1424 L 1194 1424 A 12 12 0 0 1 1206 1436 L 1206 1513 A 12 12 0 0 1 1194 1525 L 1116 1525 L 1116 1424 Z " fill-rule="nonzero" fill="url(#LinearGradient932)" stroke="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
src/assets/img/detail/line.svg
Normal file
6
src/assets/img/detail/line.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="729px" height="5px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -389 -1473 )">
|
||||||
|
<path d="M 390 1475 L 1116 1475 " stroke-width="2" stroke-dasharray="2,2" stroke="#d7d7d7" fill="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
src/assets/img/detail/mapIcon.png
Normal file
BIN
src/assets/img/detail/mapIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/detail/mapMarkIcon.png
Normal file
BIN
src/assets/img/detail/mapMarkIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
7
src/assets/img/detail/markIcon.svg
Normal file
7
src/assets/img/detail/markIcon.svg
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="10px" height="10px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -432 -1470 )">
|
||||||
|
<path d="M 437 1471 C 439.24 1471 441 1472.76 441 1475 C 441 1477.24 439.24 1479 437 1479 C 434.76 1479 433 1477.24 433 1475 C 433 1472.76 434.76 1471 437 1471 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" />
|
||||||
|
<path d="M 437 1471 C 439.24 1471 441 1472.76 441 1475 C 441 1477.24 439.24 1479 437 1479 C 434.76 1479 433 1477.24 433 1475 C 433 1472.76 434.76 1471 437 1471 Z " stroke-width="2" stroke="#333333" fill="none" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
@@ -54,8 +54,12 @@
|
|||||||
<div class="img-list-box dis-f jus-x al-item">
|
<div class="img-list-box dis-f jus-x al-item">
|
||||||
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
|
<img src="../assets/img/detail/moreNot.svg" class="icon left-icon" alt=""
|
||||||
@click="moveImageList('left')">
|
@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=""
|
<img src="../assets/img/detail/moreAllow.svg" class="icon right-icon" alt=""
|
||||||
@click="moveImageList('right')">
|
@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 class="dis-f al-item list-box" ref="imageList">
|
||||||
<div v-for="(item, i) in imgList" :key="i">
|
<div v-for="(item, i) in imgList" :key="i">
|
||||||
<div class="video" v-if="item === 1">
|
<div class="video" v-if="item === 1">
|
||||||
@@ -81,7 +85,7 @@
|
|||||||
基本信息
|
基本信息
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-box-s dis-f">
|
<div class="info-box-s">
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<span>
|
<span>
|
||||||
房屋类型
|
房屋类型
|
||||||
@@ -96,7 +100,7 @@
|
|||||||
</span>
|
</span>
|
||||||
<span class="text">
|
<span class="text">
|
||||||
28
|
28
|
||||||
</span>|<span class="text">
|
</span>|<span class="text" style="margin-left:0;">
|
||||||
有电梯
|
有电梯
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -108,7 +112,7 @@
|
|||||||
阳台
|
阳台
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info" style="margin-top:30px;">
|
||||||
<span>
|
<span>
|
||||||
面积
|
面积
|
||||||
</span>
|
</span>
|
||||||
@@ -116,7 +120,7 @@
|
|||||||
680 平方呎
|
680 平方呎
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="info">
|
<div class="info" style="margin-top:30px;">
|
||||||
<span>
|
<span>
|
||||||
性别要求
|
性别要求
|
||||||
</span>
|
</span>
|
||||||
@@ -126,6 +130,37 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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>
|
||||||
<div></div>
|
<div></div>
|
||||||
@@ -402,10 +437,11 @@ img {
|
|||||||
|
|
||||||
.info-box-s {
|
.info-box-s {
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
||||||
.info {
|
.info {
|
||||||
width: 150px;
|
width: 276px;
|
||||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@@ -418,7 +454,7 @@ img {
|
|||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-left:30px;
|
margin-left: 30px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -437,6 +473,98 @@ img {
|
|||||||
color: #000000;
|
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>
|
</style>
|
||||||
|
|
||||||
Reference in New Issue
Block a user