完成header和footer两个公共组件

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vue-project",
       "version": "0.0.0",
       "dependencies": {
+        "@element-plus/icons-vue": "^2.3.2",
         "element-plus": "^2.13.0",
         "pinia": "^3.0.4",
         "vue": "^3.5.25",
@@ -2259,7 +2260,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "copy-anything": "^2.0.1",
         "parse-node-version": "^1.0.1",

package.json

@@ -12,6 +12,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
     "element-plus": "^2.13.0",
     "pinia": "^3.0.4",
     "vue": "^3.5.25",

src/App.vue

@@ -1,9 +1,13 @@
 <script setup>
 
+import HeaderNav from "@/components/HeaderNav.vue";
+import Footer from "@/components/Footer.vue"
 </script>
 
 <template>
+  <HeaderNav></HeaderNav>
   <router-view></router-view>
+  <Footer></Footer>
 </template>
 
 <style scoped>

src/assets/base.css

@@ -35,6 +35,11 @@
 
   --section-gap: 160px;
 }
+:root{
+  --el-menu-border-color: #ffffffff;
+  --el-menu-text-color:#333333 !important;
+  --el-menu-item-font-size:18px !important;
+}
 
 @media (prefers-color-scheme: dark) {
   :root {
@@ -56,6 +61,7 @@
   box-sizing: border-box;
   margin: 0;
   font-weight: normal;
+  padding:0;
 }
 
 body {
@@ -84,3 +90,11 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+a{
+  text-decoration: none;
+  outline: none;
+  color: #eeeeee;
+}
+a:hover{
+  color:#66b1ff
+}

src/assets/img/微信.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9737 7.19789C13.1693 7.19789 13.3622 7.2122 13.5532 7.23296C13.0327 4.83433 10.4407 3.05176 7.48239 3.05176C4.17471 3.05176 1.46509 5.28286 1.46509 8.1157C1.46509 9.75064 2.36676 11.0934 3.87294 12.1349L3.2712 13.9265L5.3745 12.8825C6.12759 13.0297 6.73114 13.1815 7.48239 13.1815C7.67112 13.1815 7.85799 13.1723 8.04397 13.1575C7.92629 12.7598 7.85799 12.3426 7.85799 11.9102C7.85801 9.30903 10.1154 7.19789 12.9737 7.19789ZM9.73888 5.58328C10.192 5.58328 10.4919 5.8786 10.4919 6.32668C10.4919 6.77289 10.192 7.07191 9.73888 7.07191C9.28756 7.07191 8.83535 6.77289 8.83535 6.32668C8.83535 5.8786 9.28758 5.58328 9.73888 5.58328ZM5.52769 7.07189C5.07638 7.07189 4.62139 6.77288 4.62139 6.32666C4.62139 5.87858 5.07638 5.58326 5.52769 5.58326C5.97851 5.58326 6.27892 5.87858 6.27892 6.32666C6.27892 6.7729 5.97851 7.07189 5.52769 7.07189ZM18.4658 11.8387C18.4658 9.45807 16.0584 7.51767 13.3548 7.51767C10.4919 7.51767 8.23732 9.45807 8.23732 11.8387C8.23732 14.2228 10.4919 16.159 13.3548 16.159C13.9538 16.159 14.5583 16.0104 15.16 15.8609L16.8106 16.7552L16.3579 15.2675C17.566 14.3704 18.4658 13.1815 18.4658 11.8387ZM11.6954 11.0934C11.396 11.0934 11.0937 10.7986 11.0937 10.4977C11.0937 10.201 11.396 9.90245 11.6954 9.90245C12.1504 9.90245 12.4485 10.201 12.4485 10.4977C12.4485 10.7986 12.1504 11.0934 11.6954 11.0934ZM15.0049 11.0934C14.7078 11.0934 14.4074 10.7986 14.4074 10.4977C14.4074 10.201 14.7078 9.90245 15.0049 9.90245C15.4562 9.90245 15.758 10.201 15.758 10.4977C15.758 10.7986 15.4562 11.0934 15.0049 11.0934Z" fill="white"/>
+</svg>

src/assets/main.css

@@ -1,2 +1,7 @@
 @import './base.css';
 
+body{
+    max-width:1920px;
+    margin:auto;
+    position:relative;
+}

src/components/Footer.vue

@@ -0,0 +1,156 @@
+<script setup>
+  import {reactive} from "vue";
+  let list=reactive([])
+  let technologyList=reactive([])
+  let productsList=reactive([])
+  let solutionList=reactive([])
+  let serviceExchangeList=reactive([])
+  let aboutUsList=reactive([])
+  technologyList=['核心技术','飞利信流媒体实时总线','实时AI降噪','动态啸叫抑制','快速人声定位及增强','多指向性可调','流数据实时加解密','语音转写、声纹特征识别、会议纪要','机器人声学感知']
+  productsList=['产品展示','圆形阵列麦克风开发板','反馈抑制模块','指向性调节模块','AI会议麦克风','超融合会议一体机','高速流数据加解密box','融媒体机']
+  solutionList=['解决方案','政府用现场会议室','企业用现场/远程视频会议室','工地环境下会议系统']
+  serviceExchangeList=['服务交流','产品文档','技术支持','客户反馈']
+  aboutUsList=['关于我们','实验室简介','实验室新闻','奖项荣誉']
+  list=[technologyList,productsList,solutionList,serviceExchangeList,aboutUsList]
+  console.log(list)
+</script>
+
+<template>
+<div class="footer">
+  <div class="footer-header">
+     <ul v-for="(item,index) in list" :key="index">
+       <li v-for="(value,index) in item" :key="index">
+         <div v-if="index===0">
+           {{value}}
+         </div>
+         <div v-else>
+           <a href="#">{{value}}</a>
+         </div>
+
+       </li>
+     </ul>
+    <ul>
+      <li>联系我们</li>
+      <li style="padding-top:2px;padding-bottom:2px;">60958301</li>
+      <li>地址: 北京市海淀区塔院志新村2号飞利信大厦（花园路北口）</li>
+      <li style="margin-top:80px;">
+        <div class="icons">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12.9737 7.19789C13.1693 7.19789 13.3622 7.2122 13.5532 7.23296C13.0327 4.83433 10.4407 3.05176 7.48239 3.05176C4.17471 3.05176 1.46509 5.28286 1.46509 8.1157C1.46509 9.75064 2.36676 11.0934 3.87294 12.1349L3.2712 13.9265L5.3745 12.8825C6.12759 13.0297 6.73114 13.1815 7.48239 13.1815C7.67112 13.1815 7.85799 13.1723 8.04397 13.1575C7.92629 12.7598 7.85799 12.3426 7.85799 11.9102C7.85801 9.30903 10.1154 7.19789 12.9737 7.19789ZM9.73888 5.58328C10.192 5.58328 10.4919 5.8786 10.4919 6.32668C10.4919 6.77289 10.192 7.07191 9.73888 7.07191C9.28756 7.07191 8.83535 6.77289 8.83535 6.32668C8.83535 5.8786 9.28758 5.58328 9.73888 5.58328ZM5.52769 7.07189C5.07638 7.07189 4.62139 6.77288 4.62139 6.32666C4.62139 5.87858 5.07638 5.58326 5.52769 5.58326C5.97851 5.58326 6.27892 5.87858 6.27892 6.32666C6.27892 6.7729 5.97851 7.07189 5.52769 7.07189ZM18.4658 11.8387C18.4658 9.45807 16.0584 7.51767 13.3548 7.51767C10.4919 7.51767 8.23732 9.45807 8.23732 11.8387C8.23732 14.2228 10.4919 16.159 13.3548 16.159C13.9538 16.159 14.5583 16.0104 15.16 15.8609L16.8106 16.7552L16.3579 15.2675C17.566 14.3704 18.4658 13.1815 18.4658 11.8387ZM11.6954 11.0934C11.396 11.0934 11.0937 10.7986 11.0937 10.4977C11.0937 10.201 11.396 9.90245 11.6954 9.90245C12.1504 9.90245 12.4485 10.201 12.4485 10.4977C12.4485 10.7986 12.1504 11.0934 11.6954 11.0934ZM15.0049 11.0934C14.7078 11.0934 14.4074 10.7986 14.4074 10.4977C14.4074 10.201 14.7078 9.90245 15.0049 9.90245C15.4562 9.90245 15.758 10.201 15.758 10.4977C15.758 10.7986 15.4562 11.0934 15.0049 11.0934Z"
+                  fill="#fff"/>
+          </svg>
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12.9833 3.15509C12.7524 3.19616 12.2367 3.39427 12.2323 3.82109C12.2281 4.2476 12.6849 4.52599 12.9155 4.5474C13.7667 4.5474 17.8375 4.32649 17.093 8.25417C16.9899 8.68499 16.9109 9.34455 17.4221 9.48334C17.8864 9.60008 18.1729 9.11501 18.3018 8.74571C18.3635 8.31591 20.2462 2.68684 12.9833 3.15509Z" fill="#9C9C9C"/>
+            <path d="M14.0422 9.72903C14.0422 9.72903 13.1888 9.91356 13.5925 9.27869C14.2263 8.03702 13.1945 5.99945 10.5199 7.35353C9.59838 7.84466 9.59838 7.49665 9.62908 6.88244C9.71191 3.52854 3.49534 5.91983 1.73405 10.2804C0.741142 12.9266 2.33152 15.2126 4.79165 16.2105C10.7965 18.354 15.1686 14.8067 15.9138 12.514C16.9078 9.06883 14.0422 9.72903 14.0422 9.72903ZM8.28392 15.4173C5.44155 15.8078 2.9222 14.5586 2.65556 12.6289C2.39041 10.698 4.47903 8.81535 7.32139 8.42496C10.1637 8.03416 12.6828 9.28219 12.9494 11.2131C13.2149 13.1435 11.1256 15.0248 8.28392 15.4173Z" fill="#9C9C9C"/>
+            <path d="M15.3973 8.7178C15.6832 8.7892 15.7945 8.55466 15.8259 8.34056C15.8552 8.12637 16.3488 5.22333 13.1785 5.55809C12.9386 5.58455 12.7769 5.72801 12.8048 5.93859C12.8311 6.1495 13.0089 6.26761 13.1442 6.25153C13.2794 6.23584 15.397 5.86465 15.2235 8.09605C15.2552 8.29913 15.1125 8.64639 15.3973 8.7178Z" fill="#9C9C9C"/>
+            <path d="M7.35764 9.77655C5.87613 10.0607 4.85725 11.2445 5.08278 12.4212C5.30832 13.5979 6.69311 14.3206 8.17534 14.0362C9.65716 13.7525 10.6751 12.5683 10.4502 11.3923C10.2236 10.216 8.83987 9.49252 7.35764 9.77655ZM7.18177 12.9512C6.6699 12.9512 6.25485 12.5997 6.25485 12.1628C6.25485 11.7277 6.6699 11.3744 7.18177 11.3744C7.69354 11.3744 8.1083 11.7277 8.1083 12.1628C8.1083 12.599 7.69313 12.9512 7.18177 12.9512ZM8.69963 11.8873C8.50871 11.8873 8.31455 11.6571 8.31455 11.3737C8.31455 11.0907 8.50871 10.8612 8.69963 10.8612C8.89062 10.8612 9.08544 11.0907 9.08544 11.3737C9.08544 11.6574 8.89062 11.8873 8.69963 11.8873Z"
+                  fill="#9C9C9C"/>
+          </svg>
+          <svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M12.6448 6.29049C11.3983 6.29049 10.1859 5.88537 9.18866 5.13597V10.3639C9.18866 13.0336 7.13189 15.1957 4.59433 15.1957C2.05676 15.1957 0 13.0336 0 10.3639C0 7.69431 2.05676 5.53219 4.59433 5.53219C4.84808 5.53219 5.09442 5.55445 5.33482 5.596V8.36506C5.10481 8.27454 4.85996 8.22854 4.61362 8.22854C3.48136 8.22854 2.56279 9.19311 2.56279 10.3847C2.56279 11.5749 3.48136 12.5409 4.61362 12.5409C5.74439 12.5409 6.66296 11.5749 6.66296 10.3847V0H9.22576C9.22576 1.99592 10.7646 3.61343 12.6626 3.61343V6.28901L12.6448 6.29049Z"
+                  fill="#9C9C9C"/>
+          </svg>
+        </div>
+      </li>
+      <li>
+        <div class="codes">
+          <div class="code">
+            <div class="border">
+              <img src="../assets/img/code.png" alt="">
+            </div>
+            <div class="title">
+              公众号
+            </div>
+          </div>
+          <div class="code">
+            <div class="border">
+              <img src="../assets/img/code.png" alt="">
+            </div>
+            <div class="title">
+              视频号
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+  </div>
+  <div class="footer-footer">
+    北京飞利信科技股份有限公司&nbsp;&nbsp;版权所有 &nbsp;&nbsp;&nbsp;&nbsp;京ICP备17012310号 京公网安备 11010802037844号
+  </div>
+</div>
+</template>
+
+<style scoped lang="less">
+.footer{
+  background-color: #161B26;
+  padding:16px 174px;
+  .footer-header{
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #373737;
+    padding:30px 0;
+    ul{
+      list-style: none;
+      a{
+        color:#fff;
+        &:hover{
+          color:#66b1ff;
+        }
+      }
+      li{
+        color:#fff;
+        font-family: Alibaba PuHuiTi;
+        font-weight: 300;
+        font-size: 14px;
+        line-height: 100%;
+        letter-spacing: 0;
+        padding: 11px;
+        margin-top:5px;
+        &:nth-child(1){
+          color:#D2D2D2;
+          font-weight: 400;
+          font-size: 18px;
+          line-height: 100%;
+          letter-spacing: 0;
+          padding-bottom:20px;
+          padding-top: 0;
+        }
+      }
+      &:last-child li:nth-child(2){
+          font-weight: 400;
+          font-size: 32px;
+          line-height: 100%;
+          letter-spacing: 0;
+      }
+    }
+    .icons{
+      display: flex;
+      gap:20px;
+    }
+    .codes{
+      display: flex;
+      gap: 20%;
+      .code{
+        .border{
+          padding:10px;
+          background-color: #ffffff;
+          border-radius: 4px;
+        }
+        .title{
+          text-align: center;
+          margin-top: 20px;
+          color: #fff;
+          font-size: 14px;
+          font-weight: 300;
+        }
+      }
+    }
+  }
+  .footer-footer{
+    color:#6E6E6E;
+    font-size: 16px;
+    font-weight: 500;
+    padding: 20px 0 0 30px;
+  }
+}
+</style>

src/components/HeaderNav.vue

@@ -0,0 +1,139 @@
+<script setup>
+import { ref } from 'vue'
+import { Search } from '@element-plus/icons-vue'
+
+// 选中逻辑
+const handleSelect = (key, keyPath) => {
+  console.log(key, keyPath)
+}
+
+
+const circleUrl='https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
+
+</script>
+
+<template>
+  <el-menu
+      class="el-menu-demo"
+      mode="horizontal"
+      :ellipsis="false"
+      @select="handleSelect"
+  >
+    <el-menu-item >
+      <img
+          src="@/assets/logo.svg"
+          alt="飞利信logo"
+          class="logo"
+      />
+    </el-menu-item>
+    <el-menu-item index="0">核心技术</el-menu-item>
+    <el-menu-item index="1">产品展示</el-menu-item>
+    <el-menu-item index="2">解决方案</el-menu-item>
+    <el-menu-item index="3">服务交流</el-menu-item>
+    <el-menu-item index="4">关于我们</el-menu-item>
+    <el-menu-item>返回官网</el-menu-item>
+    <el-menu-item>
+      <el-input
+          v-model="input1"
+          :style="{
+              '--el-input-border-radius': '35px',
+              '--el-input-bg-color': '#FFFFFF57',
+              'width':'206px',
+              'height':'46px',
+              'font-size':'18px',
+
+          }"
+          class="el-input"
+          size="large"
+          placeholder="关键词搜索"
+          :suffix-icon="Search"
+      />
+    </el-menu-item>
+    <el-menu-item>
+      <div class="person">
+        <el-avatar :size="26" :src="circleUrl" />
+        <span>未登录</span>
+      </div>
+    </el-menu-item>
+
+  </el-menu>
+</template>
+
+<style scoped lang="less">
+.el-menu-demo{
+  height: 80px;
+  width: 100%;
+  background-color:#FFFFFF80;
+  max-width: 1920px;
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0;
+  right: 0;
+  font-size:18px;
+  .logo{
+    width: 131.63px;
+    height: 42.25px;
+  }
+  .person{
+    display: flex;
+    align-items: center;
+    span{
+      margin-left: 16px;
+    }
+  }
+ border-bottom: none !important;
+  .el-input{
+    :deep(.el-icon svg){
+      height:1.1em;
+      width:1.1em;
+    }
+  }
+
+    /* 移除所有默认边框 */
+    .el-menu-item {
+      border-bottom: none !important;
+      --el-menu-hover-bg-color:#FFFFFF80;
+      &:hover{
+        background-color: #FFFFFF80 !important;
+      }
+    }
+    /* 创建自定义激活指示器 */
+    .el-menu-item.is-active {
+      position: relative;
+      --el-menu-active-color:#333333;
+      --el-menu-hover-bg-color:#FFFFFF80;
+
+      /* 使用 transform 精确控制位置和长度 */
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 18px; /* 控制距离：值越小越靠近文字 */
+        left: 0;
+        width: 100%;
+        height: 3px;
+        background: #4353FF;
+        border-radius: 2px;
+
+        /* 关键：scaleX 控制长度，0.3 表示30% */
+        transform: scaleX(0.3);
+        transform-origin: center bottom;
+        transition: transform 0.3s ease, bottom 0.3s ease;
+      }
+
+      &:hover::before {
+        transform: scaleX(0.7);
+        //background: #4353FF;
+      }
+    }
+
+}
+
+.el-menu--horizontal > .el-menu-item:nth-child(1) {
+  margin-right: auto;
+  margin-left:160px;
+}
+
+
+</style>
+

