layout布局更新

layouts/components/footer-bar2.vue

@@ -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">地 址&nbsp; ：</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&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="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>

layouts/components/navbar.vue

@@ -3,7 +3,7 @@
  * @Author: 欧阳承珺
  * @LastEditors: 欧阳承珺
  * @Date: 2022-10-17 15:19:11
- * @LastEditTime: 2022-10-26 16:24:26
+ * @LastEditTime: 2022-11-02 16:32:44
 -->
 <template>
   <div class="h-80px flex relative z-3 justify-between px-[10%] border-b-1 border-b-[#f0f0f0] border-b-solid">
@@ -30,7 +30,8 @@
               <div class="px-24px pt-24px min-w-300px">
                 <div class="flex pb-22px cursor-pointer" style="border-bottom: 1px solid #f0f0f0;">
                   <a href="/members/me/expenses">
-                    <img class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
+                    <img v-if="userInfo?.memberInfo.subscriberType === 1" class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
+                    <img v-else class="w-64px rounded-1/2"  src="http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg" >
                   </a>
                   <div class="pl-20px">
                     <p class="mt-15px mb-10px text-[#333]">{{userInfo?.memberInfo?.name}}</p>
@@ -39,22 +40,21 @@
                 </div>
                 <div class="flex py-14px mt-20px justify-between">
                   <div>
