项目资料收集

src/styles/project/middle.scss

@@ -0,0 +1,106 @@
+.hc-project-collect-middle {
+    .menu {
+        padding-right: 7px;
+        .el-card__body {
+            padding: 12px 0;
+        }
+        .el-menu {
+            --el-menu-bg-color: transparent;
+            --el-menu-text-color: #939292 !important;
+            --el-menu-active-color: transparent;
+            --el-menu-hover-text-color: #101010 !important;
+            --el-menu-hover-bg-color: var(--el-color-primary-light-5);
+            --el-menu-item-font-size: 14px;
+            --el-menu-item-height: 48px;
+            border-right: 0;
+            &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item,
+            &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item-group__title,
+            &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
+                white-space: nowrap;
+                padding-left: 0;
+            }
+            &.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-sub-menu__title {
+                padding-right: 1px;
+                border: 0;
+            }
+            .el-sub-menu__title {
+                padding: 0;
+            }
+            .el-menu-item, .el-sub-menu {
+                min-width: initial;
+                transition: 0.2s;
+                .hc-aside-menu-item {
+                    flex: 1;
+                    position: relative;
+                    padding: 0 20px;
+                    display: flex;
+                    align-items: center;
+                    transition: 0.2s;
+                    .menu---item {
+                        display: contents;
+                    }
+                    .hc-menu-icon {
+                        position: relative;
+                        font-size: 18px;
+                        margin-right: 8px;
+                        line-height: initial;
+                    }
+                    .name {
+                        flex: 1;
+                        width: 0;
+                    }
+                }
+            }
+            .el-sub-menu .el-menu .el-menu-item {
+                padding-left: 24px !important;
+                padding-right: 1px;
+                font-size: 14px;
+                height: 46px;
+                line-height: initial;
+                .hc-aside-menu-item .hc-menu-icon {
+                    margin-right: 6px;
+                    font-size: 14px;
+                }
+            }
+            .el-sub-menu .el-icon {
+                display: none;
+            }
+            .el-sub-menu .el-icon.hc-icon-i {
+                position: relative;
+                display: inline-block;
+                font-size: 16px;
+                right: 15px;
+                top: initial;
+                height: initial;
+                width: initial;
+                margin-top: 0;
+                vertical-align: initial;
+            }
+            .el-sub-menu.is-active > .el-sub-menu__title {
+                color: var(--el-menu-hover-text-color);
+            }
+            .el-menu-item.is-active {
+                color: var(--el-color-primary-dark-2);
+                background-color: var(--el-color-primary-light-8);
+                &::after {
+                    content: '';
+                    position: absolute;
+                    right: 0;
+                    top: 0;
+                    width: 3px;
+                    height: 100%;
+                    background-color: var(--el-color-primary-dark-2);
+                }
+            }
+            .el-sub-menu .el-sub-menu__title:hover,
+            .el-menu-item:not(.is-active):hover {
+                background-color: var(--el-menu-hover-bg-color);
+                color: var(--el-color-primary-dark-2);
+            }
+        }
+    }
+    .content {
+        padding-left: 7px;
+        width: calc(100% - 180px);
+    }
+}

src/views/project/middle.vue

@@ -1,13 +1,35 @@
 <template>
-    <div>
-        项目资料收集
+    <div class="hc-project-collect-middle hc-h-full">
+        <div class="menu hc-h-full inline-block w-[180px]">
+            <hc-card>
+                <HcMenuBar :cur="menuKey" :datas="menuData" @change="menuChange" />
+            </hc-card>
+        </div>
+        <div class="content hc-h-full inline-block">
+            <hc-card>
+                项目资料收集
+            </hc-card>
+        </div>
     </div>
 </template>
 
 <script setup>
+import { onMounted, ref } from 'vue'
+import { getStore } from 'hc-vue3-ui'
+import HcMenuBar from '~src/layout/modules/MenuBar.vue'
 
-</script>
+//左侧菜单
+const menuKey = ref('')
+const menuData = getStore('projectMenu')
+const menuChange = (data) => {
+    console.log(data)
+}
+
+onMounted(() => {
 
-<style scoped lang="scss">
+})
+</script>
 
+<style lang="scss">
+@import '~src/styles/project/middle';
 </style>