feat: 增加缩放组件 集成tailwind.css

刘嘉威

2022-10-14 e7e44ac638195038347e0aca73d5192c8d6bd53a

feat: 增加缩放组件 集成tailwind.css

 package-lock.json

@@ -23,6 +23,32 @@
      "dev": true,
      "optional": true
    },
    "@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
      "dev": true,
      "requires": {
        "@nodelib/fs.stat": "2.0.5",
        "run-parallel": "^1.1.9"
      }
    },
    "@nodelib/fs.stat": {
      "version": "2.0.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
      "dev": true
    },
    "@nodelib/fs.walk": {
      "version": "1.2.8",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
      "dev": true,
      "requires": {
        "@nodelib/fs.scandir": "2.1.5",
        "fastq": "^1.6.0"
      }
    },
    "@types/mockjs": {
      "version": "1.0.7",
      "resolved": "https://registry.npmjs.org/@types/mockjs/-/mockjs-1.0.7.tgz",
@@ -30,9 +56,9 @@
      "dev": true
    },
    "@types/node": {
      "version": "16.11.65",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-16.11.65.tgz",
      "integrity": "sha512-Vfz7wGMOr4jbQGiQHVJm8VjeQwM9Ya7mHe9LtQ264/Epf5n1KiZShOFqk++nBzw6a/ubgYdB9Od7P+MH/LjoWw==",
      "version": "18.8.5",
      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.5.tgz",
      "integrity": "sha512-Bq7G3AErwe5A/Zki5fdD3O6+0zDChhg671NfPjtIcbtzDNZTv4NPKMRFr7gtYPG7y+B8uTiNK4Ngd9T0FTar6Q==",
      "dev": true
    },
    "@vitejs/plugin-vue": {
@@ -232,6 +258,29 @@
      "integrity": "sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==",
      "dev": true
    },
    "acorn": {
      "version": "7.4.1",
      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
      "dev": true
    },
    "acorn-node": {
      "version": "1.8.2",
      "resolved": "https://registry.npmjs.org/acorn-node/-/acorn-node-1.8.2.tgz",
      "integrity": "sha512-8mt+fslDufLYntIoPAaIMUe/lrbrehIiwmR3t2k9LljIzoigEPF27eLk2hy8zSGzmR/ogr7zbRKINMo1u0yh5A==",
      "dev": true,
      "requires": {
        "acorn": "^7.0.0",
        "acorn-walk": "^7.0.0",
        "xtend": "^4.0.2"
      }
    },
    "acorn-walk": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz",
      "integrity": "sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==",
      "dev": true
    },
    "ansi-styles": {
      "version": "3.2.1",
      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@@ -251,10 +300,30 @@
        "picomatch": "^2.0.4"
      }
    },
    "arg": {
      "version": "5.0.2",
      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
      "dev": true
    },
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
    },
    "autoprefixer": {
      "version": "10.4.12",
      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.12.tgz",
      "integrity": "sha512-WrCGV9/b97Pa+jtwf5UGaRjgQIg7OK3D06GnoYoZNcG1Xb8Gt3EfuKjlhh9i/VtT16g6PYjZ69jdJ2g8FxSC4Q==",
      "dev": true,
      "requires": {
        "browserslist": "^4.21.4",
        "caniuse-lite": "^1.0.30001407",
        "fraction.js": "^4.2.0",
        "normalize-range": "^0.1.2",
        "picocolors": "^1.0.0",
        "postcss-value-parser": "^4.2.0"
      }
    },
    "axios": {
      "version": "1.1.2",
@@ -297,6 +366,18 @@
        "fill-range": "^7.0.1"
      }
    },
    "browserslist": {
      "version": "4.21.4",
      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz",
      "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==",
      "dev": true,
      "requires": {
        "caniuse-lite": "^1.0.30001400",
        "electron-to-chromium": "^1.4.251",
        "node-releases": "^2.0.6",
        "update-browserslist-db": "^1.0.9"
      }
    },
    "call-bind": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",
