From 600fd1a430bf6d6b75e5053fd4a7fda61dd7f53f Mon Sep 17 00:00:00 2001 From: luJianJun <2587063613@qq.com> Date: Fri, 21 Jul 2023 19:26:29 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AF=A6=E6=83=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/detail/infoBtnBg.svg | 12 +++ src/assets/img/detail/line.svg | 6 ++ src/assets/img/detail/mapIcon.png | Bin 0 -> 1220 bytes src/assets/img/detail/mapMarkIcon.png | Bin 0 -> 1686 bytes src/assets/img/detail/markIcon.svg | 7 ++ src/views/detail.vue | 140 ++++++++++++++++++++++++-- 6 files changed, 159 insertions(+), 6 deletions(-) create mode 100644 src/assets/img/detail/infoBtnBg.svg create mode 100644 src/assets/img/detail/line.svg create mode 100644 src/assets/img/detail/mapIcon.png create mode 100644 src/assets/img/detail/mapMarkIcon.png create mode 100644 src/assets/img/detail/markIcon.svg diff --git a/src/assets/img/detail/infoBtnBg.svg b/src/assets/img/detail/infoBtnBg.svg new file mode 100644 index 0000000..d0a2e8e --- /dev/null +++ b/src/assets/img/detail/infoBtnBg.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/img/detail/line.svg b/src/assets/img/detail/line.svg new file mode 100644 index 0000000..ec94f67 --- /dev/null +++ b/src/assets/img/detail/line.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/src/assets/img/detail/mapIcon.png b/src/assets/img/detail/mapIcon.png new file mode 100644 index 0000000000000000000000000000000000000000..1d0f967dbb7c2ac6494175f2b30dc009291568ee GIT binary patch literal 1220 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 literal 0 HcmV?d00001 diff --git a/src/assets/img/detail/markIcon.svg b/src/assets/img/detail/markIcon.svg new file mode 100644 index 0000000..fac307c --- /dev/null +++ b/src/assets/img/detail/markIcon.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/src/views/detail.vue b/src/views/detail.vue index fded4fd..b5be0f0 100644 --- a/src/views/detail.vue +++ b/src/views/detail.vue @@ -54,8 +54,12 @@
+ +
@@ -81,7 +85,7 @@ 基本信息
-
+
房屋类型 @@ -96,7 +100,7 @@ 28 - | + | 有电梯
@@ -108,7 +112,7 @@ 阳台
-
+
面积 @@ -116,7 +120,7 @@ 680 平方呎
-
+
性别要求 @@ -126,6 +130,37 @@
+
+
+ + 九龙 > 油麻地/旺角/太子 +
+
+
+
+
+
+ + 独立大厦 +
+ +
+
+
+
+
+
+
+
+ +
+
+
+ +
+
+
+
@@ -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; + } + } } \ No newline at end of file