15 changed files with 880 additions and 37 deletions
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 754 B |
|
After Width: | Height: | Size: 797 B |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<div class=''> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
//数据 |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
//创建前 |
||||
|
created() { }, |
||||
|
//方法 |
||||
|
methods: {}, |
||||
|
//子组件注册 |
||||
|
components: {}, |
||||
|
//计算 |
||||
|
computed: {}, |
||||
|
//监听 |
||||
|
watch: {}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<div class=''> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
//数据 |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
//创建前 |
||||
|
created() { }, |
||||
|
//方法 |
||||
|
methods: {}, |
||||
|
//子组件注册 |
||||
|
components: {}, |
||||
|
//计算 |
||||
|
computed: {}, |
||||
|
//监听 |
||||
|
watch: {}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
<template> |
||||
|
<div class=''> |
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
//数据 |
||||
|
data() { |
||||
|
return {}; |
||||
|
}, |
||||
|
//创建前 |
||||
|
created() { }, |
||||
|
//方法 |
||||
|
methods: {}, |
||||
|
//子组件注册 |
||||
|
components: {}, |
||||
|
//计算 |
||||
|
computed: {}, |
||||
|
//监听 |
||||
|
watch: {}, |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss" scoped> |
||||
|
|
||||
|
</style> |
||||
@ -0,0 +1,713 @@ |
|||||
|
<template> |
||||
|
<div class="homeWrap"> |
||||
|
|
||||
|
<div class="top-nav-list" v-if="$route.query.typeB == 'building'"> |
||||
|
<div v-for="item in buildingList" :key="item.id" :class="[item.ifActive ? 'top-nav-itemAC' : 'top-nav-item']" |
||||
|
@click="chooseNav(item)"> |
||||
|
{{ item.buildingName }}{{ item.unitName }} |
||||
|
</div> |
||||
|
</div> |
||||
|
<el-row :gutter="48" style="background-color: #fff;height: calc(100vh - 129px);"> |
||||
|
<el-col :span="8"> |
||||
|
<!-- <div class="mount"> |
||||
|
<people-mount /> |
||||
|
</div> --> |
||||
|
<div class="apartment"> |
||||
|
<div class="apar_comtent" v-if="houseMountArr.length > 0"> |
||||
|
<div class="apar_top"> |
||||
|
<img src="@/assets/images/home/homeTop.png" alt="/" /> |
||||
|
</div> |
||||
|
<div style="min-width: 284px; max-width: 488px; padding: 0 20px"> |
||||
|
<div class="apar_center"> |
||||
|
<div class="apar_center_flex" :style="{ width: flexWidth + 'px' }"> |
||||
|
<div v-for="(item, index) in houseMountArr" :key="index" class="floor"> |
||||
|
<div v-for="itm in item" :key="itm.id" :class="[ |
||||
|
itm.riskyNum === 0 && itm.importanceNum === 0 |
||||
|
? 'households' |
||||
|
: '', |
||||
|
itm.riskyNum > 0 ? 'dangerHome' : '', |
||||
|
itm.importanceNum > 0 ? 'dangerPeople' : '', |
||||
|
itm.rentFlag === '2' ? 'freeHome' : '', |
||||
|
]"> |
||||
|
<div v-if="itm.riskyNum === 0 && |
||||
|
itm.importanceNum === 0 && |
||||
|
itm.rentFlag != '2' |
||||
|
"> |
||||
|
{{ itm.doorName }} |
||||
|
</div> |
||||
|
<div v-if="itm.riskyNum > 0" class="dangerClass"> |
||||
|
<div>{{ itm.doorName }}</div> |
||||
|
<img :src="require('@/assets/images/home/dangerHomeS.png')" alt="" |
||||
|
width="16px" /> |
||||
|
</div> |
||||
|
<div v-if="itm.importanceNum > 0" class="dangerClass"> |
||||
|
<div>{{ itm.doorName }}</div> |
||||
|
<img :src="require('@/assets/images/home/dangerPeopleS.png') |
||||
|
" alt="" width="16px" /> |
||||
|
</div> |
||||
|
<div v-if="itm.rentFlag === '2'" class="dangerClass"> |
||||
|
<div>闲置</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="apar_bottom"> |
||||
|
<img src="@/assets/images/home/homeBottomS.png" alt="/" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-else class="apar_comtent"> |
||||
|
<div class="apar_top"> |
||||
|
<img src="@/assets/images/home/homeTop.png" alt="/" /> |
||||
|
</div> |
||||
|
<div style="min-width: 284px; max-width: 488px; padding: 0 20px"> |
||||
|
<div class="apar_center"> |
||||
|
<div class="apar_center_flex" style="width: 50px"> |
||||
|
<div v-for="(item, index) in freeHomeArr" :key="index" class="floor"> |
||||
|
<div v-for="(itm, i) in item" :key="i" class="freeHome"></div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div class="apar_bottom"> |
||||
|
<img src="@/assets/images/home/homeBottom.png" alt="/" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- <div class="apar_right"> |
||||
|
<img src="@/assets/images/home/homeRight.png" alt="" /> |
||||
|
</div> --> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="16"> |
||||
|
<div class="table"> |
||||
|
<el-table :data="list" :height="tableHeight" v-loading="loading"> |
||||
|
<el-table-column label="序号" type="index" width="60" /> |
||||
|
<el-table-column prop="doorName" width="100" label="门牌号" /> |
||||
|
<el-table-column prop="quartersName" show-overflow-tooltip label="所属小区"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
<el-tooltip class="item" effect="dark" :content="scope.row.quartersName" |
||||
|
placement="top-start"> |
||||
|
<span>{{ scope.row.quartersName }}</span> |
||||
|
</el-tooltip> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="buildingName" width="100" show-overflow-tooltip label="所属楼栋" /> |
||||
|
<el-table-column prop="buildingUnitName" width="100" show-overflow-tooltip label="所属单元" /> |
||||
|
<el-table-column prop="houseCode" width="100" label="房屋编码"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
<el-tooltip class="item" effect="dark" :content="scope.row.houseCode" placement="top"> |
||||
|
<div class="suolue">{{ scope.row.houseCode }}</div> |
||||
|
</el-tooltip> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="rentFlag" width="90" label="房屋状态"> |
||||
|
<template slot-scope="scope"> |
||||
|
<!-- 1：出租 0：自住 2：闲置 3：未售出 --> |
||||
|
<span>{{ getRentFlag(scope.row.rentFlag) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<!-- <el-table-column prop="houseType" width="120" label="房屋类型"> |
||||
|
<template slot-scope="scope"> --> |
||||
|
<!-- 1楼房，2平房，3别墅 --> |
||||
|
<!-- <span>{{ getHouseType(scope.row.houseType) }}</span> |
||||
|
</template> |
||||
|
</el-table-column> --> |
||||
|
<el-table-column prop="ownerName" width="100" label="房主姓名" /> |
||||
|
<el-table-column prop="ownerPhone" width="110" show-overflow-tooltip label="房主电话"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ $sensitive(scope.row.ownerPhone, 3, 7) }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="riskyNum" width="150" label="满意度风险家庭"> |
||||
|
<template slot="header"> |
||||
|
满意度风险家庭 |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<span v-if="+scope.row.riskyNum > 0">是</span> |
||||
|
<span v-else>否</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="categorys" width="120" label="重点人员"> |
||||
|
<template slot="header"> |
||||
|
重点人员 |
||||
|
</template> |
||||
|
<template slot-scope="scope"> |
||||
|
<div v-if="scope.row.categorys && scope.row.categorys.length > 0" |
||||
|
style="display: flex; align-items: center; margin-bottom: 5px"> |
||||
|
<div v-for="item in scope.row.categorys.slice(0, 5)" :key="item"> |
||||
|
<img :src="require(`@/assets/images/home/${getHomeTypesMap( |
||||
|
item |
||||
|
)}.png`) |
||||
|
" alt="" style="width: 20px; height: 20px; margin-right: 5px" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="80" align="center"> |
||||
|
<template slot-scope="{ row }"> |
||||
|
<el-button type="text" @click=" |
||||
|
$router.push( |
||||
|
`/dataBoard/overview/familyPortrait/?name=${row.doorName}&houseId=${row.id}&id=${row.buildingId}&buId=${row.buildingUnitId}&type=${$route.query.typeB}&name2=${row.houseName}` |
||||
|
) |
||||
|
">查看</el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
|
||||
|
</div> |
||||
|
<div class="pagination"> |
||||
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" |
||||
|
:current-page.sync="queryParams.pageNo" :page-size="queryParams.pageSize" layout="total,->,prev, pager, next, jumper" |
||||
|
:total="total"> |
||||
|
</el-pagination> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import { mapGetters } from "vuex"; |
||||
|
export default { |
||||
|
name: "homeDetails", |
||||
|
components: { |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
total: 0, |
||||
|
queryParams: { |
||||
|
pageNo: 1, |
||||
|
pageSize: 20, |
||||
|
unitId: "", |
||||
|
ownerName: "", |
||||
|
ownerPhone: "", |
||||
|
ownerIdCard: "", |
||||
|
riskyFlag: "", |
||||
|
residentTag: "", |
||||
|
}, |
||||
|
orgOptions: [], |
||||
|
peopleTypeList: [], |
||||
|
riskHomeList: [ |
||||
|
{ |
||||
|
label: "风险", |
||||
|
value: "1", |
||||
|
}, |
||||
|
{ |
||||
|
label: "无风险", |
||||
|
value: "0", |
||||
|
}, |
||||
|
], |
||||
|
flexWidth: 0, |
||||
|
loading: false, |
||||
|
homeMsg: {}, |
||||
|
list: [], |
||||
|
homeText: "", |
||||
|
buildingList: [], |
||||
|
houseMountArr: [ |
||||
|
[ |
||||
|
// { doorName: 101, riskyNum: 0, importanceNum: 0, rentFlag: "0" }, |
||||
|
// { doorName: 102, riskyNum: 1, importanceNum: 0, rentFlag: "0" }, |
||||
|
// { doorName: 103, riskyNum: 0, importanceNum: 1, rentFlag: "0" }, |
||||
|
// { doorName: 104, riskyNum: 0, importanceNum: 0, rentFlag: "0" }, |
||||
|
// { doorName: 105, riskyNum: 0, importanceNum: 0, rentFlag: "0" }, |
||||
|
// { doorName: 205, riskyNum: 0, importanceNum: 0, rentFlag: "0" }, |
||||
|
], |
||||
|
], |
||||
|
freeHomeArr: [], |
||||
|
buildingId: "", |
||||
|
level: '' |
||||
|
}; |
||||
|
}, |
||||
|
watch: {}, |
||||
|
created() { |
||||
|
this.buildingId = this.$store.state.huaXiang.buildingInfo.buildingId || null; |
||||
|
this.queryParams.unitId = this.$store.state.huaXiang.buildingInfo.buildingUnitId || null; |
||||
|
this.level = this.$store.state.huaXiang.buildingInfo.level || null; |
||||
|
}, |
||||
|
mounted() { |
||||
|
|
||||
|
this.getList(this.buildingId); |
||||
|
this.getPeopleTypeList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSizeChange(val) { |
||||
|
this.queryParams.pageSize = val; |
||||
|
window.localStorage.setItem("pageSize", val); |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
handleCurrentChange(val) { |
||||
|
this.queryParams.pageNo = val; |
||||
|
this.getTableData(); |
||||
|
}, |
||||
|
getDoorNameList(list) { |
||||
|
const doorNameList = []; |
||||
|
const doorNameArr = []; |
||||
|
list.forEach((item) => { |
||||
|
const doorName = item.doorName; |
||||
|
if (doorName.length === 4) { |
||||
|
doorNameArr.push(doorName.slice(0, 2)); |
||||
|
} else if (doorName.length === 3) { |
||||
|
doorNameArr.push(doorName.slice(0, 1)); |
||||
|
} |
||||
|
}); |
||||
|
const doorNameSet = new Set(doorNameArr); |
||||
|
doorNameSet.forEach((item) => { |
||||
|
const arr = []; |
||||
|
list.forEach((item2) => { |
||||
|
const doorName = item2.doorName; |
||||
|
if (doorName.length === 4) { |
||||
|
if (doorName.slice(0, 2) === item) { |
||||
|
arr.push(item2); |
||||
|
} |
||||
|
} else if (doorName.length === 3) { |
||||
|
if (doorName.slice(0, 1) === item) { |
||||
|
arr.push(item2); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
doorNameList.push(arr); |
||||
|
}); |
||||
|
return doorNameList; |
||||
|
}, |
||||
|
|
||||
|
getPeopleTypeList() { |
||||
|
this.$http |
||||
|
.post("sys/dict/data/dictlist", { |
||||
|
dictType: "resident_category", |
||||
|
}) |
||||
|
.then((res) => { |
||||
|
const { code, data } = res.data; |
||||
|
if (code === 0) { |
||||
|
this.peopleTypeList = data; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getUnitList(id) { |
||||
|
this.$http |
||||
|
.get(`/actual/base/streetOverview/getUnitHouseList?unitId=` + id) |
||||
|
.then((res) => { |
||||
|
const { |
||||
|
code, |
||||
|
data: { houseList, unitInfo }, |
||||
|
} = res.data; |
||||
|
if (code === 0) { |
||||
|
let unitInfos = unitInfo || {}; |
||||
|
const freeHomeArr = new Array(unitInfos.totalFloorNum).fill([ |
||||
|
{}, |
||||
|
{}, |
||||
|
{}, |
||||
|
]); |
||||
|
this.freeHomeArr = freeHomeArr; |
||||
|
this.homeMsg = unitInfos; |
||||
|
this.homeText = |
||||
|
(unitInfos.quartersName ? unitInfos.quartersName : "") + |
||||
|
(unitInfos.buildingName ? unitInfos.buildingName : "") + |
||||
|
(unitInfos.unitNum ? unitInfos.unitNum + "单元" : ""); |
||||
|
this.houseMountArr = this.getDoorNameList(houseList); |
||||
|
console.log(this.houseMountArr); |
||||
|
if (this.houseMountArr.length > 0) { |
||||
|
this.flexWidth = this.houseMountArr[0].length * 58; |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
getTableData(id) { |
||||
|
// const idx = "812295ba44c594fc85a808f67b7a8aa4"; |
||||
|
this.loading = true; |
||||
|
this.$http |
||||
|
.get( |
||||
|
"/actual/base/streetOverview/getUnitHouseOverviewList?" + |
||||
|
this.$paramsFormat(this.queryParams) |
||||
|
) |
||||
|
.then((res) => { |
||||
|
const { |
||||
|
code, |
||||
|
data: { list, total }, |
||||
|
} = res.data; |
||||
|
if (code === 0) { |
||||
|
this.list = list; |
||||
|
this.total = total; |
||||
|
this.loading = false; |
||||
|
} else { |
||||
|
this.loading = false; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
|
||||
|
|
||||
|
|
||||
|
getList(buid) { |
||||
|
// const homeType = this.$route.query.typeB; |
||||
|
console.log(this.level); |
||||
|
if (this.level == "building") { |
||||
|
// 1514914015259979777 |
||||
|
this.$http |
||||
|
.get( |
||||
|
`/actual/base/streetOverview/getUnitListByBuilding?buildingId=` + |
||||
|
this.buildingId |
||||
|
) |
||||
|
.then((res) => { |
||||
|
const { code, data } = res.data; |
||||
|
if (code === 0) { |
||||
|
this.buildingList = data; |
||||
|
this.homeText = |
||||
|
this.buildingList[0].buildingName + |
||||
|
this.buildingList[0].unitName; |
||||
|
if (this.buildingList && this.buildingList.length > 0) { |
||||
|
if (buid) { |
||||
|
this.buildingList.forEach((item, i) => { |
||||
|
if (item.id === buid) { |
||||
|
item.ifActive = true; |
||||
|
this.getUnitList(item.id); |
||||
|
this.getTableData(item.id); |
||||
|
} else { |
||||
|
item.ifActive = false; |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
this.buildingList.forEach((item, i) => { |
||||
|
if (i === 0) { |
||||
|
item.ifActive = true; |
||||
|
this.getUnitList(item.id); |
||||
|
this.getTableData(item.id); |
||||
|
} else { |
||||
|
item.ifActive = false; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
this.loading = false; |
||||
|
} else { |
||||
|
this.loading = false; |
||||
|
} |
||||
|
}); |
||||
|
} else { |
||||
|
this.getUnitList(this.queryParams.unitId); |
||||
|
this.getTableData(this.queryParams.unitId); |
||||
|
} |
||||
|
}, |
||||
|
|
||||
|
getRentFlag(type) { |
||||
|
const rentFlag = new Map([ |
||||
|
["0", "出租"], |
||||
|
["1", "自住"], |
||||
|
["2", "闲置"], |
||||
|
["3", "未售出"], |
||||
|
]); |
||||
|
return rentFlag.get(type); |
||||
|
}, |
||||
|
|
||||
|
getHouseType(type) { |
||||
|
const houseTypeMap = new Map([ |
||||
|
["1", "楼房"], |
||||
|
["2", "平房"], |
||||
|
["3", "别墅"], |
||||
|
]); |
||||
|
return houseTypeMap.get(type); |
||||
|
}, |
||||
|
|
||||
|
getHomeTypesMap(item) { |
||||
|
const homeTypeMap = new Map([ |
||||
|
["PARTY_FLAG", "dy"], |
||||
|
["SUBSISTENCE_ALLOWANCE_FLAG", "dbry"], |
||||
|
["ENSURE_HOUSE_FLAG", "bzfry"], |
||||
|
["UNEMPLOYED_FLAG", "syry"], |
||||
|
["FERTILE_WOMAN_FLAG", "ylfn"], |
||||
|
["VETERAN_FLAG", "tyjr"], |
||||
|
["UNITED_FRONT_FLAG", "tzry"], |
||||
|
["PETITION_OFFICER_FLAG", "xfry"], |
||||
|
["VOLUNTEER_FLAG", "zyz"], |
||||
|
["oldPeopleFlag", "lnr"], |
||||
|
["EMPTY_NESTER_FLAG", "kclr"], |
||||
|
["SPECIAL_SUPPORT_FLAG", "tfry"], |
||||
|
["DISABLED_FLAG", "snry"], |
||||
|
["DEMENTED_FLAG", "szry"], |
||||
|
["DISABILITY_FLAG", "cjr"], |
||||
|
["SERIOUS_ILLNESS_FLAG", "dbry"], |
||||
|
["CHRONIC_DISEASE_FLAG", "mxbry"], |
||||
|
["SPECIAL_CROWD_FLAG", "tsry"], |
||||
|
["TENANT_FLAG", "zh"], |
||||
|
["FLOATING_FLAG", "ldry"], |
||||
|
["LIVE_ALONE_FLAG", "kclr"], |
||||
|
["PUBLIC_WELFARE_FLAG", "gyg"], |
||||
|
]); |
||||
|
console.log(item); |
||||
|
console.log(homeTypeMap.get(item)); |
||||
|
return homeTypeMap.get(item); |
||||
|
}, |
||||
|
|
||||
|
chooseNav(item) { |
||||
|
let buildList = [...this.buildingList]; |
||||
|
this.homeText = item.buildingName + item.unitName; |
||||
|
buildList.forEach((d) => { |
||||
|
if (item.id === d.id) { |
||||
|
d.ifActive = true; |
||||
|
this.getUnitList(item.id); |
||||
|
this.getTableData(item.id); |
||||
|
} else { |
||||
|
d.ifActive = false; |
||||
|
} |
||||
|
}); |
||||
|
this.buildingList = buildList; |
||||
|
}, |
||||
|
}, |
||||
|
computed: { |
||||
|
tableHeight() { |
||||
|
return this.clientHeight - 60 - 80 - 80 ; |
||||
|
}, |
||||
|
...mapGetters(["clientHeight", "env"]), |
||||
|
}, |
||||
|
|
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.table{ |
||||
|
margin-top: 16px; |
||||
|
} |
||||
|
@mixin radio { |
||||
|
display: inline-block; |
||||
|
width: 90px; |
||||
|
height: 24px; |
||||
|
opacity: 0.8; |
||||
|
border-radius: 11px; |
||||
|
text-align: center; |
||||
|
line-height: 22px; |
||||
|
margin-left: 15px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
@mixin navListCommon { |
||||
|
min-width: 120px; |
||||
|
height: 36px; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
margin-right: 4px; |
||||
|
text-align: center; |
||||
|
line-height: 36px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
@mixin homeCommon { |
||||
|
height: 58px; |
||||
|
background-size: 100% 100%; |
||||
|
display: flex; |
||||
|
flex: 0 0 48px; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
font-size: 14px; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #fff; |
||||
|
|
||||
|
&:not(:last-child) { |
||||
|
margin-right: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.suolue { |
||||
|
width: 80px; |
||||
|
overflow: hidden; |
||||
|
white-space: nowrap; |
||||
|
text-overflow: ellipsis; |
||||
|
} |
||||
|
::v-deep .pagination{ |
||||
|
width: 100%; |
||||
|
.el-pagination{ |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
position: relative; |
||||
|
.el-pagination__rightwrapper{ |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.top-nav-list { |
||||
|
display: flex; |
||||
|
margin-bottom: 16px; |
||||
|
|
||||
|
.top-nav-item { |
||||
|
@include navListCommon; |
||||
|
background-image: url("~@/assets/images/home/noChooseMain.png"); |
||||
|
color: #96b1ce; |
||||
|
} |
||||
|
|
||||
|
.top-nav-itemAC { |
||||
|
@include navListCommon; |
||||
|
background-image: url("~@/assets/images/home/chooseMain.png"); |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.homeWrap { |
||||
|
.bread { |
||||
|
margin-bottom: 16px; |
||||
|
} |
||||
|
|
||||
|
.apar_top { |
||||
|
width: 100%; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.apartment { |
||||
|
display: flex; |
||||
|
align-items: flex-end; |
||||
|
justify-content: center; |
||||
|
margin-top: 60px; |
||||
|
|
||||
|
.apar_comtent { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
.apar_center { |
||||
|
min-width: 288px; |
||||
|
max-width: 500px; |
||||
|
overflow: auto; |
||||
|
background: #f3f5fb; |
||||
|
padding: 30px 30px 10px 30px; |
||||
|
display: flex; |
||||
|
// align-items: flex-end; |
||||
|
flex-direction: column-reverse; |
||||
|
height: calc(100vh - 376px); |
||||
|
.apar_center_flex { |
||||
|
// width: 100%; |
||||
|
display: flex; |
||||
|
flex-wrap: wrap-reverse; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
.floor { |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-bottom: 20px; |
||||
|
|
||||
|
.households { |
||||
|
@include homeCommon; |
||||
|
background: url("@/assets/images/home/hasPeopleS.png") no-repeat; |
||||
|
} |
||||
|
|
||||
|
.dangerHome, |
||||
|
.dangerPeople { |
||||
|
@include homeCommon; |
||||
|
background: url("@/assets/images/home/dangerHomeBgS.png") no-repeat; |
||||
|
} |
||||
|
|
||||
|
.freeHome { |
||||
|
@include homeCommon; |
||||
|
background: url("@/assets/images/home/freeHomeS.png") no-repeat; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dangerClass { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
|
||||
|
div:first-child { |
||||
|
margin-bottom: 5px; |
||||
|
font-weight: bold; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.apar_bottom { |
||||
|
width: 100%; |
||||
|
margin-top: -1px; |
||||
|
|
||||
|
img { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// .apar_right { |
||||
|
// margin-left: -3px; |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
.more { |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
color: #a0cdff; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
margin-bottom: 0px; |
||||
|
background: linear-gradient(144deg, |
||||
|
rgba(46, 164, 255, 0.1) 0%, |
||||
|
rgba(13, 143, 243, 0) 100%); |
||||
|
|
||||
|
.miniGrid_red { |
||||
|
@include radio; |
||||
|
background: rgba(249, 86, 25, 0.2); |
||||
|
border: 1px solid #f95619; |
||||
|
color: #f95619; |
||||
|
} |
||||
|
|
||||
|
.miniGrid_green { |
||||
|
@include radio; |
||||
|
background: rgba(249, 86, 25, 0.2); |
||||
|
border: 1px solid green; |
||||
|
color: green; |
||||
|
} |
||||
|
|
||||
|
.miniGrid_yellow { |
||||
|
@include radio; |
||||
|
background: rgba(249, 86, 25, 0.2); |
||||
|
border: 1px solid yellow; |
||||
|
color: yellow; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mount { |
||||
|
margin-top: 25px; |
||||
|
} |
||||
|
|
||||
|
.screen { |
||||
|
margin: 5px 0 40px; |
||||
|
|
||||
|
.el-select, |
||||
|
.el-input { |
||||
|
width: 150px; |
||||
|
margin-right: 4px; |
||||
|
border: 1px solid #126ac5; |
||||
|
border-radius: 2px; |
||||
|
|
||||
|
/deep/ .el-input__inner { |
||||
|
background: none; |
||||
|
border: none; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.btn { |
||||
|
margin-left: 46px; |
||||
|
height: 32px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
|
||||
Loading…
Reference in new issue