Skip to content

A
ant-design-pro-vue
Commit 2fbf7296 by Anan Yang Committed by GitHub
Options

Merge pull request #63 from sendya/feature/tree-list 

feature/tree-list
parents aaa0e519 5e43c365
Showing with 642 additions and 341 deletions
src/api/manage.js
......@@ -6,6 +6,7 @@ const api = {
service: '/service',
permission: '/permission',
permissionNoPager: '/permission/no-pager',
orgTree: '/org/tree'
}
export default api
......@@ -42,6 +43,14 @@ export function getPermissions(parameter) {
})
}
export function getOrgTree(parameter) {
return axios({
url: api.orgTree,
method: 'get',
params: parameter
})
}
// id == 0 add post
// id != 0 update put
export function saveService(parameter) {
......
src/components/Tree/Tree.jsx 0 → 100644
import { Menu, Icon, Input } from 'ant-design-vue'
const { Item, ItemGroup, SubMenu } = Menu
const { Search } = Input
export default {
name: 'Tree',
props: {
dataSource: {
type: Array,
required: true
},
search: {
type: Boolean,
default: false
}
},
data () {
return {
openKeys: []
}
},
methods: {
handlePlus (...args) {
this.$emit('onAdd', { args })
},
handleTitleClick (...args) {
this.$emit('titleClick', { args })
},
renderSearch () {
return (
<Search
placeholder="input search text"
style="width: 100%; margin-bottom: 1rem"
/>
)
},
renderIcon (icon) {
return icon && (<Icon type={icon} />) || null
},
renderMenuItem (item) {
return (
<Item key={item.key}>
{ this.renderIcon(item.icon) }
{ item.title }
<a class="btn"><a-icon type="plus" onClick={() => this.handlePlus(item)} /></a>
</Item>
)
},
renderItem (item) {
return item.children ? this.renderSubItem(item, item.key) : this.renderMenuItem(item, item.key)
},
renderItemGroup (item) {
const childrenItems = item.children.map(o => {
return this.renderItem(o, o.key)
})
return (
<ItemGroup key={item.key}>
<template slot="title">
<span>{ item.title }</span>
<a-dropdown>
<a class="btn"><a-icon type="ellipsis" /></a>
<a-menu slot="overlay">
<a-menu-item key="1">新增</a-menu-item>
<a-menu-item key="2">合并</a-menu-item>
<a-menu-item key="3">移除</a-menu-item>
</a-menu>
</a-dropdown>
</template>
{ childrenItems }
</ItemGroup>
)
},
renderSubItem (item, key) {
const childrenItems = item.children && item.children.map(o => {
return this.renderItem(o, o.key)
})
const title = (
<span slot="title">
{ this.renderIcon(item.icon) }
<span>{ item.title }</span>
</span>
)
if (item.group) {
return this.renderItemGroup(item)
}
// titleClick={this.handleTitleClick(item)}
return (
<SubMenu key={key}>
{ title }
{ childrenItems }
</SubMenu>
)
}
},
render () {
const { dataSource, search } = this.$props
const list = dataSource.map(item => {
return this.renderItem(item)
})
return (
<div class="tree-wrapper">
{ search ? this.renderSearch() : null }
<Menu mode="inline" class="custom-tree" {...{ on: { click: item => this.$emit('click', item) } }}>
{ list }
</Menu>
</div>
)
}
}
src/config/router.config.js
// eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
export const asyncRouterMap = [
{
path: '/',
name: 'index',
component: BasicLayout,
meta: { title: '首页' },
redirect: '/dashboard/workplace',
children: [
// dashboard
{
path: '/dashboard',
name: 'dashboard',
redirect: '/dashboard/workplace',
component: RouteView,
meta: { title: '仪表盘', keepAlive: true, icon: 'dashboard', permission: [ 'dashboard' ] },
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', keepAlive: false, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/monitor',
name: 'Monitor',
hidden: true,
component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', keepAlive: true, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
}
]
},
// forms
{
path: '/form',
redirect: '/form/basic-form',
component: PageView,
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
children: [
{
path: '/form/base-form',
name: 'BaseForm',
component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/step-form',
name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/advanced-form',
name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', keepAlive: true, permission: [ 'form' ] }
}
]
},
// list
{
path: '/list',
name: 'list',
component: PageView,
redirect: '/list/query-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
children: [
{
path: '/list/query-list',
name: 'QueryList',
component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/edit-table',
name: 'EditList',
component: () => import('@/views/list/TableInnerEditList'),
meta: { title: '内联编辑表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/user-list',
name: 'UserList',
component: () => import('@/views/list/UserList'),
meta: { title: '用户列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/role-list',
name: 'RoleList',
component: () => import('@/views/list/RoleList'),
meta: { title: '角色列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/system-role',
name: 'SystemRole',
component: () => import('@/views/role/RoleList'),
meta: { title: '角色列表2', keepAlive: true, permission: [ 'table' ]}
},
{
path: '/list/permission-list',
name: 'PermissionList',
component: () => import('@/views/list/PermissionList'),
meta: { title: '权限列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/basic-list',
name: 'BasicList',
component: () => import('@/views/list/StandardList'),
meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/card',
name: 'CardList',
component: () => import('@/views/list/CardList'),
meta: { title: '卡片列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/search',
name: 'SearchList',
component: () => import('@/views/list/search/SearchLayout'),
redirect: '/list/search/article',
meta: { title: '搜索列表', keepAlive: true, permission: [ 'table' ] },
children: [
{
path: '/list/search/article',
name: 'SearchArticles',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
},
{
path: '/list/search/project',
name: 'SearchProjects',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
},
{
path: '/list/search/application',
name: 'SearchApplications',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
},
]
},
]
},
// profile
{
path: '/profile',
name: 'profile',
component: RouteView,
redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
children: [
{
path: '/profile/basic',
name: 'ProfileBasic',
component: () => import('@/views/profile/basic/Index'),
meta: { title: '基础详情页', permission: [ 'profile' ] }
},
{
path: '/profile/advanced',
name: 'ProfileAdvanced',
component: () => import('@/views/profile/advanced/Advanced'),
meta: { title: '高级详情页', permission: [ 'profile' ] }
}
]
},
// result
{
path: '/result',
name: 'result',
component: PageView,
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
children: [
{
path: '/result/success',
name: 'ResultSuccess',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
},
{
path: '/result/fail',
name: 'ResultFail',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
}
]
},
// Exception
{
path: '/exception',
name: 'exception',
component: RouteView,
redirect: '/exception/403',
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
children: [
{
path: '/exception/403',
name: 'Exception403',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
meta: { title: '403', permission: [ 'exception' ] }
},
{
path: '/exception/404',
name: 'Exception404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
meta: { title: '404', permission: [ 'exception' ] }
},
{
path: '/exception/500',
name: 'Exception500',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
meta: { title: '500', permission: [ 'exception' ] }
}
]
},
// account
{
path: '/account',
component: RouteView,
name: 'account',
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
children: [
{
path: '/account/center',
name: 'center',
component: () => import('@/views/account/center/Index'),
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings',
name: 'settings',
component: () => import('@/views/account/settings/Index'),
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
redirect: '/account/settings/base',
alwaysShow: true,
children: [
{
path: '/account/settings/base',
name: 'BaseSettings',
component: () => import('@/views/account/settings/BaseSetting'),
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/security',
name: 'SecuritySettings',
component: () => import('@/views/account/settings/Security'),
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/custom',
name: 'CustomSettings',
component: () => import('@/views/account/settings/Custom'),
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/binding',
name: 'BindingSettings',
component: () => import('@/views/account/settings/Binding'),
meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/notification',
name: 'NotificationSettings',
component: () => import('@/views/account/settings/Notification'),
meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
]
},
]
}
]
},
{
path: '*', redirect: '/404', hidden: true
}
]
/**
* 基础路由
* @type { *[] }
*/
export const constantRouterMap = [
{
path: '/user',
component: UserLayout,
redirect: '/user/login',
hidden: true,
children: [
{
path: 'login',
name: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
},
{
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
},
{
path: 'register-result',
name: 'registerResult',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
}
]
},
{
path: '/test',
component: BlankLayout,
redirect: '/test/home',
children: [
{
path: 'home',
name: 'TestHome',
component: () => import('@/views/Home')
}
]
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
},
]
// eslint-disable-next-line
import { UserLayout, BasicLayout, RouteView, BlankLayout, PageView } from '@/components/layouts'
export const asyncRouterMap = [
{
path: '/',
name: 'index',
component: BasicLayout,
meta: { title: '首页' },
redirect: '/dashboard/workplace',
children: [
// dashboard
{
path: '/dashboard',
name: 'dashboard',
redirect: '/dashboard/workplace',
component: RouteView,
meta: { title: '仪表盘', keepAlive: true, icon: 'dashboard', permission: [ 'dashboard' ] },
children: [
{
path: '/dashboard/analysis',
name: 'Analysis',
component: () => import('@/views/dashboard/Analysis'),
meta: { title: '分析页', keepAlive: false, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/monitor',
name: 'Monitor',
hidden: true,
component: () => import('@/views/dashboard/Monitor'),
meta: { title: '监控页', keepAlive: true, permission: [ 'dashboard' ] }
},
{
path: '/dashboard/workplace',
name: 'Workplace',
component: () => import('@/views/dashboard/Workplace'),
meta: { title: '工作台', keepAlive: true, permission: [ 'dashboard' ] }
}
]
},
// forms
{
path: '/form',
redirect: '/form/basic-form',
component: PageView,
meta: { title: '表单页', icon: 'form', permission: [ 'form' ] },
children: [
{
path: '/form/base-form',
name: 'BaseForm',
component: () => import('@/views/form/BasicForm'),
meta: { title: '基础表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/step-form',
name: 'StepForm',
component: () => import('@/views/form/stepForm/StepForm'),
meta: { title: '分步表单', keepAlive: true, permission: [ 'form' ] }
},
{
path: '/form/advanced-form',
name: 'AdvanceForm',
component: () => import('@/views/form/advancedForm/AdvancedForm'),
meta: { title: '高级表单', keepAlive: true, permission: [ 'form' ] }
}
]
},
// list
{
path: '/list',
name: 'list',
component: PageView,
redirect: '/list/query-list',
meta: { title: '列表页', icon: 'table', permission: [ 'table' ] },
children: [
{
path: '/list/query-list',
name: 'QueryList',
component: () => import('@/views/list/TableList'),
meta: { title: '查询表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/tree-list',
name: 'TreeList',
component: () => import('@/views/list/TreeList'),
meta: { title: '树目录表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/edit-table',
name: 'EditList',
component: () => import('@/views/list/TableInnerEditList'),
meta: { title: '内联编辑表格', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/user-list',
name: 'UserList',
component: () => import('@/views/list/UserList'),
meta: { title: '用户列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/role-list',
name: 'RoleList',
component: () => import('@/views/list/RoleList'),
meta: { title: '角色列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/system-role',
name: 'SystemRole',
component: () => import('@/views/role/RoleList'),
meta: { title: '角色列表2', keepAlive: true, permission: [ 'table' ]}
},
{
path: '/list/permission-list',
name: 'PermissionList',
component: () => import('@/views/list/PermissionList'),
meta: { title: '权限列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/basic-list',
name: 'BasicList',
component: () => import('@/views/list/StandardList'),
meta: { title: '标准列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/card',
name: 'CardList',
component: () => import('@/views/list/CardList'),
meta: { title: '卡片列表', keepAlive: true, permission: [ 'table' ] }
},
{
path: '/list/search',
name: 'SearchList',
component: () => import('@/views/list/search/SearchLayout'),
redirect: '/list/search/article',
meta: { title: '搜索列表', keepAlive: true, permission: [ 'table' ] },
children: [
{
path: '/list/search/article',
name: 'SearchArticles',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（文章）', permission: [ 'table' ] }
},
{
path: '/list/search/project',
name: 'SearchProjects',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（项目）', permission: [ 'table' ] }
},
{
path: '/list/search/application',
name: 'SearchApplications',
component: () => import('../views/list/TableList'),
meta: { title: '搜索列表（应用）', permission: [ 'table' ] }
},
]
},
]
},
// profile
{
path: '/profile',
name: 'profile',
component: RouteView,
redirect: '/profile/basic',
meta: { title: '详情页', icon: 'profile', permission: [ 'profile' ] },
children: [
{
path: '/profile/basic',
name: 'ProfileBasic',
component: () => import('@/views/profile/basic/Index'),
meta: { title: '基础详情页', permission: [ 'profile' ] }
},
{
path: '/profile/advanced',
name: 'ProfileAdvanced',
component: () => import('@/views/profile/advanced/Advanced'),
meta: { title: '高级详情页', permission: [ 'profile' ] }
}
]
},
// result
{
path: '/result',
name: 'result',
component: PageView,
redirect: '/result/success',
meta: { title: '结果页', icon: 'check-circle-o', permission: [ 'result' ] },
children: [
{
path: '/result/success',
name: 'ResultSuccess',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Success'),
meta: { title: '成功', hiddenHeaderContent: true, permission: [ 'result' ] }
},
{
path: '/result/fail',
name: 'ResultFail',
component: () => import(/* webpackChunkName: "result" */ '@/views/result/Error'),
meta: { title: '失败', hiddenHeaderContent: true, permission: [ 'result' ] }
}
]
},
// Exception
{
path: '/exception',
name: 'exception',
component: RouteView,
redirect: '/exception/403',
meta: { title: '异常页', icon: 'warning', permission: [ 'exception' ] },
children: [
{
path: '/exception/403',
name: 'Exception403',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
meta: { title: '403', permission: [ 'exception' ] }
},
{
path: '/exception/404',
name: 'Exception404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
meta: { title: '404', permission: [ 'exception' ] }
},
{
path: '/exception/500',
name: 'Exception500',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
meta: { title: '500', permission: [ 'exception' ] }
}
]
},
// account
{
path: '/account',
component: RouteView,
name: 'account',
meta: { title: '个人页', icon: 'user', keepAlive: true, permission: [ 'user' ] },
children: [
{
path: '/account/center',
name: 'center',
component: () => import('@/views/account/center/Index'),
meta: { title: '个人中心', keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings',
name: 'settings',
component: () => import('@/views/account/settings/Index'),
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
redirect: '/account/settings/base',
alwaysShow: true,
children: [
{
path: '/account/settings/base',
name: 'BaseSettings',
component: () => import('@/views/account/settings/BaseSetting'),
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/security',
name: 'SecuritySettings',
component: () => import('@/views/account/settings/Security'),
meta: { title: '安全设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/custom',
name: 'CustomSettings',
component: () => import('@/views/account/settings/Custom'),
meta: { title: '个性化设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/binding',
name: 'BindingSettings',
component: () => import('@/views/account/settings/Binding'),
meta: { title: '账户绑定', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
{
path: '/account/settings/notification',
name: 'NotificationSettings',
component: () => import('@/views/account/settings/Notification'),
meta: { title: '新消息通知', hidden: true, keepAlive: true, permission: [ 'user' ] }
},
]
},
]
}
]
},
{
path: '*', redirect: '/404', hidden: true
}
]
/**
* 基础路由
* @type { *[] }
*/
export const constantRouterMap = [
{
path: '/user',
component: UserLayout,
redirect: '/user/login',
hidden: true,
children: [
{
path: 'login',
name: 'login',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Login')
},
{
path: 'register',
name: 'register',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/Register')
},
{
path: 'register-result',
name: 'registerResult',
component: () => import(/* webpackChunkName: "user" */ '@/views/user/RegisterResult')
}
]
},
{
path: '/test',
component: BlankLayout,
redirect: '/test/home',
children: [
{
path: 'home',
name: 'TestHome',
component: () => import('@/views/Home')
}
]
},
{
path: '/404',
component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404')
},
]
src/views/list/TreeList.vue 0 → 100644
<template>
<a-card :bordered="false">
<a-row :gutter="8">
<a-col :span="5">
<s-tree :dataSource="orgTree" :search="true" @click="handleClick"></s-tree>
</a-col>
<a-col :span="19">
<s-table
ref="table"
size="default"
:columns="columns"
:data="loadData"
:alert="false"
:rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
>
<span slot="action" slot-scope="text, record">
<template v-if="$auth('table.update')">
<a @click="handleEdit(record)">编辑</a>
<a-divider type="vertical" />
</template>
<a-dropdown>
<a class="ant-dropdown-link">
更多 <a-icon type="down" />
</a>
<a-menu slot="overlay">
<a-menu-item>
<a href="javascript:;">详情</a>
</a-menu-item>
<a-menu-item v-if="$auth('table.disable')">
<a href="javascript:;">禁用</a>
</a-menu-item>
<a-menu-item v-if="$auth('table.delete')">
<a href="javascript:;">删除</a>
</a-menu-item>
</a-menu>
</a-dropdown>
</span>
</s-table>
</a-col>
</a-row>
</a-card>
</template>
<script>
import STree from '@/components/Tree/Tree'
import STable from '@/components/table/'
import { getOrgTree, getServiceList } from '@/api/manage'
export default {
name: 'TreeList',
components: {
STable,
STree
},
data () {
return {
openKeys: ['sub1'],
// 查询参数
queryParam: {},
// 表头
columns: [
{
title: '#',
dataIndex: 'no'
},
{
title: '成员名称',
dataIndex: 'description'
},
{
title: '登陆次数',
dataIndex: 'callNo',
sorter: true,
needTotal: true,
customRender: (text) => text + ' 次'
},
{
title: '状态',
dataIndex: 'status',
needTotal: true
},
{
title: '更新时间',
dataIndex: 'updatedAt',
sorter: true
},
{
table: '操作',
dataIndex: 'action',
width: '150px',
scopedSlots: { customRender: 'action' },
}
],
// 加载数据方法 必须为 Promise 对象
loadData: parameter => {
return getServiceList(Object.assign(parameter, this.queryParam))
.then(res => {
return res.result
})
},
orgTree: [],
selectedRowKeys: [],
selectedRows: []
}
},
created () {
getOrgTree().then(res => {
this.orgTree = res.result
})
},
methods: {
handleClick (e) {
console.log('handleClick', e)
this.queryParam = {
key: e.key
}
this.$refs.table.refresh(true)
},
titleClick (e) {
console.log('titleClick', e)
},
onSelectChange (selectedRowKeys, selectedRows) {
this.selectedRowKeys = selectedRowKeys
this.selectedRows = selectedRows
},
}
}
</script>
<style lang="less">
.custom-tree {
/deep/ .ant-menu-item-group-title {
position: relative;
&:hover {
.btn {
display: block;
}
}
}
/deep/ .ant-menu-item {
&:hover {
.btn {
display: block;
}
}
}
/deep/ .btn {
display: none;
position: absolute;
top: 0;
right: 10px;
width: 20px;
height: 40px;
line-height: 40px;
z-index: 1050;
&:hover {
transform: scale(1.2);
transition: 0.5s all;
}
}
}
</style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment