添加开屏动画

public/cropped.svg

@@ -0,0 +1,4 @@
+<svg t="1747713640497" class="icon" viewBox="1.0666729035156095 60.53332519531251 200.0000244140625 83.1999755859375" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4994" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.0000244140625" height="83.1999755859375">
+    <path d="M6.71115421 489.90890885l662.73273745-1e-8L669.44389165 551.27305136 6.71115421 551.27305136l2e-8-61.36414251z" fill="#d81e06" p-id="4995"></path>
+    <path d="M665.71307852 306.28092891L1022.56779958 515.86227332l-356.85472106 215.24570478 0-424.82704919z" fill="#d81e06" p-id="4996"></path>
+</svg>

public/intopagedir.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747735707334" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9006" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 64c247.424 0 448 200.576 448 448S759.424 960 512 960 64 759.424 64 512 264.576 64 512 64z m0 68c-209.868 0-380 170.132-380 380s170.132 380 380 380 380-170.132 380-380-170.132-380-380-380z m-48.516 212.181l0.435 0.29 0.435 0.3L664.38 484.828c9.168 6.42 13.94 16.775 13.635 27.183 0.301 10.245-4.318 20.438-13.204 26.877l-0.43 0.307-200.026 140.059c-14.477 10.137-34.43 6.618-44.567-7.859-10.035-14.332-6.687-34.032 7.428-44.26l0.43-0.307 163.976-114.817-163.975-114.816c-14.477-10.137-17.996-30.09-7.859-44.567 9.935-14.19 29.3-17.851 43.697-8.448z" fill="#d81e06" p-id="9007"></path></svg>

src/Start.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
-
+import HeaderVideo from './components/HeaderVideo.vue'
 </script>
 
 <template>
-
+  <div style="width: 100%; height: 100%">
+    <router-view/>
+  </div>
 </template>
 
 <style scoped lang="scss">

src/components/HeaderVideo.vue

@@ -0,0 +1,117 @@
+<script>
+import {defineComponent} from 'vue'
+import { useBootstrapBreakpoint } from './useBreakpoint.js';
+const { breakpoint } = useBootstrapBreakpoint();
+
+export default defineComponent({
+name: "HeaderVideo"
+})
+</script>
+
+<template>
+<div id="beginroot" class="pageroot">
+ <div id="videodiv">
+   <video v-if="breakpoint==='xs'||breakpoint==='sm'||breakpoint==='md'"
+          poster="/bannervideopreload.png" controls=""
+          id="wepstart" muted autoplay
+          playsinline webkit-playsinline
+          class="startvideo"
+          x5-video-player-type="h5-page">
+     <source src="/logobeginwep.mp4" type="video/mp4"></source>
+   </video>
+   <video v-else poster="/bannervideopreload.png"
+          id="pcstart" muted autoplay
+          playsinline webkit-playsinline
+          class="startvideo"
+          x5-video-player-type="h5-page">
+     <source src="/logobeginPC.mp4" type="video/mp4"></source>
+   </video>
+ </div>
+ <div id="beginbottom">
+   <a href="/Homepage">
+      <div class="normalcontentdiv" id="intovideoreq">
+        <span class="normalcontenttitle">
+          进入kdesign.top
+          <img src="/intopagedir.svg" id="intopagesvg"/>
+        </span>
+      </div>
+   </a>
+ </div>
+</div>
+</template>
+
+<style scoped lang="scss">
+@import "src/publicstyle.scss";
+#beginroot{
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+#beginbottom {
+  a {
+    text-decoration: none;
+    width: 100%; /* 确保链接占满整个宽度 */
+
+    .normalcontenttitle {
+      transition: color 0.3s ease;
+      color: white;
+      text-align: center; /* 文本居中 */
+      display: flex;
+      justify-content: center; /* flex布局下的水平居中 */
+      align-items: center; /* 垂直居中对齐图标 */
+    }
+
+    &:hover {
+      .normalcontenttitle {
+        color: #DAA520 !important;
+      }
+    }
+  }
+}
+#videodiv{
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  overflow: hidden;
+  @include media-breakpoint-between(xs, md) {
+  }
+  @include media-breakpoint-up(md) {
+  }
+}
+.startvideo{
+  width: 100%;
+  height: 100%;
+  @include media-breakpoint-between(xs, md) {
+    object-fit: contain;
+  }
+  @include media-breakpoint-up(md) {
+    object-fit: contain;
+  }
+}
+#intopagesvg{
+  height: 100%;
+  width: auto;
+  max-width: 100%;
+}
+#intopagesvg {
+  height: 1em;
+  width: auto;
+  margin-left: 0.5em;
+}
+#intovideoreq{
+  margin-top: 2px;
+  padding-bottom: 2px;
+  transition: background 0.5s, color 0.5s;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center; /* 添加这一行使内容水平居中 */
+  width: 100%; /* 确保宽度占满 */
+  margin-left: 0!important;
+  margin-bottom: 10px;
+}
+#intovideoreq .normalcontenttitle {
+  width: auto !important;
+  text-align: center !important;
+}
+</style>

src/components/ServiceProcess.vue

@@ -48,13 +48,6 @@ const { breakpoint } = useBootstrapBreakpoint();
         <img src="/ServiceProcessRes/designopinion.png"
              width="100%" height="100%"/>
       </div>
