消息静态页面

src/components/HomeComponents/NavBar.vue

@@ -95,7 +95,7 @@
                   <a class="block px-4 py-2 hover:bg-gray-100" href="#">关于我们</a>
                 </li>
                 <li>
-                  <a class="block px-4 py-2 hover:bg-gray-100" href="#">加入我们</a>
+                  <a class="block px-4 py-2 hover:bg-gray-1 00" href="#">加入我们</a>
                 </li>
                 <li>
                   <a class="block px-4 py-2 hover:bg-gray-100" href="#">项目合作</a>

src/views/WorkLoadPage/Message.vue

@@ -1,3 +1,102 @@
-<template></template>
+
+<template>
+  <div class="flex space-x-12">
+   <div>
+     <a-menu
+         id="dddddd"
+         v-model:openKeys="openKeys"
+         v-model:selectedKeys="selectedKeys"
+         :items="items"
+         mode="inline"
+         style="width: 256px"
+         @click="handleClick"
+     ></a-menu>
+   </div>
+    <div class="flex flex-col space-y-8">
+      <div class="flex">
+        <div class="mt-4 flex space-x-5">
+          <div class="inline-flex rounded-md shadow-sm">
+            <a aria-current="page" class="w-16 flex justify-center items-center text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-500 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700" href="#">
+              全部
+            </a>
+            <a class="w-16 flex justify-center items-center text-sm font-medium text-gray-900 bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-500 focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 " href="#">
+              未读
+            </a>
+          </div>
+          <a-input class="h-8 w-56 border-gray-300 rounded-md"  placeholder="请输入要查询的消息关键字" />
+        </div>
+      </div>
+      <div class="w-[1000px]">
+        <table class="w-full text-sm text-left rtl:text-right text-gray-500">
+          <tbody>
+          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+            <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
+             小明老师
+            </th>
+            <td class="px-6 py-4">
+              时间
+            </td>
+            <td class="px-6 py-4">
+              <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
+            </td>
+          </tr>
+          <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+            <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
+              小明老师
+            </th>
+            <td class="px-6 py-4">
+              时间
+            </td>
+            <td class="px-6 py-4">
+              <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
+            </td>
+          </tr>
+          <tr class=" bg-white border-b dark:bg-gray-800 dark:border-gray-700">
+            <th class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white" scope="row">
+              小明老师
+            </th>
+            <td class="px-6 py-4">
+              时间
+            </td>
+            <td class="px-6 py-4 flex">
+              <a-button class="flex justify-center items-center" type="link"><DeleteOutlined />删除</a-button>
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+
+    </div>
+
+
+  </div>
+
+</template>
 <script setup>
+import {reactive, ref, watch} from 'vue';
+import {DeleteOutlined} from '@ant-design/icons-vue';
+
+const selectedKeys = ref(['1']);
+const openKeys = ref(['sub1']);
+function getItem(label, key, icon, children, type) {
+  return {
+    key,
+    icon,
+    children,
+    label,
+    type,
+  };
+}
+const items = reactive([
+    getItem('消息盒子', '1'),
+    getItem('保存的消息', '2'),
+    getItem('项目消息', '3'),
+    getItem('系统消息', '4'),
+]);
+const handleClick = e => {
+  console.log('click', e);
+};
+watch(openKeys, val => {
+  console.log('openKeys', val);
+});
 </script>