ze-gw/components/Banner.vue

<template>
  <section class="banner-one" id="banner">
    <span class="banner-one__shape-1"></span>
    <span class="banner-one__shape-2"></span>
    <span class="banner-one__shape-3"></span>
    <span class="banner-one__shape-4"></span>
    <div class="container">
      <div class="banner-one__moc">
        <img src="/assets/images/mocs/1.png" alt="Awesome Image" />
      </div><!-- /.banner-one__moc -->
      <div class="row">
        <div class="col-xl-6 col-lg-8">
          <div class="banner-one__content">

            <h3 class="banner-one__title">智慧零售,随时随地</h3><!-- /.banner-one__title -->
            <p class="banner-one__text"> 自定义个性化选择<br>让销售场景无处不在<br>时刻发生<br></p>
            <!-- /.banner-one__text -->
            <!-- <a href="#" class="banner-one__btn thm-btn "><span>Get Started</span></a> -->
          </div><!-- /.banner-one__content -->
        </div><!-- /.col-lg-6 -->
      </div><!-- /.row -->
    </div><!-- /.container -->
  </section>
</template>

<script>
    export default {
      name: "Banner"
    }
</script>

<style scoped>
  .banner-one__title{
    font-size: 40px;
    line-height: 120px;
  }
</style>