Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

shuishen

2022-09-30 8e063dca297d2eeb307e33721f8e71b80e416c50

Merge branch 'master' of http://192.168.0.105:10010/r/srs-police-affairs

 package-lock.json

Diff too large

 src/assets/data/villageHouse.js

New file
@@ -0,0 +1,398 @@
export default [
    {
        name: '1栋',
        lng: 116.020894,
        lat: 28.687406,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 288,
        realityPerson: 160,
        emphasisPerson: 16,
        kosekiPerson: 98,
        flowPerson: 20,
        outsidePerson: 16,
        houseAll: 288,
        rent: 120,
        occupation: 160,
        vacancy: 8
    },
    {
        name: '2栋',
        lng: 116.020919,
        lat: 28.686838,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '3栋',
        lng: 116.020980,
        lat: 28.686286,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 288,
        realityPerson: 160,
        emphasisPerson: 16,
        kosekiPerson: 98,
        flowPerson: 20,
        outsidePerson: 16,
        houseAll: 288,
        rent: 120,
        occupation: 160,
        vacancy: 8
    },
    {
        name: '4栋',
        lng: 116.021010,
        lat: 28.685721,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '5栋',
        lng: 116.021033,
        lat: 28.685127,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 288,
        realityPerson: 160,
        emphasisPerson: 16,
        kosekiPerson: 98,
        flowPerson: 20,
        outsidePerson: 16,
        houseAll: 288,
        rent: 120,
        occupation: 160,
        vacancy: 8
    },
    {
        name: '6栋',
        lng: 116.024115,
        lat: 28.685852,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '7栋',
        lng: 116.024124,
        lat: 28.685838,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 288,
        realityPerson: 160,
        emphasisPerson: 16,
        kosekiPerson: 98,
        flowPerson: 20,
        outsidePerson: 16,
        houseAll: 288,
        rent: 120,
        occupation: 160,
        vacancy: 8
    },
    {
        name: '8栋',
        lng: 116.028297,
        lat: 28.686011,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '9栋',
        lng: 116.028294,
        lat: 28.686452,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 288,
        realityPerson: 160,
        emphasisPerson: 16,
        kosekiPerson: 98,
        flowPerson: 20,
        outsidePerson: 16,
        houseAll: 288,
        rent: 120,
        occupation: 160,
        vacancy: 8
    },
    {
        name: '10栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '11栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '12栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '13栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '14栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '15栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '16栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '17栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '18栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '19栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '20栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '21栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    },
    {
        name: '22栋',
        lng: 116.027542,
        lat: 28.686920,
        alt: 360,
        elevator: true,
        floorAll: 48,
        familyRoom: 260,
        realityPerson: 156,
        emphasisPerson: 11,
        kosekiPerson: 126,
        flowPerson: 26,
        outsidePerson: 16,
        houseAll: 260,
        rent: 80,
        occupation: 148,
        vacancy: 32
    }
]

 src/views/house/index.vue

@@ -66,21 +66,42 @@

            <div class="base-info" v-show="navType == 0">
                <div class="sub-nav-list">
                    <div class="sub-nav">楼栋</div>
                    <div class="sub-nav">出入口</div>
                    <div class="sub-nav">停车场</div>
                    <div class="sub-nav">商业</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">
                    <div class="ridgepole-list">
                        <div
                            v-for="(item, index) in villageHousesList"
                            :key="index"
                            @click="buildingClick(item)"
                            :class="{on: ridgepoleNum.name == item.name}"
                        >{{item.name}}</div>
                    <div class="build-info">
                        <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>
                            </div>
                        </div>
                        <div class="nextBtn rightBtn" @click="nextBtn">
                            <i v-show="nextBtnShow" class="el-icon-caret-right"></i>
                        </div>
                    </div>

                    <div class="ridgepole-info">
                        <div class="title">楼栋信息</div>

@@ -109,7 +130,7 @@
                                    <div>实有人口</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.emphasisPerson }}</div>
                                    <div style="color:#FF796C">{{ ridgepoleNum.emphasisPerson }}</div>
                                    <div>重点人口</div>
                                </div>
                            </div>
