【WEB前端全栈成长计划】第三阶段 考核开发实录(四)

举报
hwJw19 发表于 2020/09/22 11:39:57 2020/09/22
【摘要】 下面我们来完成首页剩下的最后一个内容,就是banner图。这里的banner图,我们使用swiper来实现一下。 首先,停止项目服务ctrl+c就可以哈,然后在项目目录下,运行命令: npm install vue-awesome-swiper@3 --save-dev 然后我们在homeTop.vue里这样使用:<template> <div>...

    下面我们来完成首页剩下的最后一个内容,就是banner图。这里的banner图,我们使用swiper来实现一下。
    首先,停止项目服务ctrl+c就可以哈,然后在项目目录下,运行命令:
    npm install vue-awesome-swiper@3 --save-dev

    

    然后我们在homeTop.vue里这样使用:

<template>
       <div>
              <div class="recommendPage header">
                  <swiper :options="swiperOption" ref="mySwiper">
                    <swiper-slide>
                              <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-2.64b1407e7a8db89d6cf2.jpg" alt="">
                       </swiper-slide>
                    <swiper-slide>
                              <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-4.4ac0f6534a11844638e4.jpg" alt="">
                       </swiper-slide>
                    <swiper-slide>
                              <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-10.30eaaf519fa37bf97d36.jpg" alt="">
                       </swiper-slide>
                       <swiper-slide>
                            <img src="https://res.devcloud.huaweicloud.com/obsdevui/diploma/8.1.24.002/banner-8.d14241daf518717981c6.jpg" alt="">
                       </swiper-slide>
                    <div slot="pagination"></div>
                  </swiper>
                </div>
              <div>
                     <p>
                            Classroom是基于华为云的云上软件教学服务,支持高校师生实现备课、上课、作业、考试、实验、实训等全教学流程的线上教学,提供多类习题自动判题、企业级DevOps实训、免费在线习题库等众多高级特性辅助进行数字化教学转型。
                     </p>
                     <a href="">
                            <p>开始上课</p>
                     </a>
              </div>
       </div>
</template>
 
<script>
// 引入插件
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
 
export default {
  components: {
    swiper,
    swiperSlide
  },
  data() {
    return {
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true //允许分页点击跳转
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper;
    }
  },
  mounted() {
    // current swiper instance
    // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
    console.log("this is current swiper instance object", this.swiper);
    // this.swiper.slideTo(3, 1000, false);
  }
};
</script>
 
<style>
       .header {
              width: 100%;
              min-height: 360px;
              margin-top: 60px;
       }
 
       .header img {
              width: 100%;
              height: auto;
       }
 
       .intro {
              display: flex;
              flex-wrap: nowrap;
              padding: 30px;
              position: relative;
              top: -50px;
              z-index: 2;
              width: 1200px;
              background: #fff;
              box-shadow: 0 0 20px 0 rgba(41, 48, 64, .1);
              border-radius: 5px;
              align-items: center;
              margin: 0 auto;
       }
 
       .intro .banner-left {
              flex: 1;
              padding-right: 40px;
              font-size: 16px;
              color: #5e6678;
              line-height: 32px;
       }
 
       .intro a p {
              color: #fff;
              height: 32px;
              line-height: 32px;
              border-radius: 16px;
              margin-right: 12px;
              padding: 0px 20px;
              min-width: 80px;
              font-size: 14px;
              cursor: pointer;
              text-align: center;
       }
      
      
       .recommendPage .swiper-container{
         position: relative;
         width: 100%;
         min-height: 360px;
       } 
       .recommendPage .swiper-container .swiper-slide{
         width: 100%;
         color: #000;
         font-size: 16px;
         text-align: center;
       }
       .recommendPage .swiper-container img{
              width: 100%;
              height: 100%;
       }
       .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets{
              bottom:60px;
       }
</style>

    现在就可以看到banner的效果了,根据我们的需求简单调整下样式:


    【WEB前端全栈成长计划】第三阶段考核首页的部分,我们已经完成了,swiper是一个轮播框架,我就直接用了,有看不懂的同学可以自己搜搜swiper的文档看看哈~下一篇文章,我们来简单说下MOOC课程页面组件的开发。

    

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200