瀏覽代碼

提交模板

hlp 1 年之前
父節點
當前提交
501ae72151

+ 89 - 0
fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/home copy.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="w-full h-full">
+    <el-container>
+      <el-header class="bg-sky-800 leading-10 flex flex-row justify-between">
+        <div class=" flex flex-row justify-start items-center text-white flex-1">
+          <div v-for="routerItem in routerList"
+            :class="`border-b-2 border-transparent hover:border-white p-2 mr-4 multipleyHeader ${activeRouter?.path === routerItem.path ? 'border-white' : ''}`"
+            :key="routerItem.path">
+            <div v-if="!routerItem.children" @click="setCurrentRouter(routerItem)">
+              {{ routerItem.name }}
+            </div>
+            <div v-else class="flex justify-center items-center">
+              <el-dropdown>
+                <div class="text-white w-full h-full headerText">
+                  {{ routerItem.name }}
+                  <el-icon class="el-icon--right">
+                    <arrow-down />
+                  </el-icon>
+                </div>
+                <template #dropdown>
+                  <el-dropdown-menu>
+                    <el-dropdown-item v-for="child in routerItem.children"
+                      :key="child.path"
+                      @click="setCurrentRouter(child)">
+                      {{ child.name }}
+                    </el-dropdown-item>
+                  </el-dropdown-menu>
+                </template>
+              </el-dropdown>
+            </div>
+          </div>
+        </div>
+        <div class="flex flex-row justify-start items-center text-white">
+          <el-icon :size="26" class="ml-4 cursor-pointer">
+            <Bell />
+          </el-icon>
+          <div>
+            <img class="w-8 h-8 rounded-full ml-4 cursor-pointer" :src="defaultCover" alt="" @click="logout()">
+          </div>
+          <el-icon :size="26" class="ml-4 cursor-pointer">
+            <Grid />
+          </el-icon>
+        </div>
+      </el-header>
+      <el-main>
+        <router-view />
+      </el-main>
+    </el-container>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { RouteRecordRaw, useRouter } from 'vue-router';
+import { useStore } from "@/store"
+import defaultCover from "@/assets/defaultCover.png";
+const { getRoutersList } = useStore()
+const router = useRouter();
+const routerList = ref<RouteRecordRaw[]>([]);
+const activeRouter = ref<RouteRecordRaw>();
+const setCurrentRouter = (item: RouteRecordRaw) => {
+  activeRouter.value = item;
+  if (item.children && item.children.length > 0) {
+    router.push({ path: item.children[0].path });
+    return
+  }
+  router.push({ path: item.path });
+};
+const logout = () => {
+  router.push({ path: '/login' });
+};
+onMounted(() => {
+  routerList.value = getRoutersList;
+  activeRouter.value = routerList.value.find((item) => item.path === router.currentRoute.value.path);
+  console.log("routerList", routerList);
+})
+
+</script>
+
+<style scoped lang="scss">
+.multipleyHeader {
+  height: 96%;
+  display: flex;
+  align-items: center;
+  .headerText {
+    font-size: 16px;
+  }
+}
+</style>

+ 9 - 2
fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/tasks/index.vue

@@ -1,6 +1,13 @@
 <template>
-  <div>
-    任务
+  <div class="bg-gray-200 h-full flex">
+    <div class="p-5 w-80 pr-0">
+      <div class="bg-white w-full h-full p-3 shadow-md rounded-md">
+       1111
+      </div>
+    </div>
+    <div class="flex-1 bg-gray-200 p-5">
+      <div class="bg-white w-full h-full p-3 shadow-md rounded-md">222</div>
+    </div>
   </div>
 </template>