fix: 功能显示优化完善。

2025-12-24 11:49:51 +08:00
parent 0d2e125059
commit 0f699118e3
5 changed files with 150 additions and 236 deletions
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,17 +1,105 @@
 <template>
+  <div>
    <header class="zui-header">
-    <slot></slot>
+      <logo type="xiaoyanyun" href="/"></logo>
+      <h4 class="zui-logo-text">
+        <a class="zui-nav-link" :href="currentLinks.accounting" target="_blank">&nbsp;&nbsp;记账平台</a>
+        <a class="zui-nav-link" :href="currentLinks.health" target="_blank">&nbsp;&nbsp;健康档案</a>
+        <a class="zui-nav-link" :href="currentLinks.imaotai" target="_blank">&nbsp;&nbsp;茅台预约</a>
+      </h4>
+      <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
+      <div v-show="webShow">
+        <slot name="buttons"></slot>
+      </div>
    </header>
+    
+    <!-- 移动端抽屉菜单（移到header外面） -->
+    <div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
+    <div v-show="drawerVisible" class="zui-drawer">
+      <div class="zui-drawer__header">菜单</div>
+      <ul class="zui-drawer__list">
+        <li @click="navigateTo('/')">首页</li>
+        <li @click="navigateTo('/resource')">资料下载</li>
+        <li @click="navigateTo('/callus')">联系我们</li>
+      </ul>
+    </div>
+  </div>
 </template>
 <script>
  import './less/header.less'
  import Logo from './Logo'
+  import Util from '../Util'
+  
  export default {
    props: {
      logoType: {
        default: 'zhichou'
      }
    },
-    components: {Logo}
+    components: {Logo},
+    data() {
+      return {
+        // 统一管理的导航链接
+        navLinks: {
+          // Web端链接
+          web: {
+            accounting: 'http://152.136.151.187:8080/intc/login',
+            health: 'http://152.136.151.187:81/hrms/login',
+            imaotai: 'http://152.136.151.187:8081/imaotai/'
+          },
+          // 移动端H5链接
+          mobile: {
+            accounting: 'http://152.136.151.187:82/#/',
+            health: 'http://152.136.151.187:89/#/',
+            imaotai: 'http://152.136.151.187:90/#/'
+          }
+        },
+        mobileShow: false,
+        webShow: true,
+        drawerVisible: false,
+        isMobile: false
+      }
+    },
+    created() {
+      this.init()
+    },
+    computed: {
+      // 根据设备类型返回对应的链接
+      currentLinks() {
+        return this.isMobile ? this.navLinks.mobile : this.navLinks.web
+      }
+    },
+    methods: {
+      init() {
+        // 检测是否为移动端
+        this.isMobile = Util.os.android || Util.os.iPhone || Util.os.mobile || Util.os.isapp || Util.os.harmonyOS
+        
+        if (this.isMobile) {
+          this.webShow = false
+          this.mobileShow = true
+        } else {
+          this.webShow = true
+          this.mobileShow = false
+        }
+      },
+      openMenu() {
+        this.drawerVisible = true
+        this.$emit('menu-open')
+      },
+      closeMenu() {
+        this.drawerVisible = false
+        this.$emit('menu-close')
+      },
+      navigateTo(path) {
+        // 使用 Vue Router 的全局路由实例
+        if (this.$router) {
+          this.$router.push({path})
+        } else {
+          // 如果路由不可用，使用原生跳转
+          window.location.href = path
+        }
+        this.closeMenu()
+      }
+    }
  }
 </script>
--- a/src/components/less/page.less
+++ b/src/components/less/page.less
@@ -56,26 +56,39 @@
  left: 0;
  right: 0;
  bottom: 0;