src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
+import  '@/assets/main.css'
 
 import App from './App.vue'
 import router from './router'

src/views/HomeView.vue

@@ -1,9 +1,53 @@
 <script setup>
-import TheWelcome from '../components/TheWelcome.vue'
+import {reactive} from "vue";
+
+const swiperItem=reactive([
+  {
+    src:'/src/assets/image/轮播图2.png'
+  },
+  {
+    src:'/src/assets/image/轮播图2.png'
+  },
+  {
+    src:'/src/assets/image/轮播图2.png'
+  },
+])
 </script>
 
 <template>
-  <main>
-    <TheWelcome />
-  </main>
+  <div class="block text-center swiper" m="t-4">
+    <el-carousel trigger="click" height="852px" :arrow="'never'" indicator-position >
+      <el-carousel-item v-for="(item,index) in swiperItem" :key="index">
+        <img :src=item.src :alt=index>
+      </el-carousel-item>
+    </el-carousel>
+  </div>
 </template>
+<style scoped lang="less">
+.swiper{
+  height:852px;
+  .el-carousel{
+    --el-carousel-indicator-height:12.53px;
+    --el-carousel-indicator-width:203.69px;
+  }
+}
+.demonstration {
+  color: var(--el-text-color-secondary);
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  opacity: 0.75;
+  line-height: 852px;
+  margin: 0;
+  text-align: center;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>