17pdf_front_end/layouts/components/footer-bar2.vue

<!--
 * @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-[#ffffff7f] 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-[#ffffff7f] 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-[#ffffff7f] 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-[#ffffff7f] 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-[#ffffff7f] 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号长沙
                世茂环球金融中心4907-4908号</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&amp;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="~/assets/images/home/siteBase_cs.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-{{ new Date().getFullYear() }} 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>