17pdf_front_end/layouts/components/navbar2.vue

<!--
 * @Description: 
 * @Author: 李阳滨
 * @LastEditors: 欧阳承珺
 * @Date: 2022-10-31 11:32:24
 * @LastEditTime: 2022-11-17 09:05:34
-->
<template>
  <div>
    <div
      class="navbar navbar-default header relative min-h-50px z-3 m-0 bg-transparent tiny:rounded-4px tiny:h-80px <tiny:z-112 <tiny:border-none bg-[#f8f8f8] border-gray-[#e7e7e7]"
    >
      <nav
        class="nav-header w-full max-w-1120px h-full mx-auto my-0 tiny:flex tiny:justify-between tiny:items-center tiny:py-0 tiny:px-20px lg:max-w-none xl:pl-[10%] xl:pr-[10%]"
      >
        <div
          class="navbar-header tiny:float-left <tiny:flex <tiny:items-center <tiny:justify-between <tiny:h-56px <tiny:py-0 <tiny:px-16px"
        >
          <!-- logo -->
        <nuxt-link to="/" title="17PDF Reader阅读器支持文件扫描和文件格式转换">
          <img src="http://cn-file.17pdf.com/website/index/logo_pdf_top.png" class="tiny:ml-16px <tiny:w-170px "/>
        </nuxt-link>
          <!-- 按钮 -->
          <button
            type="button"
            class="navbar-toggle relative float-right bg-transparent border border-solid border-transparent rounded-4px tiny:hidden <tiny:block p-0 m-0 border-none"
            data-toggle="collapse"
            data-target="#navBar"
            @click="changeNavShow()"
          >
            <span class="hamburger_box inline-block relative w-15px h-14px">
              <span class="hamburger_inner" :class="{ beX: navShow }"></span>
            </span>
          </button>
        </div>
        <!-- 登录等选项 -->
        <div
          id="navBar"
          class="navbar-collapse menu  transition-all duration-500 ease-in tiny:w-auto tiny:border-0 tiny:shadow-none <tiny:py-0 <tiny:px-16px <tiny:rounded-4px"
          aria-expanded="false"
          :class="{ hZero: !navShow, hFull: navShow }"
        >
          <ul
            class="nav navbar-nav tiny:float-left <tiny:pb-20px ting:flex tiny:items-center"
          >
            <li class="relative block tiny:float-left text-[0px]">
              <a
                href="/converter"
                class="index-menu-converter converter_menu relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
                title="行业领先的PDF转换器，支持将PDF与其他格式文件的互转，在线文件格式转换"
                >格式转换</a
              >
            </li>
            <li class="relative block tiny:float-left text-[0px] tiny:ml-20px">
              <a
                href="/pricing"
                class="index-menu-pricing relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
                title="订阅基础套餐和商务套餐，畅享无缝衔接无纸化办公"
                >订阅服务</a
              >
            </li>
            <li class="relative block tiny:float-left text-[0px] tiny:ml-20px">
              <a
                href="/sdk"
                class="index-menu-sdk relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
                title="为企业用户跨平台集成PDF阅读器核心功能，实现文本编辑、表单填写、OCR等进阶功能。"
                >SDK介绍</a
              >
            </li>
            <li class="relative block tiny:float-left text-[0px] tiny:ml-20px">
              <a
                class="download-contain relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
                :class="{'tiny:text-[#e93636b2]' : $route.path === '/pdf-reader/download'}"
                href="/pdf-reader/download"
                >下载</a
              >
            </li>
            <li class="relative block tiny:float-left text-[0px] tiny:ml-20px">
              <a
                class="index-menu-sdk relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
                :class="{'tiny:text-[#e93636b2]' : $route.path === '/pdfreaderpro'}"
                href="/pdfreaderpro"
                >PDF Reader Pro<span class="icon">PC端</span></a
              >
            </li>
            <li
              v-if="!token"
              class="relative block tiny:float-left text-[0px] tiny:ml-50px lg:ml-105px xl:ml-105px"
            >
              <button
                type="button"
                class="btn_login relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0 inline-flex justify-center items-center h-40px w-72px py-0 px-18px border border-solid border-gray-[#e93636] rounded-4px ml-9px tiny:ml-0px cursor-pointer text-[#e93636] <tiny:ml-0"
                @click="handlerOpenLogin('login')"
                >登录</button
              >
              <button
                type="button"
                class="btn_sign_up relative block no-underline text-[16px] p-0 leading-[22px] <tiny:py-8px <tiny:px-0 inline-flex justify-center items-center h-40px w-72px py-0 px-18px border border-solid border-gray-[#e93636] rounded-4px ml-9px cursor-pointer text-[#e93636] bg-[#ff4f4f] text-[#fff] rounded-4px border-none ml-25px tiny:ml-5px"
                @click="handlerOpenLogin('register')"
                >注册</button
              >
            </li>
            <a v-else href="/members/me/expenses">
              <img  class="w-36px h-36px rounded-full <tiny:mt-8px mr-0 md-0 cursor-pointer text-[0px] tiny:ml-35px lg:ml-200px xl:ml-190px object-cover" :src="userInfo.avatarUrl" @click="$router.push('/members/me/expenses')" />
            </a>
          </ul>
        </div>
      </nav>
    </div>
    <div
      v-show="navShow"
      class="top-menu-overlay fixed top-60px left-0 w-full h-full z-100 bg-[#00000033]"
    ></div>

    <client-only>
      <el-dialog 
        :visible="dialogVisiable"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="480px"
        append-to-body
        center
        :custom-class="interface === 'manage' ? 'manage-dialog': 'login-dialog'"
        @close="handlerCloseDialog"
      >
        <login v-show="interface === 'login'" ref="loginRef"  @register="showChange" @close="handlerCloseDialog"></login>
        <register v-show="interface === 'register'" ref="registerRef" @login="showChange" @close="handlerCloseDialog"></register>
      </el-dialog>
    </client-only>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import login from '~/components/LoginBar.vue'
