监控接口对接，flv视频播放

guanqb

2022-11-17 03ef3a928baf7327e604e1f0284d4b09805d2530

监控接口对接，flv视频播放

 package-lock.json

@@ -15,6 +15,7 @@
                "echarts": "^5.2.1",
                "element-resize-detector": "^1.2.4",
                "element-ui": "^2.15.6",
                "flv.js": "^1.6.2",
                "font-awesome": "^4.7.0",
                "lib-flexible": "^0.3.2",
                "postcss-px2rem": "^0.3.0",
@@ -7762,6 +7763,11 @@
                "url": "https://github.com/sponsors/ljharb"
            }
        },
        "node_modules/es6-promise": {
            "version": "4.2.8",
            "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
            "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
        },
        "node_modules/escalade": {
            "version": "3.1.1",
            "dev": true,
@@ -8679,6 +8685,15 @@
            "dependencies": {
                "inherits": "^2.0.3",
                "readable-stream": "^2.3.6"
            }
        },
        "node_modules/flv.js": {
            "version": "1.6.2",
            "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
            "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
            "dependencies": {
                "es6-promise": "^4.2.8",
                "webworkify-webpack": "^2.1.5"
            }
        },
        "node_modules/follow-redirects": {
@@ -17405,6 +17420,11 @@
                "node": ">=0.8.0"
            }
        },
        "node_modules/webworkify-webpack": {
            "version": "2.1.5",
            "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
            "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
        },
        "node_modules/which": {
            "version": "1.3.1",
            "dev": true,
@@ -22937,6 +22957,11 @@
                "is-symbol": "^1.0.2"
            }
        },
        "es6-promise": {
            "version": "4.2.8",
            "resolved": "https://registry.npmmirror.com/es6-promise/-/es6-promise-4.2.8.tgz",
            "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
        },
        "escalade": {
            "version": "3.1.1",
            "dev": true
@@ -23571,6 +23596,15 @@
            "requires": {
                "inherits": "^2.0.3",
                "readable-stream": "^2.3.6"
            }
        },
        "flv.js": {
            "version": "1.6.2",
            "resolved": "https://registry.npmmirror.com/flv.js/-/flv.js-1.6.2.tgz",
            "integrity": "sha512-xre4gUbX1MPtgQRKj2pxJENp/RnaHaxYvy3YToVVCrSmAWUu85b9mug6pTXF6zakUjNP2lFWZ1rkSX7gxhB/2A==",
            "requires": {
                "es6-promise": "^4.2.8",
                "webworkify-webpack": "^2.1.5"
            }
        },
        "follow-redirects": {
@@ -29525,6 +29559,11 @@
            "version": "0.1.4",
            "dev": true
        },
        "webworkify-webpack": {
            "version": "2.1.5",
            "resolved": "https://registry.npmmirror.com/webworkify-webpack/-/webworkify-webpack-2.1.5.tgz",
            "integrity": "sha512-2akF8FIyUvbiBBdD+RoHpoTbHMQF2HwjcxfDvgztAX5YwbZNyrtfUMgvfgFVsgDhDPVTlkbb5vyasqDHfIDPQw=="
        },
        "which": {
            "version": "1.3.1",
            "dev": true,

 package.json

@@ -15,6 +15,7 @@
        "echarts": "^5.2.1",
        "element-resize-detector": "^1.2.4",
        "element-ui": "^2.15.6",
        "flv.js": "^1.6.2",
        "font-awesome": "^4.7.0",
        "lib-flexible": "^0.3.2",
        "postcss-px2rem": "^0.3.0",

 public/img/icon/end.png

 public/img/icon/orgin.png

 src/router/axios.js

@@ -30,7 +30,7 @@
}

// 跨域请求，允许保存cookie
service.defaults.withCredentials = true
// service.defaults.withCredentials = true

// http request拦截
// service.interceptors.request.use(

 src/views/police/index.vue

@@ -14,42 +14,69 @@
        <div v-show="boxShow" class="container-content">
            <div class="switch-box">
                <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-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">
                <div class="search-box">
                    <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" />
                    <input
                        v-model="searchValue"
                        @input="searchChange"
                        type="text"
                        placeholder="请输入搜索条件"
                    />
                    <button @click="searchClick" class="el-icon-search"></button>
                </div>

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

                <div class="list" v-show="navType == 1">
                    <el-table :data="carList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="carList.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">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="carType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
                            <template slot-scope="scope">
                                <div class="state-box" :class="{ online: scope.row.state == '使用中' }"></div>
                                <div
                                    class="state-box"
                                    :class="{ online: scope.row.state == '使用中' }"
                                ></div>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <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="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -57,18 +84,26 @@
                    </el-table>

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

                <div class="list" v-show="navType == 2">
                    <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <el-table
                        :data="phoneList.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">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -79,10 +114,20 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <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="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -90,18 +135,26 @@
                    </el-table>

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

                <div class="list" v-show="navType == 3">
                    <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                    <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">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column prop="state" label="状态" min-width="25%">
