compdfkit_web_cn/components/Footer.vue

<template>
  <footer class="lg:bg-[#272E3A] <lg:bg-[#000000]">
    <div class="container flex-row items-center py-80px text-white <lg:py-60px">
      <div class="lg:flex <lg:flex-row">
        <div class="flex-1">
          <ul
            class="mobile-ul @lg:w-250px @xl:w-250px <lg:pt-20px <lg:pb-15px <lg:max-h-56px <lg:overflow-hidden"
            :class="{ active: show.popular }"
          >
            <li
              class="flex justify-between <lg:items-center font-bold lg:mb-24px <lg:mb-18px <lg:cursor-pointer text-sm"
              @click="handleClick('popular')"
            >
              <span>产品</span><img class="w-20px lg:hidden" src="~assets/images/icons/downarrow.png" alt=""/>
            </li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="https://www.compdf.com/pdf-sdk">ComPDFKit PDF SDK</a>
            </li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="https://www.compdf.com/pdf-conversion-sdk">ComPDFKit 转档 SDK</a>
            </li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="javascript:;">ComPDFKit API</a>
            </li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="javascript:;">Document AI</a>
            </li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="javascript:;">Document AI Web Viewer</a>
            </li>
          </ul>
        </div>
        <div class="flex-1">
          <ul
            class="mobile-ul <lg:pt-20px <lg:pb-15px <lg:max-h-56px <lg:overflow-hidden"
            :class="{ active: show.resources }"
          >
            <li
              class="flex justify-between <lg:items-center font-bold lg:mb-24px <lg:mb-18px <lg:cursor-pointer text-sm"
              @click="handleClick('resources')"
            >
              <span>开发支持</span><img class="w-20px lg:hidden" src="~assets/images/icons/downarrow.png" alt=""/>
            </li>
            <li class="mb-16px opacity-60 text-xs"><a class="hover:underline" href="javascript:;">联系销售</a></li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="/contact-sales">免费试用</a>
            </li>
          </ul>
        </div>
        <div class="flex-1">
          <ul
            class="
              mobile-ul
              <lg:pt-20px <lg:pb-15px <lg:max-h-56px <lg:overflow-hidden
            "
            :class="{ active: show.company }"
          >
            <li
              class="flex justify-between <lg:items-center font-bold lg:mb-24px <lg:mb-18px <lg:cursor-pointer text-sm"
              @click="handleClick('company')"
            >
              <span>公司</span><img class="w-20px lg:hidden" src="~assets/images/icons/downarrow.png" alt="" />
            </li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="https://www.compdf.com/privacy-policy">隐私协议</a>
            </li>
            <li class="mb-16px opacity-60 text-xs">
              <a class="hover:underline" href="https://www.compdf.com/terms-of-service">服务条款</a>
            </li>
          </ul>
        </div>
        <div class="flex-1">
          <ul class="mobile-ul <lg:pt-20px <lg:pb-20px <lg:flex <lg:flex-col-reverse">
            <div>
              <li class="lg:mb-4px text-sm font-bold <lg:mb-8px"><span>订阅我们</span></li>
              <li class="mb-16px opacity-60 text-xs">获取ComPDFKit最新技术、专属定制方案</li>
              <li>
                <div class="relative mobile-input h-44px w-full lg:min-w-340px <lg:border-2 <lg:border-[#2F2F2F] <lg:flex <lg:items-center">
                  <input
                    v-model="email"
                    type="email"
                    name="member[email]"
                    :disabled="sending"
                    class="w-full h-44px py-6px px-16px lg:rounded-full bg-brand-2 text-brand-4 <lg:bg-[#000] <lg:h-40px lg:focus:border-1px lg:focus:border-white/50 lg:focus:border-solid lg:focus:pl-15px"
                    placeholder="输入您的邮箱"
                    @focus="clearText"
                  />
                  <button
                    type="submit"
                    class="flex items-center absolute lg:top-1px lg:right-1px lg:h-42px py-10px px-20px lg:rounded-full bg-brand-0 text-sm <lg:h-44px <lg:bg-[#1460F3] <lg:top-[-2px] <lg:right-[-2px] hover:bg-[#548CF9]"
                    @click.prevent="onSubmit"
                  >
                    <span class="<lg:hidden">订阅</span>
                    <Arrow class="w-16px text-white lg:hidden" />
                  </button>
                </div>
              </li>
              <li>
                <span class=" text-[#FF5050]">{{ errText }}</span>
                <span class="">{{ succText }}</span>
              </li>
            </div>
          </ul>
          <ul>
            <li class="pt-28px <lg:pt-22px">
              <el-dropdown trigger="click" placement="bottom-start" @command="handleCommand">
                <span class="pointer text-white text-16px leading-24px font-700">
                  语言切换<i class="el-icon-arrow-down el-icon--right text-12px"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="/" style="color: #1460F3;">中文（简体）</el-dropdown-item>
                  <el-dropdown-item command="https://www.compdf.com/">English</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </div>
      </div>
      <div class="flex-row mt-50px <lg:mt-25px">
        <div class="flex tiny:justify-center items-center">
          <Logo /> <span class="font-bold text-tiny ml-10px">ComPDFKit</span>
        </div>
        <div class="text-xs tiny:text-center mt-16px opacity-80">© 2014-{{ new Date().getFullYear() }} PDF Technologies, Inc. All Rights Reserved.</div>
      </div>
    </div>
  </footer>
