Merge remote-tracking branch 'origin/main'
This commit is contained in:
commit
59c299a743
11
src/assets/img/apartmentDetail/apartment-facilities.svg
Normal file
11
src/assets/img/apartmentDetail/apartment-facilities.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter1188">
|
||||
<feColorMatrix type="matrix" values="4 0 0 0 -1.5 0 4 0 0 -1.5 0 0 4 0 -1.5 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -390 -4258 )">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="20" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAPKADAAQAAAABAAAAPAAAAACL3+lcAAAEuklEQVRoBe1b7XWbMBSNHf+vNwgDJKk7QfEEcTfIBvUGJRO0G6SdoM4ExhPU+RgAb+D+z0fvTfU4QggMSGDcRufoCElP793LE09CxkdHb+nfvgODOvQmk0nw/Px8gTzjuMFgELy8vAR1dLjKwmYCmwn1DIfDBfLNer1+rbNtV6pE+PT0NISiL8gs+5higLp6eHhgWZpKCcOj48fHx5/QEJZq6U9nPBqNPsHj2yJIw6IOkJ08PT39Qn9YJNPD9pCYib0Im9XDiuwSz8q4aGCf2/Gcb4+Pj6fw9NrEmSMMsmPepZJgtIGShcqmvi7rMxhjPrEZZXAD6Q/m9B6ZwuqZDcx2KPiNtvn9/f13s29P9Rh25+fn53M4J0J+p+OgwxSXqd6e8bCKxktdgNcki7sV2qaIKbuPunoEY5O0wjLVo7cZtLj0ZFLfyRIsHUGHqFmYwY9KhlNKGHcpQGeIbKZ5Xz2rAyVGEI70NnUdKm6v1ZSw7J6MAZsePbMGtHz17u7uG1oZVDNJ57aLMKPxoaUcZjzboZDIRWnpUGVusNFfq8olz9i57dwZ1TLwV5iYP+vjQHgs9dTDmP/W9UwEXUuStezcZGeUAnK1Yxuvc0sJc92yCftoU55d2mywDV5fUsaHLZsO3W5K2Cboo03IQtekRN+kbdJiu1XCFckKlk5It0a4JtnOSLdCuCHZTkh7J+xItnXSXgl7Itsqaa+Esc5+BdqyaCxkqpY8dbmuKlxFzhvhs7Oza6x3l1WM1pGBzhl11xlTJuuFcFtkBThvpC/SzoTbJuubtBNhnJDwaOVSQLVd0hZtuthxIgzDmdMEFyA1xjrZbExYnX/VwOlP1MV2Y8I44V/7o1BPk4vtxoRxhLTFe+ZNPaju0rRJ2001NSZMgzgpvEQxBYgfKFtNysZU2Wxsa9cRT6lidadjl2eq1IDWiQid6OfLWletSycP17LUE+H/jrDTlG7otFuMk6AzxvX7hnoaDeuMMIKO9fcpvFLyjajod6FGpMoGdTmlFwhyubVbtS3KQPrs64wwo2wR8LK+ojFN2zsj3BSg73FeCOPTIQlCvvGl+nzZ8EU4TpG1dMFvsnyo9kJYBZ6VD0AFOlawkRT01WrWCed+V62jCW8wM8hzjfWdbpVuF70pN51w4qIRHtgCWAgdV8ipAQed1HFFndTtoIdDExm/a+NBr8UivKtUwCLIMVdOeCmIIMzsIxFzJmHTk96w1MO2oADBi8zIA6jYMKMtFuilhLEhCPgdlAj3vVTfbAUmTt2ZA70T77Ux6h/1Nk4HvHRbP+PT5fZ9rfbkSzhpbGBZ4ZEJpS31sGqIpENKKsDmnr/QT6Stb2UJWUKNdLwZwupEYaUL8FpIY8pkPhYx5fZRJyY6hBhN+5idN+YpSWZKcwDuFr+0WePyxFTAOpQkKBYqo9hbmsHyDESDAgQbLGkTc0nLEeZgNUU6e0ctANy4GU6xvntTYWZKiwXclddvF1HfSNsBlRt+d0kONsxWD4ugmt6cvpnILf09LFfchoLrtghbKWEZpI5hI9T7SnwFbJEZoAS/XlYiLAPgcf6Nh4EiVFExQJ81uMmYFsoNdCbcHyDH3FTAo0kLdt5UHuQd+AO1oA/Q7pbtAQAAAABJRU5ErkJggg==" x="390px" y="4258px" filter="url(#filter1188)" />
|
||||
</g>
|
||||
</svg>
|
||||
12
src/assets/img/apartmentDetail/apartment-have.svg
Normal file
12
src/assets/img/apartmentDetail/apartment-have.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="40px" height="40px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="2.22044604925031E-15" y1="0" x2="40" y2="40" id="LinearGradient1189">
|
||||
<stop id="Stop1190" stop-color="#fdda55" offset="0" />
|
||||
<stop id="Stop1191" stop-color="#cbfebf" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -360 -846 )">
|
||||
<path d="M 40 10 L 40 40 C 40 17.6000000000001 22.9333333333334 0 1.20295161548821 0 L 30.3030303030303 0 C 35.7333333333334 0 40 4.39999999999998 40 10 Z " fill-rule="nonzero" fill="url(#LinearGradient1189)" stroke="none" transform="matrix(1 0 0 1 360 846 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
src/assets/img/apartmentDetail/apartment-not.svg
Normal file
12
src/assets/img/apartmentDetail/apartment-not.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="40px" height="40px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="2.22044604925031E-15" y1="0" x2="40" y2="40" id="LinearGradient1192">
|
||||
<stop id="Stop1193" stop-color="#000000" offset="0" />
|
||||
<stop id="Stop1194" stop-color="#f2f2f2" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -360 -1595 )">
|
||||
<path d="M 40 10 L 40 40 C 40 17.6000000000001 22.9333333333334 0 1.20295161548821 0 L 30.3030303030303 0 C 35.7333333333334 0 40 4.39999999999998 40 10 Z " fill-rule="nonzero" fill="url(#LinearGradient1192)" stroke="none" transform="matrix(1 0 0 1 360 1595 )" />
|
||||
</g>
|
||||
</svg>
|
||||
12
src/assets/img/apartmentDetail/blue-tick.svg
Normal file
12
src/assets/img/apartmentDetail/blue-tick.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="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="8.88178419700125E-16" y1="0" x2="16" y2="16" id="LinearGradient1195">
|
||||
<stop id="Stop1196" stop-color="#62b1ff" offset="0" />
|
||||
<stop id="Stop1197" stop-color="#80ffff" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M 13.1875 6.78125 C 13.3125 6.65625 13.375 6.5 13.375 6.3125 C 13.375 6.11805555555556 13.3125 5.95833333333333 13.1875 5.83333333333333 L 12.2395833333333 4.89583333333333 C 12.1076388888889 4.76388888888889 11.9513888888889 4.69791666666667 11.7708333333333 4.69791666666667 C 11.5902777777778 4.69791666666667 11.4340277777778 4.76388888888889 11.3020833333333 4.89583333333333 L 7.05208333333333 9.13541666666667 L 4.69791666666667 6.78125 C 4.56597222222222 6.64930555555556 4.40972222222222 6.58333333333333 4.22916666666667 6.58333333333333 C 4.04861111111111 6.58333333333333 3.89236111111111 6.64930555555556 3.76041666666667 6.78125 L 2.8125 7.71875 C 2.6875 7.84375 2.625 8.00347222222222 2.625 8.19791666666667 C 2.625 8.38541666666667 2.6875 8.54166666666667 2.8125 8.66666666666667 L 6.58333333333333 12.4375 C 6.71527777777778 12.5694444444444 6.87152777777778 12.6354166666667 7.05208333333333 12.6354166666667 C 7.23958333333333 12.6354166666667 7.39930555555556 12.5694444444444 7.53125 12.4375 L 13.1875 6.78125 Z M 14.9270833333333 3.984375 C 15.6423611111111 5.21006944444444 16 6.54861111111111 16 8 C 16 9.45138888888889 15.6423611111111 10.7899305555556 14.9270833333333 12.015625 C 14.2118055555556 13.2413194444444 13.2413194444444 14.2118055555556 12.015625 14.9270833333333 C 10.7899305555556 15.6423611111111 9.45138888888889 16 8 16 C 6.54861111111111 16 5.21006944444444 15.6423611111111 3.984375 14.9270833333333 C 2.75868055555556 14.2118055555556 1.78819444444444 13.2413194444444 1.07291666666667 12.015625 C 0.357638888888889 10.7899305555556 0 9.45138888888889 0 8 C 0 6.54861111111111 0.357638888888889 5.21006944444444 1.07291666666667 3.984375 C 1.78819444444444 2.75868055555556 2.75868055555556 1.78819444444444 3.984375 1.07291666666667 C 5.21006944444444 0.357638888888888 6.54861111111111 0 8 0 C 9.45138888888889 0 10.7899305555556 0.357638888888888 12.015625 1.07291666666667 C 13.2413194444444 1.78819444444444 14.2118055555556 2.75868055555556 14.9270833333333 3.984375 Z " fill-rule="nonzero" fill="url(#LinearGradient1195)" stroke="none" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
src/assets/img/apartmentDetail/group-title.png
Normal file
BIN
src/assets/img/apartmentDetail/group-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
src/assets/img/apartmentDetail/listing-details.png
Normal file
BIN
src/assets/img/apartmentDetail/listing-details.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 842 B |
BIN
src/assets/img/apartmentDetail/live.png
Normal file
BIN
src/assets/img/apartmentDetail/live.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 887 B |
BIN
src/assets/img/apartmentDetail/location-icon.png
Normal file
BIN
src/assets/img/apartmentDetail/location-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/apartmentDetail/mini-program-title.png
Normal file
BIN
src/assets/img/apartmentDetail/mini-program-title.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
src/assets/img/apartmentDetail/same-brand.png
Normal file
BIN
src/assets/img/apartmentDetail/same-brand.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
src/assets/img/apartmentDetail/scan-icon.png
Normal file
BIN
src/assets/img/apartmentDetail/scan-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 751 B |
11
src/assets/img/apartmentDetail/special-offer.svg
Normal file
11
src/assets/img/apartmentDetail/special-offer.svg
Normal file
@ -0,0 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="22px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<filter x="-50.00%" y="-50.00%" width="200.00%" height="200.00%" filterUnits="objectBoundingBox" id="filter1186">
|
||||
<feColorMatrix type="matrix" values="3.06666666666667 0 0 0 -1.03333333333333 0 3.06666666666667 0 0 -1.03333333333333 0 0 3.06666666666667 0 -1.03333333333333 0 0 0 1 0 " in="SourceGraphic" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -390 -1877 )">
|
||||
<image preserveAspectRatio="none" style="overflow:visible" width="20" height="22" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA2CAYAAACFrsqnAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAMqADAAQAAAABAAAANgAAAACASwlrAAADJElEQVRoBe1Z2ZHaQBBdAf8mA+N/KOQIrI3AhGBHsLsRLERgMjAbgckAiMDi+DebAfxz+D15WjUSQtJoGYp1zVRR3er7dY+Ejrs7t1wHrHTAe2tU3/db+/3+I+Msl8uZSTz4NuHbNfXLylEZCIrwd7vdDwQN9MCe543q9fpTGIYbXa7z7Xb7GXaPx+OxKXLlN4DfWmQmtBIQFBIgySQnUdhoNO7TYDgBgKefn+ULMBs0gX5hlj5PVstTZulYDBL+Eh34F/D3tVrtCfRVyX1smaHYCAWIPngBQduB+kV+nBD8JswBudHyjKxhjGn0QZ7px+IXi0VcsOr4FKou9ZjKJ9kq0LUA5A/lWK/Q+dBteEA/ABgByFcep+NSVrSMJ4KAAYNiElsdBGUsDPI+eS4U/viPS/K0ERDUk8eWim0Ph0NP/MrSKkAk9lEYneIKNMZxtFVQcNRh6oUH3cJmRJm+AGatHX/R+FJso5RVhpF+xclQE8wDbFrYNj71mE6LFIu6k0U72Ih8LkxZajwRdHQtwTudzk/hUzQuFsX1+NP0U42PWGDg1SyOhRxh2qbo2PhkV537LYEVsDGTYwJrkYOfKn6maLRdcCJ/0+ya4H34UtZSdomLhMiKqDEQBsSVawjyUBRc9Ch0g0KbcpxHYfs96xzK86HuBAi2Sw9JyxQZFAU31SvAhdsKdi9psAkg6W1jWsg17fE/9BlXuhh04mTHCVdq/Ncs+FyudK0JIOec3oPcAbm1KbmJuIlY6oDbWpYaWzmsm0jl1llyTEwE9y+8dzF+qLFUW17Y+Wq1muoGiZtGKtRDjq8b3RrPhmNtbq2ui9RzMhE9Km/r8Zrmgy4z4fHMMBN7ThqxunJcheJNy1a/dddj5L58wK3yEMbGbzS0BHGjEIvbdaLpjFnEYGOCLMfEyZ5l8F5kDsitTcpNxE3EUgfc1rLU2Mph3UQqt86So5uIpcZWDusmUrl1lhxzJ8LvFZbyXjxsEZDpxTO+ISA+243PuecCUd/Rb+VlxDz9XV8HlQuEhnhbwSe7AX7xYyvlV1zMO8ALh+CKOV0q14H/rgN/AVikJfj7A8KQAAAAAElFTkSuQmCC" x="390px" y="1877px" filter="url(#filter1186)" />
|
||||
</g>
|
||||
</svg>
|
||||
@ -8,7 +8,6 @@ import { ref, watch, onMounted, getCurrentInstance, nextTick, createApp } from '
|
||||
import store from '@/store/index';
|
||||
|
||||
|
||||
console.log("store", store);
|
||||
let showLoginModal = ref(false);
|
||||
|
||||
watch(() => store.state.showloginmodal, (newValue) => {
|
||||
|
||||
@ -23,37 +23,175 @@
|
||||
</div>
|
||||
<div class="details-box flexflex">
|
||||
<div class="details-left flex1">
|
||||
<div class="type-box">
|
||||
<div class="type-item">
|
||||
<!-- 类型数据 -->
|
||||
<!-- <div class="type-box" v-if="roomList.length != 0"> -->
|
||||
<div class="type-box" v-if="false">
|
||||
<div class="type-item flexacenter" v-for="item in roomList">
|
||||
<img class="type-icon" v-if="item['status'] == 1"
|
||||
src="@/assets/img/apartmentDetail/apartment-have.svg" />
|
||||
<img class="type-icon" v-else src="@/assets/img/apartmentDetail/apartment-not.svg" />
|
||||
<div class="type-left flex1">
|
||||
<div class="type-name">双人套间A</div>
|
||||
<div class="type-name">{{ item['name'] }}</div>
|
||||
<div class="type-tags flexacenter">
|
||||
<div class="tags-item flexcenter" :class="{ 'first': item == 1 }" v-for="item in 4">仅剩1间
|
||||
</div>
|
||||
<div class="tags-item flexcenter first" v-if="item.allowance">仅剩{{ item.allowance }}间</div>
|
||||
<div class="tags-item flexcenter" v-for="it in item.tags">{{ it }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="media-box flexflex">
|
||||
<div class="media-item flexcenter" v-for="item in 5">
|
||||
<img class="media-img"
|
||||
src="https://axure-file.lanhuapp.com/md5__c1c85f2680e7e9a2026de4d381081fc6.svg">
|
||||
<div class="media-item flexcenter" v-for="it in item['videos']">
|
||||
<img class="media-img" :src="it['thumbnail']">
|
||||
<img class="media-icon" src="@/assets/img/apartmentDetail/media-icon.svg" />
|
||||
</div>
|
||||
<div class="media-item flexcenter" v-for="it in item['images']">
|
||||
<img class="media-img" :src="it['thumbnail']">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="type-right">
|
||||
<div class="type-right flexacenter">
|
||||
<div class="price-box flexflex">
|
||||
<div class="former">HK$ 7600/月</div>
|
||||
<div class="former">HK$ {{ item['price'] }}/月</div>
|
||||
<div class="new flexacenter">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="cost">8200</div>
|
||||
<div class="cost">{{ item['discountprice'] }}</div>
|
||||
/月
|
||||
</div>
|
||||
</div>
|
||||
<div class="consult-btn flexcenter">咨询</div>
|
||||
<div class="consult-btn flexcenter" v-if="item['status'] == 1">咨询</div>
|
||||
<div class="full-occupancy flexcenter" v-else>已租满</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 优惠活动 -->
|
||||
<!-- <div class="details-item special-offer" v-if="info['promotionalactivities']"> -->
|
||||
<div class="details-item special-offer" v-if="false">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/special-offer.svg">
|
||||
优惠活动
|
||||
</div>
|
||||
<div class="text" v-html="info['promotionalactivities']"></div>
|
||||
</div>
|
||||
|
||||
<!-- 地址 -->
|
||||
<div class="details-item location" v-if="false">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/location-icon.png">
|
||||
{{ info.location || '位置' }}
|
||||
</div>
|
||||
|
||||
<!-- 交通 -->
|
||||
<div class="traffic-box" v-if="info['traffic']">
|
||||
<div class="traffic-title item-title flexcenter">交通</div>
|
||||
<div class="traffic-content" v-html="info['traffic']"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 房源详情 -->
|
||||
<!-- <div class="details-item special-offer" v-if="info['message']"> -->
|
||||
<div class="details-item listing-details" v-if="false">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/listing-details.png">
|
||||
房源详情
|
||||
</div>
|
||||
<div class="text" v-html="info['message']"></div>
|
||||
</div>
|
||||
|
||||
<!-- 公寓设施 -->
|
||||
<div class="details-item apartment-facilities" v-if="info['message']">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/apartment-facilities.svg">
|
||||
公寓设施
|
||||
</div>
|
||||
<div class="facilities-box">
|
||||
<div class="facilities-item flexflex" v-for="(item, key) of facilitiesKeyValue">
|
||||
<div class="facilities-header flexflex">
|
||||
<div class="item-title">{{ item }}</div>
|
||||
</div>
|
||||
<div class="facilities-list flexflex flex1">
|
||||
<div class="item flexcenter" v-for="it in info['facilities'][key]">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/blue-tick.svg" />
|
||||
{{ it }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 生活 -->
|
||||
<!-- <div class="details-item life" v-if="info['life']"> -->
|
||||
<div class="details-item life" v-if="false">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/live.png">
|
||||
生活
|
||||
</div>
|
||||
<div class="text" v-html="info['life']"></div>
|
||||
</div>
|
||||
|
||||
<!-- 品牌介绍 -->
|
||||
<!-- <div class="details-item company" v-if="company"> -->
|
||||
<div class="details-item company" v-if="false">
|
||||
<div class="details-header flexacenter">
|
||||
<img class="icon" src="@/assets/img/apartmentDetail/live.png">
|
||||
品牌介绍
|
||||
</div>
|
||||
<img class="company-img flexflex" :src="company['imageurl']">
|
||||
<div class="text" v-html="company['introduction']"></div>
|
||||
</div>
|
||||
|
||||
<div class="details-item hint-box">
|
||||
<div class="hint-item">
|
||||
温馨提示：房源信息均由公寓方/酒店提供并对其真实性、合法性等负责，平台不负责甄别和审核具体内容真实性和有效性等，请务必仔细核实相关信息，谨防上当受骗。
|
||||
</div>
|
||||
<div class="hint-item"></div>
|
||||
<div class="hint-item flexacenter">
|
||||
公寓/酒店/中介房源推广合作请联系：<a href="mailto:ad@gter.net">ad@gter.net</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="details-right flexacenter">
|
||||
<div class="QRcode-box apartment-QRcode flexflex" v-if="false">
|
||||
<img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png">
|
||||
<div class="QRcode-case flexcenter">
|
||||
<img class="QRcode-img" src="" alt="">
|
||||
</div>
|
||||
|
||||
<div class="apartment-QRcode-hint flexacenter">
|
||||
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
|
||||
手机查看该公寓
|
||||
</div>
|
||||
</div>
|
||||
<div class="QRcode-box group-QRcode flexflex" v-if="false">
|
||||
<img class="group-title" src="@/assets/img/apartmentDetail/group-title.png">
|
||||
<div class="QRcode-case flexcenter">
|
||||
<img class="QRcode-img" src="" alt="">
|
||||
</div>
|
||||
|
||||
<div class="group-QRcode-hint flexacenter">
|
||||
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png">
|
||||
入群请添加
|
||||
<b>方同学的小助手</b>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 同品牌公寓 -->
|
||||
<div class="same-brand-title flexcenter">
|
||||
<img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand.png">
|
||||
同品牌其他公寓
|
||||
</div>
|
||||
|
||||
<div class="same-brand-list">
|
||||
<div class="same-brand-item">
|
||||
<div class="same-brand-header">
|
||||
<img class="same-brand-img"
|
||||
src="https://axure-file.lanhuapp.com/md5__27da7a1a511d30b97b139f58626415e5.svg" />
|
||||
<div class="apartment-name">ZHELI這裡佐敦学生公寓</div>
|
||||
<div class="apartment-synopsis"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -62,12 +200,38 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
|
||||
|
||||
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
|
||||
|
||||
const uniqid = "1qfWOLTPbyPH"
|
||||
const uniqid = "zXGnbKbee4Kb"
|
||||
const { proxy } = getCurrentInstance()
|
||||
|
||||
// 房间类型
|
||||
let roomList = ref([])
|
||||
let info = ref({})
|
||||
|
||||
let facilitiesKeyValue = { // 设施的键值对
|
||||
public: "公共",
|
||||
kitchen: "餐厨",
|
||||
lavatory: "洗手间",
|
||||
}
|
||||
|
||||
let company = {} // 品牌数据
|
||||
|
||||
proxy.$get("/tenement/pc/api/apartment/details", { uniqid }).then(res => {
|
||||
console.log(res.data, "res");
|
||||
if (res.code != 200) return
|
||||
let data = res.data
|
||||
roomList.value = data['roomList']
|
||||
info.value = data['info']
|
||||
|
||||
company = data['company']
|
||||
|
||||
console.log(company);
|
||||
})
|
||||
|
||||
|
||||
let input = ref("")
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@ -115,6 +279,7 @@ let input = ref("")
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
font-size: 14px;
|
||||
padding: 0 30px;
|
||||
margin-bottom: 20px;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-box {
|
||||
@ -174,14 +339,12 @@ let input = ref("")
|
||||
|
||||
.details-box {
|
||||
justify-content: space-between;
|
||||
height: 100px;
|
||||
background-color: #FDDA55;
|
||||
align-items: flex-start;
|
||||
|
||||
.details-left {
|
||||
.type-box {
|
||||
.type-item {
|
||||
width: 876px;
|
||||
height: 230px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
@ -189,6 +352,18 @@ let input = ref("")
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
font-size: 14px;
|
||||
padding: 30px;
|
||||
margin-bottom: 20px;
|
||||
position: relative;
|
||||
|
||||
.type-icon {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
|
||||
.type-left {
|
||||
|
||||
@ -196,9 +371,12 @@ let input = ref("")
|
||||
font-weight: 650;
|
||||
font-size: 20px;
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.type-tags {
|
||||
margin-bottom: 20px;
|
||||
|
||||
.tags-item {
|
||||
height: 24px;
|
||||
background-color: rgba(242, 242, 242, 1);
|
||||
@ -220,11 +398,16 @@ let input = ref("")
|
||||
.media-box {
|
||||
.media-item {
|
||||
position: relative;
|
||||
height: 80px;
|
||||
|
||||
margin-right: 10px;
|
||||
|
||||
|
||||
.media-img {}
|
||||
.media-img {
|
||||
// width: 76px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.media-icon {
|
||||
position: absolute;
|
||||
@ -242,21 +425,36 @@ let input = ref("")
|
||||
.price-box {
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
margin-right: 20px;
|
||||
|
||||
.former {
|
||||
color: #AAAAAA;
|
||||
font-size: 14px;
|
||||
text-decoration: line-through;
|
||||
text-decoration-color: #797979;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.new {
|
||||
|
||||
.unit {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.cost {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 24px;
|
||||
color: #F95D5D;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
align-items: baseline;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
}
|
||||
}
|
||||
|
||||
@ -272,14 +470,313 @@ let input = ref("")
|
||||
color: #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.full-occupancy {
|
||||
width: 90px;
|
||||
height: 40px;
|
||||
background-color: rgba(237, 246, 255, 0);
|
||||
border: 1px solid rgba(215, 215, 215, 1);
|
||||
border-radius: 36px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #AAAAAA;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.item-title {
|
||||
padding: 0 11px;
|
||||
height: 26px;
|
||||
background-color: rgba(51, 51, 51, 1);
|
||||
border-radius: 8px;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 26px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.details-item {
|
||||
width: 876px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.details-header {
|
||||
height: 82px;
|
||||
padding: 0 30px;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 22px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
line-height: 30px;
|
||||
padding: 20px 30px;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
.traffic-box {
|
||||
padding: 0 30px;
|
||||
|
||||
.traffic-title {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #555555;
|
||||
line-height: 30px;
|
||||
white-space: pre-line;
|
||||
padding-bottom: 30px;
|
||||
}
|
||||
|
||||
|
||||
&.apartment-facilities {
|
||||
|
||||
.facilities-box {
|
||||
padding: 30px;
|
||||
|
||||
.facilities-item {
|
||||
align-items: flex-start;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.facilities-header {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.facilities-list {
|
||||
flex-wrap: wrap;
|
||||
|
||||
.item {
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
color: #333333;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 50px;
|
||||
|
||||
.icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.company {
|
||||
.company-img {
|
||||
width: 420px;
|
||||
height: 254px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.hint-box {
|
||||
color: #7F7F7F;
|
||||
line-height: 24px;
|
||||
font-size: 13px;
|
||||
padding: 30px;
|
||||
|
||||
.hint-item {
|
||||
min-height: 24px;
|
||||
|
||||
a {
|
||||
color: #7F7F7F;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.details-right {
|
||||
width: 304px;
|
||||
flex-direction: column;
|
||||
|
||||
.QRcode-box {
|
||||
width: 304px;
|
||||
height: 304px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.scan-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
&.apartment-QRcode {
|
||||
padding: 40px 0;
|
||||
|
||||
.mini-program-title {
|
||||
width: 201px;
|
||||
height: 24px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.QRcode-case {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 70px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||||
margin-bottom: 33px;
|
||||
|
||||
.QRcode-img {
|
||||
width: 103px;
|
||||
height: 103px;
|
||||
}
|
||||
}
|
||||
|
||||
.apartment-QRcode-hint {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&.group-QRcode {
|
||||
padding: 40px 0;
|
||||
|
||||
.group-title {
|
||||
width: 140px;
|
||||
height: 26px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.QRcode-case {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 15px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12156862745098);
|
||||
margin-bottom: 28px;
|
||||
|
||||
.QRcode-img {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.group-QRcode-hint {
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
|
||||
b {
|
||||
font-size: 14px;
|
||||
color: #000;
|
||||
font-weight: 650;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.same-brand-title {
|
||||
margin-bottom: 20px;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
background: -webkit-linear-gradient(350.348166533196deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
|
||||
background: -moz-linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
|
||||
background: linear-gradient(99.6518334668042deg, rgba(253, 218, 85, 1) 0%, rgba(229, 215, 190, 1) 50%, rgba(203, 254, 191, 1) 100%);
|
||||
border-radius: 12px;
|
||||
width: 304px;
|
||||
height: 60px;
|
||||
border: 5px solid #fff;
|
||||
position: relative;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: #fff;
|
||||
transform: rotate(45deg) translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: -14px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.same-brand-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.same-brand-list {
|
||||
.same-brand-item {
|
||||
width: 304px;
|
||||
height: 440px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 17px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
|
||||
|
||||
.same-brand-header {
|
||||
width: 288px;
|
||||
height: 192px;
|
||||
overflow: hidden;
|
||||
border-radius: 20px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
|
||||
.same-brand-img {
|
||||
width: 288px;
|
||||
height: 192px;
|
||||
}
|
||||
|
||||
.apartment-name {
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
padding: 0 15px;
|
||||
height: 32px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
.apartment-synopsis {}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user