4.6接接口和样式
This commit is contained in:
DESKTOP-RQ919RC\Pc
176
src/components/apartment/sameBrandItem.vue
Normal file
176
src/components/apartment/sameBrandItem.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<div class="same-brand-item" @click="gobrand(props.item)">
|
||||
<div class="same-brand-header">
|
||||
<img class="same-brand-img" v-lazy="props.item['image']" />
|
||||
<div class="apartment-name ellipsis">{{ props.item["title"] }}</div>
|
||||
<div class="apartment-synopsis ellipsis">{{ props.item["propaganda"] }}</div>
|
||||
</div>
|
||||
|
||||
<div class="site flexacenter">
|
||||
<img class="site-icon" src="@/assets/img/publicImage/location-icon.png" />
|
||||
<div class="site-text ellipsis">{{ props.item["address"] }}</div>
|
||||
</div>
|
||||
|
||||
<div class="price-box">
|
||||
<div class="price-item flexacenter" v-for="(it, i) in props.item['roomlist']" :key="i">
|
||||
<div class="room-name ellipsis flex1">{{ it["name"] }}</div>
|
||||
<div class="flexacenter">
|
||||
<div class="unit">HK$</div>
|
||||
<div class="quantity">{{ it["price"] }}</div>
|
||||
/月
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="same-brand-quantity flexcenter">
|
||||
共
|
||||
<div class="quantity">{{ props.item["roomnum"] }}</div>
|
||||
个房型
|
||||
<img class="same-brand-quantity-icon" src="@/assets/img/publicImage/black-arrow.svg" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { defineProps } from "vue"
|
||||
|
||||
const props = defineProps({
|
||||
item: Object,
|
||||
});
|
||||
|
||||
const gobrand = (item) => router.push(`/apartmentDetail?uniqid=${item.uniqid}`);
|
||||
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.same-brand-item {
|
||||
width: 304px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border-radius: 17px;
|
||||
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
|
||||
padding: 8px 0;
|
||||
margin-bottom: 20px;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.25686275);
|
||||
}
|
||||
|
||||
.same-brand-header {
|
||||
width: 288px;
|
||||
height: 192px;
|
||||
overflow: hidden;
|
||||
border-radius: 17px;
|
||||
margin: 0 auto 20px;
|
||||
position: relative;
|
||||
|
||||
.same-brand-img {
|
||||
width: 288px;
|
||||
height: 192px;
|
||||
object-fit: none;
|
||||
}
|
||||
|
||||
.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%);
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
padding: 0 15px;
|
||||
border-radius: 40px;
|
||||
width: max-content;
|
||||
line-height: 30px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.apartment-synopsis {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
background-color: rgba(0, 0, 0, 0.63921568627451);
|
||||
border-radius: 0 0 10px 10px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 13px;
|
||||
color: #d7d7d7;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.site {
|
||||
margin: 0 20px 20px;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
|
||||
.site-icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.price-box {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin: 0 20px 31px;
|
||||
|
||||
.price-item {
|
||||
justify-content: space-between;
|
||||
height: 50px;
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
}
|
||||
}
|
||||
|
||||
.room-name {
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.quantity {
|
||||
font-family: "Arial-Black", "Arial Black", sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 18px;
|
||||
color: #f95d5d;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.same-brand-quantity {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin: 21px auto;
|
||||
|
||||
.quantity {
|
||||
font-weight: 650;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
background-color: #fddf6d;
|
||||
border-radius: 9px;
|
||||
padding: 0 8px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.same-brand-quantity-icon {
|
||||
width: 7px;
|
||||
height: 12px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -97,7 +97,7 @@
|
||||
<div class="option-item flexflex" style="padding-bottom: 15px">
|
||||
<div class="option-title">标签筛选</div>
|
||||
<div class="option-box flexflex flex1">
|
||||
<div class="school-item flexcenter" :class="{ pitch: tag == '' }" @click="selectOption('nearSchool', 0)">不限</div>
|
||||
<div class="school-item flexcenter" :class="{ pitch: pitchValue['tag'] == '' }" @click="selectOption('tag', 0)">不限</div>
|
||||
<div class="school-item flexcenter" v-for="(item, index) in tagList" :key="index" :class="{ pitch: item == pitchValue['tag'] }" @click="selectOption('tag', item)">{{ item }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -41,23 +41,23 @@
|
||||
</div>
|
||||
|
||||
<div class="distance flexflex">
|
||||
<div class="figure flexacenter" v-if="item.distance?.distance">
|
||||
<div class="figure flexflex" v-if="item.distance?.distance">
|
||||
距离
|
||||
<div class="school">{{ item.distance.alias }}</div>
|
||||
<div class="mile">{{ item.distance.distance }}km</div>
|
||||
<div class="mile">{{ calculateDistance(item.distance.distance) }}km</div>
|
||||
</div>
|
||||
<div class="vehicle-list flex1 flexflex">
|
||||
<div class="vehicle-item flexacenter" v-if="item.distance?.walking_duration">
|
||||
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
|
||||
{{ item.distance.walking_duration }}
|
||||
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/walk-icon.png" />
|
||||
{{ calculateDuration(item.distance.walking_duration) }}
|
||||
</div>
|
||||
<div class="vehicle-item flexacenter" v-if="item.distance?.transit_duration">
|
||||
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
|
||||
{{ item.distance.transit_duration }}
|
||||
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/taxi-icon.png" />
|
||||
{{ calculateDuration(item.distance.transit_duration) }}
|
||||
</div>
|
||||
<div class="vehicle-item flexacenter" v-if="item.distance?.driving_duration">
|
||||
<img class="vehicle-icon" src="@/assets/img/publicImage/walk-icon.png" />
|
||||
{{ item.distance.driving_duration }}
|
||||
<img class="vehicle-icon" src="@/assets/img/apartmentDetail/subway-icon.png" />
|
||||
{{ calculateDuration(item.distance.driving_duration) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -98,7 +98,7 @@
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { redirectToExternalWebsite } from "@/utils/util.js";
|
||||
import { redirectToExternalWebsite, calculateDuration, calculateDistance } from "@/utils/util.js";
|
||||
const router = useRouter();
|
||||
|
||||
const props = defineProps({
|
||||
@@ -327,13 +327,13 @@ const loadload = () => {
|
||||
|
||||
.distance {
|
||||
padding: 0 12px 12px 29px;
|
||||
border-bottom: 1px dashed #d7d7d7;
|
||||
border-bottom: 1px dotted #d7d7d7;
|
||||
.figure {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
text-align: right;
|
||||
line-height: 26px;
|
||||
margin-right: 5px;
|
||||
line-height: 22px;
|
||||
margin-right: 8px;
|
||||
|
||||
.school {
|
||||
font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
|
||||
@@ -355,6 +355,7 @@ const loadload = () => {
|
||||
|
||||
.vehicle-item {
|
||||
height: 22px;
|
||||
line-height: 22px;
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
border: 1px solid rgba(127, 127, 127, 1);
|
||||
border-radius: 30px;
|
||||
@@ -362,6 +363,7 @@ const loadload = () => {
|
||||
color: #333333;
|
||||
padding: 0 8px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: 5px;
|
||||
|
||||
.vehicle-icon {
|
||||
width: 14px;
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, defineProps } from 'vue';
|
||||
import { ref, defineProps, defineExpose } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
latlng: Object,
|
||||
@@ -67,6 +67,11 @@ const showPop = () => {
|
||||
// map.addControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
|
||||
}
|
||||
|
||||
// 使用 defineExpose 暴露方法，这样父组件就能访问到
|
||||
defineExpose({
|
||||
showPop
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
Reference in New Issue
Block a user