raylinx/components/TopNavbar.vue

<template>
  <div>
    <div v-if="showHomeAndroid == false" class="NavBar">
      <div class="logo">
        <a href="/"
        ><img src="@/assets/Home_IMG/raylinx.logo.png" alt=""
        /></a>
      </div>

      <div class="menu">
        <div class="Menu-right">
          <MenuNav></MenuNav>
        </div>
      </div>
      <div class="navRightMenu" ref="navRightMenu">
        <div v-for="i in navRightMenu" class="item">
          <a :href="i.href" target="_blank" ref="">
            <div class="item-mini">
              <div class="icon"><img :src="i.icon" alt="i.title"/></div>
              <div class="title">{{ i.title }}</div>
            </div>
          </a>
        </div>
        <div class="lang_select">
          <div class="icon">
            <img src="@/assets/Home_IMG/lang1.png" alt=""/>
          </div>
          <div>
            <el-dropdown>
              <span class="el-dropdown-link">
                语言类型<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="lang-select-dropdown">
                <el-dropdown-item v-for="i in langList" :key="i.index">{{
                    i.name
                  }}
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showHomeAndroid == true">
      <div class="AndroidNav">
        <div class="a-logo">
          <a href="/"
          ><img src="@/assets/Home_IMG/raylinx.logo.png" alt="raylinx.com"
          /></a>
        </div>
        <div>
          <input
            id="menu"
            type="checkbox"
            v-model="isMenuChecked"
            @change="toggleMenu"
          />
          <label for="menu"></label>
        </div>
      </div>
      <div class="MenuAndr">
        <el-drawer
          :visible.sync="drawer"
          :direction="direction"
          class="ElDrawer"
          size="70%"
          :modal="false"
          :show-close="false"
          :before-close="handleClose"
        >
          <div class="sidebar">
            <div class="sidebar_logo">
              <img src="@/assets/Home_IMG/raylinx.logo.png" alt="Logo"/>
              <div>raylinx.com</div>
            </div>
            <ul class="sidebar_menu">
              <li
                v-for="(menuItem, index) in menuItems"
                :key="index"
                :class="{ active: isMenuActive(menuItem) }"
              >
                <!-- 如果有子菜单，阻止跳转 -->
                <a
                  :href="menuItem.path"
                  @click="menuItem.submenu ? toggleMenuAndroid(index) : null"
                  :class="{ 'has-submenu': menuItem.submenu }"
                >
                  {{ menuItem.name }}
                  <!-- 显示子菜单切换图标 -->
                  <i
                    v-if="menuItem.submenu"
                    :class="
                      menuItem.open ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
                    "
                  ></i>
                </a>

                <!-- 子菜单过渡动画 -->
                <transition name="fade">
                  <ul
                    v-show="menuItem.open"
                    class="sidebar_submenu"
                    v-if="menuItem.submenu"
                  >
                    <li
                      v-for="(subItem, subIndex) in menuItem.submenu"
                      :key="subIndex"
                      :class="{ active: isMenuActive(subItem) }"
                    >
                      <a
                        :href="subItem.path"
                        @click="toggleSubmenu(index, subIndex)"
                      >
                        {{ subItem.name }}
                        <i
                          v-if="subItem.submenu"
                          :class="
                            subItem.open
                              ? 'el-icon-arrow-up'
                              : 'el-icon-arrow-down'
                          "
                        ></i>
                      </a>

                      <!-- 二级子菜单过渡动画 -->
                      <transition name="fade">
                        <ul
                          v-show="subItem.open"
                          class="sidebar_submenu"
                          v-if="subItem.submenu"
                        >
                          <li
                            v-for="(thirdItem, thirdIndex) in subItem.submenu"
                            :key="thirdIndex"
                            :class="{ active2: isMenuActive(thirdItem) }"
                          >
                            <a :href="thirdItem.path">{{ thirdItem.name }}</a>
                          </li>
                        </ul>
                      </transition>
                    </li>
                  </ul>
                </transition>
              </li>
            </ul>
          </div>
        </el-drawer>
      </div>
    </div>
  </div>
</template>

<script>
import MenuNav from "./MenuNav.vue";