@@ -112,10 +165,20 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <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="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -123,18 +186,26 @@
                    </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>
                        <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)"
                    <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">
                        :height="currentTableHeight"
                    >
                        <el-table-column prop="name" label="名称" min-width="25%"></el-table-column>
                        <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column>
                        <el-table-column label="状态" min-width="25%">
@@ -145,10 +216,20 @@

                        <el-table-column label="操作" align="center" min-width="25%">
                            <template slot-scope="scope">
                                <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位">
                                <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="轨迹">
                                <el-button
                                    @click="carDetail(scope.row)"
                                    type="text"
                                    size="small"
                                    title="轨迹"
                                >
                                    <i class="el-icon-position"></i>
                                </el-button>
                            </template>
@@ -156,9 +237,15 @@
                    </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>
                        <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>
@@ -189,9 +276,15 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期">
                            </el-date-picker>
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </div>
                    </li>

@@ -224,9 +317,15 @@
                    <li>
                        <div>选择时间：</div>
                        <div class="datetime">
                            <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至"
                                start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期">
                            </el-date-picker>
                            <el-date-picker
                                v-model="trackTime"
                                type="datetimerange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                size="mini"
                                :editable="false"
                                end-placeholder="结束日期"
                            ></el-date-picker>
                        </div>
                    </li>

@@ -237,14 +336,33 @@
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                src="/video/sp.mp4"
                autoplay
                controls
                width="100%"
                height="100%"
                ref="videoElement"
                style="object-fit: fill"
            ></video>
        </el-dialog>

        <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
            :close-on-click-modal="true" class="phone-details-box">
        <el-dialog
            :title="phoneTitle"
            :modal="true"
            :visible.sync="phoneVisible"
            :before-close="phoneBeforeClose"
            :close-on-click-modal="true"
            class="phone-details-box"
        >
            <div class="item">
                <div>责任人：</div>
                <div>{{ phoneDetails.person }}</div>
@@ -662,7 +780,7 @@
            display: flex;
            justify-content: space-around;

            &>div {
            & > div {
                flex: 1;
            }
        }
