123

package.json

@@ -9,6 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "animate.css": "^4.1.1",
     "axios": "^1.3.4",
     "pinia": "^2.0.32",
     "swiper": "^9.0.0",

src/assets/scss/globalVar.scss

@@ -1,3 +1,4 @@
-$theme_color: rgb(255, 194, 0);
+$theme_color: #2e39e6;
+$default_color: #ffffff;
 
-$header_height: 60px;
+$header_height: 90px;

src/components/TopNav/index.vue

@@ -1,18 +1,21 @@
 <template>
   <div class="header_container">
-    <p>产品梦工厂</p>
+    <img :src="Logo" alt="logo" />
     <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="/index">首页</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="/about">招聘</router-link></li>
       <li><router-link to="/contact">联系</router-link></li>
     </ul>
   </div>
 </template>
 
-<script setup></script>
+<script setup>
+import Logo from '@/assets/img/logo.png'
+</script>
 
 <style scoped lang="scss">
 .header_container {
@@ -22,15 +25,14 @@
   right: 0;
   width: 100%;
   z-index: 999;
-  background: #ddd;
-  padding: 0 200px;
+  background: none;
+  padding: 0 87px;
   height: $header_height;
   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;
@@ -40,5 +42,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  li {
+    a {
+      color: $default_color;
+    }
+    .router-link-active {
+      color: $theme_color;
+    }
+  }
 }
 </style>

src/main.js

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

src/style.scss

@@ -8,6 +8,31 @@ body {
   box-sizing: border-box;
 }
 
+/*去除a标签下划线*/
+a {
+  text-decoration: none;
+}
+/*去除未被访问的a标签的下划线*/
+a:link {
+  text-decoration: none;
+}
+/*去除已经被访问过的a标签的下划线*/
+a:visited {
+  text-decoration: none;
+}
+/*去除鼠标悬停时的a标签的下划线*/
+a:hover {
+  text-decoration: none;
+}
+/*去除正在点击的a标签的下划线（鼠标按下，尚未松开）*/
+a:active {
+  text-decoration: none;
+}
+/*去除获得焦点的a标签的下划线（被鼠标点击过）*/
+a:focus {
+  text-decoration: none;
+}
+
 .page_padding_top {
   padding-top: $header_height;
   width: 100%;
@@ -54,31 +79,46 @@ body {
 
 // 头部轮播 pagination重写样式
 .header_swiper {
+  position: relative;
   .swiper-pagination {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-top: solid 1px #ddd;
+    position: absolute;
+    right: 0 !important;
+    left: 90vw !important;
+    bottom: 40px !important;
+    width: 100px !important;
     .swiper-pagination-bullet {
-      width: auto;
-      white-space: nowrap;
-      height: 40px;
-      font-size: 16px;
-      color: #fff;
-      border-radius: 0;
-      background: #ddd;
-      margin: 0 50px !important;
-      opacity: 1;
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      justify-content: center;
+      width: 5px;
+      height: 5px;
     }
 
     .swiper-pagination-bullet-active {
-      color: $theme_color;
-      border-top: solid 1px $theme_color;
-      background: none;
     }
   }
 }
+
+.autoplay-progress {
+  position: absolute;
+  right: 160px;
+  bottom: 16px;
+  z-index: 10;
+  width: 100px;
+  height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
+.autoplay-progress svg {
+  --progress: 0;
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 10;
+  width: 100%;
+  height: 100%;
+  stroke-width: 20px;
+  fill: none;
+  stroke-dashoffset: calc(300 * (1 - var(--progress)));
+  stroke-dasharray: 300;
+}

src/views/Index/components/HeaderSwiper/index.vue

@@ -1,9 +1,28 @@
 <template>
-  <swiper :pagination="pagination" :modules="modules" class="header_swiper">
-    <swiper-slide>Slide 1</swiper-slide>
+  <swiper
+    :pagination="pagination"
+    :modules="modules"
+    :loop="true"
+    @autoplayTimeLeft="onAutoplayTimeLeft"
+    :autoplay="{
+      delay: 5000,
+      disableOnInteraction: false,
+    }"
+    class="header_swiper"
+  >
+    <swiper-slide>
+      <div class="slide_one">hello world</div>
+    </swiper-slide>
     <swiper-slide>Slide 2</swiper-slide>
     <swiper-slide>Slide 3</swiper-slide>
     <swiper-slide>Slide 4</swiper-slide>
+    <template #container-end>
+      <div class="autoplay-progress">
+        <svg viewBox="0 0 48 48" ref="progressLine">
+          <line x1="0" y1="2" x2="300" y2="2" stroke="skyblue"></line>
+        </svg>
+      </div>
+    </template>
   </swiper>
 </template>
 <script>
@@ -12,38 +31,40 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 // Import Swiper styles
 import 'swiper/css'
 // import required modules
-import { Pagination } from 'swiper'
-
+import { Pagination, Autoplay } from 'swiper'
+import { ref } from 'vue'
 export default {
   components: {
     Swiper,
     SwiperSlide,
   },
   setup() {
+    const progressLine = ref(null)
+    const onAutoplayTimeLeft = (s, time, progress) => {
+      progressLine.value.style.setProperty('--progress', 1 - progress)
+    }
     return {
+      onAutoplayTimeLeft,
+      progressLine,
       pagination: {
-        clickable: true,
         renderBullet: function (index, className) {
-          let indexName = ''
-          switch (index) {
-            case 0:
-              indexName = '产品梦工厂'
-              break
-            case 1:
-              indexName = '硬件实验室'
-              break
-            case 2:
-              indexName = '结构实验室'
-              break
-            case 3:
-              indexName = '全案开发'
-              break
-          }
-          return '<div class="' + className + '">' + indexName + '</div>'
+          return '<div class="' + className + '"></div>'
         },
       },
-      modules: [Pagination],
+      modules: [Pagination, Autoplay],
     }
   },
 }
 </script>
+
+<style scoped lang="scss">
+.header_swiper {
+  .slide_one {
+    width: 100%;
+    height: 100%;
+    background: url(../../../../assets/img/1.jpg);
+    background-position: 40%;
+    background-size: auto 100%;
+  }
+}
+</style>

yarn.lock

@@ -217,6 +217,11 @@
   resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz"
   integrity sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==
 
+animate.css@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz#614ec5a81131d7e4dc362a58143f7406abd68075"
+  integrity sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==
+
 anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"