<template>
|
<GlobalWindow
|
:title="title"
|
:showConfirm="false"
|
:visible.sync="visible"
|
width="100%">
|
<div class="right">
|
<div class="right_head">
|
<span class="right_head_title">{{info.roomNum}}</span>
|
<el-tag type="info" v-if="info.leaseStatus == 0">待租赁</el-tag>
|
<el-tag type="success" v-if="info.leaseStatus == 1">已租赁</el-tag>
|
<el-tag type="info" v-if="info.leaseStatus == 2">未开启租赁</el-tag>
|
</div>
|
<div class="right_cate">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="房源信息" name="houseinfo">
|
<div class="xm">
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>房源信息</span>
|
</div>
|
<div class="xm_info">
|
<div class="xm_info_row" style="width: 25%;">
|
<span>所属项目</span>
|
<span>{{info.projectName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇</span>
|
<span>{{info.buildingName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼层</span>
|
<span>{{info.floorName}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>房号</span>
|
<span>{{info.roomNum}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>房间编号</span>
|
<span>{{info.code}}</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>是否招商</span>
|
<span v-if="info.isInvestment === 0">否</span>
|
<span v-if="info.isInvestment === 1">是</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>建筑面积</span>
|
<span>{{info.area}}㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计租面积</span>
|
<span>{{info.rentArea}}㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计费面积</span>
|
<span>{{info.feeArea}}㎡</span>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="租客合同" name="project">
|
<div class="xm">
|
<el-card style="margin-top: 20px;">
|
<div class="xm_table">
|
<div style="width: 100%; display: flex; align-items: center; margin-bottom: 15px;">
|
<el-input v-model="form.code" style="width: 300px;" placeholder="请输入合同编号"></el-input>
|
<el-button type="primary" style="margin-left: 15px;" @click="getTenantContract()">搜索</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
label="合同编号">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="$refs.ContractDetailRef.open('合同详情', row.id)">{{row.code}}</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="客户名称">
|
<template slot-scope="{row}">
|
<div style="display: flex; align-items: center;">
|
{{row.renterName}}
|
<el-tag type="success" v-if="[1,2,3].includes(row.status)">当前租户</el-tag>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="startDate"
|
label="开始日期">
|
</el-table-column>
|
<el-table-column
|
prop="endDate"
|
label="结束日期">
|
</el-table-column>
|
<el-table-column
|
label="租赁单价">
|
<template slot-scope="{row}">
|
<div style="display: flex; align-items: center;">
|
<span>{{row.zlFirstPrice || row.wyFirstPrice}}</span>
|
<span>{{row.zlFirstCircleStr || row.wyFirstCircleStr}}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="租赁面积（㎡）">
|
<template slot-scope="{row}">
|
{{row.totalArea}}㎡
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="signDate"
|
label="签订日">
|
</el-table-column>
|
<el-table-column
|
label="合同状态">
|
<template slot-scope="{row}">
|
<span class="primaryColor" v-if="row.status === 0">待执行</span>
|
<span class="green" v-if="row.status === 1">正常执行中</span>
|
<span class="gary" v-if="row.status === 2">已到期</span>
|
<span class="gary" v-if="row.status === 3">退租结算中</span>
|
<span class="gary" v-if="row.status === 4">已退租</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="xm_table_f">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="工单记录" name="second">
|
<div class="xm">
|
<el-card>
|
<div class="xm_one1">
|
<div class="xm_one_row">
|
<span>待指派数量</span>
|
<span>{{numObj.waitAssignAmount || 0}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>待处理数量</span>
|
<span>{{numObj.waitDealAmount || 0}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>本月工单数</span>
|
<span>{{numObj.monthAmount || 0}}</span>
|
</div>
|
<div class="xm_one_row">
|
<span>累计工单数</span>
|
<span>{{numObj.amount || 0}}</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<div>
|
<el-cascader style="width: 150px; margin-right: 15px;" v-model="form.areaIds" @change="changeSel" placeholder="请选择工单分类" clearable
|
:options="cateList" :props="{
|
label: 'name',
|
value: 'id',
|
children: 'childCategoryList'
|
}" />
|
<el-select v-model="form.dealStatus" style="width: 150px; margin-right: 15px;" placeholder="工单状态">
|
<el-option label="待指派" :value="0"></el-option>
|
<el-option label="已指派" :value="1"></el-option>
|
<el-option label="已处理" :value="2"></el-option>
|
</el-select>
|
<el-button type="primary" @click="getFetchList">查询</el-button>
|
<el-button @click="clear">清空</el-button>
|
</div>
|
<el-button type="primary" @click="addWorkOrder">新增工单</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
prop="categoryName"
|
label="工单分类">
|
</el-table-column>
|
<el-table-column
|
label="报修区域">
|
<template v-slot="scope">
|
<span>{{ scope.row.buildingName }} / {{ scope.row.areaType == 0 ? scope.row.roomNum : scope.row.floorName
|
}}</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="creatorName"
|
label="上报人">
|
</el-table-column>
|
<el-table-column
|
prop="createDate"
|
label="上报时间">
|
</el-table-column>
|
<el-table-column
|
prop="dealUserName"
|
label="处理人">
|
</el-table-column>
|
<el-table-column
|
label="工单状态">
|
<template slot-scope="{row}">
|
<span v-if="row.dealStatus === 0">待指派</span>
|
<span v-if="row.dealStatus === 1">已指派</span>
|
<span v-if="row.dealStatus === 2">已处理</span>
|
</template>
|
</el-table-column>
|
<el-table-column
|
label="操作">
|
<template slot-scope="{row}">
|
<el-button type="text" @click="handleDetail(row)">查看详情</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="xm_table_f">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
<el-tab-pane label="设备信息" name="third">
|
<div class="xm">
|
<div class="xm_chat">
|
<el-card class="xm_chat_row">
|
<div class="xm_chat_row_info">
|
<span>总计</span>
|
<span>{{amount}}</span>
|
</div>
|
<div id="chat1" v-if="activeName === 'third'"></div>
|
</el-card>
|
<el-card class="xm_chat_row">
|
<div id="chat2" v-if="activeName === 'third'"></div>
|
</el-card>
|
</div>
|
<el-card style="margin-top: 20px;">
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<div class="xm_table_search_left">
|
<el-input v-model="form.name" placeholder="请输入设备名称/编码" style="width: 200px; margin-right: 15px;"></el-input>
|
<el-select v-model="form.status" style="width: 150px; margin-right: 15px;" placeholder="设备状态">
|
<el-option label="正常" :value="0"></el-option>
|
<el-option label="损坏" :value="1"></el-option>
|
<el-option label="报废" :value="2"></el-option>
|
</el-select>
|
<el-button type="primary" @click="getDevicePage">查询</el-button>
|
<el-button @click="clear">清空</el-button>
|
</div>
|
<el-button type="primary" @click="handleEdit">新增</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
v-loading="loading"
|
style="width: 100%">
|
<el-table-column
|
prop="code"
|
label="设备编码">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="设备名称">
|
</el-table-column>
|
<el-table-column
|
prop="categoryName"
|
label="设备分类">
|
</el-table-column>
|
<el-table-column
|
prop="modelNo"
|
label="设备型号">
|
</el-table-column>
|
<el-table-column
|
prop="realName"
|
label="设备管理员">
|
</el-table-column>
|
<el-table-column
|
prop="supplier"
|
label="设备供应商">
|
</el-table-column>
|
<el-table-column
|
label="设备状态">
|
<template slot-scope="{row}">
|
<span v-if="row.status === 0">正常</span>
|
<span v-if="row.status === 1">损坏</span>
|
<span v-if="row.status === 2">报废</span>
|
</template>
|
</el-table-column>
|
</el-table>
|
<div class="xm_table_f">
|
<el-pagination
|
@size-change="handleSizeChange"
|
@current-change="handleCurrentChange"
|
:current-page="page"
|
:page-sizes="[10, 20, 30, 40]"
|
:page-size="pageTotal"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="total">
|
</el-pagination>
|
</div>
|
</div>
|
</el-card>
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<!-- 合同详情 -->
|
<ContractDetail ref="ContractDetailRef" />
|
<!-- 工单详情 -->
|
<Detail v-if="showDetail" ref="DetailRef" @close="showDetail = false" />
|
<!-- 新建工单 -->
|
<OperaYwWorkorderWindow ref="operaYwWorkorderWindow" @success="getFetchList" />
|
<!-- 新建设备 -->
|
<Edit v-if="showEdit1" ref="EditRef" @success="getDevicePage" @close="showEdit1 = false" />
|
<!-- 新建资产 -->
|
<newMaterial ref="newMaterial" @success="getPropertyLists" />
|
</GlobalWindow>
|
</template>
|
|
<script>
|
import BaseOpera from '@/components/base/BaseOpera'
|
import GlobalWindow from '@/components/common/GlobalWindow'
|
import newMaterial from '../../stock/components/newMaterial'
|
import * as echarts from 'echarts';
|
import { detailById } from '@/api/project/ywRoom'
|
import { fetchList as TenantContract } from '@/api/contract'
|
import { getDataVO, fetchList } from '@/api/workorder/ywWorkorder'
|
import ContractDetail from '../../contract/components/contractDetail'
|
import { fetchList as getCateList } from '@/api/business/category.js'
|
import { fetchList as getPropertyList } from '@/api/ywMaterial'
|
import { getDeviceStatus, getDeviceCateData, fetchList as devicePage } from '@/api/Inspection/device'
|
import Detail from '../../workorder/components/detail'
|
import OperaYwWorkorderWindow from '../../workorder/components/OperaYwWorkorderWindow'
|
import Edit from '../../operation/components/deviceEdit'
|
export default {
|
name: "houseDetails",
|
extends: BaseOpera,
|
components: { GlobalWindow, ContractDetail, Detail, OperaYwWorkorderWindow, Edit, newMaterial },
|
data() {
|
return {
|
info: {},
|
houseId: '',
|
propsName: '',
|
activeName: 'houseinfo',
|
total: 0,
|
pageTotal: 10,
|
page: 1,
|
numObj: {},
|
tableData: [],
|
loading: false,
|
form: {
|
code: '',
|
areaIds: [],
|
cateId: '',
|
status: '',
|
name: '',
|
dealStatus: ''
|
},
|
cateList: [],
|
categaryList: [],
|
deviceList: [],
|
showDetail: false,
|
showEdit1: false,
|
amount: 0
|
}
|
},
|
methods: {
|
open (title, id) {
|
this.title = title
|
this.activeName = 'houseinfo'
|
this.houseId = id
|
detailById(id)
|
.then(res => {
|
this.info = res
|
this.visible = true
|
})
|
},
|
handleEdit(row) {
|
this.showEdit1 = true
|
this.$nextTick(() => {
|
this.$refs.EditRef.param.projectId = this.info.projectId
|
this.$refs.EditRef.param.rooms = [this.info.projectId, this.info.buildingId, this.info.floor, this.info.id]
|
this.$refs.EditRef.isShowModal = true
|
this.$refs.EditRef.changeProject()
|
this.$refs.EditRef.getHouseVal([this.info.projectId, this.info.buildingId, this.info.floor, this.info.id])
|
})
|
},
|
handleDetail(row) {
|
this.showDetail = true
|
this.$nextTick(() => {
|
this.$refs.DetailRef.visible = true
|
this.$refs.DetailRef.id = row.id
|
this.$refs.DetailRef.getDetail()
|
})
|
},
|
addWorkOrder() {
|
this.$refs.operaYwWorkorderWindow.open('新建工单', {
|
rooms: [this.info.projectId, this.info.buildingId, this.info.floor, this.info.id],
|
areaType: 0,
|
content: '',
|
projectId: this.info.projectId,
|
buildingId: this.info.buildingId,
|
floorId: this.info.floor,
|
roomId: this.info.id
|
})
|
},
|
// 获取设备状态
|
getDevice() {
|
getDeviceStatus({ roomId: this.houseId })
|
.then(res => {
|
this.$nextTick(() => {
|
this.deviceList = [
|
{ value: res.workAmount || 0, name: '正常' },
|
{ value: res.exceptionAmount || 0, name: '损坏' },
|
{ value: res.errAmount || 0, name: '报废' }
|
]
|
this.amount = res.amount
|
this.reand()
|
})
|
})
|
},
|
// 设备数量分布统计
|
getDeviceCateDatas() {
|
getDeviceCateData({
|
roomId: this.houseId
|
}).then(res => {
|
this.categaryList = res
|
this.$nextTick(() => {
|
this.reand1()
|
})
|
})
|
},
|
// 获取设备分页
|
getDevicePage() {
|
this.loading = true
|
devicePage({
|
capacity: this.pageTotal,
|
page: this.page,
|
model: {
|
roomId: this.houseId,
|
status: this.form.status,
|
name: this.form.name
|
}
|
}).then(res => {
|
this.tableData = res.records
|
this.total = res.total
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
// 获取资产列表
|
getPropertyLists() {
|
this.loading = true
|
getPropertyList({
|
capacity: this.pageTotal,
|
page: this.page,
|
model: {
|
roomId: this.houseId,
|
name: this.form.name
|
}
|
}).then(res => {
|
this.tableData = res.records
|
this.total = res.total
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
getCate() {
|
getCateList({
|
model: { type: 3 },
|
capacity: 1000,
|
page: 1,
|
}).then(res => {
|
this.cateList = res.records || []
|
})
|
},
|
changeSel(e) {
|
if (e && e.length == 2) {
|
this.$set(this.form, 'cateId', e[1])
|
} else {
|
this.$set(this.form, 'cateId', '')
|
}
|
},
|
clear() {
|
this.page = 1
|
this.form.status = ''
|
this.form.areaIds = []
|
this.form.cateId = ''
|
this.form.dealStatus = ''
|
this.form.name = ''
|
if (this.propsName === 'project') {
|
this.getTenantContract()
|
} else if (this.propsName === 'second') {
|
this.getFetchList()
|
} else if (this.propsName === 'third') {
|
this.getDevicePage()
|
} else if (this.propsName === 'fourth') {
|
this.getPropertyLists()
|
}
|
},
|
// 获取工单数
|
getDataVOs() {
|
getDataVO({
|
queryId: this.houseId,
|
queryType: 3
|
}).then(res => {
|
this.numObj = res
|
})
|
},
|
// 获取工单列表
|
getFetchList() {
|
this.loading = true
|
fetchList({
|
capacity: 10,
|
page: 1,
|
model: {
|
roomId: this.houseId,
|
dealStatus: this.form.dealStatus,
|
cateId: this.form.cateId
|
}
|
}).then(res => {
|
this.tableData = res.records
|
this.total = res.total
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
// 获取合同分页
|
getTenantContract() {
|
this.loading = true
|
TenantContract({
|
capacity: this.pageTotal,
|
page: this.page,
|
model: {
|
roomId: this.houseId,
|
code: this.form.code
|
}
|
}).then(res => {
|
this.tableData = res.records
|
this.total = res.total
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
reand() {
|
var chartDom = document.getElementById('chat1');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
title: {
|
text: '设备状态'
|
},
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
left: 'right',
|
top: 'middle',
|
width: '80'
|
},
|
series: [
|
{
|
name: '设备状态',
|
type: 'pie',
|
radius: ['50%', '80%'],
|
data: this.deviceList
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
},
|
reand1() {
|
var chartDom = document.getElementById('chat2');
|
var myChart = echarts.init(chartDom);
|
var option;
|
let seriesArr = []
|
this.categaryList.forEach((one, index) => {
|
one.ywDeviceCateDataVOList.forEach(two => {
|
let data = []
|
this.categaryList.forEach(item => {
|
data.push(0)
|
})
|
data[index] = two.deviceAmount
|
seriesArr.push({
|
name: two.cateName,
|
type: 'bar',
|
barGap:-1,
|
stack: one.cateName,
|
data
|
})
|
})
|
})
|
let xAxisData = this.categaryList.map(item => item.cateName)
|
option = {
|
title: {
|
text: '设备数量分类统计'
|
},
|
grid: {
|
left: 50,
|
right: 50,
|
top: 50,
|
bottom: 50
|
},
|
tooltip: {
|
trigger: 'axis',
|
axisPointer: {
|
type: 'shadow'
|
},
|
formatter: params => {
|
var res = `${params[0].name} <br/>`
|
for (const item of params) {
|
if (item.value !== 0) {
|
res += `<span style="background: ${item.color}; height:10px; width: 10px; border-radius: 50%;display: inline-block;margin-right:10px;"></span> ${item.seriesName} ：${item.value}<br/>`
|
}
|
}
|
return res
|
}
|
},
|
xAxis: [
|
{
|
type: 'category',
|
position: 'bottom',
|
data: xAxisData
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
data: Array.from({ length: 100 }, (_, i) => i + 1)
|
}
|
],
|
series: seriesArr
|
};
|
|
option && myChart.setOption(option);
|
},
|
handleClick(tab) {
|
this.page = 1
|
this.pageTotal = 10
|
this.tableData = []
|
this.total = 0
|
this.form.code = ''
|
this.form.areaIds = []
|
this.form.cateId = ''
|
this.form.status = ''
|
this.form.name = ''
|
this.form.dealStatus = ''
|
this.propsName = tab._props.name
|
if (tab._props.name === 'project') {
|
this.getTenantContract()
|
} else if (tab._props.name === 'second') {
|
this.getDataVOs()
|
this.getCate()
|
this.getFetchList()
|
} else if (tab._props.name === 'third') {
|
this.getDevice()
|
this.getDeviceCateDatas()
|
this.getDevicePage()
|
} else if (this.propsName === 'fourth') {
|
this.getPropertyLists()
|
}
|
},
|
handleCurrentChange(page) {
|
this.page = page
|
if (this.propsName === 'project') {
|
this.getTenantContract()
|
} else if (this.propsName === 'second') {
|
this.getFetchList()
|
} else if (this.propsName === 'third') {
|
this.getDevicePage()
|
} else if (this.propsName === 'fourth') {
|
this.getPropertyLists()
|
}
|
},
|
handleSizeChange(pageTotal) {
|
this.pageTotal = pageTotal
|
if (this.propsName === 'project') {
|
this.getTenantContract()
|
} else if (this.propsName === 'second') {
|
this.getFetchList()
|
} else if (tab.propsName === 'third') {
|
this.getDevicePage()
|
} else if (this.propsName === 'fourth') {
|
this.getPropertyLists()
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.right {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.right_head {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
.right_head_title {
|
font-size: 16px;
|
font-weight: bold;
|
color: black;
|
background: #ffffff;
|
margin-right: 10px;
|
}
|
}
|
.right_cate {
|
width: 100%;
|
padding: 0 20px 20px 20px;
|
box-sizing: border-box;
|
background: #ffffff;
|
.xm {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.xm_house {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
align-items: self-end;
|
.xm_house_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 10px;
|
.xm_house_list_left {
|
flex-shrink: 0;
|
width: 100px;
|
display: flex;
|
margin-right: 20px;
|
flex-direction: column;
|
.xm_house_list_left_row {
|
width: 100px;
|
height: 100px;
|
background: rgba(242, 242, 242, 1);
|
padding: 20px 0;
|
box-sizing: border-box;
|
margin-bottom: 20px;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: space-between;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
span {
|
&:nth-child(1) {
|
font-size: 18px;
|
color: #333333;
|
font-weight: 400;
|
}
|
&:nth-child(2) {
|
font-size: 12px;
|
color: #929292;
|
}
|
}
|
}
|
}
|
.xm_house_list_right {
|
width: calc(100% - 130px);
|
display: flex;
|
flex-direction: column;
|
.item {
|
width: calc(100% - 130px);
|
display: flex;
|
align-items: center;
|
margin-bottom: 20px;
|
&:last-child {
|
margin-bottom: 0;
|
}
|
.xm_house_list_right_row {
|
height: 100px;
|
width: 300px;
|
background: rgba(198, 224, 167, 0.34509803921568627);
|
padding: 10px 0;
|
box-sizing: border-box;
|
display: flex;
|
align-items: center;
|
flex-direction: column;
|
justify-content: space-between;
|
span {
|
font-size: 14px;
|
color: #000000;
|
}
|
.xm_house_list_right_row_info {
|
display: flex;
|
flex-direction: column;
|
span {
|
&:nth-child(1) {
|
color: #000000;
|
font-size: 14px;
|
}
|
&:nth-child(2) {
|
color: #A5A5A5;
|
font-size: 12px;
|
margin-top: 3px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
.xm_house_tips {
|
display: flex;
|
align-items: center;
|
.xm_house_tips_row {
|
margin-left: 30px;
|
display: flex;
|
align-items: center;
|
.xm_house_tips_row_d {
|
width: 10px;
|
height: 10px;
|
background: orange;
|
margin-right: 5px;
|
}
|
span {
|
font-size: 16px;
|
color: black;
|
}
|
}
|
}
|
}
|
.xm_chat {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.xm_chat_row {
|
width: 49%;
|
height: 300px;
|
position: relative;
|
.xm_chat_row_info {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
transform: translate(-50%, -50%);
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
span {
|
&:nth-child(1) {
|
font-size: 20px;
|
color: #222222;
|
}
|
&:nth-child(2) {
|
font-size: 28px;
|
color: #222222;
|
font-weight: bold;
|
}
|
}
|
}
|
#chat1 {
|
width: 100%;
|
height: 260px;
|
}
|
#chat2 {
|
width: 100%;
|
height: 260px;
|
}
|
}
|
}
|
.xm_one {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.xm_one_row {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
span {
|
font-size: 16px;
|
color: black;
|
&:nth-child(2) {
|
font-weight: bold;
|
margin: 15px 0;
|
}
|
&:nth-child(3) {
|
color: #666666;
|
}
|
}
|
}
|
}
|
.xm_one1 {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.xm_one_row {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
span {
|
font-size: 16px;
|
color: black;
|
&:nth-child(2) {
|
font-size: 18px;
|
font-weight: bold;
|
margin-top: 15px;
|
}
|
}
|
}
|
}
|
.xm_table {
|
width: 100%;
|
.xm_table_search {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 15px;
|
}
|
.xm_table_f {
|
width: 100%;
|
text-align: right;
|
}
|
}
|
.xm_info {
|
width: 100%;
|
display: flex;
|
flex-wrap: wrap;
|
align-items: center;
|
.xm_info_row {
|
display: flex;
|
flex-direction: column;
|
span {
|
font-size: 16px;
|
&:nth-child(1) {
|
color: #666666;
|
}
|
&:nth-child(2) {
|
color: #000000;
|
margin-top: 15px;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