-                    <p class="text-18px text-[#333] leading-24px">17会员</p>
-                    <p class="text-12px text-[#999] leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
+                    <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-18px text-[#333] leading-24px">17会员</p>
+                    <p v-else class="text-18px text-[#333] leading-24px">免费用户</p>
+                    <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-12px text-[#999] leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
+                    <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p>
                   </div>
-                  <el-button v-if="userInfo?.memberInfo.flag === 1" class="btn-renew">
-                    续费
-                  </el-button>
-                  <el-button v-else>
-                    订阅
-                  </el-button>
+                  <button class="btn-renew" @click="$router.push('/pricing')">
+                    {{userInfo?.memberInfo.subscriberType === 1 ? '续费' : '订阅会员'}}
+                  </button>
                 </div>
                 <div class="flex py-14px my-8px justify-between" style="border-bottom: 1px solid #f0f0f0;">
                   <div>
                     <p class="text-18px text-[#333] leading-24px"><span class="text-500 text-bg-$btn-color-primary text-22px leading-18px tracking-1px">{{userInfo?.memberInfo?.points}}</span><span class="text-14px text-[rgba(0,0,0,0.8)] leading-18px">/{{userInfo?.memberInfo?.totalPoints}}</span></p>
                     <p class="text-12px text-[#999] leading-17px">转换券</p>
                   </div>
-                  <el-button class="btn-recharge">充值</el-button>
+                  <button class="btn-recharge" @click="handlerOpenLogin('ticket')">充值</button>
                 </div>
                 <div class="w-full h-64px leading-64px text-[#666] cursor-pointer hover:text-bg-$btn-color-primary" style="border-bottom: 1px solid #f0f0f0;" @click="handlerOpenLogin('manage')">
                   账号管理
@@ -64,7 +64,7 @@
                 </div>
               </div>
             </div>
-            <img v-if="!!token" slot="reference" class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer" src="https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" />
+            <img v-if="!!token" slot="reference" class="w-36px h-36px rounded-full mt-23px mr-0 md-0 ml-90px cursor-pointer" :src="userInfo?.memberInfo.subscriberType === 1 ? 'https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg' : 'http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg'" @click="$router.push('/members/me/expenses')" />
           </el-popover>
         </no-ssr>
       </div>
@@ -73,22 +73,24 @@
         <button class="bg-$btn-color-primary rounded-4px ml-25px text-[#fff] w-70px h-42px leading-22px cursor-pointer hover:bg-[#f34545]" @click="handlerOpenLogin('register')">注册</button>
       </div>
     </div>
-  <no-ssr>
-    <el-dialog 
-      :visible.sync="dialogVisiable"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      width="480px"
-      append-to-body
-      center
-      :custom-class="interfaceType === 'manage' ? 'manage-dialog': 'login-dialog'"
-      @close="handlerCloseDialog"
-    >
-      <login v-show="interfaceType === 'login'" ref="loginRef"  @register="showChange" @close="handlerClose"></login>
-      <register v-show="interfaceType === 'register'" ref="registerRef" @login="showChange" @close="handlerClose"></register>
-      <UserManage v-show="interfaceType === 'manage'" ref="manageRef" @close="handlerClose"></UserManage>
-    </el-dialog>
-  </no-ssr>
+    <no-ssr>
+      <el-dialog 
+        :visible="visiable"
+        :close-on-click-modal="false"
+        :close-on-press-escape="false"
+        :width="dialogWidth"
+        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>
+        <UserManage v-show="interface === 'manage'" ref="manageRef" @close="handlerCloseDialog"></UserManage>
+        <BuyVip v-if="interface === 'vip'" ref="vipRef" @close="handlerCloseDialog"></BuyVip>
+        <BuyTicket v-if="interface === 'ticket'" ref="ticketRef" @close="handlerCloseDialog"></BuyTicket>
+      </el-dialog>
+    </no-ssr>
   </div>
 </template>
 
@@ -98,22 +100,44 @@ import { mapState } from 'vuex'
 import login from '~/components/LoginBar.vue'
 import register from '~/components/RegisterBar.vue'
 import userManage from '~/components/UserManage.vue'
+import BuyVip from '~/components/BuyVip.vue'
+import BuyTicket from '~/components/BuyTicket.vue'
 export default {
   components: {
     login,
     register,
-    userManage
+    userManage,
+    BuyVip,
+    BuyTicket
   },
   data() {
     return {
       dialogVisiable: false,
-      interfaceType: 'login',
     }
   },
-  computed: mapState([
-    'token',
-    'userInfo'
-  ]),
+  computed: {
+    ...mapState([
+      'token',
+      'userInfo',
+      'globalLoginVisiable',
+      'globalInterfaceType'
+    ]),
+    visiable() {
+      return this.dialogVisiable || this.globalLoginVisiable
+    },
+    interface() {
+      return this.globalInterfaceType || 'login'
+    },
+    dialogWidth() {
+      if(this.interface === 'vip') {
+        return '512px'
+      }else if(this.interface === 'ticket') {
+        return '558px'
+      }else {
+        return '480px'
+      }
+    }
+  },
   mounted() {
     if(localStorage.getItem('userInfo')) {
       this.$store.commit('setUser',JSON.parse(localStorage.getItem('userInfo')))
@@ -123,14 +147,16 @@ export default {
   methods: {
     handlerOpenLogin(type) {
       this.dialogVisiable = true
-      this.interfaceType = type
+      this.$store.commit('SET_INTERFACE', type)
     },
     handlerCloseDialog() {
-      this.$refs[`${this.interfaceType}Ref`].resetInterfaceStatus()
+      this.dialogVisiable = false
+      this.$store.commit('OPEN_LOGIN',false)
+      this.$refs[`${this.interface}Ref`].resetInterfaceStatus()
     },
-    // 展示注册界面
+    // 切换弹窗界面
     showChange(type) {
-      this.interfaceType = type
+      this.$store.commit('SET_INTERFACE', type)
     },
     handlerLogout() {
       localStorage.removeItem('token')
@@ -138,9 +164,6 @@ export default {
       this.$store.commit('DEL_TOKEN', '')
       this.$router.push('/')
     },
-    handlerClose() {
-      this.dialogVisiable = false
-    }
   }
 }
 

layouts/components/navbar2.vue

@@ -0,0 +1,282 @@
+<!--
+ * @Description: 
+ * @Author: 李阳滨
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-10-31 11:32:24
+ * @LastEditTime: 2022-11-03 15:33:53
+-->
+<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 lg:pl-[10%] lg: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 -->
+          <a class="home" href="/">
+            <img
+              src="http://cn-file.17pdf.com/website/index/logo_pdf_top.png"
+              class="tiny:ml-16px <tiny:w-170px align-middle"
+            />
+          </a>
+          <!-- 按钮 -->
+          <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 px-15px 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-35px">
+              <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-35px">
+              <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-35px">
+              <a
+                class="download-contain relative block no-underline text-[16px] text-[#666] p-0 leading-[22px] <tiny:py-8px <tiny:px-0"
+                href="/pdf-reader/download"
+                >下载</a
+              >
+            </li>
+            <li
+              v-if="!token"
+              class="relative block tiny:float-left text-[0px] tiny:ml-35px lg:ml-105px xl:ml-135px"
+            >
+              <a
+                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 cursor-pointer text-[#e93636] <tiny:ml-0"
+                @click="handlerOpenLogin('login')"
+                >登录</a
+              >
+              <a
+                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"
+                @click="handlerOpenLogin('register')"
+                >注册</a
+              >
+            </li>
+            <img v-else class="w-36px h-36px rounded-full <tiny:mt-8px mr-0 md-0 cursor-pointer text-[0px] tiny:ml-35px lg:ml-135px xl:ml-190px" :src="userInfo?.memberInfo.subscriberType === 1 ? 'https://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg' : 'http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg'" @click="$router.push('/members/me/expenses')" />
+          </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>
+
+    <no-ssr>
+      <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>
+    </no-ssr>
+  </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>
+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: 212px;
+    overflow: hidden;
+  }
+}
+</style>

layouts/downnav.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+      <Navbar2></Navbar2>
+      <Nuxt></Nuxt>
+      <footerBar2></footerBar2>
+    </div>
+  </template>
+  
+  <script lang="ts" setup>
+  import Navbar2 from './components/navbar2.vue'
+  import footerBar2 from './components/footer-bar2.vue'
+  </script>

layouts/userCenter.vue

@@ -0,0 +1,223 @@
+<!--
+ * @Description: 
+ * @Author: 欧阳承珺
+ * @LastEditors: 欧阳承珺
+ * @Date: 2022-11-01 20:18:40
+ * @LastEditTime: 2022-11-02 11:08:22
+-->
+<template>
+  <div class="font-primary">
+    <Navbar></Navbar>
+    <div class="flex mt-50px px-[10%] mb-30px justify-between">
+      <div class="w-[27%] min-w-260px px-24px pb-80px mb-20px bg-[#fafafa]">
+        <div class="person">
+          <div>
+            <a href="/members/me/expenses" class="members">
+              <img v-if="userInfo?.memberInfo.subscriberType === 1" src="http://user-file.17pdf.com/avatars/2020/11/16/0577b907be980556bdafa23fb0be0732-jpg.jpg" >
+              <img v-else src="http://user-file.17pdf.com/avatars/2018/01/02/f183029426a996325853fa244e7df661-jpg.jpg" >
+            </a>
+            <br>
+            <p class="username">{{userInfo?.memberInfo?.name}}</p>
+            <p class="user-showname block mt-16px">{{userInfo?.memberInfo?.email || userInfo?.memberInfo?.phone}}</p>
+          </div>
+          <div class="flex py-14px mt-20px justify-between text-left">
+            <div>
+              <p v-if="userInfo?.memberInfo.subscriberType === 1" class="user-vip text-18px mb-6px text-[#333] font-500 leading-24px">17会员</p>
+              <p v-else class="text-18px text-[#333] font-500 leading-24px mb-6px">免费用户</p>
+              <p v-if="userInfo?.memberInfo.subscriberType === 1" class="text-12px text-[#999] pl-28px mb-6px leading-17px">剩余<span class="text-bg-$btn-color-primary">{{userInfo?.memberInfo?.day}}</span>天到期</p>
+              <p v-else class="text-12px text-[#999] leading-17px">订阅会员免费格式转换</p>
+            </div>
+            <button class="btn-renew" @click="handlerBuy('vip')">
+              {{userInfo?.memberInfo.subscriberType === 1 ? '续费' : '订阅会员'}}
+            </button>
+          </div>
+          <div class="flex py-14px my-8px justify-between text-left">
+            <div class="user-ticket">
+              <p class="text-18px text-[#333] leading-24px mb-6px"><span class="font-500 text-bg-$btn-color-primary text-18px leading-24px tracking-1px">{{userInfo?.memberInfo?.points}}</span><span class="text-bg-$btn-color-primary text-14px leading-18px">张</span><span class="text-14px text-[rgba(0,0,0,0.8)] leading-18px">/{{userInfo?.memberInfo?.totalPoints}}张</span></p>
+              <p class="text-12px text-[#999] leading-17px">转换券</p>
+            </div>
+            <button class="btn-recharge" @click="handlerBuy('ticket')">充值</button>
+          </div>
+        </div>
+
+        <ul class="menus-ul">
+          <li class="my_convert" :class="{active: $route.path === '/members/me/expenses'}">
+            <a href="/members/me/expenses" class='myexpenses'>
+              我的转档
+            </a>
+          </li>
+          <li class='my_pricing' :class="{active: $route.path === '/members/me/points'}">
+            <a href="/members/me/points">消费记录</a>
+            <ul :class="{active: $route.path === '/members/me/points'}">
+              <li >
+                <a :class="{active: $route.path === '/members/me/points'}" href="/members/me/points" class='mypoints'>
+                  转换券购买
+                </a>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+      <Nuxt class="w-[70%]"></Nuxt>
+    </div>
+    <FooterBar></FooterBar>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import Navbar from './components/navbar.vue'
+import FooterBar from './components/FooterBar.vue'
+
+export default {
+  components: {
+    Navbar,
+    FooterBar,
+  },
+  data() {
+    return {
+    }
+  },
+  computed: {
+    ...mapState([
+      'userInfo',
+    ]),
+  },
+  methods: {
+    handlerBuy(type) {
+      this.$store.commit('OPEN_LOGIN', true)
+      this.$store.commit('SET_INTERFACE', type)
+    },
+  },
+  
+}
+</script>
+
+<style lang="scss" scoped>
+.person{
+  width: 100%;
+  text-align: center;
+  padding: 30px 0px 8px;
+  border-bottom: 1px solid rgb(218,218,218);
+  a.members {
+    width: 80px;
+    height: 80px;
+    border-radius: 100%;
+    box-shadow: rgba(0,0,0,0.2);
+    display: inline-block;
+    overflow: hidden;
+    box-shadow: 0px 1px 4px rgba(0,0,0,0.2);
+    img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .username{
+    height: 30px;
+    font-size: 20px;
+    color: rgb(51,51,51);
+  }
+  .user-showname{
+    height: 21px;
+    font-size: 14px;
+    color: rgb(153,153,153);
+  }
+}
+.user-vip{
+  background: url('~assets/images/common/ic_member.svg') no-repeat;
+  background-size: 24px;
+  padding-left: 28px;
+}
+.user-ticket {
+  padding-left: 28px;
+  background: url('~assets/images/common/ic_coupon.svg') no-repeat;
+  background-size: 24px;
+}
+.menus-ul {
+  list-style: none;
+  font-size: 18px;
+  padding-left: 0px;
+  width: 100%;
+  max-width: 250px;
+  margin-top: 24px;
+  li {
+    margin-bottom: 8px;
+    cursor: pointer;
+    a {
+      color: rgb(51, 51, 51);
+      display: block;
+      width: 100%;
+      height: 48px;
+      line-height: 48px;
+    }
+    ul {
+      list-style: none;
+      padding-left: 0px;
+      display: none;
+      &.active {
+        display: block;
+      }
+      li {
+        font-size: 16px;
+        border: 0px !important;
+        &:hover{
+          a{
+            color: rgb(255, 79, 79);
+          }
+        }
+        a {
+        color: rgb(153, 153, 153);
+          &.active{
+            color: rgb(255, 79, 79);
+          }
+        }
+      }
+    }
+  }
+}
+.my_pricing{
+  padding: 0px 32px;
+  background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px;
+  &:hover{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_elect.png) no-repeat left 12px;
+    & > a{
+      color: #ff4f4f;
+    }
+  }
+  &.active:hover{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebai_consumption_nor.png) no-repeat left 12px;
+    & > a{
+      color: rgb(51, 51, 51);
+    }
+  }
+  & > a{
+    background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian.png) no-repeat right 14px;
+  }
+  &.active > a{
+    background: url(http://cn-file.17pdf.com/website/members/ic_siderbar_cebian_normal.png) no-repeat right 14px;
+  }
+}
+.my_convert{
+  padding: 0px 32px;
+  background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_nor.png) no-repeat left 12px;
+  &:hover{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px;
+    & > a{
+      color: #ff4f4f;
+    }
+  }
+  &.active{
+    background: url(http://cn-file.17pdf.com/website/members/ic_sidebar_conversion_elect.png) no-repeat left 12px;
+    a{
+      color: rgb(255, 79, 79);
+    }
+  }
+}
+.mypoints {
+  &.active {
+    a {
+      color: rgb(255, 79, 79);
+    }
+  }
+}
+</style>