首页
This commit is contained in:
102
src/components/apartmentList/apartmentList.vue
Normal file
102
src/components/apartmentList/apartmentList.vue
Normal file
@@ -0,0 +1,102 @@
|
||||
<template>
|
||||
<div class="list-item">
|
||||
<div class="item-title">
|
||||
安怡居 | 旺角毓成楼
|
||||
</div>
|
||||
<div class="item-text">
|
||||
大学认可校外宿舍 ，24小时保安洋楼
|
||||
</div>
|
||||
<div class="item-img-box">
|
||||
<div class="img-box">
|
||||
<img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
|
||||
<img src="../../assets/homeImage/voide.svg" class="img" alt="">
|
||||
</div>
|
||||
<div class="img-box">
|
||||
<img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
|
||||
<img src="../../assets/homeImage/voide.svg" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
List: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.list-item {
|
||||
width: 291px;
|
||||
background: -webkit-linear-gradient(282.684800209667deg, rgba(255, 255, 255, 1) 27%, rgba(98, 177, 255, 1) 325%);
|
||||
background: -moz-linear-gradient(167.315199790333deg, rgba(255, 255, 255, 1) 27%, rgba(98, 177, 255, 1) 325%);
|
||||
background: linear-gradient(167.315199790333deg, rgba(255, 255, 255, 1) 27%, rgba(98, 177, 255, 1) 325%);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(229, 232, 240, 1);
|
||||
border-radius: 16px;
|
||||
padding: 15px 20px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
|
||||
.item-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.item-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: left;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.item-img-box {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
|
||||
.img-box {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.item-img {
|
||||
width: 120px;
|
||||
height: 80px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
172
src/components/checkGroup/checkBoxGroup.vue
Normal file
172
src/components/checkGroup/checkBoxGroup.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div class="seach-box" :class="{ 'seach-history-h': show }">
|
||||
<div class="seach-info-box">
|
||||
<div class="select-module-box">
|
||||
<div class="top-box" @click="checkList.value.splice(0, checkList.value.length)">
|
||||
<img src="../../assets/homeImage/topTitleIcon.svg"
|
||||
v-show="!checkList.value || (checkList.value && !checkList.value.length)" class="img" alt="">
|
||||
<div class="none-btn" v-show="(checkList.value && checkList.value.length)"></div>
|
||||
<span :class="[(checkList.value && checkList.value.length) ? 'none-title' : 'title']">不限</span>
|
||||
</div>
|
||||
<div style="padding-top:10px;">
|
||||
<el-checkbox-group v-model="checkList.value">
|
||||
<el-checkbox label="复选框 A"></el-checkbox>
|
||||
<el-checkbox label="复选框 B"></el-checkbox>
|
||||
<el-checkbox label="复选框 C"></el-checkbox>
|
||||
<el-checkbox label="复选框 D"></el-checkbox>
|
||||
<el-checkbox label="复选框 E"></el-checkbox>
|
||||
<el-checkbox label="复选框 F"></el-checkbox>
|
||||
<el-checkbox label="复选框 G"></el-checkbox>
|
||||
<el-checkbox label="复选框 H"></el-checkbox>
|
||||
<el-checkbox label="复选框 I"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
<div class="seach-check-btn-box">
|
||||
<div class="true-btn seach-btn" @click="selectSeach">选好了</div>
|
||||
<div class="seach-btn" @click="closeSeach">取消</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive } from 'vue';
|
||||
//
|
||||
let checkList = reactive([])
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
list: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
closeSeach:{
|
||||
type:Function,
|
||||
},
|
||||
selectSeach:{
|
||||
type:Function
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.seach-history-h {
|
||||
max-height: 500px !important;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.seach-box {
|
||||
position: absolute;
|
||||
top: 100px;
|
||||
z-index: 666;
|
||||
width: 100%;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
.seach-info-box {
|
||||
width: 100%;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
|
||||
.seach-check-btn-box {
|
||||
width: 100%;
|
||||
border-top: 1px solid #ebebeb;
|
||||
padding: 20px 20px 25px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.seach-btn {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(98, 177, 255, 0);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(170, 170, 170, 1);
|
||||
border-radius: 150px;
|
||||
-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: 15px;
|
||||
color: #555555;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.true-btn {
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: 1px solid rgba(98, 177, 255, 1);
|
||||
color: #FFFFFF;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-module-box {
|
||||
padding: 25px 20px 20px 20px;
|
||||
|
||||
.top-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px dashed #ebebeb;
|
||||
padding-bottom: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.none-btn {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.none-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
74
src/components/indexRegularBox/indexRegularBox.vue
Normal file
74
src/components/indexRegularBox/indexRegularBox.vue
Normal file
@@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="regular-box">
|
||||
<div class="btn-s first-bg">
|
||||
<img src="../../assets/homeImage/indexRegularFirst.png" class="first" alt="">
|
||||
</div>
|
||||
<div class="btn-s other-bg mg-t-15">
|
||||
<img src="../../assets/homeImage/indexRegularSecond.svg" class="other-img" alt="">
|
||||
</div>
|
||||
<div class="btn-s other-bg mg-t-15">
|
||||
<img src="../../assets/homeImage/indexRegularThird.svg" class="other-img" alt="">
|
||||
</div>
|
||||
<el-badge :value="12" class="mg-t-15">
|
||||
<div class="btn-s other-bg">
|
||||
<img src="../../assets/homeImage/indexRegularFourth.svg" class="other-img" alt="">
|
||||
</div>
|
||||
</el-badge>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
List: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.regular-box {
|
||||
position: fixed;
|
||||
right: 30px;
|
||||
bottom: 60px;
|
||||
z-index: 555;
|
||||
|
||||
.first-bg {
|
||||
background: #fdda55;
|
||||
}
|
||||
|
||||
.other-bg {
|
||||
background: #62b1ff;
|
||||
}
|
||||
|
||||
.btn-s {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.first {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.other-img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.mg-t-15 {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
226
src/components/indexSeachInfo/indexSeachInfo.vue
Normal file
226
src/components/indexSeachInfo/indexSeachInfo.vue
Normal file
@@ -0,0 +1,226 @@
|
||||
<template>
|
||||
<div style="margin-top:15px;">
|
||||
<div class="title-box">
|
||||
<div class="box"></div>
|
||||
<div class="title">{{ title }}</div>
|
||||
</div>
|
||||
<div style="padding:0 0 0 18px;">
|
||||
<div class="info-box-bg">
|
||||
<div class="box"
|
||||
:class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
|
||||
<div class="btn" v-for="(item, i) in btn" :key="i" :class="{ 'mg-l-15': i % 4 !== 0 }"
|
||||
v-if="seachType === '1'">
|
||||
{{ item.text }}</div>
|
||||
|
||||
<div class="btn seach-long-btn" :class="{ 'mg-l-15': i % 3 !== 0 }" v-if="seachType === '2'"
|
||||
v-for="(item, i) in btn" :key="i">{{ item.text }}</div>
|
||||
|
||||
<div class="select-btn" v-if="seachType === '3'" @click="setSelectType(i + 1)"
|
||||
:class="[{ 'mg-l-15': i + 1 !== 1 }, { 'select-btn-click': i + 1 === selectType }]"
|
||||
v-for="(item, i) in btn" :key="i">
|
||||
{{ item.text }}
|
||||
<img :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
|
||||
class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<checkBoxGroup :show="selectType!==''" v-if="seachType === '3'" :selectSeach="selectSeach" :closeSeach="closeSeach"></checkBoxGroup>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";
|
||||
|
||||
let selectType = ref('')
|
||||
//
|
||||
let setSelectType = (num) => {
|
||||
if (num === selectType.value) {
|
||||
selectType.value = ''
|
||||
} else {
|
||||
selectType.value = num
|
||||
}
|
||||
}
|
||||
//取消按钮
|
||||
let closeSeach = () => {
|
||||
selectType.value = ''
|
||||
}
|
||||
|
||||
//确认按钮
|
||||
let selectSeach=()=>{
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '123'
|
||||
},
|
||||
btn: {
|
||||
type: Array,
|
||||
default: function () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
seachType: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pad-15 {
|
||||
padding: 0 15px 0px 15px !important;
|
||||
}
|
||||
|
||||
.jus-sp {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.box {
|
||||
width: 5px;
|
||||
height: 16px;
|
||||
background: inherit;
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border: none;
|
||||
border-radius: 40px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.info-box-bg {
|
||||
margin-top: 22px;
|
||||
background: #d7d7d7 !important;
|
||||
background: inherit;
|
||||
border: none;
|
||||
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);
|
||||
width: 550px;
|
||||
position: relative;
|
||||
|
||||
.box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
background: #FFFFFF;
|
||||
transform: translate(0, -4px);
|
||||
border-radius: 16px;
|
||||
padding: 0 15px 10px 15px;
|
||||
-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);
|
||||
}
|
||||
|
||||
.select-btn-click {
|
||||
border: 1px solid rgba(80, 227, 194, 1) !important;
|
||||
color: rgba(80, 227, 194, 1) !important;
|
||||
}
|
||||
|
||||
.select-btn {
|
||||
width: 162px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 76px;
|
||||
-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: 14px;
|
||||
color: #555555;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 27px 0;
|
||||
cursor: pointer ;
|
||||
|
||||
.img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
object-fit: contain;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.seach-long-btn {
|
||||
width: 161px !important;
|
||||
height: 32px !important;
|
||||
cursor: pointer ;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 117px;
|
||||
height: 32px;
|
||||
background: inherit;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 35px;
|
||||
-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: 14px;
|
||||
color: #555555;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
cursor: pointer ;
|
||||
}
|
||||
|
||||
.mg-l-15 {
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__inner {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner {
|
||||
background-color: rgba(80, 227, 194, 1);
|
||||
border-color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__inner:hover {
|
||||
border-color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
|
||||
/deep/ .el-checkbox__input.is-checked+.el-checkbox__label {
|
||||
color: rgba(80, 227, 194, 1);
|
||||
}
|
||||
</style>
|
||||
|
||||
365
src/components/indexWaterfallBox/indexWaterfallBox.vue
Normal file
365
src/components/indexWaterfallBox/indexWaterfallBox.vue
Normal file
@@ -0,0 +1,365 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="waterfall-box">
|
||||
<div class="flexflex pos-r">
|
||||
<div class="box-tab-type">
|
||||
招室友
|
||||
</div>
|
||||
<div class="intermediary-type">
|
||||
认证中介
|
||||
</div>
|
||||
<img class="apartment-img" src="../../assets/homeImage/shopImg.svg" />
|
||||
<div class="authentication-box">
|
||||
<img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
|
||||
<img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
|
||||
<img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="long-title">
|
||||
<span class="type">123</span>1111111111111111111111111111111111111111111111111111111111111111
|
||||
</div>
|
||||
<div class="type-tab">
|
||||
独卫套房 · 电梯 · 阳台 · 男女皆可
|
||||
</div>
|
||||
<div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item">
|
||||
<img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="">
|
||||
<span class="address-text">九龙 > 尖沙咀/佐敦</span>
|
||||
</div>
|
||||
<div style="padding:0 10px;margin-top:12px;">
|
||||
<span class="unit">HK$</span>
|
||||
<span class="price">7200</span>
|
||||
<span class="date">/月</span>
|
||||
</div>
|
||||
<!-- <div class="title">
|
||||
iRent油麻地二期公寓
|
||||
</div> -->
|
||||
<!-- <div class="info-text">
|
||||
年轻有活力且超有玩趣的公寓
|
||||
</div> -->
|
||||
<div class="corner-box">
|
||||
<img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
|
||||
</div>
|
||||
<!-- <div class="suite-box">
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div class="suite-type">
|
||||
单人套间
|
||||
</div>
|
||||
<div>
|
||||
<span class="unit">HK$</span>
|
||||
<span class="price">7200</span>
|
||||
<span class="date">/月</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
<div class="dis-f al-item jus-bet">
|
||||
<div class="suite-type">
|
||||
单人间
|
||||
</div>
|
||||
<div>
|
||||
<span class="unit">HK$</span>
|
||||
<span class="price">5700</span>
|
||||
<span class="date">/月</span>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<!-- <div class="apartment-price-more flexcenter">更多</div> -->
|
||||
|
||||
<!-- <div class="color-scheme" style="background: #b3c7f4;"></div> -->
|
||||
<!-- <div class="apartment-top flexcenter">
|
||||
<img class="apartment-bottom-icon" src="../../assets/homeImage/apartment-bottom.png" />
|
||||
<img class="apartment-icon" src="../../assets/homeImage/apartment-icon.png" />
|
||||
<img class="apartment-text" src="../../assets/homeImage/apartment-text.png" />
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.unit {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
color: #000000;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-family: 'Arial-Black', 'Arial Black', sans-serif;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
color: #F95D5D;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.waterfall-box {
|
||||
width: 285px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: none;
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
margin-bottom: 20px;
|
||||
|
||||
.authentication-box {
|
||||
width: 275px;
|
||||
height: 28px;
|
||||
border-radius: 0 0 16px 16px;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
left: 5px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.logo {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.authentication-text {
|
||||
width: 72px;
|
||||
height: 16px;
|
||||
position: absolute;
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.authentication-bg {
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
}
|
||||
}
|
||||
|
||||
.corner-box {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.corner-img {
|
||||
transform: rotate(91deg);
|
||||
width: 33px;
|
||||
height: 33px;
|
||||
}
|
||||
}
|
||||
|
||||
.add-marker {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.type-tab {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
margin-top: 15px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.long-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
line-height: 25px;
|
||||
padding: 0 10px;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-break: break-all;
|
||||
margin-top: 8px;
|
||||
|
||||
.type {
|
||||
width: 40px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
background-color: rgba(51, 51, 51, 1);
|
||||
display: inline-block;
|
||||
float: left;
|
||||
border-radius: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-tab-type {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
width: 54px;
|
||||
height: 24px;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
background-color: rgba(51, 51, 51, 0.56078431372549);
|
||||
text-align: center;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.intermediary-type {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
width: 66px;
|
||||
height: 24px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
background:#6081d5;
|
||||
line-height:24px;
|
||||
text-align:center;
|
||||
border-radius:5px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #000000;
|
||||
text-align: left;
|
||||
margin-top: 15px;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.info-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #AAAAAA;
|
||||
text-align: left;
|
||||
padding: 0 15px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.suite-box {
|
||||
margin-top: 20px;
|
||||
padding: 0 15px;
|
||||
margin-bottom: 30px;
|
||||
|
||||
.suite-type {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.line {
|
||||
height: 1px;
|
||||
background: #ebebeb;
|
||||
margin: 10px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.apartment-top .apartment-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.apartment-top {
|
||||
border-radius: 0;
|
||||
height: 38px;
|
||||
}
|
||||
|
||||
.apartment-text {
|
||||
width: 65px;
|
||||
height: 21px;
|
||||
}
|
||||
|
||||
.apartment-img {
|
||||
width: 275px;
|
||||
border-radius: 10px;
|
||||
margin: 5px auto;
|
||||
}
|
||||
|
||||
.apartment-top {
|
||||
background: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.apartment-top .apartment-bottom-icon {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.apartment-icon,
|
||||
.apartment-text {
|
||||
z-index: 6;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}</style>
|
||||
|
||||
235
src/components/pageTopBar/pageTopBar.vue
Normal file
235
src/components/pageTopBar/pageTopBar.vue
Normal file
@@ -0,0 +1,235 @@
|
||||
<template>
|
||||
<div class="top-bg-img-box pos-r">
|
||||
<img src="../../assets/homeImage/indexBg.png" class="bg-img" alt="">
|
||||
<div class="info-box">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="dis-f jus-x al-item index-top-navigation-box">
|
||||
<div class="index-top-navigation dis-f al-item body-maxWidth">
|
||||
<div class="navigation-text" :class="{ 'navigation-text-click': i === 1 }" v-for="(item, i) in topTab" :key="i">
|
||||
{{
|
||||
item.title }}</div>
|
||||
<img src="" class="user-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item">
|
||||
<div class="logo-box dis-f al-item body-maxWidth">
|
||||
<img src="../../assets/homeImage/logo.png" class="logo-img" alt="">
|
||||
<img src="../../assets/homeImage/logoText.png" class="logo-text-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="dis-f jus-x al-item" style="margin-top:20px;">
|
||||
<div class="body-maxWidth">
|
||||
<el-carousel :interval="5000" arrow="always" height="330" style="height:330px;">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<div style="width:100%;height:100%;" class="dis-f jus-x al-item">
|
||||
<img class="carousel-img" src="../../assets/homeImage/carousel.svg" alt="">
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm-seach-btn-box dis-f al-item jus-x">
|
||||
<div class="body-maxWidth dis-f" style="height:48px;">
|
||||
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab"
|
||||
:key="i">
|
||||
<el-badge :value="12">
|
||||
{{ item.title }}
|
||||
</el-badge>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
let topTab = [
|
||||
{
|
||||
title: '寄托首页',
|
||||
}, {
|
||||
title: '论坛'
|
||||
}, {
|
||||
title: 'Offer榜'
|
||||
}, {
|
||||
title: '港校租房'
|
||||
}, {
|
||||
title: '院校库'
|
||||
}, {
|
||||
title: '兑换店'
|
||||
}, {
|
||||
title: '搜索'
|
||||
}, {
|
||||
title: '招生官'
|
||||
}, {
|
||||
title: '中外合办院校'
|
||||
}
|
||||
]
|
||||
let seachTab = [
|
||||
{
|
||||
title: '首页',
|
||||
}, {
|
||||
title: '个人房源'
|
||||
}, {
|
||||
title: '中介房源'
|
||||
}, {
|
||||
title: '品牌公寓'
|
||||
}, {
|
||||
title: '求房源'
|
||||
}, {
|
||||
title: '我的'
|
||||
}
|
||||
]
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.top-bg-img-box {
|
||||
width: 100%;
|
||||
height: 568px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .bg-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.756862745098039);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.index-top-navigation-box {
|
||||
height: 60px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: rgba(215, 215, 215, 0.988235294117647);
|
||||
text-align: center;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.index-top-navigation-box .navigation-text-click {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #62B1FF;
|
||||
border-bottom: 3px solid rgba(98, 177, 255, 1);
|
||||
}
|
||||
|
||||
.index-top-navigation {
|
||||
height: 60px;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.top-bg-img-box .user-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-img {
|
||||
object-fit: contain;
|
||||
width: 30px;
|
||||
height: 31px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .logo-box .logo-text-img {
|
||||
object-fit: contain;
|
||||
width: 173px;
|
||||
height: 31px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box {
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background: rgba(0, 0, 0, 0.596078431372549);
|
||||
border-bottom: 4px solid rgba(78, 144, 204, 1);
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn {
|
||||
width: 120px;
|
||||
height: 43px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #E2EDF7;
|
||||
}
|
||||
|
||||
.top-bg-img-box .info-box .btm-seach-btn-box .tab-btn-click {
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
border-bottom: 0px;
|
||||
border-radius: 8px;
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 18px;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
margin: 0 auto;
|
||||
width: 660px;
|
||||
height: 280px;
|
||||
}
|
||||
</style>
|
||||
|
||||
344
src/components/seachModule/seachModule.vue
Normal file
344
src/components/seachModule/seachModule.vue
Normal file
@@ -0,0 +1,344 @@
|
||||
<template>
|
||||
<div class="dis-f jus-x al-item" style="position: relative;z-index: 333;">
|
||||
<div class="body-maxWidth">
|
||||
<div class="s-w-100 seach-box-bg">
|
||||
<div class="seach-box">
|
||||
<div class="top-seach dis-f al-item">
|
||||
<div style="position: absolute;left: -5px;top: 20px;">
|
||||
<div class="location-box dis-f jus-x al-item">
|
||||
<img src="../../assets/homeImage/addressImg.png" class="img" alt="">
|
||||
香港
|
||||
</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="dis-f al-item pos-r">
|
||||
<el-input v-model="seachValue" placeholder="搜索房源或输入房源ID" @blur="setHistoryShow"
|
||||
@focus="setHistoryShow" style="height:48px;width:460px;"></el-input>
|
||||
<div class="seach-btn dis-f al-item jus-x">
|
||||
<img src="../../assets/homeImage/seachImg.svg" class="img" alt="">
|
||||
搜索
|
||||
</div>
|
||||
<div class="seach-hiosory-box" :class="{ 'seach-history-h': historyShow }">
|
||||
<div class="seach-history-info">
|
||||
<div>
|
||||
<div class="title">
|
||||
历史搜索
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div v-for="(item, i) in historyArr" :key="i" class="btn">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:30px;">
|
||||
<div class="title">
|
||||
热门推荐
|
||||
</div>
|
||||
<div class="info-box">
|
||||
<div v-for="(item, i) in historyArr" :key="i" class="btn">
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="tool-btn dis-f jus-x al-item map-btn">
|
||||
<img src="../assets/homeImage/mapImg.png" class="img" alt="">
|
||||
地图找房
|
||||
</div> -->
|
||||
<div class="tool-btn dis-f jus-x al-item add-btn">
|
||||
<img src="../../assets/homeImage/addBtn.png" class="img" alt="">
|
||||
发布房源
|
||||
</div>
|
||||
<div class=" dis-f jus-x al-item authentication-btn">
|
||||
<img src="../../assets/homeImage/authenticationBtnImg.png" class="text-img" alt="">
|
||||
<img src="../../assets/homeImage/authenticationBtnCode.svg" class="code-img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
<div class="seach-info-box dis-f">
|
||||
<seachInfo title="学校附近" :btn="seachSchoolBtn" seachType="1"></seachInfo>
|
||||
<seachInfo title="合租" seachType="2" :btn="hireType"></seachInfo>
|
||||
<seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea"></seachInfo>
|
||||
<seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
|
||||
</div>
|
||||
<!-- -->
|
||||
<div class="dis-f">
|
||||
<selectTabBox></selectTabBox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
|
||||
import selectTabBox from "../selectTabBox/selectTabBox.vue";
|
||||
//搜索框
|
||||
let seachValue = ref('')
|
||||
let historyShow = ref(false);
|
||||
let setHistoryShow = () => {
|
||||
historyShow.value = !historyShow.value
|
||||
}
|
||||
|
||||
let seachSchoolBtn = [
|
||||
{ text: '港大' },
|
||||
{ text: '科大' },
|
||||
{ text: '中大' },
|
||||
{ text: '城大' },
|
||||
{ text: '理工' },
|
||||
{ text: '浸会' },
|
||||
{ text: '教大' },
|
||||
{ text: '岭大' },
|
||||
]
|
||||
let hireType = [
|
||||
{ text: '不限' },
|
||||
{ text: '房间' },
|
||||
{ text: '床位' },
|
||||
{ text: '客厅' },
|
||||
{ text: '其他' },
|
||||
]
|
||||
let allHireType = [
|
||||
{ text: '不限' },
|
||||
{ text: 'studio' },
|
||||
{ text: '一房' },
|
||||
{ text: '两房' },
|
||||
{ text: '三房' },
|
||||
{ text: '四房以上' }
|
||||
]
|
||||
let seachArea = [
|
||||
{ text: '港岛' },
|
||||
{ text: '九龙' },
|
||||
{ text: '新界' }
|
||||
]
|
||||
let historyArr = [
|
||||
{ title: '有阳台' },
|
||||
{ title: '有洗衣机' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
{ title: '城大' },
|
||||
]
|
||||
defineExpose({
|
||||
historyShow,
|
||||
seachValue
|
||||
})
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.jus-x {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.al-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pos-r {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.body-maxWidth {
|
||||
width: 1200px;
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.jus-bet {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.seach-box-bg {
|
||||
background: #d7d7d7 !important;
|
||||
background: inherit;
|
||||
border: none;
|
||||
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-top: 20px;
|
||||
|
||||
.seach-box {
|
||||
background: #FFFFFF;
|
||||
transform: translate(0, 5px);
|
||||
border-radius: 16px;
|
||||
|
||||
.top-seach {
|
||||
padding: 20px;
|
||||
position: relative;
|
||||
justify-content: end;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
|
||||
.authentication-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
background: inherit;
|
||||
background-color: rgba(244, 243, 255, 1);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
-moz-box-shadow: none;
|
||||
-webkit-box-shadow: none;
|
||||
box-shadow: none;
|
||||
margin-left:20px;
|
||||
.text-img{
|
||||
width:100px;
|
||||
height:26px;
|
||||
}
|
||||
.code-img{
|
||||
width:20px;
|
||||
height:20px;
|
||||
}
|
||||
}
|
||||
|
||||
.seach-history-h {
|
||||
max-height: 375px !important;
|
||||
transition: max-height 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.seach-hiosory-box {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
z-index: 99;
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.seach-history-info {
|
||||
width: 560px;
|
||||
background: inherit;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
box-sizing: border-box;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: rgba(235, 235, 235, 1);
|
||||
border-radius: 16px;
|
||||
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
|
||||
padding: 20px 25px;
|
||||
|
||||
.title {
|
||||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 15px;
|
||||
color: #555555;
|
||||
text-align: left;
|
||||
|
||||
.btn {
|
||||
margin: 20px 30px 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.location-box {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
background: inherit;
|
||||
background-color: rgba(68, 68, 68, 1);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
-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-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #FFFFFF;
|
||||
line-height: 48px;
|
||||
position: absolute;
|
||||
z-index: 666;
|
||||
}
|
||||
|
||||
.triangle {
|
||||
border: 5px solid;
|
||||
border-color: transparent #000 transparent transparent;
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
bottom: -44px;
|
||||
left: -5px;
|
||||
}
|
||||
|
||||
.seach-btn {
|
||||
width: 100px;
|
||||
height: 48px;
|
||||
background: inherit;
|
||||
background-color: rgba(98, 177, 255, 1);
|
||||
border: none;
|
||||
border-right: 0px;
|
||||
border-radius: 0 8px 8px 0;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
object-fit: contain;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.map-btn {
|
||||
background: rgba(80, 227, 194, 1);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.add-btn {
|
||||
background: rgba(253, 218, 85, 1);
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
width: 160px;
|
||||
height: 48px;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
.seach-info-box {
|
||||
padding: 20px 10px;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
122
src/components/selectTabBox/selectTabBox.vue
Normal file
122
src/components/selectTabBox/selectTabBox.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<template>
|
||||
<div class="dis-f s-w-100">
|
||||
<div class="select-box s-w-50 bor-r">
|
||||
<div class="dis-f">
|
||||
<div class="tab-title">地理位置</div>
|
||||
<div class="tab-text">
|
||||
<div class="dis-f">
|
||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='region'}" @click="selectPosition='region'">按区域</div>
|
||||
<div class="btn jus-x al-item dis-f" :class="{'btn-check':selectPosition==='school'}" @click="selectPosition='school'">按学校</div>
|
||||
</div>
|
||||
<div class="select-tab-info">
|
||||
<img src="../../assets/homeImage/checkBG.svg" class="img" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
let selectPosition = ref('region')
|
||||
|
||||
</script>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.dis-f {
|
||||
display: flex;
|
||||
}
|
||||
.jus-x{
|
||||
justify-content: center;
|
||||
}
|
||||
.al-item{
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.s-w-100 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.bor-r {
|
||||
border-right: 1px dashed #ebebeb;
|
||||
}
|
||||
|
||||
.s-w-50 {
|
||||
width: 50%;
|
||||
}
|
||||
img{
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.select-box {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
|
||||
.select-tab-info{
|
||||
position: relative;
|
||||
margin-top:5px;
|
||||
.img{
|
||||
width: 459px;
|
||||
height:55px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-title {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #B5B5B5;
|
||||
text-align: left;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 35px;
|
||||
}
|
||||
|
||||
.info-bor-b{
|
||||
border-bottom:1px dashed #ebebeb;
|
||||
}
|
||||
.tab-text {
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #7F7F7F;
|
||||
text-align: center;
|
||||
padding-bottom:10px;
|
||||
|
||||
.btn {
|
||||
width: 70px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
border-radius: 10px;
|
||||
margin-right:30px;
|
||||
}
|
||||
|
||||
.btn-check {
|
||||
color: #50E3C2;
|
||||
border:1px solid #50E3C2;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user