export default {
  components: {

    MenuNav,
  },
  data() {
    return {
      activeIndex: this.$route.path,
      langList: [{index: "1", name: "中文"}],
      navRightMenu: [
        {
          index: "1",
          icon: require("@/assets/Home_IMG/TG1.png"),
          title: "@raylinxjim",
          href: "https://t.me/raylinxjim",
        },
        {
          index: "2",
          icon: require("@/assets/Home_IMG/whatsApp1.png"),
          title: "+1(212)518-8846",
          href: "https://api.whatsapp.com/send/?phone=12125188846&text&type=phone_number&app_absent=0",
        },
      ],
      menuList: [
        {
          index: "1",
          path: "/",
          name: "home",
          meta: {
            title: "首页",
          },
        },
        {
          index: "2",
          path: "/pricing",
          name: "pricing",
          meta: {
            title: "价格计划",
          },
          // children: [
          //   {
          //     index: "2-1",
          //     path: "/cloud-product/cloud-Server",
          //     name: "cloud-Server",
          //     meta: {
          //       title: "云服务器",
          //     },
          //   },
          //   {
          //     index: "2-2",
          //     path: "/cloud-product/account",
          //     name: "account",
          //     meta: {
          //       title: "aws高配额账号",
          //     },
          //   },
          // ],
        },
        // {
        //   index: "3",
        //   path: "/cases",
        //   name: "cases",
        //   meta: {
        //     title: "客户案例",
        //   },
        // },
        {
          index: "4",
          path: "/aws-services",
          name: "aws-services",
          meta: {
            title: "AWS服务",
          },
        },
        {
          index: "5",
          path: "/knowledge-center",
          name: "knowledge-center",
          meta: {
            title: "知识中心",
          },
        },
        {
          index: "6",
          path: "/about",
          name: "about",
          meta: {
            title: "关于我们",
          },
          children: [
            {
              index: "2-1",
              path: "/cloud-product/cloud-Server",
              name: "cloud-Server",
              meta: {
                title: "云服务器",
              },
            },
            {
              index: "2-2",
              path: "/cloud-product/account",
              name: "account",
              meta: {
                title: "aws高配额账号",
              },
            },
          ],
        },
      ],
      menuList2: [
        {
          path: "/",
          // component: () => import("@/views/index.vue"),
          name: "home",
          meta: {
            title: "首页",
            isHidden: false,
          },
        },
      ],
      menuItems: [
        {
          name: "首页",
          open: false,
          path: "/",
        },
        {
          name: "价格计划",
          open: false,
          path: "/pricing/highBandwidthServer",
          // submenu: [
          //   {
          //     name: "服务器",
          //     open: false,
          //     submenu: [
          //       {name: "EC2服务器", path: "/pricing/highBandwidthServer"},
          //       {name: "轻量服务器", path: "/lightServer"}, // Add paths for submenus
          //       {name: "高防服务器", path: "/defenseServer"},
          //       {name: "站群服务器", path: "/clusterServer"},
          //     ],
          //   },
          //   // Add other items as necessary
          //
          //   {
          //     name: "区块链",
          //     open: false,
          //   },
          //   {
          //     name: "存储",
          //     open: false,
          //   },
          //   {
          //     name: "网络服务",
          //     open: false,
          //   },
          //   {
          //     name: "技术支持",
          //     open: false,
          //   },
          //   {
          //     name: "游戏",
          //     open: false,
          //   },
          //   {
          //     name: "媒体视频",
          //     open: false,
          //   },
          // ],
        },
        {
          name: "客户案例",
          open: false,
          path: "/cases",
        },
        {
          name: "AWS服务",
          open: false,
          path: "/aws-services",
        },
        {
          name: "知识中心",
          open: false,
          path: "/knowledge-center",
        },
        {
          name: "关于我们",
          open: false,
          path: "/about",
        },
      ],
      direction: "ltr",
      showHomeAndroid: false,
      screenWidth: null,
      isMenuChecked: null, // 初始化为全局菜单状态
      drawer:false,
    };
  },
  methods: {
    handleClose(){
      this.isMenuChecked = false;
      this.drawer = false;
    },
    toggleMenu() {
      this.drawer = this.isMenuChecked; // 同步更新全局菜单状态
    },
    toggleMenuAndroid(index) {
      this.menuItems[index].open = !this.menuItems[index].open;
    },
    toggleSubmenu(index, subIndex) {
      this.menuItems[index].submenu[subIndex].open =
        !this.menuItems[index].submenu[subIndex].open;
    },
    // Recursive function to check if current path or any of its children match the current URL
    isActive(path) {
      if (process.client) {
        // 只有在客户端才运行的代码
        return path && window.location.pathname === path;
      }

    },
    // New method to check if any submenu is active
    isMenuActive(menuItem) {
      // Check if the current item is active
      if (this.isActive(menuItem.path)) {
        return true;
      }

      // Check if any submenu item is active
      if (menuItem.submenu) {
        for (let subItem of menuItem.submenu) {
          if (this.isMenuActive(subItem)) {
            return true;
          }
        }
      }

      return false;
    },
    bodyScale() {
      var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
      if(devicewidth<=1600){
        var scale = devicewidth / 1600; // 分母——设计稿的尺寸
        document.body.style.zoom = scale; //放大缩小相应倍数
      }
    },
  },
  mounted() {
    this.screenWidth = document.body.clientWidth;
    this.isMenuChecked = this.globalData.showMenu;
    this.drawer = this.globalData.showMenu;
    window.onresize = () => {
      return (() => {
        this.screenWidth = document.body.clientWidth;
      })();
    };
  },
  watch: {
    // 监听路由变化或全局状态变化
    $route: {
      handler(newVal) {
        // 你的逻辑代码，例如重置复选框状态
        this.isMenuChecked = false;
        this.drawer = false;
      },
      deep: true,
    },
    'globalData.showMenu': function (newValue) {
      this.isMenuChecked = newValue;
  },
    screenWidth: {
      handler: function (val) {
        if (val >= 800) {
          this.bodyScale();
          this.showHomeAndroid = false;
          // console.log( this.showHomeAndroid);
        } else if (val < 800) {
          this.showHomeAndroid = true;
          // console.log( this.showHomeAndroid);
        }
        // this.$forceUpdate();
      },
      immediate: true,
      deep: true,
    },
  },
};
// const handleSelect = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath)
// }
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__header {
  display: none;
}

