mall-web-ssr/components/btbBusiness/banner.vue

<template>
  <div class="banner">
    <div class="content">
      <p class="title" v-if="showAd"><marquee scrollAmount=1 width=501 direction="left" behavior="alternate">B2B商务】和【优软商城】牵手成功！大家可以更全面、便捷地了解和享受平台的各项服务咯!</marquee><a @click="showAd = false"><img src="/images/btbBusiness/close.png"></a></p>
      <div class="clearfix">
        <h4 class="pull-left">B2B商务</h4>
        <a class="pull-left enter">立即体验</a>
      </div>
      <p class="first">十年深耕，携您飞跃<br>
        优软B2B商务，为您提供更强大的功能服务</p>
      <p>优软平台构造了面向制造业和流通业的垂直B2B，不仅仅提供平台服务，还包括企业内部管理、存货服务、人力资源等。优软平台建立了 生产商与供应商之间形成的供需关系，通过一系列工具辅助供需双方形成交易。这是一个企业集合的云端服务，企业</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BannerView',
    data () {
        return {
            showAd: true
        }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .banner{
    width: 100%;
    height: 620px;
    min-width: 1190px;
    background: url('/images/btbBusiness/btbBanner.png')no-repeat center center;
    .content{
      width:1190px;
      position: relative;
      border: 1px solid transparent;
      margin: 0 auto;
      margin-top: -1px;
      padding: 0;
      .title{
        position: absolute;
        top: 10px;
        left: 0px;
        width: 1190px;
        height: 30px;
        line-height: 30px;
        font-size: 12px;
        color: #fdfbfb;
        border-radius: 4px;
        background-color: rgba(255, 255, 255, 0.18);
        &::before{
           content: '';
           display: inline-block;
           position: relative;
           top: 7px;
           left: 10px;
           margin-right: 10px;
           width: 20px;
           height: 20px;
           background: url('/images/btbBusiness/alert.png') no-repeat;
         }
      }
      h4{
        margin: 125px 0px 70px 0px;
        font-family: MicrosoftYaHei-Bold;
        font-size: 54px;
        line-height: 40px;
        letter-spacing: 2px;
        color: #fff600;
      }
      .enter{
        display: inline-block;
        padding-left: 21px;
        margin: 128px 0px 70px 20px;
        width: 148px;
        height: 38px;
        line-height: 38px;
        background-color: #15d2fc;
        border-radius: 19px;
        font-size: 18px;
        color: #fefefe;
        font-family: MicrosoftYaHei-Bold;
        &::after{
          content: '';
          display: inline-block;
          position: relative;
          top: 4px;
          left: 15px;
          width: 20px;
          height: 20px;
          background: url('/images/btbBusiness/arrow.png') no-repeat;
        }
        &:hover{
           background: #059ec0;
        }
      }
      p.first{
        width: 594px;
        font-size: 30px;
        letter-spacing: 1px;
        color: #fcfdfe;
        line-height: 43px;
      }
      p:last-child{
        width: 582px;
        font-size: 18px;
        line-height: 30px;
        color: #feffff;
      }
    }
  }
</style>