<template>
  <div class="c-banner">
    <div class="cover">
      <div class="title">多平台管理工具</div>
      <div class="desc">
        <p>通过连接内容创作者与内容平台，</p>
        <p>帮助自媒体高效的进行跨平台的内容分发及管理</p>
      </div>
      <div class="btns">
        <a class="mac">
          Mac版下载
        </a><a class="windows">
          Windows版下载
        </a>
      </div>
    </div>
  </div>
</template>

<script>
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.c-banner
  height: 500px
  width: 100%
  background-image: url("banner.png")
  background-size: cover
  background-position: center
  color: #fff
  .cover
    height: 230px
    padding: 135px 0
    background-color: rgba(0, 0, 0, 0.5)
    padding-left: 140px
    .title
      font-size: 34px
      margin-bottom: 30px
    .desc
      font-size: 20px
      color: #f2f2f2
      margin-bottom: 60px
      line-height: 28px
    .btns
      a
        width: 140px
        font-size: 16px
        color: #fff
        height: 50px
        display: inline-block
        line-height: 50px
        text-align: center
        background-color: #fd6129
        &.mac
          border-bottom-left-radius: 50px
          border-top-left-radius: 50px
        &.windows
          border-bottom-right-radius: 50px
          border-top-right-radius: 50px
          background-color: #ff4400
</style>
