Web/daimp-front
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

智慧种植页面首页 田间监测页面

Browse Source
This commit is contained in:
姚俊旭 2025-05-19 13:41:18 +08:00
parent edbbf59a3b
commit 47b8e18b56
1 changed files with 12 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
sub-operation-service/src/layouts/component/Menu/SubItem.vue
View File

@ -6,36 +6,23 @@
* @LastEditTime: 2024-01-27 16:07:37
-->
<template>
<template v-if="item.children">
<!-- <template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">-->
<!-- <layout-link :to="onlyOneChild.path">-->
<!-- <el-menu-item :index="onlyOneChild.path">-->
<!-- <template #title>{{ onlyOneChild.meta && onlyOneChild.meta?.title }}</template>-->
<!-- </el-menu-item>-->
<!-- </layout-link>-->
<!-- </template>-->
<el-sub-menu :index="item.path" teleported>
<template v-if="!item.hidden">
<template v-if="!item.alwaysShow && hasOneShowingChild(item.children, item)">
<layout-link v-if="onlyOneChild.meta" :to="onlyOneChild.path">
<el-menu-item :index="onlyOneChild.path">
<layout-icon :size="20" :icon="onlyOneChild?.meta?.icon" />
<template #title>{{ onlyOneChild.meta && onlyOneChild.meta?.title }}</template>
</el-menu-item>
</layout-link>
</template>
<el-sub-menu v-else :index="item.path" teleported>
<template #title>
<!-- 左侧图标 -->
<img :src="getAssetsFile('images/smartFarm/' + item.icon)?.href ?? ''" alt="" />
<span>{{ item.title }}</span>
<!-- <layout-icon :size="20" :icon="item?.meta?.icon" />-->
<!-- <span>{{ item.meta && item.meta?.title }}</span>-->
</template>
<!-- 右侧图标（替换默认箭头）没生效 -->
<template #expand-icon>
<img alt="" :src="getAssetsFile('images/smartFarm/closing.png')" class="isOpen" />
<layout-icon :size="20" :icon="item?.meta?.icon" />
<span>{{ item.meta && item.meta?.title }}</span>
</template>
<sub-item v-for="child in item.children" :key="child.path" :item="child" />
</el-sub-menu>
</template>
<template v-else>
<el-menu-item-group :title="item.title">
<el-menu-item v-for="child in item.children" :key="child.path" :index="child.path">
<span style="color: black !important">{{ child.title }}</span>
</el-menu-item>
</el-menu-item-group>
</template>
</template>
<script setup name="sub-item">
@ -43,7 +30,6 @@ import { ref } from 'vue';
// import { isExternal } from '@/utils/validate.js';
import LayoutLink from './Link';
import LayoutIcon from './Icon';
import { getAssetsFile } from '@/utils/index.js';
// import path from 'path-browserify';
defineProps({
@ -93,35 +79,3 @@ const hasOneShowingChild = (children = [], parent) => {
// return path.resolve(props.basePath, routePath);
// };
</script>
<style scoped>
/* 强制覆盖默认样式 */
.isOpen {
width: 16px !important; /* 设置图片宽度 */
height: 16px !important; /* 设置图片高度 */
margin-left: auto !important; /* 让图标靠右 */
display: block !important; /* 避免被隐藏 */
transition: transform 0.3s; /* 添加旋转动画 */
}
/* 修复父元素可能存在的样式冲突 */
.el-sub-menu__title {
overflow: visible !important; /* 防止图片被裁剪 */
}
.item-children {
text-align: center;
font-size: 16px;
margin-top: 8px;
transition: transform 0.3s ease;
.dot {
display: inline-block;
height: 4px;
margin-right: 15px;
width: 4px;
border-radius: 90px;
background-color: black;
vertical-align: middle;
}
}
</style>