no message
Former-commit-id: 4a1af7085d5d219fa49cb3bcde32bef16f5d69d6 Former-commit-id: 6fd5799f007bc736fcd20354835e908464f52355 Former-commit-id: fb88a361b3f8a5a05e6863fc34809753b6e560ee
This commit is contained in:
27
src/pages/demo/components/icon/icon.vue
Normal file
27
src/pages/demo/components/icon/icon.vue
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<Container type="ghost">
|
||||||
|
<el-card class="dd-mb">
|
||||||
|
<Icon></Icon>
|
||||||
|
<Icon name="github"></Icon>
|
||||||
|
<Icon name="github" style="font-size: 100px;"></Icon>
|
||||||
|
<Icon name="github" class="icon-class-demo"></Icon>
|
||||||
|
</el-card>
|
||||||
|
<el-card>
|
||||||
|
<Markdown url="/static/markdownFiles/article/组件 - 图标组件.md"></Markdown>
|
||||||
|
</el-card>
|
||||||
|
</Container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.icon-class-demo {
|
||||||
|
transition: all .3s;
|
||||||
|
font-size: 100px;
|
||||||
|
color: #409EFF;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
&:hover{
|
||||||
|
color: #F56C6C;
|
||||||
|
transform: scale(1.2) rotate(30deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,37 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Container>
|
|
||||||
<el-row :gutter="10">
|
|
||||||
<el-col :span="4">
|
|
||||||
<div>
|
|
||||||
<Icon></Icon>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Icon name="github"></Icon>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Icon name="github" style="font-size: 100px;"></Icon>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Icon name="github" class="icon-class-demo"></Icon>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="20">
|
|
||||||
<Markdown url="/static/markdownFiles/article/组件 - 图标组件.md"></Markdown>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</Container>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
.icon-class-demo {
|
|
||||||
transition: all .3s;
|
|
||||||
font-size: 100px;
|
|
||||||
color: #409EFF;
|
|
||||||
cursor: pointer;
|
|
||||||
user-select: none;
|
|
||||||
&:hover{
|
|
||||||
color: #F56C6C;
|
|
||||||
transform: scale(1.2) rotate(30deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@@ -17,14 +17,24 @@ export const menu = {
|
|||||||
icon: 'font-awesome',
|
icon: 'font-awesome',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: '演示',
|
title: '图标组件',
|
||||||
icon: 'file-o',
|
icon: 'file-o',
|
||||||
path: 'data/icon',
|
path: 'data/icon/icon',
|
||||||
name: 'demo-components-icon',
|
name: 'demo-components-icon-icon',
|
||||||
meta: {
|
meta: {
|
||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
},
|
},
|
||||||
component: resolve => { require(['@/pages/demo/components/icon/index.vue'], resolve) }
|
component: resolve => { require(['@/pages/demo/components/icon/icon.vue'], resolve) }
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '图标选择器',
|
||||||
|
icon: 'file-o',
|
||||||
|
path: 'data/icon/select',
|
||||||
|
name: 'demo-components-icon-select',
|
||||||
|
meta: {
|
||||||
|
requiresAuth: true
|
||||||
|
},
|
||||||
|
component: resolve => { require(['@/pages/demo/components/icon/select.vue'], resolve) }
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
// [插件] 菜单
|
// [插件] 菜单
|
||||||
export const menu = {
|
export const menu = {
|
||||||
title: '功能',
|
title: '插件',
|
||||||
path: '/demo/plugins',
|
path: '/demo/plugins',
|
||||||
name: 'demo-plugins',
|
name: 'demo-plugins',
|
||||||
meta: {
|
meta: {
|
||||||
@@ -96,16 +96,6 @@ export const menu = {
|
|||||||
requiresAuth: true
|
requiresAuth: true
|
||||||
},
|
},
|
||||||
component: resolve => { require(['@/pages/demo/plugins/font-awesome/list.vue'], resolve) }
|
component: resolve => { require(['@/pages/demo/plugins/font-awesome/list.vue'], resolve) }
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '图标选择器',
|
|
||||||
icon: 'file-o',
|
|
||||||
path: 'font-awesome/select',
|
|
||||||
name: 'demo-font-awesome-select',
|
|
||||||
meta: {
|
|
||||||
requiresAuth: true
|
|
||||||
},
|
|
||||||
component: resolve => { require(['@/pages/demo/plugins/font-awesome/select.vue'], resolve) }
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -33,7 +33,7 @@
|
|||||||
|
|
||||||
推荐一个国内的图表索引 [Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
|
推荐一个国内的图表索引 [Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
|
||||||
|
|
||||||
PS. 左侧最后一个图标的样式 `SCSS`
|
PS. 示例中最后一个图标的样式 `SCSS`
|
||||||
|
|
||||||
```
|
```
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|||||||
Reference in New Issue
Block a user