816 lines
18 KiB
Vue
816 lines
18 KiB
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>
|