@@ -306,6 +387,18 @@
        "function-bind": "^1.1.1",
        "get-intrinsic": "^1.0.2"
      }
    },
    "camelcase-css": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
      "dev": true
    },
    "caniuse-lite": {
      "version": "1.0.30001419",
      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001419.tgz",
      "integrity": "sha512-aFO1r+g6R7TW+PNQxKzjITwLOyDhVRLjW0LcwS/HCZGUUKTGNp9+IwLC4xyDSZBygVL/mxaFR3HIV6wEKQuSzw==",
      "dev": true
    },
    "chalk": {
      "version": "2.4.2",
@@ -381,6 +474,12 @@
        "which": "^1.2.9"
      }
    },
    "cssesc": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
      "dev": true
    },
    "csstype": {
      "version": "2.6.21",
      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@@ -396,10 +495,39 @@
        "object-keys": "^1.1.1"
      }
    },
    "defined": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.1.tgz",
      "integrity": "sha512-hsBd2qSVCRE+5PmNdHt1uzyrFu5d3RwmFDKzyNZMFq/EwDNJF7Ee5+D5oEKF0hU6LhtoUF1macFvOe4AskQC1Q==",
      "dev": true
    },
    "delayed-stream": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="
    },
    "detective": {
      "version": "5.2.1",
      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
      "dev": true,
      "requires": {
        "acorn-node": "^1.8.2",
        "defined": "^1.0.0",
        "minimist": "^1.2.6"
      }
    },
    "didyoumean": {
      "version": "1.2.2",
      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
      "dev": true
    },
    "dlv": {
      "version": "1.1.3",
      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
      "dev": true
    },
    "echarts": {
      "version": "5.4.0",
@@ -409,6 +537,12 @@
        "tslib": "2.3.0",
        "zrender": "5.4.0"
      }
    },
    "electron-to-chromium": {
      "version": "1.4.282",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.282.tgz",
      "integrity": "sha512-Dki0WhHNh/br/Xi1vAkueU5mtIc9XLHcMKB6tNfQKk+kPG0TEUjRh5QEMAUbRp30/rYNMFD1zKKvbVzwq/4wmg==",
      "dev": true
    },
    "error-ex": {
      "version": "1.3.2",
@@ -632,6 +766,12 @@
      "dev": true,
      "optional": true
    },
    "escalade": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==",
      "dev": true
    },
    "escape-string-regexp": {
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
@@ -642,6 +782,28 @@
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
    },
    "fast-glob": {
      "version": "3.2.12",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
      "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==",
      "dev": true,
      "requires": {
        "@nodelib/fs.stat": "^2.0.2",
        "@nodelib/fs.walk": "^1.2.3",
        "glob-parent": "^5.1.2",
        "merge2": "^1.3.0",
        "micromatch": "^4.0.4"
      }
    },
    "fastq": {
      "version": "1.13.0",
      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
      "dev": true,
      "requires": {
        "reusify": "^1.0.4"
      }
    },
    "fill-range": {
      "version": "7.0.1",
@@ -666,6 +828,12 @@
        "combined-stream": "^1.0.8",
        "mime-types": "^2.1.12"
      }
    },
    "fraction.js": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
      "integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
      "dev": true
    },
    "fsevents": {
      "version": "2.3.2",
@@ -954,6 +1122,12 @@
      "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
      "dev": true
    },
    "lilconfig": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg==",
      "dev": true
    },
    "load-json-file": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-4.0.0.tgz",
@@ -989,6 +1163,22 @@
      "integrity": "sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==",
      "dev": true
    },
    "merge2": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
      "dev": true
    },
    "micromatch": {
      "version": "4.0.5",
      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
      "dev": true,
      "requires": {
        "braces": "^3.0.2",
        "picomatch": "^2.3.1"
      }
    },
    "mime-db": {
      "version": "1.52.0",
      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -1011,6 +1201,12 @@
        "brace-expansion": "^1.1.7"
      }
    },
    "minimist": {
      "version": "1.2.7",
      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.7.tgz",
      "integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
      "dev": true
    },
    "mockjs": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/mockjs/-/mockjs-1.1.0.tgz",