</template>

<script>
import checkEmail from '~/utils/checkemail'
import Logo from "~/assets/images/icons/logo.svg?inline";
import Twitter from "~/assets/images/icons/twitter.svg?inline";
import TwitterHover from "~/assets/images/icons/twitter_hover.svg?inline";
import FaceBook from "~/assets/images/icons/facebook.svg?inline";
import FaceBookHover from "~/assets/images/icons/facebook_hover.svg?inline";
import Arrow from '~/assets/images/icons/arrow.svg?inline'

export default {
  components: {
    Logo,
    Twitter,
    TwitterHover,
    FaceBook,
    FaceBookHover,
    Arrow
  },
  data () {
    return {
      email: '',
      errText: '',
      succText: '',
      sending: false,
      pre: '',
      show: {
        popular: false,
        resources: false,
        company: false
      }
    }
  },
  methods: {
    handleClick (item) {
      if (this.pre === item && this.show[item]) {
        this.show[item] = false
        this.pre = ''
        return
      }
      if (this.pre !== '') {
        this.show[this.pre] = !this.show[this.pre]
      }
      this.pre = item
      this.show[item] = !this.show[item]
    },
    onSubmit() {
      if (this.sending) return
      if (this.email === '') {
        this.errText = 'Please enter the correct email'
        return
      }
      if (!checkEmail(this.email)) {
        this.errText = 'Please enter the correct email'
        return
      }
      this.sending = true
      this.$axios({
        url: '/api/subscription',
        method: 'POST',
        data: {
          'email': this.email,
          'subscribed': 1
        },
        transformRequest: [function (data) {
          let ret = ''
          for (let item in data) {
            ret += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
          }
          ret = ret.substr(0, ret.length - 1)
          return ret
        }]
      })
        .then((res) => {
          this.sending = false
          this.succText = 'Thanks for subscribing!'
        })
    },
    clearText() {
      this.errText = ''
      this.succText = ''
    },
    handleCommand(command) {
      window.location.href = command
    }
  }
}
</script>

<style lang="scss" scoped>
a {
  color: #ffffff;
}
#tw {
  .svg {
    display: inline-block;
  }
  .svg-hover {
    display: none;
  }
}
#tw:hover {
  .svg {
    display: none;
  }
  .svg-hover {
    display: inline-block;
  }
}
#fa {
  .svg {
    display: inline-block;
  }
  .svg-hover {
    display: none;
  }
}
#fa:hover {
  .svg {
    display: none;
  }
  .svg-hover {
    display: inline-block;
  }
}
::v-deep.el-dropdown-menu {
  padding: 20px 17px 4px;
  margin-top: 6px;
}
::v-deep.el-dropdown-menu__item {
  font-size: 16px;
  line-height: 24px;
  color: #18191B;
  padding: 0;
  padding-bottom: 16px;
  &:last-child {
    padding-bottom: 0;
  }
}
::v-deep.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: unset;
  color: unset;
}
::v-deep.el-popper .popper__arrow {
  display: none;
}
@media screen and (max-width: 930px) {
  .mobile-ul {
    border-bottom: 1px solid #2F2F2F;
    .mobile-input {
      input {
        border-radius: 0px 4px 4px 0px;
      }
      button {
        border-radius: 0px 4px 4px 0px;
      }
    }
  }
  .active {
    max-height: 508px;
    transition: all 0.2s ease-in-out;
    img {
      transform: rotateZ(180deg);
    }
  }
}
</style>