样式调整

shuishen

2022-11-07 4991f22d6d011770b00cdc5fe2355edd51180e03

样式调整

 src/views/house/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-18 11:23:11
 * @LastEditTime: 2022-11-07 15:16:54
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -18,18 +18,15 @@

        <div v-show="searchValBoxShow" class="search-val-box">
            <div>
                <div
                    @click="searchVlaClick(item)"
                    v-for="(item, index) in searchArray"
                    :key="index"
                >{{item.name}}</div>
                <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }}
                </div>
            </div>
        </div>

        <div class="result-content">
            <div class="housing-estate-info">
                <div class="housing-title">
                    {{housingData.name}}
                    {{ housingData.name }}
                    <div class="progress"></div>
                </div>
                <div class="housing-bg">
@@ -38,74 +35,50 @@
                <div class="housing-introduce">
                    <div>
                        <div class="l">分类属性：</div>
                        <div class="r">{{housingData.classify}}</div>
                        <div class="r">{{ housingData.classify }}</div>
                    </div>
                    <div>
                        <div class="l">所属辖区：</div>
                        <div class="r">{{housingData.area}}</div>
                        <div class="r">{{ housingData.area }}</div>
                    </div>
                    <div>
                        <div class="l">责任民警：</div>
                        <div class="r">{{housingData.principal}}</div>
                        <div class="r">{{ housingData.principal }}</div>
                    </div>
                    <div>
                        <div class="l">标准地址：</div>
                        <div class="r">{{housingData.address}}</div>
                        <div class="r">{{ housingData.address }}</div>
                    </div>
                </div>
            </div>

            <div class="nav-tab">
                <div
                    class="nav"
                    :class="navType == 0?'choosed':''"
                    @click="navClick"
                    data-type="0"
                >基本信息</div>
                <div
                    class="nav"
                    :class="navType == 1?'choosed':''"
                    @click="navClick"
                    data-type="1"
                >警务信息</div>
                <div
                    class="nav"
                    :class="navType == 2?'choosed':''"
                    @click="navClick"
                    data-type="2"
                >预警信息</div>
                <div class="nav" :class="navType == 0 ? 'choosed' : ''" @click="navClick" data-type="0">基本信息</div>
                <div class="nav" :class="navType == 1 ? 'choosed' : ''" @click="navClick" data-type="1">警务信息</div>
                <div class="nav" :class="navType == 2 ? 'choosed' : ''" @click="navClick" data-type="2">预警信息</div>
            </div>

            <div class="base-info" v-show="navType == 0">
                <div class="sub-nav-list">
                    <div class="sub-nav" :class="{on:subNavType == 1}" @click="subNavType = 1">楼栋</div>
                    <div class="sub-nav" :class="{on:subNavType == 2}" @click="subNavType = 2">出入口</div>
                    <div class="sub-nav" :class="{on:subNavType == 3}" @click="subNavType = 3">停车场</div>
                    <div class="sub-nav" :class="{on:subNavType == 4}" @click="subNavType = 4">商业</div>
                    <div class="sub-nav" :class="{ on: subNavType == 1 }" @click="subNavType = 1">楼栋</div>
                    <div class="sub-nav" :class="{ on: subNavType == 2 }" @click="subNavType = 2">出入口</div>
                    <div class="sub-nav" :class="{ on: subNavType == 3 }" @click="subNavType = 3">停车场</div>
                    <div class="sub-nav" :class="{ on: subNavType == 4 }" @click="subNavType = 4">商业</div>
                </div>

                <div class="floor-content" v-show="subNavType == 1">
                    <div class="build-info">
                        <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow==true">
                        <div class="nextBtn" @click="lastBtn" v-show="lastBtnShow == true">
                            <i class="el-icon-caret-left"></i>
                        </div>
                        <div class="build-outBox">
                            <div
                                class="build-box"
                                style="left: 0px;"
                                :style="{width:Math.ceil(villageHousesList.length/10)*356+'px'}"
                            >
                                <div
                                    class="ridgepole-list"
                                    v-for="index of Math.ceil(villageHousesList.length/10)"
                                    :key="index"
                                >
                                    <div
                                        v-for="(item, index) in villageHousesList.slice((index-1)*10,index*10)"
                                        :key="index"
                                        @click="buildingClick(item)"
                                        :class="{on: ridgepoleNum.name == item.name}"
                                    >{{item.name}}</div>
                            <div class="build-box" style="left: 0px;"
                                :style="{ width: Math.ceil(villageHousesList.length / 10) * 356 + 'px' }">
                                <div class="ridgepole-list" v-for="index of Math.ceil(villageHousesList.length / 10)"
                                    :key="index">
                                    <div v-for="(item, index) in villageHousesList.slice((index - 1) * 10, index * 10)"
                                        :key="index" @click="buildingClick(item)"
                                        :class="{ on: ridgepoleNum.name == item.name }">{{ item.name }}</div>
                                </div>
                            </div>
                        </div>