import register from '~/components/RegisterBar.vue'
export default {
  components: {
    login,
    register
  },
  data() {
    return {
      navShow: false,
      dialogVisiable: false,
      interface: 'login'
    }
  },
  computed: {
    ...mapState([
      'token',
      'userInfo'
    ]),
  },
  methods: {
    handlerOpenLogin(type) {
      this.interface = type
      this.dialogVisiable = true
      // this.$store.commit('SET_INTERFACE', type)
    },
    handlerCloseDialog() {
      this.dialogVisiable = false
      // this.$store.commit('OPEN_LOGIN',false)
      this.$refs[`${this.interface}Ref`].resetInterfaceStatus()
    },
    // 切换弹窗界面
    showChange(type) {
      this.interface = type
      // this.$store.commit('SET_INTERFACE', type)
    },
    // 头部展示
    changeNavShow() {
      this.navShow = !this.navShow
    }
  }
}
</script>

<style lang="scss" scoped>
  .icon {
    position: absolute;
    top: -10px;
    right: -41px;
    background: #FF3030;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    padding: 0 6px;
    border-radius: 4px;
    color: #FFFFFF;
    &::after {
      position: absolute;
      left: 0;
      bottom: -4px;
      content: '';
      display: block;
      width: 0px;
      height: 0px;
      border: solid 5px transparent;
      border-right: none;
      border-left-color: #FF3030;
      border-top-color: #FF3030;
      border-radius: 1px;
    }
  }
  @media screen and (max-width: 959px) {
    .icon {
      top: 8px;
      right: 8px;
    }
  }
</style>
<style>
body {
  min-width: 0px;
}

@media screen and (max-width: 959px) {
  .nav-header.active {
    background-color: #fff;
  }
}

/* 头部 */
.navbar {
  margin: 0px !important;
  border: none;
  border-bottom: 1px solid #f0f0f0;
}

@media screen and (max-width: 959px) {
  .nav-header {
    position: fixed;
    height: auto;
    background-color: #fafafa;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
  }
}

/* 三条短横线 */
.nav-header .hamburger_box .hamburger_inner,
.nav-header .hamburger_box .hamburger_inner::after,
.nav-header .hamburger_box .hamburger_inner::before {
  position: absolute;
  right: 0;
  width: 15px;
  height: 2px;
  background-color: #333;
  transition-property: -webkit-transform;
  transition-property: transform;
  transition-property: transform, -webkit-transform;
  transition-duration: 0.3s;
  transition-timing-function: ease;
}

.nav-header .hamburger_box .hamburger_inner::before {
  top: 6px;
}

.hamburger_inner::after {
  top: 12px;
}

.nav-header .hamburger_box .hamburger_inner::after,
.nav-header .hamburger_box .hamburger_inner::before {
  display: block;
  content: '';
}

@media screen and (max-width: 959px) {
  .beX {
    top: 0px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .beX::before {
    top: 0px;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    opacity: 0;
  }

  .beX::after {
    top: 0px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
  }
}

/* 右侧 */
.navbar-collapse {
  border-top: 1px solid transparent;
  -webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 960px) {
  .nav-header .navbar-collapse .navbar-nav {
    display: flex;
    align-items: center;
  }
}
/*注册  */
.nav-header .navbar-collapse .navbar-nav li .btn_sign_up {
  color: white;
}
/* 遮盖层 */
.top-menu-overlay {
  content: '';
}
/* 头部隐藏区 */
@media screen and (max-width: 959px) {
  .hZero {
    height: 0;
    overflow: hidden;
  }

  .hFull {
    height: 250px;
    overflow: hidden;
  }
}
</style>