From f7c5550bb1fcd34755433dcf2ecd7884f9f67d5e Mon Sep 17 00:00:00 2001 From: fanluyan <754122931@qq.com> Date: Mon, 3 Apr 2023 17:36:14 +0800 Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E9=A2=9C=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 152 +++++-- package.json | 6 +- src/assets/css/global.less | 27 ++ src/assets/css/theme.less | 76 ++-- src/components/common/Header.vue | 428 ++++++++++-------- src/components/common/Home.vue | 4 +- src/components/common/Sidebar.vue | 6 +- src/components/common/Tags.vue | 28 +- src/main.js | 69 ++- src/views/Login.vue | 188 ++++---- src/views/alarmHandling/index.vue | 4 +- src/views/components/carouselChart.vue | 2 +- .../userEquipment/lineInformation/index.vue | 2 +- .../towerInformation/components/towerSide.vue | 6 +- .../userEquipment/towerInformation/index.vue | 2 +- src/views/pictureRotation/index.vue | 33 +- src/views/realTimeMonitor/index.vue | 17 +- src/views/realTimeMonitor/paramArea.vue | 16 +- src/views/realTimeMonitor/picturemain.vue | 41 +- src/views/stritl/index.vue | 30 +- src/views/videoMonitor/index.vue | 2 +- vue.config.js | 11 + 22 files changed, 624 insertions(+), 526 deletions(-) create mode 100644 src/assets/css/global.less diff --git a/package-lock.json b/package-lock.json index f75a83f..08caf20 100644 --- a/package-lock.json +++ b/package-lock.json @@ -30,8 +30,10 @@ "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", - "less": "^4.0.0", - "less-loader": "^8.0.0", + "less": "^4.1.3", + "less-loader": "^11.1.0", + "style-resources-loader": "^1.5.0", + "vue-cli-plugin-style-resources-loader": "^0.1.5", "vue-template-compiler": "^2.6.14" } }, @@ -4135,11 +4137,14 @@ }, "node_modules/copy-anything": { "version": "2.0.6", - "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", "dev": true, "dependencies": { "is-what": "^3.14.1" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" } }, "node_modules/copy-webpack-plugin": { @@ -4994,7 +4999,7 @@ }, "node_modules/errno": { "version": "0.1.8", - "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "dev": true, "optional": true, @@ -6464,7 +6469,7 @@ }, "node_modules/image-size": { "version": "0.5.5", - "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", "dev": true, "optional": true, @@ -6671,7 +6676,7 @@ }, "node_modules/is-what": { "version": "3.14.1", - "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", "dev": true }, @@ -6889,7 +6894,7 @@ }, "node_modules/less": { "version": "4.1.3", - "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz", + "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz", "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==", "dev": true, "dependencies": { @@ -6914,15 +6919,19 @@ } }, "node_modules/less-loader": { - "version": "8.1.1", - "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-8.1.1.tgz", - "integrity": "sha512-K93jJU7fi3n6rxVvzp8Cb88Uy9tcQKfHlkoezHwKILXhlNYiRQl4yowLIkQqmBXOH/5I8yoKiYeIf781HGkW9g==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.0.tgz", + "integrity": "sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==", "dev": true, "dependencies": { "klona": "^2.0.4" }, "engines": { - "node": ">= 10.13.0" + "node": ">= 14.15.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" }, "peerDependencies": { "less": "^3.5.0 || ^4.0.0", @@ -6931,7 +6940,7 @@ }, "node_modules/less/node_modules/make-dir": { "version": "2.1.0", - "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", "dev": true, "optional": true, @@ -6945,7 +6954,7 @@ }, "node_modules/less/node_modules/semver": { "version": "5.7.1", - "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "optional": true, @@ -7610,7 +7619,7 @@ }, "node_modules/needle": { "version": "3.2.0", - "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz", "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==", "dev": true, "optional": true, @@ -7628,7 +7637,7 @@ }, "node_modules/needle/node_modules/debug": { "version": "3.2.7", - "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "optional": true, @@ -7638,7 +7647,7 @@ }, "node_modules/needle/node_modules/iconv-lite": { "version": "0.6.3", - "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", "dev": true, "optional": true, @@ -8093,7 +8102,7 @@ }, "node_modules/parse-node-version": { "version": "1.0.1", - "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", "dev": true, "engines": { @@ -8204,7 +8213,7 @@ }, "node_modules/pify": { "version": "4.0.1", - "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "dev": true, "optional": true, @@ -8887,7 +8896,7 @@ }, "node_modules/prr": { "version": "1.0.1", - "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", "dev": true, "optional": true @@ -9262,7 +9271,7 @@ }, "node_modules/sax": { "version": "1.2.4", - "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true @@ -9799,6 +9808,38 @@ "node": ">=8" } }, + "node_modules/style-resources-loader": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.5.0.tgz", + "integrity": "sha512-fIfyvQ+uvXaCBGGAgfh+9v46ARQB1AWdaop2RpQw0PBVuROsTBqGvx8dj0kxwjGOAyq3vepe4AOK3M6+Q/q2jw==", + "dev": true, + "dependencies": { + "glob": "^7.2.0", + "loader-utils": "^2.0.0", + "schema-utils": "^2.7.0", + "tslib": "^2.3.1" + }, + "engines": { + "node": ">=8.9" + }, + "peerDependencies": { + "webpack": "^3.0.0 || ^4.0.0 || ^5.0.0" + } + }, + "node_modules/style-resources-loader/node_modules/loader-utils": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz", @@ -10334,6 +10375,12 @@ "npm": ">= 3.0.0" } }, + "node_modules/vue-cli-plugin-style-resources-loader": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz", + "integrity": "sha512-LluhjWTZmpGl3tiXg51EciF+T70IN/9t6UvfmgluJBqxbrb6OV9i7L5lTd+OKtcTeghDkhcBmYhtTxxU4w/8sQ==", + "dev": true + }, "node_modules/vue-eslint-parser": { "version": "8.3.0", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", @@ -14481,7 +14528,7 @@ }, "copy-anything": { "version": "2.0.6", - "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz", "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==", "dev": true, "requires": { @@ -15164,7 +15211,7 @@ }, "errno": { "version": "0.1.8", - "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz", + "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz", "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==", "dev": true, "optional": true, @@ -16332,7 +16379,7 @@ }, "image-size": { "version": "0.5.5", - "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz", "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==", "dev": true, "optional": true @@ -16485,7 +16532,7 @@ }, "is-what": { "version": "3.14.1", - "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz", "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==", "dev": true }, @@ -16664,7 +16711,7 @@ }, "less": { "version": "4.1.3", - "resolved": "https://registry.npmmirror.com/less/-/less-4.1.3.tgz", + "resolved": "https://registry.npmjs.org/less/-/less-4.1.3.tgz", "integrity": "sha512-w16Xk/Ta9Hhyei0Gpz9m7VS8F28nieJaL/VyShID7cYvP6IL5oHeL6p4TXSDJqZE/lNv0oJ2pGVjJsRkfwm5FA==", "dev": true, "requires": { @@ -16682,7 +16729,7 @@ "dependencies": { "make-dir": { "version": "2.1.0", - "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz", + "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", "dev": true, "optional": true, @@ -16693,7 +16740,7 @@ }, "semver": { "version": "5.7.1", - "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz", + "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, "optional": true @@ -16701,9 +16748,9 @@ } }, "less-loader": { - "version": "8.1.1", - "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-8.1.1.tgz", - "integrity": "sha512-K93jJU7fi3n6rxVvzp8Cb88Uy9tcQKfHlkoezHwKILXhlNYiRQl4yowLIkQqmBXOH/5I8yoKiYeIf781HGkW9g==", + "version": "11.1.0", + "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-11.1.0.tgz", + "integrity": "sha512-C+uDBV7kS7W5fJlUjq5mPBeBVhYpTIm5gB09APT9o3n/ILeaXVsiSFTbZpTJCJwQ/Crczfn3DmfQFwxYusWFug==", "dev": true, "requires": { "klona": "^2.0.4" @@ -17241,7 +17288,7 @@ }, "needle": { "version": "3.2.0", - "resolved": "https://registry.npmmirror.com/needle/-/needle-3.2.0.tgz", + "resolved": "https://registry.npmjs.org/needle/-/needle-3.2.0.tgz", "integrity": "sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==", "dev": true, "optional": true, @@ -17253,7 +17300,7 @@ "dependencies": { "debug": { "version": "3.2.7", - "resolved": "https://registry.npmmirror.com/debug/-/debug-3.2.7.tgz", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "optional": true, @@ -17263,7 +17310,7 @@ }, "iconv-lite": { "version": "0.6.3", - "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", "dev": true, "optional": true, @@ -17623,7 +17670,7 @@ }, "parse-node-version": { "version": "1.0.1", - "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz", "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==", "dev": true }, @@ -17715,7 +17762,7 @@ }, "pify": { "version": "4.0.1", - "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz", + "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "dev": true, "optional": true @@ -18172,7 +18219,7 @@ }, "prr": { "version": "1.0.1", - "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz", + "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz", "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==", "dev": true, "optional": true @@ -18480,7 +18527,7 @@ }, "sax": { "version": "1.2.4", - "resolved": "https://registry.npmmirror.com/sax/-/sax-1.2.4.tgz", + "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", "dev": true, "optional": true @@ -18940,6 +18987,31 @@ "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==", "dev": true }, + "style-resources-loader": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/style-resources-loader/-/style-resources-loader-1.5.0.tgz", + "integrity": "sha512-fIfyvQ+uvXaCBGGAgfh+9v46ARQB1AWdaop2RpQw0PBVuROsTBqGvx8dj0kxwjGOAyq3vepe4AOK3M6+Q/q2jw==", + "dev": true, + "requires": { + "glob": "^7.2.0", + "loader-utils": "^2.0.0", + "schema-utils": "^2.7.0", + "tslib": "^2.3.1" + }, + "dependencies": { + "loader-utils": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", + "dev": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + } + } + }, "stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz", @@ -19352,6 +19424,12 @@ "swiper": "^4.0.7" } }, + "vue-cli-plugin-style-resources-loader": { + "version": "0.1.5", + "resolved": "https://registry.npmjs.org/vue-cli-plugin-style-resources-loader/-/vue-cli-plugin-style-resources-loader-0.1.5.tgz", + "integrity": "sha512-LluhjWTZmpGl3tiXg51EciF+T70IN/9t6UvfmgluJBqxbrb6OV9i7L5lTd+OKtcTeghDkhcBmYhtTxxU4w/8sQ==", + "dev": true + }, "vue-eslint-parser": { "version": "8.3.0", "resolved": "https://registry.npmmirror.com/vue-eslint-parser/-/vue-eslint-parser-8.3.0.tgz", diff --git a/package.json b/package.json index e926f36..73c6e00 100644 --- a/package.json +++ b/package.json @@ -30,8 +30,10 @@ "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", - "less": "^4.0.0", - "less-loader": "^8.0.0", + "less": "^4.1.3", + "less-loader": "^11.1.0", + "style-resources-loader": "^1.5.0", + "vue-cli-plugin-style-resources-loader": "^0.1.5", "vue-template-compiler": "^2.6.14" }, "eslintConfig": { diff --git a/src/assets/css/global.less b/src/assets/css/global.less new file mode 100644 index 0000000..b26bacd --- /dev/null +++ b/src/assets/css/global.less @@ -0,0 +1,27 @@ +//Brand @color +@color-primary: #409eff; +@color-primary-light: mix(@color-white, @color-primary, 80%); +@color-primary-lighter: mix(@color-white, @color-primary, 90%); +//Functional @color +@color-success: #67c23a; +@color-warning: #e6a23c; +@color-danger: #f56c6c; +@color-info: #909399; +@color-red: #f00; +//Font color +@color-text-primary: #303133; +@color-text-regular: #606266; +@color-text-secondary: #909399; +@color-text-placeholder: #c0c4cc; +//Border color +@border-color-base: #dcdfe6; +@border-color-light: #e4e7ed; +@border-color-lighter: #ebeef5; +@border-color-extra-light: #f2f6fc; +//Background color +@color-white: #ffffff; +@color-black: #000000; +@background-color-base: #f5f7fa; + +//阴影 +@box-shadow-basic: 0 2px 12px 0 rgba(0, 0, 0, 0.1); diff --git a/src/assets/css/theme.less b/src/assets/css/theme.less index f4920cb..8a63793 100644 --- a/src/assets/css/theme.less +++ b/src/assets/css/theme.less @@ -8,26 +8,26 @@ background: #20a0ff; i { - color: #fff !important; + color: @color-white !important; } .el-menu-item { - color: #fff; + color: @color-white; } .el-menu-item.is-active { - color: #fff; + color: @color-white; } .el-submenu .el-submenu__title { - color: #fff; + color: @color-white; } .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover { color: #20a0ff; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #20a0ff !important; @@ -37,8 +37,8 @@ .el-submenu:focus .el-submenu__title, .el-submenu:hover .el-submenu__title { color: #20a0ff !important; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #20a0ff !important; @@ -46,7 +46,7 @@ } .el-submenu.is-active .el-submenu__title { - color: #fff; + color: @color-white; } } @@ -57,8 +57,6 @@ } } - - //红色主题 .redStyle { .header { @@ -69,26 +67,26 @@ background: #EE320C; i { - color: #fff !important; + color: @color-white !important; } .el-menu-item { - color: #fff; + color: @color-white; } .el-menu-item.is-active { - color: #fff; + color: @color-white; } .el-submenu .el-submenu__title { - color: #fff; + color: @color-white; } .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover { color: #EE320C; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #EE320C !important; @@ -98,8 +96,8 @@ .el-submenu:focus .el-submenu__title, .el-submenu:hover .el-submenu__title { color: #EE320C !important; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #EE320C !important; @@ -107,7 +105,7 @@ } .el-submenu.is-active .el-submenu__title { - color: #fff; + color: @color-white; } } @@ -137,26 +135,26 @@ background: #25EE28; i { - color: #fff !important; + color: @color-white !important; } .el-menu-item { - color: #fff; + color: @color-white; } .el-menu-item.is-active { - color: #fff; + color: @color-white; } .el-submenu .el-submenu__title { - color: #fff; + color: @color-white; } .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover { color: #25EE28; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #25EE28 !important; @@ -166,8 +164,8 @@ .el-submenu:focus .el-submenu__title, .el-submenu:hover .el-submenu__title { color: #25EE28 !important; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #25EE28 !important; @@ -175,7 +173,7 @@ } .el-submenu.is-active .el-submenu__title { - color: #fff; + color: @color-white; } } @@ -200,31 +198,30 @@ .header { background: #f08200; } - .el-menu { background: #f08200; i { - color: #fff !important; + color: @color-white !important; } .el-menu-item { - color: #fff; + color: @color-white; } .el-menu-item.is-active { - color: #fff; + color: @color-white; } .el-submenu .el-submenu__title { - color: #fff; + color: @color-white; } .el-menu-item:not(.is-disabled):focus, .el-menu-item:not(.is-disabled):hover { color: #f08200; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #f08200 !important; @@ -234,8 +231,8 @@ .el-submenu:focus .el-submenu__title, .el-submenu:hover .el-submenu__title { color: #f08200 !important; - background-color: #fff; - border-bottom: 2px solid #fff; + background-color: @color-white; + border-bottom: 2px solid @color-white; i { color: #f08200 !important; @@ -243,11 +240,10 @@ } .el-submenu.is-active .el-submenu__title { - color: #fff; + color: @color-white; } } - .sidebar .el-menu--horizontal .el-menu-item.is-active i { color: #f08200; } diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue index de2a4fc..ed334d1 100644 --- a/src/components/common/Header.vue +++ b/src/components/common/Header.vue @@ -1,221 +1,259 @@ diff --git a/src/components/common/Home.vue b/src/components/common/Home.vue index feb28f4..2215288 100644 --- a/src/components/common/Home.vue +++ b/src/components/common/Home.vue @@ -59,15 +59,13 @@ export default { //padding-bottom: 30px; -webkit-transition: left 0.3s ease-in-out; transition: left 0.3s ease-in-out; - background: #f0f0f0; + background: @background-color-base; .content { width: 100%; height: calc(100% - 48px); padding: 10px; overflow-y: auto; box-sizing: border-box; - //background: #fff; - //background: url(../../assets/background.jpg); } } diff --git a/src/components/common/Sidebar.vue b/src/components/common/Sidebar.vue index 7963c54..d0812dd 100644 --- a/src/components/common/Sidebar.vue +++ b/src/components/common/Sidebar.vue @@ -261,16 +261,16 @@ export default { font-size: 16px; } .el-menu-item i { - color: #bfcbd9; + color: @color-text-secondary; } .el-menu-item.is-active { i { - color: #20a0ff; + color: @color-primary; } } .el-submenu.is-active .el-submenu__title > i { &:first-child { - color: #20a0ff; + color: @color-primary; } } } diff --git a/src/components/common/Tags.vue b/src/components/common/Tags.vue index b7da2d4..3b75a57 100644 --- a/src/components/common/Tags.vue +++ b/src/components/common/Tags.vue @@ -115,9 +115,9 @@ export default { position: relative; height: 48px; overflow: hidden; - background: #fff; + background: @color-white; padding-right: 120px; - box-shadow: 0 5px 10px #ddd; + box-shadow: 0 5px 10px @border-color-light; } .tags ul { @@ -135,26 +135,26 @@ export default { cursor: pointer; height: 24px; line-height: 24px; - border: 1px solid #e9eaec; - background: #fff; + border: 1px solid @border-color-base; + background: @color-white; padding: 0 5px 0 12px; vertical-align: middle; - color: #666; + color: @color-text-regular; -webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; transition: all 0.3s ease-in; } .tags-li:not(.active):hover { - background: #f8f8f8; + background: @border-color-extra-light; } .tags-li.active { - color: #fff; + color: @color-white; } .tags-li.active { - border: 1px solid #409eff; - background-color: #409eff; + border: 1px solid @color-primary; + background-color: @color-primary; } .tags-li-title { float: left; @@ -163,16 +163,16 @@ export default { white-space: nowrap; text-overflow: ellipsis; margin-right: 5px; - color: #666; + color: @color-text-regular; i { margin-right: 4px; } } .tags-li.active .tags-li-title { - color: #fff; + color: @color-white; i { - color: #fff; + color: @color-white; } } @@ -185,8 +185,8 @@ export default { text-align: center; width: 110px; height: 30px; - background: #fff; - box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1); + background: @color-white; + box-shadow: @box-shadow-basic; z-index: 10; } diff --git a/src/main.js b/src/main.js index 821ceca..6caa141 100644 --- a/src/main.js +++ b/src/main.js @@ -1,57 +1,56 @@ -import Vue from 'vue' -import App from './App.vue' -import router from './router' -import store from './store' +import Vue from "vue"; +import App from "./App.vue"; +import router from "./router"; +import store from "./store"; //引入element-ui -import ElementUI from 'element-ui'; -import 'element-ui/lib/theme-chalk/index.css' +import ElementUI from "element-ui"; +import "element-ui/lib/theme-chalk/index.css"; Vue.use(ElementUI, { - size: 'small' + size: "small", }); // 引入Echarts -import * as echarts from 'echarts' -Vue.prototype.$echarts = echarts - +import * as echarts from "echarts"; +Vue.prototype.$echarts = echarts; // 引入 vue-awesome-swiper -import VueAwesomeSwiper from 'vue-awesome-swiper' +import VueAwesomeSwiper from "vue-awesome-swiper"; //引入 vue-awesome-swiper 样式 -import 'swiper/dist/css/swiper.css' -Vue.use(VueAwesomeSwiper, /* { 全局组件的默认选项 } */) - +import "swiper/dist/css/swiper.css"; +Vue.use(VueAwesomeSwiper /* { 全局组件的默认选项 } */); -import './assets/css/reset.css'; //默认样式 -import './assets/css/theme.less'; //修改主题颜色 +import "./assets/css/reset.css"; //默认样式 +import "./assets/css/theme.less"; //修改主题颜色 +import "./assets/css/global.less"; -Vue.config.productionTip = false +Vue.config.productionTip = false; new Vue({ router, store, - render: h => h(App) -}).$mount('#app') + render: (h) => h(App), +}).$mount("#app"); //使用钩子函数对路由进行权限跳转 router.beforeEach((to, from, next) => { document.title = `${to.meta.title} | 可视化智能管控系统`; - const role = localStorage.getItem('ms_username'); - if (!role && to.path !== '/login') { - next('/login'); + const role = localStorage.getItem("ms_username"); + if (!role && to.path !== "/login") { + next("/login"); } else if (to.meta.permission) { - console.log(to.meta.permission) - console.log(role) - // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已 - role === 'admin' ? next() : next('/403'); + console.log(to.meta.permission); + console.log(role); + // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已 + role === "admin" ? next() : next("/403"); } else { - next(); - // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容 - // if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') { - // Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', { - // confirmButtonText: '确定' - // }); - // } else { - // next(); - // } + next(); + // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容 + // if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') { + // Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看', '浏览器不兼容通知', { + // confirmButtonText: '确定' + // }); + // } else { + // next(); + // } } }); diff --git a/src/views/Login.vue b/src/views/Login.vue index 38da445..dc7a6bd 100644 --- a/src/views/Login.vue +++ b/src/views/Login.vue @@ -1,86 +1,89 @@ - \ No newline at end of file + diff --git a/src/views/alarmHandling/index.vue b/src/views/alarmHandling/index.vue index 42354a9..81eca99 100644 --- a/src/views/alarmHandling/index.vue +++ b/src/views/alarmHandling/index.vue @@ -157,7 +157,7 @@ export default { .alarmHandBox { width: 100%; height: 100%; - background: #fff; + background: @color-white; .alarmTop { padding: 16px 8px; } @@ -188,7 +188,7 @@ export default { } .editorBtn { margin-top: 8px; - border: 1px solid #e4e7ed; + border: 1px solid @border-color-base; padding: 2%; border-radius: 4px; } diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue index d041542..ade09cc 100644 --- a/src/views/components/carouselChart.vue +++ b/src/views/components/carouselChart.vue @@ -141,7 +141,7 @@ export default { // opacity: 0.4; } .gallery-thumbs .swiper-slide-active { - border: 3px solid #409eff; + border: 3px solid @color-primary; } diff --git a/src/views/management/userEquipment/lineInformation/index.vue b/src/views/management/userEquipment/lineInformation/index.vue index 3f5d677..12c2f2e 100644 --- a/src/views/management/userEquipment/lineInformation/index.vue +++ b/src/views/management/userEquipment/lineInformation/index.vue @@ -134,7 +134,7 @@ export default { .lineInformation { width: 100%; height: 100%; - background: #fff; + background: @color-white; .lineBtnGroup { padding: 16px 8px; } diff --git a/src/views/management/userEquipment/towerInformation/components/towerSide.vue b/src/views/management/userEquipment/towerInformation/components/towerSide.vue index 4a96b30..5ca5e37 100644 --- a/src/views/management/userEquipment/towerInformation/components/towerSide.vue +++ b/src/views/management/userEquipment/towerInformation/components/towerSide.vue @@ -59,7 +59,7 @@ export default { .towerSide { width: 234px; height: 100%; - border-right: 1px solid #eee; + border-right: 1px solid @border-color-base; // 修改选中的样式 .el-tree { .el-tree-node__content { @@ -67,8 +67,8 @@ export default { } } .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { - background-color: #409eff; - color: #fff; + background-color: @color-primary; + color: @color-white; } } \ No newline at end of file diff --git a/src/views/management/userEquipment/towerInformation/index.vue b/src/views/management/userEquipment/towerInformation/index.vue index 138dc1d..f28a5da 100644 --- a/src/views/management/userEquipment/towerInformation/index.vue +++ b/src/views/management/userEquipment/towerInformation/index.vue @@ -16,6 +16,6 @@ export default { display: flex; height: 100%; width: 100%; - background: #fff; + background: @color-white; } \ No newline at end of file diff --git a/src/views/pictureRotation/index.vue b/src/views/pictureRotation/index.vue index 11394a0..f2aaa9c 100644 --- a/src/views/pictureRotation/index.vue +++ b/src/views/pictureRotation/index.vue @@ -141,37 +141,14 @@ export default { .picRotation { height: calc(100% - 8px); width: 100%; - background: #fff; + background: @color-white; //background: #fcc; .picHead { display: flex; align-items: center; justify-content: space-between; padding: 8px 0px; - // .pageNation { - // color: #00cdfc !important; - // .el-pagination__total, - // .el-pagination__jump { - // color: #00cdfc; - // } - // .el-pagination { - // .el-pager li { - // background: transparent; - // color: #00cdfc; - // &:hover { - // background: center center no-repeat #fff; - // } - // } - // .btn-next, - // .btn-prev { - // background: center center no-repeat transparent; - // color: #00cdfc; - // &:hover { - // background: center center no-repeat #fff; - // } - // } - // } - // } + .buttonGroup { display: flex; .el-select { @@ -186,7 +163,7 @@ export default { b { font-size: 24px; font-weight: normal; - color: #59b9c6; + color: @color-success; vertical-align: middle; } } @@ -220,7 +197,7 @@ export default { left: 0px; font-size: 15px; background-color: #3a87ad !important; - color: #fff; + color: @color-white; font-weight: normal; margin-top: 2px; padding-left: 5px; @@ -229,7 +206,7 @@ export default { .infoBottom { position: absolute; bottom: 4px; - color: #fff; + color: @color-white; left: 0px; font-size: 15px; background-color: #51b17c !important; diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue index b2983f3..31e3be4 100644 --- a/src/views/realTimeMonitor/index.vue +++ b/src/views/realTimeMonitor/index.vue @@ -104,26 +104,19 @@ export default { .monitor-container { display: flex; height: 100%; - border: 1px solid #e4e7ed; + border: 1px solid @border-color-base; box-sizing: border-box; - background: #fff; + background: @color-white; .sideBar { width: 300px; - border-right: 1px solid #e4e7ed; + border-right: 1px solid @border-color-base; overflow: auto; .el-tree { - //background: transparent; - //color: #409eff; + .el-tree-node__content { height: 40px; } - // .is-current { - // background-color: #256eb1; - // } - // .el-tree-node__content:hover, - // .el-upload-list__item:hover { - // background-color: #256eb1; - // } + } } .picSetBox { diff --git a/src/views/realTimeMonitor/paramArea.vue b/src/views/realTimeMonitor/paramArea.vue index 0856e21..92aa3f0 100644 --- a/src/views/realTimeMonitor/paramArea.vue +++ b/src/views/realTimeMonitor/paramArea.vue @@ -159,7 +159,7 @@ export default { display: flex; flex-wrap: wrap; justify-content: space-between; - border: 1px solid #e4e7ed; + border: 1px solid @border-color-base; //padding-top: 16px; position: relative; padding: 24px 16px 16px 16px; @@ -170,7 +170,7 @@ export default { top: -14px; left: 7px; background: transparent; - color: #666; + color: @color-text-regular; } .el-button { width: 84px; @@ -181,17 +181,7 @@ export default { .el-button + .el-button { margin-left: 0px; } - // .el-button { - // color: #666; - // background: #256eb1; - // border-color: #256eb1; - // } - // .el-button--primary:focus, - // .el-button--primary:hover { - // background: #66b1ff; - // border-color: #66b1ff; - // color: #666; - // } + } } \ No newline at end of file diff --git a/src/views/realTimeMonitor/picturemain.vue b/src/views/realTimeMonitor/picturemain.vue index 6011b16..c2c2cbb 100644 --- a/src/views/realTimeMonitor/picturemain.vue +++ b/src/views/realTimeMonitor/picturemain.vue @@ -114,21 +114,21 @@ export default { h3 { font-size: 24px; line-height: 30px; - color: #606266; + color: @color-text-regular; } .total span { - color: #999; + color: @color-text-secondary; font-size: 14px; line-height: 30px; } } .picmain { - border: 1px solid #e4e7ed; + border: 1px solid @border-color-base; .photosPic { padding-bottom: 12px; - border-bottom: 1px solid #e4e7ed; + border-bottom: 1px solid @border-color-base; &:last-child { - border-bottom: 0px solid #e4e7ed; + border-bottom: 0px solid @border-color-base; } .topTitle { display: flex; @@ -138,13 +138,13 @@ export default { padding: 0 10px; display: inline-block; line-height: 45px; - color: #606266; + color: @color-text-regular; font-size: 16px; font-weight: bold; } .iconList { i { - color: #999; + color: @color-text-secondary; margin-right: 12px; font-size: 28px; } @@ -167,9 +167,9 @@ export default { position: absolute; top: 0; left: 0; - background: #0683cc; + background: @color-primary; display: inline-block; - color: #fff; + color: @color-white; font-size: 14px; padding: 4px; } @@ -179,28 +179,7 @@ export default { } .page { margin-top: 16px; - // color: #999 !important; - // .el-pagination__total, - // .el-pagination__jump { - // color: #999; - // } - // .el-pagination { - // .el-pager li { - // background: transparent; - // color: #999; - // &:hover { - // background: center center no-repeat #fff; - // } - // } - // .btn-next, - // .btn-prev { - // background: center center no-repeat transparent; - // color: #999; - // &:hover { - // background: center center no-repeat #fff; - // } - // } - // } + } } \ No newline at end of file diff --git a/src/views/stritl/index.vue b/src/views/stritl/index.vue index 14a126c..b2f32db 100644 --- a/src/views/stritl/index.vue +++ b/src/views/stritl/index.vue @@ -306,7 +306,6 @@ export default { .stritl_right { width: 20%; margin: 8px; - //background-color: lightpink; } .stritl_left, .stritl_right { @@ -318,9 +317,9 @@ export default { .strLeftBottom { height: 30%; box-sizing: content-box; - box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); - border: 1px solid #ebeef5; - background-color: #fff; + box-shadow:@box-shadow-basic; + border: 1px solid @border-color-base; + background-color: @color-white; border-radius: 4px; padding: 8px; h3 { @@ -332,9 +331,9 @@ export default { .strRightBottom { height: 46%; box-sizing: content-box; - box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); - border: 1px solid #ebeef5; - background-color: #fff; + box-shadow:@box-shadow-basic; + border: 1px solid @border-color-base; + background-color: @color-white; border-radius: 4px; padding: 8px; h3 { @@ -369,7 +368,7 @@ export default { margin-bottom: 8px; span { font-size: 16px; - color: #f00; + color: @color-red; } } .info { @@ -388,16 +387,14 @@ export default { .stritl_center { flex: 1; margin: 10px; - //background-color: lightgreen; display: flex; flex-direction: column; .strCenterTop { flex: 1; - box-sizing: content-box; - box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); - border: 1px solid #ebeef5; - background-color: #fff; + box-shadow:@box-shadow-basic; + border: 1px solid @border-color-base; + background-color: @color-white; border-radius: 4px; //padding: 8px; } @@ -408,16 +405,15 @@ export default { box-sizing: content-box; display: flex; justify-content: space-between; - .bottomL, .bottomM, .bottomR { border: 1px solid #000; box-sizing: content-box; width: 30%; - box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%); - border: 1px solid #ebeef5; - background-color: #fff; + box-shadow:@box-shadow-basic; + border: 1px solid @border-color-base; + background-color: @color-white; border-radius: 4px; padding: 8px; h3 { diff --git a/src/views/videoMonitor/index.vue b/src/views/videoMonitor/index.vue index 2264a9b..bb97479 100644 --- a/src/views/videoMonitor/index.vue +++ b/src/views/videoMonitor/index.vue @@ -8,7 +8,7 @@