.sidebar {
  width: 100%;
  background-color: #f3f8fc;
  min-height: 100%;
  padding: 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
}

.active-menu-item {
  border-left: 3px solid #0077ff; /* Change border style as needed */
  padding-left: 5px;
}

.sidebar_logo {
  display: flex;
  align-items: center; /* 确保 logo 和文字水平对齐 */
  width: 150px;
  height: 70px;
  line-height: 70px;
  margin-bottom: 4%;
  color: #0077ff;
}

.sidebar_logo img {
  display: block;
  width: 150px;
  height: 70px;
  margin-right: 10px;
}

.active > a {
  border: 2px solid #0077ff; /* Highlight active menu */
}

.sidebar_menu {
  list-style-type: none;
  padding: 0;
}

.sidebar_menu li {
  margin-bottom: 10px;
}

.sidebar_menu li a {
  position: relative; /* 确保图标能够正确定位 */
  text-decoration: none;
  color: #0077ff;
  display: block;
  padding: 10px;
  // background-color: #fff;
  border-radius: 5px;
  transition: background-color 0.3s;
  height: 40px;
  line-height: 40px;
  text-align: left;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s ease;
}

.fade-enter, .fade-leave-to /* 兼容 vue <2.1.8 的版本 */
{
  opacity: 0;
  transform: translateY(-10px);
}

.sidebar_menu li a .el-icon-arrow-down,
.sidebar_menu li a .el-icon-arrow-up {
  position: absolute;
  right: 10px; /* 图标放在右边 */
  top: 50%;
  transform: translateY(-50%);
}

.sidebar_menu li a:hover {
  //background-color: #000000;
}

.sidebar_submenu {
  display: none; /* 默认隐藏子菜单 */
  list-style-type: none;
  padding-left: 20px;
  border-bottom: 1px solid #0077ff;
  border-top: 1px solid #0077ff;
  margin-top: 2%;
  padding-top: 2%;
}

.sidebar_menu li:hover .sidebar_submenu {
  display: block; /* 悬停时显示子菜单 */
}

.sidebar_submenu li {
  margin-bottom: 5px;
}

.sidebar_submenu li a {
  // background-color: #ffffff;
  color: #000000;
  padding: 0;
}

.sidebar_submenu ul {
  border-left: 2px solid #0077ff; /* 左边框样式 */
  padding-left: 10px; /* 留出空间让左边框可见 */
  border-bottom: none;
  border-top: none;
  font-size: 15px !important;
  margin-left: 20px;
}

