17pdf_front_end/components/PDFReaderPro/banner.vue

<template>
  <div class="banner-container">
    <div class="banner container">
      <div class="text">
        <h1><img src="/images/PDFReaderPro/logo.png" alt="PDFReaderPro">PDF Reader Pro</h1>
        <div class="sub-title">轻量级全能PDF编辑器</div>
        <div class="description">一款备受全球9千万用户喜爱的强大PDF编辑器。它不仅支持阅读、注释、编辑、转换、填写表单和签名、OCR，还支持合并、拆分PDF页面等功能，满足你所有PDF文件需求。如果你只需要一款PDF软件，PDF Reader Pro绝对是你的最佳选择。</div>
        <div class="rate">
          <Rate />
          <span>24,807 Ratings</span>
        </div>
        <div class="get-btn">
          <a target="_blank" :href="platform.isWindows ? $config.PDFReaderPro + '/zh-cn/windows/download' : $config.PDFReaderPro + '/zh-cn/downloading'" class="free">
            <WinBlack v-if="platform.isWindows" />
            <MacBlack v-else />
            免费下载
          </a>
          <a target="_blank" :href="platform.isWindows ? $config.PDFReaderPro + '/zh-cn/windows/store' : $config.PDFReaderPro + '/zh-cn/store'" class="buy">立即购买</a>
        </div>
        <div class="available">
          <span>适用于</span>
          <a target="_blank" :href="this.$config.PDFReaderPro + '/zh-cn/windows/download'">
            <WindowsLogo />
          </a>
          <a target="_blank" :href="this.$config.PDFReaderPro + '/zh-cn/downloading'">
            <MacLogo />
          </a>
          <a target="_blank" href="https://apps.apple.com/cn/app/id919472509">
            <IOSLogo />
          </a>
          <a target="_blank" :href="this.$config.PDFReaderPro + '/pdfreaderpro-android'">
            <AndroidLogo />
          </a>
        </div>
      </div>
      <div class="img">
        <img loading="lazy" src="/images/PDFReaderPro/banner_pro.png" alt="PDF Reader Pro">
      </div>
    </div>
  </div>
</template>

<script>
import Rate from '~/assets/images/PDFReaderPro/rate.svg?inline'
import MacBlack from '~/assets/images/PDFReaderPro/macBlack.svg?inline'
import WinBlack from '~/assets/images/PDFReaderPro/winBlack.svg?inline'
import WindowsLogo from '~/assets/images/PDFReaderPro/windowsLogo.svg?inline'
import MacLogo from '~/assets/images/PDFReaderPro/macLogo.svg?inline'
import IOSLogo from '~/assets/images/PDFReaderPro/iosLogo.svg?inline'
import AndroidLogo from '~/assets/images/PDFReaderPro/androidLogo.svg?inline'
export default {
  components: {
    Rate,
    MacBlack,
    WindowsLogo,
    MacLogo,
    IOSLogo,
    AndroidLogo,
    WinBlack
  },
  props: ['platform']
}

</script>

<style scoped lang="scss">
.banner {
  background: url('/images/PDFReaderPro/banner.png') 70% bottom/cover #0B2770 no-repeat;
  border-radius: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    width: 43.34%;
    padding: 116px 0;
    padding-left: 3.34%;
    h1 {
      font-size: 36px;
      font-weight: 700;
      line-height: 48px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
      img {
        width: 48px;
        margin-right: 16px;
      }
    }
    .sub-title {
      font-size: 46px;
      font-weight: 700;
      line-height: 72px;
      color: #FFFFFF;
    }
    .description {
      margin-top: 12px;
      font-size: 18px;
      font-weight: 400;
      line-height: 32px;
      color: #FFFFFF;
      opacity: .8;
    }
    .rate {
      margin-top: 12px;
      font-size: 14px;
      font-weight: 700;
      line-height: 24px;
      color: #FF8266;
      display: flex;
      svg {
        margin-right: 8px;
      }
    }
    .get-btn {
      margin-top: 40px;
      display: flex;
      a {
        width: 180px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        font-size: 18px;
        font-weight: 700;
        transition: all ease-out .2s;
        &:hover {
          transform: translateY(-6px);
        }
      }
      a + a {
        margin-left: 16px;
      }
      .free {
        line-height: 48px;
        background: #fff;
        color: #232748;
        &:hover {
          background: linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),linear-gradient(0deg, #FFFFFF, #FFFFFF);
        }
        svg {
          margin-right: 4px;
        }
      }
      .buy {
        line-height: 46px;
        border: 1px solid #FFFFFFB2;
        color: #FFFFFF;
        &:hover {
          background: linear-gradient(0deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.15));
        }
      }
    }
    .available {
      margin-top: 12px;
      display: flex;
      font-family: Helvetica;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;
      color: #b8bdd6;
      svg {
        margin-left: 16px;
        color: #b8bdd6;
        &:hover {
          color: #fff;
        }
      }
      svg + svg {
        margin-left: 8px;
      }
    }
  }
  .img {
    width: 60%;
    margin-right: -5.34%;
    padding: 70px 0;
    img {
      width: 100%;
    }
  }
}
@media screen and (max-width: 959px) {
  .banner {
    flex-direction: column;
    .text {
      width: 100%;
      padding: 40px 0;
      padding-left: 0%;
      h1 {
        text-align: center;
        justify-content: center;
      }
      .sub-title {
        font-size: 40px;
        line-height: 48px;
        text-align: center;
      }
      .description {
        font-size: 16px;
        line-height: 24px;
        text-align: center;
      }
      .rate {
        align-items: center;
        justify-content: center;
        svg {
          margin-right: 8px;
        }
      }
      .get-btn {
        margin-top: 24px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        a {
          &:hover {
            transform: translateY(0px);
          }
        }
        a + a {
          margin-top: 16px;
          margin-left: 0px;
        }
      }
      .available {
        justify-content: center;
        color: #b8bdd6;
      }
    }
    .img {
      width: 100%;
      padding: 0;
      padding-bottom: 40px;
      img {
        width: 100%;
      }
    }
  }
}
</style>