@@ -120,11 +141,11 @@
                                    <div>户籍人口</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.flowPerson }}</div>
                                    <div style="color:#0E88FF">{{ ridgepoleNum.flowPerson }}</div>
                                    <div>流动人口</div>
                                </div>
                                <div>
                                    <div>{{ ridgepoleNum.outsidePerson }}</div>
                                    <div style="color:#FEAC04">{{ ridgepoleNum.outsidePerson }}</div>
                                    <div>境外人口</div>
                                </div>
                            </div>
@@ -156,8 +177,8 @@
                        <!-- 选择单元 -->
                        <div class="condo">
                            <div class="type">选择单元</div>
                            <div class="type-val">
                                <el-select size="mini" v-model="apartmentValue" placeholder="请选择">
                            <div class="type-select">
                                <el-select size="small" v-model="apartmentValue" placeholder="请选择">
                                    <el-option
                                        v-for="item in apartmentOptions"
                                        :key="item.value"
@@ -183,7 +204,7 @@
                                <div>
                                    <span
                                        style="width: 10px; height: 10px; background: #FEAC04; border-radius: 50%;"
                                    ></span> 禁毒
                                    ></span> 境外人口
                                </div>
                            </div>
                        </div>
@@ -212,12 +233,39 @@
                                </div>
                            </div>
                        </div>

                        <div class="floor-num">
                            <div>1~5层</div>
                            <div>6~10层</div>
                            <div>11~15层</div>
                            <div>16~20层</div>
                        <div class="floor-outBox">
                            <div @click="lastFloorBtn" class="floorBtn" v-show="lastFloorShow">
                                <i class="el-icon-caret-left"></i>
                            </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>
                            </div>
                            <div
                                @click="nextFloorBtn"
                                class="floorBtn rightFloorBtn"
                                v-show="nextFloorShow"
                            >
                                <i class="el-icon-caret-right"></i>
                            </div>
                        </div>

                        <div class="floor-detail">
@@ -230,6 +278,66 @@
                                        @click="residentDetailsClick(item)"
                                    >
                                        10{{item}}
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="title">2层：</div>
                                <div class="detail">
                                    <div
                                        v-for="item,i in 4"
                                        :key="i"
                                        @click="residentDetailsClick(item)"
                                    >
                                        20{{item}}
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="title">3层：</div>
                                <div class="detail">
                                    <div
                                        v-for="item,i in 4"
                                        :key="i"
                                        @click="residentDetailsClick(item)"
                                    >
                                        30{{item}}
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="title">4层：</div>
                                <div class="detail">
                                    <div
                                        v-for="item,i in 4"
                                        :key="i"
                                        @click="residentDetailsClick(item)"
                                    >
                                        40{{item}}
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
                                    </div>
                                </div>
                            </div>
                            <div>
                                <div class="title">5层：</div>
                                <div class="detail">
                                    <div
                                        v-for="item,i in 4"
                                        :key="i"
                                        @click="residentDetailsClick(item)"
                                    >
                                        50{{item}}
                                        <div class="flow"></div>
                                        <div class="focus"></div>
                                        <div class="warning"></div>
@@ -378,8 +486,10 @@
</template>

<script>
import villageHousesList from '@/assets/data/villageHouse.js'

