diff --git a/package-lock.json b/package-lock.json index e93b9c9..af8c15c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index d3ef10d..0ec87c4 100644 --- a/package.json +++ b/package.json @@ -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" diff --git a/src/assets/img/Frame 253.png b/src/assets/img/Frame 253.png new file mode 100644 index 0000000..338dbb5 Binary files /dev/null and b/src/assets/img/Frame 253.png differ diff --git a/src/assets/img/Frame 274.png b/src/assets/img/Frame 274.png new file mode 100644 index 0000000..522e76b Binary files /dev/null and b/src/assets/img/Frame 274.png differ diff --git a/src/assets/img/tab-center.svg b/src/assets/img/tab-center.svg new file mode 100644 index 0000000..b03a747 --- /dev/null +++ b/src/assets/img/tab-center.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-four-bottom.svg b/src/assets/img/tab-four-bottom.svg new file mode 100644 index 0000000..96e29ad --- /dev/null +++ b/src/assets/img/tab-four-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-four-top.svg b/src/assets/img/tab-four-top.svg new file mode 100644 index 0000000..77fc07a --- /dev/null +++ b/src/assets/img/tab-four-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-one-bottom.svg b/src/assets/img/tab-one-bottom.svg new file mode 100644 index 0000000..6687a9b --- /dev/null +++ b/src/assets/img/tab-one-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-one-top.svg b/src/assets/img/tab-one-top.svg new file mode 100644 index 0000000..7556e75 --- /dev/null +++ b/src/assets/img/tab-one-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-three-bottom.svg b/src/assets/img/tab-three-bottom.svg new file mode 100644 index 0000000..4f5949e --- /dev/null +++ b/src/assets/img/tab-three-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-three-top.svg b/src/assets/img/tab-three-top.svg new file mode 100644 index 0000000..966a31d --- /dev/null +++ b/src/assets/img/tab-three-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-two-bottom.svg b/src/assets/img/tab-two-bottom.svg new file mode 100644 index 0000000..ddf1fda --- /dev/null +++ b/src/assets/img/tab-two-bottom.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/img/tab-two-top.svg b/src/assets/img/tab-two-top.svg new file mode 100644 index 0000000..6690417 --- /dev/null +++ b/src/assets/img/tab-two-top.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/technology/tabList.jsx b/src/components/technology/tabList.jsx new file mode 100644 index 0000000..fd1346b --- /dev/null +++ b/src/components/technology/tabList.jsx @@ -0,0 +1,110 @@ +import {defineComponent} from "vue"; + +export const TabTitle1 = defineComponent({ + render() { + return ( +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ 心型指向 +
+ ); + } +}); +export const TabTitle2 = () => ( +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ 超心型指向 +
+); +export const TabTitle3 = () => ( +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ 强指向 +
+); +export const TabTitle4 = () => ( +
+
+
+ + + +
+
+ + + +
+
+ + + +
+
+ 全指向 +
+); diff --git a/src/components/technology/tecFive.vue b/src/components/technology/tecFive.vue index e0b727f..c19f7f6 100644 --- a/src/components/technology/tecFive.vue +++ b/src/components/technology/tecFive.vue @@ -1,21 +1,312 @@ + diff --git a/src/components/technology/tecFour.vue b/src/components/technology/tecFour.vue index 7900240..a0513cc 100644 --- a/src/components/technology/tecFour.vue +++ b/src/components/technology/tecFour.vue @@ -65,6 +65,7 @@ display: flex; flex-wrap: wrap; gap: 15px; + width: 650px; img { border-radius: 20px; width: 313px; diff --git a/vite.config.js b/vite.config.js index 4217010..4f701fc 100644 --- a/vite.config.js +++ b/vite.config.js @@ -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: {