✨ feat: 轮播图(未完成)

package-lock.json

@@ -15,10 +15,12 @@
       },
       "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",
+        "less": "^4.2.0",
+        "less-loader": "^12.2.0",
         "npm-run-all2": "^6.1.2",
         "typescript": "~5.4.0",
         "vite": "^5.1.6",
@@ -1491,6 +1493,15 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/copy-anything": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmmirror.com/copy-anything/-/copy-anything-2.0.6.tgz",
+      "integrity": "sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==",
+      "dev": true,
+      "dependencies": {
+        "is-what": "^3.14.1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1552,6 +1563,19 @@
         "node": ">=0.12"
       }
     },
+    "node_modules/errno": {
+      "version": "0.1.8",
+      "resolved": "https://registry.npmmirror.com/errno/-/errno-0.1.8.tgz",
+      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "prr": "~1.0.1"
+      },
+      "bin": {
+        "errno": "cli.js"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.20.2",
       "resolved": "https://registry.npmmirror.com/esbuild/-/esbuild-0.20.2.tgz",
@@ -1645,6 +1669,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmmirror.com/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-3.0.0.tgz",
@@ -1672,6 +1703,38 @@
         "node": ">=8"
       }
     },
+    "node_modules/iconv-lite": {
+      "version": "0.6.3",
+      "resolved": "https://registry.npmmirror.com/iconv-lite/-/iconv-lite-0.6.3.tgz",
+      "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmmirror.com/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "image-size": "bin/image-size.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmmirror.com/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmmirror.com/isexe/-/isexe-2.0.0.tgz",
@@ -1717,6 +1780,54 @@
         "node": ">=6"
       }
     },
+    "node_modules/less": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmmirror.com/less/-/less-4.2.0.tgz",
+      "integrity": "sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==",
+      "dev": true,
+      "dependencies": {
+        "copy-anything": "^2.0.1",
+        "parse-node-version": "^1.0.1",
+        "tslib": "^2.3.0"
+      },
+      "bin": {
+        "lessc": "bin/lessc"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "optionalDependencies": {
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "needle": "^3.1.0",
+        "source-map": "~0.6.0"
+      }
+    },
+    "node_modules/less-loader": {
+      "version": "12.2.0",
+      "resolved": "https://registry.npmmirror.com/less-loader/-/less-loader-12.2.0.tgz",
+      "integrity": "sha512-MYUxjSQSBUQmowc0l5nPieOYwMzGPUaTzB6inNW/bdPEG9zOL3eAAD1Qw5ZxSPk7we5dMojHwNODYMV1hq4EVg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "less": "^3.5.0 || ^4.0.0",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.21.tgz",
@@ -1742,6 +1853,30 @@
         "node": ">=12"
       }
     },
+    "node_modules/make-dir": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz",
+      "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "pify": "^4.0.1",
+        "semver": "^5.6.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/make-dir/node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
     "node_modules/memorystream": {
       "version": "0.3.1",
       "resolved": "https://registry.npmmirror.com/memorystream/-/memorystream-0.3.1.tgz",
@@ -1751,6 +1886,19 @@
         "node": ">= 0.10.0"
       }
     },
+    "node_modules/mime": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/mime/-/mime-1.6.0.tgz",
+      "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+      "dev": true,
+      "optional": true,
+      "bin": {
+        "mime": "cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.4",
       "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-9.0.4.tgz",
@@ -1791,6 +1939,23 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/needle": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmmirror.com/needle/-/needle-3.3.1.tgz",
+      "integrity": "sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "iconv-lite": "^0.6.3",
+        "sax": "^1.2.4"
+      },
+      "bin": {
+        "needle": "bin/needle"
+      },
+      "engines": {
+        "node": ">= 4.4.x"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.14.tgz",
@@ -1840,6 +2005,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/parse-node-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/parse-node-version/-/parse-node-version-1.0.1.tgz",
+      "integrity": "sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/path-browserify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz",
@@ -1872,6 +2046,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/pify": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz",
+      "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/pinia": {
       "version": "2.1.7",
       "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.1.7.tgz",
@@ -1929,6 +2113,13 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmmirror.com/prr/-/prr-1.0.1.tgz",
+      "integrity": "sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/read-package-json-fast": {
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/read-package-json-fast/-/read-package-json-fast-3.0.2.tgz",
@@ -1981,6 +2172,20 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmmirror.com/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
+      "dev": true,
+      "optional": true
+    },
+    "node_modules/sax": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmmirror.com/sax/-/sax-1.3.0.tgz",
+      "integrity": "sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==",
+      "dev": true,
+      "optional": true
+    },
     "node_modules/semver": {
       "version": "6.3.1",
       "resolved": "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz",
@@ -2022,6 +2227,16 @@
       "resolved": "https://registry.npmmirror.com/sortablejs/-/sortablejs-1.15.2.tgz",
       "integrity": "sha512-FJF5jgdfvoKn1MAKSdGs33bIqLi3LmsgVTliuX6iITj834F+JRQZN90Z93yql8h0K2t0RwDPBmxwlbZfDcxNZA=="
     },
+    "node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmmirror.com/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.0",
       "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
@@ -2096,6 +2311,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmmirror.com/tslib/-/tslib-2.6.2.tgz",
+      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==",
+      "dev": true
+    },
     "node_modules/typescript": {
       "version": "5.4.3",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.4.3.tgz",

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>1</div>
+    </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</t-footer>
     </t-layout>
   </div>
@@ -12,6 +14,7 @@
 
 <script setup lang="ts">
 import hesderTop from "./header/index.vue";
+import contentCenter from "@/pages/content/index.vue";
 </script>
 
 <style scoped></style>