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

首页骨架 css样式

Browse Source
This commit is contained in:
luJianJun
2023-07-14 17:53:58 +08:00
parent bfac0867b5
commit 0819f9812f
7 changed files with 173 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/indexWaterfallBox/indexWaterfallBox.vue
View File

@@ -69,8 +69,9 @@
</div>
</div>
</div>
<div class="corner-box" v-if="itemData.type === 'housing'">
<img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
<div class="corner-box">
<img src="../../assets/homeImage/corner.svg" v-if="itemData.type === 'housing'&&itemData.intermediary!==1" class="corner-img" alt="">
<img src="../../assets/homeImage/intermediaryCorner.svg" v-if="itemData.type === 'housing'&&itemData.intermediary===1" style="transform: rotate(90deg);" class="tab-img" alt="">
</div>
<!-- <div class="apartment-price-more flexcenter">更多</div> -->
@@ -213,7 +214,7 @@ let itemData = props.data
font-weight: 400;
font-style: normal;
font-size: 14px;
color: #7F7F7F;
color: #AAAAAA;
margin-top: 15px;
padding: 0 10px;
}

35
src/components/pageTopBar/pageTopBar.vue
View File

@@ -10,11 +10,13 @@
{{
item.name }}</div>
<div class="user-box">
<img src="" class="user-img" alt="">
<img :src="user.data.avatar" class="user-img" alt="">
<div class="user-out-box">
<div class="box-bg dis-f jus-x">
<div class="top-box"></div>
退出
<a :href="quitUrl" style="color: #fff;">
退出
</a>
</div>
</div>
</div>
@@ -29,9 +31,9 @@
<div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="routePath === '/'">
<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">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
<div style="width:100%;height:100%;" class="dis-f jus-x al-item">
<img class="carousel-img" src="../../assets/homeImage/carousel.svg" alt="">
<img class="carousel-img" :src="item.imageurl" alt="">
</div>
</el-carousel-item>
</el-carousel>
@@ -56,12 +58,31 @@
<script setup>
import store from '../../store/index';
import { useRoute, useRouter } from 'vue-router'
import { reactive, watchEffect, ref } from "vue";
import { reactive, watchEffect, ref,defineProps } from "vue";
const props=defineProps({
bannerList:{
type:Array,
default:function (){
return []
}
}
})
//退出登录
let url = location.href
let quitUrl = ref(`https://passport.gter.net/login/quit?referer=${url}`)
//个人信息
let user = reactive({data:{}})
//组件数据
let topTab = reactive({ data: [] })
let seachTab = reactive({ data: [] })
let bannerLists = reactive({data:[]})
watchEffect(() => {
console.log(store.state.indexData.menu)
user.data=store.state.user
bannerLists.data=props.bannerList
console.log(bannerLists.data)
if (!store.state.indexData.menu) return
store.state.indexData.menu.map(res => {
if (res.name === '首页') {
@@ -192,7 +213,7 @@ tabBtnType.value = route.path
.top-bg-img-box .user-img {
width: 32px;
height: 32px;
border-radius: 16rpx;
border-radius: 50%;
}
.top-bg-img-box .info-box .logo-box {

27
src/components/seachModule/seachModule.vue
View File

@@ -73,7 +73,8 @@
v-if="allHireType.data.length"></seachInfo>
</div>
<!-- -->
<div v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing'||routePath === '/needHousing'">
<div
v-if="routePath === '/personHousing' || routePath === '/intermediaryHousing' || routePath === '/needHousing'">
<selectTabBox></selectTabBox>
</div>
</div>
@@ -83,11 +84,12 @@
</template>
<script setup>
import { ref, watchEffect, reactive, watch } from 'vue';
import { ref, watchEffect, reactive, beforeMount } from 'vue';
import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
import selectTabBox from "../selectTabBox/selectTabBox.vue";
import { useRoute } from 'vue-router';
import store from '../../store/index';
import api from "../../utils/api";
//搜索框
@@ -103,6 +105,25 @@ let seachArea = {};//区域找房
let historyArr = reactive({ data: [] })//历史查找记录
let hotArr = reactive({ data: [] })
//获取区域下列数据
let getLocationData = () => {
console.log(seachArea.data)
api.getLocationData().then(res => {
console.log(res)
if (res.code === 200) {
for (let item in res.data) {
if (!seachArea.data[item.substring(0, 1) - 1].data) seachArea.data[item.substring(0, 1) - 1].data = []
if (item.length > 1) {
seachArea.data[item.substring(0, 1) - 1].data.push({
title: res.data[item],
id: item
})
}
}
}
})
}
//监听路由
const route = useRoute()
let routePath = ref('')
@@ -113,6 +134,7 @@ watchEffect(() => {
hireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[0].data : []
allHireType.data = store.state.seachTypeData[2] ? store.state.seachTypeData[2].where[1].data : []
seachArea.data = store.state.seachTypeData[1] ? store.state.seachTypeData[1].where : []
if (seachArea.data.length > 0&&!seachArea.data[0].data) getLocationData()
hotArr.data = store.state.indexData.hotSearcheWords
})
@@ -125,6 +147,7 @@ let seachList = () => {
localStorage.setItem('historyArr', JSON.stringify(historyArr.data));
}
defineExpose({
historyShow,
seachValue

63
src/components/skeletonBox/skeletonBox.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div>
<el-skeleton style="width: 240px" animated="true">
<template #template>
<el-skeleton-item variant="image" style="width: 240px; height: 240px" />
<div style="padding: 14px">
<el-skeleton-item variant="p" style="width: 50%" />
<div style="
display: flex;
align-items: center;
justify-items: space-between;
">
<el-skeleton-item variant="text" style="margin-right: 16px" />
<el-skeleton-item variant="text" style="width: 30%" />
</div>
</div>
</template>
</el-skeleton>
</div>
</template>
<script setup>
</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;
}
.mg-t-35 {
margin-top: 35px;
}
</style>