macrocc
/
scrollTable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首次提交

main
wanghongjian 2024-03-06 10:01:58 +08:00
commit 2c386f4cd6
14 changed files with 1224 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
.gitignore vendored 100644
View File

@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

3
.vscode/extensions.json vendored 100644
View File

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

7
README.md 100644
View File

@ -0,0 +1,7 @@
# Vue 3 + Vite
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
## Recommended IDE Setup
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).

13
index.html 100644
View File

@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

19
package.json 100644
View File

@ -0,0 +1,19 @@
{
"name": "gis-bim",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.3.11"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.2",
"sass": "^1.71.1",
"vite": "^5.0.8"
}
}

707
pnpm-lock.yaml 100644
View File

@ -0,0 +1,707 @@
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
vue:
specifier: ^3.3.11
version: 3.4.19
devDependencies:
'@vitejs/plugin-vue':
specifier: ^4.5.2
version: 4.6.2(vite@5.1.3)(vue@3.4.19)
sass:
specifier: ^1.71.1
version: 1.71.1
vite:
specifier: ^5.0.8
version: 5.1.3(sass@1.71.1)
packages:
/@babel/helper-string-parser@7.23.4:
resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==}
engines: {node: '>=6.9.0'}
/@babel/helper-validator-identifier@7.22.20:
resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==}
engines: {node: '>=6.9.0'}
/@babel/parser@7.23.9:
resolution: {integrity: sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA==}
engines: {node: '>=6.0.0'}
hasBin: true
dependencies:
'@babel/types': 7.23.9
/@babel/types@7.23.9:
resolution: {integrity: sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q==}
engines: {node: '>=6.9.0'}
dependencies:
'@babel/helper-string-parser': 7.23.4
'@babel/helper-validator-identifier': 7.22.20
to-fast-properties: 2.0.0
/@esbuild/aix-ppc64@0.19.12:
resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==}
engines: {node: '>=12'}
cpu: [ppc64]
os: [aix]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-arm64@0.19.12:
resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==}
engines: {node: '>=12'}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-arm@0.19.12:
resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==}
engines: {node: '>=12'}
cpu: [arm]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/android-x64@0.19.12:
resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==}
engines: {node: '>=12'}
cpu: [x64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-arm64@0.19.12:
resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==}
engines: {node: '>=12'}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/darwin-x64@0.19.12:
resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==}
engines: {node: '>=12'}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-arm64@0.19.12:
resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==}
engines: {node: '>=12'}
cpu: [arm64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/freebsd-x64@0.19.12:
resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==}
engines: {node: '>=12'}
cpu: [x64]
os: [freebsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm64@0.19.12:
resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==}
engines: {node: '>=12'}
cpu: [arm64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-arm@0.19.12:
resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==}
engines: {node: '>=12'}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ia32@0.19.12:
resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==}
engines: {node: '>=12'}
cpu: [ia32]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-loong64@0.19.12:
resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==}
engines: {node: '>=12'}
cpu: [loong64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-mips64el@0.19.12:
resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==}
engines: {node: '>=12'}
cpu: [mips64el]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-ppc64@0.19.12:
resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==}
engines: {node: '>=12'}
cpu: [ppc64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-riscv64@0.19.12:
resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==}
engines: {node: '>=12'}
cpu: [riscv64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-s390x@0.19.12:
resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==}
engines: {node: '>=12'}
cpu: [s390x]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/linux-x64@0.19.12:
resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==}
engines: {node: '>=12'}
cpu: [x64]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@esbuild/netbsd-x64@0.19.12:
resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==}
engines: {node: '>=12'}
cpu: [x64]
os: [netbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/openbsd-x64@0.19.12:
resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==}
engines: {node: '>=12'}
cpu: [x64]
os: [openbsd]
requiresBuild: true
dev: true
optional: true
/@esbuild/sunos-x64@0.19.12:
resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==}
engines: {node: '>=12'}
cpu: [x64]
os: [sunos]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-arm64@0.19.12:
resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==}
engines: {node: '>=12'}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-ia32@0.19.12:
resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==}
engines: {node: '>=12'}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@esbuild/win32-x64@0.19.12:
resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==}
engines: {node: '>=12'}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@jridgewell/sourcemap-codec@1.4.15:
resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
/@rollup/rollup-android-arm-eabi@4.12.0:
resolution: {integrity: sha512-+ac02NL/2TCKRrJu2wffk1kZ+RyqxVUlbjSagNgPm94frxtr+XDL12E5Ll1enWskLrtrZ2r8L3wED1orIibV/w==}
cpu: [arm]
os: [android]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-android-arm64@4.12.0:
resolution: {integrity: sha512-OBqcX2BMe6nvjQ0Nyp7cC90cnumt8PXmO7Dp3gfAju/6YwG0Tj74z1vKrfRz7qAv23nBcYM8BCbhrsWqO7PzQQ==}
cpu: [arm64]
os: [android]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-darwin-arm64@4.12.0:
resolution: {integrity: sha512-X64tZd8dRE/QTrBIEs63kaOBG0b5GVEd3ccoLtyf6IdXtHdh8h+I56C2yC3PtC9Ucnv0CpNFJLqKFVgCYe0lOQ==}
cpu: [arm64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-darwin-x64@4.12.0:
resolution: {integrity: sha512-cc71KUZoVbUJmGP2cOuiZ9HSOP14AzBAThn3OU+9LcA1+IUqswJyR1cAJj3Mg55HbjZP6OLAIscbQsQLrpgTOg==}
cpu: [x64]
os: [darwin]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-arm-gnueabihf@4.12.0:
resolution: {integrity: sha512-a6w/Y3hyyO6GlpKL2xJ4IOh/7d+APaqLYdMf86xnczU3nurFTaVN9s9jOXQg97BE4nYm/7Ga51rjec5nfRdrvA==}
cpu: [arm]
os: [linux]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-arm64-gnu@4.12.0:
resolution: {integrity: sha512-0fZBq27b+D7Ar5CQMofVN8sggOVhEtzFUwOwPppQt0k+VR+7UHMZZY4y+64WJ06XOhBTKXtQB/Sv0NwQMXyNAA==}
cpu: [arm64]
os: [linux]
libc: [glibc]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-arm64-musl@4.12.0:
resolution: {integrity: sha512-eTvzUS3hhhlgeAv6bfigekzWZjaEX9xP9HhxB0Dvrdbkk5w/b+1Sxct2ZuDxNJKzsRStSq1EaEkVSEe7A7ipgQ==}
cpu: [arm64]
os: [linux]
libc: [musl]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-riscv64-gnu@4.12.0:
resolution: {integrity: sha512-ix+qAB9qmrCRiaO71VFfY8rkiAZJL8zQRXveS27HS+pKdjwUfEhqo2+YF2oI+H/22Xsiski+qqwIBxVewLK7sw==}
cpu: [riscv64]
os: [linux]
libc: [glibc]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-x64-gnu@4.12.0:
resolution: {integrity: sha512-TenQhZVOtw/3qKOPa7d+QgkeM6xY0LtwzR8OplmyL5LrgTWIXpTQg2Q2ycBf8jm+SFW2Wt/DTn1gf7nFp3ssVA==}
cpu: [x64]
os: [linux]
libc: [glibc]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-linux-x64-musl@4.12.0:
resolution: {integrity: sha512-LfFdRhNnW0zdMvdCb5FNuWlls2WbbSridJvxOvYWgSBOYZtgBfW9UGNJG//rwMqTX1xQE9BAodvMH9tAusKDUw==}
cpu: [x64]
os: [linux]
libc: [musl]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-win32-arm64-msvc@4.12.0:
resolution: {integrity: sha512-JPDxovheWNp6d7AHCgsUlkuCKvtu3RB55iNEkaQcf0ttsDU/JZF+iQnYcQJSk/7PtT4mjjVG8N1kpwnI9SLYaw==}
cpu: [arm64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-win32-ia32-msvc@4.12.0:
resolution: {integrity: sha512-fjtuvMWRGJn1oZacG8IPnzIV6GF2/XG+h71FKn76OYFqySXInJtseAqdprVTDTyqPxQOG9Exak5/E9Z3+EJ8ZA==}
cpu: [ia32]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@rollup/rollup-win32-x64-msvc@4.12.0:
resolution: {integrity: sha512-ZYmr5mS2wd4Dew/JjT0Fqi2NPB/ZhZ2VvPp7SmvPZb4Y1CG/LRcS6tcRo2cYU7zLK5A7cdbhWnnWmUjoI4qapg==}
cpu: [x64]
os: [win32]
requiresBuild: true
dev: true
optional: true
/@types/estree@1.0.5:
resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
dev: true
/@vitejs/plugin-vue@4.6.2(vite@5.1.3)(vue@3.4.19):
resolution: {integrity: sha512-kqf7SGFoG+80aZG6Pf+gsZIVvGSCKE98JbiWqcCV9cThtg91Jav0yvYFC9Zb+jKetNGF6ZKeoaxgZfND21fWKw==}
engines: {node: ^14.18.0 || >=16.0.0}
peerDependencies:
vite: ^4.0.0 || ^5.0.0
vue: ^3.2.25
dependencies:
vite: 5.1.3(sass@1.71.1)
vue: 3.4.19
dev: true
/@vue/compiler-core@3.4.19:
resolution: {integrity: sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==}
dependencies:
'@babel/parser': 7.23.9
'@vue/shared': 3.4.19
entities: 4.5.0
estree-walker: 2.0.2
source-map-js: 1.0.2
/@vue/compiler-dom@3.4.19:
resolution: {integrity: sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==}
dependencies:
'@vue/compiler-core': 3.4.19
'@vue/shared': 3.4.19
/@vue/compiler-sfc@3.4.19:
resolution: {integrity: sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==}
dependencies:
'@babel/parser': 7.23.9
'@vue/compiler-core': 3.4.19
'@vue/compiler-dom': 3.4.19
'@vue/compiler-ssr': 3.4.19
'@vue/shared': 3.4.19
estree-walker: 2.0.2
magic-string: 0.30.7
postcss: 8.4.35
source-map-js: 1.0.2
/@vue/compiler-ssr@3.4.19:
resolution: {integrity: sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==}
dependencies:
'@vue/compiler-dom': 3.4.19
'@vue/shared': 3.4.19
/@vue/reactivity@3.4.19:
resolution: {integrity: sha512-+VcwrQvLZgEclGZRHx4O2XhyEEcKaBi50WbxdVItEezUf4fqRh838Ix6amWTdX0CNb/b6t3Gkz3eOebfcSt+UA==}
dependencies:
'@vue/shared': 3.4.19
/@vue/runtime-core@3.4.19:
resolution: {integrity: sha512-/Z3tFwOrerJB/oyutmJGoYbuoadphDcJAd5jOuJE86THNZji9pYjZroQ2NFsZkTxOq0GJbb+s2kxTYToDiyZzw==}
dependencies:
'@vue/reactivity': 3.4.19
'@vue/shared': 3.4.19
/@vue/runtime-dom@3.4.19:
resolution: {integrity: sha512-IyZzIDqfNCF0OyZOauL+F4yzjMPN2rPd8nhqPP2N1lBn3kYqJpPHHru+83Rkvo2lHz5mW+rEeIMEF9qY3PB94g==}
dependencies:
'@vue/runtime-core': 3.4.19
'@vue/shared': 3.4.19
csstype: 3.1.3
/@vue/server-renderer@3.4.19(vue@3.4.19):
resolution: {integrity: sha512-eAj2p0c429RZyyhtMRnttjcSToch+kTWxFPHlzGMkR28ZbF1PDlTcmGmlDxccBuqNd9iOQ7xPRPAGgPVj+YpQw==}
peerDependencies:
vue: 3.4.19
dependencies:
'@vue/compiler-ssr': 3.4.19
'@vue/shared': 3.4.19
vue: 3.4.19
/@vue/shared@3.4.19:
resolution: {integrity: sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==}
/anymatch@3.1.3:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'}
dependencies:
normalize-path: 3.0.0
picomatch: 2.3.1
dev: true
/binary-extensions@2.2.0:
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
engines: {node: '>=8'}
dev: true
/braces@3.0.2:
resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
engines: {node: '>=8'}
dependencies:
fill-range: 7.0.1
dev: true
/chokidar@3.6.0:
resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
engines: {node: '>= 8.10.0'}
dependencies:
anymatch: 3.1.3
braces: 3.0.2
glob-parent: 5.1.2
is-binary-path: 2.1.0
is-glob: 4.0.3
normalize-path: 3.0.0
readdirp: 3.6.0
optionalDependencies:
fsevents: 2.3.3
dev: true
/csstype@3.1.3:
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
/entities@4.5.0:
resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==}
engines: {node: '>=0.12'}
/esbuild@0.19.12:
resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==}
engines: {node: '>=12'}
hasBin: true
requiresBuild: true
optionalDependencies:
'@esbuild/aix-ppc64': 0.19.12
'@esbuild/android-arm': 0.19.12
'@esbuild/android-arm64': 0.19.12
'@esbuild/android-x64': 0.19.12
'@esbuild/darwin-arm64': 0.19.12
'@esbuild/darwin-x64': 0.19.12
'@esbuild/freebsd-arm64': 0.19.12
'@esbuild/freebsd-x64': 0.19.12
'@esbuild/linux-arm': 0.19.12
'@esbuild/linux-arm64': 0.19.12
'@esbuild/linux-ia32': 0.19.12
'@esbuild/linux-loong64': 0.19.12
'@esbuild/linux-mips64el': 0.19.12
'@esbuild/linux-ppc64': 0.19.12
'@esbuild/linux-riscv64': 0.19.12
'@esbuild/linux-s390x': 0.19.12
'@esbuild/linux-x64': 0.19.12
'@esbuild/netbsd-x64': 0.19.12
'@esbuild/openbsd-x64': 0.19.12
'@esbuild/sunos-x64': 0.19.12
'@esbuild/win32-arm64': 0.19.12
'@esbuild/win32-ia32': 0.19.12
'@esbuild/win32-x64': 0.19.12
dev: true
/estree-walker@2.0.2:
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
/fill-range@7.0.1:
resolution: {integrity: sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==}
engines: {node: '>=8'}
dependencies:
to-regex-range: 5.0.1
dev: true
/fsevents@2.3.3:
resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==}
engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0}
os: [darwin]
requiresBuild: true
dev: true
optional: true
/glob-parent@5.1.2:
resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
engines: {node: '>= 6'}
dependencies:
is-glob: 4.0.3
dev: true
/immutable@4.3.5:
resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==}
dev: true
/is-binary-path@2.1.0:
resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
engines: {node: '>=8'}
dependencies:
binary-extensions: 2.2.0
dev: true
/is-extglob@2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'}
dev: true
/is-glob@4.0.3:
resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
engines: {node: '>=0.10.0'}
dependencies:
is-extglob: 2.1.1
dev: true
/is-number@7.0.0:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
dev: true
/magic-string@0.30.7:
resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
engines: {node: '>=12'}
dependencies:
'@jridgewell/sourcemap-codec': 1.4.15
/nanoid@3.3.7:
resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true
/normalize-path@3.0.0:
resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
engines: {node: '>=0.10.0'}
dev: true
/picocolors@1.0.0:
resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
/picomatch@2.3.1:
resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
engines: {node: '>=8.6'}
dev: true
/postcss@8.4.35:
resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
engines: {node: ^10 || ^12 || >=14}
dependencies:
nanoid: 3.3.7
picocolors: 1.0.0
source-map-js: 1.0.2
/readdirp@3.6.0:
resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==}
engines: {node: '>=8.10.0'}
dependencies:
picomatch: 2.3.1
dev: true
/rollup@4.12.0:
resolution: {integrity: sha512-wz66wn4t1OHIJw3+XU7mJJQV/2NAfw5OAk6G6Hoo3zcvz/XOfQ52Vgi+AN4Uxoxi0KBBwk2g8zPrTDA4btSB/Q==}
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
hasBin: true
dependencies:
'@types/estree': 1.0.5
optionalDependencies:
'@rollup/rollup-android-arm-eabi': 4.12.0
'@rollup/rollup-android-arm64': 4.12.0
'@rollup/rollup-darwin-arm64': 4.12.0
'@rollup/rollup-darwin-x64': 4.12.0
'@rollup/rollup-linux-arm-gnueabihf': 4.12.0
'@rollup/rollup-linux-arm64-gnu': 4.12.0
'@rollup/rollup-linux-arm64-musl': 4.12.0
'@rollup/rollup-linux-riscv64-gnu': 4.12.0
'@rollup/rollup-linux-x64-gnu': 4.12.0
'@rollup/rollup-linux-x64-musl': 4.12.0
'@rollup/rollup-win32-arm64-msvc': 4.12.0
'@rollup/rollup-win32-ia32-msvc': 4.12.0
'@rollup/rollup-win32-x64-msvc': 4.12.0
fsevents: 2.3.3
dev: true
/sass@1.71.1:
resolution: {integrity: sha512-wovtnV2PxzteLlfNzbgm1tFXPLoZILYAMJtvoXXkD7/+1uP41eKkIt1ypWq5/q2uT94qHjXehEYfmjKOvjL9sg==}
engines: {node: '>=14.0.0'}
hasBin: true
dependencies:
chokidar: 3.6.0
immutable: 4.3.5
source-map-js: 1.0.2
dev: true
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
/to-fast-properties@2.0.0:
resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==}
engines: {node: '>=4'}
/to-regex-range@5.0.1:
resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
engines: {node: '>=8.0'}
dependencies:
is-number: 7.0.0
dev: true
/vite@5.1.3(sass@1.71.1):
resolution: {integrity: sha512-UfmUD36DKkqhi/F75RrxvPpry+9+tTkrXfMNZD+SboZqBCMsxKtO52XeGzzuh7ioz+Eo/SYDBbdb0Z7vgcDJew==}
engines: {node: ^18.0.0 || >=20.0.0}
hasBin: true
peerDependencies:
'@types/node': ^18.0.0 || >=20.0.0
less: '*'
lightningcss: ^1.21.0
sass: '*'
stylus: '*'
sugarss: '*'
terser: ^5.4.0
peerDependenciesMeta:
'@types/node':
optional: true
less:
optional: true
lightningcss:
optional: true
sass:
optional: true
stylus:
optional: true
sugarss:
optional: true
terser:
optional: true
dependencies:
esbuild: 0.19.12
postcss: 8.4.35
rollup: 4.12.0
sass: 1.71.1
optionalDependencies:
fsevents: 2.3.3
dev: true
/vue@3.4.19:
resolution: {integrity: sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==}
peerDependencies:
typescript: '*'
peerDependenciesMeta:
typescript:
optional: true
dependencies:
'@vue/compiler-dom': 3.4.19
'@vue/compiler-sfc': 3.4.19
'@vue/runtime-dom': 3.4.19
'@vue/server-renderer': 3.4.19(vue@3.4.19)
'@vue/shared': 3.4.19

