WxxyDeveloper/JSL_OrganizeInternalOAWeb
9
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

消息静态页面

Browse Source
This commit is contained in:
GUjiYN 2024-03-11 16:03:53 +08:00
parent 94c26c35a6
commit 6d707c7826
2 changed files with 101 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/HomeComponents/NavBar.vue
View File

@ -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>

101
src/views/WorkLoadPage/Message.vue
View File

@ -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>