240 lines
9.6 KiB
Plaintext
240 lines
9.6 KiB
Plaintext
<template>
|
||
<div>
|
||
<div class="n-layout-page-header">
|
||
<a-card :bordered="false" title="工作台">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<div class="flex items-center">
|
||
<div>
|
||
<a-avatar circle :size="64" :src="schoolboy" />
|
||
</div>
|
||
<div>
|
||
<p class="px-4 text-xl">早安，Ah jung，开始您一天的工作吧！</p>
|
||
<p class="px-4 text-gray-400">今日阴转大雨，15℃ - 25℃，出门记得带伞哦。</p>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<div class="flex justify-end w-full">
|
||
<div class="flex flex-col justify-center flex-1 text-right">
|
||
<span class="text-secondary">项目数</span>
|
||
<span class="text-2xl">16</span>
|
||
</div>
|
||
<div class="flex flex-col justify-center flex-1 text-right">
|
||
<span class="text-secondary">待办</span>
|
||
<span class="text-2xl">3/15</span>
|
||
</div>
|
||
<div class="flex flex-col justify-center flex-1 text-right">
|
||
<span class="text-secondary">消息</span>
|
||
<span class="text-2xl">35</span>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</a-card>
|
||
</div>
|
||
<a-row class="mt-4" :gutter="[16, 16]">
|
||
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<a-card :bordered="false" title="项目" :bodyStyle="{ padding: 0 }">
|
||
<div class="flex flex-wrap project-card">
|
||
<a-card class="cursor-pointer project-card-item" hoverable>
|
||
<div class="flex flex-row">
|
||
<GithubOutlined style="font-size: 30px" />
|
||
<span class="ml-4 text-lg">Github</span>
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400">
|
||
是一个面向开源及私有软件项目的托管平台。
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 开源君，2021-07-04 </div>
|
||
</a-card>
|
||
<a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
|
||
<div class="flex">
|
||
<TaobaoCircleOutlined style="color: #42b983; font-size: 30px" />
|
||
<span class="ml-4 text-lg">淘宝网</span>
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 只有你想不到，没有你淘不到 </div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 购物天地 2021-04-01</div>
|
||
</a-card>
|
||
<a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
|
||
<div class="flex">
|
||
<Html5Outlined style="color: #e44c27; font-size: 30px" />
|
||
<span class="ml-4 text-lg">Html5</span>
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> HTML5是互联网的下一代标准。 </div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 撸码也是一种艺术 2021-04-01 </div>
|
||
</a-card>
|
||
<a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
|
||
<div class="flex">
|
||
<WeiboCircleOutlined style="color: #dd0031; font-size: 30px" />
|
||
<span class="ml-4 text-lg">微博</span>
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 分享简短实时信息的社交平台。 </div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 分享君 2021-07-04。 </div>
|
||
</a-card>
|
||
<a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
|
||
<div class="flex">
|
||
<QqOutlined style="color: #61dafb; font-size: 30px" />
|
||
<span class="ml-4 text-lg">腾讯QQ</span>
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 一款基于互联网的即时通信软件。 </div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 00后天地 2021-07-04。 </div>
|
||
</a-card>
|
||
<a-card class="cursor-pointer project-card-item ms:w-1/2 md:w-1/3" hoverable>
|
||
<div class="flex">
|
||
<AlipayCircleOutlined style="color: #61dafb; font-size: 30px" />
|
||
<span class="ml-4 text-lg">支付宝</span>
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400">
|
||
致力于为企业和个人提供，简单、安全、快速、支付解决方案。
|
||
</div>
|
||
<div class="flex h-10 mt-2 text-gray-400"> 支付工具 2021-07-04 </div>
|
||
</a-card>
|
||
</div>
|
||
</a-card>
|
||
|
||
<a-card
|
||
:bodyStyle="{ paddingTop: 0, paddingBottom: 0 }"
|
||
:bordered="false"
|
||
title="动态"
|
||
class="mt-4"
|
||
>
|
||
<template #header-extra><a href="javascript:;">更多</a></template>
|
||
<a-list item-layout="horizontal" :data-source="dynamicList">
|
||
<template #renderItem="{ item }">
|
||
<a-list-item>
|
||
<a-list-item-meta :description="item.date">
|
||
<template #title>
|
||
{{ item.title }}
|
||
</template>
|
||
<template #avatar>
|
||
<a-avatar circle :size="40" :src="schoolboy" />
|
||
</template>
|
||
</a-list-item-meta>
|
||
</a-list-item>
|
||
</template>
|
||
</a-list>
|
||
</a-card>
|
||
</a-col>
|
||
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
|
||
<a-card
|
||
:segmented="{ content: 'hard' }"
|
||
:bodyStyle="{ padding: 0 }"
|
||
:bordered="false"
|
||
title="快捷操作"
|
||
>
|
||
<div class="flex flex-wrap project-card">
|
||
<a-card size="small" class="cursor-pointer project-card-item" hoverable>
|
||
<div class="flex flex-col justify-center text-gray-500">
|
||
<span class="text-center">
|
||
<DashboardOutlined style="color: #68c755; font-size: 30px" />
|
||
</span>
|
||
<span class="text-center text-lx">主控台</span>
|
||
</div>
|
||
</a-card>
|
||
<a-card size="small" class="cursor-pointer project-card-item" hoverable>
|
||
<div class="flex flex-col justify-center text-gray-500">
|
||
<span class="text-center">
|
||
<ProfileOutlined style="color: #fab251; font-size: 30px" />
|
||
</span>
|
||
<span class="text-center text-lx">列表</span>
|
||
</div>
|
||
</a-card>
|
||
<a-card size="small" class="cursor-pointer project-card-item" hoverable>
|
||
<div class="flex flex-col justify-center text-gray-500">
|
||
<span class="text-center">
|
||
<FileProtectOutlined style="color: #1890ff; font-size: 30px" />
|
||
</span>
|
||
<span class="text-center text-lx">表单</span>
|
||
</div>
|
||
</a-card>
|
||
<a-card size="small" class="cursor-pointer project-card-item" hoverable>
|
||
<div class="flex flex-col justify-center text-gray-500">
|
||
<span class="text-center">
|
||
<ApartmentOutlined style="color: #f06b96; font-size: 30px" />
|
||
</span>
|
||
<span class="text-center text-lx">权限管理</span>
|
||
</div>
|
||
</a-card>
|
||
<a-card size="small" class="cursor-pointer project-card-item" hoverable>
|
||
<div class="flex flex-col justify-center text-gray-500">
|
||
<span class="text-center">
|
||
<SettingOutlined style="color: #7238d1; font-size: 30px" />
|
||
</span>
|
||
<span class="text-center text-lx">系统管理</span>
|
||
</div>
|
||
</a-card>
|
||
<a-card size="small" class="cursor-pointer project-card-item" hoverable>
|
||
<div class="flex flex-col justify-center text-gray-500">
|
||
<span class="text-center">
|
||
<MailOutlined style="color: #5cdbd3; font-size: 30px" />
|
||
</span>
|
||
<span class="text-center text-lx">消息</span>
|
||
</div>
|
||
</a-card>
|
||
</div>
|
||
</a-card>
|
||
<a-card
|
||
:segmented="{ content: 'hard' }"
|
||
:bordered="false"
|
||
size="small"
|
||
class="pt-4 pb-3 mt-4"
|
||
>
|
||
<img src="~@/assets/images/Business.svg" class="w-full" />
|
||
</a-card>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import schoolboy from '@/assets/images/schoolboy.png';
|
||
import {
|
||
GithubOutlined,
|
||
DashboardOutlined,
|
||
ProfileOutlined,
|
||
FileProtectOutlined,
|
||
SettingOutlined,
|
||
ApartmentOutlined,
|
||
Html5Outlined,
|
||
MailOutlined,
|
||
TaobaoCircleOutlined,
|
||
WeiboCircleOutlined,
|
||
QqOutlined,
|
||
AlipayCircleOutlined,
|
||
} from '@ant-design/icons-vue';
|
||
|
||
const dynamicList = [
|
||
{
|
||
title: 'Ah Jung 刚才把工作台页面随便写了一些，凑合能看了！',
|
||
date: '2021-07-04 22:37:16',
|
||
},
|
||
{
|
||
title: 'Ah Jung 在 开源组 创建了项目 naive-ui-admin？',
|
||
date: '2021-07-04 09:37:16',
|
||
},
|
||
{
|
||
title: '@风清扬，向naive-ui-admin提交了一个bug，抽时间看看吧！',
|
||
date: '2021-07-04 22:37:16',
|
||
},
|
||
{
|
||
title: '技术部那几位童鞋，再次警告，不要摸鱼，不要摸鱼，不要摸鱼啦！',
|
||
date: '2021-07-04 09:37:16',
|
||
},
|
||
{
|
||
title: '上班不摸鱼，和咸鱼有什么区别（这话真不是我说的哈）！',
|
||
date: '2021-07-04 20:37:16',
|
||
},
|
||
];
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.project-card {
|
||
margin-right: -6px;
|
||
|
||
&-item {
|
||
margin: -1px;
|
||
width: 33.333333%;
|
||
}
|
||
}
|
||
</style>
|