add router

src/App.vue

@@ -1,111 +1,7 @@
 <template>
   <NavBar />
-  <swiper
-    :virtual="true"
-    :direction="'vertical'"
-    :slidesPerView="1"
-    :spaceBetween="0"
-    :mousewheel="true"
-    :speed="800"
-    :pagination="{
-      clickable: true,
-    }"
-    :keyboard="{
-      enabled: true,
-      onlyInViewport: false,
-      pageUpDown: true,
-    }"
-    @swiper="onSwiper"
-    @slideChange="onSlideChange"
-    :modules="modules"
-  >
-    <swiper-slide :key="0" :virtualIndex="0">
-      <HeaderSwiper />
-    </swiper-slide>
-    <swiper-slide :key="1" :virtualIndex="1">
-      <Service />
-    </swiper-slide>
-    <swiper-slide :key="2" :virtualIndex="2">
-      <CaseSummary />
-    </swiper-slide>
-    <swiper-slide :key="3" :virtualIndex="3">
-      <CasePictureList />
-    </swiper-slide>
-    <swiper-slide :key="4" :virtualIndex="4">
-      <CaseDetails />
-    </swiper-slide>
-    <swiper-slide :key="5" :virtualIndex="5">
-      <SoftHardwareSummary />
-    </swiper-slide>
-    <swiper-slide :key="6" :virtualIndex="6">
-      <SoftHardwarePictureList />
-    </swiper-slide>
-    <swiper-slide :key="7" :virtualIndex="7">
-      <SoftHardwareDetail />
-    </swiper-slide>
-    <swiper-slide :key="8" :virtualIndex="8">
-      <CorporateCulture />
-    </swiper-slide>
-    <swiper-slide :key="9" :virtualIndex="9">
-      <VideoPlayer />
-    </swiper-slide>
-    <swiper-slide :key="10" :virtualIndex="10">
-      <ContactUs />
-    </swiper-slide>
-  </swiper>
+  <router-view />
 </template>
-<script>
-// Import Swiper Vue.js components
-import { Swiper, SwiperSlide } from 'swiper/vue'
-// import required modules
-import { Mousewheel, Pagination, Virtual, Keyboard } from 'swiper'
-// import views to swiper
-import Service from '@/views/Service'
-import HeaderSwiper from '@/views/HeaderSwiper'
-import VideoPlayer from '@/views/VideoPlayer'
-import CaseSummary from '@/views/CaseSummary'
-import CasePictureList from '@/views/CasePictureList'
-import CaseDetails from '@/views/CaseDetails'
-import ContactUs from '@/views/ContactUs'
-import SoftHardwareSummary from '@/views/SoftHardwareSummary'
-import CorporateCulture from '@/views/CorporateCulture'
-import SoftHardwarePictureList from '@/views/SoftHardwarePictureList'
-import SoftHardwareDetail from '@/views/SoftHardwareDetail'
+<script setup>
 import NavBar from 'cpns/NavBar'
-
-// Import Swiper styles
-import 'swiper/css'
-import 'swiper/css/pagination'
-
-export default {
-  components: {
-    Swiper,
-    SwiperSlide,
-    ContactUs,
-    VideoPlayer,
-    NavBar,
-    CorporateCulture,
-    CaseDetails,
-    HeaderSwiper,
-    Service,
-    CaseSummary,
-    SoftHardwarePictureList,
-    SoftHardwareDetail,
-    SoftHardwareSummary,
-    CasePictureList,
-  },
-  setup() {
-    const onSwiper = swiper => {
-      // console.log(swiper)
-    }
-    const onSlideChange = swiper => {
-      const { activeIndex } = swiper
-    }
-    return {
-      onSwiper,
-      onSlideChange,
-      modules: [Mousewheel, Pagination, Virtual, Keyboard],
-    }
-  },
-}
 </script>

src/assets/reset.css