-  background: rgba(0, 0, 0, 0.45);
-  z-index: 999;
+  background: rgba(0, 0, 0, 0.6);
+  z-index: 99998;
+  animation: fadeIn 0.2s ease;
 }
 .zui-drawer {
  position: fixed;
  top: 0;
  right: 0;
-  width: 70%;
-  max-width: 300px;
-  height: 100%;
+  width: 75%;
+  max-width: 280px;
+  height: 100vh;
  background: #fff;
-  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.06);
-  z-index: 1000;
-  padding: 16px;
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.2);
+  z-index: 99999;
+  padding: 20px;
+  animation: slideInRight 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  overflow-y: auto;
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes slideInRight {
+  from { transform: translateX(100%); }
+  to { transform: translateX(0); }
 }
 .zui-drawer__header {
-  font-size: 16px;
+  font-size: 18px;
  font-weight: bold;
-  margin-bottom: 12px;
-  color: #333;
+  margin-bottom: 20px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #35A3BA;
+  color: #1f2a37;
 }
 .zui-drawer__list {
  list-style: none;
@@ -83,12 +96,23 @@
  padding: 0;
 }
 .zui-drawer__list li {
-  padding: 12px 8px;
+  padding: 14px 12px;
  border-bottom: 1px solid #f0f0f0;
+  font-size: 15px;
+  color: #1f2a37;
+  transition: all 0.2s ease;
+  border-radius: 6px;
+  margin-bottom: 4px;
 }
 .zui-drawer__list li:hover {
-  background: #f6f8fa;
+  background: linear-gradient(135deg, #35A3BA 0%, #0ea5b7 100%);
+  color: #fff;
  cursor: pointer;
+  transform: translateX(-2px);
+  border-bottom: 1px solid transparent;
+}
+.zui-drawer__list li:active {
+  transform: scale(0.98);
 }
@media (max-width: 600px) {
  .zui-page {
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,31 +1,12 @@
 <template>
  <page class="home-page">
    <zui-header>
-      <logo type="xiaoyanyun" href="/"></logo>
-      <h4 class="zui-logo-text">
-         <a class="zui-nav-link" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
-         <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
-         <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
-        </h4>
-        <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
-         <div v-show="webShow">
+      <template #buttons>
        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
-         <!-- <zui-button @click="onButtonClick('imaotai')">茅台预约</zui-button>
-         <zui-button @click="onButtonClick('health')">健康档案</zui-button>
-         <zui-button @click="onButtonClick('invest')">记账平台</zui-button> -->
        <zui-button @click="onButtonClick('home')">首页</zui-button>
-      </div>
+      </template>
    </zui-header>
-    <div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
-    <div v-show="drawerVisible" class="zui-drawer">
-      <div class="zui-drawer__header">菜单</div>
-      <ul class="zui-drawer__list">
-        <li @click="gohome">首页</li>
-        <li @click="goresource">资料下载</li>
-        <li @click="gocallus">联系我们</li>
-      </ul>
-    </div>
    <div class="banner vivify fadeIn">
      <h1 class="vivify popIn">
        <span class="br"></span>科学记账&nbsp;&nbsp;量入为出
@@ -141,66 +122,19 @@
        feature2: feature2,
        feature3: feature3,
        feature4: feature4,
-        mobileShow: false,
-        webShow: true,
-        drawerVisible: false,
        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
      }
-    },
-    created() {
-    this.init()
    },
   methods: {
      onButtonClick: function (e) {
        if(e=="callus"){
            this.$router.push({path:'/callus'})
-        }else if(e=="invest"){
-          window.open("http://152.136.151.187:88/login", '_blank');
-        }else if(e=="imaotai"){
-          window.open("http://152.136.151.187:88/login", '_blank');
-        } else if(e=="health"){
-          window.open("http://152.136.151.187:81/hrms/login", '_blank');
-        }
-        else if(e=="resource"){
+        }else if(e=="resource"){
            this.$router.push({path:'/resource'})
        }else{
            this.$router.push({path:'/'})
        }
-      },
-      openMenu: function () {
-       this.drawerVisible = true
-      },
-      gohome: function () {
-       this.$router.push({path:'/'})
-      },
-      gocallus: function () {
-       this.$router.push({path:'/callus'})
-      },
-      goinvest: function () {
-        window.open("http://152.136.151.187:86/#/", '_blank');
-      },
-      goimaotai: function () {
-        window.open("http://152.136.151.187:90/#/", '_blank');
-      },
-      goresource: function () {
-       this.$router.push({path:'/resource'})
-      },
-      gohealth: function () {
-        window.open("http://152.136.151.187:89/#/", '_blank');
-      },
-      closeMenu: function () {
-        this.drawerVisible = false
-      },
-      init: function () {
-        if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
-          this.webShow=false
-          this.mobileShow=true
-        }else{
-          this.webShow=true
-          this.mobileShow=false
      }
-      
-      },
    }

  };
