📃 docs:解决代码冲突

package-lock.json

@@ -15,7 +15,7 @@
       },
       "devDependencies": {
         "@tsconfig/node20": "^20.1.2",
-        "@types/node": "^20.11.28",
+        "@types/node": "^20.12.2",
         "@vitejs/plugin-vue": "^5.0.4",
         "@vitejs/plugin-vue-jsx": "^3.1.0",
         "@vue/tsconfig": "^0.5.1",

package.json

@@ -18,7 +18,7 @@
   },
   "devDependencies": {
     "@tsconfig/node20": "^20.1.2",
-    "@types/node": "^20.11.28",
+    "@types/node": "^20.12.2",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vitejs/plugin-vue-jsx": "^3.1.0",
     "@vue/tsconfig": "^0.5.1",

src/pages/content/components/slideshow.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="box_slideshow">
+    <h1>东印科技，砥砺奋进，铸就辉煌。</h1>
+    <t-swiper
+      class="tdesign-demo-block--swiper"
+      :duration="300"
+      :interval="3000"
+      style="margin-top: 20px"
+    >
+      <t-swiper-item v-for="(item, index) in imgArr" :key="index">
+        <t-image
+          v-lazy="{ src: item }"
+          fit="contain"
+          :style="{ width: '120px', height: '120px' }"
+          @error="onError"
+        />
+      </t-swiper-item>
+    </t-swiper>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import tubiao from "@/assets/img/tubiao.jpeg";
+import tubiao1 from "@/assets/img/tubiao1.jpeg";
+import tubiao2 from "@/assets/img/tubiao2.jpeg";
+
+const imgArr = [tubiao, tubiao1, tubiao2];
+
+const onError = () => {
+  console.log("onError");
+};
+</script>
+
+<style scoped lang="less">
+.box_slideshow {
+  width: 70%;
+  height: 100%;
+  h1 {
+    font-size: 30px;
+    color: #000;
+    margin-top: 20px;
+    text-align: center;
+  }
+}
+</style>

src/pages/content/index.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="body_content">
+    <slide-show />
+  </div>
+</template>
+
+<script setup lang="ts">
+import slideShow from "./components/slideshow.vue";
+</script>
+
+<style scoped lang="less">
+.body_content {
+  width: 100%;
+  height: calc(100vh - 60px);
+  background-color: aliceblue;
+  display: flex;
+  justify-content: center;
+}
+</style>

src/pages/header/index.vue

@@ -9,9 +9,16 @@
           alt="logo"
         />
       </div>
-      <div></div>
+      <div class="title-container">
+        <a href="#">孙东宇</a>
+        <a href="#">杨春宇</a>
+        <a href="#">杨硕</a>
+        <a href="#">吕文卓</a>
+        <a href="#">刘欣宇</a>
+        <a href="#">关于我们</a>
+      </div>
     </div>
-    <div>1</div>
+    <!-- <div>1</div> -->
   </div>
 </template>
 
@@ -21,17 +28,33 @@
 .app-container {
   background: radial-gradient(circle, #2aae67, #fff);
   width: 100%;
-  height: 70px;
+  height: 60px;
   display: flex;
   justify-content: center;
   .container {
     width: 70%;
     display: flex;
+    justify-content: space-between;
     .logo-container {
       img {
         margin-top: -35px;
       }
     }
+    .title-container {
+      display: flex;
+      align-items: center;
+      margin-right: 10%;
+      a {
+        margin-left: 60px;
+        font-size: 20px;
+        font-weight: 550;
+        color: #fff;
+        text-decoration: none;
+        &:hover {
+          color: yellowgreen;
+        }
+      }
+    }
   }
 }
 </style>

src/pages/index.vue

@@ -4,7 +4,9 @@
       <t-header>
         <hesder-top />
       </t-header>
-      <t-content>Content</t-content>
+      <t-content>
+        <content-center />
+      </t-content>
       <t-footer>
         <footer-bottom />
       </t-footer>
@@ -15,6 +17,7 @@
 <script setup lang="ts">
 import hesderTop from '@/pages/header/index.vue'
 import footerBottom from '@/pages/footer/index.vue'
+import contentCenter from "@/pages/content/index.vue";
 </script>
 
 <style scoped></style>