@@ -0,0 +1,110 @@
+/* http://meyerweb.com/eric/tools/css/reset/ */
+/* v1.0 | 20080212 */
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+font,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+  font-size: 100%;
+  vertical-align: baseline;
+  background: transparent;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: '';
+  content: none;
+}
+
+/* remember to define focus styles! */
+:focus {
+  outline: 0;
+}
+
+/* remember to highlight inserts somehow! */
+ins {
+  text-decoration: none;
+}
+del {
+  text-decoration: line-through;
+}
+
+/* tables still need 'cellspacing="0"' in the markup */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

src/components/NavBar/index.vue

@@ -1,5 +1,15 @@
 <template>
-  <div class="header_container">header</div>
+  <div class="header_container">
+    <p>产品梦工厂</p>
+    <ul class="flex_center">
+      <li><router-link to="/">首页</router-link></li>
+      <li><router-link to="/case">案例</router-link></li>
+      <li><router-link to="/soft-hardware">软硬件</router-link></li>
+      <li><router-link to="/culture">文化</router-link></li>
+      <li><router-link to="/about">关于</router-link></li>
+      <li><router-link to="/contact">联系</router-link></li>
+    </ul>
+  </div>
 </template>
 
 <script setup></script>
@@ -11,7 +21,23 @@
   left: 0;
   right: 0;
   width: 100%;
-  height: 80px;
   z-index: 999;
+  background: #ddd;
+  padding: 20px 200px;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  color: $theme_color;
+  font-size: 18px;
+  li {
+    margin: 0 30px;
+  }
+}
+.flex_center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>

src/main.js

@@ -2,6 +2,7 @@ import { createApp } from 'vue'
 import router from './router'
 import store from './store'
 import App from './App.vue'
+import '@/assets/reset.css'
 import './style.scss'
 
 createApp(App).use(router).use(store).mount('#app')

src/router/index.js

@@ -1,11 +1,43 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHashHistory } from 'vue-router'
 
 // 配置路由信息
-const routes = []
+const routes = [
+  { path: '/', redirect: '/index' },
+  {
+    path: '/index',
+    name: 'index',
+    component: () => import('@/views/Index'),
+  },
+  {
+    path: '/case',
+    name: 'case',
+    component: () => import('@/views/Case'),
+  },
+  {
+    path: '/soft-hardware',
+    name: 'softHardware',
+    component: () => import('@/views/SoftHardware'),
+  },
+  {
+    path: '/culture',
+    name: 'culture',
+    component: () => import('@/views/Culture'),
+  },
+  {
+    path: '/about',
+    name: 'about',
+    component: () => import('@/views/About'),
+  },
+  {
+    path: '/contact',
+    name: 'contact',
+    component: () => import('@/views/Contact'),
+  },
+]
 
 const router = createRouter({
   routes,
-  history: createWebHistory(),
+  history: createWebHashHistory(),
 })
 
 export default router

src/style.scss

