From a191ee0f495760168aa776590793e72c9ecbda0d Mon Sep 17 00:00:00 2001
From: 刘嘉威 <daidaibg@163.com>
Date: 星期一, 24 十月 2022 15:56:08 +0800
Subject: [PATCH] perf: 增加设置弹窗 可设置是否进行自适应
---
src/views/HomeView.vue | 13 +
/dev/null | 12 -
src/views/setting.vue | 101 +++++++++++++
package-lock.json | 159 +++++++++++-----------
components.d.ts | 4
src/components/scale-screen/scale-screen.vue | 51 ++++++-
package.json | 10
src/views/header.vue | 24 ++-
src/assets/img/headers/setting.png | 0
src/stores/index.ts | 1
src/stores/setting/setting.ts | 28 ++++
11 files changed, 282 insertions(+), 121 deletions(-)
diff --git a/components.d.ts b/components.d.ts
index fe6213f..54829db 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,10 @@
declare module '@vue/runtime-core' {
export interface GlobalComponents {
CountUp: typeof import('./src/components/count-up/count-up.vue')['default']
+ ElButton: typeof import('element-plus/es')['ElButton']
+ ElDrawer: typeof import('element-plus/es')['ElDrawer']
+ ElRadio: typeof import('element-plus/es')['ElRadio']
+ ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ItemWrap: typeof import('./src/components/item-wrap/item-wrap.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
diff --git a/package-lock.json b/package-lock.json
index 436dd41..7341b77 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -113,9 +113,9 @@
"dev": true
},
"@types/node": {
- "version": "18.8.0",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-18.8.0.tgz",
- "integrity": "sha512-u+h43R6U8xXDt2vzUaVP3VwjjLyOJk6uEciZS8OSyziUQGOwmk+l+4drxcsDboHXwyTaqS1INebghmWMRxq3LA==",
+ "version": "18.11.4",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.4.tgz",
+ "integrity": "sha512-BxcJpBu8D3kv/GZkx/gSMz6VnTJREBj/4lbzYOQueUOELkt8WrO6zAcSPmp9uRPEW/d+lUO8QK0W2xnS1hEU0A==",
"dev": true
},
"@types/web-bluetooth": {
@@ -130,42 +130,42 @@
"dev": true
},
"@volar/language-core": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.0.8.tgz",
- "integrity": "sha512-uxYSOqBk8ZFSzGjUIPOBEFPOg8F3CE6cLO5meK95DODGIlUlPytGiy9sy8QZ9w7RpUH4XMOX3MH/G48SLgP07A==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@volar/language-core/-/language-core-1.0.9.tgz",
+ "integrity": "sha512-5Fty3slLet6svXiJw2YxhYeo6c7wFdtILrql5bZymYLM+HbiZtJbryW1YnUEKAP7MO9Mbeh+TNH4Z0HFxHgIqw==",
"dev": true,
"requires": {
- "@volar/source-map": "1.0.8",
+ "@volar/source-map": "1.0.9",
"@vue/reactivity": "^3.2.40",
"muggle-string": "^0.1.0"
}
},
"@volar/source-map": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.0.8.tgz",
- "integrity": "sha512-uKMe+alyfl1Abs5SviKejFoe7x9g6jDPVpVt63Tet4qn1Ziy7tFsvtCpM2Y1Ko5qw2nLIeloLslPqm9/gmbBLQ==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@volar/source-map/-/source-map-1.0.9.tgz",
+ "integrity": "sha512-fazB/vy5ZEJ3yKx4fabJyGNI3CBkdLkfEIRVu6+1P3VixK0Mn+eqyUIkLBrzGYaeFM3GybhCLCvsVdNz0Fu/CQ==",
"dev": true,
"requires": {
"muggle-string": "^0.1.0"
}
},
"@volar/typescript": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.0.8.tgz",
- "integrity": "sha512-2oY1Apvzcs/5tAn7p1tRlDxNgal5ezaK0h9cutcWALeimsaQBAEE2NAirCrLMHl8DneuDce0tzJqHaQeHw9RmQ==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@volar/typescript/-/typescript-1.0.9.tgz",
+ "integrity": "sha512-dVziu+ShQUWuMukM6bvK2v2O446/gG6l1XkTh2vfkccw1IzjfbiP1TWQoNo1ipTfZOtu5YJGYAx+o5HNrGXWfQ==",
"dev": true,
"requires": {
- "@volar/language-core": "1.0.8"
+ "@volar/language-core": "1.0.9"
}
},
"@volar/vue-language-core": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-1.0.8.tgz",
- "integrity": "sha512-cXb7oTybxcm1vpz003agdYQHyxij7UAaSub60d7W1aMWpqb2iaCbVaq9izgQFlrpC4/JnVs+cJPb/Q6fAUVxBg==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@volar/vue-language-core/-/vue-language-core-1.0.9.tgz",
+ "integrity": "sha512-tofNoR8ShPFenHT1YVMuvoXtXWwoQE+fiXVqSmW0dSKZqEDjWQ3YeXSd0a6aqyKaIbvR7kWWGp34WbpQlwf9Ww==",
"dev": true,
"requires": {
- "@volar/language-core": "1.0.8",
- "@volar/source-map": "1.0.8",
+ "@volar/language-core": "1.0.9",
+ "@volar/source-map": "1.0.9",
"@vue/compiler-dom": "^3.2.40",
"@vue/compiler-sfc": "^3.2.40",
"@vue/reactivity": "^3.2.40",
@@ -195,49 +195,49 @@
}
},
"@volar/vue-typescript": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-1.0.8.tgz",
- "integrity": "sha512-6jBvA7iwBkRqS2VQx2gLJgfLcF3hcODyJ6Lmiw2tN8D/LVfFCovvzJgPvIQb9Y4i+rha1Y0cpsYOUt9XW2Z7ZA==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/@volar/vue-typescript/-/vue-typescript-1.0.9.tgz",
+ "integrity": "sha512-ZLe4y9YNbviACa7uAMCilzxA76gbbSlKfjspXBzk6fCobd8QCIig+VyDYcjANIlm2HhgSCX8jYTzhCKlegh4mw==",
"dev": true,
"requires": {
- "@volar/typescript": "1.0.8",
- "@volar/vue-language-core": "1.0.8"
+ "@volar/typescript": "1.0.9",
+ "@volar/vue-language-core": "1.0.9"
}
},
"@vue/compiler-core": {
- "version": "3.2.40",
- "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.40.tgz",
- "integrity": "sha512-2Dc3Stk0J/VyQ4OUr2yEC53kU28614lZS+bnrCbFSAIftBJ40g/2yQzf4mPBiFuqguMB7hyHaujdgZAQ67kZYA==",
+ "version": "3.2.41",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.41.tgz",
+ "integrity": "sha512-oA4mH6SA78DT+96/nsi4p9DX97PHcNROxs51lYk7gb9Z4BPKQ3Mh+BLn6CQZBw857Iuhu28BfMSRHAlPvD4vlw==",
"dev": true,
"requires": {
"@babel/parser": "^7.16.4",
- "@vue/shared": "3.2.40",
+ "@vue/shared": "3.2.41",
"estree-walker": "^2.0.2",
"source-map": "^0.6.1"
}
},
"@vue/compiler-dom": {
- "version": "3.2.40",
- "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.40.tgz",
- "integrity": "sha512-OZCNyYVC2LQJy4H7h0o28rtk+4v+HMQygRTpmibGoG9wZyomQiS5otU7qo3Wlq5UfHDw2RFwxb9BJgKjVpjrQw==",
+ "version": "3.2.41",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.41.tgz",
+ "integrity": "sha512-xe5TbbIsonjENxJsYRbDJvthzqxLNk+tb3d/c47zgREDa/PCp6/Y4gC/skM4H6PIuX5DAxm7fFJdbjjUH2QTMw==",
"dev": true,
"requires": {
- "@vue/compiler-core": "3.2.40",
- "@vue/shared": "3.2.40"
+ "@vue/compiler-core": "3.2.41",
+ "@vue/shared": "3.2.41"
}
},
"@vue/compiler-sfc": {
- "version": "3.2.40",
- "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.40.tgz",
- "integrity": "sha512-tzqwniIN1fu1PDHC3CpqY/dPCfN/RN1thpBC+g69kJcrl7mbGiHKNwbA6kJ3XKKy8R6JLKqcpVugqN4HkeBFFg==",
+ "version": "3.2.41",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.41.tgz",
+ "integrity": "sha512-+1P2m5kxOeaxVmJNXnBskAn3BenbTmbxBxWOtBq3mQTCokIreuMULFantBUclP0+KnzNCMOvcnKinqQZmiOF8w==",
"dev": true,
"requires": {
"@babel/parser": "^7.16.4",
- "@vue/compiler-core": "3.2.40",
- "@vue/compiler-dom": "3.2.40",
- "@vue/compiler-ssr": "3.2.40",
- "@vue/reactivity-transform": "3.2.40",
- "@vue/shared": "3.2.40",
+ "@vue/compiler-core": "3.2.41",
+ "@vue/compiler-dom": "3.2.41",
+ "@vue/compiler-ssr": "3.2.41",
+ "@vue/reactivity-transform": "3.2.41",
+ "@vue/shared": "3.2.41",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7",
"postcss": "^8.1.10",
@@ -245,13 +245,13 @@
}
},
"@vue/compiler-ssr": {
- "version": "3.2.40",
- "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.40.tgz",
- "integrity": "sha512-80cQcgasKjrPPuKcxwuCx7feq+wC6oFl5YaKSee9pV3DNq+6fmCVwEEC3vvkf/E2aI76rIJSOYHsWSEIxK74oQ==",
+ "version": "3.2.41",
+ "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.41.tgz",
+ "integrity": "sha512-Y5wPiNIiaMz/sps8+DmhaKfDm1xgj6GrH99z4gq2LQenfVQcYXmHIOBcs5qPwl7jaW3SUQWjkAPKMfQemEQZwQ==",
"dev": true,
"requires": {
- "@vue/compiler-dom": "3.2.40",
- "@vue/shared": "3.2.40"
+ "@vue/compiler-dom": "3.2.41",
+ "@vue/shared": "3.2.41"
}
},
"@vue/devtools-api": {
@@ -260,23 +260,23 @@
"integrity": "sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw=="
},
"@vue/reactivity": {
- "version": "3.2.40",
- "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.40.tgz",
- "integrity": "sha512-N9qgGLlZmtUBMHF9xDT4EkD9RdXde1Xbveb+niWMXuHVWQP5BzgRmE3SFyUBBcyayG4y1lhoz+lphGRRxxK4RA==",
+ "version": "3.2.41",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.41.tgz",
+ "integrity": "sha512-9JvCnlj8uc5xRiQGZ28MKGjuCoPhhTwcoAdv3o31+cfGgonwdPNuvqAXLhlzu4zwqavFEG5tvaoINQEfxz+l6g==",
"dev": true,
"requires": {
- "@vue/shared": "3.2.40"
+ "@vue/shared": "3.2.41"
}
},
"@vue/reactivity-transform": {
- "version": "3.2.40",
- "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.40.tgz",
- "integrity": "sha512-HQUCVwEaacq6fGEsg2NUuGKIhUveMCjOk8jGHqLXPI2w6zFoPrlQhwWEaINTv5kkZDXKEnCijAp+4gNEHG03yw==",
+ "version": "3.2.41",
+ "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.41.tgz",
+ "integrity": "sha512-mK5+BNMsL4hHi+IR3Ft/ho6Za+L3FA5j8WvreJ7XzHrqkPq8jtF/SMo7tuc9gHjLDwKZX1nP1JQOKo9IEAn54A==",
"dev": true,
"requires": {
"@babel/parser": "^7.16.4",
- "@vue/compiler-core": "3.2.40",
- "@vue/shared": "3.2.40",
+ "@vue/compiler-core": "3.2.41",
+ "@vue/shared": "3.2.41",
"estree-walker": "^2.0.2",
"magic-string": "^0.25.7"
}
@@ -368,9 +368,9 @@
}
},
"@vue/shared": {
- "version": "3.2.40",
- "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.40.tgz",
- "integrity": "sha512-0PLQ6RUtZM0vO3teRfzGi4ltLUO5aO+kLgwh4Um3THSR03rpQWLTuRCkuO5A41ITzwdWeKdPHtSARuPkoo5pCQ==",
+ "version": "3.2.41",
+ "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.41.tgz",
+ "integrity": "sha512-W9mfWLHmJhkfAmV+7gDjcHeAWALQtgGT3JErxULl0oz6R6+3ug91I7IErs93eCFhPCZPHBs4QJS7YWEV7A3sxw==",
"dev": true
},
"@vue/tsconfig": {
@@ -641,9 +641,9 @@
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
},
"dayjs": {
- "version": "1.11.5",
- "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.5.tgz",
- "integrity": "sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA=="
+ "version": "1.11.6",
+ "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
+ "integrity": "sha512-zZbY5giJAinCG+7AGaw0wIhNZ6J8AhWuSXKvuc1KAyMiRsvGQWqh4L+MomvhdAYjN+lqvVCMq1I41e3YHvXkyQ=="
},
"de-indent": {
"version": "1.0.2",
@@ -720,9 +720,9 @@
"dev": true
},
"element-plus": {
- "version": "2.2.18",
- "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.18.tgz",
- "integrity": "sha512-2pK2zmVOwP14eFl3rGoR+3BWJwDyO+DZCvzjQ8L6qjUR+hVKwFhgxIcSkKJatbcHFw5Xui6UyN20jV+gQP7mLg==",
+ "version": "2.2.19",
+ "resolved": "https://registry.npmjs.org/element-plus/-/element-plus-2.2.19.tgz",
+ "integrity": "sha512-uN0gt9lUus/IHzu5J6vkbYoYJgUtU05osdtFv9RO27bHKOG5GN7dH6uA3OKfkQQ6R2sV8ZxY1rc9PH1X8Dgrow==",
"requires": {
"@ctrl/tinycolor": "^3.4.1",
"@element-plus/icons-vue": "^2.0.6",
@@ -1692,12 +1692,12 @@
}
},
"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==",
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz",
+ "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==",
"dev": true,
"requires": {
- "postcss-selector-parser": "^6.0.6"
+ "postcss-selector-parser": "^6.0.10"
}
},
"postcss-selector-parser": {
@@ -2006,9 +2006,9 @@
"dev": true
},
"tailwindcss": {
- "version": "3.1.8",
- "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.8.tgz",
- "integrity": "sha512-YSneUCZSFDYMwk+TGq8qYFdCA3yfBRdBlS7txSq0LUmzyeqRe3a8fBQzbz9M3WS/iFT4BNf/nmw9mEzrnSaC0g==",
+ "version": "3.2.1",
+ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.2.1.tgz",
+ "integrity": "sha512-Uw+GVSxp5CM48krnjHObqoOwlCt5Qo6nw1jlCRwfGy68dSYb/LwS9ZFidYGRiM+w6rMawkZiu1mEMAsHYAfoLg==",
"dev": true,
"requires": {
"arg": "^5.0.2",
@@ -2017,18 +2017,19 @@
"detective": "^5.2.1",
"didyoumean": "^1.2.2",
"dlv": "^1.1.3",
- "fast-glob": "^3.2.11",
+ "fast-glob": "^3.2.12",
"glob-parent": "^6.0.2",
"is-glob": "^4.0.3",
"lilconfig": "^2.0.6",
+ "micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
"object-hash": "^3.0.0",
"picocolors": "^1.0.0",
- "postcss": "^8.4.14",
+ "postcss": "^8.4.17",
"postcss-import": "^14.1.0",
"postcss-js": "^4.0.0",
"postcss-load-config": "^3.1.4",
- "postcss-nested": "5.0.6",
+ "postcss-nested": "6.0.0",
"postcss-selector-parser": "^6.0.10",
"postcss-value-parser": "^4.2.0",
"quick-lru": "^5.1.1",
@@ -2366,13 +2367,13 @@
}
},
"vue-tsc": {
- "version": "1.0.8",
- "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.0.8.tgz",
- "integrity": "sha512-+0sJ+QVH7SHLt8mV/uIw4xlHDk1mWigZkMFugfZTv8rlHpM3S2tCVZ0BWEGclT/0rKdO8j+St+mljpvhWPN/eQ==",
+ "version": "1.0.9",
+ "resolved": "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.0.9.tgz",
+ "integrity": "sha512-vRmHD1K6DmBymNhoHjQy/aYKTRQNLGOu2/ESasChG9Vy113K6CdP0NlhR0bzgFJfv2eFB9Ez/9L5kIciUajBxQ==",
"dev": true,
"requires": {
- "@volar/vue-language-core": "1.0.8",
- "@volar/vue-typescript": "1.0.8"
+ "@volar/vue-language-core": "1.0.9",
+ "@volar/vue-typescript": "1.0.9"
}
},
"webpack-sources": {
diff --git a/package.json b/package.json
index 42cebe9..3bc322a 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,9 @@
"dependencies": {
"axios": "^1.1.3",
"countup.js": "^2.3.2",
- "dayjs": "^1.11.5",
+ "dayjs": "^1.11.6",
"echarts": "^5.4.0",
- "element-plus": "^2.2.18",
+ "element-plus": "^2.2.19",
"mockjs": "^1.1.0",
"pinia": "^2.0.21",
"vue": "^3.2.41",
@@ -22,18 +22,18 @@
},
"devDependencies": {
"@types/mockjs": "^1.0.7",
- "@types/node": "^18.8.0",
+ "@types/node": "^18.11.4",
"@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",
+ "tailwindcss": "^3.2.1",
"typescript": "~4.7.4",
"unplugin-auto-import": "^0.11.2",
"unplugin-vue-components": "^0.22.8",
"vite": "^3.1.8",
- "vue-tsc": "^1.0.8"
+ "vue-tsc": "^1.0.9"
}
}
diff --git a/src/assets/img/center_map.png b/src/assets/img/center_map.png
deleted file mode 100644
index 71f4036..0000000
--- a/src/assets/img/center_map.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/img/frame.png b/src/assets/img/frame.png
deleted file mode 100644
index 150ec5e..0000000
--- a/src/assets/img/frame.png
+++ /dev/null
Binary files differ
diff --git a/src/assets/img/headers/setting.png b/src/assets/img/headers/setting.png
new file mode 100644
index 0000000..bd4de0d
--- /dev/null
+++ b/src/assets/img/headers/setting.png
Binary files differ
diff --git a/src/components/scale-screen/scale-screen.vue b/src/components/scale-screen/scale-screen.vue
index 9c4395d..d45fa9e 100644
--- a/src/components/scale-screen/scale-screen.vue
+++ b/src/components/scale-screen/scale-screen.vue
@@ -1,5 +1,9 @@
<template>
- <section :style="{ ...styles.box, ...boxStyle }" class="v-screen-box">
+ <section
+ :style="{ ...styles.box, ...boxStyle }"
+ class="v-screen-box"
+ ref="box"
+ >
<div
:style="{ ...styles.wrapper, ...wrapperStyle }"
class="screen-wrapper"
@@ -10,7 +14,7 @@
</section>
</template>
<script lang="ts" setup>
-import { nextTick, onMounted, onUnmounted, reactive, ref } from "vue";
+import { nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
import type { CSSProperties, PropType } from "vue";
/**
* 闃叉姈鍑芥暟
@@ -105,11 +109,27 @@
};
const screenWrapper = ref<HTMLElement>();
+const box = ref<HTMLElement>();
+
+watch(
+ () => props.autoScale,
+ async (newVal: any) => {
+ if (newVal) {
+ onResize();
+ addListener();
+ } else {
+ clearListener();
+ clearScreenWrapperStyle();
+ }
+ }
+);
/**
* 鍒濆鍖栧ぇ灞忓鍣ㄥ楂�
*/
const initSize = () => {
return new Promise<void>((resolve) => {
+ box.value!.scrollLeft = 0;
+ box.value!.scrollTop = 0;
nextTick(() => {
// region 鑾峰彇澶у睆鐪熷疄灏哄
if (props.width && props.height) {
@@ -144,9 +164,14 @@
screenWrapper.value!.style.height = `${state.originalHeight}px`;
}
};
-
+const clearScreenWrapperStyle = () => {
+ screenWrapper.value!.style.transform = "";
+ screenWrapper.value!.style.margin = "";
+};
const autoScale = (scale: number) => {
- if (!props.autoScale) return;
+ if (!props.autoScale) {
+ return;
+ }
const domWidth = screenWrapper.value!.clientWidth;
const domHeight = screenWrapper.value!.clientHeight;
const currentWidth = document.body.clientWidth;
@@ -195,17 +220,27 @@
attributeOldValue: true,
});
};
+
+const clearListener = () => {
+ window.removeEventListener("resize", onResize);
+ // state.observer?.disconnect();
+};
+
+const addListener = () => {
+ window.addEventListener("resize", onResize);
+ // initMutationObserver();
+};
onMounted(() => {
nextTick(async () => {
await initSize();
updateSize();
updateScale();
- window.addEventListener("resize", onResize);
- initMutationObserver();
+ addListener();
+ // initMutationObserver();
});
});
onUnmounted(() => {
- window.removeEventListener("resize", onResize);
- state.observer?.disconnect();
+ clearListener();
+ // state.observer?.disconnect();
});
</script>
diff --git a/src/stores/counter.ts b/src/stores/counter.ts
deleted file mode 100644
index b6757ba..0000000
--- a/src/stores/counter.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
- const count = ref(0)
- const doubleCount = computed(() => count.value * 2)
- function increment() {
- count.value++
- }
-
- return { count, doubleCount, increment }
-})
diff --git a/src/stores/index.ts b/src/stores/index.ts
new file mode 100644
index 0000000..7b3fdbb
--- /dev/null
+++ b/src/stores/index.ts
@@ -0,0 +1 @@
+export * from "./setting/setting"
\ No newline at end of file
diff --git a/src/stores/setting/setting.ts b/src/stores/setting/setting.ts
new file mode 100644
index 0000000..fc8b59a
--- /dev/null
+++ b/src/stores/setting/setting.ts
@@ -0,0 +1,28 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+// import { storeToRefs } from 'pinia';
+export const useSettingStore = defineStore('setting', () => {
+ const settingShow = ref(false);//璁剧疆寮圭獥鏄鹃殣
+ const isScale = ref(false);//鏄惁杩涜鍏ㄥ眬閫傞厤
+
+ const setSettingShow = (flag:boolean)=>{
+ settingShow.value=flag
+ }
+ const setIsScale = (flag:boolean)=>{
+ isScale.value=flag
+ setSettingData()
+ }
+ const initSetting=()=>{
+ let settingData:any = localStorage.getItem('loftv-settingData')
+ if(settingData){
+ settingData=JSON.parse(settingData)
+ setIsScale(settingData.isScale)
+ }
+ }
+ const setSettingData=()=>{
+ localStorage.setItem('loftv-settingData',JSON.stringify({
+ isScale:isScale.value
+ }))
+ }
+ return { settingShow, setSettingShow,isScale ,setIsScale,initSetting,setSettingData}
+})
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 90a0e71..d225de6 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -3,8 +3,14 @@
import { RouterView } from "vue-router";
import ScaleScreen from "@/components/scale-screen";
import Headers from "./header.vue";
+import Setting from "./setting.vue"
+import { useSettingStore } from "@/stores/index";
+import { storeToRefs } from 'pinia';
+
+const settingStore = useSettingStore();
+const {isScale} =storeToRefs(settingStore)
const wrapperStyle = {};
-const autoScale = ref(false);
+
</script>
<template>
@@ -15,16 +21,17 @@
:fullScreen="false"
:boxStyle="{
background: '#03050C',
- overflow: autoScale ? 'hidden' : 'auto',
+ overflow: isScale ? 'hidden' : 'auto',
}"
:wrapperStyle="wrapperStyle"
- :autoScale="autoScale"
+ :autoScale="isScale"
>
<div class="content_wrap">
<Headers />
<RouterView />
</div>
</scale-screen>
+ <Setting/>
</template>
<style lang="scss" scoped>
.content_wrap {
diff --git a/src/views/header.vue b/src/views/header.vue
index aba80ff..50c5858 100644
--- a/src/views/header.vue
+++ b/src/views/header.vue
@@ -2,13 +2,16 @@
import { reactive } from "vue";
import dayjs from 'dayjs';
import type {DateDataType} from "./index.d"
+import {useSettingStore} from "@/stores/index"
+
const dateData = reactive<DateDataType>({
dateDay: "",
dateYear: "",
dateWeek: "",
timing:null
});
-
+
+const { setSettingShow} =useSettingStore()
const weekday= ["鍛ㄦ棩", "鍛ㄤ竴", "鍛ㄤ簩", "鍛ㄤ笁", "鍛ㄥ洓", "鍛ㄤ簲", "鍛ㄥ叚"]
const timeFn = () => {
dateData.timing = setInterval(() => {
@@ -17,7 +20,6 @@
}, 1000);
};
timeFn()
-const showSetting = () => {};
</script>
<template>
@@ -32,11 +34,10 @@
</div>
<div class="timers">
{{ dateData.dateYear }} {{ dateData.dateWeek }} {{ dateData.dateDay }}
- <i
- class="blq-icon-shezhi02"
- style="margin-left: 10px"
- @click="showSetting"
- ></i>
+
+ <div class="setting_icon" @click="setSettingShow(true)">
+ <img src="@/assets/img/headers/setting.png" alt="璁剧疆">
+ </div>
</div>
</div>
</template>
@@ -85,8 +86,15 @@
display: flex;
align-items: center;
- .blq-icon-shezhi02 {
+ .setting_icon {
+ width: 20px;
+ height: 20px;
cursor: pointer;
+ margin-left: 12px;
+ img{
+ width: 100%;
+ height: 100%;
+ }
}
}
}
diff --git a/src/views/setting.vue b/src/views/setting.vue
index 7df5872..d4f17ab 100644
--- a/src/views/setting.vue
+++ b/src/views/setting.vue
@@ -1,13 +1,102 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+import { useSettingStore } from "@/stores/index";
+import { ref } from "vue";
+const isScaleRadio = ref(false);
+const settingStore = useSettingStore();
+const init = () => {
+ settingStore.initSetting();
+ isScaleRadio.value = settingStore.isScale;
+};
+init();
+const handleClose = () => {};
+const cancelClick = () => {
+ settingStore.setSettingShow(false);
+};
+
+const confirmClick = () => {};
+const isScaleChange = (flag: boolean) => {
+ settingStore.setIsScale(flag);
+};
+const radiochange = (blag: boolean, type: string) => {
+ console.log(blag, type);
+ settingStore.setIsScale(blag);
+ // this.$store.commit('setting/updateSwiper', { val, type })
+ // if(type==='isScale'){
+ // // this.$router.go(0)
+ // // location.reload()
+ // // window.location.href=window.location.href+"?t="+Date.now()
+ // }
+};
</script>
<template>
- <div class=''>
-
- </div>
+ <el-drawer v-model="settingStore.settingShow" direction="rtl">
+ <template #header>
+ <h2 class="setting-title">璁剧疆</h2>
+ </template>
+ <template #default>
+ <div class="left_shu">鍏ㄥ眬璁剧疆</div>
+ <div class="setting_item">
+ <span class="setting_label">
+ 鏄惁杩涜鑷姩閫傞厤<span class="setting_label_tip"
+ >(榛樿鍒嗚鲸鐜�1920*1080)</span
+ >:
+ </span>
+ <div class="setting_content">
+ <el-radio-group v-model="isScaleRadio" @change="isScaleChange">
+ <el-radio :label="true">鏄�</el-radio>
+ <el-radio :label="false">鍚�</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ </template>
+ <!-- <template #footer>
+ <div style="flex: auto">
+ <el-button @click="cancelClick">鍙栨秷</el-button>
+ <el-button type="primary" @click="confirmClick">纭畾</el-button>
+ </div>
+ </template> -->
+ </el-drawer>
</template>
-<style scoped lang='scss'>
+<style scoped lang="scss">
+.setting-title {
+ font-size: 20px;
+ color: #000;
+ font-weight: 900;
+ text-align: center;
+ line-height: 1;
+}
+.left_shu {
+ color: #000;
+ font-weight: 900;
+ position: relative;
+ text-indent: 10px;
+ padding: 16px 0 10px 0;
+ line-height: 1;
+ &::before {
+ display: block;
+ content: " ";
+ height: 16px;
+ width: 4px;
+ border-radius: 2px;
+ background: #0072ff;
+ position: absolute;
+ left: 0px;
+ }
+}
+.setting_item {
+ font-size: 14px;
+ line-height: 1.5;
-</style>
\ No newline at end of file
+ // display: flex;
+ .setting_label {
+ color: #555454;
+ }
+ .setting_label_tip {
+ font-size: 12px;
+ color: #838282;
+ }
+}
+</style>
--
Gitblit v1.8.0