.sidebar_submenu ul li {
  font-size: 15px;
  height: 30px;
  line-height: 30px;
}

.sidebar_submenu ul li a {
  font-size: 15px;
  height: 30px;
  line-height: 30px;
}

.ElDrawer {
  z-index: 2002 !important;
}

.el-dropdown-link {
  cursor: pointer;
  color: #000000;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.lang-select-dropdown {
  position: fixed !important;
  top: 56px !important;
  left: 1465px !important;
}

.AndroidNav {
  display: flex;
  position: relative;

  #menu {
    visibility: hidden;
  }

  /* hiding the checkbox */

  /* hamburger */
  label {
    width: 30px;
    height: 3px;
    border-radius: 5px;
    background: #000000;
    cursor: pointer;
    -webkit-transition: 0.6s;
    transition: 0.6s;
    position: fixed;
    top: 30px;
    left: 85%;
    /* margin-left: -50px;
  margin-top: -7.5px; */
  }

  label:before {
    content: "";
    width: 30px;
    height: 3px;
    background: #000000;
    position: absolute;
    transform: translateY(-10px);
    -webkit-transform: translateY(-10px);
    border-radius: 5px;
    -webkit-transition: 0.6s;
    transition: 0.6s;
  }

  label:after {
    content: "";
    width: 30px;
    height: 3px;
    background: #000000;
    position: absolute;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    border-radius: 5px;
    transition: 0.6s;
    -webkit-transition: 0.6s;
  }

  /* animation when checked */
  #menu:checked + label {
    width: 0px;
  }

  #menu:checked + label:before {
    transform: rotate(45deg) translate(0px);
    -webkit-transform: rotate(45deg) translate(0px);
  }

  #menu:checked + label:after {
    transform: rotate(-45deg) translate(0px);
    -webkit-transform: rotate(-45deg) translate(0px);
  }

  .MenuAndr {
    position: absolute;
    width: 100%;
    background-color: #ffffff;
    top: 8%;
    z-index: 999;
    left: 0;

    a {
      text-decoration: none;
      color: #404040;
    }

    .homeMenu-min {
      height: 40px;
    }

    .el-collapse {
      width: 100%;
    }

    .homeMenu {
      background-color: #ffffff;
      line-height: 50px;
      height: 100%;
      border-bottom: 1px solid #ccc;
    }
  }

  .a-logo {
    width: 100px;
    height: 100%;
    margin-left: -10px;
    margin-top: 10px;

    img {
      width: 250px;
      height: 100%;
      position: absolute;
      top: 0;
      left: -10px;
    }
  }

  .a-menu {
    width: 100%;
    height: 100%;
    text-align: right;

    img {
      width: 40px;
      height: 40px;
      margin-top: 20px;
      margin-right: 10px;
    }
  }
}

.NavBar {
  height: 100%;
  display: flex;
  width: 100%;

  .logo {
    width: 200px;
    height: 80px;
    // border: 1px solid #000;
    // margin-top: -10px;
    img {
      width: 200px;
      height: 80px;
    }
  }

  .navRightMenu {
    display: flex;
    height: 100%;
    width: 35%;

    .lang_select {
      height: 80px;
      display: flex;
      margin-left: 5%;

      .icon {
        width: 50px;
        height: 50px;
        margin: auto 0;

        img {
          width: 50px;
          height: 50px;
        }
      }
    }

    a {
      color: #000000;
      text-decoration: none;
    }

    a:hover {
      color: #0077ff;
    }

    .item-mini {
      display: flex;
    }

    .item {
      display: flex;
      margin-left: 10%;
      font-size: small;

      .icon {
        width: 50px;
        height: 50px;
        margin: auto 0;

        img {
          width: 50px;
          height: 50px;
        }
      }
    }
  }

  .menu {
    width: 50%;
    height: 100%;

    ::v-deep .el-menu-item.is-active {
      background: transparent !important;
    }

    ::v-deep .el-menu {
      background: transparent !important;
    }

    .Menu-right {
      float: left;
      margin-left: 2%;

      .el-menu {
        height: 80px;
        line-height: 80px;
        font-size: 20px !important;
        border-bottom: none;
      }
    }
  }
}
</style>