@@ -5,6 +5,7 @@ html,
 body {
   position: relative;
   height: 100%;
+  box-sizing: border-box;
 }
 
 body {
@@ -26,12 +27,9 @@ body {
   font-size: 18px;
   background: #fff;
   /* Center slide text vertically */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.swiper-slide {
+  display: flex !important;
+  justify-content: center !important;
+  align-items: center !important;
   img {
     display: block;
     width: 100%;
@@ -55,7 +53,7 @@ body {
       color: #fff;
       border-radius: 0;
       background: #ddd;
-      margin: 0 50px;
+      margin: 0 50px !important;
       opacity: 1;
       display: flex;
       align-items: center;

src/views/About/index.vue

@@ -0,0 +1,7 @@
+<template>about</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

src/views/Case/index.vue

@@ -0,0 +1,7 @@
+<template>case</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

src/views/Contact/index.vue

@@ -0,0 +1,7 @@
+<template>ContactUs</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

src/views/Culture/index.vue

@@ -0,0 +1,7 @@
+<template>Culture</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>

src/views/Index/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <swiper
+    :virtual="true"
+    :direction="'vertical'"
+    :slidesPerView="1"
+    :spaceBetween="0"
+    :mousewheel="true"
+    :speed="800"
+    :pagination="{
+      clickable: true,
+    }"
+    :keyboard="{
+      enabled: true,
+      onlyInViewport: false,
+      pageUpDown: true,
+    }"
+    @swiper="onSwiper"
+    @slideChange="onSlideChange"
+    :modules="modules"
+  >
+    <swiper-slide :key="0" :virtualIndex="0">
+      <HeaderSwiper />
+    </swiper-slide>
+    <swiper-slide :key="1" :virtualIndex="1">
+      <Service />
+    </swiper-slide>
+    <swiper-slide :key="2" :virtualIndex="2">
+      <CaseSummary />
+    </swiper-slide>
+    <swiper-slide :key="3" :virtualIndex="3">
+      <CasePictureList />
+    </swiper-slide>
+    <swiper-slide :key="4" :virtualIndex="4">
+      <CaseDetails />
+    </swiper-slide>
+    <swiper-slide :key="5" :virtualIndex="5">
+      <SoftHardwareSummary />
+    </swiper-slide>
+    <swiper-slide :key="6" :virtualIndex="6">
+      <SoftHardwarePictureList />
+    </swiper-slide>
+    <swiper-slide :key="7" :virtualIndex="7">
+      <SoftHardwareDetail />
+    </swiper-slide>
+    <swiper-slide :key="8" :virtualIndex="8">
+      <CorporateCulture />
+    </swiper-slide>
+    <swiper-slide :key="9" :virtualIndex="9">
+      <VideoPlayer />
+    </swiper-slide>
+    <swiper-slide :key="10" :virtualIndex="10">
+      <ContactUs />
+    </swiper-slide>
+  </swiper>
+</template>
+<script>
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from 'swiper/vue'
+// import required modules
+import { Mousewheel, Pagination, Virtual, Keyboard } from 'swiper'
+// import views to swiper
+import Service from '@/views/Index/components/Service'
+import HeaderSwiper from '@/views/Index/components/HeaderSwiper'
+import VideoPlayer from '@/views/Index/components/VideoPlayer'
+import CaseSummary from '@/views/Index/components/CaseSummary'
+import CasePictureList from '@/views/Index/components/CasePictureList'
+import CaseDetails from '@/views/Index/components/CaseDetails'
+import ContactUs from '@/views/Index/components/ContactUs'
+import SoftHardwareSummary from '@/views/Index/components/SoftHardwareSummary'
+import CorporateCulture from '@/views/Index/components/CorporateCulture'
+import SoftHardwarePictureList from '@/views/Index/components/SoftHardwarePictureList'
+import SoftHardwareDetail from '@/views/Index/components/SoftHardwareDetail'
+
+// Import Swiper styles
+import 'swiper/css'
+import 'swiper/css/pagination'
+
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+    ContactUs,
+    VideoPlayer,
+    CorporateCulture,
+    CaseDetails,
+    HeaderSwiper,
+    Service,
+    CaseSummary,
+    SoftHardwarePictureList,
+    SoftHardwareDetail,
+    SoftHardwareSummary,
+    CasePictureList,
+  },
+  setup() {
+    const onSwiper = swiper => {
+      // console.log(swiper)
+    }
+    const onSlideChange = swiper => {
+      const { activeIndex } = swiper
+    }
+    return {
+      onSwiper,
+      onSlideChange,
+      modules: [Mousewheel, Pagination, Virtual, Keyboard],
+    }
+  },
+}
+</script>

src/views/SoftHardware/index.vue

@@ -0,0 +1,7 @@
+<template>soft hardware</template>
+
+<script>
+export default {}
+</script>
+
+<style></style>