856 lines
24 KiB
Vue
856 lines
24 KiB
Vue
|
<template>
|
|||
|
|
<div>
|
|||
|
|
<el-menu
|
|||
|
|
:default-active="$route.path"
|
|||
|
|
class="el-menu-demo"
|
|||
|
|
mode="horizontal"
|
|||
|
|
@select="handleSelect"
|
|||
|
|
active-text-color="#3da9fc"
|
|||
|
|
background-color="#fff"
|
|||
|
|
text-color="#000"
|
|||
|
|
router
|
|||
|
|
>
|
|||
|
|
<el-menu-item index="/">首页</el-menu-item>
|
|||
|
|
<!-- <el-submenu index="2">-->
|
|||
|
|
<!-- <template slot="title" id="tab_test">价格计划</template>-->
|
|||
|
|
<!-- <div class="menu-dropdown-inner">-->
|
|||
|
|
<!-- <!– 左侧导航 –>-->
|
|||
|
|
<!-- <div class="menu-dropdown-sidebar pull-left" id="pull-left">-->
|
|||
|
|
<!-- <div id="pull-left-ul">-->
|
|||
|
|
<!-- <div-->
|
|||
|
|
<!-- class="menu-dropdown-sidebar-span"-->
|
|||
|
|
<!-- v-for="item in apidata"-->
|
|||
|
|
<!-- :key="item.id"-->
|
|||
|
|
<!-- :id="item.id"-->
|
|||
|
|
<!-- @mouseenter="test1(item.nodeList, item.id)"-->
|
|||
|
|
<!-- :style="{-->
|
|||
|
|
<!-- color: hoverItem === item.id ? 'rgb(0 111 255)' : '#000',-->
|
|||
|
|
<!-- }"-->
|
|||
|
|
<!-- >-->
|
|||
|
|
<!-- <i></i>{{ item.name }}-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
|
|||
|
|
<!-- <!– 右侧导航 –>-->
|
|||
|
|
<!-- <div class="menu-dropdown-content">-->
|
|||
|
|
<!-- <div id="pullright">-->
|
|||
|
|
<!-- <div-->
|
|||
|
|
<!-- v-if="IsShow == false"-->
|
|||
|
|
<!-- id="pullright1"-->
|
|||
|
|
<!-- v-for="item in maindata"-->
|
|||
|
|
<!-- :key="item.id"-->
|
|||
|
|
<!-- style="display: flex"-->
|
|||
|
|
<!-- >-->
|
|||
|
|
<!-- <!– <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> –>-->
|
|||
|
|
<!-- <p-->
|
|||
|
|
<!-- v-for="son_item in item.leafList"-->
|
|||
|
|
<!-- :key="son_item.id"-->
|
|||
|
|
<!-- :id="son_item.id"-->
|
|||
|
|
<!-- :class="{ active: $route.path === son_item.url }"-->
|
|||
|
|
<!-- >-->
|
|||
|
|
<!-- <router-link :to="son_item.url">{{-->
|
|||
|
|
<!-- son_item.name-->
|
|||
|
|
<!-- }}</router-link>-->
|
|||
|
|
<!-- <!– <span style="color: rgb(121 114 114)">{{ item.name }}</span> –>-->
|
|||
|
|
<!-- </p>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
|
|||
|
|
<!-- <div-->
|
|||
|
|
<!-- v-if="IsShow == true"-->
|
|||
|
|
<!-- id="pullright1"-->
|
|||
|
|
<!-- v-for="item in MenuData"-->
|
|||
|
|
<!-- :key="item.id"-->
|
|||
|
|
<!-- >-->
|
|||
|
|
<!-- <!– <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> –>-->
|
|||
|
|
<!-- <p-->
|
|||
|
|
<!-- v-for="son_item in item.leafList"-->
|
|||
|
|
<!-- :key="son_item.id"-->
|
|||
|
|
<!-- :id="son_item.id"-->
|
|||
|
|
<!-- :class="{ active: $route.path === son_item.url }"-->
|
|||
|
|
<!-- >-->
|
|||
|
|
<!-- <router-link :to="son_item.url">{{-->
|
|||
|
|
<!-- son_item.name-->
|
|||
|
|
<!-- }}</router-link>-->
|
|||
|
|
<!-- <!– <span style="color: rgb(121 114 114)">{{ item.name }}</span> –>-->
|
|||
|
|
<!-- </p>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
|
|||
|
|
<!-- <!– 华丽的分割线 –>-->
|
|||
|
|
<!-- </div>-->
|
|||
|
|
<!-- </el-submenu>-->
|
|||
|
|
<el-menu-item index="/pricing/highBandwidthServer">价格计划</el-menu-item>
|
|||
|
|
<el-menu-item index="/cases">客户案例</el-menu-item>
|
|||
|
|
|
|||
|
|
<el-menu-item index="/aws-services">AWS服务</el-menu-item>
|
|||
|
|
<el-menu-item index="/knowledge-center">知识中心</el-menu-item>
|
|||
|
|
<el-submenu index="/about" popper-append-to-body="false">
|
|||
|
|
<template slot="title">关于我们</template>
|
|||
|
|
<div class="menu-dropdown-inner dropdown-content">
|
|||
|
|
<!-- 左侧导航 -->
|
|||
|
|
<div class="menu-dropdown-sidebar pull-left" id="pull-left">
|
|||
|
|
<div id="pull-left-ul">
|
|||
|
|
<div
|
|||
|
|
class="menu-dropdown-sidebar-span"
|
|||
|
|
v-for="item in apidata1"
|
|||
|
|
:key="item.id"
|
|||
|
|
:id="item.id"
|
|||
|
|
@mouseenter="test2(item.nodeList, item.id)"
|
|||
|
|
:style="{
|
|||
|
|
color: hoverItem1 === item.id ? 'rgb(0 111 255)' : '#000',
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
<i></i>{{ item.name }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 右侧导航 -->
|
|||
|
|
<div class="menu-dropdown-content">
|
|||
|
|
<div id="pullright">
|
|||
|
|
<div
|
|||
|
|
v-if="IsShow2 == false"
|
|||
|
|
id="pullright1"
|
|||
|
|
v-for="item in maindata2"
|
|||
|
|
:key="item.id"
|
|||
|
|
style="display: flex"
|
|||
|
|
>
|
|||
|
|
<!-- <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> -->
|
|||
|
|
<p
|
|||
|
|
v-if="item.name != '联系方式'"
|
|||
|
|
v-for="son_item in item.leafList"
|
|||
|
|
:key="son_item.id"
|
|||
|
|
:id="son_item.id"
|
|||
|
|
:class="{ active: $route.path === son_item.url }"
|
|||
|
|
>
|
|||
|
|
<router-link :to="son_item.url">{{
|
|||
|
|
son_item.name
|
|||
|
|
}}
|
|||
|
|
</router-link>
|
|||
|
|
<!-- <span style="color: rgb(121 114 114)">{{ item.name }}</span> -->
|
|||
|
|
</p>
|
|||
|
|
<div
|
|||
|
|
v-if="item.name == '联系方式'"
|
|||
|
|
v-for="i in contactList"
|
|||
|
|
class="contact_box"
|
|||
|
|
>
|
|||
|
|
<div @mouseenter="ShowBOX(i.title)"
|
|||
|
|
@mouseleave="IsShowBOX(i.title)" class="item">
|
|||
|
|
<a :href="i.url">
|
|||
|
|
<div style="width: 100%; height: 100%"><img :src="i.icon" alt=""/></div>
|
|||
|
|
</a>
|
|||
|
|
<div v-if="i.imgshow" class="IMGBOX">
|
|||
|
|
<img :src="i.img" alt="i.title">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div v-if="IsShow2 == true" id="pullright1">
|
|||
|
|
<!-- <p style="font-weight: bold; color: #0000FF;">{{ item.name }}</p> -->
|
|||
|
|
<div v-for="i in contactList" class="contact_box">
|
|||
|
|
<div class="item">
|
|||
|
|
<a :href="i.url"><img :src="i.icon" alt=""/></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-submenu>
|
|||
|
|
</el-menu>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
isShowBOX: false,
|
|||
|
|
hoverItem: "1-1",
|
|||
|
|
hoverItem1: "1-1",
|
|||
|
|
MenuData: [
|
|||
|
|
{
|
|||
|
|
id: "1-1",
|
|||
|
|
name: "云服务器",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "1-1-1",
|
|||
|
|
name: "大带宽服务器",
|
|||
|
|
url: "/pricing/highBandwidthServer",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "1-1-2",
|
|||
|
|
name: "站群服务器",
|
|||
|
|
url: "/CloudClustersServers",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "2-1",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "2-1-3",
|
|||
|
|
name: "轻量云服务器",
|
|||
|
|
url: "/LightweightCloudServers",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "2-1-4",
|
|||
|
|
name: "高防服务器",
|
|||
|
|
url: "/HighSecurityServers",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
MenuData2: [
|
|||
|
|
{
|
|||
|
|
// 模拟的接口数据
|
|||
|
|
id: "1-1",
|
|||
|
|
parentId: null,
|
|||
|
|
name: "联系方式",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "1-1",
|
|||
|
|
name: "联系方式",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "1-1-1",
|
|||
|
|
img: "",
|
|||
|
|
url: "/pricing/highBandwidthServer",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "1-1-2",
|
|||
|
|
img: "",
|
|||
|
|
url: "/clusterServer",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
id: "2-1",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "2-1-3",
|
|||
|
|
img: "",
|
|||
|
|
url: "/lightCloudInstance",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "2-1-4",
|
|||
|
|
img: "",
|
|||
|
|
url: "/antiDDoSServer",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
apidata: [
|
|||
|
|
{
|
|||
|
|
// 模拟的接口数据
|
|||
|
|
id: "1-1",
|
|||
|
|
parentId: null,
|
|||
|
|
name: "服务器",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "1-1",
|
|||
|
|
name: "云服务器",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "1-1-1",
|
|||
|
|
name: "大带宽服务器",
|
|||
|
|
url: "/pricing/highBandwidthServer",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "1-1-2",
|
|||
|
|
name: "站群服务器",
|
|||
|
|
url: "/clusterServer",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
id: "2-1",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "2-1-3",
|
|||
|
|
name: "轻量云服务器",
|
|||
|
|
url: "/lightCloudInstance",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "2-1-4",
|
|||
|
|
name: "高防服务器",
|
|||
|
|
url: "/antiDDoSServer",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "4-1",
|
|||
|
|
name: "区块链",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "4-1-1",
|
|||
|
|
name: "区块链",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "4-1-1-1",
|
|||
|
|
name: "区块链搭建",
|
|||
|
|
url: "/BlockchainConstruction",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "4-1-2",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "4-1-2-1",
|
|||
|
|
name: "多种数据库服务",
|
|||
|
|
url: "/MultipleDatabaseServices",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "5-1",
|
|||
|
|
name: "存储",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "5-1-1",
|
|||
|
|
name: "存储数据服务",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "5-1-1-1",
|
|||
|
|
name: "可拓展对象存储（S3）",
|
|||
|
|
url: "/ScalableObiectStorage",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "5-1-1-2",
|
|||
|
|
name: "低成本归档存储",
|
|||
|
|
url: "/CloudObjectStorage",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "5-1-2",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "5-1-2-1",
|
|||
|
|
name: "块存储",
|
|||
|
|
url: "/BlockStorage",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "3-1",
|
|||
|
|
parentId: null,
|
|||
|
|
name: "网络服务",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "3-1-1",
|
|||
|
|
name: "网络服务",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "3-1-1-1",
|
|||
|
|
name: "CDN",
|
|||
|
|
url: "/CloudCDN",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "3-1-1-2",
|
|||
|
|
name: "高防盾（Shield）",
|
|||
|
|
url: "/AwsShield",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "3-1-2",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "3-1-2-1",
|
|||
|
|
name: "跨境数据传输",
|
|||
|
|
url: "/CrossborderDataTransmission",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "3-1-2-2",
|
|||
|
|
name: "全球骨干网",
|
|||
|
|
url: "/CrossborderDataTransmission",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
id: "6-1",
|
|||
|
|
name: "游戏",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "6-1-1",
|
|||
|
|
name: "游戏云服务",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "6-1-1-1",
|
|||
|
|
name: "亚马逊 GameLife",
|
|||
|
|
url: "/AmazonGameLift",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "6-1-1-2",
|
|||
|
|
name: "亚马逊 GameSparks",
|
|||
|
|
url: "/AmazonGameSparks",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "6-1-2",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "6-1-2-1",
|
|||
|
|
name: "AWS 游戏套件",
|
|||
|
|
url: "/AwsGameSuite",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
// {
|
|||
|
|
// "id": "1522393003681185793",
|
|||
|
|
// "parentId": "1522393000157970433",
|
|||
|
|
// "path": "/1522393000157970433/1522393003681185793",
|
|||
|
|
// "name": "混合云存储",
|
|||
|
|
// "orderNo": "1522393003681185793",
|
|||
|
|
// "nodeList": null,
|
|||
|
|
// "leafList": [{
|
|||
|
|
// "id": "1522393004197085186",
|
|||
|
|
// "categoryId": "1522393003681185793",
|
|||
|
|
// "name": "混合云存储",
|
|||
|
|
// "url": "https://www.baidu.com",
|
|||
|
|
// "orderNo": "1522393004197085186"
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// "id": "1522393004532629506",
|
|||
|
|
// "categoryId": "1522393003681185793",
|
|||
|
|
// "name": "云存储网关 CSG",
|
|||
|
|
// "url": "https://www.baidu.com",
|
|||
|
|
// "orderNo": "1522393004532629506"
|
|||
|
|
// },
|
|||
|
|
// {
|
|||
|
|
// "id": "1522393004880756737",
|
|||
|
|
// "categoryId": "1522393003681185793",
|
|||
|
|
// "name": "混合云容灾 HDR",
|
|||
|
|
// "url": "https://www.baidu.com",
|
|||
|
|
// "orderNo": "1522393004880756737"
|
|||
|
|
// }
|
|||
|
|
// ]
|
|||
|
|
// },
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "7-1",
|
|||
|
|
name: "技术支持",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "7-1-1",
|
|||
|
|
name: "技术支持",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "7-1-1-1",
|
|||
|
|
name: "亚马逊 Bedrock",
|
|||
|
|
url: "/Bedrock",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "7-1-1-2",
|
|||
|
|
name: "亚马逊 SageMaker",
|
|||
|
|
url: "/SageMaker",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "7-1-2",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "7-1-2-1",
|
|||
|
|
name: "亚马逊 Augmented AI",
|
|||
|
|
url: "/AugmentedAI",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "7-1-2-2",
|
|||
|
|
name: "亚马逊 CodeWhisperer",
|
|||
|
|
url: "/CodeWhisperer",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "8-1",
|
|||
|
|
name: "媒体视频",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "8-1-1",
|
|||
|
|
name: "媒体视频",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "8-1-1-1",
|
|||
|
|
name: "亚马逊 Elastic Transcoder",
|
|||
|
|
url: "/ElasticTranscoder",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "8-1-1-2",
|
|||
|
|
name: "亚马逊 Interactive Video Service",
|
|||
|
|
url: "/InteractiveVideoService",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "8-1-2",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "8-1-2-1",
|
|||
|
|
name: "亚马逊 Nimble Studio",
|
|||
|
|
url: "/NimbleStudio",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
apidata1: [
|
|||
|
|
{
|
|||
|
|
// 模拟的接口数据
|
|||
|
|
id: "1-1",
|
|||
|
|
parentId: null,
|
|||
|
|
name: "联系方式",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "1-1",
|
|||
|
|
name: "联系方式",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "1-1-1",
|
|||
|
|
img: "",
|
|||
|
|
url: "/pricing/highBandwidthServer",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "1-1-2",
|
|||
|
|
img: "",
|
|||
|
|
url: "/clusterServer",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
{
|
|||
|
|
id: "2-1",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "2-1-3",
|
|||
|
|
img: "",
|
|||
|
|
url: "/lightCloudInstance",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "2-1-4",
|
|||
|
|
img: "",
|
|||
|
|
url: "/antiDDoSServer",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "4-1",
|
|||
|
|
name: "关于我们",
|
|||
|
|
nodeList: [
|
|||
|
|
{
|
|||
|
|
id: "4-1-1",
|
|||
|
|
name: "关于我们",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "4-1-1-1",
|
|||
|
|
name: "联系我们",
|
|||
|
|
url: "/contact",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: "4-1-2",
|
|||
|
|
name: "",
|
|||
|
|
nodeList: null,
|
|||
|
|
leafList: [
|
|||
|
|
{
|
|||
|
|
id: "4-1-2-1",
|
|||
|
|
name: "关于我们",
|
|||
|
|
url: "/about",
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
leafList: null,
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
contactList: [
|
|||
|
|
{index: "1", icon: require("@/assets/Home_IMG/TG1.png"), url: "https://t.me/"},
|
|||
|
|
{
|
|||
|
|
index: "2",
|
|||
|
|
icon: require("@/assets/cases/pay1.png"),
|
|||
|
|
url: "/contact",
|
|||
|
|
title: "微信",
|
|||
|
|
img: require("@/assets/widgetApp/weixi.png"),
|
|||
|
|
imgshow: false,
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
index: "3",
|
|||
|
|
icon: require("@/assets/Home_IMG/whatsApp1.png"),
|
|||
|
|
url: "/contact",
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
index: "4",
|
|||
|
|
icon: require("@/assets/Home_IMG/fb2.png"),
|
|||
|
|
url: "https://www.facebook.com/profile.php?id=61565734855142"
|
|||
|
|
},
|
|||
|
|
{index: "5", icon: require("@/assets/pricing/twiite.png"), url: "/contact"},
|
|||
|
|
{index: "5", icon: require("@/assets/pricing/whatsApp.png"), url: "/contact"},
|
|||
|
|
{index: "5", icon: require("@/assets/pricing/email.png"), url: "/contact"},
|
|||
|
|
{index: "5", icon: require("@/assets/pricing/ins.png"), url: "https://www.instagram.com/raylinxcloud/"},
|
|||
|
|
],
|
|||
|
|
maindata: [],
|
|||
|
|
maindata2: [],
|
|||
|
|
Asidedata: [],
|
|||
|
|
IsShow: false,
|
|||
|
|
IsShow2: true,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// this.get_data();
|
|||
|
|
this.IsShow = true;
|
|||
|
|
this.showMenu = "0";
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
ShowBOX(title) {
|
|||
|
|
for (let i = 0; i < this.contactList.length; i++) {
|
|||
|
|
if (this.contactList[i].title === title && this.contactList[i].img != null) {
|
|||
|
|
this.contactList[i].imgshow = true;
|
|||
|
|
} else if (this.contactList[i].title === title) {
|
|||
|
|
this.contactList[i].imgshow = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
IsShowBOX(title) {
|
|||
|
|
for (let i = 0; i < this.contactList.length; i++) {
|
|||
|
|
if (this.contactList[i].title === title && this.contactList[i].img != null) {
|
|||
|
|
this.contactList[i].imgshow = false;
|
|||
|
|
break; // Stop the loop once the correct item is found and processed
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
test1(val, itemId) {
|
|||
|
|
console.log("test1:", val, "itemId", itemId);
|
|||
|
|
this.maindata = val;
|
|||
|
|
let leftUl = document.getElementById("pull-left-ul");
|
|||
|
|
|
|||
|
|
// 把左侧的li color展示成黑色
|
|||
|
|
let leftLi = leftUl.childNodes;
|
|||
|
|
for (let index = 0; index < leftLi.length; index++) {
|
|||
|
|
leftLi[index].style.color = "#000";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取左侧div的高度 pull-left
|
|||
|
|
let pullLeft = document.getElementById("pull-left");
|
|||
|
|
// console.log("div的宽度", pullLeft.style.height)
|
|||
|
|
|
|||
|
|
// itemId 设置左侧的数据上去的颜色
|
|||
|
|
// let itemIdDoc = document.getElementById(itemId);
|
|||
|
|
// itemIdDoc.style.borderBottom = '2px solid rgb(56, 71, 236)';
|
|||
|
|
|
|||
|
|
// pull-right
|
|||
|
|
let pullright = document.getElementById("pullright");
|
|||
|
|
// console.log("pullright,", pullright.style.width)
|
|||
|
|
|
|||
|
|
// pull-right
|
|||
|
|
// let pullright1 = document.getElementById('pullright1');
|
|||
|
|
// console.log("pullright1,", pullright1.style.width)
|
|||
|
|
this.hoverItem = itemId;
|
|||
|
|
this.IsShow = false;
|
|||
|
|
},
|
|||
|
|
test2(val, itemId) {
|
|||
|
|
console.log("test1:", val, "itemId", itemId);
|
|||
|
|
this.maindata2 = val;
|
|||
|
|
let leftUl = document.getElementById("pull-left-ul");
|
|||
|
|
|
|||
|
|
// 把左侧的li color展示成黑色
|
|||
|
|
let leftLi = leftUl.childNodes;
|
|||
|
|
for (let index = 0; index < leftLi.length; index++) {
|
|||
|
|
leftLi[index].style.color = "#000";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取左侧div的高度 pull-left
|
|||
|
|
let pullLeft = document.getElementById("pull-left");
|
|||
|
|
// console.log("div的宽度", pullLeft.style.height)
|
|||
|
|
|
|||
|
|
// itemId 设置左侧的数据上去的颜色
|
|||
|
|
// let itemIdDoc = document.getElementById(itemId);
|
|||
|
|
// itemIdDoc.style.borderBottom = '2px solid rgb(56, 71, 236)';
|
|||
|
|
|
|||
|
|
// pull-right
|
|||
|
|
let pullright = document.getElementById("pullright");
|
|||
|
|
// console.log("pullright,", pullright.style.width)
|
|||
|
|
|
|||
|
|
// pull-right
|
|||
|
|
// let pullright1 = document.getElementById('pullright1');
|
|||
|
|
// console.log("pullright1,", pullright1.style.width)
|
|||
|
|
this.hoverItem1 = itemId;
|
|||
|
|
this.IsShow2 = false;
|
|||
|
|
},
|
|||
|
|
handleSelect(key, keyPath) {
|
|||
|
|
// console.log(key, keyPath);
|
|||
|
|
},
|
|||
|
|
clear() {
|
|||
|
|
this.showMenu = 0;
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
|
|||
|
|
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
|
|||
|
|
height: 80px;
|
|||
|
|
line-height: 80px;
|
|||
|
|
border-bottom: 2px solid transparent;
|
|||
|
|
color: #909399;
|
|||
|
|
}
|
|||
|
|
::v-deep .el-menu--popup{
|
|||
|
|
margin-left: -100px !important;
|
|||
|
|
}
|
|||
|
|
::v-deep.el-menu-item {
|
|||
|
|
height: 80px;
|
|||
|
|
line-height: 80px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-submenu__title {
|
|||
|
|
background-color: #fff !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::v-deep .el-menu.el-menu--horizontal {
|
|||
|
|
border-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#pull-left-ul {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.IMGBOX {
|
|||
|
|
width: 150px;
|
|||
|
|
height: 150px;
|
|||
|
|
box-shadow: 0px 4px 10px rgba(79, 79, 79, 0.726);
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 150px !important;
|
|||
|
|
height: 150px !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact_box {
|
|||
|
|
display: flex;
|
|||
|
|
|
|||
|
|
.item {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 70px;
|
|||
|
|
margin-left: 3%;
|
|||
|
|
|
|||
|
|
img {
|
|||
|
|
width: 70px;
|
|||
|
|
height: 70px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-dropdown-inner {
|
|||
|
|
background: url("@/assets/Home_IMG/home_banner2.png") no-repeat;
|
|||
|
|
width: 632px;
|
|||
|
|
left: 0px;
|
|||
|
|
height: 150px;
|
|||
|
|
padding: 24px;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.menu-dropdown-sidebar-span {
|
|||
|
|
margin-right: 5%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.active {
|
|||
|
|
background-color: rgb(203 234 255);
|
|||
|
|
height: 30px;
|
|||
|
|
line-height: 30px;
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 15px;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
// padding: 10px;
|
|||
|
|
/* 其他样式 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#pullright {
|
|||
|
|
display: flex;
|
|||
|
|
border-left: 3px solid rgb(0, 136, 255);
|
|||
|
|
min-height: 100px;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
padding: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#pullright1 {
|
|||
|
|
display: flex;
|
|||
|
|
margin-right: 5%;
|
|||
|
|
|
|||
|
|
p {
|
|||
|
|
margin-right: 5%;
|
|||
|
|
min-width: 150px;
|
|||
|
|
|
|||
|
|
a {
|
|||
|
|
text-decoration: none;
|
|||
|
|
color: #000;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|