feat: 新增工具：二维码生成、色板、单位转换
This commit is contained in:
osiris
+6
-42
@@ -129,66 +129,30 @@ function getTools() {
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '单位换算(ing)',
|
||||
title: '单位换算',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
desc: '在线体积、重量、字节、长度、面积、时间、角度、速度、温度、压力、热量、功率等换算',
|
||||
url: '/danmu',
|
||||
url: '/unit',
|
||||
cateId: 4,
|
||||
cate: '教育学术'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '色板(ing)',
|
||||
title: '色板',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
desc: '包含纯色、渐变与阶梯色和常用色彩组合',
|
||||
url: '/danmu',
|
||||
url: '/palettes',
|
||||
cateId: 5,
|
||||
cate: '设计工具'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '三才五格起名(ing)',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
desc: '根据三才五格起名',
|
||||
url: '/danmu',
|
||||
cateId: 4,
|
||||
cate: '教育学术'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '二维码生成(ing)',
|
||||
title: '二维码生成',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
desc: '在线生成带logo、透明、艺术的二维码',
|
||||
url: '/danmu',
|
||||
url: '/qrcode',
|
||||
cateId: 5,
|
||||
cate: '设计工具'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'logo生成(ing)',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
desc: '在线生成logo，免费下载',
|
||||
url: '/danmu',
|
||||
cateId: 5,
|
||||
cate: '设计工具'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: '头像生成(ing)',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
desc: '在线生成头像',
|
||||
url: '/danmu',
|
||||
cateId: 5,
|
||||
cate: '设计工具'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: 'linux命令查询(ing)',
|
||||
logo: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
|
||||
desc: 'linux命令查询',
|
||||
url: '/danmu',
|
||||
cateId: 2,
|
||||
cate: '开发运维'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
+2
-1
@@ -17,12 +17,13 @@
|
||||
"@codemirror/language": "^6.9.2",
|
||||
"@codemirror/lint": "^6.4.2",
|
||||
"@codemirror/search": "^6.5.4",
|
||||
"@codemirror/state": "^6.3.1",
|
||||
"@codemirror/state": "^6.3.3",
|
||||
"@codemirror/theme-one-dark": "^6.1.2",
|
||||
"@codemirror/view": "^6.22.0",
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"axios": "^1.6.2",
|
||||
"element-plus": "^2.4.2",
|
||||
"qrcode-vue3": "^1.6.8",
|
||||
"sass": "^1.69.5",
|
||||
"sass-loader": "^13.3.2",
|
||||
"ts-md5": "^1.3.1",
|
||||
|
||||
Generated
+74
-57
@@ -24,8 +24,8 @@ dependencies:
|
||||
specifier: ^6.5.4
|
||||
version: 6.5.5
|
||||
'@codemirror/state':
|
||||
specifier: ^6.3.1
|
||||
version: 6.3.2
|
||||
specifier: ^6.3.3
|
||||
version: registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/theme-one-dark':
|
||||
specifier: ^6.1.2
|
||||
version: 6.1.2
|
||||
@@ -41,6 +41,9 @@ dependencies:
|
||||
element-plus:
|
||||
specifier: ^2.4.2
|
||||
version: 2.4.3([email protected])
|
||||
qrcode-vue3:
|
||||
specifier: ^1.6.8
|
||||
version: registry.npmmirror.com/[email protected]
|
||||
sass:
|
||||
specifier: ^1.69.5
|
||||
version: 1.69.5
|
||||
@@ -163,7 +166,7 @@ packages:
|
||||
'@babel/helper-validator-identifier': 7.22.20
|
||||
to-fast-properties: 2.0.0
|
||||
|
||||
/@codemirror/[email protected](@codemirror/[email protected])(@codemirror/[email protected].2)(@codemirror/[email protected])(@lezer/[email protected]):
|
||||
/@codemirror/[email protected](@codemirror/[email protected])(@codemirror/[email protected].3)(@codemirror/[email protected])(@lezer/[email protected]):
|
||||
resolution: {integrity: sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==}
|
||||
peerDependencies:
|
||||
'@codemirror/language': ^6.0.0
|
||||
@@ -172,7 +175,7 @@ packages:
|
||||
'@lezer/common': ^1.0.0
|
||||
dependencies:
|
||||
'@codemirror/language': 6.9.3
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
'@lezer/common': 1.1.1
|
||||
dev: false
|
||||
@@ -181,7 +184,7 @@ packages:
|
||||
resolution: {integrity: sha512-tjoi4MCWDNxgIpoLZ7+tezdS9OEB6pkiDKhfKx9ReJ/XBcs2G2RXIu+/FxXBlWsPTsz6C9q/r4gjzrsxpcnqCQ==}
|
||||
dependencies:
|
||||
'@codemirror/language': 6.9.3
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
'@lezer/common': 1.1.1
|
||||
dev: false
|
||||
@@ -189,10 +192,10 @@ packages:
|
||||
/@codemirror/[email protected]:
|
||||
resolution: {integrity: sha512-jlFOXTejVyiQCW3EQwvKH0m99bUYIw40oPmFjSX2VS78yzfe0HELZ+NEo9Yfo1MkGRpGlj3Gnu4rdxV1EnAs5A==}
|
||||
dependencies:
|
||||
'@codemirror/autocomplete': 6.11.1(@codemirror/[email protected])(@codemirror/[email protected].2)(@codemirror/[email protected])(@lezer/[email protected])
|
||||
'@codemirror/autocomplete': 6.11.1(@codemirror/[email protected])(@codemirror/[email protected].3)(@codemirror/[email protected])(@lezer/[email protected])
|
||||
'@codemirror/language': 6.9.3
|
||||
'@codemirror/lint': 6.4.2
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
'@lezer/common': 1.1.1
|
||||
'@lezer/javascript': 1.4.9
|
||||
@@ -208,7 +211,7 @@ packages:
|
||||
/@codemirror/[email protected]:
|
||||
resolution: {integrity: sha512-qq48pYzoi6ldYWV/52+Z9Ou6QouVI+8YwvxFbUypI33NbjG2UeRHKENRyhwljTTiOqjQ33FjyZj6EREQ9apAOQ==}
|
||||
dependencies:
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
'@lezer/common': 1.1.1
|
||||
'@lezer/highlight': 1.2.0
|
||||
@@ -219,7 +222,7 @@ packages:
|
||||
/@codemirror/[email protected]:
|
||||
resolution: {integrity: sha512-wzRkluWb1ptPKdzlsrbwwjYCPLgzU6N88YBAmlZi8WFyuiEduSd05MnJYNogzyc8rPK7pj6m95ptUApc8sHKVA==}
|
||||
dependencies:
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
crelt: 1.0.6
|
||||
dev: false
|
||||
@@ -227,20 +230,16 @@ packages:
|
||||
/@codemirror/[email protected]:
|
||||
resolution: {integrity: sha512-PIEN3Ke1buPod2EHbJsoQwlbpkz30qGZKcnmH1eihq9+bPQx8gelauUwLYaY4vBOuBAuEhmpDLii4rj/uO0yMA==}
|
||||
dependencies:
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
crelt: 1.0.6
|
||||
dev: false
|
||||
|
||||
/@codemirror/[email protected]:
|
||||
resolution: {integrity: sha512-5jEikOfU0r9y+OTlZn5AEQB15mibu3deLBUp+GnLzVUNezEEuPt/JdSeniQNi+0YviblAvOPO2JQAlgJ3SYYaA==}
|
||||
dev: false
|
||||
|
||||
/@codemirror/[email protected]:
|
||||
resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==}
|
||||
dependencies:
|
||||
'@codemirror/language': 6.9.3
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
'@lezer/highlight': 1.2.0
|
||||
dev: false
|
||||
@@ -248,7 +247,7 @@ packages:
|
||||
/@codemirror/[email protected]:
|
||||
resolution: {integrity: sha512-38BRn1nPqZqiHbmWfI8zri23IbRVbmSpSmh1E/Ysvc+lIGGdBC17K8zlK7ZU6fhfy9x4De9Zyj5JQqScPq5DkA==}
|
||||
dependencies:
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
style-mod: 4.1.0
|
||||
w3c-keyname: 2.2.8
|
||||
dev: false
|
||||
@@ -737,6 +736,7 @@ packages:
|
||||
/[email protected]:
|
||||
resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
|
||||
engines: {node: '>=8'}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
|
||||
/[email protected]:
|
||||
@@ -4167,6 +4167,7 @@ packages:
|
||||
|
||||
/[email protected]:
|
||||
resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
|
||||
/[email protected]:
|
||||
@@ -4468,7 +4469,7 @@ packages:
|
||||
dependencies:
|
||||
'@codemirror/commands': 6.3.2
|
||||
'@codemirror/language': 6.9.3
|
||||
'@codemirror/state': 6.3.2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/view': 6.22.1
|
||||
codemirror: registry.npmmirror.com/[email protected](@lezer/[email protected])
|
||||
vue: 3.3.10([email protected])
|
||||
@@ -4556,6 +4557,7 @@ packages:
|
||||
|
||||
/[email protected]:
|
||||
resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
|
||||
requiresBuild: true
|
||||
dev: false
|
||||
|
||||
/[email protected]:
|
||||
@@ -4580,6 +4582,7 @@ packages:
|
||||
|
||||
/[email protected]:
|
||||
resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
|
||||
requiresBuild: true
|
||||
dependencies:
|
||||
tr46: 0.0.3
|
||||
webidl-conversions: 3.0.1
|
||||
@@ -4700,7 +4703,7 @@ packages:
|
||||
fd-slicer: 1.1.0
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@codemirror/[email protected](@codemirror/[email protected])(@codemirror/[email protected].2)(@codemirror/[email protected].1)(@lezer/[email protected]):
|
||||
registry.npmmirror.com/@codemirror/[email protected](@codemirror/[email protected])(@codemirror/[email protected].3)(@codemirror/[email protected].2)(@lezer/[email protected]):
|
||||
resolution: {integrity: sha512-L5UInv8Ffd6BPw0P3EF7JLYAMeEbclY7+6Q11REt8vhih8RuLreKtPy/xk8wPxs4EQgYqzI7cdgpiYwWlbS/ow==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/autocomplete/-/autocomplete-6.11.1.tgz}
|
||||
id: registry.npmmirror.com/@codemirror/autocomplete/6.11.1
|
||||
name: '@codemirror/autocomplete'
|
||||
@@ -4712,8 +4715,8 @@ packages:
|
||||
'@lezer/common': ^1.0.0
|
||||
dependencies:
|
||||
'@codemirror/language': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].1
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].3
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@lezer/common': 1.1.1
|
||||
dev: false
|
||||
|
||||
@@ -4723,9 +4726,9 @@ packages:
|
||||
version: 6.3.2
|
||||
dependencies:
|
||||
'@codemirror/language': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].1
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].1
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].3
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].2
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@codemirror/[email protected]:
|
||||
@@ -4733,9 +4736,9 @@ packages:
|
||||
name: '@codemirror/language'
|
||||
version: 6.9.3
|
||||
dependencies:
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].1
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].1
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].3
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].2
|
||||
'@lezer/highlight': registry.npmmirror.com/@lezer/[email protected]
|
||||
'@lezer/lr': registry.npmmirror.com/@lezer/[email protected]
|
||||
style-mod: registry.npmmirror.com/[email protected]
|
||||
@@ -4746,8 +4749,8 @@ packages:
|
||||
name: '@codemirror/lint'
|
||||
version: 6.4.2
|
||||
dependencies:
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].1
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].3
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
crelt: registry.npmmirror.com/[email protected]
|
||||
dev: false
|
||||
|
||||
@@ -4756,23 +4759,23 @@ packages:
|
||||
name: '@codemirror/search'
|
||||
version: 6.5.5
|
||||
dependencies:
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].1
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].3
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
crelt: registry.npmmirror.com/[email protected]
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@codemirror/[email protected].2:
|
||||
resolution: {integrity: sha512-5jEikOfU0r9y+OTlZn5AEQB15mibu3deLBUp+GnLzVUNezEEuPt/JdSeniQNi+0YviblAvOPO2JQAlgJ3SYYaA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/state/-/state-6.3.2.tgz}
|
||||
registry.npmmirror.com/@codemirror/[email protected].3:
|
||||
resolution: {integrity: sha512-0wufKcTw2dEwEaADajjHf6hBy1sh3M6V0e+q4JKIhLuiMSe5td5HOWpUdvKth1fT1M9VYOboajoBHpkCd7PG7A==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/state/-/state-6.3.3.tgz}
|
||||
name: '@codemirror/state'
|
||||
version: 6.3.2
|
||||
version: 6.3.3
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@codemirror/[email protected].1:
|
||||
resolution: {integrity: sha512-38BRn1nPqZqiHbmWfI8zri23IbRVbmSpSmh1E/Ysvc+lIGGdBC17K8zlK7ZU6fhfy9x4De9Zyj5JQqScPq5DkA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/view/-/view-6.22.1.tgz}
|
||||
registry.npmmirror.com/@codemirror/[email protected].2:
|
||||
resolution: {integrity: sha512-cJp64cPXm7QfSBWEXK+76+hsZCGHupUgy8JAbSzMG6Lr0rfK73c1CaWITVW6hZVkOnAFxJTxd0PIuynNbzxYPw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@codemirror/view/-/view-6.22.2.tgz}
|
||||
name: '@codemirror/view'
|
||||
version: 6.22.1
|
||||
version: 6.22.2
|
||||
dependencies:
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].3
|
||||
style-mod: registry.npmmirror.com/[email protected]
|
||||
w3c-keyname: registry.npmmirror.com/[email protected]
|
||||
dev: false
|
||||
@@ -5068,10 +5071,10 @@ packages:
|
||||
'@jridgewell/sourcemap-codec': registry.npmmirror.com/@jridgewell/[email protected]
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@lezer/[email protected].1:
|
||||
resolution: {integrity: sha512-aAPB9YbvZHqAW+bIwiuuTDGB4DG0sYNRObGLxud8cW7osw1ZQxfDuTZ8KQiqfZ0QJGcR34CvpTMDXEyo/+Htgg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@lezer/common/-/common-1.1.1.tgz}
|
||||
registry.npmmirror.com/@lezer/[email protected].2:
|
||||
resolution: {integrity: sha512-V+GqBsga5+cQJMfM0GdnHmg4DgWvLzgMWjbldBg0+jC3k9Gu6nJNZDLJxXEBT1Xj8KhRN4jmbC5CY7SIL++sVw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@lezer/common/-/common-1.1.2.tgz}
|
||||
name: '@lezer/common'
|
||||
version: 1.1.1
|
||||
version: 1.1.2
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@lezer/[email protected]:
|
||||
@@ -5079,7 +5082,7 @@ packages:
|
||||
name: '@lezer/highlight'
|
||||
version: 1.2.0
|
||||
dependencies:
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].1
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].2
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@lezer/[email protected]:
|
||||
@@ -5087,7 +5090,7 @@ packages:
|
||||
name: '@lezer/lr'
|
||||
version: 1.3.14
|
||||
dependencies:
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].1
|
||||
'@lezer/common': registry.npmmirror.com/@lezer/[email protected].2
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@sxzz/[email protected]:
|
||||
@@ -5126,10 +5129,10 @@ packages:
|
||||
version: 7.0.15
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/@types/[email protected].3:
|
||||
resolution: {integrity: sha512-XJavIpZqiXID5Yxnxv3RUDKTN5b81ddNC3ecsA0SoFXz/QU8OGBwZGMomiq0zw+uuqbL/krztv/DINAQ/EV4gg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-20.10.3.tgz}
|
||||
registry.npmmirror.com/@types/[email protected].4:
|
||||
resolution: {integrity: sha512-D08YG6rr8X90YB56tSIuBaddy/UXAA9RKJoFvrsnogAum/0pmjkgi4+2nx96A330FmioegBWmEYQ+syqCFaveg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/@types/node/-/node-20.10.4.tgz}
|
||||
name: '@types/node'
|
||||
version: 20.10.3
|
||||
version: 20.10.4
|
||||
dependencies:
|
||||
undici-types: registry.npmmirror.com/[email protected]
|
||||
dev: false
|
||||
@@ -5341,7 +5344,7 @@ packages:
|
||||
hasBin: true
|
||||
dependencies:
|
||||
caniuse-lite: registry.npmmirror.com/[email protected]
|
||||
electron-to-chromium: registry.npmmirror.com/[email protected]1
|
||||
electron-to-chromium: registry.npmmirror.com/[email protected]9
|
||||
node-releases: registry.npmmirror.com/[email protected]
|
||||
update-browserslist-db: registry.npmmirror.com/[email protected]([email protected])
|
||||
dev: false
|
||||
@@ -5387,13 +5390,13 @@ packages:
|
||||
name: codemirror
|
||||
version: 6.0.1
|
||||
dependencies:
|
||||
'@codemirror/autocomplete': registry.npmmirror.com/@codemirror/[email protected](@codemirror/[email protected])(@codemirror/[email protected].2)(@codemirror/[email protected].1)(@lezer/[email protected])
|
||||
'@codemirror/autocomplete': registry.npmmirror.com/@codemirror/[email protected](@codemirror/[email protected])(@codemirror/[email protected].3)(@codemirror/[email protected].2)(@lezer/[email protected])
|
||||
'@codemirror/commands': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/language': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/lint': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/search': registry.npmmirror.com/@codemirror/[email protected]
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].1
|
||||
'@codemirror/state': registry.npmmirror.com/@codemirror/[email protected].3
|
||||
'@codemirror/view': registry.npmmirror.com/@codemirror/[email protected].2
|
||||
transitivePeerDependencies:
|
||||
- '@lezer/common'
|
||||
dev: false
|
||||
@@ -5410,10 +5413,10 @@ packages:
|
||||
version: 1.0.6
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/[email protected]1:
|
||||
resolution: {integrity: sha512-SpwUMDWe9tQu8JX5QCO1+p/hChAi9AE9UpoC3rcHVc+gdCGlbT3SGb5I1klgb952HRIyvt9wZhSz9bNBYz9swA==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.601.tgz}
|
||||
registry.npmmirror.com/[email protected]9:
|
||||
resolution: {integrity: sha512-ihiCP7PJmjoGNuLpl7TjNA8pCQWu09vGyjlPYw1Rqww4gvNuCcmvl+44G+2QyJ6S2K4o+wbTS++Xz0YN8Q9ERw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/electron-to-chromium/-/electron-to-chromium-1.4.609.tgz}
|
||||
name: electron-to-chromium
|
||||
version: 1.4.601
|
||||
version: 1.4.609
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/[email protected]:
|
||||
@@ -5524,7 +5527,7 @@ packages:
|
||||
version: 27.5.1
|
||||
engines: {node: '>= 10.13.0'}
|
||||
dependencies:
|
||||
'@types/node': registry.npmmirror.com/@types/[email protected].3
|
||||
'@types/node': registry.npmmirror.com/@types/[email protected].4
|
||||
merge-stream: registry.npmmirror.com/[email protected]
|
||||
supports-color: registry.npmmirror.com/[email protected]
|
||||
dev: false
|
||||
@@ -5659,6 +5662,20 @@ packages:
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/[email protected]:
|
||||
resolution: {integrity: sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz}
|
||||
name: qrcode-generator
|
||||
version: 1.4.4
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/[email protected]:
|
||||
resolution: {integrity: sha512-LtMnwKWi58ZqHbXBcsTF/VxDYhI6RrBIrDQw8fbDVlO8p5tJBZa7TaIaVYLY937vKO2WCEBmOKksGlpm5ccEIg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/qrcode-vue3/-/qrcode-vue3-1.6.8.tgz}
|
||||
name: qrcode-vue3
|
||||
version: 1.6.8
|
||||
dependencies:
|
||||
qrcode-generator: registry.npmmirror.com/[email protected]
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/[email protected]:
|
||||
resolution: {integrity: sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz}
|
||||
name: randombytes
|
||||
@@ -5770,14 +5787,14 @@ packages:
|
||||
jest-worker: registry.npmmirror.com/[email protected]
|
||||
schema-utils: registry.npmmirror.com/[email protected]
|
||||
serialize-javascript: registry.npmmirror.com/[email protected]
|
||||
terser: registry.npmmirror.com/[email protected]5.0
|
||||
terser: registry.npmmirror.com/[email protected]6.0
|
||||
webpack: registry.npmmirror.com/[email protected]
|
||||
dev: false
|
||||
|
||||
registry.npmmirror.com/[email protected]5.0:
|
||||
resolution: {integrity: sha512-we0I9SIsfvNUMP77zC9HG+MylwYYsGFSBG8qm+13oud2Yh+O104y614FRbyjpxys16jZwot72Fpi827YvGzuqg==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/terser/-/terser-5.25.0.tgz}
|
||||
registry.npmmirror.com/[email protected]6.0:
|
||||
resolution: {integrity: sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==, registry: https://registry.npm.taobao.org/, tarball: https://registry.npmmirror.com/terser/-/terser-5.26.0.tgz}
|
||||
name: terser
|
||||
version: 5.25.0
|
||||
version: 5.26.0
|
||||
engines: {node: '>=10'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
|
||||
@@ -0,0 +1,27 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import { copy } from '@/utils/string'
|
||||
const info = reactive({
|
||||
title: "tool name",
|
||||
})
|
||||
|
||||
//copy
|
||||
const copyRes = async (resStr: string) => {
|
||||
copy(resStr)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import { copy } from '@/utils/string'
|
||||
const info = reactive({
|
||||
title: "色板",
|
||||
palettes: [
|
||||
{
|
||||
theme: 'last summer day', //
|
||||
item: ['#A7C5C5', '#DEE0D5', '#E2AC48', '#B96028', '#983C2D'],
|
||||
},
|
||||
{
|
||||
theme: 'Hazy Summer Afternoon', //
|
||||
item: ['#26C4A5', '#54D99F', '#ACE08C', '#E8E284', '#F2B652'],
|
||||
},
|
||||
{
|
||||
theme: 'Summering', //
|
||||
item: ['#FFBE4C', '#B33127', '#93EDFF', '#648FAD', '#FFFFFF'],
|
||||
},
|
||||
{
|
||||
theme: 'Bare August — Footcare Essentials', //
|
||||
item: ['#F2636F', '#F2858E', '#F2AEB4', '#F27999', '#F2D9D0'],
|
||||
},
|
||||
{
|
||||
theme: 'Big Vilnius Summer Loto', //
|
||||
item: ['#D90416', '#BF2A45', '#528C49', '#BF7B54', '#F28D8D'],
|
||||
},
|
||||
{
|
||||
theme: 'Illustration Design', //
|
||||
item: ['#D9D2D6', '#010326', '#4C5D73', '#808C65', '#F2E750'],
|
||||
},
|
||||
{
|
||||
theme: 'Beautiful tropical beach with blue sky and white clouds abstract texture background', //
|
||||
item: ['#04B2D9', '#CEECF2', '#04C4D9', '#15BFBF', '#D9D0C7'],
|
||||
},
|
||||
]
|
||||
})
|
||||
|
||||
//copy
|
||||
const copyRes = async (resStr: string) => {
|
||||
copy(resStr)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div class="">
|
||||
<div class="flex flex-col">
|
||||
<div v-for="(item, index) in info.palettes" :key="index" class="flex flex-col mb-3">
|
||||
<div class="flex h-28 rounded-lg overflow-hidden items-center">
|
||||
<span
|
||||
v-for="(color, index) in item.item"
|
||||
:key="index"
|
||||
class="w-1/5 h-full color-palette"
|
||||
:style="'background-color:' + color + ';'"
|
||||
@click="copyRes(color)"
|
||||
>
|
||||
<div class="color-text hidden flex items-center justify-center h-full w-full" :style="'color:' + color + ';'" >{{ color }}</div>
|
||||
</span>
|
||||
<!-- @change="(val: any) => (changeCheckBox(val, 3)) -->
|
||||
</div>
|
||||
<!-- <div class="">
|
||||
<el-text>主题：{{ item.theme }}</el-text>
|
||||
</div> -->
|
||||
<el-divider v-if="index != item.item.length + 1"/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.color-palette:hover .color-text{
|
||||
display: flex;
|
||||
filter: grayscale(1) contrast(999) invert(1)
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,181 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive,ref } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import QRCodeVue3 from 'qrcode-vue3'
|
||||
import { Delete, Plus } from '@element-plus/icons-vue'
|
||||
import { ElMessage, type UploadFile } from 'element-plus'
|
||||
const info = reactive({
|
||||
title: "二维码生成",
|
||||
content: '可在此输入文字或网址,右键图片另存为可保存图片',
|
||||
width: 200,
|
||||
height: 200,
|
||||
size: '200',
|
||||
sizeSelect: '',
|
||||
margin: 1,
|
||||
fileList: [],
|
||||
fileUrl: '',
|
||||
preColor: '#000',
|
||||
bgColor: '#fff',
|
||||
qrKey: 1,
|
||||
errorCorrectionLevel: 'Q',
|
||||
})
|
||||
|
||||
const uploadLogo = ref()
|
||||
|
||||
//上传达到上限触发
|
||||
const handleExceed = () => {
|
||||
ElMessage({
|
||||
message: '上传数量已达上限，请清除后重新上传',
|
||||
type: 'warning',
|
||||
})
|
||||
}
|
||||
|
||||
//设置尺寸
|
||||
const setQRSize = () => {
|
||||
info.width = parseInt(info.size)
|
||||
info.height = parseInt(info.size)
|
||||
}
|
||||
|
||||
const handleChange = (file: UploadFile) => {
|
||||
info.fileList.push(file.url)
|
||||
info.fileUrl = info.fileList[0] ?? ''
|
||||
}
|
||||
|
||||
const handleRemove = (file: UploadFile) => {
|
||||
info.fileList = uploadLogo.value.handleRemove(file)
|
||||
}
|
||||
|
||||
|
||||
//生成二维码
|
||||
const gen = () => {
|
||||
//设置尺寸
|
||||
setQRSize()
|
||||
info.qrKey += 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-3">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
|
||||
<div class="flex justify-between w-full">
|
||||
<div class="w-4/6">
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16 mr-2"><el-text>内容</el-text></div>
|
||||
<el-input v-model="info.content" type="textarea" rows="3" class="w-full" placeholder="可在此输入文字或网址"></el-input>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16 mr-2"><el-text>尺寸</el-text></div>
|
||||
<el-input v-model="info.size" class="">
|
||||
<template #append>
|
||||
<el-select v-model="info.size" class="w-32">
|
||||
<el-option label="常规 200px" value="200" />
|
||||
<el-option label="常规 300px" value="300" />
|
||||
<el-option label="适中 350px" value="350" />
|
||||
<el-option label="较大 500px" value="500" />
|
||||
<!-- 分割线 start -->
|
||||
<div class="flex justify-center bg-gray-200 w-full">
|
||||
<div class="h-[1px] bg-gray-200 w-4/5"></div>
|
||||
</div>
|
||||
<!-- 分割线 end -->
|
||||
<el-option label="超大 1000px" value="1000" />
|
||||
<el-option label="超大 1200px" value="1200" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<el-text class="w-16">纠错级别</el-text>
|
||||
<el-select v-model="info.errorCorrectionLevel" class="w-36">
|
||||
<el-option label="L 可遮挡 7%" value="L" />
|
||||
<el-option label="M 可遮挡 15%" value="M" />
|
||||
<el-option label="Q 可遮挡 25%" value="Q" />
|
||||
<el-option label="H 可遮挡 30%" value="H" />
|
||||
</el-select>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"><el-text>边距</el-text></div>
|
||||
<el-input-number v-model="info.margin" :step="1" :min="0"/>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"><el-text>颜色</el-text></div>
|
||||
<!-- <div class="w-16 flex flex-col items-center bg-gray-100 p-1 rounded-md mr-2">
|
||||
<el-text>前景色</el-text>
|
||||
<el-color-picker v-model="info.preColor" />
|
||||
</div> -->
|
||||
<div class="w-16 flex flex-col items-center bg-gray-100 p-1 rounded-md">
|
||||
<el-text>背景色</el-text>
|
||||
<el-color-picker v-model="info.bgColor" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"><el-text>logo</el-text></div>
|
||||
<el-upload
|
||||
ref="uploadLogo"
|
||||
action="#"
|
||||
:auto-upload="false"
|
||||
:limit="1"
|
||||
list-type="picture-card"
|
||||
accept=".png,.ico,.jpg,.jpeg"
|
||||
:on-change="handleChange"
|
||||
:on-exceed="handleExceed">
|
||||
<el-icon><Plus /></el-icon>
|
||||
<template #file="{ file }">
|
||||
<div class="border-2 w-full border-blue-400">
|
||||
<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
|
||||
<span class="el-upload-list__item-actions">
|
||||
<span
|
||||
class="el-upload-list__item-delete"
|
||||
@click="handleRemove(file)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="flex mb-3">
|
||||
<div class="w-16"></div>
|
||||
<el-button type="primary" @click="gen">生成二维码</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<QRCodeVue3
|
||||
:key="info.qrKey"
|
||||
:width="info.width"
|
||||
:height="info.height"
|
||||
:value="info.content"
|
||||
:margin="info.margin"
|
||||
:qrOptions="{ typeNumber: 0, mode: 'Byte', errorCorrectionLevel: info.errorCorrectionLevel }"
|
||||
:imageOptions="{ hideBackgroundDots: true, imageSize: 0.4, margin: 0 }"
|
||||
:image="info.fileList[0]"
|
||||
:dotsOptions="{
|
||||
type: 'none',
|
||||
color: '#26249a',
|
||||
gradient: {
|
||||
type: 'linear',
|
||||
rotation: 0,
|
||||
colorStops: [
|
||||
{ offset: 0, color: '#26249a' },
|
||||
{ offset: 1, color: '#26249a' },
|
||||
],
|
||||
},
|
||||
}"
|
||||
:backgroundOptions="{ color: info.bgColor }"
|
||||
:cornersSquareOptions="{ type: 'square', color: '#000000' }"
|
||||
:cornersDotOptions="{ type: undefined, color: '#000000' }"
|
||||
fileExt="png"
|
||||
myclass="my-qur"
|
||||
imgclass="img-qr"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.my-button{
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,415 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const lengthInfo: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
km: '',
|
||||
m: '',
|
||||
dm: '',
|
||||
cm: '',
|
||||
mm: '',
|
||||
ha: '',
|
||||
tradition_mu: '',
|
||||
tradition_fen: '',
|
||||
tradition_mill: '',
|
||||
tradition_hao: '',
|
||||
eng_nmi: '',
|
||||
eng_mi: '',
|
||||
eng_acre: '',
|
||||
eng_rd: '',
|
||||
eng_yd: '',
|
||||
eng_ft: '',
|
||||
eng_in: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in lengthInfo) {
|
||||
lengthInfo[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成平方米
|
||||
switch (key) {
|
||||
case 'km':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * (1000 * 1000)
|
||||
break;
|
||||
case 'm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'dm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'cm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0001
|
||||
break;
|
||||
case 'mm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000001
|
||||
break;
|
||||
case 'ha':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 10000
|
||||
break;
|
||||
case 'tradition_mu':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 666.6666667
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'tradition_fen':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 66.67
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.1
|
||||
break;
|
||||
case 'tradition_mill':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 6.67
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'tradition_hao':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.67
|
||||
lengthInfo.tradition_mu = parseFloat(lengthInfo[key] as string) * 0.001
|
||||
break;
|
||||
case 'eng_nmi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * (1852 * 1852)
|
||||
break;
|
||||
case 'eng_mi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 2589988.110336
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 27878400
|
||||
break;
|
||||
case 'eng_acre':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 4046.8564224
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 43560
|
||||
break;
|
||||
case 'eng_rd':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 25.2928526
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 272.25
|
||||
break;
|
||||
case 'eng_yd':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.8361274
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 9
|
||||
break;
|
||||
case 'eng_ft':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.092903
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'eng_in':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0006452
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 0.0069444
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//平方米转换成其他单位
|
||||
let mVal = lengthInfo.m as number
|
||||
//传统面积处理
|
||||
let muVal = mVal * 0.0015
|
||||
if (['tradition_mu', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
|
||||
muVal = (lengthInfo.tradition_mu == '' ? muVal : lengthInfo.tradition_mu) as number
|
||||
}
|
||||
//英制
|
||||
let engFtVal = mVal / 0.092903
|
||||
if (['eng_mi', 'eng_acre', 'eng_rd', 'eng_yd', 'eng_ft', 'eng_in'].includes(key)) {
|
||||
engFtVal = (lengthInfo.eng_ft == '' ? engFtVal : lengthInfo.eng_ft) as number
|
||||
}
|
||||
|
||||
lengthInfo.km = mVal * 0.000001
|
||||
lengthInfo.dm = mVal * 100
|
||||
lengthInfo.cm = mVal * 10000
|
||||
lengthInfo.mm = mVal * 1000000
|
||||
lengthInfo.ha = mVal * 0.0001
|
||||
|
||||
lengthInfo.tradition_mu = muVal
|
||||
lengthInfo.tradition_fen = muVal / 0.1
|
||||
lengthInfo.tradition_mill = muVal / 0.01
|
||||
lengthInfo.tradition_hao = muVal / 0.001
|
||||
|
||||
lengthInfo.eng_nmi = mVal / (1852 * 1852)
|
||||
lengthInfo.eng_mi = engFtVal / 27878400
|
||||
lengthInfo.eng_acre = engFtVal / 43560
|
||||
lengthInfo.eng_rd = engFtVal / 272.25
|
||||
lengthInfo.eng_yd = engFtVal / 9
|
||||
lengthInfo.eng_ft = engFtVal
|
||||
lengthInfo.eng_in = engFtVal / 0.0069444
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际面积单位(公制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方千米(km<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.km"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('km')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方米(m<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.m"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('m')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方分米(dm<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.dm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方厘米(cm<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.cm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('cm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方毫米(mm<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.mm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">公顷(ha)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.ha"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('ha')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">中国传统面积单位(市制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">亩</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_mu"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_mu')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_fen"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_fen')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">厘</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_mill"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_mill')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_hao"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_hao')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">英制面积单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方海里(nmi<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_nmi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_nmi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方英里(mi<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_mi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_mi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英亩(acre)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_acre"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_acre')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方竿(rd<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_rd"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_rd')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方码(yd<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_yd"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_yd')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方英尺(ft<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_ft"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_ft')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">平方英寸(in<sup>2</sup>)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_in"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_in')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,172 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
wh: '',
|
||||
mmwh: '',
|
||||
kwh: '',
|
||||
mwh: '',
|
||||
j: '',
|
||||
kj: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成瓦
|
||||
switch (key) {
|
||||
case 'wh':
|
||||
info.wh = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'mmwh':
|
||||
info.wh = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
case 'kwh':
|
||||
info.wh = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'mwh':
|
||||
info.wh = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'j':
|
||||
info.wh = parseFloat(info[key] as string) * 0.0002777777777777778
|
||||
break;
|
||||
case 'kj':
|
||||
info.wh = parseFloat(info[key] as string) * 0.2777777777777778
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.wh as number
|
||||
info.mmwh = val / 0.001
|
||||
info.kwh = val / 1000
|
||||
info.mwh = val / 1000000
|
||||
info.j = val / 0.0002777777777777778
|
||||
info.kj = info.j / 1000
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">热量单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">瓦(Wh)</el-text>
|
||||
<el-input
|
||||
v-model="info.wh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('wh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫瓦时(mWh)</el-text>
|
||||
<el-input
|
||||
v-model="info.mmwh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mmwh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千瓦时(kWh)</el-text>
|
||||
<el-input
|
||||
v-model="info.kwh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kwh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兆瓦时(MWh)</el-text>
|
||||
<el-input
|
||||
v-model="info.mwh"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mwh')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">焦(J)</el-text>
|
||||
<el-input
|
||||
v-model="info.j"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('j')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千焦(kJ)</el-text>
|
||||
<el-input
|
||||
v-model="info.kj"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kj')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,512 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const lengthInfo: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
km: '',
|
||||
m: '',
|
||||
dm: '',
|
||||
cm: '',
|
||||
mm: '',
|
||||
dmm: '',
|
||||
um: '',
|
||||
nm: '',
|
||||
tradition_li: '',
|
||||
tradition_zhang: '',
|
||||
tradition_chi: '',
|
||||
tradition_cun: '',
|
||||
tradition_fen: '',
|
||||
tradition_mill: '',
|
||||
tradition_hao: '',
|
||||
eng_nmi: '',
|
||||
eng_fm: '',
|
||||
eng_mi: '',
|
||||
eng_fur: '',
|
||||
eng_yd: '',
|
||||
eng_ft: '',
|
||||
eng_in: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in lengthInfo) {
|
||||
lengthInfo[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成米
|
||||
switch (key) {
|
||||
case 'km':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1000
|
||||
break;
|
||||
case 'm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'dm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.1
|
||||
break;
|
||||
case 'cm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'mm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.001
|
||||
break;
|
||||
case 'dmm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0001
|
||||
break;
|
||||
case 'um':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000001
|
||||
break;
|
||||
case 'nm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.000000001
|
||||
break;
|
||||
case 'tradition_li':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 500
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 1500
|
||||
break;
|
||||
case 'tradition_zhang':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 3.3333333
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 10
|
||||
break;
|
||||
case 'tradition_chi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.3
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'tradition_cun':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.03
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.1
|
||||
break;
|
||||
case 'tradition_fen':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.003
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.01
|
||||
break;
|
||||
case 'tradition_mill':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0003
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.001
|
||||
break;
|
||||
case 'tradition_hao':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.00003
|
||||
lengthInfo.tradition_chi = parseFloat(lengthInfo[key] as string) * 0.0001
|
||||
break;
|
||||
case 'eng_nmi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1852
|
||||
break;
|
||||
case 'eng_fm':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1.852
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 6
|
||||
break;
|
||||
case 'eng_mi':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 1609.34
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 5280
|
||||
break;
|
||||
case 'eng_fur':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 201.168
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 660
|
||||
break;
|
||||
case 'eng_yd':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.9144
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 3
|
||||
break;
|
||||
case 'eng_ft':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.3048
|
||||
lengthInfo.eng_ft = parseFloat(lengthInfo[key] as string) * 1
|
||||
break;
|
||||
case 'eng_in':
|
||||
lengthInfo.m = parseFloat(lengthInfo[key] as string) * 0.0254
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//米转换成其他单位
|
||||
let mVal = lengthInfo.m as number
|
||||
//中国传统单位处理
|
||||
let chiVal = mVal * 3
|
||||
if (['tradition_li', 'tradition_zhang', 'tradition_chi', 'tradition_cun', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
|
||||
chiVal = (lengthInfo.tradition_chi == '' ? chiVal : lengthInfo.tradition_chi) as number
|
||||
}
|
||||
//英制处理
|
||||
let engFtVal = mVal / 0.3048
|
||||
if (['eng_fm', 'eng_mi', 'eng_fur', 'eng_yd', 'eng_ft'].includes(key)) {
|
||||
engFtVal = (lengthInfo.eng_ft == '' ? mVal / 0.3048 : lengthInfo.eng_ft) as number
|
||||
}
|
||||
lengthInfo.km = mVal / 1000
|
||||
lengthInfo.dm = mVal * 10
|
||||
lengthInfo.cm = mVal * 100
|
||||
lengthInfo.mm = mVal * 1000
|
||||
lengthInfo.dmm = mVal * 10000
|
||||
lengthInfo.um = mVal * 1000000
|
||||
lengthInfo.nm = mVal * 1000000000
|
||||
lengthInfo.tradition_li = mVal / 500
|
||||
lengthInfo.tradition_chi = chiVal
|
||||
lengthInfo.tradition_zhang = chiVal / 10
|
||||
lengthInfo.tradition_cun = chiVal / 0.1
|
||||
lengthInfo.tradition_fen = chiVal / 0.01
|
||||
lengthInfo.tradition_mill = chiVal / 0.001
|
||||
lengthInfo.tradition_hao = chiVal / 0.0001
|
||||
lengthInfo.eng_nmi = mVal / 1852
|
||||
lengthInfo.eng_ft = engFtVal
|
||||
lengthInfo.eng_fm = engFtVal / 6
|
||||
lengthInfo.eng_mi = engFtVal / 5280
|
||||
lengthInfo.eng_fur = engFtVal / 660
|
||||
lengthInfo.eng_yd = engFtVal / 3
|
||||
lengthInfo.eng_in = engFtVal * 12
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际长度单位(公制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">公里(km)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.km"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('km')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">米(m)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.m"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('m')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分米(dm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.dm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">厘米(cm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.cm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('cm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫米(mm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.mm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">丝(dmm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.dmm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dmm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">微米(um)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.um"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('um')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">纳米(nm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.nm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('nm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">中国传统长度单位(市制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">里</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_li"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_li')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">丈</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_zhang"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_zhang')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">尺</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_chi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_chi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">寸</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_cun"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_cun')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_fen"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_fen')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">厘</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_mill"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_mill')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.tradition_hao"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('tradition_hao')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<el-divider content-position="left">英制长度单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">海里(nmi)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_nmi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_nmi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英寻(fm)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_fm"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_fm')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英里(mi)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_mi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_mi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">弗隆(fur)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_fur"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_fur')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">码(yd)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_yd"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_yd')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英尺(ft)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_ft"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_ft')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英寸(in)</el-text>
|
||||
<el-input
|
||||
v-model="lengthInfo.eng_in"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
type="number"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_in')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 45%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 5rem/* 80px */;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
w: '',
|
||||
mmw: '',
|
||||
kw: '',
|
||||
mw: '',
|
||||
gw: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成瓦
|
||||
switch (key) {
|
||||
case 'w':
|
||||
info.w = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'mmw':
|
||||
info.w = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
case 'kw':
|
||||
info.w = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'mw':
|
||||
info.w = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'gw':
|
||||
info.w = parseFloat(info[key] as string) * 1000000000
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.w as number
|
||||
info.mmw = val / 0.001
|
||||
info.kw = val / 1000
|
||||
info.mw = val / 1000000
|
||||
info.gw = val / 1000000000
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">功率单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">瓦(W)</el-text>
|
||||
<el-input
|
||||
v-model="info.w"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('w')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫瓦(mW)</el-text>
|
||||
<el-input
|
||||
v-model="info.mmw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mmw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千瓦(kW)</el-text>
|
||||
<el-input
|
||||
v-model="info.kw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兆瓦(MW)</el-text>
|
||||
<el-input
|
||||
v-model="info.mw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">亿瓦(GW)</el-text>
|
||||
<el-input
|
||||
v-model="info.gw"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('gw')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,193 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
pa: '',
|
||||
hpa: '',
|
||||
kpa: '',
|
||||
mpa: '',
|
||||
bar: '',
|
||||
torr: '',
|
||||
psi: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成帕
|
||||
switch (key) {
|
||||
case 'pa':
|
||||
info.pa = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'hpa':
|
||||
info.pa = parseFloat(info[key] as string) * 100
|
||||
break;
|
||||
case 'kpa':
|
||||
info.pa = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'mpa':
|
||||
info.pa = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'bar':
|
||||
info.pa = parseFloat(info[key] as string) * 100000
|
||||
break;
|
||||
case 'torr':
|
||||
info.pa = parseFloat(info[key] as string) * 133.322368
|
||||
break;
|
||||
case 'psi':
|
||||
info.pa = parseFloat(info[key] as string) * 6894.76
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.pa as number
|
||||
info.hpa = val / 100
|
||||
info.kpa = val / 1000
|
||||
info.mpa = val / 1000000
|
||||
info.bar = val / 100000
|
||||
info.torr = val / 133.322368
|
||||
info.psi = val / 6894.76
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">压力单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">帕(Pa)</el-text>
|
||||
<el-input
|
||||
v-model="info.pa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('pa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">百帕(hPa)</el-text>
|
||||
<el-input
|
||||
v-model="info.hpa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('hpa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千帕(kPa)</el-text>
|
||||
<el-input
|
||||
v-model="info.kpa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kpa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兆帕(MPa)</el-text>
|
||||
<el-input
|
||||
v-model="info.mpa"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mpa')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">巴(bar)</el-text>
|
||||
<el-input
|
||||
v-model="info.bar"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('bar')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">托(torr)</el-text>
|
||||
<el-input
|
||||
v-model="info.torr"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('torr')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text" style="font-size: 0.8rem;;">磅力/平方英寸(psi)</el-text>
|
||||
<el-input
|
||||
v-model="info.psi"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('psi')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
c: '',
|
||||
f: '',
|
||||
k: '',
|
||||
re: '',
|
||||
r: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成摄氏度
|
||||
switch (key) {
|
||||
case 'c':
|
||||
info.c = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'f':
|
||||
info.c = parseFloat(info[key] as string) * -17.2222222
|
||||
break;
|
||||
case 'k':
|
||||
info.c = parseFloat(info[key] as string) * -272.15
|
||||
break;
|
||||
case 're':
|
||||
info.c = parseFloat(info[key] as string) * 1.25
|
||||
break;
|
||||
case 'r':
|
||||
info.c = parseFloat(info[key] as string) * -272.5944444
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.c as number
|
||||
info.f = 32 + (val * 1.8)
|
||||
info.k = 273.15 + val
|
||||
info.re = val / 1.25
|
||||
info.r = (val + 273.15) * 1.8
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际温度单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">摄氏度(℃)</el-text>
|
||||
<el-input
|
||||
v-model="info.c"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('c')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">华氏度(℉)</el-text>
|
||||
<el-input
|
||||
v-model="info.f"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('f')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">开氏度(K)</el-text>
|
||||
<el-input
|
||||
v-model="info.k"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('k')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">列氏度(°Re)</el-text>
|
||||
<el-input
|
||||
v-model="info.re"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('re')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">兰氏度(°R)</el-text>
|
||||
<el-input
|
||||
v-model="info.r"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('r')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,210 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
year: '',
|
||||
month: '',
|
||||
d: '',
|
||||
h: '',
|
||||
min: '',
|
||||
s: '',
|
||||
ms: '',
|
||||
week: ''
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
//转换成秒
|
||||
switch (key) {
|
||||
case 'year':
|
||||
info.s = parseFloat(info[key] as string) * 31536000
|
||||
break;
|
||||
case 'month':
|
||||
info.s = parseFloat(info[key] as string) * 2629800
|
||||
break;
|
||||
case 'd':
|
||||
info.s = parseFloat(info[key] as string) * 86400
|
||||
break;
|
||||
case 'h':
|
||||
info.s = parseFloat(info[key] as string) * 3600
|
||||
break;
|
||||
case 'min':
|
||||
info.s = parseFloat(info[key] as string) * 60
|
||||
break;
|
||||
case 's':
|
||||
info.s = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'ms':
|
||||
info.s = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
case 'week':
|
||||
info.s = parseFloat(info[key] as string) * 604800
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.s as number
|
||||
info.year = val / 31536000
|
||||
info.month = info.year * 12
|
||||
info.d = val / 86400
|
||||
info.h = val / 3600
|
||||
info.min = val / 60
|
||||
info.ms = val / 0.001
|
||||
info.week = val / 604800
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际时间单位</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">年(year)</el-text>
|
||||
<el-input
|
||||
v-model="info.year"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('year')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">月(month)</el-text>
|
||||
<el-input
|
||||
v-model="info.month"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('month')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">日(d)</el-text>
|
||||
<el-input
|
||||
v-model="info.d"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('d')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">时(h)</el-text>
|
||||
<el-input
|
||||
v-model="info.h"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('h')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">分(min)</el-text>
|
||||
<el-input
|
||||
v-model="info.min"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('min')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">秒(s)</el-text>
|
||||
<el-input
|
||||
v-model="info.s"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('s')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫秒(ms)</el-text>
|
||||
<el-input
|
||||
v-model="info.ms"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('ms')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">周(week)</el-text>
|
||||
<el-input
|
||||
v-model="info.week"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('week')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
import DetailHeader from '@/components/Layout/DetailHeader/DetailHeader.vue'
|
||||
import Length from './Length.vue'
|
||||
import Area from './Area.vue'
|
||||
import Heat from './Heat.vue'
|
||||
import Power from './Power.vue'
|
||||
import Pressure from './Pressure.vue'
|
||||
import Temperature from './Temperature.vue'
|
||||
import Time from './Time.vue'
|
||||
import Weight from './Weight.vue'
|
||||
const info = reactive({
|
||||
title: "单位转换",
|
||||
activeName: 'lengthTab',
|
||||
})
|
||||
|
||||
const handleClick = () => {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex flex-col mt-3 ml-4 flex-1 mr-10">
|
||||
<DetailHeader :title="info.title"></DetailHeader>
|
||||
<div>
|
||||
<div>
|
||||
<el-tabs v-model="info.activeName" class="demo-tabs" @tab-click="handleClick">
|
||||
<el-tab-pane label="长度" name="lengthTab">
|
||||
<Length/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="面积" name="areaTab">
|
||||
<Area/>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="体积" name="lengthTab">体积</el-tab-pane> -->
|
||||
<el-tab-pane label="重量" name="weightTab">
|
||||
<Weight/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="时间" name="timeTab">
|
||||
<Time/>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="角度" name="fourth">角度</el-tab-pane> -->
|
||||
<!-- <el-tab-pane label="速度" name="fourth">速度</el-tab-pane> -->
|
||||
<el-tab-pane label="温度" name="temperatureTab">
|
||||
<Temperature/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="压力" name="pressureTab">
|
||||
<Pressure/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="热量" name="heatTab">
|
||||
<Heat/>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="功率" name="powerTab">
|
||||
<Power/>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane label="字节" name="fourth">字节</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 45%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 5rem/* 80px */;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,447 @@
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const info: {
|
||||
[key: string]: string|number
|
||||
} = reactive({
|
||||
t: '',
|
||||
kg: '',
|
||||
g: '',
|
||||
mg: '',
|
||||
|
||||
jin: '',
|
||||
liang: '',
|
||||
qian: '',
|
||||
dan: '',
|
||||
|
||||
eng_lb: '',
|
||||
eng_oz: '',
|
||||
eng_st: '',
|
||||
eng_cwt: '',
|
||||
eng_dr: '',
|
||||
eng_gr: '',
|
||||
eng_lt: '',
|
||||
|
||||
eng_lbt: '',
|
||||
eng_ozt: '',
|
||||
eng_grain: '',
|
||||
eng_dwt: '',
|
||||
})
|
||||
|
||||
//clear
|
||||
const clear = () => {
|
||||
for (let item in info) {
|
||||
info[item] = ''
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 转换
|
||||
* @param type
|
||||
*/
|
||||
const tran = (key: string) => {
|
||||
switch (key) {
|
||||
case 't':
|
||||
info.g = parseFloat(info[key] as string) * 1000000
|
||||
break;
|
||||
case 'kg':
|
||||
info.g = parseFloat(info[key] as string) * 1000
|
||||
break;
|
||||
case 'g':
|
||||
info.g = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'mg':
|
||||
info.g = parseFloat(info[key] as string) * 0.001
|
||||
break;
|
||||
|
||||
case 'jin':
|
||||
info.g = parseFloat(info[key] as string) * 500
|
||||
break;
|
||||
case 'liang':
|
||||
info.g = parseFloat(info[key] as string) * 50
|
||||
break;
|
||||
case 'qian':
|
||||
info.g = parseFloat(info[key] as string) * 5
|
||||
break;
|
||||
case 'dan':
|
||||
info.g = parseFloat(info[key] as string) * 50000
|
||||
break;
|
||||
|
||||
case 'eng_lb':
|
||||
info.g = parseFloat(info[key] as string) * 453.59237
|
||||
info.eng_lb = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'eng_oz':
|
||||
info.g = parseFloat(info[key] as string) * 28.3495231
|
||||
info.eng_lb = parseFloat(info[key] as string) * 0.0625
|
||||
break;
|
||||
case 'eng_st':
|
||||
info.g = parseFloat(info[key] as string) * 6350.29318
|
||||
info.eng_lb = parseFloat(info[key] as string) * 14
|
||||
break;
|
||||
case 'eng_cwt':
|
||||
info.g = parseFloat(info[key] as string) * 50802.34544
|
||||
info.eng_lb = parseFloat(info[key] as string) * 112
|
||||
break;
|
||||
case 'eng_dr':
|
||||
info.g = parseFloat(info[key] as string) * 1.7718452
|
||||
info.eng_lb = parseFloat(info[key] as string) * 0.0039063
|
||||
break;
|
||||
case 'eng_gr':
|
||||
info.g = parseFloat(info[key] as string) * 0.0647989
|
||||
info.eng_lb = parseFloat(info[key] as string) * 0.0001429
|
||||
break;
|
||||
case 'eng_lt':
|
||||
info.g = parseFloat(info[key] as string) * 1016046.9088
|
||||
info.eng_lb = parseFloat(info[key] as string) * 2240
|
||||
break;
|
||||
|
||||
case 'eng_lbt':
|
||||
info.g = parseFloat(info[key] as string) * 373.2417216
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 1
|
||||
break;
|
||||
case 'eng_ozt':
|
||||
info.g = parseFloat(info[key] as string) * 31.1034768
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 0.0833333
|
||||
break;
|
||||
case 'eng_grain':
|
||||
info.g = parseFloat(info[key] as string) * 0.0647989
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 0.0001736
|
||||
break;
|
||||
case 'eng_dwt':
|
||||
info.g = parseFloat(info[key] as string) * 1.5551738
|
||||
info.eng_lbt = parseFloat(info[key] as string) * 0.0041667
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
//转换成其他单位
|
||||
let val = info.g as number
|
||||
//英制 - 常衡制
|
||||
let engLbVal = val / 453.59237
|
||||
if (['tradition_mu', 'tradition_fen', 'tradition_mill', 'tradition_hao'].includes(key)) {
|
||||
engLbVal = (info.eng_lb == '' ? engLbVal : info.eng_lb) as number
|
||||
}
|
||||
//英制 - 金衡制
|
||||
let engLbtVal = val / 373.2417216
|
||||
if (['eng_lbt', 'eng_ozt', 'eng_grain', 'eng_dwt'].includes(key)) {
|
||||
engLbtVal = (info.eng_lbt == '' ? engLbtVal : info.eng_lbt) as number
|
||||
}
|
||||
info.t = val * 0.000001
|
||||
info.kg = val * 0.001
|
||||
info.mg = val * 1000
|
||||
|
||||
info.jin = val * 0.002
|
||||
info.liang = val * 0.02
|
||||
info.qian = val * 0.2
|
||||
info.dan = val * 0.00002
|
||||
|
||||
info.eng_lb = engLbVal * 1
|
||||
info.eng_oz = engLbVal * 16
|
||||
info.eng_st = engLbVal * 0.0714286
|
||||
info.eng_cwt = engLbVal * 0.0089286
|
||||
info.eng_dr = engLbVal * 256
|
||||
info.eng_gr = engLbVal * 7000
|
||||
info.eng_lt = engLbVal * 0.0004464
|
||||
|
||||
info.eng_lbt = engLbtVal * 1
|
||||
info.eng_ozt = engLbtVal * 12
|
||||
info.eng_grain = engLbtVal * 5760
|
||||
info.eng_dwt = engLbtVal * 240
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-divider content-position="left">国际重量单位(公制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">吨(t)</el-text>
|
||||
<el-input
|
||||
v-model="info.t"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('t')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">千克/公斤(kg)</el-text>
|
||||
<el-input
|
||||
v-model="info.kg"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('kg')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">克(g)</el-text>
|
||||
<el-input
|
||||
v-model="info.g"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('g')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">毫克(mg)</el-text>
|
||||
<el-input
|
||||
v-model="info.mg"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('mg')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ----- -->
|
||||
<el-divider content-position="left">中国传统重量单位(市制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">斤</el-text>
|
||||
<el-input
|
||||
v-model="info.jin"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('jin')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">两</el-text>
|
||||
<el-input
|
||||
v-model="info.liang"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('liang')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">钱</el-text>
|
||||
<el-input
|
||||
v-model="info.qian"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('qian')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">担</el-text>
|
||||
<el-input
|
||||
v-model="info.dan"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('dan')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">英制重量单位(常衡制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">磅(lb)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_lb"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_lb')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">盎司(oz)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_oz"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_oz')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英石(st)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_st"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_st')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英担(cwt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_cwt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_cwt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">打兰(dr)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_dr"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_dr')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">格令(gr)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_gr"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_gr')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">长吨(lt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_lt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_lt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-divider content-position="left">英制重量单位(金衡制)</el-divider>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">磅(lbt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_lbt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_lbt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">盎司(ozt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_ozt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_ozt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<!-- group -->
|
||||
<div class="custom-box">
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">格令</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_grain"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_grain')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div class="custom-box-single">
|
||||
<el-text class="custom-box-text">英钱(dwt)</el-text>
|
||||
<el-input
|
||||
v-model="info.eng_dwt"
|
||||
placeholder=""
|
||||
class="input-with-select"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="tran('eng_dwt')">转换</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full text-center">
|
||||
<el-button type="primary" @click="clear">清除全部</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.custom-box{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.75rem/* 12px */;
|
||||
}
|
||||
.custom-box-single{
|
||||
display: flex;
|
||||
width: 50%;
|
||||
}
|
||||
.custom-box-text{
|
||||
text-align: center;
|
||||
width: 10rem;
|
||||
}
|
||||
</style>
|
||||
@@ -120,6 +120,30 @@ export const constantRoute = [
|
||||
title: "手持弹幕"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/palettes',
|
||||
component: () => import('@/components/Palettes/Palettes.vue'),
|
||||
name: 'palettes',
|
||||
meta: {
|
||||
title: "色板"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/unit',
|
||||
component: () => import('@/components/Unit/Unit.vue'),
|
||||
name: 'unit',
|
||||
meta: {
|
||||
title: "单位转换"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/qrcode',
|
||||
component: () => import('@/components/Qrcode/Qrcode.vue'),
|
||||
name: 'qrcode',
|
||||
meta: {
|
||||
title: "二维码生成"
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
component: () => import('@/components/404/404.vue'),
|
||||
|
||||
+1
-1
@@ -6,5 +6,5 @@
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts", "./src/router/router.ts"]
|
||||
"include": ["vite.config.ts", "./src/router/router.ts", "./ssr.config.ts"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user