适配，与样式调整

shuishen

2022-11-12 c4acf66a2684dd3309313282b301f7d616f97e6a

适配，与样式调整

 package-lock.json

@@ -3818,8 +3818,7 @@
        "atob": {
            "version": "2.1.2",
            "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
            "dev": true
            "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg=="
        },
        "autoprefixer": {
            "version": "9.8.8",
@@ -3963,8 +3962,7 @@
        "balanced-match": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
            "dev": true
            "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
        },
        "base": {
            "version": "0.11.2",
@@ -4062,8 +4060,7 @@
        "big.js": {
            "version": "5.2.2",
            "resolved": "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz",
            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
            "dev": true
            "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ=="
        },
        "binary-extensions": {
            "version": "2.2.0",
@@ -4171,7 +4168,6 @@
            "version": "1.1.11",
            "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
            "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
            "dev": true,
            "requires": {
                "balanced-match": "^1.0.0",
                "concat-map": "0.0.1"
@@ -5069,8 +5065,7 @@
        "concat-map": {
            "version": "0.0.1",
            "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
            "dev": true
            "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="
        },
        "concat-stream": {
            "version": "1.6.2",
@@ -5508,6 +5503,17 @@
                "randomfill": "^1.0.3"
            }
        },
        "css": {
            "version": "2.2.4",
            "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz",
            "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==",
            "requires": {
                "inherits": "^2.0.3",
                "source-map": "^0.6.1",
                "source-map-resolve": "^0.5.2",
                "urix": "^0.1.0"
            }
        },
        "css-color-names": {
            "version": "0.0.4",
            "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -5867,8 +5873,7 @@
        "decode-uri-component": {
            "version": "0.2.0",
            "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
            "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
            "dev": true
            "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og=="
        },
        "deep-equal": {
            "version": "1.1.1",
@@ -6413,8 +6418,7 @@
        "emojis-list": {
            "version": "3.0.0",
            "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
            "dev": true
            "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q=="
        },
        "encodeurl": {
            "version": "1.0.2",
@@ -6551,8 +6555,7 @@
        "escape-string-regexp": {
            "version": "1.0.5",
            "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
            "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
            "dev": true
            "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
        },
        "eslint": {
            "version": "6.8.0",
@@ -6980,8 +6983,7 @@
        "extend": {
            "version": "3.0.2",
            "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
            "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
            "dev": true
            "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="
        },
        "extend-shallow": {
            "version": "3.0.2",
@@ -7432,8 +7434,7 @@
        "fs.realpath": {
            "version": "1.0.0",
            "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
            "dev": true
            "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw=="
        },
        "fsevents": {
            "version": "2.3.2",
@@ -7565,7 +7566,6 @@
            "version": "7.2.3",
            "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
            "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
            "dev": true,
            "requires": {
                "fs.realpath": "^1.0.0",
                "inflight": "^1.0.4",
@@ -7656,6 +7656,21 @@
            "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
            "requires": {
                "function-bind": "^1.1.1"
            }
        },
        "has-ansi": {
            "version": "2.0.0",
            "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
            "integrity": "sha512-C8vBJ8DwUCx19vhm7urhTuUsr4/IyP6l4VzNQDv+ryHQObW3TTTp9yB68WpYgRe2bbaGuZ/se74IqFeVnMnLZg==",
            "requires": {
                "ansi-regex": "^2.0.0"
            },
            "dependencies": {
                "ansi-regex": {
                    "version": "2.1.1",
                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
                    "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
                }
            }
        },
        "has-bigints": {
@@ -8256,7 +8271,6 @@
            "version": "1.0.6",
            "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
            "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
            "dev": true,
            "requires": {
                "once": "^1.3.0",
                "wrappy": "1"
@@ -8265,8 +8279,7 @@
        "inherits": {
            "version": "2.0.4",
            "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
            "dev": true
            "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
        },
        "inquirer": {
            "version": "7.3.3",
@@ -8809,6 +8822,11 @@
            "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
            "dev": true
        },
        "js-base64": {
            "version": "2.6.4",
            "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.6.4.tgz",
            "integrity": "sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ=="
        },
        "js-message": {
            "version": "1.0.7",
            "resolved": "https://registry.npmjs.org/js-message/-/js-message-1.0.7.tgz",
@@ -8946,6 +8964,11 @@
                "prelude-ls": "~1.1.2",
                "type-check": "~0.3.2"
            }
        },
        "lib-flexible": {
            "version": "0.3.2",
            "resolved": "https://registry.npmjs.org/lib-flexible/-/lib-flexible-0.3.2.tgz",
            "integrity": "sha512-9yowMWA70tKhKdCJDaltY0mNQG4OWo7pWKScnTp9aiSxS7s20ZYlwBRE3335nweOf5qKXVC7sDxJwMPM8/MFZg=="
        },
        "lines-and-columns": {
            "version": "1.2.4",
@@ -9337,7 +9360,6 @@
            "version": "3.1.2",
            "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
            "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
            "dev": true,
            "requires": {
                "brace-expansion": "^1.1.7"
            }
@@ -9345,8 +9367,7 @@
        "minimist": {
            "version": "1.2.6",
            "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
            "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
            "dev": true
            "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
        },
        "minipass": {
            "version": "3.3.4",
@@ -9550,6 +9571,11 @@
                "snapdragon": "^0.8.1",
                "to-regex": "^3.0.1"
            }
        },
        "natives": {
            "version": "1.1.6",
            "resolved": "https://registry.npmjs.org/natives/-/natives-1.1.6.tgz",
            "integrity": "sha512-6+TDFewD4yxY14ptjKaS63GVdtKiES1pTPyxn9Jb0rBqPMZ7VcCiooEhPNsr+mqHtMGxa/5c/HhcC4uPEUw/nA=="
        },
        "natural-compare": {
            "version": "1.4.0",
@@ -9848,7 +9874,6 @@
            "version": "1.4.0",
            "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
            "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
            "dev": true,
            "requires": {
                "wrappy": "1"
            }
@@ -10106,8 +10131,7 @@
        "path-is-absolute": {
            "version": "1.0.1",
            "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
            "dev": true
            "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg=="
        },
        "path-is-inside": {
            "version": "1.0.2",
@@ -11234,6 +11258,83 @@
                }
            }
        },
        "postcss-px2rem": {
            "version": "0.3.0",
            "resolved": "https://registry.npmjs.org/postcss-px2rem/-/postcss-px2rem-0.3.0.tgz",
            "integrity": "sha512-ACZRimmOEDma0L/sI5ENREY3BoYB4LNME9iM9VcZU2t598OB9KLEPDYX8JBohNsvwJ+Nvlvk3IcGm0bRqOBC/Q==",
            "requires": {
                "postcss": "^5.0.0",
                "px2rem": "~0.5.0"
            },
            "dependencies": {
                "ansi-regex": {
                    "version": "2.1.1",
                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
                    "integrity": "sha512-TIGnTpdo+E3+pCyAluZvtED5p5wCqLdezCyhPZzKPcxvFplEt4i+W7OONCKgeZFT3+y5NZZfOOS/Bdcanm1MYA=="
                },
                "ansi-styles": {
                    "version": "2.2.1",
                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
                    "integrity": "sha512-kmCevFghRiWM7HB5zTPULl4r9bVFSWjz62MhqizDGUrq2NWuNMQyuv4tHHoKJHs69M/MF64lEcHdYIocrdWQYA=="
                },
                "chalk": {
                    "version": "1.1.3",
                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
                    "integrity": "sha512-U3lRVLMSlsCfjqYPbLyVv11M9CPW4I728d6TCKMAOJueEeB9/8o+eSsMnxPJD+Q+K909sdESg7C+tIkoH6on1A==",
                    "requires": {
                        "ansi-styles": "^2.2.1",
                        "escape-string-regexp": "^1.0.2",
                        "has-ansi": "^2.0.0",
                        "strip-ansi": "^3.0.0",
                        "supports-color": "^2.0.0"
                    },
                    "dependencies": {
                        "supports-color": {
                            "version": "2.0.0",
                            "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
                            "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
                        }
                    }
                },
                "has-flag": {
                    "version": "1.0.0",
                    "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
                    "integrity": "sha512-DyYHfIYwAJmjAjSSPKANxI8bFY9YtFrgkAfinBojQ8YJTOuOuav64tMUJv584SES4xl74PmuaevIyaLESHdTAA=="
                },
                "postcss": {
                    "version": "5.2.18",
                    "resolved": "https://registry.npmjs.org/postcss/-/postcss-5.2.18.tgz",
                    "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
                    "requires": {
                        "chalk": "^1.1.3",
                        "js-base64": "^2.1.9",
                        "source-map": "^0.5.6",
                        "supports-color": "^3.2.3"
                    }
                },
                "source-map": {
                    "version": "0.5.7",
                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
                    "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="
                },
                "strip-ansi": {
                    "version": "3.0.1",
                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
                    "integrity": "sha512-VhumSSbBqDTP8p2ZLKj40UjBCV4+v8bUSEpUb4KjRgWk9pbqGF4REFj6KEagidb2f/M6AzC0EmFyDNGaw9OCzg==",
                    "requires": {
                        "ansi-regex": "^2.0.0"
                    }
                },
                "supports-color": {
                    "version": "3.2.3",
                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
                    "integrity": "sha512-Jds2VIYDrlp5ui7t8abHN2bjAu4LV/q4N2KivFPpGH0lrka0BMq/33AmECUXlKPcHigkNaqfXRENFju+rlcy+A==",
                    "requires": {
                        "has-flag": "^1.0.0"
                    }
                }
            }
        },
        "postcss-reduce-initial": {
            "version": "4.0.3",
            "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-4.0.3.tgz",
@@ -11521,6 +11622,131 @@
            "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
            "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
            "dev": true
        },
        "px2rem": {
            "version": "0.5.0",
            "resolved": "https://registry.npmjs.org/px2rem/-/px2rem-0.5.0.tgz",
            "integrity": "sha512-R+LQj3Evbjbpmglo7D0PBVsnAbKP4WSvZEZUnF8RGIpWkIHFeAT+BlDOxxBxKVyMDecmfv9qdzNLTZLMq32osA==",
            "requires": {
                "chalk": "~0.5.1",
                "commander": "~2.6.0",
                "css": "~2.2.0",
                "extend": "~3.0.0",
                "fs-extra": "~0.16.3"
            },
            "dependencies": {
                "ansi-regex": {
                    "version": "0.2.1",
                    "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-0.2.1.tgz",
                    "integrity": "sha512-sGwIGMjhYdW26/IhwK2gkWWI8DRCVO6uj3hYgHT+zD+QL1pa37tM3ujhyfcJIYSbsxp7Gxhy7zrRW/1AHm4BmA=="
                },
                "ansi-styles": {
                    "version": "1.1.0",
                    "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-1.1.0.tgz",
                    "integrity": "sha512-f2PKUkN5QngiSemowa6Mrk9MPCdtFiOSmibjZ+j1qhLGHHYsqZwmBMRF3IRMVXo8sybDqx2fJl2d/8OphBoWkA=="
                },
                "chalk": {
                    "version": "0.5.1",
                    "resolved": "https://registry.npmjs.org/chalk/-/chalk-0.5.1.tgz",
                    "integrity": "sha512-bIKA54hP8iZhyDT81TOsJiQvR1gW+ZYSXFaZUAvoD4wCHdbHY2actmpTE4x344ZlFqHbvoxKOaESULTZN2gstg==",
                    "requires": {
                        "ansi-styles": "^1.1.0",
                        "escape-string-regexp": "^1.0.0",
                        "has-ansi": "^0.1.0",
                        "strip-ansi": "^0.3.0",
                        "supports-color": "^0.2.0"
                    }
                },
                "commander": {
                    "version": "2.6.0",
                    "resolved": "https://registry.npmjs.org/commander/-/commander-2.6.0.tgz",
                    "integrity": "sha512-PhbTMT+ilDXZKqH8xbvuUY2ZEQNef0Q7DKxgoEKb4ccytsdvVVJmYqR0sGbi96nxU6oGrwEIQnclpK2NBZuQlg=="
                },
                "fs-extra": {
                    "version": "0.16.5",
                    "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.16.5.tgz",
                    "integrity": "sha512-yb7ti8kVH+qboUQWYxUuOPj/qcMUA6lO68ErZoPQOTP+7qroCIN/1gZ1lLk/rs2p0gPFzrvPYujKGnHTu+HHxA==",
                    "requires": {
                        "graceful-fs": "^3.0.5",
                        "jsonfile": "^2.0.0",
                        "rimraf": "^2.2.8"
                    }
                },
                "graceful-fs": {
                    "version": "3.0.12",
                    "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-3.0.12.tgz",
                    "integrity": "sha512-J55gaCS4iTTJfTXIxSVw3EMQckcqkpdRv3IR7gu6sq0+tbC363Zx6KH/SEwXASK9JRbhyZmVjJEVJIOxYsB3Qg==",
                    "requires": {
                        "natives": "^1.1.3"
                    }
                },
                "has-ansi": {
                    "version": "0.1.0",
                    "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-0.1.0.tgz",
                    "integrity": "sha512-1YsTg1fk2/6JToQhtZkArMkurq8UoWU1Qe0aR3VUHjgij4nOylSWLWAtBXoZ4/dXOmugfLGm1c+QhuD0JyedFA==",
                    "requires": {
                        "ansi-regex": "^0.2.0"
                    }
                },
                "jsonfile": {
                    "version": "2.4.0",
                    "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz",
                    "integrity": "sha512-PKllAqbgLgxHaj8TElYymKCAgrASebJrWpTnEkOaTowt23VKXXN0sUeriJ+eh7y6ufb/CC5ap11pz71/cM0hUw==",
                    "requires": {
                        "graceful-fs": "^4.1.6"
                    },
                    "dependencies": {
                        "graceful-fs": {
                            "version": "4.2.10",
                            "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
                            "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
                            "optional": true
                        }
                    }
                },
                "strip-ansi": {
                    "version": "0.3.0",
                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-0.3.0.tgz",
                    "integrity": "sha512-DerhZL7j6i6/nEnVG0qViKXI0OKouvvpsAiaj7c+LfqZZZxdwZtv8+UiA/w4VUJpT8UzX0pR1dcHOii1GbmruQ==",
                    "requires": {
                        "ansi-regex": "^0.2.1"
                    }
                },
                "supports-color": {
                    "version": "0.2.0",
                    "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-0.2.0.tgz",
                    "integrity": "sha512-tdCZ28MnM7k7cJDJc7Eq80A9CsRFAAOZUy41npOZCs++qSjfIy7o5Rh46CBk+Dk5FbKJ33X3Tqg4YrV07N5RaA=="
                }
            }
        },
        "px2rem-loader": {
            "version": "0.1.9",
            "resolved": "https://registry.npmjs.org/px2rem-loader/-/px2rem-loader-0.1.9.tgz",
            "integrity": "sha512-3Ew8At5W/HHIIUe/KZk+FBRRb20KtgP1N1c/BnMlXk6LNkqrFmUIUF35GF/evzNdj/Q63iWJpkmn/c5qSMplRg==",
            "requires": {
                "loader-utils": "^1.1.0",
                "px2rem": "^0.5.0"
            },
            "dependencies": {
                "json5": {
                    "version": "1.0.1",
                    "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
                    "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
                    "requires": {
                        "minimist": "^1.2.0"
                    }
                },
                "loader-utils": {
                    "version": "1.4.2",
                    "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
                    "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
                    "requires": {
                        "big.js": "^5.2.2",
                        "emojis-list": "^3.0.0",
                        "json5": "^1.0.1"
                    }
                }
            }
        },
        "q": {
            "version": "1.5.1",
@@ -11935,8 +12161,7 @@
        "resolve-url": {
            "version": "0.2.1",
            "resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
            "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg==",
            "dev": true
            "integrity": "sha512-ZuF55hVUQaaczgOIwqWzkEcEidmlD/xl44x1UZnhOXcYuFN2S6+rcxpG+C1N3So0wvNI3DmJICUFfu2SxhBmvg=="
        },
        "restore-cursor": {
            "version": "2.0.0",
@@ -11976,7 +12201,6 @@
            "version": "2.7.1",
            "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
            "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
            "dev": true,
            "requires": {
                "glob": "^7.1.3"
            }
@@ -12638,7 +12862,6 @@
            "version": "0.5.3",
            "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
            "integrity": "sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==",
            "dev": true,
            "requires": {
                "atob": "^2.1.2",
                "decode-uri-component": "^0.2.0",
@@ -12660,8 +12883,7 @@
        "source-map-url": {
            "version": "0.4.1",
            "resolved": "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz",
            "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==",
            "dev": true
            "integrity": "sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw=="
        },
        "spdx-correct": {
            "version": "3.1.1",
@@ -13698,8 +13920,7 @@
        "urix": {
            "version": "0.1.0",
            "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
            "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg==",
            "dev": true
            "integrity": "sha512-Am1ousAhSLBeB9cG/7k7r2R0zj50uDRlZHPGbazid5s9rlF1F/QKYObEKSIunSjIOkJZqwRRLpvewjEkM7pSqg=="
        },
        "url": {
            "version": "0.11.0",
@@ -14848,8 +15069,7 @@
        "wrappy": {
            "version": "1.0.2",
            "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
            "dev": true
            "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="
        },
        "write": {
            "version": "1.0.3",

 package.json

@@ -16,6 +16,9 @@
        "element-resize-detector": "^1.2.4",
        "element-ui": "^2.15.6",
        "font-awesome": "^4.7.0",
        "lib-flexible": "^0.3.2",
        "postcss-px2rem": "^0.3.0",
        "px2rem-loader": "^0.1.9",
        "qs.js": "^0.1.12",
        "vue": "^2.6.11",
        "vue-axios": "^3.3.7",

 src/main.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:34:58
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-10 10:23:50
 * @LastEditTime: 2022-11-12 10:02:24
 * @FilePath: \srs-police-affairs\src\main.js
 * @Description: 
 * 
@@ -26,6 +26,7 @@
import axios from './router/axios'
import VueAxios from 'vue-axios'

import 'lib-flexible/flexible.js'
import './permission'
//这一段是引入mock
// import '@/mock/index'

 src/views/home/components/rightContainer.vue

@@ -23,9 +23,9 @@
                    :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                    :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
                    :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
                    <el-table-column prop="activityName" label="活动名称" width="100"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间" width="100"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间" width="100"></el-table-column>
                    <el-table-column prop="activityName" label="活动名称"></el-table-column>
                    <el-table-column prop="startTime" label="开始时间"></el-table-column>
                    <el-table-column prop="endTime" label="结束时间"></el-table-column>
                    <el-table-column prop="scale" label="规模"></el-table-column>
                </el-table>
            </div>

 src/views/lyout/index.vue

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:24
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-10 14:11:08
 * @LastEditTime: 2022-11-12 10:37:44
 * @FilePath: \srs-police-affairs\src\views\lyout\index.vue
 * @Description: 
 * 
@@ -34,12 +34,14 @@
            <mapBox ref="modalForm" />

            <!-- 主体内容区域 -->
            <div class="main-content" id="MainContent">
            <div class="main-content" id="MainContent"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
                <router-view ref='target-name'></router-view>
            </div>


            <el-button v-show='leftShow' class="flexible-btn"
                :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
                :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
                @click="flexibelClick"></el-button>
        </div>
@@ -136,15 +138,9 @@
            if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

            if (this.show) {
                document.getElementById('MainContent').style.width = this.boxWidth
                var a = this.boxWidth.replace(/[^0-9]/ig, '')
                document.getElementById('FlexibleBtn').style.left = a + 'px'

                document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
                document.querySelector('.screen-full-btn').classList.add('shrink-btn')
            } else {
                document.getElementById('MainContent').style.width = 0
                document.getElementById('FlexibleBtn').style.left = 0

                document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
                document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
@@ -157,10 +153,6 @@
            this.show = false

            if (this.$refs['target-name'].boxResize) this.$refs['target-name'].boxResize(this.show)

            document.getElementById('MainContent').style.width = 0

            document.getElementById('FlexibleBtn').style.left = 0
        },
    }
}
@@ -243,6 +235,14 @@
            top: 80px;
            height: calc(100% - 80px);
        }

        .main-content.spread {
            width: 400px;
        }

        .main-content.ake-back {
            width: 0px;
        }
    }
}

@@ -268,4 +268,12 @@
        font-size: 16px;
    }
}

.flexible-btn.spread {
    left: 400px;
}

.flexible-btn.take-back {
    left: 0px;
}
</style>

 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-11-10 13:51:10
 * @LastEditTime: 2022-11-12 10:51:09
 * @FilePath: \srs-police-affairs\src\views\police\index.vue
 * @Description: 辖区管理
 * 
@@ -14,71 +14,42 @@
        <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"
                    >
                        <el-table-column type="index" label="序号" width="50">
                        :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">
                                <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="carType" label="类型" width="60"></el-table-column>
                        <el-table-column prop="state" label="状态" width="80">
                            <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">
                        <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>
@@ -86,55 +57,32 @@
                    </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"
                    >
                        <el-table-column type="index" label="序号" width="50">
                        :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%">
                            <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="80"></el-table-column>
                        <el-table-column prop="state" label="状态" width="70">
                            <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">
                        <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>
@@ -142,55 +90,32 @@
                    </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"
                    >
                        <el-table-column type="index" label="序号" width="50">
                        :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%">
                            <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="dtType" label="类型" width="60"></el-table-column>
                        <el-table-column prop="state" label="状态" width="80">
                            <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">
                        <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>
@@ -198,55 +123,32 @@
                    </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"
                    >
                        <el-table-column type="index" label="序号" width="50">
                        :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%">
                            <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="80"></el-table-column>
                        <el-table-column label="状态" width="70">
                            <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">
                        <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>
@@ -254,15 +156,9 @@
                    </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>
@@ -293,15 +189,9 @@
                    <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>

@@ -334,15 +224,9 @@
                    <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>

@@ -353,33 +237,14 @@
            </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>
@@ -765,7 +630,7 @@
            display: flex;
            justify-content: space-around;

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

                & > div {
                &>div {
                    height: 100%;
                    padding: 0 10px;
                    line-height: 36px;
@@ -851,6 +716,7 @@
                    align-items: center;
                    justify-content: center;
                }

                .state-box {
                    width: 20px;
                    height: 20px;
@@ -860,6 +726,7 @@
                    border-radius: 50%;
                    background-color: #adadad;
                }

                .online {
                    background-color: #4ccc7d;
                }
@@ -910,18 +777,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

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-08-18 16:18:17
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-11-10 16:09:06
 * @LastEditTime: 2022-11-12 10:52:42
 * @FilePath: \srs-police-affairs\src\views\video\index.vue
 * @Description: 辖区管理
 * 
@@ -35,13 +35,8 @@
                            style="width: 100%"
                            :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
                            :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }" @cell-click="rowClick">
                            <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="150"></el-table-column>
                            <el-table-column prop="type" label="设备类型"></el-table-column>
                            <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>
                    </div>
                    <div class="pages">

 vue.config.js

@@ -2,7 +2,7 @@
 * @Author: shuishen 1109946754@qq.com
 * @Date: 2022-09-07 09:37:07
 * @LastEditors: shuishen 1109946754@qq.com
 * @LastEditTime: 2022-10-31 08:59:05
 * @LastEditTime: 2022-11-12 10:23:57
 * @FilePath: \srs-police-affairs\vue.config.js
 * @Description: 
 * 
@@ -25,6 +25,14 @@
            scss: {
                prependData: `@import "~@/styles/scssFile.scss";`
            },
            postcss: {
                plugins: [   //配置px转rem进行适配
                    require('postcss-px2rem')({
                        // 根标签字号大小根据设计稿宽度/flexible.js里的份数得到，这里假定设计稿宽度为3840 3840/24 = 160px
                        remUnit: 80
                    }),
                ]
            }
        },
    },