网站头部导航组件和底部组件

        网站设计时，每个页面几乎都存在头部导航栏以及底部，因此将其设计成组件的方式去调用可以大大较低代码量，提高开发效率。话不多说，直接上代码。

头部导航栏 （使用的是element组件，需先引入element）

<template>
  <div
    style="
      display: flex;
      flex-direction: row;
      position: fixed;
      top: 0;
      width: 100%;
      height: 80px;
      z-index: 100;
      overflow: hidden;
    "
  >
    <el-menu
      :default-active="activeIndex"
      style="width: 100%; height: 80px"
      mode="horizontal"
      background-color="#e3deda"
      text-color="#ffff"
      active-text-color="#000a"
      @select="handleSelect"
    >
      <div class="head">
        <img src="../assets/logo.png" />
        <h2>欣辰网络科技工作室</h2>
      </div>
      <el-menu-item index="1">首页</el-menu-item>
      <el-menu-item index="5">产品展示</el-menu-item>
      <el-sub-menu index="3">
        <template #title>客户案列</template>
        <el-menu-item index="31">系统案列</el-menu-item>
        <el-menu-item index="32">小程序案列</el-menu-item>
        <el-menu-item index="33">网站案列</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>资讯中心</template>
        <el-menu-item index="21">新闻资讯</el-menu-item>
        <el-menu-item index="22">公告</el-menu-item>
        <!-- <el-sub-menu index="2-4">
          <template #title>案列展示</template>
          <el-menu-item index="2-4-1">客户案列</el-menu-item>
          <el-menu-item index="2-4-2">自研案列</el-menu-item>
          <el-menu-item index="2-4-3">item three</el-menu-item>
        </el-sub-menu> -->
      </el-sub-menu>
      <el-menu-item index="4">关于我们</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
import router from "@/router";
export default {
  name: "HeadNavigation",
  data() {
    return {
      activeIndex: 1,
    };
  },
  mounted() {
    this.activeIndex = this.$route.query.activeIndex;
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(keyPath);
        //下面是路由跳转判断
      if (keyPath == 5) {
        router.push({
          path: "/ProductDisplay",
          query: { activeIndex: key },
        });
      } else if (keyPath == 1) {
        router.push({
          path: "/",
          query: { activeIndex: key },
        });
      } else if (keyPath[1] == 31 || keyPath[1] == 32 || keyPath[1] == 33) {
        this.$emit("handleSelect", keyPath[1]);
        router.push({
          path: "/UserProfile",
          query: { activeIndex: key, keyPath: keyPath[1] },
        });
      } else if (keyPath[1] == 21 || keyPath[1] == 22) {
        this.$emit("handleSelect", keyPath[1]);
        router.push({
          path: "/Information",
          query: { activeIndex: key, keyPath: keyPath[1] },
        });
      } else if (keyPath == 4) {
        router.push({
          path: "/About",
          query: { activeIndex: key },
        });
      }
    },
  },
};
</script>

<style scoped>
.head {
  width: 37%;
  display: flex;
  flex-direction: row;
}
.head img {
  margin-left: 3%;
  width: 80px;
  height: 80px;
}
h2 {
  line-height: 30px;
  margin-top: 25px;
  margin-left: 20px;
  font-size: 32px;
  color: #fff;
}
</style>

 效果图如下：

网站底部

<template>
  <div class="foot">
    <el-backtop :right="100" :bottom="100" />
    <div class="foottwo">
      <h4>服务项目</h4>
      <div class="flex justify-space-between mb-4 flex-wrap gap-4">
        <el-button
          v-for="button in buttons"
          :key="button.text"
          :type="button.type"
          text
          >{{ button.text }}</el-button
        >
      </div>
    </div>
    <div class="footone">
      <div>
        <h4>联系我们</h4>
        <p>
          单位：欣辰网络科技工作室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          服务热线：手机 1568******** | QQ
          146*******&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          地址：***************
        </p>
      </div>
      <div>
        <img src="../assets/img/erweima.jpg" />
      </div>
    </div>
    <div>
      <p class="footp">
        Copyright © 2023-**** 欣辰网络科技工作室 All Rights Reserved.
        滇ICP备********号-*
      </p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Foot",
  data() {
    return {
      buttons: [
        { type: "", text: "系统设计开发" },
        { type: "", text: "小程序开发" },
        { type: "", text: "APP开发" },
        { type: "", text: "微信工众平台" },
        { type: "", text: "系统维护" },
        { type: "", text: "技术交流" },
      ],
    };
  },
};
</script>

<style>
.foot {
  width: 100%;
  height: 280px;
  margin-top: 2px;
  background-image: linear-gradient(
    to right,
    #04af9212,
    #fb9b0c1b,
    #7603cd1d,
    #f83c5824,
    #478ee023
  );
  border-top: solid #ffd436 2px;
}
.footone {
  width: 98%;
  margin-top: 10px;
  margin-left: 1%;
  padding-top: 10px;
  border-top: 2px solid white;
  border-bottom: 2px dashed white;
  color: rgb(78, 76, 76);
  display: flex;
  flex-direction: row;
  line-height: 40px;
}
.footone p {
  margin-left: 10px;
}
.footone img {
  width: 100px;
  height: 100px;
  margin-left: 400px;
}
.foottwo {
  width: 98%;
  margin-top: 10px;
  line-height: 40px;
  margin-left: 1%;
}
.footp {
  text-align: center;
  margin-top: 20px;
  color: rgb(78, 76, 76);
}
</style>

 效果图如下：

篇幅太长，其他页面代码不做展示。为了网站内容看起来没那么枯燥，里面的展示采用了动画的形式，本人也是初学者，愿意将自己的经验与其他小伙伴分享。感兴趣的小伙伴可以私信我，一起交流学习。

部分页面内容展示动画

部分动画内容展示，实现简单，引用第三方库即可。