<!--
|
* @Description:
|
* @Author: 王旭
|
* @Date: 2023-02-27 11:30:56
|
* @LastEditTime: 2023-03-03 17:55:01
|
* @LastEditors: 王旭
|
-->
|
<template>
|
<el-menu :default-active="activeIndex" :background-color="menuColor" mode="horizontal" @select="handleSelect"
|
active-text-color="#3f93e5" class="el-menu_body" :teleported="true" @open="openmenu" @close="closemenu" router>
|
<el-menu-item class="logo_box">
|
<img src="../assets/img/index/logo.png" fit="cover" class="logoimg" />
|
<span class="appName"> SmartEarth 智能时空信息云平台</span>
|
</el-menu-item>
|
<el-menu-item index="/index" @click="stMenuClick('/')" class="menu-item">首页</el-menu-item>
|
<el-sub-menu index="2" class="menu-item menu-item3">
|
<template #title>产品</template>
|
|
<li class="el-menu-item">
|
<a @click="stMenuClick('/WebGIS')">Web GIS</a>
|
</li>
|
<li class="el-menu-item">
|
<a @click="stMenuClick('/CIM')">CIM引擎平台</a>
|
</li>
|
<li class="el-menu-item">
|
<a @click="stMenuClick('/ParallelWorld')">Parallel World</a>
|
</li>
|
</el-sub-menu>
|
<el-menu-item index="/solution" class="menu-item menu-item2">联系我们</el-menu-item>
|
<div class="flex-grow" />
|
</el-menu>
|
<router-view />
|
<div class="footer">
|
<div class="footer_bg">
|
<div class="footer_content">
|
<ul>
|
<li class="title">泰瑞数创科技（北京）股份有限公司</li>
|
<li>地址：北京市海淀区领智中心B座5层</li>
|
<li>电话：010-64845989</li>
|
<li style="margin-bottom: 0">邮箱：info@terra-it.cn</li>
|
</ul>
|
<ul>
|
<li class="title">产品</li>
|
<li @click="JJ" class="Aclass">解决方案</li>
|
<li>
|
<a href="./CIMfile/服务协议.pdf" target="_blank">服务协议</a>
|
</li>
|
<li>
|
<a href="./CIMfile/隐私政策.pdf" target="_blank">隐私政策</a>
|
</li>
|
</ul>
|
<ul>
|
<li class="title">文档</li>
|
<li>
|
<a href="./CIMfile/用户指南.pdf" target="_blank">用户指南</a>
|
</li>
|
<li>
|
<a href="https://cim.smartearth.cn/cims/api.html" target="_blank">API说明</a>
|
</li>
|
<!-- <li>
|
<a href="./CIMfile/更新日志.pdf" target="_blank">更新日志</a>
|
</li> -->
|
</ul>
|
<ul>
|
<li class="title">关于</li>
|
<li>
|
<a href="https://www.smartearth.cn/" target="_blank">关于我们</a>
|
</li>
|
<!-- <li @click="FW" class="Aclass">服务与支持</li> -->
|
<!-- <li>用户服务协议</li> -->
|
</ul>
|
<img src="../assets/img/JJFA/erweima_gongsi.png" alt="" />
|
</div>
|
<div class="footer_b">
|
<p>
|
Copyright © 2004－2022
|
泰瑞数创科技(北京)股份有限公司版权所有 | 京公网安备
|
11010802036351号 | 京ICP备09046777号
|
</p>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts" setup>
|
import { ref, onMounted, reactive, defineProps, defineEmits, watch } from "vue";
|
import { useRouter } from "vue-router";
|
import { ElMessage } from "element-plus";
|
const router = useRouter();
|
const activeIndex = ref("");
|
activeIndex.value = router.currentRoute.value.fullPath;
|
let menuColor = ref("transparent");
|
const handleSelect = (key: string, keyPath: string[]) => {
|
// console.log(key, keyPath);
|
};
|
const openmenu = (index: string, indexPath: string[]) => {
|
menuColor.value = "rgba(25, 34, 54, 0.3)";
|
};
|
const closemenu = (index: string, indexPath: string[]) => {
|
menuColor.value = "transparent";
|
};
|
const login = () => {
|
window.open("https://cim.smartearth.cn/online/#/login");
|
};
|
const ZC = () => {
|
ElMessage({
|
message: "后续开放，尽请期待",
|
// type: "warning",
|
});
|
};
|
|
const JJ = () => {
|
router.push({ path: "/solution" });
|
};
|
const FW = () => {
|
router.push({ path: "/serviceSupport" });
|
};
|
const stMenuClick=(res)=>{
|
router.push({ path: res});
|
}
|
watch(
|
() => router.currentRoute.value.path,
|
(toPath) => {
|
activeIndex.value = toPath;
|
},
|
{ immediate: true, deep: true }
|
);
|
|
onMounted(() => { });
|
</script>
|
<style lang="less" scoped>
|
.logo_box {
|
display: flex;
|
align-items: center;
|
margin-right: 140px !important;
|
|
.appName {
|
font-size: 18px;
|
font-weight: bold;
|
color: #ebf2ff;
|
padding-left: 8px;
|
}
|
|
.logoimg {
|
width: 28px;
|
height: 28px;
|
}
|
}
|
|
.el-menu_body {
|
width: 100%;
|
height: 80px;
|
padding-left: 180px !important;
|
padding-right: 180px;
|
border-bottom: 0 !important;
|
position: absolute !important;
|
background: rgba(25, 34, 54, 1);
|
top: 0;
|
right: 0;
|
z-index: 10;
|
}
|
|
.el-menu_body:hover {
|
// background: rgba(25, 34, 54, 0.3);
|
}
|
|
.el-menu-item {
|
border-bottom: 0;
|
}
|
|
.menu-item {
|
padding-right: 20px !important;
|
}
|
|
.menu-item3 {
|
padding-right: 10px !important;
|
}
|
|
.menu-item2 {
|
padding-left: 0px !important;
|
}
|
|
.menu-item1 {
|
padding-right: 0 !important;
|
}
|
|
.flex-grow {
|
flex-grow: 1;
|
}
|
|
.menu_btn {
|
.btn1 {
|
// background: #6889d8;
|
border-radius: 0;
|
color: #fff;
|
border: 0;
|
}
|
|
.btn2 {
|
background: transparent;
|
border-radius: 0;
|
border: 1px solid #6889d8;
|
color: #fff;
|
}
|
}
|
|
@media (max-width: 860px) {
|
.menu_btn {
|
display: none;
|
}
|
|
.flex-grow {
|
display: none;
|
}
|
|
.btn2 {
|
display: none;
|
margin-left: 0 !important;
|
margin-top: 5px;
|
}
|
|
.btn1 {
|
display: none;
|
}
|
}
|
|
.footer {
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
background: rgba(25, 34, 54, 1);
|
height: 340px;
|
padding-bottom: 20px;
|
|
.footer_bg {
|
width: 100%;
|
height: 100%;
|
background: url("../assets/img/bg_bottom.png") no-repeat center;
|
background-size: 100% 100%;
|
padding: 0 330px;
|
padding-top: 60px;
|
box-sizing: border-box;
|
|
.footer_content {
|
display: flex;
|
// align-items: center;
|
justify-content: space-between;
|
padding-bottom: 60px;
|
|
li {
|
font-size: 16px;
|
margin-bottom: 20px;
|
color: #ffffff;
|
}
|
|
.title {
|
font-size: 18px;
|
margin-bottom: 32px;
|
font-weight: bold;
|
color: #ffffff;
|
}
|
|
img {
|
width: 100px;
|
height: 100px;
|
margin-top: 60px;
|
}
|
|
.Aclass:hover {
|
cursor: pointer;
|
color: rgba(63, 147, 229, 1);
|
}
|
}
|
|
.footer_b {
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
text-align: center;
|
padding-top: 20px;
|
|
p {
|
font-size: 14px;
|
color: rgba(255, 255, 255, 0.6);
|
}
|
}
|
}
|
}
|
</style>
|
<style lang="less">
|
.el-menu-item:hover {
|
background-color: transparent !important;
|
outline: 0 !important;
|
color: rgba(63, 147, 229, 1) !important;
|
}
|
|
.el-sub-menu__title,
|
.el-menu-item {
|
color: #fff !important;
|
font-size: 18px !important;
|
}
|
|
.el-sub-menu.is-active .el-sub-menu__title,
|
.el-menu-item.is-active {
|
border-bottom: 0 !important;
|
background-color: transparent !important;
|
position: relative;
|
font-weight: bold;
|
}
|
|
.el-popper.is-light {
|
width: 160px;
|
background: #26384c !important;
|
box-shadow: 0px 4px 7px 0px rgba(25, 34, 54, 0.2) !important;
|
|
.el-menu--horizontal {
|
border: 0 !important;
|
background-color: transparent !important;
|
}
|
|
ul {
|
width: 100%;
|
padding: 16px 10px !important;
|
padding-bottom: 0;
|
background-color: transparent !important;
|
min-width: 0;
|
}
|
|
li {
|
width: 100%;
|
background-color: transparent !important;
|
color: #fff !important;
|
font-size: 18px;
|
}
|
}
|
|
.el-popper.is-light {
|
border: 0 !important;
|
}
|
</style>
|
