|
|
@@ -0,0 +1,226 @@
|
|
|
+<template>
|
|
|
+ <div class="menu-container">
|
|
|
+ <div class="search-box">
|
|
|
+ <el-icon color="#fff"><Search /></el-icon>
|
|
|
+ <input v-model="searchText" class="input" @change="changeSearchText" />
|
|
|
+ </div>
|
|
|
+ <div class="menu-box">
|
|
|
+ <div class="menu-btn" @click="changExpand">{{ menuState.isExpand ? '收起' : '展开' }}</div>
|
|
|
+ <Transition>
|
|
|
+ <div v-show="menuState.isExpand">
|
|
|
+ <div class="menu-header">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in menuState.menuData"
|
|
|
+ :key="index"
|
|
|
+ :class="menuState.activeIndex === index ? 'menu-item active' : 'menu-item'"
|
|
|
+ @click="changeActive(index)"
|
|
|
+ >
|
|
|
+ {{ item.label }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="menu-content">
|
|
|
+ <div v-for="(item, index) in menuState.menuData[menuState.activeIndex]?.childrens" :key="index" class="content-box">
|
|
|
+ <div class="box-header">
|
|
|
+ <div>{{ item.label }}</div>
|
|
|
+ <el-icon class="icon" color="#53aee6" size="24" @click="changeBoxShow(item)">
|
|
|
+ <CaretBottom v-show="item.show" />
|
|
|
+ <CaretTop v-show="!item.show" />
|
|
|
+ </el-icon>
|
|
|
+ </div>
|
|
|
+ <Transition>
|
|
|
+ <div v-show="item.show" class="box-content">
|
|
|
+ <div v-for="(item2, index2) in item.childrens" :key="index2" class="box-item">{{ item2.label }}</div>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Transition>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+interface Props {
|
|
|
+ activeMap: string;
|
|
|
+}
|
|
|
+const props = withDefaults(defineProps<Props>(), {});
|
|
|
+const emits = defineEmits(['swtichMap']);
|
|
|
+
|
|
|
+const searchText = ref('');
|
|
|
+const changeSearchText = () => {
|
|
|
+ console.log('搜索值：', searchText.value);
|
|
|
+};
|
|
|
+
|
|
|
+let menuState = reactive({
|
|
|
+ // 是否展开菜单
|
|
|
+ isExpand: true,
|
|
|
+ menuData: [],
|
|
|
+ activeIndex: 0
|
|
|
+});
|
|
|
+
|
|
|
+// 展示收起整个菜单
|
|
|
+const changExpand = () => {
|
|
|
+ menuState.isExpand = !menuState.isExpand;
|
|
|
+};
|
|
|
+
|
|
|
+// 切换tab
|
|
|
+const changeActive = (index) => {
|
|
|
+ menuState.activeIndex = index;
|
|
|
+};
|
|
|
+
|
|
|
+// 菜单内容展开收缩
|
|
|
+const changeBoxShow = (item) => {
|
|
|
+ item.show = !item.show;
|
|
|
+};
|
|
|
+
|
|
|
+const initData = () => {
|
|
|
+ const menuData = [
|
|
|
+ {
|
|
|
+ label: '监测预警',
|
|
|
+ childrens: [
|
|
|
+ {
|
|
|
+ label: '防风防汛',
|
|
|
+ childrens: [
|
|
|
+ { label: '卫星云图', url: '' },
|
|
|
+ { label: '雷达图', url: '' },
|
|
|
+ { label: '气温实况图', url: '' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '危化品安全监测',
|
|
|
+ childrens: [
|
|
|
+ { label: '重大风险源', url: '' },
|
|
|
+ { label: '危化企业', url: '' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '基本信息',
|
|
|
+ childrens: [
|
|
|
+ {
|
|
|
+ label: '基本信息1',
|
|
|
+ childrens: [{ label: '信息', url: '' }]
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ { label: '分析工具' }
|
|
|
+ ];
|
|
|
+ menuData.forEach((item) => {
|
|
|
+ item.childrens?.forEach((item2) => {
|
|
|
+ item2.show = true;
|
|
|
+ });
|
|
|
+ });
|
|
|
+ menuState.menuData = menuData;
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ initData();
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.search-box {
|
|
|
+ border: 1px solid #2c4a76;
|
|
|
+ background: #042350;
|
|
|
+ width: 350px;
|
|
|
+ height: 45px;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .input {
|
|
|
+ border: none;
|
|
|
+ outline: none;
|
|
|
+ background: #042350;
|
|
|
+ color: #fff;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.menu-box {
|
|
|
+ width: 350px;
|
|
|
+ height: 70%;
|
|
|
+ background-color: #041d55;
|
|
|
+ margin-top: 10px;
|
|
|
+ color: #fff;
|
|
|
+ padding: 10px 20px;
|
|
|
+ position: relative;
|
|
|
+ border: 1px solid #12379b;
|
|
|
+ .menu-btn {
|
|
|
+ position: absolute;
|
|
|
+ top: -15px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ border: 1px solid #12379b;
|
|
|
+ background-color: #041d55;
|
|
|
+ padding: 5px 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .menu-header {
|
|
|
+ display: flex;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .menu-item {
|
|
|
+ flex: 1;
|
|
|
+ min-width: 100px;
|
|
|
+ height: 100%;
|
|
|
+ font-size: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background-color: #1d4e9c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .menu-content {
|
|
|
+ .content-box {
|
|
|
+ width: 100%;
|
|
|
+ padding: 0 10px;
|
|
|
+ background-color: #062f5b;
|
|
|
+ margin-top: 10px;
|
|
|
+ .box-header {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid #83cbf3;
|
|
|
+ .icon {
|
|
|
+ position: absolute;
|
|
|
+ right: 30px;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-content {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ //padding: 20px 0;
|
|
|
+ overflow: hidden;
|
|
|
+ .box-item {
|
|
|
+ padding: 20px 15px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ color: #b5dff0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* 切换动画 */
|
|
|
+.v-enter-active,
|
|
|
+.v-leave-active {
|
|
|
+ transition: opacity 0.5s ease;
|
|
|
+}
|
|
|
+
|
|
|
+.v-enter-from,
|
|
|
+.v-leave-to {
|
|
|
+ opacity: 0;
|
|
|
+}
|
|
|
+</style>
|
