更改

shuishen

2022-10-29 5da0ddf6a41a608440aebce7eb7ba241bc99cce6

更改

 public/img/icon/dt.png

 public/img/icon/zf.png

 src/assets/data/dt.js

New file
@@ -0,0 +1,155 @@
/*
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-23 17:54:16
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-29 15:15:05
 * @FilePath: \srs-police-affairs\src\assets\data\dt.js
 * @Description: 车辆相关数据
 * 
 * Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved. 
 */
export default [{
    name: '1号电台',
    lng: 116.022877,
    lat: 28.685077,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '2号电台',
    lng: 116.029917,
    lat: 28.685360,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '3号电台',
    lng: 116.031044,
    lat: 28.679445,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '4号电台',
    lng: 115.966750,
    lat: 28.595163,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '5号电台',
    lng: 116.150081,
    lat: 28.580119,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '6号电台',
    lng: 116.029917,
    lat: 28.685360,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '7号电台',
    lng: 116.235801,
    lat: 28.654740,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '8号电台',
    lng: 116.210143,
    lat: 28.691634,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '9号电台',
    lng: 116.072665,
    lat: 28.639879,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '10号电台',
    lng: 116.121559,
    lat: 28.699041,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '11号电台',
    lng: 116.106692,
    lat: 28.758830,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '12号电台',
    lng: 116.043007,
    lat: 28.736032,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '13号电台',
    lng: 116.002395,
    lat: 28.695900,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '14号电台',
    lng: 116.009437,
    lat: 28.660863,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '15号电台',
    lng: 116.067097,
    lat: 28.621827,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}, {
    name: '16号电台',
    lng: 115.944243,
    lat: 28.669108,
    alt: 100,
    url: '/img/icon/dt.png',
    carId: '赣E12354',
    carType: '大众',
    person: "李会军",
}]

 src/assets/data/phone.js