1
public/vite.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

89
src/App.vue 100644
View File

@ -0,0 +1,89 @@
<script setup>
import { ref } from 'vue';
import ScrollTable from './components/ScrollTable.vue';
const po = ref({
heads: ['职权名称', '单位', '状态', '操作'],
widths: [2, 1, 1, 1],
cellType: [, , 'status', 'button'],
datas: [
['企业投资项目核准', '行政许可', '已申请.red', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
['企业投资项目核准', '行政许可', '待申请', '详情'],
],
});
const po2 = ref({
heads: ['职权名称', '状态', '操作'],
widths: [2, 1, 1],
cellType: [, 'status', 'button'],
datas: [
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
['企业投资项目核准', '已申请', '详情'],
],
});
const po3 = ref({
heads: ['职权名称', '单位', '操作'],
widths: [2, 1, 1],
cellType: [, , 'button'],
datas: [
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
['企业投资项目核准', '行政许可', '详情'],
],
});
</script>
<template>
<div style="display: flex; gap: 20px">
<div style="width: 500px; height: 30vh">
<ScrollTable v-bind="po" key="1"></ScrollTable>
</div>
<div style="width: 500px; height: 40vh">
<ScrollTable v-bind="po2" key="2"></ScrollTable>
</div>
<div style="width: 500px; height: 70vh">
<ScrollTable v-bind="po3" key="2"></ScrollTable>
</div>
</div>
</template>
<style scoped></style>

1
src/assets/vue.svg 100644
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 496 B

224
src/components/Scroll.vue 100644
View File

@ -0,0 +1,224 @@
<template>
<div class="custom-list" ref="scrollBody" @mouseenter="mouseenterFunc" @mouseleave="mouseleaveFunc"
@mousewheel="mousewheelFunc">
<div class="list-body" :class="{
'list-body2': isHorizontal,
canScroll:!isCanScroll
}" ref="listBody" :style="{ transform: getScrollDistance() }">
<slot></slot>
</div>
<div class="list-body" :class="{
'list-body2': isHorizontal
}" ref="tBody" v-if="isCanScroll" :style="{ transform: getScrollDistance() }">
<slot></slot>
</div>
</div>
</template>
<script lang='ts' setup>
import {computed, ref, nextTick, onMounted } from 'vue';
//滚动距离
const scrollDistance = ref(0);
//滚动容器高度
const bodyHeight = ref(0);
//滚动容器宽度
const bodyWidth = ref(0);
//列表高度
const listHeight = ref(0);
//列表宽度
const listWidth = ref(0);
const isStop = ref(false);
const animationFrame = ref();
const isCanScroll = ref(true);
const scrollBody = ref<any>(null);
const listBody = ref<any>(null);
const props = defineProps(
{
steep: {
//滚动速度
type: Number,
default: 1
},
scrollDirection: {
//滚动方向
type: String,
default: "top"
},
isRoller: {
//是否可以滑轮滚动
type: Boolean,
default: true
},
rollerScrollDistance: {
//滑轮滚动的距离
type: Number,
default: 20
},
data: Array
}
)
const isHorizontal = computed(() => {
return props.scrollDirection === "left" || props.scrollDirection === "right"
})
const start = () => {
//判断是否可以滚动函数
let isScrollFunc = (bodySize:number, listSize:number) => {
if (bodySize > listSize || props.steep == 0) {
scrollDistance.value = 0;
isCanScroll.value = !1;
}
};
isStop.value = !1;
//判断是否可以滚动
if (!isHorizontal.value) {
isScrollFunc(bodyHeight.value, listHeight.value);
} else {
isScrollFunc(bodyWidth.value, listWidth.value);
}
if (isCanScroll.value) {
run();
}
}
const run = () => {
//清空动画
clearAnimation();
animationFrame.value = window.requestAnimationFrame(() => {
//滚动主逻辑函数
let main = (listSize:number, bodySize:number) => {
let tempScrollDistance = Math.abs(scrollDistance.value);
if (scrollDistance.value < 0) {
let cc = 2 * listSize - bodySize;
if (tempScrollDistance > cc) {
scrollDistance.value = -(listSize - bodySize);
}
} else {
scrollDistance.value = -listSize;
}
};
//根据滚动方向判断使用高度或宽度控制效果
if (!isHorizontal.value) {
main(listHeight.value, bodyHeight.value);
} else {
main(listWidth.value, bodyWidth.value);
}
//判断滚动值
if (!isStop.value) {
if (
props.scrollDirection === "top" ||
props.scrollDirection === "left"
) {
scrollDistance.value -= props.steep;
} else if (
props.scrollDirection === "bottom" ||
props.scrollDirection === "right"
) {
scrollDistance.value += props.steep;
}
run();
}
});
}
const stop = () => {
isStop.value = !0;
clearAnimation();
}
const initData = () => {
nextTick(() => {
scrollDistance.value = 0;
isCanScroll.value = !0;
bodyHeight.value = scrollBody.value?.clientHeight;
bodyWidth.value = scrollBody.value?.clientWidth;
listHeight.value = listBody.value?.clientHeight;
listWidth.value = listBody.value?.clientWidth;
if (
(bodyHeight.value !== 0 &&
listHeight.value !== 0 &&
listHeight.value >= bodyHeight.value) ||
(bodyWidth.value !== 0 &&
listWidth.value !== 0 &&
listWidth.value >= bodyWidth.value)
) {
isCanScroll.value = true;
start();
} else {
isCanScroll.value = false;
}
});
}
// //获取滚动样式
const getScrollDistance = () => {
let style;
if (!isHorizontal.value) {
style = "translate(0px, " + scrollDistance.value + "px)";
} else {
style = "translate(" + scrollDistance.value + "px,0px)";
}
return style;
}
const clearAnimation = () => {
if (animationFrame.value) {
cancelAnimationFrame(animationFrame.value);
animationFrame.value = null;
}
}
const mouseenterFunc = () => {
stop();
}
const mouseleaveFunc = () => {
start();
}
const mousewheelFunc = (e:any) => {
if (!isCanScroll.value || !props.isRoller) {
return false;
}
let dis = e.deltaY;
if (dis > 0) {
scrollDistance.value -= props.rollerScrollDistance;
} else {
scrollDistance.value += props.rollerScrollDistance;
}
run();
}
onMounted(() => {
//初始化页面数据
initData();
}
)
</script>
<style scoped>
.custom-list {
white-space: nowrap;
font-size: 14px;
overflow: hidden;
height: 100%;
}
.list-body {
overflow: hidden;
white-space: nowrap;
font-size: 14px;
}
.canScroll{
height: 100%;
overflow: auto;
}
.list-body2 {
display: inline-block;
}
</style>

