XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/main'

Browse Source 
# Conflicts:
#	package-lock.json
#	yarn.lock
This commit is contained in:
A1300399510
2023-07-10 11:53:44 +08:00
parent 17c1e6b796 8ceba4234d
commit 4a2e1b624e
52 changed files with 7125 additions and 3856 deletions
Download Patch File Download Diff File Expand all files Collapse all files

501
src/views/HomeView.vue
View File

@@ -1,18 +1,501 @@
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<pageTopBar></pageTopBar>
<!-- 搜索模块 -->
<seachModule></seachModule>
<!-- 房源展示 -->
<div class="dis-f jus-x al-item" style="margin-top:25px;">
<div class="body-maxWidth dis-f al-item">
<listItem></listItem>
<listItem style="margin-left:12px;"></listItem>
<listItem style="margin-left:12px;"></listItem>
<listItem style="margin-left:12px;"></listItem>
</div>
</div>
<!-- 科普 -->
<div class="dis-f jus-x al-item" style="margin-top:25px;">
<div class="body-maxWidth dis-f al-item jus-bet">
<div>
<div class="information-box dis-f">
<div class="dis-f al-item jus-bet s-w-100">
<div class="list-box">
<div class="dis-f al-item mg-b-5">
<img src="../assets/homeImage/informationO.png" class="img" alt="">
<span class="title">攻略</span>
</div>
<div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
<div class="list-mark"></div>
<span>{{ item }}</span>
</div>
</div>
<div class="list-box">
<div class="dis-f al-item mg-b-5">
<img src="../assets/homeImage/informationT.png" class="img" alt="">
<span class="title">科普</span>
</div>
<div v-for="(item, i) in informationData" :key="i" class="dis-f al-item list-li">
<div class="list-mark"></div>
<span>{{ item }}</span>
</div>
</div>
</div>
<div class="dis-f jus-x al-item s-w-100">
<img src="../assets/homeImage/listOnMore.svg" class="list-btn" alt="">
<img src="../assets/homeImage/listMore.svg" class="list-btn mg-l-20" alt="">
</div>
</div>
<div class="information-wx-img" style="margin-top:20px;">
<img src="../assets/homeImage/informationWx.svg" class="information-wx-img" alt="">
</div>
</div>
<div class="information-right-box dis-f jus-bet">
<div class="dis-f jus-bet al-item">
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationO.png" class="img" alt="">
</div>
</div>
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationT.png" class="img" alt="">
</div>
</div>
</div>
<div class="dis-f jus-bet al-item">
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationO.png" class="img" alt="">
</div>
</div>
<div class="img-box pos-r">
<img src="" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/informationT.png" class="img" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 瀑布流 -->
<div class="dis-f jus-x">
<div class="body-maxWidth dis-f al-item" style="margin-top:50px;">
<div v-for="(item, i) in ListSelectBtn" :key="i" class="dis-f al-item">
<div class="list-tab-btn" :class="{ 'click-tab-btn': i === 1 }">
<div style="z-index: 666;position: relative;">
{{ item.text }}
</div>
<div class="tab-marker" v-show="i === 1"></div>
</div>
<div :class="{ 'line-btn': i !== ListSelectBtn.length - 1 }"></div>
</div>
</div>
</div>
<div class="dis-f jus-x">
<div class="body-maxWidth dis-f al-item">
<div class="waterfall-box s-w-100">
<div ref="waterfall1">
<div class="waterfall-first-box dis-f">
<div class="info-box dis-f jus-x al-item first">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/person.png" class="img" alt="">
</div>
<div class="text-center">个人房源</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item second">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/intermediary.png" class="img" alt="">
</div>
<div class="text-center">中介房源</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item third">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/brand.png" class="img" alt="">
</div>
<div class="text-center">品牌公寓</div>
</div>
</div>
<div class="info-box dis-f jus-x al-item">
<div>
<div class="img-box dis-f jus-x al-item">
<img src="../assets/homeImage/seek.png" class="img" alt="">
</div>
<div class="text-center">求房源</div>
</div>
</div>
</div>
</div>
<div ref="waterfall2">
<img src="../assets/homeImage/liveImg.svg" class="live-img" alt="">
</div>
<div ref="waterfall3">
<indexWaterfallBox></indexWaterfallBox>
</div>
<div ref="waterfall4">
<indexWaterfallBox></indexWaterfallBox>
</div>
</div>
</div>
</div>
<div class="dis-f jus-x bottom-tps">
- 到底了 -
</div>
<indexRegularBox></indexRegularBox>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
<script setup>
import listItem from "../components/apartmentList/apartmentList.vue";
import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
import seachModule from "../components/seachModule/seachModule.vue";
import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue'
//
let informationData = [
'123456', '2456789', '3456789', '47894564', '545649879987'
]
let ListSelectBtn = [
{
text: '推荐'
},
{
text: '整租'
},
{
text: '合租'
},
{
text: '招室友'
},
{
text: '已认证'
},
]
</script>
<script>
export default {
name: 'HomeView',
components: {
HelloWorld
}
name: 'HomeView'
}
</script>
<style scoped>
img {
object-fit: contain;
}
.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;
}
.bottom-tps {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
text-align: center;
}
.information-box {
width: 836px;
height: 329px;
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);
font-size: 14px;
padding: 15px 20px 10px 20px;
box-sizing: border-box;
flex-wrap: wrap;
.list-btn {
width: 8px;
height: 14px;
}
.mg-l-20 {
margin-left: 20px;
}
.list-box {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
text-align: left;
letter-spacing: normal;
color: #333333;
width: 375px;
.mg-b-5 {
margin-bottom: 5px;
}
.title {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 18px;
color: #000000;
text-align: left;
margin-left: 15px;
}
.img {
width: 24px;
height: 24px;
}
.list-li {
margin-top: 20px;
}
.list-mark {
width: 6px;
height: 6px;
border-radius: 50%;
background: #d7d7d7;
margin-right: 15px;
}
}
}
.information-wx-img {
width: 836px;
height: 120px;
border-radius: 10px;
}
.information-right-box {
width: 352px;
height: 469px;
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);
font-size: 14px;
box-sizing: border-box;
padding: 25px 18px;
flex-direction: column;
.img-box {
width: 149px;
height: 200px;
background: inherit;
background-color: rgba(255, 255, 255, 0);
border: none;
border-radius: 8px;
background: #000;
}
.img-list {
width: 149px;
height: 200px;
border-radius: 8px;
position: absolute;
top: 0;
left: 0;
}
.img {
width: 149px;
height: 200px;
border-radius: 8px;
display: none;
}
.img-box:hover .img {
display: block;
}
}
.list-tab-btn {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 20px;
color: #555555;
height: 48px;
line-height: 48px;
position: relative;
.tab-marker {
width: 20px;
height: 20px;
border-radius: 50%;
background: #50e3c2;
position: relative;
top: -45px;
left: -10px;
}
}
.click-tab-btn {
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
font-weight: 650;
font-style: normal;
font-size: 20px;
color: #000000;
}
.line-btn {
width: 1px;
background: #d7d7d7;
height: 21px;
margin: 0 30px;
}
.waterfall-box {
display: flex;
margin-top: 30px;
justify-content: space-between;
.live-img {
width: 301px;
height: 349px;
border-radius: 16px;
}
.live-img:hover {
-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);
}
.waterfall-first-box {
width: 284px;
height: 284px;
background-color: rgba(255, 255, 255, 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);
flex-wrap: wrap;
margin-bottom: 20px;
.first {
border-right: 1px dashed #ebebeb;
border-bottom: 1px dashed #ebebeb;
}
.second {
border-bottom: 1px dashed #ebebeb;
}
.third {
border-right: 1px dashed #ebebeb;
}
.info-box {
width: 142px;
height: 142px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #555555;
.text-center {
text-align: center;
}
.img-box {
width: 56px;
height: 56px;
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: 10px;
}
.img {
width: 30px;
height: 30px;
}
}
}
}
/deep/.el-carousel__arrow {
border: 2px solid #545454;
width: 50px;
height: 50px;
}
/deep/.el-icon {
font-size: 20px;
}
/deep/.el-carousel__indicator--horizontal {
padding: var(--el-carousel-indicator-padding-vertical) 2px;
}
/deep/ .el-carousel__button {
width: 8px;
height: 8px;
border-radius: 4px;
}
/deep/ .is-active button {
background: #62b1ff;
}
/deep/ .el-input__wrapper {
background: inherit;
background-color: rgba(246, 246, 246, 1);
border-right: 0px;
border-radius: 8px 0 0 8px;
}
/deep/ .el-input__inner {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
color: #7F7F7F;
text-align: left;
}</style>