--- a/src/views/callus.vue
+++ b/src/views/callus.vue
@@ -1,31 +1,12 @@
 <template>
  <page class="home-page">
    <zui-header>
-      <logo type="xiaoyanyun" href="/"></logo>
-      <h4 class="zui-logo-text">
-         <a class="zui-nav-link" href="http://152.136.151.187:88/login" target="_blank">&nbsp;&nbsp;记账平台</a>
-         <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
-         <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
-        </h4>
-        <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
-         <div v-show="webShow">
+      <template #buttons>
        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
-         <!-- <zui-button @click="onButtonClick('imaotai')">茅台预约</zui-button>
-         <zui-button @click="onButtonClick('health')">健康档案</zui-button>
-         <zui-button @click="onButtonClick('invest')">记账平台</zui-button> -->
        <zui-button @click="onButtonClick('home')">首页</zui-button>
-      </div>
+      </template>
    </zui-header>
-    <div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
-    <div v-show="drawerVisible" class="zui-drawer">
-      <div class="zui-drawer__header">菜单</div>
-      <ul class="zui-drawer__list">
-        <li @click="gohome">首页</li>
-        <li @click="goresource">资料下载</li>
-        <li @click="gocallus">联系我们</li>
-      </ul>
-    </div>
    <div class="service">
      <h1>
        联系我们->注册账号->免费使用
@@ -83,66 +64,19 @@
        feature2: feature2,
        feature3: feature3,
        feature4: feature4,
-        mobileShow: false,
-        webShow: true,
-        drawerVisible: false,
        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
      }
-    },
-    created() {
-    this.init()
    },
    methods: {
      onButtonClick: function (e) {
        if(e=="callus"){
            this.$router.push({path:'/callus'})
-        }else if(e=="invest"){
-          window.open("http://152.136.151.187:88/login", '_blank');
-        }else if(e=="imaotai"){
-          window.open("http://152.136.151.187:88/login", '_blank');
-        } else if(e=="health"){
-          window.open("http://152.136.151.187:81/hrms/login", '_blank');
-        }
-        else if(e=="resource"){
+        }else if(e=="resource"){
            this.$router.push({path:'/resource'})
        }else{
            this.$router.push({path:'/'})
        }
-      },
-      openMenu: function () {
-       this.drawerVisible = true
-      },
-      gohome: function () {
-       this.$router.push({path:'/'})
-      },
-      gocallus: function () {
-       this.$router.push({path:'/callus'})
-      },
-      goinvest: function () {
-        window.open("http://152.136.151.187:86/#/", '_blank');
-      },
-      goimaotai: function () {
-        window.open("http://152.136.151.187:90/#/", '_blank');
-      },
-      goresource: function () {
-       this.$router.push({path:'/resource'})
-      },
-      gohealth: function () {
-        window.open("http://152.136.151.187:89/#/", '_blank');
-      },
-      closeMenu: function () {
-        this.drawerVisible = false
-      },
-      init: function () {
-        if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
-          this.webShow=false
-          this.mobileShow=true
-        }else{
-          this.webShow=true
-          this.mobileShow=false
      }
-      
-      },
    }

  }
--- a/src/views/resource.vue
+++ b/src/views/resource.vue
@@ -1,31 +1,12 @@
 <template>
  <page class="home-page">
    <zui-header>
