样式调整

shuishen

2022-11-09 0febdd8777e7a724b1d5f2c258e45560765d2d46

样式调整

 src/components/shrink/index.vue

New file
@@ -0,0 +1,70 @@
<!--
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-11-09 13:51:23
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-09 16:31:43
 * @FilePath: \srs-police-affairs\src\components\shrink\index.vue
 * @Description: 
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
-->
<template>
    <div class="shrink-box" @click="shrinkClick">
        {{ str }}
    </div>
</template>

<script>
export default {
    name: 'shrink',
    data () {
        return {
            str: '<<',
        }
    },
    methods: {
        shrinkClick () {
            this.$parent.contentShow = !this.$parent.contentShow
            if (this.$parent.contentShow == true) {
                this.str = '<<'
                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')

            } else {
                this.str = '>>'
                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
            }
        }
    },

    beforeDestroy () {
        document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
        document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
    }
}
</script>

<style lang="scss" scoped>
.shrink-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    z-index: 99;

    width: 36px;
    height: 88px;
    line-height: 88px;
    text-align: center;

    background: $bg-color;
    color: #fff;

    border-radius: 0 10px 10px 0;

    cursor: pointer;
}
</style>

 src/styles/base/index.scss

@@ -110,6 +110,7 @@
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -179,6 +180,7 @@
            flex-wrap:wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction:row;
@@ -187,6 +189,7 @@
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -237,6 +240,7 @@
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -336,6 +340,7 @@
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -397,6 +402,7 @@
            flex-wrap:wrap;
            justify-self: flex-start;
            align-content: flex-start;

            .item {
                display: flex;
                flex-direction:row;
@@ -405,6 +411,7 @@
                line-height: 36px;
                margin: 0 10px;
                text-align: left;

                &>div:first-child {
                    width: 100px;
                    text-align: justify;
@@ -420,3 +427,17 @@
        }
    }
}

.special-animal-enter-active {
    transition: all .2s ease;
}

.special-animal-leave-active {
    transition: all .2s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.special-animal-enter,
.special-animal-leave-to {
    transform: translateX(-100%);
    opacity: 0;
}

 src/styles/dc/index.scss

@@ -28,6 +28,8 @@
    z-index: 101 !important;
    background-color: $bg-color !important;

    transition: all .3s;

    &>div {
        display: flex;
        align-items: center;
@@ -68,6 +70,7 @@
    z-index: 99;
    background-color: $bg-color !important;

    transition: all .3s;

    // &.hover-effect {
    //     cursor: pointer;
@@ -82,3 +85,11 @@
.screen-full-btn.homebottom {
    bottom: 310px;
}

.dc-zoom-controller.shrink-btn {
    left: 20px !important;
}

.screen-full-btn.shrink-btn {
    left: 20px !important;
}

 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-11-07 15:16:54
 * @LastEditTime: 2022-11-09 16:28:42
 * @FilePath: \srs-police-affairs\src\views\house\index.vue
 * @Description: 小区-栋-层-房屋
 * 
@@ -11,22 +11,25 @@

<template>
    <div class="container">
        <div class="search-box">
        <div :style="{
            width: `${contentShow ? '400px' : '0'}`
        }" class="container-content">

            <div v-show="contentShow" class="search-box">
            <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
            <button @click="searchClick" class="el-icon-search"></button>
        </div>

        <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 v-show="contentShow" class="result-content">
            <div class="housing-estate-info">
                <div class="housing-title">
                    {{ housingData.name }}
@@ -56,39 +59,19 @@
            </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 == 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>

@@ -98,22 +81,13 @@
                            <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>
@@ -198,18 +172,10 @@
                        <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>
@@ -218,20 +184,17 @@
                            <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>
@@ -240,24 +203,20 @@
                            <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>
@@ -267,67 +226,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 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 == '商业' }]"
                                    >
                                            :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 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>
@@ -335,39 +258,30 @@
                    </div>
                </div>
                <div class="come-out-content" v-show="subNavType == 2">
                    <el-table
                        :data="comeoutArr"
                        style="width: 100%"
                        <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"
                    >
                            :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%"
                        <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"
                    >
                            :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%"
                        <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"
                    >
                            :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>
@@ -376,14 +290,10 @@
            </div>

            <div class="police-info" v-show="navType == 1">
                <el-table
                    :data="arr"
                    style="width: 100%"
                    <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"
                >
                        :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>
@@ -391,14 +301,10 @@
            </div>

            <div class="warning-info" v-show="navType == 2">
                <el-table
                    :data="warningArray"
                    style="width: 100%"
                    <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"
                >
                        :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>
@@ -406,14 +312,17 @@
            </div>
        </div>

        <el-dialog
            title="信息详情"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
            :close-on-click-modal="true"
            class="police-affairs-details-box"
        >
        </div>
        <!-- 
        <transition name="special-animal">

        </transition> -->
        <div class="container-btn">
            <shrink></shrink>
        </div>

        <el-dialog title="信息详情" :modal="true" :visible.sync="dialogVisible" :before-close="handleClose"
            :close-on-click-modal="true" class="police-affairs-details-box">
            <div class="item">
                <div>名称：</div>
                <div>{{ JWdetails.name }}</div>
@@ -448,21 +357,12 @@
            </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"
            <el-table :data="houseDate.householdsDate"
                :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                :cell-style="{ 'text-align': 'center', '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>
@@ -495,9 +395,9 @@
import housingData from '@/assets/data/housingData.js'

export default {

    data () {
        return {
            contentShow: true,
            ridgepoleNum: {},
            ridgepoleNum1: {},
            searchHouse: '',
@@ -780,11 +680,16 @@

<style scoped lang="scss">
.container {
    display: flex;
    position: relative;
    width: 400px;
    height: 100%;
    background: transparent;

    &-content {
    height: 100%;
    color: #fff;
    background: $bg-color;
        transition: all .3s;

    li {
        list-style: none;
@@ -882,11 +787,9 @@
                    left: 10px;
                    right: 10px;
                    bottom: 4px;
                    background: linear-gradient(
                        135deg,
                        background: linear-gradient(135deg,
                        rgb(33 150 243 / 74%),
                        rgb(254 254 254 / 0%)
                    );
                                rgb(254 254 254 / 0%));
                    z-index: -1;
                }
            }
@@ -1122,6 +1025,7 @@
                }

                .house-element-info {

                    .condo,
                    .legend {
                        display: flex;
@@ -1307,6 +1211,14 @@
    }
}

    &-btn {
        position: relative;
        width: 36px;
        height: 100%;
    }

}

.progress {
    position: absolute;
    bottom: 0;
@@ -1324,11 +1236,9 @@
    height: 100%;
    overflow: hidden;
    border-radius: 2px;
    background: linear-gradient(
        135deg,
    background: linear-gradient(135deg,
        rgba(252, 252, 252, 0.108),
        rgb(254, 254, 254)
    );
            rgb(254, 254, 254));
    animation: prog 3s ease infinite;
}