@@ -190,18 +163,9 @@
                        <div class="condo">
                            <div class="type">选择单元</div>
                            <div class="type-select">
                                <el-select
                                    size="small"
                                    v-model="apartmentValue"
                                    placeholder="请选择"
                                    @change="chooseUnit"
                                >
                                    <el-option
                                        v-for="item in ridgepoleNum1.unit"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    ></el-option>
                                <el-select size="small" v-model="apartmentValue" placeholder="请选择" @change="chooseUnit">
                                    <el-option v-for="item in ridgepoleNum1.unit" :key="item.value" :label="item.label"
                                        :value="item.value"></el-option>
                                </el-select>
                            </div>
                        </div>
@@ -210,18 +174,18 @@
                            <div class="type-val">
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"
                                    ></span> 流动人口
                                        style="width: 10px; height: 10px; background: #0E88FF; border-radius: 50%;"></span>
                                    流动人口
                                </div>
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"
                                    ></span> 重点人员
                                        style="width: 10px; height: 10px; background: #FF796C; border-radius: 50%;"></span>
                                    重点人员
                                </div>
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
                                    ></span> 境外人口
                                        style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"></span>
                                    境外人口
                                </div>
                            </div>
                        </div>
@@ -229,24 +193,16 @@
                            <div class="type">房屋图例</div>
                            <div class="type-val">
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"
                                    ></span> 出租
                                    <span style="width: 14px; height: 8px; border: 1px solid #3A8B3A;"></span> 出租
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #2C77BB;"
                                    ></span> 自住
                                    <span style="width: 14px; height: 8px; border: 1px solid #2C77BB;"></span> 自住
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #5C6169;"
                                    ></span> 空置
                                    <span style="width: 14px; height: 8px; border: 1px solid #5C6169;"></span> 空置
                                </div>
                                <div>
                                    <span
                                        style="width: 14px; height: 8px; border: 1px solid #CC9456;"
                                    ></span> 商业
                                    <span style="width: 14px; height: 8px; border: 1px solid #CC9456;"></span> 商业
                                </div>
                            </div>
                        </div>
@@ -256,61 +212,31 @@
                            </div>
                            <div class="floor-box">
                                <div class="floor-num" style="left: 0">
                                    <div :class="{on:floorsType == 1}" @click="floorsType = 1">1~5层</div>
                                    <div :class="{on:floorsType == 2}" @click="floorsType = 2">6~10层</div>
                                    <div
                                        :class="{on:floorsType == 3}"
                                        @click="floorsType = 3"
                                    >11~15层</div>
                                    <div
                                        :class="{on:floorsType == 4}"
                                        @click="floorsType = 4"
                                    >16~20层</div>
                                    <div
                                        :class="{on:floorsType == 5}"
                                        @click="floorsType = 5"
                                    >21~25层</div>
                                    <div
                                        :class="{on:floorsType == 6}"
                                        @click="floorsType = 6"
                                    >26~30层</div>
                                    <div :class="{ on: floorsType == 1 }" @click="floorsType = 1">1~5层</div>
                                    <div :class="{ on: floorsType == 2 }" @click="floorsType = 2">6~10层</div>
                                    <div :class="{ on: floorsType == 3 }" @click="floorsType = 3">11~15层</div>
                                    <div :class="{ on: floorsType == 4 }" @click="floorsType = 4">16~20层</div>
                                    <div :class="{ on: floorsType == 5 }" @click="floorsType = 5">21~25层</div>
                                    <div :class="{ on: floorsType == 6 }" @click="floorsType = 6">26~30层</div>
                                </div>
                            </div>
                            <div
                                @click="nextFloorBtn"
                                class="floorBtn rightFloorBtn"
                                v-show="nextFloorShow"
                            >
                            <div @click="nextFloorBtn" class="floorBtn rightFloorBtn" v-show="nextFloorShow">
                                <i class="el-icon-caret-right"></i>
                            </div>
                        </div>

                        <div class="floor-detail">
                            <div
                                v-for="(item,index) in levelList.slice((floorsType-1)*5,floorsType*5)"
                                :key="index"
                            >
                                <div class="title">{{index+1+(floorsType-1)*5}}层：</div>
                            <div v-for="(item, index) in levelList.slice((floorsType - 1) * 5, floorsType * 5)"
                                :key="index">
                                <div class="title">{{ index + 1 + (floorsType - 1) * 5 }}层：</div>
                                <div class="detail">
                                    <div
                                        v-for="(value,index) in item"
                                        :key="index"
                                    <div v-for="(value, index) in item" :key="index"
                                        @click="residentDetailsClick(value)"
                                        :class="[{'chuzu':value.houseType == '出租'},{'zizhu':value.houseType == '自住'},{'kongzhi':value.houseType == '空置'},{'shangye':value.houseType == '商业'}]"
                                    >
                                        {{value.Doorplate}}
                                        <div
                                            class="flow"
                                            v-show="isHaveLiudong(value.householdsDate)"
                                        ></div>
                                        <div
                                            class="focus"
                                            v-show="isHaveZhongdian(value.householdsDate)"
                                        ></div>
                                        <div
                                            class="warning"
                                            v-show="isHaveJingwai(value.householdsDate)"
                                        ></div>
                                        :class="[{ 'chuzu': value.houseType == '出租' }, { 'zizhu': value.houseType == '自住' }, { 'kongzhi': value.houseType == '空置' }, { 'shangye': value.houseType == '商业' }]">
                                        {{ value.Doorplate }}
                                        <div class="flow" v-show="isHaveLiudong(value.householdsDate)"></div>
                                        <div class="focus" v-show="isHaveZhongdian(value.householdsDate)"></div>
                                        <div class="warning" v-show="isHaveJingwai(value.householdsDate)"></div>
                                    </div>
                                </div>
                            </div>