export default {

    data () {
        return {
            ridgepoleNum: {
@@ -468,188 +578,7 @@
            ],
            arrTitle: [{ title: '警务名称' }, { title: '警务时间' }, { title: '警务类型' }, { title: '责任警员' }, { title: '涉案金额' }, { title: '所属辖区' }, { title: '处理时长' }, { title: '案件级别' }],
            dialogVisible: false,
            villageHousesList: [
                {
                    name: '1栋',
                    lng: 116.020894,
                    lat: 28.687406,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 288,
                    realityPerson: 160,
                    emphasisPerson: 16,
                    kosekiPerson: 98,
                    flowPerson: 20,
                    outsidePerson: 16,
                    houseAll: 288,
                    rent: 120,
                    occupation: 160,
                    vacancy: 8
                },
                {
                    name: '2栋',
                    lng: 116.020919,
                    lat: 28.686838,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 260,
                    realityPerson: 156,
                    emphasisPerson: 11,
                    kosekiPerson: 126,
                    flowPerson: 26,
                    outsidePerson: 16,
                    houseAll: 260,
                    rent: 80,
                    occupation: 148,
                    vacancy: 32
                },
                {
                    name: '3栋',
                    lng: 116.020980,
                    lat: 28.686286,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 288,
                    realityPerson: 160,
                    emphasisPerson: 16,
                    kosekiPerson: 98,
                    flowPerson: 20,
                    outsidePerson: 16,
                    houseAll: 288,
                    rent: 120,
                    occupation: 160,
                    vacancy: 8
                },
                {
                    name: '4栋',
                    lng: 116.021010,
                    lat: 28.685721,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 260,
                    realityPerson: 156,
                    emphasisPerson: 11,
                    kosekiPerson: 126,
                    flowPerson: 26,
                    outsidePerson: 16,
                    houseAll: 260,
                    rent: 80,
                    occupation: 148,
                    vacancy: 32
                },
                {
                    name: '5栋',
                    lng: 116.021033,
                    lat: 28.685127,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 288,
                    realityPerson: 160,
                    emphasisPerson: 16,
                    kosekiPerson: 98,
                    flowPerson: 20,
                    outsidePerson: 16,
                    houseAll: 288,
                    rent: 120,
                    occupation: 160,
                    vacancy: 8
                },
                {
                    name: '6栋',
                    lng: 116.024115,
                    lat: 28.685852,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 260,
                    realityPerson: 156,
                    emphasisPerson: 11,
                    kosekiPerson: 126,
                    flowPerson: 26,
                    outsidePerson: 16,
                    houseAll: 260,
                    rent: 80,
                    occupation: 148,
                    vacancy: 32
                },
                {
                    name: '7栋',
                    lng: 116.024124,
                    lat: 28.685838,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 288,
                    realityPerson: 160,
                    emphasisPerson: 16,
                    kosekiPerson: 98,
                    flowPerson: 20,
                    outsidePerson: 16,
                    houseAll: 288,
                    rent: 120,
                    occupation: 160,
                    vacancy: 8
                },
                {
                    name: '8栋',
                    lng: 116.028297,
                    lat: 28.686011,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 260,
                    realityPerson: 156,
                    emphasisPerson: 11,
                    kosekiPerson: 126,
                    flowPerson: 26,
                    outsidePerson: 16,
                    houseAll: 260,
                    rent: 80,
                    occupation: 148,
                    vacancy: 32
                },
                {
                    name: '9栋',
                    lng: 116.028294,
                    lat: 28.686452,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 288,
                    realityPerson: 160,
                    emphasisPerson: 16,
                    kosekiPerson: 98,
                    flowPerson: 20,
                    outsidePerson: 16,
                    houseAll: 288,
                    rent: 120,
                    occupation: 160,
                    vacancy: 8
                },
                {
                    name: '10栋',
                    lng: 116.027542,
                    lat: 28.686920,
                    alt: 360,
                    elevator: true,
                    floorAll: 48,
                    familyRoom: 260,
                    realityPerson: 156,
                    emphasisPerson: 11,
                    kosekiPerson: 126,
                    flowPerson: 26,
                    outsidePerson: 16,
                    houseAll: 260,
                    rent: 80,
                    occupation: 148,
                    vacancy: 32
                }
            ],
            villageHousesList: [],
            JWdetails: {},
            apartmentOptions: [{
                value: '1',
@@ -669,10 +598,20 @@
            }],
            apartmentValue: '1',
            residentDetailsTitle: '',
            residentDetailsShow: false
            residentDetailsShow: false,
            lastBtnShow: false,
            nextBtnShow: true,
            floorsType: 1,
            subNavType: 1,
            lastFloorShow: false,
            nextFloorShow: true,


        }
    },
    created () {
        this.villageHousesList = villageHousesList

    },
    mounted () {
        this.$nextTick(() => {
@@ -735,7 +674,42 @@
            this.ridgepoleNum.siteGd = item.alt

            this.$EventBus.$emit('toPosition', this.ridgepoleNum)
        }
        },
        nextBtn () {
            if (parseInt(document.querySelector(".build-box").offsetWidth) > Math.abs(parseInt(document.querySelector(".build-box").style.left)) + 356) {
                document.querySelector(".build-box").style.left = parseInt(document.querySelector(".build-box").style.left) - 356 + 'px'
                this.lastBtnShow = true
                if (parseInt(document.querySelector(".build-box").offsetWidth) == Math.abs(parseInt(document.querySelector(".build-box").style.left)) + 356) {
                    this.nextBtnShow = false
                }
            }
        },
        lastBtn () {
            document.querySelector(".build-box").style.left = parseInt(document.querySelector(".build-box").style.left) + 356 + 'px'
            this.nextBtnShow = true
            if (Math.abs(parseInt(document.querySelector(".build-box").style.left)) == 0) {
                this.lastBtnShow = false
            }
        },
        lastFloorBtn () {
            console.log(111)
            document.querySelector(".floor-num").style.left = parseInt(document.querySelector(".floor-num").style.left) + 84 + 'px'
            this.nextFloorShow = true
            if (Math.abs(parseInt(document.querySelector(".floor-num").style.left)) == 0) {
                this.lastFloorShow = false
            }
            console.log('111', Math.abs(parseInt(document.querySelector(".floor-num").style.left)))
        },
        nextFloorBtn () {
            console.log('点击了有按钮')
            if (parseInt(document.querySelector(".floor-num").offsetWidth) > Math.abs(parseInt(document.querySelector(".floor-num").style.left)) + 84) {
                document.querySelector(".floor-num").style.left = parseInt(document.querySelector(".floor-num").style.left) - 84 + 'px'
                this.lastFloorShow = true
                if (parseInt(document.querySelector(".floor-num").offsetWidth) == Math.abs(parseInt(document.querySelector(".floor-num").style.left)) + 252) {
                    this.nextFloorShow = false
                }
            }
        },
    },

    destroyed () {
@@ -757,7 +731,6 @@
    li {
        list-style: none;
    }

    .search-box {
        padding: 5px;
        height: 48px;
@@ -856,28 +829,76 @@
                    border-radius: 13px;
                    background: #0158a2;
                    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 {
                .ridgepole-list {
                .build-info {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    position: relative;
                    align-items: center;
                    height: 100px;

                    & > div {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        margin: 6px 8px;
                        width: 54px;
                        height: 36px;
                        border: 1px solid #ccc;
                        cursor: pointer;
                    .nextBtn {
                        position: absolute;
                        left: 1px;
                        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;
                                justify-content: center;
                                display: flex;
                                flex-wrap: wrap;
                                width: 356px;

                        &.on {
                            color: orange;
                            border-color: orange;
                                & > div {
                                    display: flex;
                                    align-items: center;
                                    justify-content: center;
                                    margin: 6px 8px;
                                    width: 54px;
                                    height: 36px;
                                    border: 1px solid #ccc;
                                    cursor: pointer;

                                    &.on {
                                        color: orange;
                                        border-color: orange;
                                    }
                                }
                            }
                        }
                    }
                }
@@ -986,6 +1007,12 @@
                        .type {
                            width: 80px;
                        }
                        .type-select {
                            margin-left: 20px;
                            :deep(.el-input--suffix .el-input__inner) {
                                padding-right: 54px;
                            }
                        }

                        .type-val {
                            display: flex;
@@ -1002,20 +1029,58 @@
                            }
                        }
                    }

                    .floor-num {
                    .floor-outBox {
                        display: flex;
                        align-items: center;

                        & > div {
                            margin: 0 4px;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            width: 84px;
                        position: relative;
                        height: 26px;
                        margin-top: 9px;
                        .floorBtn {
                            position: absolute;
                            left: 30px;
                            top: -2px;
                            width: 20px;
                            height: 26px;
                            border-radius: 13px;
                            background: #202434;
                            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;
                                position: absolute;
                                width: 504px;
                                left: 0;
                                transition: all 1s;

                                & > div {
                                    margin: 0 4px;
                                    display: flex;
                                    justify-content: center;
                                    align-items: center;
                                    width: 84px;
                                    height: 26px;
                                    border-radius: 13px;
                                    background: #202434;
                                    cursor: default;
                                }
                                & > .on {
                                    border: 1px solid orange;
                                    color: orange;
                                }
                            }
                        }
                    }