@@ -1,5 +1,5 @@
export default [{
    name: '1号手台',
    name: '1号手持记录仪',
    person: "李会军",
    lng: 116.020804,
    lat: 28.678568,
@@ -9,7 +9,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '2号手台',
    name: '2号手持记录仪',
    person: "李会军",
    lng: 116.027659,
    lat: 28.678623,
@@ -19,7 +19,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '3号手台',
    name: '3号手持记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.680071,
@@ -29,7 +29,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '4号手台',
    name: '4号手持记录仪',
    person: "李会军",
    lng: 116.018759,
    lat: 28.686071,
@@ -39,7 +39,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '5号手台',
    name: '5号手持记录仪',
    person: "李会军",
    lng: 116.029759,
    lat: 28.685071,
@@ -49,7 +49,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '6号手台',
    name: '6号手持记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.684071,
@@ -59,7 +59,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '7号手台',
    name: '7号手持记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.683071,
@@ -69,7 +69,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '8号手台',
    name: '8号手持记录仪',
    person: "李会军",
    lng: 116.022759,
    lat: 28.682071,
@@ -79,7 +79,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '9号手台',
    name: '9号手持记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.681071,
@@ -89,7 +89,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '10号手台',
    name: '10号手持记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.677071,
@@ -99,7 +99,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '11号手台',
    name: '11号手持记录仪',
    person: "李会军",
    lng: 115.947759,
    lat: 28.710071,
@@ -109,7 +109,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '12号手台',
    name: '12号手持记录仪',
    person: "李会军",
    lng: 115.977759,
    lat: 28.745071,
@@ -119,7 +119,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '13号手台',
    name: '13号手持记录仪',
    person: "李会军",
    lng: 116.164759,
    lat: 28.738071,
@@ -129,7 +129,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '14号手台',
    name: '14号手持记录仪',
    person: "李会军",
    lng: 116.149759,
    lat: 28.665071,
@@ -139,7 +139,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '15号手台',
    name: '15号手持记录仪',
    person: "李会军",
    lng: 116.301759,
    lat: 28.644071,
@@ -149,7 +149,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '16号手台',
    name: '16号手持记录仪',
    person: "李会军",
    lng: 116.115759,
    lat: 28.577071,
@@ -159,7 +159,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '17号手台',
    name: '17号手持记录仪',
    person: "李会军",
    lng: 116.165759,
    lat: 28.548071,
@@ -169,7 +169,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '18号手台',
    name: '18号手持记录仪',
    person: "李会军",
    lng: 116.020759,
    lat: 28.571071,
@@ -179,7 +179,7 @@
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '19号手台',
    name: '19号手持记录仪',
    person: "李会军",
    lng: 116.002759,
    lat: 28.631071,

 src/assets/data/zf.js

New file
@@ -0,0 +1,191 @@
export default [{
    name: '1号执法记录仪',
    person: "李会军",
    lng: 116.020804,
    lat: 28.678568,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '2号执法记录仪',
    person: "李会军",
    lng: 116.027659,
    lat: 28.678623,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '3号执法记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.680071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '4号执法记录仪',
    person: "李会军",
    lng: 116.018759,
    lat: 28.686071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '5号执法记录仪',
    person: "李会军",
    lng: 116.029759,
    lat: 28.685071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '6号执法记录仪',
    person: "李会军",
    lng: 116.026759,
    lat: 28.684071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '7号执法记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.683071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '8号执法记录仪',
    person: "李会军",
    lng: 116.022759,
    lat: 28.682071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '9号执法记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.681071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '10号执法记录仪',
    person: "李会军",
    lng: 116.031759,
    lat: 28.677071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '11号执法记录仪',
    person: "李会军",
    lng: 115.947759,
    lat: 28.710071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '12号执法记录仪',
    person: "李会军",
    lng: 115.977759,
    lat: 28.745071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '13号执法记录仪',
    person: "李会军",
    lng: 116.164759,
    lat: 28.738071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '14号执法记录仪',
    person: "李会军",
    lng: 116.149759,
    lat: 28.665071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '15号执法记录仪',
    person: "李会军",
    lng: 116.301759,
    lat: 28.644071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '16号执法记录仪',
    person: "李会军",
    lng: 116.115759,
    lat: 28.577071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '17号执法记录仪',
    person: "李会军",
    lng: 116.165759,
    lat: 28.548071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '18号执法记录仪',
    person: "李会军",
    lng: 116.020759,
    lat: 28.571071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}, {
    name: '19号执法记录仪',
    person: "李会军",
    lng: 116.002759,
    lat: 28.631071,
    alt: 100,
    url: '/img/icon/zf.png',
    id: 12356456662,
    phoneType: '华为',
    location: '信州区XXXX大道XXXX路'
}]

 src/styles/element-ui/element-ui.css

File was deleted

 src/styles/element-ui/element-ui.min.css

File was deleted

 src/views/police/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-29 10:51:40
 * @LastEditTime: 2022-10-29 15:10:34
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -12,8 +12,10 @@
<template>
    <div class="container">
        <div class="switch-box">
            <div class="police-car" @click="navClick(1)" :class="{'choosed':navType == 1}">警车</div>
            <div class="interphone" @click="navClick(2)" :class="{ 'choosed': navType == 2 }">手台</div>
            <el-select v-model="typeValue" @change="navClick" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>

        <div class="list-show" ref="tableBox" v-show="!detailFlag">
@@ -41,7 +43,7 @@
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="140"></el-table-column>
                    <el-table-column prop="carType" label="警车类型" width="120"></el-table-column>
                    <el-table-column prop="carType" label="类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
@@ -94,6 +96,70 @@
                    </el-pagination>
                </div>
            </div>

            <div class="list" v-show="navType == 3">
                <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="140"></el-table-column>
                    <el-table-column prop="carType" label="类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <i class="el-icon-location"></i>
                            </el-button>
                            <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages">
                    <el-pagination background layout="prev, pager, next" :total="dtList.length" :page-size="pagesize"
                        pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>

            <div class="list" v-show="navType == 4">
                <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
                    :height="currentTableHeight">
                    <el-table-column type="index" label="序号" width="50">
                        <template slot-scope="scope">
                            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="name" label="名称" width="120"></el-table-column>
                    <el-table-column prop="phoneType" label="手台类型" width="120"></el-table-column>

                    <el-table-column label="操作" align="center">
                        <template slot-scope="scope">
                            <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <i class="el-icon-location"></i>
                            </el-button>
                            <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹">
                                <i class="el-icon-position"></i>
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pages">
                    <el-pagination background layout="prev, pager, next" :total="zfList.length" :page-size="pagesize"
                        pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>

        <div class="track-box" v-show="detailFlag">
@@ -139,7 +205,7 @@

            <ul v-show="navType == 2">
                <li>
                    <div>手台型号：</div>
                    <div>型号：</div>
                    <div>350m</div>
                </li>

@@ -193,7 +259,7 @@
                    <div>{{ phoneDetails.phoneID }}</div>
                </div>
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
                    <div>手台类型：</div>
                    <div>类型：</div>
                    <div>{{ phoneDetails.phoneType }}</div>
                </div>
                <div style="flex: 1; display: flex; justify-content: space-between; align-items: center;">
@@ -210,6 +276,8 @@

import carList from '@/assets/data/car.js'
import phoneList from '@/assets/data/phone.js'
import zfList from '@/assets/data/zf.js'
import dtList from '@/assets/data/dt.js'
export default {
    data () {
        return {
@@ -217,7 +285,9 @@
            currentPage: 1,
            pagesize: 13,
            carList: [],
            dtList: [],
            phoneList: [],
            zfList: [],
            dialogTitle: '',
            dialogVisible: false,
            phoneDetails: {},
@@ -229,11 +299,27 @@
            currentTableHeight: 0,
            detailFlag: false,
            trackTime: [],
            options: [{
                value: '1',
                label: '警车'
            }, {
                value: '2',
                label: '手持记录仪'
            }, {
                value: '3',
                label: '电台'
            }, {
                value: '4',
                label: '执法记录仪'
            }],
            typeValue: '1'
        }
    },
    created () {
        this.carList = carList
        this.dtList = dtList
        this.phoneList = phoneList
        this.zfList = zfList
        const that = this

        this.$nextTick(() => {
@@ -268,14 +354,31 @@
            this.searchValBoxShow = false
            this.searchArray = []
            this.carList = carList
            this.dtList = dtList
            this.phoneList = phoneList
            this.zfList = zfList

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'carLayers',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'phoneLayers',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'zfLayers',
                type: 'VectorLayer'
            })

            this.$EventBus.$emit('mapClearLayer', {
                layerName: 'dtLayers',
                type: 'VectorLayer'
            })

            if (type == 1) {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'phoneLayers',
                    type: 'VectorLayer'
                })

                this.carList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'carLayers',
@@ -290,15 +393,28 @@
                        incident: this.siteClick
                    })
                })
            } else {
                this.$EventBus.$emit('mapClearLayer', {
                    layerName: 'carLayers',
                    type: 'VectorLayer'
                })

            } else if (type == 2) {
                this.phoneList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'phoneLayers',
                        type: "billboard",
                        params: item,
                        incident: this.phoneSiteClick
                    })
                })
            } else if (type == 3) {
                this.dtList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'dtLayers',
                        type: "billboard",
                        params: item,
                        incident: this.phoneSiteClick
                    })
                })
            } else if (type == 4) {
                this.zfList.forEach(item => {
                    this.$EventBus.$emit('layerPointAdd', {
                        layerName: 'zfLayers',
                        type: "billboard",
                        params: item,
                        incident: this.phoneSiteClick
@@ -345,12 +461,18 @@
                this.searchValBoxShow = false
                this.searchArray = []
                this.carList = carList
                this.dtList = dtList
                this.phoneList = phoneList
                this.zfList = zfList
            } else {
                if (this.navType == 1) {
                    this.searchArray = listQuery(carList, this.searchValue, 'name')
                } else {
                } else if (this.navType == 2) {
                    this.searchArray = listQuery(phoneList, this.searchValue, 'name')
                } else if (this.navType == 3) {
                    this.searchArray = listQuery(dtList, this.searchValue, 'name')
                } else if (this.navType == 4) {
                    this.searchArray = listQuery(zfList, this.searchValue, 'name')
                }
                this.searchValBoxShow = true
            }
@@ -360,8 +482,12 @@
            this.searchValBoxShow = false
            if (this.navType == 1) {
                this.carList = accurateSearch(carList, this.searchValue, 'name')
            } else {
            } else if (this.navType == 2) {
                this.phoneList = accurateSearch(phoneList, this.searchValue, 'name')
            } else if (this.navType == 3) {
                this.dtList = accurateSearch(phoneList, this.searchValue, 'name')
            } else if (this.navType == 4) {
                this.zfList = accurateSearch(zfList, this.searchValue, 'name')
            }
        },

@@ -370,8 +496,12 @@
            this.searchArray = []
            if (this.navType == 1) {
                this.carList = [item]
            } else {
            } else if (this.navType == 2) {
                this.phoneList = [item]
            } else if (this.navType == 3) {
                this.dtList = [item]
            } else if (this.navType == 4) {
                this.zfList = [item]
            }
        },

@@ -463,6 +593,16 @@
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'zfLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'dtLayers',
            type: 'VectorLayer'
        })

        this.$EventBus.$emit('mapClearLayer', {
            layerName: 'polylineLayer',
            type: 'VectorLayer'
        })
@@ -482,24 +622,13 @@
    background: $bg-color;

    .switch-box {
        padding: 6px;
        // background: blue;
        display: flex;
        justify-content: space-around;

        &>div {
            box-sizing: border-box;
            width: 50%;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: #fff;
            font-size: 24px;
            cursor: pointer;
            border-bottom: 1px solid #33566c;
        }

        .choosed {
            background-color: rgb(0, 92, 169);
            flex: 1;
        }
    }

@@ -509,6 +638,7 @@

        .search-box {
            padding: 6px;
            padding-top: 0;
            height: 48px;
            display: flex;