项目场景：

提示：这里简述项目相关背景：
最近四人合作写了煜龙的项目
请添加图片描述

创建项目

提示：这里描述项目：

第一，要写好一个项目，要先把框架搭起来
让我们看看里面都有些什么

请添加图片描述

项目分析：

搭建好项目，我们家可以开始构思要怎么写了
看到主页面有两个大块
分别是职教板块和留学板块
先来看看职教板块
请添加图片描述
这是一整个主页，下面有一个导航栏是固定在页面底部的
用css来设置一个绝对定位就可以解决

.bottom {
    width: 3.75rem;
    height: 0.6rem;
    display: flex;

    background-image: linear-gradient(#148dfe, #7d48f8);
    border-top: 0.02rem solid #fff;
    z-index: 99999;
    }

里面的招生简章和推荐院校等用路由来写，
也就是router-link

<router-link to="/yuanxiaotuijian" class="div">
        <img src="http://mtm.gzqpxjy.com/images/bottomFixed/footerImg2.png" alt="" />
        <span>招生简章</span>
      </router-link>

当然也有其他页面不会用到这个底部导航栏
所以我们要写一个判断，
使用v-show

<div
      class="bottom"
      style="position: fixed; bottom: 0; left: 0"
      v-show="this.$route.meta.text == 'HomeOne' && this.$route.meta.text != 'a'"
    >

这样导航栏就写完了
咱们开始下一步
一开始会看见一个轮播图
发现其他页面也会有轮播图
而且还一样
所以我们把他拿出来单独写

<template>
  <div class="showImg">
    <img
      @mouseover="changeInterval(true)"
      @mouseleave="changeInterval(false)"
      v-for="(item, index) in imgArr"
      :key="index"
      :src="`http://www.shxw114.com:9527/${item.ad_logo}`"
      alt="暂无图片"
      v-show="index === currentIndex"
    />
    <div @click="clickIcon('up')" class="iconDiv icon-left">
      <i class="el-icon-caret-left"></i>
    </div>
    <div @click="clickIcon('down')" class="iconDiv icon-right">
      <i class="el-icon-caret-right"></i>
    </div>
    <div class="banner-circle">
      <ul>
        <li
          @click="changeImg(index)"
          v-for="(item, index) in imgArr"
          :key="index"
          :class="index === currentIndex ? 'active' : ''"
        ></li>
      </ul>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "HomeOne",
  data() {
    return {
      currentIndex: 0, //当前所在图片下标
      timer: null, //定时轮询
      imgArr: {},
    };
  },
  methods: {
    //开启定时器
    startInterval() {
      // 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
      clearInterval(this.timer);
      this.timer = setInterval(() => {
        this.currentIndex++;
        if (this.currentIndex > this.imgArr.length - 1) {
          this.currentIndex = 0;
        }
      }, 3000);
    },
    // 点击左右箭头
    clickIcon(val) {
      if (val === "down") {
        this.currentIndex++;
        if (this.currentIndex === this.imgArr.length) {
          this.currentIndex = 0;
        }
      } else {
        /* 第一种写法
					this.currentIndex--;
					if(this.currentIndex < 0){
						this.currentIndex = this.imgArr.length-1;
					} */
        // 第二种写法
        if (this.currentIndex === 0) {
          this.currentIndex = this.imgArr.length;
        }
        this.currentIndex--;
      }
    },
    // 点击控制圆点
    changeImg(index) {
      this.currentIndex = index;
    },
    //鼠标移入移出控制
    changeInterval(val) {
      if (val) {
        clearInterval(this.timer);
      } else {
        this.startInterval();
      }
    },

    banner() {
      let api = "/api?mod=bran";
      axios.get(api).then((res) => {
        console.log(res.data);
        this.imgArr = res.data;
      });
    },
  },
  //进入页面后启动定时轮询
  mounted() {
    this.startInterval();
    this.banner();
  },
};
</script>
<style lang="scss">
/* 清除li前面的圆点 */
li {
  list-style-type: none;
}
.showImg {
  position: relative;
  width: 3.75rem;
    height: 1.5rem;
  margin: 0 auto 0;
  overflow: hidden;
}
/* 轮播图片 */
.showImg img {
  width: 100%;
    height: 1.5rem;
}

/* 箭头图标 */
.iconDiv {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: .3rem;
  height: .3rem;
  border: 1px solid #666;
  border-radius: .15rem;
  background-color: rgba(125, 125, 125, 0.2);
  line-height: .3rem;
  text-align: center;
  font-size: .25rem;
  cursor: pointer;
}
.iconDiv:hover {
  background-color: white;
}
.icon-left {
  left: .1rem;
}
.icon-right {
  right: .1rem;
}