@@ -1028,6 +1224,12 @@
      "version": "1.0.5",
      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
      "dev": true
    },
    "node-releases": {
      "version": "2.0.6",
      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz",
      "integrity": "sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==",
      "dev": true
    },
    "normalize-package-data": {
@@ -1048,6 +1250,12 @@
      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
      "dev": true
    },
    "normalize-range": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
      "dev": true
    },
    "npm-run-all": {
      "version": "4.1.5",
      "resolved": "https://registry.npmjs.org/npm-run-all/-/npm-run-all-4.1.5.tgz",
@@ -1064,6 +1272,12 @@
        "shell-quote": "^1.6.1",
        "string.prototype.padend": "^3.0.0"
      }
    },
    "object-hash": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
      "dev": true
    },
    "object-inspect": {
      "version": "1.12.2",
@@ -1153,19 +1367,103 @@
      }
    },
    "postcss": {
      "version": "8.4.17",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.17.tgz",
      "integrity": "sha512-UNxNOLQydcOFi41yHNMcKRZ39NeXlr8AxGuZJsdub8vIb12fHzcq37DTU/QtbI6WLxNg2gF9Z+8qtRwTj1UI1Q==",
      "version": "8.4.18",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
      "integrity": "sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==",
      "requires": {
        "nanoid": "^3.3.4",
        "picocolors": "^1.0.0",
        "source-map-js": "^1.0.2"
      }
    },
    "postcss-import": {
      "version": "14.1.0",
      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
      "dev": true,
      "requires": {
        "postcss-value-parser": "^4.0.0",
        "read-cache": "^1.0.0",
        "resolve": "^1.1.7"
      }
    },
    "postcss-js": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
      "integrity": "sha512-77QESFBwgX4irogGVPgQ5s07vLvFqWr228qZY+w6lW599cRlK/HmnlivnnVUxkjHnCu4J16PDMHcH+e+2HbvTQ==",
      "dev": true,
      "requires": {
        "camelcase-css": "^2.0.1"
      }
    },
    "postcss-load-config": {
      "version": "3.1.4",
      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
      "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
      "dev": true,
      "requires": {
        "lilconfig": "^2.0.5",
        "yaml": "^1.10.2"
      }
    },
    "postcss-nested": {
      "version": "5.0.6",
      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
      "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
      "dev": true,
      "requires": {
        "postcss-selector-parser": "^6.0.6"
      }
    },
    "postcss-selector-parser": {
      "version": "6.0.10",
      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
      "dev": true,
      "requires": {
        "cssesc": "^3.0.0",
        "util-deprecate": "^1.0.2"
      }
    },
    "postcss-value-parser": {
      "version": "4.2.0",
      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
      "dev": true
    },
    "proxy-from-env": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
    },
    "queue-microtask": {
      "version": "1.2.3",
      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
      "dev": true
    },
    "quick-lru": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
      "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
      "dev": true
    },
    "read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
      "dev": true,
      "requires": {
        "pify": "^2.3.0"
      },
      "dependencies": {
        "pify": {
          "version": "2.3.0",
          "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
          "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
          "dev": true
        }
      }
    },
    "read-pkg": {
      "version": "3.0.0",
@@ -1209,6 +1507,12 @@
        "supports-preserve-symlinks-flag": "^1.0.0"
      }
    },
    "reusify": {
      "version": "1.0.4",
      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
      "dev": true
    },
    "rollup": {
      "version": "2.78.1",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.78.1.tgz",
@@ -1216,6 +1520,15 @@
      "dev": true,
      "requires": {
        "fsevents": "~2.3.2"
      }
    },
    "run-parallel": {
      "version": "1.2.0",
      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
      "dev": true,
      "requires": {
        "queue-microtask": "^1.2.2"
      }
    },
    "safe-regex-test": {
@@ -1379,6 +1692,53 @@
      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
      "dev": true
    },
    "tailwindcss": {
      "version": "3.1.8",
      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
      "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
      "dev": true,
      "requires": {
        "arg": "^5.0.2",
        "chokidar": "^3.5.3",
        "color-name": "^1.1.4",
        "detective": "^5.2.1",
        "didyoumean": "^1.2.2",
        "dlv": "^1.1.3",
        "fast-glob": "^3.2.11",
        "glob-parent": "^6.0.2",
        "is-glob": "^4.0.3",
        "lilconfig": "^2.0.6",
        "normalize-path": "^3.0.0",
        "object-hash": "^3.0.0",
        "picocolors": "^1.0.0",
        "postcss": "^8.4.14",
        "postcss-import": "^14.1.0",
        "postcss-js": "^4.0.0",
        "postcss-load-config": "^3.1.4",
        "postcss-nested": "5.0.6",
        "postcss-selector-parser": "^6.0.10",
        "postcss-value-parser": "^4.2.0",
        "quick-lru": "^5.1.1",
        "resolve": "^1.22.1"
      },
      "dependencies": {
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true
        },
        "glob-parent": {
          "version": "6.0.2",
          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
          "dev": true,
          "requires": {
            "is-glob": "^4.0.3"
          }
        }
      }
    },
    "to-regex-range": {
      "version": "5.0.1",
      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -1411,6 +1771,22 @@
        "which-boxed-primitive": "^1.0.2"
      }
    },
    "update-browserslist-db": {
      "version": "1.0.10",
      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz",
      "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==",
      "dev": true,
      "requires": {
        "escalade": "^3.1.1",
        "picocolors": "^1.0.0"
      }
    },
    "util-deprecate": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
      "dev": true
    },
    "validate-npm-package-license": {
      "version": "3.0.4",
      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -1422,9 +1798,9 @@
      }
    },
    "vite": {
      "version": "3.1.7",
      "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.7.tgz",
      "integrity": "sha512-5vCAmU4S8lyVdFCInu9M54f/g8qbOMakVw5xJ4pjoaDy5wgy9sLLZkGdSLN52dlsBqh0tBqxjaqqa8LgPqwRAA==",
      "version": "3.1.8",
      "resolved": "https://registry.npmjs.org/vite/-/vite-3.1.8.tgz",
      "integrity": "sha512-m7jJe3nufUbuOfotkntGFupinL/fmuTNuQmiVE7cH2IZMuf4UbfbGYMUT3jVWgGYuRVLY9j8NnrRqgw5rr5QTg==",
      "dev": true,
      "requires": {
        "esbuild": "^0.15.9",
@@ -1491,12 +1867,24 @@
        "is-symbol": "^1.0.3"
      }
    },
    "xtend": {
      "version": "4.0.2",
      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
      "dev": true
    },
    "yallist": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
      "dev": true
    },
    "yaml": {
      "version": "1.10.2",
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
      "dev": true
    },
    "zrender": {
      "version": "5.4.0",
      "resolved": "https://registry.npmjs.org/zrender/-/zrender-5.4.0.tgz",

 package.json

@@ -18,13 +18,16 @@
  },
  "devDependencies": {
    "@types/mockjs": "^1.0.7",
    "@types/node": "^16.11.56",
    "@types/node": "^18.8.5",
    "@vitejs/plugin-vue": "^3.0.3",
    "@vue/tsconfig": "^0.1.3",
    "autoprefixer": "^10.4.12",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.4.18",
    "sass": "^1.55.0",
    "tailwindcss": "^3.1.8",
    "typescript": "~4.7.4",
    "vite": "^3.0.9",
    "vite": "^3.1.8",
    "vue-tsc": "^0.40.7"
  }
}

 postcss.config.js

