Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
ChenSun1
vue-vben-admin
提交
2f75a948
V
vue-vben-admin
项目概览
ChenSun1
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
V
vue-vben-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
2f75a948
编写于
11月 26, 2020
作者:
陈
陈小婷
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add basic-list page
上级
e8ccdc7f
变更
4
隐藏空白更改
内联
并排
Showing
4 changed file
with
179 addition
and
0 deletion
+179
-0
src/router/menus/modules/demo/page.ts
src/router/menus/modules/demo/page.ts
+4
-0
src/router/routes/modules/demo/page.ts
src/router/routes/modules/demo/page.ts
+8
-0
src/views/demo/page/list/basic/data.tsx
src/views/demo/page/list/basic/data.tsx
+17
-0
src/views/demo/page/list/basic/index.vue
src/views/demo/page/list/basic/index.vue
+150
-0
未找到文件。
src/router/menus/modules/demo/page.ts
浏览文件 @
2f75a948
...
...
@@ -105,6 +105,10 @@ const menu: MenuModule = {
content
:
'
new
'
,
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
标准列表
'
,
},
{
path
:
'
card
'
,
name
:
'
routes.demo.page.listCard
'
,
...
...
src/router/routes/modules/demo/page.ts
浏览文件 @
2f75a948
...
...
@@ -218,6 +218,14 @@ const page: AppRouteModule = {
title
:
'
routes.demo.page.list
'
,
},
children
:
[
{
path
:
'
basic
'
,
name
:
'
ListBasicPage
'
,
component
:
()
=>
import
(
'
/@/views/demo/page/list/basic/index.vue
'
),
meta
:
{
title
:
'
标准列表
'
,
},
},
{
path
:
'
card
'
,
name
:
'
ListCardPage
'
,
...
...
src/views/demo/page/list/basic/data.tsx
0 → 100644
浏览文件 @
2f75a948
export
const
cardList
=
(()
=>
{
const
result
:
any
[]
=
[];
for
(
let
i
=
0
;
i
<
6
;
i
++
)
{
result
.
push
({
id
:
i
,
title
:
'
Vben Admin
'
,
description
:
'
基于Vue Next, TypeScript, Ant Design Vue实现的一套完整的企业级后台管理系统
'
,
datetime
:
'
2020-11-26 17:39
'
,
extra
:
'
编辑
'
,
icon
:
'
logos:vue
'
,
color
:
'
#1890ff
'
,
author
:
'
Vben
'
,
percent
:
20
*
(
i
+
1
),
});
}
return
result
;
})();
src/views/demo/page/list/basic/index.vue
0 → 100644
浏览文件 @
2f75a948
<
template
>
<div
:class=
"prefixCls"
>
<a-page-header
title=
"标准列表"
:ghost=
"false"
/>
<div
:class=
"`$
{prefixCls}__top`">
<a-row
:gutter=
"12"
>
<a-col
:span=
"8"
:class=
"`$
{prefixCls}__top-col`">
<div>
我的待办
</div>
<p>
8个任务
</p>
</a-col>
<a-col
:span=
"8"
:class=
"`$
{prefixCls}__top-col`">
<div>
本周任务平均处理时间
</div>
<p>
32分钟
</p>
</a-col>
<a-col
:span=
"8"
:class=
"`$
{prefixCls}__top-col`">
<div>
本周完成任务数
</div>
<p>
24个任务
</p>
</a-col>
</a-row>
</div>
<div
:class=
"`$
{prefixCls}__content`">
<a-list
:pagination=
"pagination"
>
<template
v-for=
"item in list"
:key=
"item.id"
>
<a-list-item
class=
"list"
>
<a-list-item-meta>
<template
#avatar
>
<Icon
class=
"icon"
v-if=
"item.icon"
:icon=
"item.icon"
:color=
"item.color"
/>
</
template
>
<
template
#title
>
<span>
{{
item
.
title
}}
</span>
<div
class=
"extra"
v-if=
"item.extra"
>
{{
item
.
extra
}}
</div>
</
template
>
<
template
#description
>
<div
class=
"description"
>
{{
item
.
description
}}
</div>
<div
class=
"info"
>
<div><span>
Owner
</span>
{{
item
.
author
}}
</div>
<div><span>
开始时间
</span>
{{
item
.
datetime
}}
</div>
</div>
<div
class=
"progress"
>
<Progress
:percent=
"item.percent"
status=
"active"
/>
</div>
</
template
>
</a-list-item-meta>
</a-list-item>
</template>
</a-list>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
{
Progress
}
from
'
ant-design-vue
'
;
import
{
defineComponent
}
from
'
vue
'
;
import
Icon
from
'
/@/components/Icon/index
'
;
import
{
cardList
}
from
'
./data
'
;
export
default
defineComponent
({
components
:
{
Icon
,
Progress
},
setup
()
{
return
{
prefixCls
:
'
list-basic
'
,
list
:
cardList
,
pagination
:
{
show
:
true
,
pageSize
:
3
,
},
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
.list-basic {
&__top {
padding: 24px;
margin: 24px 24px 0 24px;
text-align: center;
background: #fff;
&-col {
&:not(:last-child) {
border-right: 1px dashed rgba(206, 206, 206, 0.4);
}
div {
margin-bottom: 12px;
font-size: 14px;
line-height: 22px;
color: rgba(0, 0, 0, 0.45);
}
p {
margin: 0;
font-size: 24px;
line-height: 32px;
color: rgba(0, 0, 0, 0.85);
}
}
}
&__content {
padding: 24px;
margin: 12px 24px;
background: #fff;
.list {
position: relative;
}
.icon {
font-size: 40px !important;
}
.extra {
position: absolute;
top: 20px;
right: 15px;
font-weight: normal;
color: #1890ff;
cursor: pointer;
}
.description {
display: inline-block;
width: 40%;
}
.info {
display: inline-block;
width: 30%;
text-align: center;
div {
display: inline-block;
padding: 0 20px;
span {
display: block;
}
}
}
.progress {
display: inline-block;
width: 15%;
vertical-align: top;
}
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录