-      <!-- 你说咋写就咋写，要是你跟我说这不协调，我就把设计图亮出来说你就是这么设计的。要改你自己改。亏你想得出来，桌面用黑字写外边，移动用白字写里边。为了显示这个我可是脑洞大开想出来个办法。 -->
-<!--      <div v-if="breakpoint==='md'||breakpoint==='lg'-->
-<!--                ||breakpoint==='xl'||breakpoint==='xxl'"-->
-<!--          class="normalcontentdiv"-->
-<!--          style="margin-bottom: 48px;color: black;">-->
-<!--        <div class="normalcontenttitle">设计流程</div>-->
-<!--      </div>-->
     </div>
     <div id="blackchart">
       <div

src/components/Toolbar.vue

@@ -6,7 +6,7 @@ import MobileToolbar from "@/components/Tools/MobileToolbar.vue";
   <div id="toproot">
     <MobileToolbar></MobileToolbar>
     <div id="topbar">
-      <a href="/">
+      <a href="/Homepage">
         <img
             id="toplogo"
             referrerpolicy="no-referrer"

src/components/Tools/Err404.vue

@@ -5,7 +5,7 @@
       <div>
         <span class="itemtitle">404:Not Found</span>
         <br/>
-        <span class="itemcontent">您要找的页面不存在，<a href="/">返回主页</a></span>
+        <span class="itemcontent">您要找的页面不存在，<a href="/Homepage">返回主页</a></span>
       </div>
     </div>
   </div>

src/components/Tools/MobileToolbar.vue

@@ -6,7 +6,7 @@ import FooterContent from './FooterContent.vue'
   <div id="mobilebarroot">
     <div id="barcontent">
       <div id="weptoplogo" class="image-wrapper_2 flex-row justify-between">
-        <a href="/">
+        <a href="/Homepage">
           <img
               id="image_1"
               referrerpolicy="no-referrer"

src/router.js

@@ -3,6 +3,18 @@ import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router
 const routes= [
     {
         path: '/',
+        redirect: to => {
+            // 如果直接访问 /index.html，重定向到根路径的 start.html
+            if (window.location.pathname === '/index.html') {
+                window.location.href = '/';
+                return '/';
+            }
+            // 否则渲染 Homepage 组件
+            return { name: 'Homepage' };
+        }
+    },
+    {
+        path: '/Homepage',
         name: 'Homepage',
         component: ()=>import('./components/Homepage.vue'),
         meta: { title: 'KDESIGN - 首页' }

src/startRouter.js

@@ -0,0 +1,32 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HeaderVideo from './components/HeaderVideo.vue'
+
+const routes = [
+    {
+        path: '/',
+        name: 'StartPage',
+        component: HeaderVideo,
+        meta: { title: 'KDESIGN - 欢迎' }
+    },
+    {
+        path: '/:pathMatch(.*)*',
+        redirect: to => {
+            window.location.href = `/index.html${to.fullPath}`
+            return '/'
+        }
+    }
+]
+
+const router = createRouter({
+    history: createWebHistory(),
+    routes
+})
+
+router.beforeEach((to, from, next) => {
+    if (to.meta && to.meta.title) {
+        document.title = to.meta.title
+    }
+    next()
+})
+
+export default router

start.html

@@ -1,24 +1,34 @@
 <!DOCTYPE html>
-<!DOCTYPE html>
 <html lang="zh">
 <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <link rel="apple-touch-icon" href="/iFavicon.png">
     <link rel="shortcut icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>KDesign - 欢迎光临</title>
 </head>
-<style type="text/css">
-    #start
-    {
+<style>
+    html, body {
+        margin: 0;
+        padding: 0;
+        height: 100%;
+        overflow: hidden;
+    }
+    #start {
         display: flex;
         flex-direction: column;
-        min-height: 100vh;
+        height: 100vh;
+        overflow: hidden;
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
     }
 </style>
-<body>
-    <div id="start"></div>
-    <script type="module" src="/src/start.js"></script>
+<body style="background-color: black;">
+<div id="start"></div>
+<script type="module" src="/src/start.js"></script>
 </body>
 </html>

vite.config.js

@@ -1,15 +1,44 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import { fileURLToPath, URL } from 'node:url'
-
-// https://vitejs.dev/config/
+import fs from 'fs'
 
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    // 添加自定义中间件来处理根路径
+    {
+      name: 'configure-server',
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          if (req.url === '/' || req.url === '/index.html') {
+            // 读取start.html的内容并发送
+            const startHtml = fs.readFileSync(
+                fileURLToPath(new URL('./start.html', import.meta.url)),
+                'utf-8'
+            );
+            res.statusCode = 200;
+            res.setHeader('Content-Type', 'text/html');
+            res.end(startHtml);
+            return;
+          }
+          next();
+        });
+      }
+    }
+  ],
   server: {
     host: '0.0.0.0',
     port: 3992
   },
+  build: {
+    rollupOptions: {
+      input: {
+        main: fileURLToPath(new URL('./index.html', import.meta.url)),
+        start: fileURLToPath(new URL('./start.html', import.meta.url))
+      }
+    }
+  },
   resolve: {
     alias: {
       '@': fileURLToPath(new URL('./src', import.meta.url))