+ Edit
+ components/HelloWorld.vue to test HMR
+
+ Check out + create-vue, the official Vue + Vite starter +
++ Learn more about IDE Support for Vue in the + Vue Docs Scaling up Guide. +
+Click on the Vite and Vue logos to learn more
+ + + + + diff --git a/src/main.ts b/src/main.ts new file mode 100644 index 0000000..a265a53 --- /dev/null +++ b/src/main.ts @@ -0,0 +1,21 @@ +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' + + +import router from './router' + +// 1. 引入你需要的Vant组件 +import * as vant from 'vant' +// 2. 引入Vant组件样式 +import 'vant/lib/index.css' + + + +const app = createApp(App) + +app.use(router) + +app.use(vant) + +app.mount('#app') diff --git a/src/pages/index/Index.less b/src/pages/index/Index.less new file mode 100644 index 0000000..9fffd91 --- /dev/null +++ b/src/pages/index/Index.less @@ -0,0 +1,182 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + line-height: 1.6; + color: #fff; + background-color: #121212; + overflow: hidden; +} + +/* 导航栏 */ +.nav { + background-color: rgba(30, 30, 30, 0.9); + position: fixed; + top: 0; + left: 0; + width: 100%; + z-index: 1000; + padding: 1rem 0; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} + +.nav__list { + list-style-type: none; + display: flex; + justify-content: center; +} + +.nav__item { + margin: 0 1.5rem; +} + +.nav__link { + color: #fff; + text-decoration: none; + transition: color 0.3s ease; + user-select: none; +} + +.nav__link:hover { + color: #aaa; +} + +/* 3D 场景容器 */ +.canvas3d { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100vh; + z-index: -1; +} + +/* 主视觉区域 */ +.hero { + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + text-align: center; + color: #fff; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); +} + +.hero__title { + font-size: 3.5rem; + margin-bottom: 1rem; + user-select: none; +} + +.hero__subtitle { + font-size: 1.5rem; + margin-bottom: 2rem; + user-select: none; +} + +.hero__btn { + background-color: #007aff; + color: white; + padding: 1rem 2rem; + border: none; + border-radius: 5px; + text-decoration: none; + font-size: 1.2rem; + transition: background-color 0.3s ease; + user-select: none; +} + +.hero__btn:hover { + background-color: #0056b3; +} + +/* 特色介绍区域 */ +.features { + position: relative; + padding: 5rem 0; + text-align: center; + background-color: rgba(30, 30, 30, 0.9); + color: #fff; + box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); +} + +.features__title { + font-size: 2.5rem; + margin-bottom: 3rem; + user-select: none; +} + +.features__list { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.features__item { + width: 300px; + margin: 2rem; +} + +.features__icon { + font-size: 3rem; + color: #007aff; + margin-bottom: 1rem; + user-select: none; +} + +.features__item-title { + font-size: 1.5rem; + margin-bottom: 1rem; + user-select: none; +} + +.features__item-description { + color: #aaa; + user-select: none; +} + +/* 底部区域 */ +.footer { + background-color: rgba(30, 30, 30, 0.9); + padding: 2rem 0; + text-align: center; + color: #aaa; + box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); +} + +.footer__text { + color: #aaa; + user-select: none; +} + +/* 响应式设计 */ +@media (max-width: 768px) { + .nav { + display: none; + } + .nav__list { + flex-direction: column; + align-items: center; + } + + .nav__item { + margin: 0.5rem 0; + } + + .hero__title { + font-size: 2.5rem; + } + + .hero__subtitle { + font-size: 1.2rem; + } + + .features__item { + width: 100%; + } +} diff --git a/src/pages/index/Index.ts b/src/pages/index/Index.ts new file mode 100644 index 0000000..247711d --- /dev/null +++ b/src/pages/index/Index.ts @@ -0,0 +1,211 @@ +import { defineComponent, onMounted, ref } from 'vue' +import * as BABYLON from '@babylonjs/core/Legacy/legacy' + +export default defineComponent({ + name: 'Index', + // setup(props, context) { + setup() { + const canvas3d = ref探索精彩的 3D 世界
+ 了解更多 +通过 3D 技术，带来身临其境的视觉享受。
+呈现逼真的 3D 模型和场景。
+支持用户与 3D 内容进行互动。
+