121
src/components/ScrollTable.vue 100644
View File

@ -0,0 +1,121 @@
<template>
<div class="scrolltable" :style="gridStyle">
<div class="row header">
<div class="cell">序号</div>
<div v-for="(head, i) in heads" :key="i" class="cell">{{ head }}</div>
</div>
<Scroll :data="datas" :steep="0.08" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
<div v-for="(rows, i) in datas" class="row content" key="i">
<div class="cell no">{{ i + 1 }}</div>
<div v-for="(row, r) in rows" :class="{ cell: true, [cellType[r]]: !!cellType[r], [row.split('.')[1]]: !!row.split('.')[1] }">{{ row.split('.')[0] }}</div>
</div>
</Scroll>
</div>
</template>
<script setup>
import { computed } from 'vue';
import Scroll from './Scroll.vue';
const props = defineProps({
heads: Array,
datas: Array,
widths: Array,
cellType: Array,
});
const gridStyle = computed(() => {
const { widths } = props;
return {
'--temp-col': `40px ${widths.map((i) => i + 'fr').join(' ')}`,
};
});
// const head = ref(["职权名称", "单位", "状态", "操作"]);
// const data = ref([
// ["企业投资项目核准", "行政许可", "待申请", "详情"],
// ["企业投资项目核准", "行政许可", "待申请", "详情"],
// ["企业投资项目核准", "行政许可", "待申请", "详情"],
// ["企业投资项目核准", "行政许可", "待申请", "详情"],
// ["企业投资项目核准", "行政许可", "待申请", "详情"],
// ["企业投资项目核准", "行政许可", "待申请", "详情"],
// ]);
</script>
<style lang="scss" scoped>
.scrolltable {
height: inherit;
overflow: hidden;
.row {
margin: 4px 0;
display: grid;
grid-template-columns: var(--temp-col);
padding: 4px 12px;
&.header {
background: linear-gradient(0deg, #1c3b68 -24%, rgba(47, 61, 82, 0.0885) 100%);
}
&:nth-child(2n) {
background: linear-gradient(90deg, rgba(16, 40, 73, 0) -2%, #102849 51%, rgba(16, 40, 73, 0) 100%);
}
&.content {
border: 2px solid;
&:hover {
border: 2px solid;
border-image: linear-gradient(90deg, rgba(93, 144, 194, 0) 2%, #5d90c2 50%, rgba(93, 144, 194, 0) 100%) 2;
.no::before {
--iconwidth: 16px;
content: ' ';
position: absolute;
display: block;
width: var(--iconwidth);
height: var(--iconwidth);
left: 5px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAAFsSURBVDiNnY+/T8JAFMe/r1CNGw4ODCZlcHDD0Q0GE9l0MJEN/wP4C/BmTRh1o4OJI7Aak3YybJiok0MhcTEMTQwEe6X3HPghRazgLe/u3n0+73vo9Ln86voZ/HNpPek3PJD15PpWqztYWUQA0OzKCjMXAYAZdU+pUja50V5aYDmcGK55DsCJSYMZZuBD5FLRIppsGp1BWbE6B49vx1UxTAkp8qnNhaKpoOq4Cd3XWww2ZgWTGjCZHPjibDcsotnD1YtbYGjVqMgMmFIqUdobiWj+wcWjazGQiZIAo68xIOLzjQ+p2kT8Fw+A0hpzJpSg+PB+pIFqkRjIJoK43N+yASCUoC+5gl+mawSbAhbX2aQ9ez8VnN69FXpDZfwAAZuYxM1BGPxOBOCw5hj6um4BMGY6dgws6rnthWAowSfFyp4/nk6wY0Eg7o9TkeB0TvrWMeI6HALZMWbRPFkOnCaQCDJDn7PP+Z2VwMn6At/Bn+5Lg6U+AAAAAElFTkSuQmCC')
center center no-repeat;
}
}
}
}
.cell {
color: #fff;
font-size: 16px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
&.button {
cursor: pointer;
background: linear-gradient(180deg, #b5f5ff 10%, #0285ff 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
&.status {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
&::before {
--iconwidth: 16px;
content: ' ';
display: block;
width: var(--iconwidth);
height: var(--iconwidth);
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAAXNSR0IArs4c6QAAAARzQklUCAgICHwIZIgAAADYSURBVBiVTY8xSkNBGAbnX/YZHwTUEwQ9QCptbGwsxcJSEWxt0z1IEbBIZ+sBxPIpSC4ggim0sxc8gabJLtnNfikEyRxgmDGA+Drec0s3crhDgEJ5K7mMNo+bL9PLzW7KPJu0zRoy+608py6FMCSFLiW2Ps77Ps77lNiSQjeFMLTFZPAJ1BXhwE7ufgA0ud5J1O8GwVuOGZRRR//+1JFZzA6ytxymgqOi2OjpagxQyqxBLIWbmtrznpLuBVvrkQYzq+zSAMLDWW8DDUy2/3egjwV2W188fq8AvYtk5QJg+FMAAAAASUVORK5CYII=')
center center no-repeat;
}
&.red { // 实例样式
&::before {
--iconwidth: 16px;
content: ' ';
display: block;
width: var(--iconwidth);
height: var(--iconwidth);
border-radius: var(--iconwidth);
background: red;
}
}
}
}
}
</style>

5
src/main.js 100644
View File

@ -0,0 +1,5 @@
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app')

3
src/style.css 100644
View File

@ -0,0 +1,3 @@
body {
background-color: #000;
}

7
vite.config.js 100644
View File

@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
})