/* 控制圆点 */
.banner-circle {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: .2rem;
}
.banner-circle ul {
  margin: 0 .5rem;
  height: 100%;
  text-align: center;
}
.banner-circle ul li {
  display: inline-block;
  width: .3rem;
  height: .02rem;
  margin: 0 5px;
  //   border-radius: 7px;
  background-color: rgba(125, 125, 125, 0.8);
  cursor: pointer;
}
.active {
  background-color: black !important;
}
</style>

写完轮播图之后就可以哪里试用插哪里
在主页面引入

import SlideShow from "@/components/SlideShow";

在需要的地方插入

<SlideShow></SlideShow>

接下来就开始写头条资讯
写这个要用到动画事件
让他自上而下移动

<div class="zhong">
      <div class="center">
        <div class="demo-list">
          <div class="zi">
            <img src="../assets/img/content1img1.2f141596.png" alt="" />
          </div>
          <div class="rowup" v-for="(item, index) in title" :key="index">
            <div class="item_txt">
              <p class="item_txtOne">{{ item.name }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

写好样式之后就开始写这个事件

@-webkit-keyframes rowup {
        0% {
          -webkit-transform: translate3d(0, -0.64rem, 0);
          transform: translate3d(0, -0.64rem, 0);
        }
        100% {
          -webkit-transform: translate3d(0, -1.24rem, 0);
          transform: translate3d(0, -1.24rem, 0);
        }
      }
      @keyframes rowup {
        0% {
          -webkit-transform: translate3d(0, -0.64rem, 0);
          transform: translate3d(0, -0.64rem, 0);
        }
        100% {
          -webkit-transform: translate3d(0, -1.24rem, 0);
          transform: translate3d(0, -1.24rem, 0);
        }
      }
      .rowup {
        -webkit-animation: 2s rowup linear infinite normal;
        animation: 2s rowup linear infinite normal;
        position: relative;

设置好移动的速度和频率
这个头条资讯也就写完了
剩下的都是静态页面
看起来整整齐齐的可以用display: flex;
也就是flex布局
还有一些点击图片跳到二级页三级页的
直接在img外层加上router-link后
在router中设置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import HomeOne from '../views/HomeOne.vue'
import HomeTwo from '../views/HomeTwo.vue'
import xbTechnology from '../views/HomeOne/routerr/xbTechnology.vue'
import bjLanguage from '../views/HomeOne/routerr/bjLanguage.vue'
import chinaGeology from '../views/HomeOne/routerr/chinaGeology.vue'
import hnScience from '../views/HomeOne/routerr/hnScience.vue'
import jnUniversity from '../views/HomeOne/routerr/jnUniversity.vue'
import korea from '../views/HomeTwo/korea.vue'
import Singapore from '../views/HomeTwo/Singapore.vue'

import kczy from '@/views/HomeOne/new/kczy.vue'
import gtzy from '@/views/HomeOne/new/gtzy.vue'
import dqzy from '@/views/HomeOne/new/dqzy.vue'
import hkfw from '@/views/HomeOne/new/hkfw.vue'
import youlun from '@/views/HomeOne/new/youlun.vue'
import yks from '@/views/HomeOne/new/yks.vue'

import xbTechnolog from '../views/routee/xbTechnolog.vue'
import bjLanguag from '../views/routee/bjLanguag.vue'
import chinaGeolo from '../views/routee/chinaGeolo.vue'
import hnScienc from '../views/routee/hnScienc.vue'
import jnUniversit from '../views/routee/jnUniversit.vue'
import hdUniversit from '../views/routee/hdUniversit.vue'


//about
// const About = () => import('../views/HomeOne/about.vue')
// const about = () => import('../views/HomeOne')
Vue.use(VueRouter)

const routes = [

  {
    path: '/xbtechnolog',
    name: 'xbtechnolog',
    meta: {
      text: 'a'
    },
    component: xbTechnolog
  },
  {
    path: '/bjlanguag',
    name: 'bjlanguag',
    meta: {
      text: 'a'
    },
    component: bjLanguag
  },
  {
    path: '/chinageolo',
    name: 'chinageolo',
    meta: {
      text: 'a'
    },
    component: chinaGeolo
  },
  {
    path: '/hnscienc',
    name: 'hnscienc',
    meta: {
      text: 'a'
    },
    component: hnScienc
  },
  {
    path: '/jnuniversit',
    name: 'jnuniversit',
    meta: {
      text: 'a'
    },
    component: jnUniversit
  },
  {
    path: '/hduniversit',
    name: 'hduniversit',
    meta: {
      text: 'a'
    },
    component: hdUniversit
  },

  {
    path: '/',
    name: 'home',
    meta: {
      text: 'a'
    },
    component: HomeView
  }, {
    path: '/HomeOne',
    name: 'HomeOne',
    meta: {
      text: 'HomeOne'
    },
    component: HomeOne
  },

  {
    path: '/xbtechnology',
    name: 'xbtechnology',
    meta: {
      text: 'a'
    },
    component: xbTechnology
  },
  {
    path: '/bjlanguage',
    name: 'bjlanguage',
    meta: {
      text: 'a'
    },
    component: bjLanguage
  },
  {
    path: '/chinageology',
    name: 'chinageology',
    meta: {
      text: 'a'
    },
    component: chinaGeology
  },
  {
    path: '/hnscience',
    name: 'hnscience',
    meta: {
      text: 'a'
    },
    component: hnScience
  },
  {
    path: '/jnuniversity',
    name: 'jnuniversity',
    meta: {
      text: 'a'
    },
    component: jnUniversity
  },

  {
    path: '/kczy',
    name: 'kczy',

    meta: {
      text: 'a'
    },
    component: kczy
  },

  {
    path: '/gtzy',
    name: 'gtzy',

    meta: {
      text: 'a'
    },
    component: gtzy
  },
  {
    path: '/dqzy',
    name: 'dqzy',
    component: dqzy,

    meta: {
      text: 'a'
    },
  },
  {
    path: '/hkfw',
    name: 'hkfw',

    meta: {
      text: 'a'
    },
    component: hkfw
  },
  {
    path: '/youlun',
    name: 'youlun',

    meta: {
      text: 'a'
    },
    component: youlun
  },
  {
    path: '/yks',
    name: 'yks',

    meta: {
      text: 'a'
    },
    component: yks
  },
  {
    path: '/yuanxiaotuijian',
    name: 'yuanxiaotuijian',
    meta: {
      text: 'HomeOne'
    },
    component: () => import("../views/HomeOne/yuanxiaotuijian.vue")
  },
  {
    path: '/About',
    name: 'About',
    meta: {
      text: 'HomeOne'
    },
    component: () => import("../views/HomeOne/About.vue")
  },
  {
    path: '/introduce',
    name: 'introduce',
    meta: {
      text: 'HomeOne'
    },
    component: () => import("../views/HomeOne/introduce.vue")
  },
  {
    path: '/zaixianbaoming',
    name: 'zaixianbaoming',
    meta: {
      text: 'HomeOne'
    },
    component: () => import("../views/HomeOne/zaixianbaoming.vue")
  },
  {
    path: '/asdf',
    name: 'asdf',
    meta: {
      text: 'HomeOne'
    },
    component: () => import("../views/HomeOne/asdf.vue")
  },

  {
    path: '/HomeTwo',
    name: 'HomeTwo',
    meta: {
      text: 'HomeTwo',
      asd: "aa"
    },
    component: HomeTwo
  },

  {
    path: '/benkeyi',
    name: 'benkeyi',
    meta: {
      text: 'HomeTwo'
    },
    component: () => import("../views/HomeTwo/benkeyi.vue")
  },
  {
    path: '/twobenke',
    name: 'twobenke',
    meta: {
      text: 'HomeTwo'
    },
    component: () => import("../views/HomeTwo/twobenke.vue")
  },
  {
    path: '/benshuo',
    name: 'benshuo',
    meta: {
      text: 'HomeTwo'
    },
    component: () => import("../views/HomeTwo/benshuo.vue")
  },
  {
    path: '/korea',
    name: 'korea',
    meta: {
      text: 'HomeTwo'
    },
    component: korea
  },
  {
    path: '/singapore',
    name: 'singapore',
    meta: {
      text: 'HomeTwo'
    },
    component: Singapore
  },
  {
    path: '/academyPage',
    name: 'academyPage',
    meta: {
      text: 'HomeTwo'
    },
    component: () => import("@/views/HomeTwo/two/academyPage")
  },



  //高中  
  {
    path: '/gaozhongsheng',
    name: 'gaozhongsheng',
    meta: {
      text: 'a'
    },
    component: () => import("@/views/HomeOne/routerr/SeniorHighSchoolStudent")
  },
  //初中生
  {
    path: '/chuzhong',
    name: 'chuzhong',
    meta: {
      text: 'a'
    },
    component: () => import("@/views/HomeOne/routerr/chuzhong")
  },

  //一对一找老师
  {
    path: '/whom',
    name: 'whom',
    meta: {
      text: 'a'
    },
    component: () => import("@/components/whom")
  },

]
// benshuo
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router