5.主页部分

轮播图插件: vue-awesome-swiper

• 此时还未集成element-ui,所以图片轮播就找了一个插件,参考博客
• 使用步骤:

  • 安装vue-awesome-swiper（安装稳定版本2.6.7）
    npm install vue-awesome-swiper@2.6.7 --save

  • 引入vue-awesome-swiper：一般通过main.js进行全局引入

    import VueAwesomeSwiper from ‘vue-awesome-swiper’
    import ‘swiper/dist/css/swiper.css’
    Vue.use(VueAwesomeSwiper)

  • 插件的使用,我在项目中将该插件的使用封装成了一个组件Swiper,通过向后端发送请求获取图片url

    <!-- 图片轮播组件(广告位) -->
    <template>
      <div id="swiperContainer" >
          <swiper :options="swiperOptions">
            <swiper-slide v-for="item in swiperList" :key="item.id">
                <img class="swiperImg" :src="item.imgUrl"/>
            </swiper-slide>
            <div class="swiperPagination" slot="pagination"></div>
          </swiper>
      </div>
    </template>
    
    <script>
    export default {
      data () {
        return {
    
            swiperOptions: {
                pagination: ".swiperPagination",
                loop: true,
                autoplay: 3000
            },
            swiperList: [
                // {
                //     imgUrl: "https://skaterdata.oss-cn-beijing.aliyuncs.com/publicResource/advs/adv1.jpg"
                // },{
                //     imgUrl: "https://skaterdata.oss-cn-beijing.aliyuncs.com/publicResource/advs/adv2.jpg"
                // },{
                //     imgUrl: "https://skaterdata.oss-cn-beijing.aliyuncs.com/publicResource/advs/adv3.jpg"
                // },
            ]
    
        }
      },
      created() {
    
        this.$http.get('http://116.62.40.10:8080/back/adv/advUrls.do')
          .then((res) => {
            this.swiperList = res.data;
          })
      
    
    
      }
    }
    </script>
    
    <style scoped>
    #swiperContainer {
      height: 290px;
      /* background-color: pink; */
    }
    
    .swiper-container {
      margin: 0 auto;
    }
    .swiper-wrapper {
      height: 270px;
    }
    .swiperPagination {
    
      bottom: 0;
      height: 15px;
    }
    </style>
    

主页图标使用精灵图

• 在此分享一个精灵图制作网站,精灵图制作网址,该工具的牛逼之处就在于,你图片上传以后,它生成精灵图,并且,将每一个图标的位置都给你标注出来,直接copy到代码中就能正确显示
  
  在主页中使用精灵图,点击图标跳转响应组件

<!-- 主页 -->
<template>
  <div id="Home">

    <!-- 图片轮播组件 -->
    <div id="swiperContainer">
      <Swiper></Swiper>
    </div>

    <!-- 功能列表 -->
    <div id="funList"  @click="goToConcretePage">
      <div id="fun1">
        <span>教学视频</span>
      </div>
      <div id="fun2">
        <span>pro档案</span>
      </div>
      <div id="fun3">
        <span>BATB</span>
      </div>
      <div id="fun4">
        <span>社区</span>
      </div>
      <div id="fun5">
        <span>滑板配置</span>
      </div>

    </div>

  </div>
</template>

<script>
import Swiper from '../components/Swiper.vue'
export default {
  components: {
    Swiper
  },
  data () {
    return {
    }
  },

  methods: {

    // 根据点击的对象跳转到指定的页面
    goToConcretePage(event) {
      
      switch (event.target.id) {
        
        case "fun1":
          this.$router.push({ path: "/TeachingVideos" });
          break;
      
        case "fun2":
          this.$router.push({ path: "/ProArchives" });
          break;
        
        case "fun3":
          this.$router.push({ path: "/Batb" });
          break;
        
        case "fun4":
          this.$router.push({ path: "/Community" });
          break;

        case "fun5":
          this.$router.push({ path: "/BoardConfiguration" });
          break;

        default:
          break;

      }

    }

  },

  mounted() {

    let spriteUrl = "https://skaterdata.oss-cn-beijing.aliyuncs.com/publicResource/sprite/css_sprites.png";
    // 动态绑定fun的背景图片
    document.getElementById("fun1").style.background = "white url('"+ spriteUrl +"') -94px -10px no-repeat";
    document.getElementById("fun2").style.background = "white url('"+ spriteUrl +"') -10px -94px no-repeat";
    document.getElementById("fun3").style.background = "white url('"+ spriteUrl +"') -94px -94px no-repeat";
    document.getElementById("fun4").style.background = "white url('"+ spriteUrl +"') -178px -10px no-repeat";
    document.getElementById("fun5").style.background = "white url('"+ spriteUrl +"') -10px -10px no-repeat";

  },

  created: function () {
    this.$emit("header", true);
    this.$emit("footer", true);

  },

}
</script>

<style scoped>

#Home {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  /* 解决overflow导致容器位置下移的问题(页面存在问题就加上,不存在就不用加) */
  position: absolute;
  top: 0px;
  left: 0;
}
/* 隐藏滚动条,此方式只适用支持css3的浏览器(chrome和safarifirefox，opera，ie10等新版本主流浏览器,IE8以下不支持CSS3) */
::-webkit-scrollbar {
display: none;
}


#funList {
  width: 744px;
  /* 在增肌功能后要记得修改高度 */
  height: 232px;
  margin: 0 auto;
}

#fun1,#fun2,#fun3,#fun4,#fun5{
  width: 64px;
  height: 64px;
  float: left;
  margin: 20px 60px 30px 60px;
  border: 1px solid black;
  border-radius: 15px;
  position: relative;
  /* 鼠标悬浮样式 */
  cursor: pointer;

}

#fun1>span,#fun2>span,#fun3>span,#fun4>span,#fun5>span {

  position: absolute;
  bottom: -35px;
  right: 0;
  font-size: 14px;
  width: 64px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
  font-weight: bold;
}
</style>