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>
|
||||
|
||||
Reference in New Issue
Block a user