~admin/srs-police-affairs.git

parent: 18beb739 | patch | commit | ignore whitespace

shuishen

2023-01-05 8f5efe744e24eb586ff07932108c7ed7f39bf039

样式修改

3 files modified

	src/components/map/components/mapPopup.vue	487 ●●●●● patch \| view \| raw \| blame \| history
	src/styles/media/index.scss	185 ●●●●● patch \| view \| raw \| blame \| history
	src/views/home/components/bottomContainer.vue	58 ●●●●● patch \| view \| raw \| blame \| history

 src/components/map/components/mapPopup.vue

@@ -1,71 +1,69 @@
<template>
    <div>
        <div v-if="detailsPopup" id="divFormsDomBox" class="container">
            <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
                <div class="box">
                    <div class="divForms divForms-theme">
                        <div class="divForms-wrap">
                            <div class="area">
                                <div class="arrow-lt"></div>
                                <div class="b-t"></div>
                                <div class="b-r"></div>
                                <div class="b-b"></div>
                                <div class="b-l"></div>
                                <div class="arrow-rb"></div>
                                <div class="label-wrap">
                                    <div class="title">
                                        详细信息
                                        <div class="close" @click="closePopup" title="关闭"></div>
        <div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
            <div style="width: 100%; height: 100%; transform: translate(0, 50%);">
                <div class="divForms divForms-theme">
                    <div class="divForms-wrap">
                        <div class="area">
                            <div class="arrow-lt"></div>
                            <div class="b-t"></div>
                            <div class="b-r"></div>
                            <div class="b-b"></div>
                            <div class="b-l"></div>
                            <div class="arrow-rb"></div>
                            <div class="label-wrap">
                                <div class="title">
                                    详细信息
                                    <div class="close" @click="closePopup" title="关闭"></div>
                                </div>
                                <div class="label-content">
                                    <div class="item">
                                        <div>警情类别:</div>
                                        <div>{{ dataPopup.type }}</div>
                                    </div>
                                    <div class="label-content">
                                        <div class="item">
                                            <div>警情类别:</div>
                                            <div>{{dataPopup.type}}</div>
                                        </div>
                                        <div class="item">
                                            <div>接警时间:</div>
                                            <div>{{dataPopup.dealTime}}</div>
                                        </div>
                                        <div class="item">
                                            <div>警情状态:</div>
                                            <div>{{dataPopup.state}}</div>
                                        </div>
                                        <div class="item">
                                            <div>经办民警:</div>
                                            <div>{{dataPopup.dealPolice}}</div>
                                        </div>
                                        <div class="item">
                                            <div>报警人:</div>
                                            <div>{{dataPopup.callPeople}}</div>
                                        </div>
                                        <div class="item">
                                            <div>报警电话:</div>
                                            <div>{{dataPopup.comingPhone}}</div>
                                        </div>
                                        <div class="item">
                                            <div>报警人联系人:</div>
                                            <div>{{dataPopup.callPhone}}</div>
                                        </div>
                                        <div class="item">
                                            <div>所属派出所:</div>
                                            <div>{{dataPopup.policeName}}</div>
                                        </div>
                                        <div class="item">
                                            <div>经度:</div>
                                            <div>{{ dataPopup.position[0] }}</div>
                                        </div>
                                        <div class="item">
                                            <div>纬度:</div>
                                            <div>{{ dataPopup.position[1] }}</div>
                                        </div>
                                    <div class="item">
                                        <div>接警时间:</div>
                                        <div>{{ dataPopup.dealTime }}</div>
                                    </div>
                                    <div class="item">
                                        <div>警情状态:</div>
                                        <div>{{ dataPopup.state }}</div>
                                    </div>
                                    <div class="item">
                                        <div>经办民警:</div>
                                        <div>{{ dataPopup.dealPolice }}</div>
                                    </div>
                                    <div class="item">
                                        <div>报警人:</div>
                                        <div>{{ dataPopup.callPeople }}</div>
                                    </div>
                                    <div class="item">
                                        <div>报警电话:</div>
                                        <div>{{ dataPopup.comingPhone }}</div>
                                    </div>
                                    <div class="item">
                                        <div>报警人联系人:</div>
                                        <div>{{ dataPopup.callPhone }}</div>
                                    </div>
                                    <div class="item">
                                        <div>所属派出所:</div>
                                        <div>{{ dataPopup.policeName }}</div>
                                    </div>
                                    <div class="item">
                                        <div>经度:</div>
                                        <div>{{ dataPopup.position[0] }}</div>
                                    </div>
                                    <div class="item">
                                        <div>纬度:</div>
                                        <div>{{ dataPopup.position[1] }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="b-t-l"></div>
                            <div class="b-b-r"></div>
                        </div>
                        <div class="arrow"></div>
                        <div class="b-t-l"></div>
                        <div class="b-b-r"></div>
                    </div>
                    <div class="arrow"></div>
                </div>
            </div>
        </div>
@@ -91,222 +89,189 @@
</script>

<style lang="scss" scoped>
.container {
// .item {
//     display: flex;
//     flex-direction: row;
//     width: calc(100% - 20px);
//     height: 30px;
//     line-height: 30px;
//     margin: 0 10px;
//     text-align: left;

//     &>div:first-child {
//         width: 100px;
//         text-align: justify;
//         display: inline-block;
//         text-align-last: justify;
//         margin-right: 20px;
//     }

//     &>div:nth-of-type(2) {
//         width: calc(100% - 120px);
//     }
// }

.divForms-dom {
    position: fixed;
    left: 0;
    z-index: 1 !important;
    width: 280px;
    height: 360px;
    // background: $bg-color;
}

.divForms .arrow {
    position: absolute;
    bottom: 50%;
    left: -8px;
    width: 45px;
    height: 2px;
    transform: rotate(-45deg);
    background-color: #28bbf0;
}

.divForms-theme .area {
    background-image: linear-gradient(135deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50%,
            transparent 50%),
        linear-gradient(-45deg,
            transparent 30px,
            #1831a79a 30px,
            #3f487ba6 50.1%,
            transparent 50%);
}

.divForms .area {
    position: relative;
    min-width: 420px;
}

.divForms-wrap {
    position: relative;
    overflow: hidden;
    padding: 30px;
}

.divForms-theme .b-b,
.divForms-theme .b-b-r,
.divForms-theme .b-l,
.divForms-theme .b-r,
.divForms-theme .b-t,
.divForms-theme .b-t-l {
    background-color: #1831a7;
    box-shadow: 0 0 10px 2px #1831a7;
}

.divForms .b-t {
    position: absolute;
    top: 0;
    left: 44px;
    right: 0;
    height: 1px;
    z-index: 10;
}

.divForms .b-r {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 44px;
    width: 1px;
    z-index: 10;
}

.divForms .b-l {
    position: absolute;
    top: 44px;
    left: 0;
    bottom: 0;
    width: 1px;
    z-index: 10;
}

.divForms .b-b {
    position: absolute;
    left: 0;
    right: 44px;
    bottom: 0;
    height: 1px;
    z-index: 10;
}

.divForms .b-b-r {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(-52px, 22px);
    z-index: 10;
}

.divForms .b-t-l {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 62px;
    transform: rotate(45deg) translate(52px, -22px);
    z-index: 10;
}

.divForms .label-wrap {
    padding: 0 12px;
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-self: flex-start;
    align-content: flex-start;
    .title {
        height: 40px;
        line-height: 42px;
        width: 100%;
        position: relative;
        background-image: linear-gradient(
            135deg,
            transparent 25px,
            #29baf1 25px
        );
        .close {
            position: absolute;
            right: 5px;
            top: -2px;
        }
        .close::before {
            font-family: element-icons;
            content: '\e6db';
            cursor: pointer;
            font-size: 16px;
        }
        .close:hover::before {
            color: #3d95f3;
        }
    }
    .item {
        display: flex;
        flex-direction: row;
        width: calc(100% - 20px);
        height: 30px;
        line-height: 30px;
        margin: 0 10px;
        text-align: left;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
}

        & > div:first-child {
            width: 100px;
            text-align: justify;
            display: inline-block;
            text-align-last: justify;
            margin-right: 20px;
        }
.divForms .title {
    position: relative;
    margin-top: 20px;
    padding: 0 12px 0 30px;
    height: 36px;
    line-height: 36px;

        & > div:nth-of-type(2) {
            width: calc(100% - 120px);
        }
    }

    .divForms-dom {
        position: fixed;
        left: 0;
        z-index: 1 !important;
    }
    .box {
        width: 100%;
        height: 100%;
        transform: translate(0, 25%);
    }

    .divForms .arrow {
    .close {
        position: absolute;
        bottom: 40%;
        left: 0;
        width: 45px;
        height: 2px;
        transform: rotate(-45deg) translate(5px, -15px);
        background-color: #28bbf0;
        right: 5px;
        top: -2px;
    }

    .divForms-theme .area {
        background-image: linear-gradient(
                135deg,
                transparent 30px,
                #1831a79a 30px,
                #3f487ba6 50%,
                transparent 50%
            ),
            linear-gradient(
                -45deg,
                transparent 30px,
                #1831a79a 30px,
                #3f487ba6 50.1%,
                transparent 50%
            );
    }

    .divForms .area {
        position: relative;
        min-width: 320px;
    }

    .divForms-wrap {
        position: relative;
        overflow: hidden;
        padding: 30px;
    }

    .divForms-theme .b-b,
    .divForms-theme .b-b-r,
    .divForms-theme .b-l,
    .divForms-theme .b-r,
    .divForms-theme .b-t,
    .divForms-theme .b-t-l {
        background-color: #1831a7;
        box-shadow: 0 0 10px 2px #1831a7;
    }

    .divForms .b-t {
        position: absolute;
        top: 0;
        left: 44px;
        right: 0;
        height: 1px;
        z-index: 10;
    }

    .divForms .b-r {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 44px;
        width: 1px;
        z-index: 10;
    }

    .divForms .b-l {
        position: absolute;
        top: 44px;
        left: 0;
        bottom: 0;
        width: 1px;
        z-index: 10;
    }

    .divForms .b-b {
        position: absolute;
        left: 0;
        right: 44px;
        bottom: 0;
        height: 1px;
        z-index: 10;
    }

    .divForms .b-b-r {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 1px;
        height: 62px;
        transform: rotate(45deg) translate(-52px, 22px);
        z-index: 10;
    }

    .divForms .b-t-l {
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 62px;
        transform: rotate(45deg) translate(52px, -22px);
        z-index: 10;
    }

    .divForms .label-wrap {
        padding: 0 12px;
        color: #fff;
    .close::before {
        font-family: element-icons;
        content: '\e6db';
        cursor: pointer;
        font-size: 16px;
        white-space: nowrap;
        overflow: hidden;
    }

    .divForms-theme .title {
        background-image: linear-gradient(
            135deg,
    .close:hover::before {
        color: #3d95f3;
    }
}

.divForms-theme .title {
    background-image: linear-gradient(135deg,
            transparent 25px,
            #1c309e9a 25px
        );
    }
            #1c309e9a 25px);
}

    .divForms .title {
        margin-top: 20px;
        padding: 0 12px 0 30px;
        height: 36px;
        line-height: 36px;
        position: relative;
    }
.divForms .label-content {
    padding: 4px 0;
}

    .divForms .label-content {
        padding: 4px 0;
    }
.divForms-theme .arrow,
.divForms-theme .title::before {
    background-color: #1c309e;
}

    .divForms-theme .arrow,
    .divForms-theme .title::before {
        background-color: #1c309e;
    }

    .divForms .title::before {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        z-index: 10;
        height: 2px;
    }
.divForms .title::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    z-index: 10;
    height: 2px;
}
</style>

 src/styles/media/index.scss

@@ -2161,137 +2161,98 @@
            }

            #divFormsDomBox {
                width: countSizeVw(280, 1920);
                height: countSizeVh(360);

                .title {
                    height: countSizeVh(40);
                    line-height: countSizeVh(42);
                    background-image: linear-gradient(135deg,
                            transparent countSizeVh(25),
                            #29baf1 countSizeVh(25));

                    .close {
                        right: countSizeVh(5);
                        top: countSizeVh(-2);
                .divForms {
                    .arrow {
                        left: countSizeVw(-8, 1920);
                        width: countSizeVw(45, 1920);
                        height: countSizeVh(2);
                        transform: rotate(-45deg);
                    }

                    .close::before {
                    .area {
                        min-width: countSizeVw(420, 1920);
                    }

                    .b-t {
                        left: countSizeVh(44);
                        height: countSizeVh(1);
                    }

                    .b-r {
                        bottom: countSizeVh(44);
                        width: countSizeVh(1);
                    }

                    .b-l {
                        top: countSizeVh(44);
                        width: countSizeVh(1);
                    }

                    .b-b {
                        right: countSizeVh(44);
                        height: countSizeVh(1);
                    }

                    .b-b-r {
                        width: countSizeVh(1);
                        height: countSizeVh(62);
                        transform: rotate(45deg) translate(countSizeVw(-52, 1920), countSizeVh(22));
                    }

                    .b-t-l {
                        width: countSizeVh(1);
                        height: countSizeVh(62);
                        transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVh(-22));
                    }

                    .label-content {
                        padding: countSizeVh(4) 0;
                    }


                    .label-wrap {
                        padding: 0 countSizeVw(12, 1920);
                        font-size: countSizeVh(16);
                    }
                }

                .item {
                    width: calc(100% - 20px);
                    height: countSizeVh(30);
                    line-height: countSizeVh(30);
                    margin: 0 countSizeVw(10, 1920);
                        .title {
                            margin-top: countSizeVh(20);
                            padding: 0 countSizeVw(12, 1920) 0 countSizeVw(30, 1920);
                            height: countSizeVh(36);
                            line-height: countSizeVh(36);

                    &>div:first-child {
                        width: countSizeVw(100, 1920);
                        margin-right: countSizeVw(20, 1920);
                            &::before {
                                bottom: countSizeVh(-4);
                                height: countSizeVh(2);
                            }

                            .close {
                                right: countSizeVw(5, 1920);
                                top: countSizeVh(-2);
                            }

                            .close::before {
                                font-size: countSizeVh(16);
                            }
                        }
                    }

                    &>div:nth-of-type(2) {
                        width: calc(100% - countSizeVw(120, 1920));
                    }
                }

                .divForms .arrow {
                    width: countSizeVw(24, 1920);
                    height: countSizeVh(2);
                    transform: rotate(-45deg) translate(countSizeVh(5), countSizeVh(-15));
                }

                .divForms-theme .area {
                    background-image: linear-gradient(135deg,
                            transparent countSizeVw(30, 1920),
                            #1831a79a countSizeVw(30, 1920),
                            transparent countSizeVh(30),
                            #1831a79a countSizeVh(30),
                            #3f487ba6 50%,
                            transparent 50%),
                        linear-gradient(-45deg,
                            transparent countSizeVw(30, 1920),
                            #1831a79a countSizeVw(30, 1920),
                            transparent countSizeVh(30),
                            #1831a79a countSizeVh(30),
                            #3f487ba6 50.1%,
                            transparent 50%);
                }

                .divForms .area {
                    // min-width: countSizeVw(320,1920);
                    min-width: countSizeVw(260, 1920);
                }

                .divForms-wrap {
                    padding: countSizeVh(30);
                }


                .divForms-theme .b-b,
                .divForms-theme .b-b-r,
                .divForms-theme .b-l,
                .divForms-theme .b-r,
                .divForms-theme .b-t,
                .divForms-theme .b-t-l {
                    box-shadow: 0 0 countSizeVh(10) countSizeVh(2) #1831a7;
                }

                .divForms .b-t {
                    left: countSizeVh(84);
                    height: countSizeVh(1);
                }

                .divForms .b-r {
                    bottom: countSizeVh(84);
                    width: countSizeVh(1);
                }

                .divForms .b-l {
                    top: countSizeVh(84);
                    width: countSizeVh(1);
                }

                .divForms .b-b {
                    right: countSizeVh(84);
                    height: countSizeVh(1);
                }

                .divForms .b-b-r {
                    width: countSizeVw(1, 1920);
                    height: countSizeVh(150);
                    transform: rotate(45deg) translate(-52px, 22px);
                }

                .divForms .b-t-l {
                    width: countSizeVw(1, 1920);
                    height: countSizeVh(62);
                    transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVw(-22, 1920));
                }

                .divForms .label-wrap {
                    padding: 0 countSizeVw(12, 1920);
                    font-size: countSizeVh(16);
                }

                .divForms-theme .title {
                    background-image: linear-gradient(135deg,
                            transparent countSizeVw(25, 1920),
                            #1c309e9a countSizeVw(25, 1920));
                }

                .divForms .title {
                    margin-top: countSizeVh(20);
                    padding: 0 countSizeVh(12) 0 countSizeVw(30, 1920);
                    height: countSizeVh(36);
                    line-height: countSizeVh(36);
                }

                .divForms .label-content {
                    padding: countSizeVh(4) 0;
                }

                .divForms .title::before {
                    bottom: countSizeVh(-4);
                    height: countSizeVh(2);
                    padding: countSizeVh(30) countSizeVw(30, 1920);
                }
            }
        }

 src/views/home/components/bottomContainer.vue

@@ -25,14 +25,14 @@
                <ul class="title-header">
                    <li>
                        <span class="num">序号</span>
                        <span class="type">警情类别</span>
                        <span class="dealTime">接警时间</span>
                        <span class="state">警情状态</span>
                        <span class="dealPolice">经办民警</span>
                        <span class="callPeople">报警人</span>
                        <span class="comingPhone">报警电话</span>
                        <span class="callPhone">报警人联系人</span>
                        <span class="callContent">报警内容</span>
                        <span class="type">报警类别</span>
                        <span class="out-people">出动人员</span>
                        <span class="out-car">出动车辆</span>
                        <span class="receiving-alarm-time">接警时间</span>
                        <span class="arrive-time">到达现场时间</span>
                        <span class="dispose-time">处理完毕时间</span>
                        <span class="police-unit">处警单位</span>
                        <span class="out-police-bz">备注</span>
                    </li>
                </ul>
                <vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
@@ -43,13 +43,13 @@
                            <!-- <span class="num" v-text="item.num"></span> -->
                            <span class="num" v-text="index + 1"></span>
                            <span class="type" v-text="item.type"></span>
                            <span class="dealTime" v-text="item.dealTime"></span>
                            <span class="state" v-text="item.state"></span>
                            <span class="dealPolice" v-text="item.dealPolice"></span>
                            <span class="callPeople" v-text="item.callPeople"></span>
                            <span class="comingPhone" v-text="item.comingPhone"></span>
                            <span class="callPhone" v-text="item.callPhone"></span>
                            <span class="callContent" v-text="item.callContent"></span>
                            <span class="out-people" v-text="item.dealTime"></span>
                            <span class="out-car" v-text="item.state"></span>
                            <span class="receiving-alarm-time" v-text="item.dealPolice"></span>
                            <span class="arrive-time" v-text="item.callPeople"></span>
                            <span class="dispose-time" v-text="item.comingPhone"></span>
                            <span class="police-unit" v-text="item.callPhone"></span>
                            <span class="out-police-bz" v-text="item.callContent"></span>
                        </li>
                    </ul>
                </vue-seamless-scroll>
@@ -407,38 +407,38 @@
                cursor: pointer;

                .num {
                    width: 8%;
                    width: 6%;
                }

                .type {
                    width: 10%;
                }

                .state {
                    width: 8%;
                .out-people {
                    width: 10%;
                }

                .comingPhone {
                    width: 14%;
                .out-car {
                    width: 10%;
                }

                .dealTime {
                    width: 14%;
                .receiving-alarm-time {
                    width: 12%;
                }

                .dealPolice {
                    width: 8%;
                .arrive-time {
                    width: 12%;
                }

                .callPeople {
                    width: 8%;
                .dispose-time {
                    width: 12%;
                }

                .callPhone {
                    width: 14%;
                .police-unit {
                    width: 12%;
                }

                .callContent {
                .out-police-bz {
                    flex: 1;
                }
            }

			@@ -1,71 +1,69 @@
			<template>
			<div>
			<div v-if="detailsPopup" id="divFormsDomBox" class="container">
			<div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
			<div class="box">
			<div class="divForms divForms-theme">
			<div class="divForms-wrap">
			<div class="area">
			<div class="arrow-lt"></div>
			<div class="b-t"></div>
			<div class="b-r"></div>
			<div class="b-b"></div>
			<div class="b-l"></div>
			<div class="arrow-rb"></div>
			<div class="label-wrap">
			<div class="title">
			详细信息
			<div class="close" @click="closePopup" title="关闭"></div>
			<div v-if="detailsPopup" class="divForms-dom" id="divFormsDomBox">
			<div style="width: 100%; height: 100%; transform: translate(0, 50%);">
			<div class="divForms divForms-theme">
			<div class="divForms-wrap">
			<div class="area">
			<div class="arrow-lt"></div>
			<div class="b-t"></div>
			<div class="b-r"></div>
			<div class="b-b"></div>
			<div class="b-l"></div>
			<div class="arrow-rb"></div>
			<div class="label-wrap">
			<div class="title">
			详细信息
			<div class="close" @click="closePopup" title="关闭"></div>
			</div>
			<div class="label-content">
			<div class="item">
			<div>警情类别:</div>
			<div>{{ dataPopup.type }}</div>
			</div>
			<div class="label-content">
			<div class="item">
			<div>警情类别:</div>
			<div>{{dataPopup.type}}</div>
			</div>
			<div class="item">
			<div>接警时间:</div>
			<div>{{dataPopup.dealTime}}</div>
			</div>
			<div class="item">
			<div>警情状态:</div>
			<div>{{dataPopup.state}}</div>
			</div>
			<div class="item">
			<div>经办民警:</div>
			<div>{{dataPopup.dealPolice}}</div>
			</div>
			<div class="item">
			<div>报警人:</div>
			<div>{{dataPopup.callPeople}}</div>
			</div>
			<div class="item">
			<div>报警电话:</div>
			<div>{{dataPopup.comingPhone}}</div>
			</div>
			<div class="item">
			<div>报警人联系人:</div>
			<div>{{dataPopup.callPhone}}</div>
			</div>
			<div class="item">
			<div>所属派出所:</div>
			<div>{{dataPopup.policeName}}</div>
			</div>
			<div class="item">
			<div>经度:</div>
			<div>{{ dataPopup.position[0] }}</div>
			</div>
			<div class="item">
			<div>纬度:</div>
			<div>{{ dataPopup.position[1] }}</div>
			</div>
			<div class="item">
			<div>接警时间:</div>
			<div>{{ dataPopup.dealTime }}</div>
			</div>
			<div class="item">
			<div>警情状态:</div>
			<div>{{ dataPopup.state }}</div>
			</div>
			<div class="item">
			<div>经办民警:</div>
			<div>{{ dataPopup.dealPolice }}</div>
			</div>
			<div class="item">
			<div>报警人:</div>
			<div>{{ dataPopup.callPeople }}</div>
			</div>
			<div class="item">
			<div>报警电话:</div>
			<div>{{ dataPopup.comingPhone }}</div>
			</div>
			<div class="item">
			<div>报警人联系人:</div>
			<div>{{ dataPopup.callPhone }}</div>
			</div>
			<div class="item">
			<div>所属派出所:</div>
			<div>{{ dataPopup.policeName }}</div>
			</div>
			<div class="item">
			<div>经度:</div>
			<div>{{ dataPopup.position[0] }}</div>
			</div>
			<div class="item">
			<div>纬度:</div>
			<div>{{ dataPopup.position[1] }}</div>
			</div>
			</div>
			</div>
			<div class="b-t-l"></div>
			<div class="b-b-r"></div>
			</div>
			<div class="arrow"></div>
			<div class="b-t-l"></div>
			<div class="b-b-r"></div>
			</div>
			<div class="arrow"></div>
			</div>
			</div>
			</div>
			@@ -91,222 +89,189 @@
			</script>

			<style lang="scss" scoped>
			.container {
			// .item {
			// display: flex;
			// flex-direction: row;
			// width: calc(100% - 20px);
			// height: 30px;
			// line-height: 30px;
			// margin: 0 10px;
			// text-align: left;

			// &>div:first-child {
			// width: 100px;
			// text-align: justify;
			// display: inline-block;
			// text-align-last: justify;
			// margin-right: 20px;
			// }

			// &>div:nth-of-type(2) {
			// width: calc(100% - 120px);
			// }
			// }

			.divForms-dom {
			position: fixed;
			left: 0;
			z-index: 1 !important;
			width: 280px;
			height: 360px;
			// background: $bg-color;
			}

			.divForms .arrow {
			position: absolute;
			bottom: 50%;
			left: -8px;
			width: 45px;
			height: 2px;
			transform: rotate(-45deg);
			background-color: #28bbf0;
			}

			.divForms-theme .area {
			background-image: linear-gradient(135deg,
			transparent 30px,
			#1831a79a 30px,
			#3f487ba6 50%,
			transparent 50%),
			linear-gradient(-45deg,
			transparent 30px,
			#1831a79a 30px,
			#3f487ba6 50.1%,
			transparent 50%);
			}

			.divForms .area {
			position: relative;
			min-width: 420px;
			}

			.divForms-wrap {
			position: relative;
			overflow: hidden;
			padding: 30px;
			}

			.divForms-theme .b-b,
			.divForms-theme .b-b-r,
			.divForms-theme .b-l,
			.divForms-theme .b-r,
			.divForms-theme .b-t,
			.divForms-theme .b-t-l {
			background-color: #1831a7;
			box-shadow: 0 0 10px 2px #1831a7;
			}

			.divForms .b-t {
			position: absolute;
			top: 0;
			left: 44px;
			right: 0;
			height: 1px;
			z-index: 10;
			}

			.divForms .b-r {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 44px;
			width: 1px;
			z-index: 10;
			}

			.divForms .b-l {
			position: absolute;
			top: 44px;
			left: 0;
			bottom: 0;
			width: 1px;
			z-index: 10;
			}

			.divForms .b-b {
			position: absolute;
			left: 0;
			right: 44px;
			bottom: 0;
			height: 1px;
			z-index: 10;
			}

			.divForms .b-b-r {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 1px;
			height: 62px;
			transform: rotate(45deg) translate(-52px, 22px);
			z-index: 10;
			}

			.divForms .b-t-l {
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			height: 62px;
			transform: rotate(45deg) translate(52px, -22px);
			z-index: 10;
			}

			.divForms .label-wrap {
			padding: 0 12px;
			color: #fff;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-self: flex-start;
			align-content: flex-start;
			.title {
			height: 40px;
			line-height: 42px;
			width: 100%;
			position: relative;
			background-image: linear-gradient(
			135deg,
			transparent 25px,
			#29baf1 25px
			);
			.close {
			position: absolute;
			right: 5px;
			top: -2px;
			}
			.close::before {
			font-family: element-icons;
			content: '\e6db';
			cursor: pointer;
			font-size: 16px;
			}
			.close:hover::before {
			color: #3d95f3;
			}
			}
			.item {
			display: flex;
			flex-direction: row;
			width: calc(100% - 20px);
			height: 30px;
			line-height: 30px;
			margin: 0 10px;
			text-align: left;
			font-size: 16px;
			white-space: nowrap;
			overflow: hidden;
			}

			& > div:first-child {
			width: 100px;
			text-align: justify;
			display: inline-block;
			text-align-last: justify;
			margin-right: 20px;
			}
			.divForms .title {
			position: relative;
			margin-top: 20px;
			padding: 0 12px 0 30px;
			height: 36px;
			line-height: 36px;

			& > div:nth-of-type(2) {
			width: calc(100% - 120px);
			}
			}

			.divForms-dom {
			position: fixed;
			left: 0;
			z-index: 1 !important;
			}
			.box {
			width: 100%;
			height: 100%;
			transform: translate(0, 25%);
			}

			.divForms .arrow {
			.close {
			position: absolute;
			bottom: 40%;
			left: 0;
			width: 45px;
			height: 2px;
			transform: rotate(-45deg) translate(5px, -15px);
			background-color: #28bbf0;
			right: 5px;
			top: -2px;
			}

			.divForms-theme .area {
			background-image: linear-gradient(
			135deg,
			transparent 30px,
			#1831a79a 30px,
			#3f487ba6 50%,
			transparent 50%
			),
			linear-gradient(
			-45deg,
			transparent 30px,
			#1831a79a 30px,
			#3f487ba6 50.1%,
			transparent 50%
			);
			}

			.divForms .area {
			position: relative;
			min-width: 320px;
			}

			.divForms-wrap {
			position: relative;
			overflow: hidden;
			padding: 30px;
			}

			.divForms-theme .b-b,
			.divForms-theme .b-b-r,
			.divForms-theme .b-l,
			.divForms-theme .b-r,
			.divForms-theme .b-t,
			.divForms-theme .b-t-l {
			background-color: #1831a7;
			box-shadow: 0 0 10px 2px #1831a7;
			}

			.divForms .b-t {
			position: absolute;
			top: 0;
			left: 44px;
			right: 0;
			height: 1px;
			z-index: 10;
			}

			.divForms .b-r {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 44px;
			width: 1px;
			z-index: 10;
			}

			.divForms .b-l {
			position: absolute;
			top: 44px;
			left: 0;
			bottom: 0;
			width: 1px;
			z-index: 10;
			}

			.divForms .b-b {
			position: absolute;
			left: 0;
			right: 44px;
			bottom: 0;
			height: 1px;
			z-index: 10;
			}

			.divForms .b-b-r {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 1px;
			height: 62px;
			transform: rotate(45deg) translate(-52px, 22px);
			z-index: 10;
			}

			.divForms .b-t-l {
			position: absolute;
			top: 0;
			left: 0;
			width: 1px;
			height: 62px;
			transform: rotate(45deg) translate(52px, -22px);
			z-index: 10;
			}

			.divForms .label-wrap {
			padding: 0 12px;
			color: #fff;
			.close::before {
			font-family: element-icons;
			content: '\e6db';
			cursor: pointer;
			font-size: 16px;
			white-space: nowrap;
			overflow: hidden;
			}

			.divForms-theme .title {
			background-image: linear-gradient(
			135deg,
			.close:hover::before {
			color: #3d95f3;
			}
			}

			.divForms-theme .title {
			background-image: linear-gradient(135deg,
			transparent 25px,
			#1c309e9a 25px
			);
			}
			#1c309e9a 25px);
			}

			.divForms .title {
			margin-top: 20px;
			padding: 0 12px 0 30px;
			height: 36px;
			line-height: 36px;
			position: relative;
			}
			.divForms .label-content {
			padding: 4px 0;
			}

			.divForms .label-content {
			padding: 4px 0;
			}
			.divForms-theme .arrow,
			.divForms-theme .title::before {
			background-color: #1c309e;
			}

			.divForms-theme .arrow,
			.divForms-theme .title::before {
			background-color: #1c309e;
			}

			.divForms .title::before {
			content: '';
			position: absolute;
			bottom: -4px;
			left: 0;
			right: 0;
			z-index: 10;
			height: 2px;
			}
			.divForms .title::before {
			content: '';
			position: absolute;
			bottom: -4px;
			left: 0;
			right: 0;
			z-index: 10;
			height: 2px;
			}
			</style>

			@@ -2161,137 +2161,98 @@
			}

			#divFormsDomBox {
			width: countSizeVw(280, 1920);
			height: countSizeVh(360);

			.title {
			height: countSizeVh(40);
			line-height: countSizeVh(42);
			background-image: linear-gradient(135deg,
			transparent countSizeVh(25),
			#29baf1 countSizeVh(25));

			.close {
			right: countSizeVh(5);
			top: countSizeVh(-2);
			.divForms {
			.arrow {
			left: countSizeVw(-8, 1920);
			width: countSizeVw(45, 1920);
			height: countSizeVh(2);
			transform: rotate(-45deg);
			}

			.close::before {
			.area {
			min-width: countSizeVw(420, 1920);
			}

			.b-t {
			left: countSizeVh(44);
			height: countSizeVh(1);
			}

			.b-r {
			bottom: countSizeVh(44);
			width: countSizeVh(1);
			}

			.b-l {
			top: countSizeVh(44);
			width: countSizeVh(1);
			}

			.b-b {
			right: countSizeVh(44);
			height: countSizeVh(1);
			}

			.b-b-r {
			width: countSizeVh(1);
			height: countSizeVh(62);
			transform: rotate(45deg) translate(countSizeVw(-52, 1920), countSizeVh(22));
			}

			.b-t-l {
			width: countSizeVh(1);
			height: countSizeVh(62);
			transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVh(-22));
			}

			.label-content {
			padding: countSizeVh(4) 0;
			}


			.label-wrap {
			padding: 0 countSizeVw(12, 1920);
			font-size: countSizeVh(16);
			}
			}

			.item {
			width: calc(100% - 20px);
			height: countSizeVh(30);
			line-height: countSizeVh(30);
			margin: 0 countSizeVw(10, 1920);
			.title {
			margin-top: countSizeVh(20);
			padding: 0 countSizeVw(12, 1920) 0 countSizeVw(30, 1920);
			height: countSizeVh(36);
			line-height: countSizeVh(36);

			&>div:first-child {
			width: countSizeVw(100, 1920);
			margin-right: countSizeVw(20, 1920);
			&::before {
			bottom: countSizeVh(-4);
			height: countSizeVh(2);
			}

			.close {
			right: countSizeVw(5, 1920);
			top: countSizeVh(-2);
			}

			.close::before {
			font-size: countSizeVh(16);
			}
			}
			}

			&>div:nth-of-type(2) {
			width: calc(100% - countSizeVw(120, 1920));
			}
			}

			.divForms .arrow {
			width: countSizeVw(24, 1920);
			height: countSizeVh(2);
			transform: rotate(-45deg) translate(countSizeVh(5), countSizeVh(-15));
			}

			.divForms-theme .area {
			background-image: linear-gradient(135deg,
			transparent countSizeVw(30, 1920),
			#1831a79a countSizeVw(30, 1920),
			transparent countSizeVh(30),
			#1831a79a countSizeVh(30),
			#3f487ba6 50%,
			transparent 50%),
			linear-gradient(-45deg,
			transparent countSizeVw(30, 1920),
			#1831a79a countSizeVw(30, 1920),
			transparent countSizeVh(30),
			#1831a79a countSizeVh(30),
			#3f487ba6 50.1%,
			transparent 50%);
			}

			.divForms .area {
			// min-width: countSizeVw(320,1920);
			min-width: countSizeVw(260, 1920);
			}

			.divForms-wrap {
			padding: countSizeVh(30);
			}


			.divForms-theme .b-b,
			.divForms-theme .b-b-r,
			.divForms-theme .b-l,
			.divForms-theme .b-r,
			.divForms-theme .b-t,
			.divForms-theme .b-t-l {
			box-shadow: 0 0 countSizeVh(10) countSizeVh(2) #1831a7;
			}

			.divForms .b-t {
			left: countSizeVh(84);
			height: countSizeVh(1);
			}

			.divForms .b-r {
			bottom: countSizeVh(84);
			width: countSizeVh(1);
			}

			.divForms .b-l {
			top: countSizeVh(84);
			width: countSizeVh(1);
			}

			.divForms .b-b {
			right: countSizeVh(84);
			height: countSizeVh(1);
			}

			.divForms .b-b-r {
			width: countSizeVw(1, 1920);
			height: countSizeVh(150);
			transform: rotate(45deg) translate(-52px, 22px);
			}

			.divForms .b-t-l {
			width: countSizeVw(1, 1920);
			height: countSizeVh(62);
			transform: rotate(45deg) translate(countSizeVw(52, 1920), countSizeVw(-22, 1920));
			}

			.divForms .label-wrap {
			padding: 0 countSizeVw(12, 1920);
			font-size: countSizeVh(16);
			}

			.divForms-theme .title {
			background-image: linear-gradient(135deg,
			transparent countSizeVw(25, 1920),
			#1c309e9a countSizeVw(25, 1920));
			}

			.divForms .title {
			margin-top: countSizeVh(20);
			padding: 0 countSizeVh(12) 0 countSizeVw(30, 1920);
			height: countSizeVh(36);
			line-height: countSizeVh(36);
			}

			.divForms .label-content {
			padding: countSizeVh(4) 0;
			}

			.divForms .title::before {
			bottom: countSizeVh(-4);
			height: countSizeVh(2);
			padding: countSizeVh(30) countSizeVw(30, 1920);
			}
			}
			}

			@@ -25,14 +25,14 @@
			<ul class="title-header">
			<li>
			<span class="num">序号</span>
			<span class="type">警情类别</span>
			<span class="dealTime">接警时间</span>
			<span class="state">警情状态</span>
			<span class="dealPolice">经办民警</span>
			<span class="callPeople">报警人</span>
			<span class="comingPhone">报警电话</span>
			<span class="callPhone">报警人联系人</span>
			<span class="callContent">报警内容</span>
			<span class="type">报警类别</span>
			<span class="out-people">出动人员</span>
			<span class="out-car">出动车辆</span>
			<span class="receiving-alarm-time">接警时间</span>
			<span class="arrive-time">到达现场时间</span>
			<span class="dispose-time">处理完毕时间</span>
			<span class="police-unit">处警单位</span>
			<span class="out-police-bz">备注</span>
			</li>
			</ul>
			<vue-seamless-scroll :data="historytype == 0 ? policeSituationRealtimeArr : policeSituationHistoryArr"
			@@ -43,13 +43,13 @@
			<!-- <span class="num" v-text="item.num"></span> -->
			<span class="num" v-text="index + 1"></span>
			<span class="type" v-text="item.type"></span>
			<span class="dealTime" v-text="item.dealTime"></span>
			<span class="state" v-text="item.state"></span>
			<span class="dealPolice" v-text="item.dealPolice"></span>
			<span class="callPeople" v-text="item.callPeople"></span>
			<span class="comingPhone" v-text="item.comingPhone"></span>
			<span class="callPhone" v-text="item.callPhone"></span>
			<span class="callContent" v-text="item.callContent"></span>
			<span class="out-people" v-text="item.dealTime"></span>
			<span class="out-car" v-text="item.state"></span>
			<span class="receiving-alarm-time" v-text="item.dealPolice"></span>
			<span class="arrive-time" v-text="item.callPeople"></span>
			<span class="dispose-time" v-text="item.comingPhone"></span>
			<span class="police-unit" v-text="item.callPhone"></span>
			<span class="out-police-bz" v-text="item.callContent"></span>
			</li>
			</ul>
			</vue-seamless-scroll>
			@@ -407,38 +407,38 @@
			cursor: pointer;

			.num {
			width: 8%;
			width: 6%;
			}

			.type {
			width: 10%;
			}

			.state {
			width: 8%;
			.out-people {
			width: 10%;
			}

			.comingPhone {
			width: 14%;
			.out-car {
			width: 10%;
			}

			.dealTime {
			width: 14%;
			.receiving-alarm-time {
			width: 12%;
			}

			.dealPolice {
			width: 8%;
			.arrive-time {
			width: 12%;
			}

			.callPeople {
			width: 8%;
			.dispose-time {
			width: 12%;
			}

			.callPhone {
			width: 14%;
			.police-unit {
			width: 12%;
			}

			.callContent {
			.out-police-bz {
			flex: 1;
			}
			}