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'
    ])
  }
}
// $(function() {
//   var number = $(".need-volume").find("span").eq(1).html()
//   if(number === "券"){
//     number = "0"+ number;
//   $(".need-volume").find("span").eq(1).html(number);
//   }
// })
</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 class="transfer-container-wrap">
      <div class="index-converter w-[80%] h-700px relative top-0 left-[50%] -ml-[40%]">
        <div class="transfer-container absolute w-full h-auto my-0 -mx-15px bg-white pb-60px">
          <button type="button" class="close hidden" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
          <div class="recharge py-0 px-[10%] h-48px mx-0 mt-24px mb-14px absolute right-0 -top-70px z-2">
            <span class="recharge-btn float-right bg-white border border-[#ff4f4f] boder-solid text-16px py-7px px-18px rounded-4px mt-4px cursor-pointer hover:bg-[#ff4f4f]">
              <a class="text-[#ff4f4f] no-underline leading-normal">充值</a>
            </span>
            <div class="need-volume float-right right-48px text-16px text-[#666] leading-48px mr-20px">
              所需券：<span class="text-[#0dd299] text-16px">0券</span> / 剩余券：<span class="text-[#0dd299] text-16px">0券</span>
            </div>
          </div>
          <div class="transfer-panel">
            <div>
              <form enctype="multipart/form-data">
                <input type="hidden" name="folder" value="converter/input"/>
                <div class="file-input theme-explorer file-input-ajax-new h-380px mt-17px py-0 px-[10%]">
                  <div class="file-preview rounded-5px w-[100%] h-[100%]">
                    <div class="file-drop-zone border border-dashed border-[#d1d1d1] rounded-4px h-[100%] text-center align-middle overflow-y-auto">
                      <div v-show="fileList.length <= 0" class="file-drop-zone-title text-[#999] text-16px pt-222px cursor-default">
                        <div></div>
                        点击从电脑上传文件或把文件拖到这里
                        <p class="text-14px">（支持PDF to Word、PPT、Excel、TXT、JPG/PNG无限次数转换）</p>
                      </div>
                      <table class="table table-hover w-[100%] max-w-[100%]" id="table-fileinput">
                        <thead v-show="fileList.length > 0">
                          <tr class="h-40px bg-[#eee]">
                            <th></th>
                            <th class="!text-left">文档名</th>
                            <th>大小</th>
                            <th>所需券</th>
                            <th>转为</th>
                            <th>状态</th>
                            <th class="uploading_status hidden">状态</th>
                            <th></th>
                          </tr>
                        </thead>
                        <tbody v-show="fileList.length > 0" class="file-preview-thumbnails cursor-default">
                          <tr v-for="(item, index) in fileList" :key="index" class="file-preview-frame explorer-frame  kv-preview-thumb w-100px h-38px hover:bg-[#f5f5f5]" id="preview-1668340925733-0" data-fileindex="0" data-template="pdf" title="test.pdf">
                            <td class="kv-file-content hide">
                              <embed class="kv-preview-data" src="blob:https://17pdf.com/324d1d91-3d7c-4ad7-ab0a-49a3ea411d9f" width="100px" height="38px" type="application/pdf">
                            </td>
                            <td class="file-details-cell">{{ index+1 }}</td>
                            <td class="file-details-cell !text-left">
                              <div class="explorer-caption max-w-260px truncate block text-[#777]" title="test.pdf">{{ item.name }}</div>
                            </td>
                            <td class="file-details-cell text-[#999]">{{ getfilesize(item.size) }}</td>
                            <td class="file-details-cell points">2</td>
                            <td class="file-details-cell select w-106px">
                              <select class="transfer-select appearance-none" v-model="item.outputType">
                                <option value="png">PNG</option>
                                <option value="xlsx">XLSX</option>
                                <option value="pptx">PPTX</option>
                                <option value="docx" selected>DOCX</option>
                                <option value="txt">TXT</option>
                                <option value="jpg">JPG</option>
                              </select>
                            </td>
                            <td class="file-details-cell state text-14px text-[#878787]" state="">未转换</td>
                            <td class="file-details-cell upload_status hidden" data-space="13005282">未上传</td>
                            <td class="file-actions-cell w-50px p-0">
                              <div class="file-actions text-center">
                                <div class="file-footer-buttons" @click="deleteFile(index)">
                                    <button type="button" class="kv-file-remove btn btn-xs btn-default bg-inherit !border-none pr-7px py-1px pl-5px text-12px leading-normal rounded-3px" title="删除文件"><i class="pdf-removeicon"></i></button>
                                </div>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                      <div class="clearfix"></div>
                      <div class="file-preview-status text-success text-center text-[#3c763d]"></div>
                    </div>
                  </div>
                  <div class="kv-upload-progress hide">
                    <div class="progress overflow-hidden h-20px mb-20px bg-[#f5f5f5] rounded-4px ring-inset-2 ring-[rgba(0,0,0/10%)]">
                      <div class="progress-bar progress-bar-success progress-bar-striped active w-0 bg-[#5cb85c]" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
                    </div>
                  </div>
                  <div class="input-group file-caption-main w-[100%] -top-450px relative table border-separate">
                    <div class="input-group-btn relative text-0px whitespace-nowrap">
                      <div tabindex="500" class="btn btn-file" :class="{'btn-file-left':(fileList.length > 0)}">
                        <div class="add-file" :class="{'add-file-left':(fileList.length > 0)}">{{ fileList.length > 0 ? '添加文件' : '' }}</div>
                        <input name="file" id="fileinput-explorer" ref="file" v-on:change="handleFileUpload($event)" accept=".pdf" title="上传文件" type="file" multiple=""
                        class="absolute top-0 right-0 p-0 m-0 min-w-[100%] h-[100%] w-90px text-right opacity-0 bg-none bg-repeat bg-scroll block outline-none border-0 cursor-pointer"/>
                      </div>
                    </div>
                  </div>
                </div>
              </form>
            </div>

            <div class="transfer-btn mt-30px h-64px text-center">
              <div class="cursor-not-allowed inline-block">
                <span @click="startChangeFile" :class="{'disabledBtn' : !checkbox}" class="btn transfer-start-btn bg-[#ff524f] text-20px py-0 px-150px rounded-4px h-60px w-386px text-white hover:bg-[#f34545]">
                  <a class="text-white leading-60px">开始转换</a>
                </span>
              </div>
              <span class="hide btn btn-down small w-240px h-60px bg-[#0dd299] rounded-4px text-20px ml-15px hover:bg-[#0fc993]"><a class="leading-60px text-white">下载全部</a></span>
            </div>
          </div>
          <div class="transfer-remember mt-23px text-center">
            <div class="checkbox checkbox-danger relative block mt-10px mb-10px">
              <label for="remember" class="text-12px font-normal text-[#999] min-h-20px pl-20px mb-0 cursor-pointer inline-block max-w-[100%]">
                <input v-model="checkbox" type="checkbox" name="remember" class="remember_pass"/>确保上传的文档不涉及版权问题及违法内容
              </label>
            </div>
          </div>
        </div>
        <div class="modal verifi-modal top-[20%!important]" d="verifiPayModal" tabindex="-1" role="dialog" aria-labelledby="verifiPayModal">
          <div class="modal-dialog verifi-dialog w-480px h-426px my-50px" role="document">
            <div class="modal-content relative bg-white rounded-6px border border-solid border-[rgba(0,0,0,0.2)] outline-0 bg-clip-padding ring-[rgba(0,0,0/50%)] ring-offseet-3px ring-9px md:ring-offset-5 md:ring-15px">
              <div class="">
                <button type="button" id="verifi-close" class="close pompt_close py-5px px-10px outline-none" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">×</span>
                </button>
              </div>
              <div class="verifi-content text-center pt-60px px-0 pb-35px">
                <img src="http://cn-file.17pdf.com/website/converter/pic_trans_diomands.png"/>
                <p>该功能为付费套餐专属</p>
                <p>订阅解锁更多特权</p>
                <a href="javascript:;" class="now_pricing" value="0"
                  >立即订阅</a
                >
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="file_num w-[100%] h-120px text-center text-white leading-120px text-30px mb-76px">
        17PDF Reader，当前已转换了<span class="text-32px"> 1,859,726 </span> 个文件
      </div>
      <div class="pdf_converter clear w-[80%] my-0 mx-auto" id="more_type">
        <div class="package_type">
          <h3 class="text-24px text-[#333] font-normal mx-0 mt-0 mb-49px h-30px leading-30px">会员专享格式</h3>
          <ul class="flex justify-center w-[100%] min-w-340px p-0 mt-0 mb-10">
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_word.png" />
                <span>PDF To Word</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img
                  src="/converter/ic_pdf_ppt.png"
                />
                <span>PDF to PowerPoint</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img
                  src="/converter/ic_pdf_execl.png"
                />
                <span>PDF to EXCEL</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_txt.png" />
                <span>PDF to TXT</span>
              </a>
            </li>
            <li>
              <a href="/converter">
                <img src="/converter/ic_pdf_picture.png" />
                <span>PDF to JPG/PNG</span>
              </a>
            </li>
          </ul>
        </div>
      </div>

      <div class="about_converter w-[100%] bg-[#fafafa] py-60px px-[10%] mt-102px">
        <h3 class="name text-24px text-[#333] font-normal mx-0 mt-0 mb-49px h-30px leading-30px">关于转档</h3>
        <ul class="clear p-0">
          <li>
            <img src="http://cn-file.17pdf.com/website/converter/ic_way.png" />
            <div class="content">
              <h3>如何转档</h3>
              <p>
                进入“文件转换器”区域。点击下方“添加文件”选择添加本地目标文件，然后在“转为”栏选择转换目标格式，最后点击“开始转换”即可。
              </p>
            </div>
          </li>
          <li>
            <img
              src="http://cn-file.17pdf.com/website/converter/ic_quality.png"
            />
            <div class="content">
              <h3>领先品质</h3>
              <p>
                行业领先的转换品质，经过转换的文件版面清晰、保持格式的一致，支持一键转档，批量转换，精准快速的文件格式转换，稳定的转换品质，是您处理转格式转换的首选。
              </p>
            </div>
          </li>
          <li>
            <img src="http://cn-file.17pdf.com/website/converter/ic_safe.png" />
            <div class="content">
              <h3>文件安全</h3>
              <p>
                我们尊重每位用户的隐私信息和文件安全。转档后的文件仅在云端保留24小时，让您免去后顾之忧。
              </p>
            </div>
          </li>
          <li>
            <img src="http://cn-file.17pdf.com/website/converter/ic_more.png" />
            <div class="content">
              <h3>多平台支持</h3>
              <p>
                文件格式转换器可以在所有计算机（Mac、Windows及Linux）上使用，也可下载App
                17PDF Reader在移动端使用，让您在手机上也能轻松转档文件。
              </p>
            </div>
          </li>
        </ul>
      </div>

      <div class="converter_question px-[10%] pt-76px pb-60px text-center">
        <h3 class="name text-24px text-[#333] font-normal m-0 h-30px leading-30px text-left">常见问题</h3>
        <table class="w-[100%] p-0 bg-transparent">
          <tbody>
            <tr>
              <td>
                <h3>1. 支持哪些格式转换？</h3>
                <p>
                  <span></span>支持PDF to
                  Word、PPT、Excel、TXT、JPG/PNG无限次数转换
                </p>
              </td>
              <td>
                <h3>2. 为什么图片格式的文件转档效果不好？</h3>
                <p>
                  如原文件为图片格式或者通过扫描文档保存为PDF文件的，转档后的文件可能无法选取文字进行高亮等编辑。
                </p>
              </td>
            </tr>
            <tr>
              <td>
                <h3>3. 文件转档后出现乱码？</h3>
                <p>
                  如果是原文件就有乱码问题，先处理好文件再提交转档；如果原文件正常而转档后目标文件乱码，请联系我们处理。
                </p>
              </td>
            </tr>
          </tbody>
        </table>
        <a class="more w-auto h-30px leading-30px text-[#666] inline-block text-center mx-auto mt-48px mb-0 link:no-underline hover:(!border-[#ff4f4f] text-[#ff4f4f])" href="/question#convert">更多问题请查看帮助</a>
      </div>

      <div class="download_code fixed right-14px bottom-50px bg-white w-134px py-12px px-0 rounded-6px text-center ">
        <span class="large text-16px inline-block w-[100%] my-6px mx-0">下载APP</span>
        <img src="http://cn-file.17pdf.com/website/download/android_code.png" class="w-110px border-0 align-middle inline-block" />
        <span class="inline-block w-[100%] text-14px my-6px mx-0">使用更便捷</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [],
      fileObj: null,
      checkbox: true
    }
  },
  methods: {
    // 获取文件
    handleFileUpload(event){
      // 阻止发生默认行为
      event.preventDefault();
      let formData = new FormData()
      let file = this.$refs.file.files[0]
      formData.append('file',file)
      this.fileObj = formData.get('file')
      console.log(this.fileObj)
      if(this.fileObj){
        this.fileList.push(this.fileObj)
      }
      console.log(this.fileList)
      this.postUpload()
    },
    // 上传文件
    postUpload () {
      const file = this.fileObj
      console.log(file)
      this.$axios.post('/17pdf-backend-core/missionFile/upload', {file}, {headers: {
          'Content-Type': 'multipart/form-data'
        }}).then((res) => {
        if(res.code === 200 ) {
          console.log('upload_success_response', res)
        }
      })
    },
    // 计算文件大小函数(保留两位小数),Size为字节大小
    getfilesize (size) {
        if (!size) return ""
        var num = 1024.00 //byte
        if (size < num) {
          return size + "B"
        }
        if (size < Math.pow(num, 2)) {
          return (size / num).toFixed(2) + "K"
        }
        if (size < Math.pow(num, 3)) {
          return (size / Math.pow(num, 2)).toFixed(2) + "M"
        }
        if (size < Math.pow(num, 4)) {
          return (size / Math.pow(num, 3)).toFixed(2) + "G"
        }
        else {
          return (size / Math.pow(num, 4)).toFixed(2) + "T"
        }
    },
    // 删除文件
    deleteFile (index) {
      this.fileList.splice(index,1)
    },
    // 文件转换
    startChangeFile () {
      let fileArr = []
      for (let i = 0; i < this.fileList.length; i++) {
        let file = {}
        file['sourceType'] = 0
        file['size'] = this.fileList[i].size
        file['input'] = 'pdf'
        file['output'] = this.fileList[i].outputType
        file['filename'] = this.fileList[i].name
        fileArr[i] = file;
      }
      console.log(fileArr)
      if (fileArr.length !== 0) {
        this.$axios.post('/17pdf-backend-core/mission/create', fileArr).then((res) => {
          if(res.code === 200 ) {
            console.log('changeFile_success_response', res)
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep body {
  min-width: 1200px !important;
}
.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;
      }
    }
  }
  .transfer-container {
    .hide {
      display: none !important;
    }
    button {
      padding-right: 7px;
    }
    .close {
      float: right;
      font-size: 21px;
      font-weight: bold;
      line-height: 1;
      color: #000;
      text-shadow: 0 1px 0 #fff;
      opacity: 0.2;
      filter: alpha(opacity=20);
    }
    button.close {
      padding: 0;
      cursor: pointer;
      background: transparent;
      border: 0;
      -webkit-appearance: none;
    }
    button:focus {
      outline: none;
    }
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
      cursor: pointer;
      opacity: 0.5;
      filter: alpha(opacity=50);
    }
    .recharge .recharge-btn:hover a {
      color: #fff;
    }
  }
  .table>caption+thead>tr:first-child>th, .table>caption+thead>tr:first-child>td, .table>colgroup+thead>tr:first-child>th, .table>colgroup+thead>tr:first-child>td, .table>thead:first-child>tr:first-child>th, .table>thead:first-child>tr:first-child>td {
    border-top: 0;
  }
  .file-drop-zone .table thead tr th {
    color: #666666;
    text-align: center;
  }
  .table>thead>tr>th {
    vertical-align: bottom;
    border-bottom: 2px solid #ddd;
  }
  .table>thead>tr>th, .table>thead>tr>td, .table>tbody>tr>th, .table>tbody>tr>td, .table>tfoot>tr>th, .table>tfoot>tr>td {
    padding: 8px;
    line-height: 1.428571429;
    vertical-align: top;
    border-top: 1px solid #ddd;
  }
  .table th, .table td {
    vertical-align: middle;
    box-sizing: border-box;
  }
  th {
    text-align: left;
  }
  td, th {
    padding: 0;
  }
  .input-group-btn {
    position: relative;
    font-size: 0;
    white-space: nowrap;
  }
  .input-group-addon, .input-group-btn {
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
  }
  .input-group-addon, .input-group-btn, .input-group .form-control {
    display: table-cell;
  }
  .clearfix:before, .clearfix:after {
    content: " ";
    display: table;
  }
  .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group {
    z-index: 2;
    margin-left: -1px;
  }
  .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group {
    margin-right: -1px;
  }

  .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:last-child>.btn, .input-group-btn:last-child>.btn-group>.btn, .input-group-btn:last-child>.dropdown-toggle, .input-group-btn:first-child>.btn:not(:first-child), .input-group-btn:first-child>.btn-group:not(:first-child)>.btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
  }
  .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child>.btn, .input-group-btn:first-child>.btn-group>.btn, .input-group-btn:first-child>.dropdown-toggle, .input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle), .input-group-btn:last-child>.btn-group:not(:last-child)>.btn {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
  }
  .input-group-btn>.btn {
    position: relative;
  }
  .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .btn-file {
    position: relative;
    overflow: hidden;
    margin: 0;
    top: 170px;
    left: 50%;
    margin-left: -45px !important;
    outline: none;
    cursor: pointer;
  }
  .btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .btn-file .add-file {
    background: url(http://cn-file.17pdf.com/website/fileinput/ic_file_add.png) no-repeat;
    width: 90px;
    height: 100px;
  }
  .btn-file .add-file-left {
    background: url(http://cn-file.17pdf.com/website/fileinput/ic_add.png) no-repeat;
    width: 120px;
    height: 30px;
    margin-top: 10px;
    margin-left: 10px;
    padding-left: 38px;
    font-size: 16px;
    line-height: 30px;
    color: #666666;
  }
  .btn-file-left {
    position: relative;
    top: 0px;
    left: 20px;
  }
  .transfer-container .transfer-remember .checkbox input[type="checkbox"] {
    top: 3px;
  }
  .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    position: absolute;
    margin-left: -20px;
  }

  input[type="radio"], input[type="checkbox"] {
    margin: 4px 0 0;
    line-height: normal;
  }
  .modal {
    display: none;
    overflow: hidden;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
    outline: 0;
  }
  .file-drop-zone .table tbody tr:hover td {
    background: #dfdfdf;
  }
  .file-drop-zone .table tbody tr td {
    border-top: 0px;
  }
  .theme-explorer .explorer-frame td {
    vertical-align: middle;
    text-align: center;
  }
  .file-drop-zone .table tbody tr:hover td .transfer-select {
    border-color: #ff4f4f;
    background: url(http://cn-file.17pdf.com/website/converter/ic_trans_xiala_hover.png) no-repeat 72px 6px;
  }
  .file-drop-zone .table tbody tr .transfer-select {
    width: 100%;
    height: 22px;
    border: 1px solid #dadada;
    padding: 0px;
    outline: none;
    font-size: 14px;
    color: #ff4f4f;
    line-height: 22px;
    padding-left: 30px;
    border-radius: 2px;
    background: url(http://cn-file.17pdf.com/website/converter/ic_trans_xiala_nor.png) no-repeat 72px 6px;
  }
  .theme-explorer .file-actions-cell .file-actions .file-footer-buttons .pdf-removeicon:before {
    content: url(https://cn-file.17pdf.com/website/converter/ic_delet_red.png) !important;
    display: none;
  }
  .file-drop-zone .table tbody tr:hover td .file-actions .file-footer-buttons .pdf-removeicon:before {
    display: block;
  }
  .btn.disabledBtn {
    background-color: rgb(204, 204, 204);
    pointer-events: none;
  }

  .file_num {
    background: url(http://cn-file.17pdf.com/website/converter/pic_account_bg.png) repeat -10px 0px;
  }
  .clear {
    zoom: 1;
  }
  .clear:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
  .pdf_converter .package_type h3:before,
  .about_converter .name:before,
  .converter_question .name:before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 22px;
    background: #ff4f4f;
    margin-right: 10px;
    margin-top: 4px;
    vertical-align: top;
  }
  .pdf_converter .package_type ul li {
    width: 120px;
    list-style: none;
    text-align: center;
    margin-right: 30px;
    cursor: pointer;
    a {
      display: block;
      font-size: 14px;
      color: #333333;
      img {
        width: 80px;
        height: 80px;
        margin-bottom: 20px;
        vertical-align: middle;
      }
      span {
        display: block;
        white-space: nowrap;
        transition: all .5s;
      }
    }
  }
  .about_converter ul li {
    width: 50%;
    float: left;
    list-style: none;
    margin-bottom: 85px;
    img {
      width: 70px;
      height: 70px;
      float: left;
      margin: 10px 36px 0px 0px;
    }
    .content {
      width: 330px;
      float: left;
      h3 {
        font-size: 20px;
        color: #333333;
        margin: 0px 0px 10px;
        font-weight: normal;
      }
      p {
        font-size: 16px;
        color: #4c4c4c;
        margin: 0px !important;
      }
    }
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  .converter_question table td {
    width: 50%;
    vertical-align: top;
    h3 {
      font-size: 18px;
      color: #333333;
      margin: 54px 0px 14px;
      font-weight: normal;
      text-align: left;
    }
    p {
      width: 75%;
      font-size: 16px;
      color: #4c4c4c;
      text-align: left;
      span {
        width: 8px;
        height: 8px;
        display: inline-block;
        border-radius: 100%;
        background: #333333;
        margin-right: 12px;
        margin-left: 4px;
      }
    }
  }
  .converter_question .more {
    border-bottom: 1px solid #999999;
  }
  .download_code {
    box-shadow: 0px 1px 5px rgb(0 0 0 / 12%);
  }
}
</style>