<template>
|
<div class="box">
|
<div class="box_content">
|
<div class="left">
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
<div style="width: 100%; height: 20px;"></div>
|
<el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
|
</div>
|
<div class="right">
|
<div class="right_head">项目名称</div>
|
<div class="right_cate">
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
<el-tab-pane label="项目概况" name="first">
|
<div class="xm">
|
<el-card>
|
<div class="xm_one">
|
<div class="xm_one_row">
|
<span>在租合同数</span>
|
<span>4</span>
|
<span>在租房源数：5</span>
|
</div>
|
<div class="xm_one_row">
|
<span>可招商面积</span>
|
<span>50000㎡</span>
|
<span>可招商房源数：15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>在租实时均价</span>
|
<span>145.75元/m²·天</span>
|
<span>在租面积：900.00m²</span>
|
</div>
|
<div class="xm_one_row">
|
<span>出租率</span>
|
<span>50.00%</span>
|
<span>待租面积：700.00m²</span>
|
</div>
|
</div>
|
</el-card>
|
<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>XXXXXXXXXX</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>所属地区</span>
|
<span>安徽省-合肥市-蜀山区</span>
|
</div>
|
<div class="xm_info_row" style="width: 50%;">
|
<span>详细地址</span>
|
<span>Lorem ipsum dolor sit amet, consectetur</span>
|
</div>
|
<div class="xm_info_row" style="width: 100%; margin-top: 15px;">
|
<span>项目简介</span>
|
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>当前在租合同</span>
|
</div>
|
<div class="xm_table">
|
<el-input v-model="input" style="width: 300px; margin-bottom: 15px;" placeholder="请输入内容"></el-input>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="合同编号">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="租客">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁单价">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁天数">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁面积">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="房源">
|
</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="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>XXXXXXXXXX</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇</span>
|
<span>综合楼</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼层</span>
|
<span>1</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>房号</span>
|
<span>101活动室</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>房间编号</span>
|
<span>101</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>是否招商</span>
|
<span>否</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>建筑面积</span>
|
<span>50㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计租面积</span>
|
<span>50㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计费面积</span>
|
<span>45㎡</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 slot="header" class="clearfix">
|
<span>当前在租合同</span>
|
</div>
|
<div class="xm_table">
|
<el-input v-model="input" style="width: 300px; margin-bottom: 15px;" placeholder="请输入合同编号"></el-input>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="合同编号">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="客户名称">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="开始日期">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="结束日期">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁单价">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁面积（㎡）">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="签订日">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="合同来源">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="合同状态">
|
</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="louyu">
|
<div class="xm">
|
<el-card>
|
<div class="xm_one">
|
<div class="xm_one_row">
|
<span>在租合同数</span>
|
<span>4</span>
|
<span>在租房源数：5</span>
|
</div>
|
<div class="xm_one_row">
|
<span>可招商面积</span>
|
<span>50000㎡</span>
|
<span>可招商房源数：15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>在租实时均价</span>
|
<span>145.75元/m²·天</span>
|
<span>在租面积：900.00m²</span>
|
</div>
|
<div class="xm_one_row">
|
<span>出租率</span>
|
<span>50.00%</span>
|
<span>待租面积：700.00m²</span>
|
</div>
|
</div>
|
</el-card>
|
<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>阜宁文体中心</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇名称</span>
|
<span>A座</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>楼宇编码</span>
|
<span>A-</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%;">
|
<span>详细地址</span>
|
<span>阜宁文体中心西南角</span>
|
</div>
|
<div class="xm_info_row" style="width: 100%; margin-top: 15px;">
|
<span>详细地址</span>
|
<span>阜宁文体中心西南角</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>建筑面积</span>
|
<span>1000㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>计租面积</span>
|
<span>1000㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 50%; margin-top: 15px;">
|
<span>计费面积</span>
|
<span>1000㎡</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>地上层数</span>
|
<span>5</span>
|
</div>
|
<div class="xm_info_row" style="width: 25%; margin-top: 15px;">
|
<span>地下层数</span>
|
<span>2</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div slot="header" class="clearfix">
|
<span>当前在租合同</span>
|
</div>
|
<div class="xm_table">
|
<el-input v-model="input" style="width: 300px; margin-bottom: 15px;" placeholder="请输入内容"></el-input>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="合同编号">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="租客">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁单价">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁天数">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="租赁面积">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="房源">
|
</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="house">
|
<div class="xm">
|
<div class="xm_house">
|
<div class="xm_house_tips">
|
<div class="xm_house_tips_row">
|
<div class="xm_house_tips_row_d"></div>
|
<span>已出租</span>
|
</div>
|
<div class="xm_house_tips_row">
|
<div class="xm_house_tips_row_d"></div>
|
<span>未出租</span>
|
</div>
|
<div class="xm_house_tips_row">
|
<div class="xm_house_tips_row_d"></div>
|
<span>90日内到期</span>
|
</div>
|
</div>
|
<div class="xm_house_list">
|
<div class="xm_house_list_left">
|
<div class="xm_house_list_left_row">
|
<span>1F</span>
|
<span>600㎡</span>
|
</div>
|
</div>
|
<div class="xm_house_list_right">
|
<div class="item">
|
<div class="xm_house_list_right_row">
|
<span>101（600㎡）</span>
|
<div class="xm_house_list_right_row_info">
|
<span>租客名称</span>
|
<span>2024-08-16到期</span>
|
</div>
|
</div>
|
<div class="xm_house_list_right_row">
|
<span>101（600㎡）</span>
|
<div class="xm_house_list_right_row_info">
|
<span>租客名称</span>
|
<span>2024-08-16到期</span>
|
</div>
|
</div>
|
<div class="xm_house_list_right_row">
|
<span>101（600㎡）</span>
|
<div class="xm_house_list_right_row_info">
|
<span>租客名称</span>
|
<span>2024-08-16到期</span>
|
</div>
|
</div>
|
<div class="xm_house_list_right_row">
|
<span>101（600㎡）</span>
|
<div class="xm_house_list_right_row_info">
|
<span>租客名称</span>
|
<span>2024-08-16到期</span>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</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>15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>待处理数量</span>
|
<span>15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>本月工单数</span>
|
<span>15</span>
|
</div>
|
<div class="xm_one_row">
|
<span>累计工单数</span>
|
<span>15</span>
|
</div>
|
</div>
|
</el-card>
|
<el-card style="margin-top: 20px;">
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<el-select v-model="value" style="width: 300px; margin-right: 15px;" placeholder="位置类型">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-select v-model="value" style="width: 300px;" placeholder="工单分类">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="工单分类">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="报修区域">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报时间">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="处理人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="工单状态">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
</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 id="chat1"></div>
|
</el-card>
|
<el-card class="xm_chat_row">
|
<div id="chat2"></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="input" placeholder="请输入设备名称/编码" style="width: 200px; margin-right: 15px;"></el-input>
|
<el-select v-model="value" style="width: 200px; margin-right: 15px;" placeholder="设备状态">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-button type="primary">查询</el-button>
|
<el-button>清空</el-button>
|
</div>
|
<el-button type="primary">新增</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="工单分类">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="报修区域">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="上报时间">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="处理人">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="工单状态">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="操作">
|
</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="fourth">
|
<div class="xm">
|
<el-card>
|
<div slot="header" class="clearfix">
|
<span>资产清单</span>
|
</div>
|
<div class="xm_table">
|
<div class="xm_table_search">
|
<div class="xm_table_search_left">
|
<el-input v-model="input" placeholder="请输入资产名称/编码" style="width: 200px; margin-right: 15px;"></el-input>
|
<el-select v-model="value" style="width: 200px; margin-right: 15px;" placeholder="资产分类">
|
<el-option
|
v-for="item in options"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value">
|
</el-option>
|
</el-select>
|
<el-button type="primary">查询</el-button>
|
<el-button>清空</el-button>
|
</div>
|
<el-button type="primary">新增</el-button>
|
</div>
|
<el-table
|
:data="tableData"
|
border
|
style="width: 100%">
|
<el-table-column
|
prop="date"
|
label="资产编码">
|
</el-table-column>
|
<el-table-column
|
prop="name"
|
label="资产名称">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="条码">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="品牌">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="规格型号">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="单位">
|
</el-table-column>
|
<el-table-column
|
prop="address"
|
label="库存数量">
|
</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>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import * as echarts from 'echarts';
|
export default {
|
name: 'index',
|
data() {
|
return {
|
input: '',
|
tableData: [],
|
data: [{
|
label: '一级 1',
|
children: [{
|
label: '二级 1-1',
|
children: [{
|
label: '三级 1-1-1'
|
}]
|
}]
|
}, {
|
label: '一级 2',
|
children: [{
|
label: '二级 2-1',
|
children: [{
|
label: '三级 2-1-1'
|
}]
|
}, {
|
label: '二级 2-2',
|
children: [{
|
label: '三级 2-2-1'
|
}]
|
}]
|
}, {
|
label: '一级 3',
|
children: [{
|
label: '二级 3-1',
|
children: [{
|
label: '三级 3-1-1'
|
}]
|
}, {
|
label: '二级 3-2',
|
children: [{
|
label: '三级 3-2-1'
|
}]
|
}]
|
}],
|
defaultProps: {
|
children: 'children',
|
label: 'label'
|
},
|
activeName: 'first',
|
total: 0,
|
pageTotal: 10,
|
page: 1,
|
options: [{
|
value: '选项1',
|
label: '黄金糕'
|
}, {
|
value: '选项2',
|
label: '双皮奶'
|
}, {
|
value: '选项3',
|
label: '蚵仔煎'
|
}, {
|
value: '选项4',
|
label: '龙须面'
|
}, {
|
value: '选项5',
|
label: '北京烤鸭'
|
}],
|
value: ''
|
}
|
},
|
created () {
|
this.$nextTick(() => {
|
this.reand()
|
this.reand1()
|
})
|
},
|
methods: {
|
reand() {
|
var chartDom = document.getElementById('chat1');
|
var myChart = echarts.init(chartDom);
|
var option;
|
option = {
|
tooltip: {
|
trigger: 'item'
|
},
|
legend: {
|
top: '5%',
|
left: 'center'
|
},
|
series: [
|
{
|
name: 'Access From',
|
type: 'pie',
|
radius: ['40%', '80%'],
|
avoidLabelOverlap: false,
|
label: {
|
show: false,
|
position: 'center'
|
},
|
emphasis: {
|
label: {
|
show: true,
|
fontSize: 40,
|
fontWeight: 'bold'
|
}
|
},
|
labelLine: {
|
show: false
|
},
|
data: [
|
{ value: 1048, name: '正常' },
|
{ value: 735, name: '异常' },
|
{ value: 580, name: '报废' }
|
]
|
}
|
]
|
};
|
option && myChart.setOption(option);
|
},
|
reand1() {
|
var chartDom = document.getElementById('chat2');
|
var myChart = echarts.init(chartDom);
|
var option;
|
// There should not be negative values in rawData
|
const rawData = [
|
[100, 302, 301, 334, 390, 330, 320],
|
[320, 132, 101, 134, 90, 230, 210],
|
[220, 182, 191, 234, 290, 330, 310],
|
[150, 212, 201, 154, 190, 330, 410],
|
[820, 832, 901, 934, 1290, 1330, 1320]
|
];
|
const totalData = [];
|
for (let i = 0; i < rawData[0].length; ++i) {
|
let sum = 0;
|
for (let j = 0; j < rawData.length; ++j) {
|
sum += rawData[j][i];
|
}
|
totalData.push(sum);
|
}
|
const grid = {
|
left: 100,
|
right: 100,
|
top: 50,
|
bottom: 50
|
};
|
const series = [
|
'Direct',
|
'Mail Ad',
|
'Affiliate Ad',
|
'Video Ad',
|
'Search Engine'
|
].map((name, sid) => {
|
return {
|
name,
|
type: 'bar',
|
stack: 'total',
|
barWidth: '60%',
|
label: {
|
show: true,
|
formatter: (params) => Math.round(params.value * 1000) / 10 + '%'
|
},
|
data: rawData[sid].map((d, did) =>
|
totalData[did] <= 0 ? 0 : d / totalData[did]
|
)
|
};
|
});
|
option = {
|
legend: {
|
selectedMode: false
|
},
|
grid,
|
yAxis: {
|
type: 'value'
|
},
|
xAxis: {
|
type: 'category',
|
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
|
},
|
series
|
};
|
|
option && myChart.setOption(option);
|
},
|
handleCurrentChange(page) {
|
this.page = page
|
},
|
handleSizeChange(pageTotal) {
|
this.pageTotal = pageTotal
|
},
|
handleNodeClick(data) {
|
console.log(data);
|
},
|
handleClick(tab, event) {
|
console.log(tab, event);
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.box {
|
width: 100%;
|
height: 100%;
|
padding: 16px;
|
box-sizing: border-box;
|
.box_content {
|
width: 100%;
|
display: flex;
|
align-items: start;
|
justify-content: space-between;
|
.left {
|
width: 300px;
|
padding: 20px;
|
box-sizing: border-box;
|
flex-shrink: 0;
|
margin-right: 20px;
|
display: flex;
|
flex-direction: column;
|
background: #ffffff;
|
}
|
.right {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
.right_head {
|
width: 100%;
|
padding: 20px;
|
box-sizing: border-box;
|
font-size: 16px;
|
font-weight: bold;
|
color: black;
|
background: #ffffff;
|
}
|
.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;
|
#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>
|
