Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
Bug 终结者
vue-vben-admin
提交
3a132f3f
V
vue-vben-admin
项目概览
Bug 终结者
/
vue-vben-admin
与 Fork 源项目一致
从无法访问的项目Fork
通知
1
Star
1
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,体验更适合开发者的 AI 搜索 >>
提交
3a132f3f
编写于
11月 23, 2020
作者:
陈
陈小婷
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat: add card-list page
上级
737b1b19
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
148 addition
and
0 deletion
+148
-0
src/router/menus/modules/demo/page.ts
src/router/menus/modules/demo/page.ts
+13
-0
src/router/routes/modules/demo/page.ts
src/router/routes/modules/demo/page.ts
+20
-0
src/views/demo/page/account/center/Application.vue
src/views/demo/page/account/center/Application.vue
+1
-0
src/views/demo/page/list/card/data.tsx
src/views/demo/page/list/card/data.tsx
+14
-0
src/views/demo/page/list/card/index.vue
src/views/demo/page/list/card/index.vue
+100
-0
未找到文件。
src/router/menus/modules/demo/page.ts
浏览文件 @
3a132f3f
...
...
@@ -106,6 +106,19 @@ const menu: MenuModule = {
},
],
},
{
path
:
'
list
'
,
name
:
'
列表页
'
,
tag
:
{
content
:
'
new
'
,
},
children
:
[
{
path
:
'
card
'
,
name
:
'
卡片列表
'
,
},
],
},
],
},
};
...
...
src/router/routes/modules/demo/page.ts
浏览文件 @
3a132f3f
...
...
@@ -209,6 +209,26 @@ const page: AppRouteModule = {
],
},
// =============================exception end=============================
// =============================list start=============================
{
path
:
'
/list
'
,
name
:
'
ListPage
'
,
redirect
:
'
/page-demo/list/card
'
,
meta
:
{
title
:
'
列表页
'
,
},
children
:
[
{
path
:
'
card
'
,
name
:
'
ListCardPage
'
,
component
:
()
=>
import
(
'
/@/views/demo/page/list/card/index.vue
'
),
meta
:
{
title
:
'
卡片列表
'
,
},
},
],
},
// =============================list end=============================
],
};
...
...
src/views/demo/page/account/center/Application.vue
浏览文件 @
3a132f3f
...
...
@@ -52,6 +52,7 @@
.account-center-application {
&__card {
width: 100%;
margin-bottom: -12px;
.ant-card-body {
padding: 16px;
...
...
src/views/demo/page/list/card/data.tsx
0 → 100644
浏览文件 @
3a132f3f
export
const
cardList
=
(()
=>
{
const
result
:
any
[]
=
[];
for
(
let
i
=
0
;
i
<
12
;
i
++
)
{
result
.
push
({
title
:
'
Vben Admin
'
,
icon
:
'
logos:ant-design
'
,
color
:
'
#1890ff
'
,
active
:
'
100
'
,
new
:
'
1,799
'
,
download
:
'
bx:bx-download
'
,
});
}
return
result
;
})();
src/views/demo/page/list/card/index.vue
0 → 100644
浏览文件 @
3a132f3f
<
template
>
<div
:class=
"prefixCls"
>
<a-page-header
title=
"卡片列表"
:ghost=
"false"
>
基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统。
<div
:class=
"`$
{prefixCls}__link`">
<a><Icon
icon=
"bx:bx-paper-plane"
color=
"#1890ff"
/><span>
开始
</span></a>
<a><Icon
icon=
"carbon:warning"
color=
"#1890ff"
/><span>
简介
</span></a>
<a><Icon
icon=
"gg:loadbar-doc"
color=
"#1890ff"
/><span>
文档
</span></a>
</div>
</a-page-header>
<div
:class=
"`$
{prefixCls}__content`">
<List>
<a-row
:gutter=
"16"
>
<template
v-for=
"(item, index) in list"
:key=
"index"
>
<a-col
:span=
"6"
>
<ListItem>
<Card
:hoverable=
"true"
:class=
"`$
{prefixCls}__card`">
<div
:class=
"`$
{prefixCls}__card-title`">
<Icon
class=
"icon"
v-if=
"item.icon"
:icon=
"item.icon"
:color=
"item.color"
/>
{{
item
.
title
}}
</div>
<div
:class=
"`$
{prefixCls}__card-detail`">
基于Vue Next, TypeScript, Ant Design实现的一套完整的企业级后台管理系统
</div>
</Card>
</ListItem>
</a-col>
</
template
>
</a-row>
</List>
</div>
</div>
</template>
<
script
lang=
"ts"
>
import
{
defineComponent
}
from
'
vue
'
;
import
{
List
,
Card
}
from
'
ant-design-vue
'
;
import
Icon
from
'
/@/components/Icon/index
'
;
import
{
cardList
}
from
'
./data
'
;
export
default
defineComponent
({
components
:
{
Icon
,
List
,
ListItem
:
List
.
Item
,
Card
},
setup
()
{
return
{
prefixCls
:
'
list-card
'
,
list
:
cardList
,
};
},
});
</
script
>
<
style
lang=
"less"
scoped
>
.list-card {
&__link {
margin-top: 10px;
font-size: 14px;
a {
margin-right: 30px;
}
span {
margin-left: 5px;
}
}
&__content {
padding: 12px 24px;
// background: #fff;
}
&__card {
width: 100%;
margin-bottom: -8px;
.ant-card-body {
padding: 16px;
}
&-title {
margin-bottom: 5px;
font-size: 16px;
font-weight: 500;
color: rgba(0, 0, 0, 0.85);
.icon {
margin-top: -5px;
margin-right: 10px;
font-size: 38px !important;
}
}
&-detail {
padding-top: 10px;
padding-left: 30px;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
}
}
}
</
style
>
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录