公司简介

src/components/DesignConcept.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="design_concept_container">
+    <div class="header_wrap">
+      <HeadLine title="独有的设计理念" />
+    </div>
+    <div class="cards">
+      <div class="card">card</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import HeadLine from 'cpns/HeadLine'
+</script>
+
+<style lang="scss" scoped>
+.design_concept_container {
+  .header_wrap {
+    padding: 27px 0;
+    background: #dde4f1;
+  }
+  .cards {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(2, 1fr);
+    .card {
+      width: 100%;
+      height: 146px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
+</style>

src/components/QRCode.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="qrcode_container">qrcpde</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.qrcode_container {
+  background: linear-gradient(0deg, #015eea, #00c0fa);
+  padding: 42px 22px;
+}
+</style>

src/pages/CaseShow.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="case_show_container">case_show_container</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.case_show_container {
+}
+</style>

src/pages/Company.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="company_container">
+    <AboutUs />
+    <div class="video_container">
+      <video
+        @click="stopVideo"
+        ref="video"
+        :controls="!maskShow"
+        style="width: 100%; height: 100%; object-fit: fill"
+        controlslist="nodownload"
+        :loop="true"
+      >
+        <source :src="Movie" />
+      </video>
+      <div class="mask" @click="playVideo" v-if="maskShow">
+        <div class="btn"></div>
+      </div>
+    </div>
+    <DesignConcept />
+    <Cooperation />
+    <QRCode />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import AboutUs from 'cpns/AboutUs'
+import Movie from '@/static/video/a.mp4'
+import DesignConcept from 'cpns/DesignConcept'
+import Cooperation from 'cpns/Cooperation'
+import QRCode from 'cpns/QRCode'
+const video = ref(null)
+const maskShow = ref(true)
+const playVideo = () => {
+  video?.value.play()
+  maskShow.value = false
+}
+const stopVideo = () => {
+  video?.value.pause()
+  maskShow.value = true
+}
+</script>
+
+<style lang="scss" scoped>
+.company_container {
+  .video_container {
+    position: relative;
+    .mask {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(40, 63, 231, 0.67);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      .btn {
+        width: 31px;
+        height: 31px;
+        background: #000;
+      }
+    }
+  }
+}
+</style>

src/pages/Contact.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="contact_container">contact</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.contact_container {
+}
+</style>

src/pages/Detail.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="detail_container">detail</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.detail_container {
+}
+</style>

src/pages/HardwareCase.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="hardware_case_container">hardware case</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.hardware_case_container {
+}
+</style>

src/pages/Product.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="product_container">product</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.product_container {
+}
+</style>

src/pages/Recruit.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="recruit_container">recruit</div>
+</template>
+
+<script setup></script>
+
+<style lang="scss" scoped>
+.recruit_container {
+}
+</style>

src/router/index.js

@@ -1,8 +1,24 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 const Home = () => import('@/pages')
+const Detail = () => import('@/pages/Detail')
+const Recruit = () => import('@/pages/Recruit')
+const Contact = () => import('@/pages/Contact')
+const HardwareCase = () => import('@/pages/HardwareCase')
+const Company = () => import('@/pages/Company')
+const CaseShow = () => import('@/pages/CaseShow')
+const Product = () => import('@/pages/Product')
 
 // 配置路由信息
-const routes = [{ path: '/', component: Home }]
+const routes = [
+  { path: '/', component: Home },
+  { path: '/detail', component: Detail },
+  { path: '/recruit', component: Recruit },
+  { path: '/contact', component: Contact },
+  { path: '/hardware-case', component: HardwareCase },
+  { path: '/company', component: Company },
+  { path: '/case-show', component: CaseShow },
+  { path: '/product', component: Product },
+]
 
 const router = createRouter({
   routes,