@@ -318,39 +244,30 @@
                    </div>
                </div>
                <div class="come-out-content" v-show="subNavType == 2">
                    <el-table
                        :data="comeoutArr"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                        :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                        :row-class-name="tableRowClassName"
                    >
                    <el-table :data="comeoutArr" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="position" label="位置" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
                    </el-table>
                </div>
                <div class="park-content" v-show="subNavType == 3">
                    <el-table
                        :data="parkArr"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                        :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                        :row-class-name="tableRowClassName"
                    >
                    <el-table :data="parkArr" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="position" label="位置" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
                    </el-table>
                </div>
                <div class="business-content" v-show="subNavType == 4">
                    <el-table
                        :data="businessArr"
                        style="width: 100%"
                        :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                        :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                        :row-class-name="tableRowClassName"
                    >
                    <el-table :data="businessArr" style="width: 100%"
                        :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                        :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                        :row-class-name="tableRowClassName">
                        <el-table-column prop="name" label="名称" width="130"></el-table-column>
                        <el-table-column prop="position" label="位置" width="150"></el-table-column>
                        <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -359,14 +276,10 @@
            </div>

            <div class="police-info" v-show="navType == 1">
                <el-table
                    :data="arr"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                    :row-class-name="tableRowClassName"
                    @row-click="clickData"
                >
                <el-table :data="arr" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName" @row-click="clickData">
                    <el-table-column prop="name" label="名称" width="130"></el-table-column>
                    <el-table-column prop="time" label="时间" width="150"></el-table-column>
                    <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -374,14 +287,10 @@
            </div>

            <div class="warning-info" v-show="navType == 2">
                <el-table
                    :data="warningArray"
                    style="width: 100%"
                    :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                    :cell-style="{'text-align':'center','borderColor':'#324e75'}"
                    :row-class-name="tableRowClassName"
                    @row-click="clickData"
                >
                <el-table :data="warningArray" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName" @row-click="clickData">
                    <el-table-column prop="name" label="名称" width="130"></el-table-column>
                    <el-table-column prop="time" label="时间" width="150"></el-table-column>
                    <el-table-column prop="type" label="类别" width="120"></el-table-column>