-      <logo type="xiaoyanyun" href="/"></logo>
-      <h4 class="zui-logo-text">
-         <a class="zui-nav-link" href="http://152.136.151.187:88/login">&nbsp;&nbsp;记账平台</a>
-         <a class="zui-nav-link" href="http://152.136.151.187:81/hrms/login" target="_blank">&nbsp;&nbsp;健康档案</a>
-         <a class="zui-nav-link" href="http://152.136.151.187:8081/imaotai/" target="_blank">&nbsp;&nbsp;茅台预约</a>
-        </h4>
-        <div v-show="mobileShow" class="zui-rightcol" @click="openMenu">◄目录►</div>
-         <div v-show="webShow">
+      <template #buttons>
        <zui-button @click="onButtonClick('callus')">联系我们</zui-button>
        <zui-button @click="onButtonClick('resource')">资料下载</zui-button>
-         <!-- <zui-button @click="onButtonClick('imaotai')">茅台预约</zui-button>
-         <zui-button @click="onButtonClick('health')">健康档案</zui-button>
-         <zui-button @click="onButtonClick('invest')">记账平台</zui-button> -->
        <zui-button @click="onButtonClick('home')">首页</zui-button>
-      </div>
+      </template>
    </zui-header>
-    <div v-show="drawerVisible" class="zui-drawer-overlay" @click="closeMenu"></div>
-    <div v-show="drawerVisible" class="zui-drawer">
-      <div class="zui-drawer__header">菜单</div>
-      <ul class="zui-drawer__list">
-        <li @click="gohome">首页</li>
-        <li @click="goresource">资料下载</li>
-        <li @click="gocallus">联系我们</li>
-      </ul>
-    </div>
    <div class="service">
      <h1>
        安卓APP下载->系统介绍->使用手册
@@ -100,56 +81,19 @@
        imaotai: imaotai,
        Health: Health,
        Invest: Invest,
-        mobileShow: false,
-        webShow: true,
-        drawerVisible: false,
        carouselPerPage: (Util.os.android || Util.os.iPhone|| Util.os.wechat|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS) ? 1 : 2
      }
-    },
-    created() {
-    this.init()
    },
    methods: {
      onButtonClick: function (e) {
        if(e=="callus"){
            this.$router.push({path:'/callus'})
-        }else if(e=="invest"){
-          window.open("http://152.136.151.187:88/login", '_blank');
-        }else if(e=="imaotai"){
-          window.open("http://152.136.151.187:88/login", '_blank');
-        } else if(e=="health"){
-          window.open("http://152.136.151.187:81/hrms/login", '_blank');
-        }
-        else if(e=="resource"){
+        }else if(e=="resource"){
            this.$router.push({path:'/resource'})
        }else{
            this.$router.push({path:'/'})
        }
      },
-      openMenu: function () {
-       this.drawerVisible = true
-      },
-      gohome: function () {
-       this.$router.push({path:'/'})
-      },
-      gocallus: function () {
-       this.$router.push({path:'/callus'})
-      },
-      goinvest: function () {
-        window.open("http://152.136.151.187:86/#/", '_blank');
-      },
-      goimaotai: function () {
-        window.open("http://152.136.151.187:90/#/", '_blank');
-      },
-      goresource: function () {
-       this.$router.push({path:'/resource'})
-      },
-      gohealth: function () {
-        window.open("http://152.136.151.187:89/#/", '_blank');
-      },
-      closeMenu: function () {
-        this.drawerVisible = false
-      },
      // 授权书下载
 download(type) {

@@ -188,17 +132,7 @@ download(type) {
    a.click() //模拟点击a标签，会触发a标签的href的读取，浏览器就会自动下载了
    a.remove() // 删除a标签（一次性的）

-},
-      init: function () {
-        if((Util.os.android || Util.os.iPhone|| Util.os.mobile|| Util.os.isapp|| Util.os.harmonyOS)){
-          this.webShow=false
-          this.mobileShow=true
-        }else{
-          this.webShow=true
-          this.mobileShow=false
 }
-      
-      },
    }

  }