@@ -729,7 +847,7 @@
                border-radius: 10px;
                overflow-y: auto;

                &>div {
                & > div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -809,18 +927,18 @@
                color: #fff;
                border-bottom: 1px solid #fff;

                &>div {
                & > div {
                    text-align: center;
                }

                &>div:first-child {
                & > div:first-child {
                    flex: 2;
                }

                &>div:last-child {
                & > div:last-child {
                    flex: 6;

                    &>div {
                    & > div {
                        width: 100% !important;
                    }
                }

 src/views/video/index.vue

@@ -11,9 +11,14 @@

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

@@ -24,34 +29,58 @@
            </div>

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

            <div class="list-show">
                <div class="car-list">
                    <div class="list-box">
                        <el-table :data="monitoringList.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
                        <el-table
                            :data="monitoringList.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' }" @cell-click="rowClick">
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                            @cell-click="rowClick"
                        >
                            <el-table-column prop="name" label="设备名称" min-width="50%"></el-table-column>
                            <el-table-column prop="type" label="设备类型" min-width="50%"></el-table-column>
                            <el-table-column prop="manufacturer" label="设备类型" min-width="50%"></el-table-column>
                        </el-table>
                    </div>
                    <div class="pages">
                        <el-pagination background layout="prev, pager, next" :total="monitoringList.length"
                            :page-size="pagesize" pager-count="3" :current-page="currentPage"
                            @current-change="handleCurrentChange"></el-pagination>
                        <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="monitoringList.length"
                            :page-size="pagesize"
                            pager-count="3"
                            :current-page="currentPage"
                            @current-change="handleCurrentChange"
                        ></el-pagination>
                    </div>
                </div>
            </div>
        </div>

        <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
            :close-on-click-modal="true" class="car-video-box">
            <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
                style="object-fit: fill"></video>
        <el-dialog
            :title="dialogTitle"
            :modal="true"
            :visible.sync="dialogVisible"
            :before-close="dialogBeforeClose"
            :close-on-click-modal="true"
            class="car-video-box"
        >
            <video
                id="videoElement"
                autoplay
                controls
                width="100%"
                height="100%"
                style="object-fit: fill"
            ></video>
        </el-dialog>
    </div>
</template>
@@ -60,6 +89,8 @@
import EntityDraw from "@/utils/EntityDraw.js"
import { listQuery, accurateSearch } from "@/utils/search.js"
import monitoringList from '@/assets/data/monitoring.js'
import { getVideoList, getDevices } from '@/api/video/index.js'
import flvjs from 'flv.js'

let graphicLayer = null

@@ -75,17 +106,16 @@
            searchArray: [],
            searchValBoxShow: false,
            boxShow: true,
            flvPlayer: null,
        }
    },

    created () {
        this.monitoringList = monitoringList
        this.getVideoList()
    },

    mounted () {
        this.$parent.resize('400px', true)

        this.initMonitoringIcon()
        graphicLayer = new EntityDraw()
    },

@@ -94,17 +124,37 @@
            this.currentPage = currentPage
        },

        getVideoList () {
            getVideoList(1, 10).then(res => {
                this.monitoringList = res.data.data.list
                this.initMonitoringIcon()
            })
        },

        async getDevices (id) {
            let flvAddress = ''
            await getDevices(id).then(res => {
                if ('data' in res.data) {
                    flvAddress = res.data.data.flv
                } else {
                    flvAddress = 'nodata'
                }
            })
            return flvAddress
        },

        initMonitoringIcon () {
            this.monitoringList.forEach((item, index) => {
                this.$EventBus.$emit('layerPointAdd', {
                    layerName: 'monitoringLayers',
                    type: "billboard",
                    params: {
                        name: `${index}号监控`,
                        lng: item.lng,
                        lat: item.lat,
                        name: `${index + 1}号监控`,
                        lng: item.longitude,
                        lat: item.latitude,
                        alt: 100,
                        url: '/img/icon/video.png'
                        url: '/img/icon/video.png',
                        deviceId: item.deviceId
                    },
                    incident: this.siteClick
                })
@@ -114,23 +164,46 @@

        rowClick (row) {
            this.$EventBus.$emit('toPosition', {
                layerName: 'carLayers',
                siteJd: row.lng,
                siteWd: row.lat
                layerName: 'monitoringLayers',
                siteJd: row.longitude,
                siteWd: row.latitude,
                siteGd: 60000,
                siteHeading: -3,
                sitePitch: -90
            })
        },

        siteClick (e) {
        async siteClick (e) {
            if (this.flvPlayer != null) {
                this.flvPlayer.pause()
                this.flvPlayer.unload()
                this.flvPlayer.detachMediaElement()
                this.flvPlayer.destroy()
                this.flvPlayer = null
            }

            this.dialogTitle = e.overlay.attrParams.name
            this.dialogVisible = true
            if (this.$refs.videoElement && this.$refs.videoElement != null) {
                this.$refs.videoElement.currentTime = 0
                this.$refs.videoElement.play()
            let flvUrl = ''
            await this.getDevices(e.overlay.attrParams.deviceId).then(res => {
                flvUrl = res
            })
            if (flvjs.isSupported() && flvUrl != 'nodata') {
                var videoElement = document.getElementById('videoElement')
                this.flvPlayer = flvjs.createPlayer({
                    type: 'flv',
                    isLive: true,
                    hasAudio: false,
                    url: flvUrl
                })
                this.flvPlayer.attachMediaElement(videoElement)
                this.flvPlayer.load()
                this.flvPlayer.play()
            }
        },

        dialogBeforeClose () {
            this.$refs.videoElement.pause()
            // this.$refs.videoElement.pause()
            this.dialogVisible = false
        },

@@ -179,6 +252,14 @@
        graphicLayer.destroy()

        this.$parent.resize('0px')

        if (this.flvPlayer != null) {
            this.flvPlayer.pause()
            this.flvPlayer.unload()
            this.flvPlayer.detachMediaElement()
            this.flvPlayer.destroy()
            this.flvPlayer = null
        }
    }
}
</script>
@@ -254,7 +335,7 @@
            border-radius: 10px;
            overflow-y: auto;

            &>div {
            & > div {
                height: 100%;
                padding: 0 10px;
                line-height: 36px;
@@ -278,7 +359,7 @@
        .list-show {
            flex: 1;

            &>div {
            & > div {
                height: 100%;
                display: flex;
                flex-direction: column;