You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
713 lines
26 KiB
713 lines
26 KiB
2 years ago
|
<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>
|
||
|
|
|