|
@@ -1,11 +1,47 @@
|
|
|
<template>
|
|
|
<el-row>
|
|
|
<el-col :span="24">
|
|
|
- <el-card class="box-card">
|
|
|
- <!-- <div slot="header" class="clearfix">
|
|
|
+ <el-card class="el-card-auto">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
<span style="font-size: 20px;">我的应用</span>
|
|
|
<el-button style="font-size: 20px;float: right; padding: 3px 0" type="text">操作按钮</el-button>
|
|
|
- </div> -->
|
|
|
+ </div>
|
|
|
+ <div class="appList">
|
|
|
+ <div class="typeTitle">OA</div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
|
|
|
+ <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
|
|
|
+ <svg-icon :icon-class="item.meta.icon"/>
|
|
|
+ {{ item.meta.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="appList">
|
|
|
+ <div class="typeTitle">人事管理</div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
|
|
|
+ <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
|
|
|
+ <svg-icon :icon-class="item.meta.icon"/>
|
|
|
+ {{ item.meta.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="appList">
|
|
|
+ <div class="typeTitle">财务</div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
|
|
|
+ <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
|
|
|
+ <svg-icon :icon-class="item.meta.icon"/>
|
|
|
+ {{ item.meta.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="appList">
|
|
|
+ <div class="typeTitle">CRM</div>
|
|
|
+ <div style="display: flex;flex-wrap: wrap;margin-bottom: 20px;">
|
|
|
+ <div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
|
|
|
+ <svg-icon :icon-class="item.meta.icon"/>
|
|
|
+ {{ item.meta.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
|
<el-tab-pane label="OA审批" name="first">
|
|
|
<div class="app-item" v-for="item in topMenus" @click="handleSelect(item)">
|
|
@@ -32,7 +68,6 @@
|
|
|
</div>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
-
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
</el-row>
|
|
@@ -71,18 +106,40 @@ export default {
|
|
|
// 菜单选择事件
|
|
|
handleSelect(item) {
|
|
|
let key = item.path;
|
|
|
- this.$router.push({ path: key });
|
|
|
- // window.open(key, "_blank");
|
|
|
+ if (this.ishttp(key)) {
|
|
|
+ // http(s):// 路径新窗口打开
|
|
|
+ window.open(key, "_blank");
|
|
|
+ }else{
|
|
|
+ //路径内部打开
|
|
|
+ this.$router.push({ path: key });
|
|
|
+ }
|
|
|
},
|
|
|
handleClick(tab, event) {
|
|
|
console.log(tab, event);
|
|
|
+ },
|
|
|
+ ishttp(url) {
|
|
|
+ return url.indexOf('http://') !== -1 || url.indexOf('https://') !== -1
|
|
|
}
|
|
|
-
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
+.typeTitle{
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1f2f3d;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.el-card-auto {
|
|
|
+ min-height: 100%;
|
|
|
+ height: 100%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.el-card-auto >>> .el-card__body {
|
|
|
+ height: 100%;
|
|
|
+}
|
|
|
.el-tabs__item {
|
|
|
font-size: 18px;
|
|
|
font-weight: 500;
|
|
@@ -96,8 +153,10 @@ export default {
|
|
|
width: 180px;
|
|
|
height: 150px;
|
|
|
color: #999093;
|
|
|
- padding: 0 5px;
|
|
|
- margin: 10px;
|
|
|
+ // padding: 0 5px;
|
|
|
+ margin: 10px 10px 10px 10px;
|
|
|
+ background-color: #e8f4ff;
|
|
|
+ border-radius: 10%;
|
|
|
}
|
|
|
.app-item {
|
|
|
line-height: 50px;
|