@@ -389,83 +298,51 @@
            </div>
        </div>

        <el-dialog
            title="信息详情"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="true"
            class="police-affairs-details-box"
        >
        <el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose"
            :close-on-click-modal="true" class="police-affairs-details-box">
            <div
                style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%;"
            >
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                style="display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%; height: 100%;">
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>名称：</div>
                    <div>{{JWdetails.name}}</div>
                    <div>{{ JWdetails.name }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>时间：</div>
                    <div>{{JWdetails.time}}</div>
                    <div>{{ JWdetails.time }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>类型：</div>
                    <div>{{JWdetails.type}}</div>
                    <div>{{ JWdetails.type }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>责任警员：</div>
                    <div>{{JWdetails.person}}</div>
                    <div>{{ JWdetails.person }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>涉案金额：</div>
                    <div>{{JWdetails.money}}</div>
                    <div>{{ JWdetails.money }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>所属辖区：</div>
                    <div>{{JWdetails.turnoutArea}}</div>
                    <div>{{ JWdetails.turnoutArea }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>处理时长：</div>
                    <div>{{JWdetails.handlingTime}}</div>
                    <div>{{ JWdetails.handlingTime }}</div>
                </div>
                <div
                    style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;"
                >
                <div style="width: 100%; flex: 1; display: flex; align-items: center; justify-content: space-between;">
                    <div>案件级别：</div>
                    <div>{{JWdetails.rank}}</div>
                    <div>{{ JWdetails.rank }}</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog
            :title="residentDetailsTitle"
            :modal="true"
            :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose"
            :close-on-click-modal="true"
            class="resident-details-box"
            width="30%"
        >
        <el-dialog :title="residentDetailsTitle" :modal="true" :visible.sync="residentDetailsShow"
            :before-close="residentDetailsClose" :close-on-click-modal="true" class="resident-details-box" width="30%">
            <h3 style="text-align:left;margin:10px 0 10px 0">户主信息</h3>
            <el-table
                :data="houseDate.householdsDate"
                :header-cell-style="{'text-align':'center','background-color':'#203c60','borderColor':'#324e75'}"
                :cell-style="{'text-align':'center','borderColor':'#324e75'}"
            >
            <el-table :data="houseDate.householdsDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }">
                <el-table-column prop="name" label="姓名"></el-table-column>
                <el-table-column prop="peopleType" label="重点人员"></el-table-column>
                <el-table-column prop="nation" label="民族"></el-table-column>
@@ -815,12 +692,15 @@
            border: 1px solid rgb(0, 92, 169);
            border-radius: 20px 0 0 20px;
        }

        input:focus {
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: rgba(238, 238, 238, 0.7);
        }

        button {
            font-size: 24px;
            font-weight: 700;
@@ -832,6 +712,7 @@
            cursor: pointer;
            border-radius: 0 20px 20px 0;
        }

        button:active {
            background-color: rgb(0, 92, 169);
            border: 1px solid rgb(0, 92, 169);
@@ -853,7 +734,7 @@
        border-radius: 10px;
        overflow: hidden;

        & > div {
        &>div {
            height: 100%;
            overflow-y: auto;

@@ -888,11 +769,9 @@
                    left: 10px;
                    right: 10px;
                    bottom: 4px;
                    background: linear-gradient(
                        135deg,
                        rgb(33 150 243 / 74%),
                        rgb(254 254 254 / 0%)
                    );
                    background: linear-gradient(135deg,
                            rgb(33 150 243 / 74%),
                            rgb(254 254 254 / 0%));
                    z-index: -1;
                }
            }
@@ -903,7 +782,7 @@
            }

            .housing-introduce {
                & > div {
                &>div {
                    padding: 0 10px;
                    display: flex;

@@ -935,6 +814,7 @@
                border-bottom: 1px solid #33566c;
                cursor: pointer;
            }

            .choosed {
                background-color: rgba(0, 92, 169, 1);
            }
@@ -947,7 +827,7 @@
                justify-content: space-around;

                .sub-nav {
                    padding: 0 15px;
                    width: 76px;
                    height: 26px;
                    line-height: 26px;
                    border-radius: 13px;
@@ -955,16 +835,15 @@
                    cursor: pointer;
                    color: rgb(223, 219, 219);
                }

                .on {
                    box-sizing: border-box;
                    border: 1px solid #fff;
                    background-color: #0158a2;
                    text-decoration: underline;
                    color: #fff;
                }
            }

            & > .floor-content {
            &>.floor-content {
                .build-info {
                    display: flex;
                    position: relative;
@@ -977,28 +856,34 @@
                        width: 20px;
                        height: 60px;
                        padding-top: 12px;

                        i {
                            font-size: 30px;
                            margin-left: -5px;
                        }
                    }

                    .rightBtn {
                        left: 369px;
                    }

                    .nextBtn :hover {
                        color: #0158a2;
                    }

                    .build-outBox {
                        position: absolute;
                        left: 18px;
                        width: 356px;
                        height: 100px;
                        overflow: hidden;

                        .build-box {
                            display: flex;
                            position: absolute;
                            left: 0;
                            transition: all 1s;

                            .ridgepole-list {
                                display: flex;
                                flex-wrap: wrap;
@@ -1007,7 +892,7 @@
                                flex-wrap: wrap;
                                width: 356px;

                                & > div {
                                &>div {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
@@ -1031,7 +916,7 @@
                    .content {
                        display: flex;

                        & > div {
                        &>div {
                            height: 26px;
                            line-height: 26px;
                            flex: 1;
@@ -1039,7 +924,7 @@
                            justify-content: center;
                            border-right: 1px solid #50555f;

                            & > div:last-child {
                            &>div:last-child {
                                margin-left: 14px;
                                font-size: 18px;
                                font-weight: bold;
@@ -1047,11 +932,11 @@
                            }
                        }

                        & > div:first-child {
                        &>div:first-child {
                            width: 30%;
                        }

                        & > div:last-child {
                        &>div:last-child {
                            border: none;
                        }
                    }
@@ -1068,10 +953,10 @@
                            display: flex;
                            justify-content: space-around;

                            & > div {
                            &>div {
                                flex: 1;

                                & > div:first-child {
                                &>div:first-child {
                                    height: 30px;
                                    line-height: 30px;
                                    font-size: 18px;
@@ -1079,7 +964,7 @@
                                    color: #499d99;
                                }

                                & > div:last-child {
                                &>div:last-child {
                                    height: 26px;
                                    line-height: 26px;
                                }
@@ -1093,8 +978,8 @@
                        display: flex;
                        justify-content: space-around;

                        & > div {
                            & > div:first-child {
                        &>div {
                            &>div:first-child {
                                height: 30px;
                                line-height: 30px;
                                font-size: 18px;
@@ -1122,6 +1007,7 @@
                }

                .house-element-info {

                    .condo,
                    .legend {
                        display: flex;
@@ -1131,8 +1017,10 @@
                        .type {
                            width: 80px;
                        }

                        .type-select {
                            margin-left: 20px;

                            :deep(.el-input--suffix .el-input__inner) {
                                padding-right: 54px;
                            }
@@ -1142,45 +1030,52 @@
                            display: flex;
                            flex: 1;

                            & > div {
                            &>div {
                                flex: 1;
                                display: flex;
                                align-items: center;

                                & > span {
                                &>span {
                                    margin: 0 10px;
                                }
                            }
                        }
                    }

                    .floor-outBox {
                        display: flex;
                        position: relative;
                        height: 26px;
                        margin-top: 9px;

                        .floorBtn {
                            position: absolute;
                            left: 30px;
                            top: -2px;
                            width: 20px;
                            height: 26px;

                            i {
                                font-size: 30px;
                                margin-left: -5px;
                            }
                        }

                        .floorBtn :hover {
                            color: #0158a2;
                        }

                        .rightFloorBtn {
                            left: 350px;
                        }

                        .floor-box {
                            width: 252px;
                            height: 26px;
                            position: absolute;
                            overflow: hidden;
                            left: 67px;

                            .floor-num {
                                display: flex;
                                align-items: center;
@@ -1189,7 +1084,7 @@
                                left: 0;
                                transition: all 1s;

                                & > div {
                                &>div {
                                    margin: 0 4px;
                                    display: flex;
                                    justify-content: center;
@@ -1200,7 +1095,8 @@
                                    background: #202434;
                                    cursor: default;
                                }
                                & > .on {

                                &>.on {
                                    border: 1px solid orange;
                                    color: orange;
                                }
@@ -1211,7 +1107,7 @@
                    .floor-detail {
                        margin-top: 14px;

                        & > div {
                        &>div {
                            margin: 8px;
                            height: 36px;
                            line-height: 36px;
@@ -1225,7 +1121,7 @@
                                flex: 1;
                                display: flex;

                                & > div {
                                &>div {
                                    margin: 0 4px;
                                    position: relative;
                                    width: 68px;
@@ -1258,16 +1154,20 @@
                                        background: rgb(254, 172, 4);
                                    }
                                }
                                & > .chuzu {

                                &>.chuzu {
                                    border: 1px solid #3a8b3a;
                                }
                                & > .zizhu {

                                &>.zizhu {
                                    border: 1px solid #2c77bb;
                                }
                                & > .kongzhi {

                                &>.kongzhi {
                                    border: 1px solid #5c6169;
                                }
                                & > .shangye {

                                &>.shangye {
                                    border: 1px solid #cc9456;
                                }
                            }
@@ -1276,6 +1176,7 @@
                }
            }
        }

        .police-info {
            .tableClass {
                margin: 0 auto;
@@ -1283,6 +1184,7 @@
                height: 400px;
                border-collapse: collapse;
            }

            .tableClass th,
            .tableClass td {
                width: 200px;
@@ -1308,11 +1210,9 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(
        135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
    background: linear-gradient(135deg,
            rgba(252, 252, 252, 0.108),
            rgb(254, 254, 254));
    animation: prog 3s ease infinite;
}