New file
@@ -0,0 +1,6 @@
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

 src/assets/css/main.scss

@@ -0,0 +1,7 @@
html,body{

    height: 100%;

    width: 100%;

}

#app{



}

 src/assets/css/tailwind.css

New file
@@ -0,0 +1,7 @@
@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";



/* @tailwind base;

@tailwind components;

@tailwind utilities; */

 src/assets/img/center_map.png

 src/assets/img/frame.png

 src/assets/img/guang.png

 src/assets/img/headers/juxing1.png

 src/assets/img/headers/juxing2.png

 src/assets/img/left_top_hong.png

 src/assets/img/left_top_huang.png

 src/assets/img/left_top_lan.png

 src/assets/img/left_top_lv.png

 src/assets/img/pageBg.png

 src/assets/img/titles/you.png

 src/assets/img/titles/zuo.png

 src/assets/img/top.png

 src/assets/img/xieyou.png

 src/assets/img/xiezuo.png

 src/assets/img/zuo_xuxian.png

 src/components/scale-screen/index.ts

New file
@@ -0,0 +1,3 @@
import ScaleScreen from './scale-screen.vue'



export default ScaleScreen

 src/components/scale-screen/scale-screen.vue

New file
@@ -0,0 +1,211 @@
<template>

  <section :style="{ ...styles.box, ...boxStyle }" class="v-screen-box">

    <div

      :style="{ ...styles.wrapper, ...wrapperStyle }"

      class="screen-wrapper"

      ref="screenWrapper"

    >

      <slot></slot>

    </div>

  </section>

</template>

<script lang="ts" setup>

import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";

import type { CSSProperties, PropType } from "vue";

/**

 * 防抖函数

 * @param {Function} fn

 * @param {number} delay

 * @returns {() => void}

 */

function debounce(fn: Function, delay: number): () => void {

  // let timer: NodeJS.Timeout;

  let timer: any;

  return function (...args: any[]): void {

    if (timer) clearTimeout(timer);

    timer = setTimeout(

      () => {

        typeof fn === "function" && fn.apply(null, args);

        clearTimeout(timer);

      },

      delay > 0 ? delay : 100

    );

  };

}



interface IState {

  originalWidth: string | number;

