zhangjianlong
/
multimedia-portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

核心技术雏形

Browse Source
main
zjlnb666 4 weeks ago
parent f6158bd485
commit 7d543eb202
17 changed files with 718 additions and 14 deletions
Show Stats Download Patch File Download Diff File

82
package-lock.json generated
Unescape Escape View File

@ -17,6 +17,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.2",
"@vitejs/plugin-vue-jsx": "^5.1.3",
"less": "^4.5.1",
"vite": "^7.2.4",
"vite-plugin-vue-devtools": "^8.0.5"
@ -1394,6 +1395,87 @@
"vue": "^3.2.25"
}
},
"node_modules/@vitejs/plugin-vue-jsx": {
"version": "5.1.3",
"resolved": "https://registry.npmmirror.com/@vitejs/plugin-vue-jsx/-/plugin-vue-jsx-5.1.3.tgz",
"integrity": "sha512-I6Zr8cYVr5WHMW5gNOP09DNqW9rgO8RX73Wa6Czgq/0ndpTfJM4vfDChfOT1+3KtdrNqilNBtNlFwVeB02ZzGw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/core": "^7.28.5",
"@babel/plugin-syntax-typescript": "^7.27.1",
"@babel/plugin-transform-typescript": "^7.28.5",
"@rolldown/pluginutils": "^1.0.0-beta.56",
"@vue/babel-plugin-jsx": "^2.0.1"
},
"engines": {
"node": "^20.19.0 || >=22.12.0"
},
"peerDependencies": {
"vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0",
"vue": "^3.0.0"
}
},
"node_modules/@vitejs/plugin-vue-jsx/node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.57",
"resolved": "https://registry.npmmirror.com/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.57.tgz",
"integrity": "sha512-aQNelgx14tGA+n2tNSa9x6/jeoCL9fkDeCei7nOKnHx0fEFRRMu5ReiITo+zZD5TzWDGGRjbSYCs93IfRIyTuQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@vitejs/plugin-vue-jsx/node_modules/@vue/babel-helper-vue-transform-on": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-2.0.1.tgz",
"integrity": "sha512-uZ66EaFbnnZSYqYEyplWvn46GhZ1KuYSThdT68p+am7MgBNbQ3hphTL9L+xSIsWkdktwhPYLwPgVWqo96jDdRA==",
"dev": true,
"license": "MIT"
},
"node_modules/@vitejs/plugin-vue-jsx/node_modules/@vue/babel-plugin-jsx": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-2.0.1.tgz",
"integrity": "sha512-a8CaLQjD/s4PVdhrLD/zT574ZNPnZBOY+IhdtKWRB4HRZ0I2tXBi5ne7d9eCfaYwp5gU5+4KIyFTV1W1YL9xZA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/helper-module-imports": "^7.27.1",
"@babel/helper-plugin-utils": "^7.27.1",
"@babel/plugin-syntax-jsx": "^7.27.1",
"@babel/template": "^7.27.2",
"@babel/traverse": "^7.28.4",
"@babel/types": "^7.28.4",
"@vue/babel-helper-vue-transform-on": "2.0.1",
"@vue/babel-plugin-resolve-type": "2.0.1",
"@vue/shared": "^3.5.22"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
}
}
},
"node_modules/@vitejs/plugin-vue-jsx/node_modules/@vue/babel-plugin-resolve-type": {
"version": "2.0.1",
"resolved": "https://registry.npmmirror.com/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-2.0.1.tgz",
"integrity": "sha512-ybwgIuRGRRBhOU37GImDoWQoz+TlSqap65qVI6iwg/J7FfLTLmMf97TS7xQH9I7Qtr/gp161kYVdhr1ZMraSYQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.27.1",
"@babel/helper-module-imports": "^7.27.1",
"@babel/helper-plugin-utils": "^7.27.1",
"@babel/parser": "^7.28.4",
"@vue/compiler-sfc": "^3.5.22"
},
"funding": {
"url": "https://github.com/sponsors/sxzz"
},
"peerDependencies": {
"@babel/core": "^7.0.0-0"
}
},
"node_modules/@vue/babel-helper-vue-transform-on": {
"version": "1.5.0",
"resolved": "https://registry.npmmirror.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.5.0.tgz",

1
package.json
Unescape Escape View File

@ -21,6 +21,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^6.0.2",
"@vitejs/plugin-vue-jsx": "^5.1.3",
"less": "^4.5.1",
"vite": "^7.2.4",
"vite-plugin-vue-devtools": "^8.0.5"

BIN
src/assets/img/Frame 253.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
src/assets/img/Frame 274.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

3
src/assets/img/tab-center.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2.77209" cy="2.77209" r="2.27209" fill="white" stroke="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 175 B

3
src/assets/img/tab-four-bottom.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M45.9308 22.9654C45.9308 35.6488 35.6488 45.9308 22.9654 45.9308C10.282 45.9308 0 35.6488 0 22.9654C0 10.282 10.282 0 22.9654 0C35.6488 0 45.9308 10.282 45.9308 22.9654ZM2.33001 22.9654C2.33001 34.362 11.5688 43.6008 22.9654 43.6008C34.362 43.6008 43.6008 34.362 43.6008 22.9654C43.6008 11.5688 34.362 2.33001 22.9654 2.33001C11.5688 2.33001 2.33001 11.5688 2.33001 22.9654Z" fill="white" fill-opacity="0.46"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 523 B

3
src/assets/img/tab-four-top.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M48.2347 24.1174C48.2347 37.437 37.437 48.2347 24.1174 48.2347C10.7977 48.2347 0 37.437 0 24.1174C0 10.7977 10.7977 0 24.1174 0C37.437 0 48.2347 10.7977 48.2347 24.1174ZM17.6847 24.1174C17.6847 27.67 20.5647 30.5501 24.1174 30.5501C27.67 30.5501 30.5501 27.67 30.5501 24.1174C30.5501 20.5647 27.67 17.6847 24.1174 17.6847C20.5647 17.6847 17.6847 20.5647 17.6847 24.1174Z" fill="white" fill-opacity="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 518 B

3
src/assets/img/tab-one-bottom.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="46" height="25" viewBox="0 0 46 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M44.6828 0.0043335C45.3238 -0.0517445 45.892 0.422474 45.9155 1.06546C46.0165 3.83004 45.6173 6.5935 44.7338 9.22179C43.7264 12.2186 42.1111 14.9752 39.989 17.3188C37.8669 19.6624 35.2838 21.5426 32.4014 22.8417C29.5189 24.1407 26.3993 24.8306 23.2379 24.8681C20.0765 24.9057 16.9414 24.29 14.029 23.0597C11.1166 21.8295 8.48951 20.0111 6.31239 17.7185C4.13528 15.4259 2.45499 12.7085 1.37676 9.73636C0.431135 7.12978 -0.0335372 4.37657 0.00188035 1.61037C0.0101177 0.967009 0.566869 0.479441 1.20899 0.52029C1.8511 0.56114 2.33508 1.115 2.33053 1.7584C2.31322 4.20415 2.73088 6.63675 3.56709 8.94175C4.53592 11.6123 6.04573 14.054 8.00196 16.114C9.9582 18.174 12.3187 19.8079 14.9357 20.9134C17.5526 22.0188 20.3696 22.572 23.2103 22.5383C26.0509 22.5046 28.854 21.8847 31.444 20.7174C34.034 19.5502 36.3551 17.8607 38.2618 15.7549C40.1686 13.6491 41.6201 11.1722 42.5252 8.47938C43.3065 6.15519 43.6663 3.71337 43.591 1.26871C43.5712 0.625605 44.0419 0.0604095 44.6828 0.0043335Z" fill="white" fill-opacity="0.46"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
src/assets/img/tab-one-top.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="43" height="21" viewBox="0 0 43 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-6.31809e-06 14.9782C1.5269 10.5437 4.41848 6.70644 8.26029 4.01638C12.1021 1.32631 16.6969 -0.0784661 21.3862 0.00338221C26.0754 0.0852305 30.6184 1.6495 34.364 4.472C38.1096 7.2945 40.8655 11.2303 42.2367 15.7154L26.6633 20.4767C26.2976 19.2804 25.5625 18.2306 24.5635 17.4778C23.5644 16.725 22.3527 16.3077 21.102 16.2859C19.8512 16.2641 18.6257 16.6388 17.601 17.3563C16.5763 18.0738 15.805 19.0973 15.3978 20.28L-6.31809e-06 14.9782Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 568 B

3
src/assets/img/tab-three-bottom.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M32.1786 0.664074C32.4506 0.0809426 33.1454 -0.173954 33.714 0.127176C37.9118 2.35036 41.3264 5.82638 43.473 10.0852C45.7948 14.6916 46.4982 19.9456 45.4697 25.0005C44.4413 30.0554 41.741 34.6169 37.8039 37.9499C33.8668 41.2829 28.9222 43.1933 23.7669 43.3733C18.6116 43.5534 13.5458 41.9925 9.38574 38.9423C5.22572 35.892 2.21378 31.53 0.835242 26.5592C-0.543298 21.5883 -0.208149 16.2981 1.78668 11.541C3.63102 7.14273 6.79474 3.437 10.8273 0.926403C11.3735 0.586342 12.0844 0.792147 12.3963 1.35489C12.7083 1.91763 12.5029 2.62394 11.9586 2.96712C8.38299 5.22178 5.57733 8.52649 3.93542 12.442C2.14298 16.7165 1.84184 21.47 3.08051 25.9365C4.31919 30.403 7.02555 34.3225 10.7635 37.0632C14.5014 39.804 19.0533 41.2065 23.6856 41.0447C28.3178 40.883 32.7608 39.1664 36.2984 36.1715C39.8361 33.1767 42.2624 29.078 43.1865 24.536C44.1106 19.9939 43.4786 15.273 41.3924 11.134C39.4813 7.34253 36.452 4.24158 32.7278 2.24185C32.1609 1.93746 31.9067 1.24721 32.1786 0.664074Z" fill="white" fill-opacity="0.46"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
src/assets/img/tab-three-top.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-0.000113487 1.20995C4.43436 -0.316957 9.23839 -0.400811 13.7234 0.97041L8.96217 16.5438C7.7659 16.1781 6.48454 16.2005 5.30176 16.6077L-0.000113487 1.20995Z" fill="white" fill-opacity="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 306 B

3
src/assets/img/tab-two-bottom.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="46" height="40" viewBox="0 0 46 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M37.5527 0.383203C37.9832 -0.0949478 38.7222 -0.135581 39.1779 0.318635C42.1092 3.24031 44.2019 6.90576 45.2242 10.931C46.3422 15.3334 46.1297 19.9685 44.6135 24.2501C43.0973 28.5317 40.3455 32.2675 36.7061 34.9852C33.0667 37.7028 28.7032 39.2803 24.1673 39.518C19.6314 39.7557 15.1269 38.643 11.2233 36.3206C7.31979 33.9983 4.19259 30.5705 2.23715 26.4709C0.281724 22.3712 -0.414103 17.7838 0.237665 13.2886C0.833605 9.17856 2.5317 5.31444 5.14151 2.10238C5.54724 1.60302 6.28642 1.56618 6.76457 1.99671C7.24272 2.42724 7.27849 3.1619 6.87562 3.66358C4.57263 6.53142 3.07337 9.96902 2.54356 13.623C1.95792 17.662 2.58315 21.7841 4.34019 25.4678C6.09723 29.1515 8.90716 32.2315 12.4146 34.3182C15.9221 36.405 19.9696 37.4047 24.0453 37.1911C28.121 36.9776 32.0419 35.5602 35.312 33.1182C38.5822 30.6763 41.0548 27.3195 42.4172 23.4723C43.7795 19.6251 43.9705 15.4603 42.9658 11.5046C42.057 7.92601 40.2066 4.66395 37.6165 2.05254C37.1634 1.59572 37.1222 0.861353 37.5527 0.383203Z" fill="white" fill-opacity="0.46"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
src/assets/img/tab-two-top.svg
Unescape Escape View File

@ -0,0 +1,3 @@
<svg width="27" height="18" viewBox="0 0 27 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M-4.1008e-05 4.70798C3.69572 1.82053 8.21071 0.177207 12.8978 0.0135289C17.585 -0.150149 22.2036 1.17422 26.0918 3.79683L16.9853 17.2977C15.9483 16.5982 14.7164 16.2449 13.4662 16.2886C12.216 16.3323 11.0118 16.7706 10.026 17.5407L-4.1008e-05 4.70798Z" fill="white" fill-opacity="0.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 399 B

110
src/components/technology/tabList.jsx
Unescape Escape View File

@ -0,0 +1,110 @@
import {defineComponent} from "vue";
export const TabTitle1 = defineComponent({
render() {
return (
<div>
<div class="svg">
<div class="svg-item">
<svg width="43" height="21" viewBox="0 0 43 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M-6.31809e-06 14.9782C1.5269 10.5437 4.41848 6.70644 8.26029 4.01638C12.1021 1.32631 16.6969 -0.0784661 21.3862 0.00338221C26.0754 0.0852305 30.6184 1.6495 34.364 4.472C38.1096 7.2945 40.8655 11.2303 42.2367 15.7154L26.6633 20.4767C26.2976 19.2804 25.5625 18.2306 24.5635 17.4778C23.5644 16.725 22.3527 16.3077 21.102 16.2859C19.8512 16.2641 18.6257 16.6388 17.601 17.3563C16.5763 18.0738 15.805 19.0973 15.3978 20.28L-6.31809e-06 14.9782Z"
fill="#b1b5b7"/>
</svg>
</div>
<div class="svg-item">
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2.77209" cy="2.77209" r="2.27209" fill="#b1b5b7" stroke="#b1b5b7"/>
</svg>
</div>
<div class="svg-item">
<svg width="46" height="25" viewBox="0 0 46 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M44.6828 0.0043335C45.3238 -0.0517445 45.892 0.422474 45.9155 1.06546C46.0165 3.83004 45.6173 6.5935 44.7338 9.22179C43.7264 12.2186 42.1111 14.9752 39.989 17.3188C37.8669 19.6624 35.2838 21.5426 32.4014 22.8417C29.5189 24.1407 26.3993 24.8306 23.2379 24.8681C20.0765 24.9057 16.9414 24.29 14.029 23.0597C11.1166 21.8295 8.48951 20.0111 6.31239 17.7185C4.13528 15.4259 2.45499 12.7085 1.37676 9.73636C0.431135 7.12978 -0.0335372 4.37657 0.00188035 1.61037C0.0101177 0.967009 0.566869 0.479441 1.20899 0.52029C1.8511 0.56114 2.33508 1.115 2.33053 1.7584C2.31322 4.20415 2.73088 6.63675 3.56709 8.94175C4.53592 11.6123 6.04573 14.054 8.00196 16.114C9.9582 18.174 12.3187 19.8079 14.9357 20.9134C17.5526 22.0188 20.3696 22.572 23.2103 22.5383C26.0509 22.5046 28.854 21.8847 31.444 20.7174C34.034 19.5502 36.3551 17.8607 38.2618 15.7549C40.1686 13.6491 41.6201 11.1722 42.5252 8.47938C43.3065 6.15519 43.6663 3.71337 43.591 1.26871C43.5712 0.625605 44.0419 0.0604095 44.6828 0.0043335Z"
fill="white" fill-opacity="0.46"/>
</svg>
</div>
</div>
心型指向
</div>
);
}
});
export const TabTitle2 = () => (
<div>
<div class="svg">
<div class="svg-item">
<svg width="27" height="18" viewBox="0 0 27 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M-4.1008e-05 4.70798C3.69572 1.82053 8.21071 0.177207 12.8978 0.0135289C17.585 -0.150149 22.2036 1.17422 26.0918 3.79683L16.9853 17.2977C15.9483 16.5982 14.7164 16.2449 13.4662 16.2886C12.216 16.3323 11.0118 16.7706 10.026 17.5407L-4.1008e-05 4.70798Z"
fill="#b1b5b7" />
</svg>
</div>
<div class="svg-item">
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2.77209" cy="2.77209" r="2.27209" fill="#b1b5b7" stroke="#b1b5b7e"/>
</svg>
</div>
<div class="svg-item">
<svg width="46" height="40" viewBox="0 0 46 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M37.5527 0.383203C37.9832 -0.0949478 38.7222 -0.135581 39.1779 0.318635C42.1092 3.24031 44.2019 6.90576 45.2242 10.931C46.3422 15.3334 46.1297 19.9685 44.6135 24.2501C43.0973 28.5317 40.3455 32.2675 36.7061 34.9852C33.0667 37.7028 28.7032 39.2803 24.1673 39.518C19.6314 39.7557 15.1269 38.643 11.2233 36.3206C7.31979 33.9983 4.19259 30.5705 2.23715 26.4709C0.281724 22.3712 -0.414103 17.7838 0.237665 13.2886C0.833605 9.17856 2.5317 5.31444 5.14151 2.10238C5.54724 1.60302 6.28642 1.56618 6.76457 1.99671C7.24272 2.42724 7.27849 3.1619 6.87562 3.66358C4.57263 6.53142 3.07337 9.96902 2.54356 13.623C1.95792 17.662 2.58315 21.7841 4.34019 25.4678C6.09723 29.1515 8.90716 32.2315 12.4146 34.3182C15.9221 36.405 19.9696 37.4047 24.0453 37.1911C28.121 36.9776 32.0419 35.5602 35.312 33.1182C38.5822 30.6763 41.0548 27.3195 42.4172 23.4723C43.7795 19.6251 43.9705 15.4603 42.9658 11.5046C42.057 7.92601 40.2066 4.66395 37.6165 2.05254C37.1634 1.59572 37.1222 0.861353 37.5527 0.383203Z"
fill="white" fill-opacity="0.46"/>
</svg>
</div>
</div>
超心型指向
</div>
);
export const TabTitle3 = () => (
<div>
<div class="svg">
<div class="svg-item">
<svg width="14" height="17" viewBox="0 0 14 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M-0.000113487 1.20995C4.43436 -0.316957 9.23839 -0.400811 13.7234 0.97041L8.96217 16.5438C7.7659 16.1781 6.48454 16.2005 5.30176 16.6077L-0.000113487 1.20995Z"
fill="#b1b5b7" />
</svg>
</div>
<div class="svg-item">
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2.77209" cy="2.77209" r="2.27209" fill="#b1b5b7" stroke="#b1b5b7"/>
</svg>
</div>
<div class="svg-item">
<svg width="46" height="44" viewBox="0 0 46 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M32.1786 0.664074C32.4506 0.0809426 33.1454 -0.173954 33.714 0.127176C37.9118 2.35036 41.3264 5.82638 43.473 10.0852C45.7948 14.6916 46.4982 19.9456 45.4697 25.0005C44.4413 30.0554 41.741 34.6169 37.8039 37.9499C33.8668 41.2829 28.9222 43.1933 23.7669 43.3733C18.6116 43.5534 13.5458 41.9925 9.38574 38.9423C5.22572 35.892 2.21378 31.53 0.835242 26.5592C-0.543298 21.5883 -0.208149 16.2981 1.78668 11.541C3.63102 7.14273 6.79474 3.437 10.8273 0.926403C11.3735 0.586342 12.0844 0.792147 12.3963 1.35489C12.7083 1.91763 12.5029 2.62394 11.9586 2.96712C8.38299 5.22178 5.57733 8.52649 3.93542 12.442C2.14298 16.7165 1.84184 21.47 3.08051 25.9365C4.31919 30.403 7.02555 34.3225 10.7635 37.0632C14.5014 39.804 19.0533 41.2065 23.6856 41.0447C28.3178 40.883 32.7608 39.1664 36.2984 36.1715C39.8361 33.1767 42.2624 29.078 43.1865 24.536C44.1106 19.9939 43.4786 15.273 41.3924 11.134C39.4813 7.34253 36.452 4.24158 32.7278 2.24185C32.1609 1.93746 31.9067 1.24721 32.1786 0.664074Z"
fill="white" fill-opacity="0.46"/>
</svg>
</div>
</div>
强指向
</div>
);
export const TabTitle4 = () => (
<div>
<div class="svg">
<div class="svg-item">
<svg width="49" height="49" viewBox="0 0 49 49" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M48.2347 24.1174C48.2347 37.437 37.437 48.2347 24.1174 48.2347C10.7977 48.2347 0 37.437 0 24.1174C0 10.7977 10.7977 0 24.1174 0C37.437 0 48.2347 10.7977 48.2347 24.1174ZM17.6847 24.1174C17.6847 27.67 20.5647 30.5501 24.1174 30.5501C27.67 30.5501 30.5501 27.67 30.5501 24.1174C30.5501 20.5647 27.67 17.6847 24.1174 17.6847C20.5647 17.6847 17.6847 20.5647 17.6847 24.1174Z"
fill="#b1b5b7" />
</svg>
</div>
<div class="svg-item">
<svg width="6" height="6" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="2.77209" cy="2.77209" r="2.27209" fill="#b1b5b7" stroke="#b1b5b7" />
</svg>
</div>
<div class="svg-item">
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M45.9308 22.9654C45.9308 35.6488 35.6488 45.9308 22.9654 45.9308C10.282 45.9308 0 35.6488 0 22.9654C0 10.282 10.282 0 22.9654 0C35.6488 0 45.9308 10.282 45.9308 22.9654ZM2.33001 22.9654C2.33001 34.362 11.5688 43.6008 22.9654 43.6008C34.362 43.6008 43.6008 34.362 43.6008 22.9654C43.6008 11.5688 34.362 2.33001 22.9654 2.33001C11.5688 2.33001 2.33001 11.5688 2.33001 22.9654Z"
fill="#b1b5b7" />
</svg>
</div>
</div>
全指向
</div>
);

482
src/components/technology/tecFive.vue
Unescape Escape View File

@ -1,4 +1,272 @@
<script setup>
import {ref, onMounted, onUnmounted, watch, computed, nextTick} from 'vue';
import * as echarts from 'echarts';
import centerIcon from '@/assets/img/Frame 253.png'
import pieBg from '@/assets/img/Frame 274.png'
import {TabTitle1,TabTitle2,TabTitle3,TabTitle4} from "@/components/technology/tabList.jsx";
const tabList=ref([
{
title:TabTitle1,
value:40
},
{
title:TabTitle2,
value:20
},
{
title:TabTitle3,
value:10
},
{
title:TabTitle4,
value:100
}
])
// 1. 定义容器引用
const chartRef = ref(null);
// 定义 ECharts 实例引用
let myChart = null;
// 响应式变量：存储显示区的占比（默认20%）
const showRatio = ref(tabList.value[0].value);
// 2. 初始化 ECharts 饼图
const initPieChart = () => {
// 获取容器 DOM 元素
const dom = chartRef.value;
if (!dom) return;
// 初始化 ECharts 实例
myChart = echarts.init(dom);
updatePieOption();
}
const updatePieOption=()=>{
if (!myChart) return;
// 计算两个扇区的数值（总和设为100，方便对应百分比）
const showValue = showRatio.value;
const transparentValue = 100 - showValue; // 计算显示区对应的角度（占比 * 3.6，因为100%对应360°）
const showAreaAngle = showValue * 3.6;
// 核心修改：叠加90°偏移，确保显示区中间对齐垂直向上（90°）
const startAngle = 90 + (showAreaAngle / 2);
// 提取显示区的渐变样式（复用，避免冗余代码）
const showAreaGradient = new echarts.graphic.RadialGradient(
0.5,
0.5,
0.8,
[
{ offset: 0, color: '#25C5D0' },
{ offset: 1, color: 'rgba(11, 224, 232, 0)' }
]
);
// 饼图配置项（核心功能配置）
const option = {
// 全局背景透明，避免遮挡背景图
backgroundColor: 'transparent',
// 图形组件：用于渲染背景图和中心图标
graphic: [
// ① 背景图片（层级最低，在饼图下方）
{
type: 'image',
id: 'pie-bg-image',
// 背景图样式：地址、宽高
style: {
// 替换为你的实际背景图 URL（本地图片放 public 文件夹，路径如 /bg.jpg；网络图片直接填完整URL）
image: pieBg,
width: chartRef.value.offsetWidth,
height: chartRef.value.offsetHeight
},
left: 'center', // 水平居中
top: 'center', // 垂直居中
z: -1 // 层级低于饼图（确保饼图在背景图上方）
},
// ② 中心图标（层级最高，在饼图上方）
{
type: 'image',
id: 'pie-center-icon',
style: {
// 替换为你的实际中心图标 URL（本地/网络地址均可）
image: centerIcon,
width: 84.82, // 图标宽度，可自定义
height: 84.82 // 图标高度，可自定义
},
left: 'center',
top: 'center',
z: 2 // 层级高于饼图（确保图标在饼图中心显示）
}
],
series: [
{
type: 'pie', // 饼图类型
radius: ['12%', '100%'], // 圆环内外半径（内半径40%，外半径70%，形成环形）
center: ['50%', '50%'], // 饼图居中显示
// selectedMode: 'single', // 单选选中模式（点击切换选中状态）
selectedOffset: 0, // 选中时不偏移（保持原位，如需偏移可设为5等数值）
hoverAnimation: false, // 核心1：关闭鼠标移入动画，取消移入视觉变化
silent: true, // 核心修复3：禁用扇区的鼠标交互（彻底杜绝移入/点击触发样式变化）
startAngle: startAngle,
// 饼图数据（可根据业务需求动态修改）
data: [
{
value: showValue,
name: '显示区',
selected: true // 默认选中显示区
},
{
value: transparentValue,
name: '透明透视区'
}
],
emphasis: {
itemStyle:{
color: function (params) {
console.log(params)
return params.name === '透明透视区'
? 'rgba(f, f, f, 0)' // 透视区移入：仍完全透明
: showAreaGradient; // 显示区移入：和默认样式一致，取消移入高亮
},
// 额外兜底：禁用所有可能的高亮样式
opacity: 1 ,// 保持透明度不变
shadowBlur: 30,
shadowColor: 'rgba(0, 255, 255, 1)',
borderWidth: 4,
borderColor:'#00FEFE',
}
},
// 扇区样式配置（核心：透明渐变色）
itemStyle: {
borderWidth: 4,
borderColor:'#00FEFE',
// 选中状态下的样式（透明径向渐变）
// 正常状态（非选中）的样式（灰色半透明，突出选中区域）
normal: {
// 透明透视区样式：完全透明，穿透显示背景图
color: function (params) {
// 根据扇区名称分配样式
return params.name === '透明透视区'
? 'rgba(0, 0, 0, 0)' // 透视区：完全透明
: showAreaGradient; // 显示区：默认渐变样式
},
shadowBlur: 50,
shadowColor: 'rgba(0, 255, 255, 0.8)',
}
},
// 隐藏饼图文字标签和引导线（如需显示可改为 show: true）
label: { show: false },
labelLine: { show: false }
}
]
};
// 设置配置项，渲染饼图
myChart.setOption(option,true);
};
// 4. 按钮点击事件：修改显示区比例
const changePieRatio = (ratio) => {
// 限制比例范围在0-100之间
if (ratio < 0) ratio = 0;
if (ratio > 100) ratio = 100;
showRatio.value = ratio;
// 比例变化后，更新饼图
updatePieOption();
};
// 3. 窗口大小变化时，自适应调整饼图
const resizeChart = () => {
if (myChart) {
myChart.resize();
updatePieOption();
}
};
watch(showRatio,()=>{
updatePieOption();
})
// 4. 生命周期钩子
// 组件挂载后初始化饼图
onMounted(() => {
initPieChart();
// 监听窗口大小变化，实现自适应
window.addEventListener('resize', resizeChart);
});
// 组件卸载前销毁 ECharts 实例，释放资源
onUnmounted(() => {
if (myChart) {
myChart.dispose();
myChart = null;
}
window.removeEventListener('resize', resizeChart);
});
//tab切换
const tabNavRef = ref(null);
const tabItemRefs = ref([]);
// 新增：存储当前激活 Tab 的顶部偏移和实际高度
const activeTabTop = ref(0);
const activeTabHeight = ref(0);
// 新增：动态更新 Tab 滑动背景的 top 和 height
const updateTabBgStyle = () => {
nextTick(() => { // 确保 DOM 渲染完成后再获取
const activeItem = tabItemRefs.value[activeIndex.value];
const navDom = tabNavRef.value;
if (!activeItem || !navDom) return;
// 获取 Tab 项和导航容器的实际几何信息
const itemRect = activeItem.getBoundingClientRect();
const navRect = navDom.getBoundingClientRect();
// 计算相对顶部偏移（避免窗口滚动影响）
activeTabTop.value = itemRect.top - navRect.top;
// 直接获取 Tab 项的真实高度（适配 space-between 布局）
activeTabHeight.value = itemRect.height;
});
};
const activeIndex = ref(0);
let carouselTimer = null;
const carouselInterval = 3000;
// 4. 手动点击切换Tab：核心逻辑是修改activeTabValue变量
const handleTabClick = (index) => {
activeIndex.value = index;
// 切换Tab时，修改公共变量的值为当前Tab对应的tabValue
showRatio.value = tabList.value[index].value;
updateTabBgStyle(); // 新增：切换 Tab 时更新高度
resetCarouselTimer(); // 手动点击后重置轮播定时器
};
// 5. 自动轮播逻辑：自动切换Tab时，同步修改activeTabValue变量
const autoCarousel = () => {
if (carouselTimer) clearInterval(carouselTimer);
carouselTimer = setInterval(() => {
activeIndex.value = (activeIndex.value + 1) % tabList.value.length;
// 自动切换时，同步更新公共变量的值
showRatio.value = tabList.value[activeIndex.value].value;
updateTabBgStyle(); // 新增：自动轮播时更新高度
}, carouselInterval);
};
// 6. 重置轮播定时器
const resetCarouselTimer = () => {
clearInterval(carouselTimer);
autoCarousel();
};
onMounted(() => {
autoCarousel();
updateTabBgStyle(); // 新增：组件挂载时初始化高度
// 新增：窗口 resize 时重新计算高度
window.addEventListener('resize', updateTabBgStyle);
});
onUnmounted(() => {
clearInterval(carouselTimer);
window.removeEventListener('resize', updateTabBgStyle); // 新增：移除 resize 监听
});
</script>
@ -9,7 +277,30 @@
该技术赋予麦克风多种可切换的拾音模式。用户可根据会议场景灵活选择，例如在单人发言时使用单指向精准拾音，在圆桌讨论时切换至全向模式覆盖全场。这种硬件与算法结合的灵活性，实现了对拾音区域的精确控制，从物理层面有效排除了非发言区域的噪声干扰，提升了系统的场景适应性与信噪比。
</p>
<div class="bg">
<div class="tab-container">
<div class="tab-nav" ref="tabNavRef">
<ul>
<li
class="tab-item"
:class="{ active: activeIndex === index }"
v-for="(item, index) in tabList"
:key="index"
@click="handleTabClick(index)"
ref="tabItemRefs"
>
<component :is="item.title" />
</li>
</ul>
<div
class="tab-active-bg"
:style="{
top: `${activeTabTop}px`,
height: `${activeTabHeight}px`
}"
></div>
</div>
</div>
<div ref="chartRef" class="echarts-pie-container"></div>
</div>
</div>
</template>
@ -23,6 +314,7 @@
color: #000000;
margin: 90px 0 50px 0;
}
.text {
width: 1480px;
margin: 50px auto;
@ -32,7 +324,11 @@
line-height: 1.37em;
letter-spacing: 0.17em;
}
.bg {
display: flex;
justify-content: space-around;
align-items: center;
width: 1232px;
height: 668px;
background-image: url("@/assets/img/tecBg7.png");
@ -41,6 +337,188 @@
background-position: center;
margin: auto;
background-color: #DEDEDE;
border-radius: 20px;
.tab-container {
width: 129px;
height: 508px;
background: #31313187;
border: 2px solid #A6FFFFA6;
border-radius: 12px;
padding: 20px 10px;
.tab-nav {
height: 100%;
position: relative;
.tab-active-bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1), height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: 8px;
z-index: 0;
background: #00C9BE30;
color: #1DFFFF;
border: 1px solid #00FFFF;
box-shadow:
0px -2px 7.3px 0px #00FFFF inset,
0px 2px 4px 0px #00FFFF inset,
1px 2px 4px 0px #00FFFF inset,
0px 2px 4px 0px #00FFFF inset;
}
ul {
list-style: none;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
li:nth-child(1){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 13px;
}
.svg-item:nth-child(3){
top: 25px;
}
}
li:nth-child(2){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 13px;
}
.svg-item:nth-child(3){
top: 11px;
}
}
li:nth-child(3){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 13px;
}
.svg-item:nth-child(3){
top: 7px;
}
}
li:nth-child(4){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 14px;
}
.svg-item:nth-child(3){
top: 6px;
}
}
}
.svg{
position: relative;
width: 60.5px;
height: 59.2px;
margin: auto;
.svg-item{
transform: translate(-50%);
position: absolute;
left: 50%;
}
}
}
}
}
.echarts-pie-container {
width: 581px; /* 宽度 */
height: 580px; /* 高度 */
}
</style>
<style lang="less">
.bg{
ul {
list-style: none;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
.tab-item{
cursor: pointer;
color: #EDEDED;
padding: 5px;
border-radius: 12px;
border: 1px solid transparent;
}
.tab-item.active{
color: #1DFFFF;
svg:not(svg:nth-child(3)){
path{
fill: white;
}
circle{
fill: white;
stroke: white;
}
}
}
li:nth-child(1){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 13px;
}
.svg-item:nth-child(3){
top: 25px;
}
}
li:nth-child(2){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 13px;
}
.svg-item:nth-child(3){
top: 11px;
}
}
li:nth-child(3){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 13px;
}
.svg-item:nth-child(3){
top: 7px;
}
}
li:nth-child(4){
.svg-item:nth-child(1){
top: 5px;
}
.svg-item:nth-child(2){
top: 14px;
}
.svg-item:nth-child(3){
top: 6px;
}
}
}
.svg{
position: relative;
width: 60.5px;
height: 59.2px;
margin: auto;
.svg-item{
transform: translate(-50%);
position: absolute;
left: 50%;
}
}
}
</style>

1
src/components/technology/tecFour.vue
Unescape Escape View File

@ -65,6 +65,7 @@
display: flex;
flex-wrap: wrap;
gap: 15px;
width: 650px;
img {
border-radius: 20px;
width: 313px;

7
vite.config.js
Unescape Escape View File

@ -3,12 +3,17 @@ import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
vueJsx({ // 注册JSX插件，可传入可选配置（按需添加）
// 可选配置：开启TSX支持、自定义编译选项等
tsx: true,
babelPlugins: []
})
],
resolve: {
alias: {

Write Preview
Loading…
Cancel
Save