64 lines
1.5 KiB
Vue
64 lines
1.5 KiB
Vue
<template>
|
|
<div class="home-shortcut-container">
|
|
<el-card shadow="hover" class="mb10">
|
|
<div slot="header" class="clearfix">
|
|
<span>快捷方式</span>
|
|
</div>
|
|
<div class="body">
|
|
<el-card v-for="shortcut in shortcuts" :key="shortcut.router" shadow="hover" :body-style="{ padding: '0 15px 0 0' }" style="float: left;margin-right:10px;margin-bottom:10px;">
|
|
<el-link class="shortcut-link" @click="handleShortcutRedirect(shortcut.path)">
|
|
<svg-icon :icon-class="shortcut.icon" class-name="card-panel-icon"></svg-icon>
|
|
<div class="shortcut-text">
|
|
<span>{{ shortcut.menuName }}</span>
|
|
</div>
|
|
</el-link>
|
|
</el-card>
|
|
</div>
|
|
</el-card>
|
|
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getHomeShortcuts } from "@/api/system/user";
|
|
|
|
export default {
|
|
name: "ShortcutDashboard",
|
|
data () {
|
|
return {
|
|
shortcuts: []
|
|
};
|
|
},
|
|
created() {
|
|
this.loadShortcuts();
|
|
},
|
|
methods: {
|
|
loadShortcuts() {
|
|
getHomeShortcuts().then(response => {
|
|
this.shortcuts = response.data;
|
|
})
|
|
},
|
|
handleShortcutRedirect(router) {
|
|
this.$router.push({ path: router })
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
.home-shortcut-container .shortcut-link {
|
|
display: block;
|
|
padding: 10px 10px;
|
|
text-align: center;
|
|
width: 165px;
|
|
}
|
|
.home-shortcut-container .card-panel-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
padding: 5px;
|
|
}
|
|
.home-shortcut-container .shortcut-text {
|
|
padding-top: 5px;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
}
|
|
</style>
|