|
|
@@ -0,0 +1,278 @@
|
|
|
+<!--
|
|
|
+ * @Description:
|
|
|
+ * @Author: 李阳滨
|
|
|
+ * @LastEditors: 欧阳承珺
|
|
|
+ * @Date: 2022-11-1 09:00:00
|
|
|
+ * @LastEditTime: 2022-11-03 13:50:08
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="footer">
|
|
|
+ <div
|
|
|
+ class="containers footer-container mx-auto px-15px w-full bg-[#222] text-[#fff] text-[18px] text-center <tiny:p-0"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="footer-row flex justify-between py-50px pr-60px pl-30px text-left leading-[1.428571429] 2xl:py-50px 2xl:pr-180px 2xl:pl-90px <xl:px-16px <tiny:block <tiny:m-0 <tiny:pt-40px <tiny:px-16px <tiny:pb-20px"
|
|
|
+ >
|
|
|
+ <!-- 产品 -->
|
|
|
+ <div class="product w-[11.83333%] px-15px">
|
|
|
+ <h4
|
|
|
+ class="title text-[18px] my-10px font-medium leading-[1.1] <tiny:flex <tiny:justify-between <tiny:items-center <tiny:py-15px <tiny:px-0 <tiny:m-0 <tiny:text-[16px] <tiny:leading-[19px]"
|
|
|
+ >
|
|
|
+ 产品
|
|
|
+ <img
|
|
|
+ src="http://cn-file.17pdf.com/website/download/arrow.png"
|
|
|
+ :class="{ active: footerProduct }"
|
|
|
+ class="w-20px align-middle tiny:hidden"
|
|
|
+ @click="changePro"
|
|
|
+ />
|
|
|
+ </h4>
|
|
|
+ <ul
|
|
|
+ :class="{
|
|
|
+ footerHeiZero: !footerProduct,
|
|
|
+ footerHeiProFull: footerProduct,
|
|
|
+ }"
|
|
|
+ class="p-0 mt-0 mb-10px <tiny:transition-all <tiny:duration-500 <tiny:ease-in-out <tiny:m-0"
|
|
|
+ >
|
|
|
+ <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
|
|
|
+ <a
|
|
|
+ href="/pricing"
|
|
|
+ class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
|
|
|
+ >订阅服务</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
|
|
|
+ <a
|
|
|
+ href="/sdk"
|
|
|
+ class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
|
|
|
+ >SDK介绍</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 帮助 -->
|
|
|
+ <div class="help w-[11.83333%] px-15px">
|
|
|
+ <h4
|
|
|
+ class="title text-[18px] my-10px font-medium leading-[1.1] <tiny:flex <tiny:justify-between <tiny:items-center <tiny:py-15px <tiny:px-0 <tiny:m-0 <tiny:text-[16px] <tiny:leading-[19px]"
|
|
|
+ >
|
|
|
+ 帮助
|
|
|
+ <img
|
|
|
+ src="http://cn-file.17pdf.com/website/download/arrow.png"
|
|
|
+ :class="{ active: footerHelp }"
|
|
|
+ class="w-20px align-middle tiny:hidden"
|
|
|
+ @click="changeHelp"
|
|
|
+ />
|
|
|
+ </h4>
|
|
|
+ <ul
|
|
|
+ :class="{
|
|
|
+ footerHeiZero: !footerHelp,
|
|
|
+ footerHeiHelpFull: footerHelp,
|
|
|
+ }"
|
|
|
+ class="p-0 mt-0 mb-10px <tiny:transition-all <tiny:duration-500 <tiny:ease-in-out <tiny:m-0"
|
|
|
+ >
|
|
|
+ <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
|
|
|
+ <a
|
|
|
+ href="/question"
|
|
|
+ class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
|
|
|
+ >常见问题</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
|
|
|
+ <a
|
|
|
+ href="/privacy"
|
|
|
+ class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
|
|
|
+ >隐私政策</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li class="text-[16px] mt-24px <tiny:mt-0 <tiny:mx-0 <tiny:mb-15px">
|
|
|
+ <a
|
|
|
+ href="/terms"
|
|
|
+ class="caret-opacity-50 text-[#fff] no-underline transition-all duration-500 <tiny:text-[14px] <tiny:text-[#ffffff66] <tiny:leading-[17px]"
|
|
|
+ >服务协议</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 关于 -->
|
|
|
+ <div
|
|
|
+ class="aboutus w-[34.75%] px-15px <tiny:mt-20px <tiny:mx-0 <tiny:mb-16px"
|
|
|
+ >
|
|
|
+ <h4
|
|
|
+ class="title text-[18px] my-10px font-medium leading-[1.1] <tiny:flex <tiny:justify-between <tiny:items-center <tiny:py-15px <tiny:px-0 <tiny:m-0 <tiny:text-[16px] <tiny:leading-[19px]"
|
|
|
+ >
|
|
|
+ 关于我们
|
|
|
+ </h4>
|
|
|
+ <ul class="p-0 mt-0 mb-10px">
|
|
|
+ <li
|
|
|
+ class="text-[#fff] opacity-50 text-[14px] leading-[1.428571429] <tiny:mt-0 <tiny:opacity-100 <tiny:text-[#ffffff66]"
|
|
|
+ >
|
|
|
+ 长沙凯钿软件有限公司（Changsha Kdan Software
|
|
|
+ Ltd.），简称凯钿软件，成立于2009年，主要致力于办公软件开发。主要产品有PDF阅读器系列：PDF
|
|
|
+ Reader、17PDF阅读器等，用户可以在不同设备上进行文件的读取，编辑等操作。同时长沙凯钿软件提供PDF文档阅读，注释，编辑，转档等SDK一站式解决方案。
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ class="text-[#fff] opacity-50 text-[14px] leading-[1.428571429] <tiny:mt-0 <tiny:opacity-100 <tiny:text-[#ffffff66] flex <tiny:mt-20px"
|
|
|
+ >
|
|
|
+ <span class="whitespace-nowrap">地 址 ：</span
|
|
|
+ ><span
|
|
|
+ >湖南省长沙市芙蓉区定王台街道建湘路393号长沙
|
|
|
+ 世茂环球金融中心4707-4708号</span
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ class="text-[#fff] opacity-50 text-[14px] leading-[1.428571429] <tiny:mt-0 <tiny:opacity-100 <tiny:text-[#ffffff66] <tiny:mt-20px"
|
|
|
+ >
|
|
|
+ 备案号：<a
|
|
|
+ class="record opacity-100"
|
|
|
+ href="https://beian.miit.gov.cn"
|
|
|
+ rel="noreferrer"
|
|
|
+ target="_blank"
|
|
|
+ >湘ICP备14006207号-4</a
|
|
|
+ >
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <!-- 联系 -->
|
|
|
+ <div class="schedule w-[17.58333%] px-15px <xl:w-[23.58333%]">
|
|
|
+ <div class="contact float-right mt-10px text-left <tiny:mt-20px">
|
|
|
+ <div class="tel-container flex">
|
|
|
+ <span class="tel-icon inline-block w-36px h-36px mr-10px"></span>
|
|
|
+ <div class="tel-text">
|
|
|
+ <div
|
|
|
+ class="tel text-[18px] leading-[25px] opacity-60 <tiny:opacity-100 <tiny:text-[#ffffff66]"
|
|
|
+ >
|
|
|
+ 0731-84225961
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="time text-[12px] leading-[17px] opacity-50 <tiny:opacity-100 <tiny:text-[#ffffff66]"
|
|
|
+ >
|
|
|
+ 周一至周五09:00-18:00
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="qq-icon mt-15px h-36px <tiny:mt-20px">
|
|
|
+ <div
|
|
|
+ class="qq flex h-full text-[#fff]"
|
|
|
+ href="tencent://message/?uin=188917181&Site"
|
|
|
+ >
|
|
|
+ <i></i>
|
|
|
+ <div class="text-[18px] opacity-80 leading-[25px] align-middle">
|
|
|
+ <div class="num <tiny:opacity-100 <tiny:text-[#ffffff66]">
|
|
|
+ 188917181
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="service text-[12px] opacity-60 leading-[17px] w-auto border-none p-0 m-0"
|
|
|
+ >
|
|
|
+ 客服群
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <a target="_blank" href="mailto:support@17pdf.com" class="mail"></a> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="copyright pb-30px leading-[1.428571429] <tiny:text-left <tiny:pt-0 <tiny:px-16px <tiny:pb-60px"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ style="position: relative; z-index: 99999"
|
|
|
+ class="inline-block mr-20px relative z-99999"
|
|
|
+ >
|
|
|
+ <a
|
|
|
+ href="http://wljg.csaic.gov.cn/1932/authority?key=2c41f2f0e0cb7a8aff016d7196632e71"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ src="https://17pdf.com/assets/home/siteBase_cs-6477fbceec57aea92a7156f2a0bb8a685f89eb535f9fd337a41e16160f3de3ee.png"
|
|
|
+ width="74"
|
|
|
+ height="24"
|
|
|
+ title="亮照"
|
|
|
+ alt="亮照"
|
|
|
+ border="0"
|
|
|
+ />
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ <p
|
|
|
+ class="text-muted inline-block text-[#fff] text-[12px] opacity-50 mt-0 mx-0 mb-10px <tiny:opacity-100 <tiny:text-[#ffffff66]"
|
|
|
+ >
|
|
|
+ © 2018-2022 Build to Connect, Inc. All Rights Reserved.
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+import { ref } from 'vue'
|
|
|
+// 底部产品展示
|
|
|
+const footerProduct = ref(false)
|
|
|
+// 底部帮助展示
|
|
|
+const footerHelp = ref(false)
|
|
|
+function changePro(): void {
|
|
|
+ footerProduct.value = !footerProduct.value
|
|
|
+}
|
|
|
+function changeHelp(): void {
|
|
|
+ footerHelp.value = !footerHelp.value
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+/* 去除浮动坍塌 */
|
|
|
+.container:before,
|
|
|
+.container:after {
|
|
|
+ content: ' ';
|
|
|
+ display: table;
|
|
|
+ clear: both;
|
|
|
+}
|
|
|
+@media screen and (max-width: 959px) {
|
|
|
+ .footer .footer-container .footer-row > div {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+/* 底部信息第一个 */
|
|
|
+@media screen and (max-width: 959px) {
|
|
|
+ .footer .footer-container .product,
|
|
|
+ .footer .footer-container .help {
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer .footer-container .footer-row .title img {
|
|
|
+ transition: transform 0.2s;
|
|
|
+}
|
|
|
+.footer .footer-container .footer-row .title img.active {
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+/* 联系 */
|
|
|
+@media screen and (max-width: 959px) {
|
|
|
+ .footer .footer-container .schedule .contact {
|
|
|
+ float: initial;
|
|
|
+ }
|
|
|
+}
|
|
|
+.footer .footer-container .contact .tel-container .tel-icon {
|
|
|
+ background-image: url(http://cn-file.17pdf.com/website/index/ic_foot_phone_normal.png);
|
|
|
+}
|
|
|
+.footer .footer-container .contact .qq-icon .qq i {
|
|
|
+ display: inline-block;
|
|
|
+ height: 36px;
|
|
|
+ width: 36px;
|
|
|
+ background-image: url(http://cn-file.17pdf.com/website/index/ic_foot_qq_normal.png);
|
|
|
+ vertical-align: middle;
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+/* 隐藏区 */
|
|
|
+@media screen and (max-width: 959px) {
|
|
|
+ .footerHeiZero {
|
|
|
+ height: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .footerHeiProFull {
|
|
|
+ height: 70px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .footerHeiHelpFull {
|
|
|
+ height: 110px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Darkhorsedamon