17pdf_front_end/pages/converter.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-10-19 17:25:48
 * @LastEditTime: 2022-11-08 09:28:05
-->
<script>
import { mapState } from 'vuex'
export default {
  middleware: 'user',
  computed: mapState([
    'userInfo'
  ])
}

</script>

<template>
  <div class="page-converter">
    <div class="date-tips flex content-center justify-center py-6px ">
      <img src="http://cn-file.17pdf.com/website/common/ic_notice.svg" class="align-middle">
      <div class="text-container">
        <span class="text">
          转档后的文件支持在云端保留24小时，<span v-if="userInfo?.memberInfo.subscriberType === 1">会员尊享5G容量，</span>请在24小时内下载文件至本地永久保存
        </span>
        <span v-if="userInfo?.memberInfo.subscriberType === 1" class="vip tip">
          <img src="http://cn-file.17pdf.com/website/common/ic_info.svg" alt="">
          <div class="tip-text">
            若已有文件大小超出5G，将按转档时间计算（从最近一次转档往过去推算），即保留最近的5G容量文件，超出部分文件将不再保留
          </div>
        </span>
      </div>
    </div>
    <h1 class="text-48px text-opacity-100 font-500 text-[#3333] mt-48px mb-10px text-center">文件转换器</h1>
    <h2 class="text-20px text-center text-[#666] mt-20px font-normal">PDF文件格式转换器，一键转档，支持批量转换，精准快速。</h2>
    <div class="text-center mb-80px">
      <a class="mt-20px text-[#4D4D4D] text-16px font-600 inline-flex items-center leading-22px hover:text-$btn-color-primary hover:underline" href="https://www.compdf.com/pdf-conversion-sdk?utm_source=anroidapp&utm_medium=17pdfweb&utm_campaign=pdfsdk" target="_blank">由 ComPDFKit Conversion SDK 提供技术支持 <svg class="ml-8px" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12.9567L10.714 8.24261L6 3.52856" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></a>
    </div>
  </div>
</template>

<style lang="scss">
.page-converter {
  .date-tips {
    background: linear-gradient(0deg, #FFF2F6, #FFF2F6),linear-gradient(90deg, snow 10.37%, rgba(255,243,243,0) 91.75%),linear-gradient(90deg, #FFF2F6 2.26%, rgba(255,242,246,0.21) 101.41%);
    .text-container {
      display: flex;
      align-items: center;
      margin-left: 16px;
      img {
          margin-left: 8px;
        }
      }
      span {
        font-size: 14px;
        line-height: 24px;
        vertical-align: middle;
      }
      .text {
        display: inline-flex;
        align-items: center;
      }
      .tip {
        position: relative;
        font-size: 0;
        .tip-text {
          display: none;
          position: absolute;
          left: -3px;
          width: 258px;
          padding: 15px 14px 10px 10px;
          background: url('http://cn-file.17pdf.com/website/members/ic_tip.svg') left top no-repeat;
          background-size: auto 100%;
          font-size: 12px;
          line-height: 18px;
          color: #fff;
          border-radius: 4px;
        }
        &:hover .tip-text {
          display: block;
        }
      }
    }
}
</style>