gter.net/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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/assets/img/detail/infoBtnBg.svg Normal file
View 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
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="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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

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

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>