首页菜单加下拉按钮

src/utils/date.ts

@@ -0,0 +1,53 @@
+import dayjs from 'dayjs'
+const pickerOptions = {
+  disabledDate: (time) => {
+    return time.getTime() < Date.now()
+  },
+  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+  shortcuts: [
+    {
+      text: '3天后',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() + 3600 * 1000 * 24 * 3)
+        date.setHours(0, 0, 0, 0)
+        return date
+      }
+    },
+    {
+      text: '5天后',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() + 3600 * 1000 * 24 * 5)
+        date.setHours(0, 0, 0, 0)
+        return date
+      }
+    },
+    {
+      text: '7天后',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
+        date.setHours(0, 0, 0, 0)
+        return date
+      }
+    },
+    {
+      text: '10天后',
+      value: () => {
+        const date = new Date()
+        date.setTime(date.getTime() + 3600 * 1000 * 24 * 10)
+        date.setHours(0, 0, 0, 0)
+        return date
+      }
+    }
+  ],
+  day: (() => {
+    const date = new Date()
+    date.setTime(date.getTime() + 3600 * 1000 * 24 * 1)
+    date.setHours(0, 0, 0, 0)
+    return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
+  })()
+}
+
+export { pickerOptions }

src/views/index.vue

@@ -112,8 +112,10 @@ async function getDbTree() {
 
 getDbTree()
 let flag = false
+const onClick = ref(false)
 function menuHandler(menu: any, index: number) {
   activeMenuKey.value = menu.key
+  onClick.value = true
   console.log(menu, index)
   if (menu.key === 'DataBase' && idx.value === index) {
     report({ moduleCode: 'App_Database' })
@@ -143,6 +145,14 @@ function menuHandler(menu: any, index: number) {
   }
   push({ name: menu.key })
 }
+
+const handleExpand = (m, index) => {
+  if (m.key === activeMenuKey.value) {
+    onClick.value = !onClick.value
+  } else {
+    menuHandler(m, index)
+  }
+}
 const shorm = ref(false)
 
 const { path } = useRoute()
@@ -184,15 +194,21 @@ var activeItem = 0
       <!-- max-h-636px -->
       <div class="pt10px pb10px flex-1 max-h-836px">
         <div
-          class="nav pl36px pr16px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#fff cursor-pointer hover:underline"
+          class="nav pl20px pr16px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#fff cursor-pointer hover:underline transition-all111"
           v-for="(m, index) in Menus"
           :key="m.key"
           :class="activeMenuKey === m.key ? (m.children ? 'actives' : 'active') : ''"
           @click="() => menuHandler(m, index)"
         >
-          <div :class="activeMenuKey === m.key && 'onActive'">
-            <img v-if="activeMenuKey === m.key" :src="m.icon1" class="w22px h22px mr16px mt--5px" />
-            <img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" />
+          <div class="relative" :class="activeMenuKey === m.key && 'onActive'">
+            <p class="inline-block">
+              <img
+                v-if="activeMenuKey === m.key"
+                :src="m.icon1"
+                class="w22px h22px mr12px mt--5px"
+              />
+              <img v-else :src="m.icon" class="w22px h22px mr12px mt--5px" />
+            </p>
             <span
               class="text-22px font-900 leading-22px"
               :class="
@@ -209,9 +225,23 @@ var activeItem = 0
               </span>
               <span class="text-18px italic font-500" v-if="m.other">{{ m.other }}</span>
             </span>
+            <p
+              @click.stop="handleExpand(m, index)"
+              v-if="['DataBase', 'link', 'phone'].includes(m.key)"
+              class="inline-block ml-auto text-#FFF cursor-pointer p-2 float-right mr--10px mt--2"
+              :class="activeMenuKey === m.key && '!text-#4977FC'"
+            >
+              <el-icon size="26">
+                <CaretTop v-if="activeMenuKey === m.key && onClick" class="text-#4977FC" />
+                <CaretBottom v-else />
+              </el-icon>
+            </p>
           </div>
 
-          <div v-if="m.children && idx == index" class="pl40px">
+          <div
+            v-if="m.children && idx == index && onClick"
+            class="pl30px transition-all duration-300"
+          >
             <div
               class="my16px pl30px text-#fff activeChildren text-20px"
               v-for="(item, ind) in m.children"
@@ -388,7 +418,7 @@ var activeItem = 0
       background-color: #fff;
       border-radius: 32px 0 0 32px;
 
-      padding: 24px 16px 24px 36px;
+      padding: 24px 16px 24px 20px;
     }
   }
 }