  originalHeight: string | number;

  width?: string | number;

  height?: string | number;

  observer: null | MutationObserver;

}

type IAutoScale =

  | boolean

  | {

      x?: boolean;

      y?: boolean;

    };

const props = defineProps({

  width: {

    type: [String, Number] as PropType<string | number>,

    default: 1920,

  },

  height: {

    type: [String, Number] as PropType<string | number>,

    default: 1080,

  },

  fullScreen: {

    type: Boolean as PropType<boolean>,

    default: false,

  },

  autoScale: {

    type: [Object, Boolean] as PropType<IAutoScale>,

    default: true,

  },

  delay: {

    type: Number as PropType<number>,

    default: 500,

  },

  boxStyle: {

    type: Object as PropType<CSSProperties>,

    default: () => ({}),

  },

  wrapperStyle: {

    type: Object as PropType<CSSProperties>,

    default: () => ({}),

  },

});



const state = reactive<IState>({

  width: 0,

  height: 0,

  originalWidth: 0,

  originalHeight: 0,

  observer: null,

});



const styles: Record<string, CSSProperties> = {

  box: {

    overflow: "hidden",

    backgroundSize: `100% 100%`,

    background: `#000`,

    width: `100vw`,

    height: `100vh`,

  },

  wrapper: {

    transitionProperty: `all`,

    transitionTimingFunction: `cubic-bezier(0.4, 0, 0.2, 1)`,

    transitionDuration: `500ms`,

    position: `relative`,

    overflow: `hidden`,

    zIndex: 100,

    transformOrigin: `left top`,

  },

};



const screenWrapper = ref<HTMLElement>();

/**

 * 初始化大屏容器宽高

 */

const initSize = () => {

  return new Promise<void>((resolve) => {

    nextTick(() => {

      // region 获取大屏真实尺寸

      if (props.width && props.height) {

        state.width = props.width;

        state.height = props.height;

      } else {

        state.width = screenWrapper.value?.clientWidth;

        state.height = screenWrapper.value?.clientHeight;

      }

      // endregion



      // region 获取画布尺寸

      if (!state.originalHeight || !state.originalWidth) {

        state.originalWidth = window.screen.width;

        state.originalHeight = window.screen.height;

      }

      // endregion

      resolve();

    });

  });

};



/**

 * 更新大屏容器宽高

 */

const updateSize = () => {

  if (state.width && state.height) {

    screenWrapper.value!.style.width = `${state.width}px`;

    screenWrapper.value!.style.height = `${state.height}px`;

  } else {

    screenWrapper.value!.style.width = `${state.originalWidth}px`;

    screenWrapper.value!.style.height = `${state.originalHeight}px`;

  }

};



const autoScale = (scale: number) => {

  if (!props.autoScale) return;

  const domWidth = screenWrapper.value!.clientWidth;

  const domHeight = screenWrapper.value!.clientHeight;

  const currentWidth = document.body.clientWidth;

  const currentHeight = document.body.clientHeight;

  screenWrapper.value!.style.transform = `scale(${scale},${scale})`;

  let mx = Math.max((currentWidth - domWidth * scale) / 2, 0);

  let my = Math.max((currentHeight - domHeight * scale) / 2, 0);

  if (typeof props.autoScale === "object") {

    !props.autoScale.x && (mx = 0);

    !props.autoScale.y && (my = 0);

  }

  screenWrapper.value!.style.margin = `${my}px ${mx}px`;

};

const updateScale = () => {

  // 获取真实视口尺寸

  const currentWidth = document.body.clientWidth;

  const currentHeight = document.body.clientHeight;

  // 获取大屏最终的宽高

  const realWidth = state.width || state.originalWidth;

  const realHeight = state.height || state.originalHeight;

  // 计算缩放比例

  const widthScale = currentWidth / +realWidth;

  const heightScale = currentHeight / +realHeight;

  // 若要铺满全屏，则按照各自比例缩放

  if (props.fullScreen) {

    screenWrapper.value!.style.transform = `scale(${widthScale},${heightScale})`;

    return false;

  }

  // 按照宽高最小比例进行缩放

  const scale = Math.min(widthScale, heightScale);

  autoScale(scale);

};



const onResize = debounce(async () => {

  await initSize();

  updateSize();

  updateScale();

}, props.delay);

const initMutationObserver = () => {

  const observer = (state.observer = new MutationObserver(() => {

    onResize();

  }));

  observer.observe(screenWrapper.value!, {

    attributes: true,

    attributeFilter: ["style"],

    attributeOldValue: true,

  });

};

