From e7e44ac638195038347e0aca73d5192c8d6bd53a Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期五, 14 十月 2022 17:54:14 +0800
Subject: [PATCH] feat: 增加缩放组件 集成tailwind.css
---
src/assets/img/titles/zuo.png | 0
src/views/HomeView.vue | 33 +
src/assets/img/left_top_lan.png | 0
tailwind.config.js | 13
package-lock.json | 406 ++++++++++++++++++++++++++++
src/assets/img/headers/juxing1.png | 0
src/assets/img/xieyou.png | 0
src/views/index/index.vue | 8
src/assets/img/zuo_xuxian.png | 0
src/assets/img/headers/juxing2.png | 0
src/components/scale-screen/scale-screen.vue | 211 +++++++++++++++
src/views/header.vue | 108 +++++++
src/mock/mock-index.ts | 1
src/assets/img/left_top_hong.png | 0
src/assets/css/main.scss | 7
src/assets/img/top.png | 0
src/assets/img/pageBg.png | 0
src/assets/img/left_top_lv.png | 0
src/assets/img/titles/you.png | 0
src/assets/css/tailwind.css | 7
src/assets/img/xiezuo.png | 0
src/components/scale-screen/index.ts | 3
src/main.ts | 2
src/assets/img/frame.png | 0
src/assets/img/center_map.png | 0
package.json | 7
src/assets/img/left_top_huang.png | 0
src/assets/img/guang.png | 0
postcss.config.js | 6
29 files changed, 792 insertions(+), 20 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 49e14cc..b15f109 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 4b7bd7b..3999869 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..33ad091
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+}
diff --git a/src/assets/css/main.scss b/src/assets/css/main.scss
index e69de29..20f90dd 100644
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -0,0 +1,7 @@
+html,body{
+ height: 100%;
+ width: 100%;
+}
+#app{
+
+}
\ No newline at end of file
diff --git a/src/assets/css/tailwind.css b/src/assets/css/tailwind.css
new file mode 100644
index 0000000..59a0dc6
--- /dev/null
+++ b/src/assets/css/tailwind.css
@@ -0,0 +1,7 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+/* @tailwind base;
+@tailwind components;
+@tailwind utilities; */
\ No newline at end of file
diff --git a/src/assets/img/center_map.png b/src/assets/img/center_map.png
new file mode 100644
index 0000000..71f4036
--- /dev/null
+++ b/src/assets/img/center_map.png
Binary files differ
diff --git a/src/assets/img/frame.png b/src/assets/img/frame.png
new file mode 100644
index 0000000..150ec5e
--- /dev/null
+++ b/src/assets/img/frame.png
Binary files differ
diff --git a/src/assets/img/guang.png b/src/assets/img/guang.png
new file mode 100644
index 0000000..3c49e9d
--- /dev/null
+++ b/src/assets/img/guang.png
Binary files differ
diff --git a/src/assets/img/headers/juxing1.png b/src/assets/img/headers/juxing1.png
new file mode 100644
index 0000000..36d901a
--- /dev/null
+++ b/src/assets/img/headers/juxing1.png
Binary files differ
diff --git a/src/assets/img/headers/juxing2.png b/src/assets/img/headers/juxing2.png
new file mode 100644
index 0000000..5c99bd7
--- /dev/null
+++ b/src/assets/img/headers/juxing2.png
Binary files differ
diff --git a/src/assets/img/left_top_hong.png b/src/assets/img/left_top_hong.png
new file mode 100644
index 0000000..e19a5e9
--- /dev/null
+++ b/src/assets/img/left_top_hong.png
Binary files differ
diff --git a/src/assets/img/left_top_huang.png b/src/assets/img/left_top_huang.png
new file mode 100644
index 0000000..5b12f88
--- /dev/null
+++ b/src/assets/img/left_top_huang.png
Binary files differ
diff --git a/src/assets/img/left_top_lan.png b/src/assets/img/left_top_lan.png
new file mode 100644
index 0000000..f60cdb8
--- /dev/null
+++ b/src/assets/img/left_top_lan.png
Binary files differ
diff --git a/src/assets/img/left_top_lv.png b/src/assets/img/left_top_lv.png
new file mode 100644
index 0000000..feb80ee
--- /dev/null
+++ b/src/assets/img/left_top_lv.png
Binary files differ
diff --git a/src/assets/img/pageBg.png b/src/assets/img/pageBg.png
new file mode 100644
index 0000000..d393f2b
--- /dev/null
+++ b/src/assets/img/pageBg.png
Binary files differ
diff --git a/src/assets/img/titles/you.png b/src/assets/img/titles/you.png
new file mode 100644
index 0000000..3877b31
--- /dev/null
+++ b/src/assets/img/titles/you.png
Binary files differ
diff --git a/src/assets/img/titles/zuo.png b/src/assets/img/titles/zuo.png
new file mode 100644
index 0000000..b3b355d
--- /dev/null
+++ b/src/assets/img/titles/zuo.png
Binary files differ
diff --git a/src/assets/img/top.png b/src/assets/img/top.png
new file mode 100644
index 0000000..50c0c9a
--- /dev/null
+++ b/src/assets/img/top.png
Binary files differ
diff --git a/src/assets/img/xieyou.png b/src/assets/img/xieyou.png
new file mode 100644
index 0000000..1744fae
--- /dev/null
+++ b/src/assets/img/xieyou.png
Binary files differ
diff --git a/src/assets/img/xiezuo.png b/src/assets/img/xiezuo.png
new file mode 100644
index 0000000..272249d
--- /dev/null
+++ b/src/assets/img/xiezuo.png
Binary files differ
diff --git a/src/assets/img/zuo_xuxian.png b/src/assets/img/zuo_xuxian.png
new file mode 100644
index 0000000..e54d037
--- /dev/null
+++ b/src/assets/img/zuo_xuxian.png
Binary files differ
diff --git a/src/components/scale-screen/index.ts b/src/components/scale-screen/index.ts
new file mode 100644
index 0000000..1097412
--- /dev/null
+++ b/src/components/scale-screen/index.ts
@@ -0,0 +1,3 @@
+import ScaleScreen from './scale-screen.vue'
+
+export default ScaleScreen
\ No newline at end of file
diff --git a/src/components/scale-screen/scale-screen.vue b/src/components/scale-screen/scale-screen.vue
new file mode 100644
index 0000000..4420bab
--- /dev/null
+++ b/src/components/scale-screen/scale-screen.vue
@@ -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>
diff --git a/src/main.ts b/src/main.ts
index 526339a..819a35c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,8 @@
import router from './router'
import '@/assets/css/main.scss'
+import '@/assets/css/tailwind.css'
+
//涓嶄娇鐢╩ock 璇锋敞閲婃帀
import { mockXHR } from "@/mock/index";
mockXHR()
diff --git a/src/mock/mock-index.ts b/src/mock/mock-index.ts
index b9ebfe2..0a5202f 100644
--- a/src/mock/mock-index.ts
+++ b/src/mock/mock-index.ts
@@ -1,4 +1,5 @@
import Mock from "mockjs";
+//澶勭悊璺緞浼犲弬
import {parameteUrl} from "@/utils/query-param"
//宸︿笂
export default [
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index fe23153..1372464 100644
--- a/src/views/HomeView.vue
+++ b/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>
\ No newline at end of file
+<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>
diff --git a/src/views/header.vue b/src/views/header.vue
new file mode 100644
index 0000000..8ffc87f
--- /dev/null
+++ b/src/views/header.vue
@@ -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>
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 6c1907c..6a624b0 100644
--- a/src/views/index/index.vue
+++ b/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>
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..92d854d
--- /dev/null
+++ b/tailwind.config.js
@@ -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: [],
+}
--
Gitblit v1.8.0