onMounted(() => {

  nextTick(async () => {

    await initSize();

    updateSize();

    updateScale();

    window.addEventListener("resize", onResize);

    initMutationObserver();

  });

});

onUnmounted(() => {

  window.removeEventListener("resize", onResize);

  state.observer?.disconnect();

});

</script>


 src/main.ts

@@ -5,6 +5,8 @@
import router from './router'

import '@/assets/css/main.scss'
import '@/assets/css/tailwind.css'

//不使用mock 请注释掉
import { mockXHR } from "@/mock/index";
mockXHR()

 src/mock/mock-index.ts

@@ -1,4 +1,5 @@
import Mock from "mockjs";

//处理路径传参

import {parameteUrl} from "@/utils/query-param"

//左上

export default [


 src/views/HomeView.vue

@@ -1,14 +1,33 @@
<script setup lang="ts">
import { RouterView } from "vue-router";

import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
const wrapperStyle = {};
</script>

<template>
    <div>
    <RouterView />

  <scale-screen
    width="1920"
    height="1080"
    :delay="500"
    :fullScreen="false"
    :boxStyle="{ background: '#000' }"
    :wrapperStyle="wrapperStyle"
  >
    <div class="content_wrap">
      <Headers />
      <RouterView />
    </div>
  </scale-screen>
</template>
<style  lang="scss" scoped>

</style>
<style lang="scss" scoped>
.content_wrap {
  width: 100%;
  height: 100%;
  padding: 16px 16px 16px 16px;
  box-sizing: border-box;
  background-image: url("@/assets/img/pageBg.png");
  background-size: cover;
  background-position: center center;
}
</style>

 src/views/header.vue

New file
@@ -0,0 +1,108 @@
<script setup lang="ts">

import { reactive } from "vue";



const dateData = reactive({

  dateDay: null,

  dateYear: null,

  dateWeek: null,

  weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],

});



const showSetting = () => {};

</script>



<template>

  <div class="d-flex jc-center title_wrap">

    <div class="zuojuxing"></div>

    <div class="youjuxing"></div>

    <div class="guang"></div>

    <div class="d-flex jc-center">

      <div class="title">

        <span class="title-text">互联网设备可视化平台</span>

      </div>

    </div>

    <div class="timers">

      {{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}

      <i

        class="blq-icon-shezhi02"

        style="margin-left: 10px"

        @click="showSetting"

      ></i>

    </div>

  </div>

</template>



<style scoped lang="scss">

.title_wrap {

  height: 60px;

  background-image: url("../assets/img/top.png");

  background-size: cover;

  background-position: center center;

  position: relative;

  margin-bottom: 4px;



  .guang {

    position: absolute;

    bottom: -26px;

    background-image: url("../assets/img/guang.png");

    background-position: 80px center;

    width: 100%;

    height: 56px;

  }



  .zuojuxing,

  .youjuxing {

    position: absolute;

    top: -2px;

    width: 140px;

    height: 6px;

    background-image: url("../assets/img/headers/juxing1.png");

  }



  .zuojuxing {

    left: 11%;

  }



  .youjuxing {

    right: 11%;

    transform: rotate(180deg);

  }



  .timers {

    position: absolute;

    right: 0;

    top: 30px;

    font-size: 18px;

    display: flex;

    align-items: center;



    .blq-icon-shezhi02 {

      cursor: pointer;

    }

  }

}

.title {

  position: relative;

  // width: 500px;

  text-align: center;

  background-size: cover;

  color: transparent;

  height: 60px;

  line-height: 46px;



  .title-text {

    font-size: 38px;

    font-weight: 900;

    letter-spacing: 6px;

    width: 100%;

    background: linear-gradient(

      92deg,

      #0072ff 0%,

      #00eaff 48.8525390625%,

      #01aaff 100%

    );

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

  }

}

</style>


 src/views/index/index.vue

@@ -6,8 +6,12 @@
</script>



<template>

  <div class="">

  <div class="index">

  </div>

</template>



<style scoped lang="scss"></style>

<style scoped lang="scss">

.index{



}

</style>


 tailwind.config.js

New file
@@ -0,0 +1,13 @@
/** @type {import('tailwindcss').Config} */
// const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts}'],
  theme: {
    extend: {
      // fontFamily: {
      //   sans: ['"Inter var"', ...defaultTheme.fontFamily.sans],
      // },
    },
  },
  plugins: [],
}