Skip to content

胡锦波 / org-manager-web

Go to a project
Commit 69be39a2 by 胡锦波
Options

1. init 侧边栏icon添加， 隐藏 首页

parent 1a49b247
Inline Side-by-side
Showing with 89 additions and 11 deletions
src/assets/images/application.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?><svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>编组 13备份</title><g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="账号管理-企业通讯录" transform="translate(-20.000000, -247.000000)" class="_svg-icon" fill="#666666" fill-rule="nonzero"><g id="编组-13备份" transform="translate(20.000000, 247.000000)"><g id="编组" transform="translate(0.000000, 0.800000)"><path d="M0.723121995,3.44245793 C1.1473107,3.41260517 1.51597055,3.7284405 1.55259916,4.15009014 L1.55360577,4.16289063 C1.73140024,6.68457031 3.06529447,8.31634615 5.67325721,9.16739784 L5.75267428,9.19296875 C6.07134916,9.29403546 6.28919772,9.58700421 6.29495192,9.91998197 L6.29507212,9.93348858 L6.29507212,11.8432392 C6.29507212,12.2723257 5.94685998,12.6201923 5.51732272,12.6201923 C5.09208233,12.6201923 4.7465595,12.2792668 4.73967849,11.8560847 L4.73958834,11.8432392 L4.73957332,10.4862831 L4.71198918,10.4759615 C1.84840745,9.38939303 0.248212139,7.32313702 0.00919471154,4.36772837 L0.001953125,4.27208534 C-0.0282301683,3.84405048 0.294651442,3.47261118 0.723121995,3.44245793 Z M13.2191857,3.45748197 C12.794997,3.42762921 12.4263371,3.74346454 12.3897085,4.16511418 L12.3887019,4.17791466 C12.2109075,6.69959435 10.8770132,8.33137019 8.26905048,9.18242188 L8.18963341,9.20799279 C7.87095853,9.3090595 7.65310998,9.60202825 7.64735577,9.93500601 L7.64723558,9.94851262 L7.64723558,11.8582632 C7.64723558,12.2873498 7.99544772,12.6352163 8.42498498,12.6352163 C8.85022536,12.6352163 9.1957482,12.2942909 9.20262921,11.8711088 L9.20271935,11.8582632 L9.20273437,10.5013071 L9.23031851,10.4909856 C12.0939002,9.40441707 13.6940956,7.33816106 13.933113,4.3827524 L13.9403546,4.28710938 C13.9705379,3.85907452 13.6476562,3.48763522 13.2191857,3.45748197 L13.2191857,3.45748197 Z M8.84502704,0 C10.1516827,0 11.1628606,0.99468149 11.1628606,2.2796875 C11.1628606,3.58700421 10.1759465,4.6801232 8.59932392,6.12789964 L8.48432993,6.2331881 L8.36732272,6.33975361 L8.30806791,6.39353966 L8.18808594,6.50211839 L8.06616587,6.61209435 L7.87971755,6.77982272 L7.55976562,7.06702224 L7.31397236,7.28375901 C7.10836839,7.46508413 6.80168269,7.46786358 6.59295373,7.2921274 L6.5832482,7.28375901 L6.33745493,7.06702224 L5.95489784,6.72354267 L5.83106971,6.61210938 L5.64891827,6.44765625 C5.62899289,6.42962679 5.60907602,6.41158793 5.58916767,6.39353966 L5.47115385,6.2863131 C5.45165264,6.26855469 5.43224159,6.25084135 5.41289063,6.2331881 L5.29789663,6.12789964 C3.72130409,4.68013822 2.734375,3.58700421 2.734375,2.2796875 C2.734375,0.99468149 3.74555288,0 5.05220853,0 C5.78970853,0 6.48479567,0.331550481 6.94861779,0.870477764 C7.41240986,0.331565505 8.10754207,0 8.84502704,0 Z" id="形状"></path></g></g></g></g></svg>
\ No newline at end of file
src/assets/images/manager.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?><svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>编组 11</title><g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="账号管理-企业通讯录" class="_svg-icon" transform="translate(-20.000000, -97.000000)" fill="#666666" fill-rule="nonzero"><g id="编组-11" transform="translate(20.000000, 97.000000)"><g id="编组"><path d="M6.50000158,0 C8.23250158,0 9.65000158,1.4175 9.65000158,3.15 L9.65000158,3.15 L9.65000158,4.55000001 C9.65000158,5.76800001 8.95000159,6.82850001 7.93150159,7.34999999 L7.93150159,7.34999999 L11.1340016,8.05 C12.1035016,8.25300001 12.8000016,9.1105 12.8000016,10.1045 L12.8000016,10.1045 L12.8000016,12.5 C12.8000016,13.3284271 12.1284287,14 11.3000016,14 L11.3000016,14 L1.70000023,14 C0.871573102,14 0.200000226,13.3284271 0.200000226,12.5 L0.200000226,12.5 L0.200000226,10.1045 C0.199542069,9.11183651 0.894657361,8.25462501 1.86600159,8.05 L1.86600159,8.05 L5.06850159,7.34999999 C4.05000159,6.82850001 3.35000159,5.76800001 3.35000159,4.55000001 L3.35000159,4.55000001 L3.35000159,3.15 C3.35000159,1.4175 4.76750159,0 6.50000158,0 Z M13.3042616,5.5942802 C13.5941818,5.5942802 13.8282137,5.82831213 13.8282137,6.11823229 C13.8282137,6.40815246 13.5941818,6.64218439 13.3042616,6.64218439 L13.3042616,6.64218439 L11.2084532,6.64218439 C10.918533,6.64218439 10.6845011,6.40815246 10.6845011,6.11823229 C10.6845011,5.82831213 10.918533,5.5942802 11.2084532,5.5942802 L11.2084532,5.5942802 Z M13.3042616,3.49847181 C13.5941818,3.49847181 13.8282137,3.73250374 13.8282137,4.02242391 C13.8282137,4.31234407 13.5941818,4.546376 13.3042616,4.546376 L13.3042616,4.546376 L11.2084532,4.546376 C10.918533,4.546376 10.6845011,4.31234407 10.6845011,4.02242391 C10.6845011,3.73250374 10.918533,3.49847181 11.2084532,3.49847181 L11.2084532,3.49847181 Z M13.3042616,1.40266343 C13.5941818,1.40266343 13.8282137,1.63669536 13.8282137,1.92661552 C13.8282137,2.21653569 13.5941818,2.45056762 13.3042616,2.45056762 L13.3042616,2.45056762 L11.2084532,2.45056762 C10.918533,2.45056762 10.6845011,2.21653569 10.6845011,1.92661552 C10.6845011,1.63669536 10.918533,1.40266343 11.2084532,1.40266343 L11.2084532,1.40266343 Z" id="形状结合"></path></g></g></g></g></svg>
\ No newline at end of file
src/assets/images/setting.svg 0 → 100644
<?xml version="1.0" encoding="UTF-8"?><svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>编组 5备份</title><g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="账号管理-企业通讯录" transform="translate(-20.000000, -497.000000)"><g id="编组-5备份" transform="translate(20.000000, 497.000000)"><rect id="矩形备份-3" x="0" y="0" width="14" height="14"></rect><path class="_svg-icon" d="M7.5,0.288675135 L12.5621778,3.21132487 C12.8715789,3.38995766 13.0621778,3.72008468 13.0621778,4.07735027 L13.0621778,9.92264973 C13.0621778,10.2799153 12.8715789,10.6100423 12.5621778,10.7886751 L7.5,13.7113249 C7.19059892,13.8899577 6.80940108,13.8899577 6.5,13.7113249 L1.43782217,10.7886751 C1.1284211,10.6100423 0.937822174,10.2799153 0.937822174,9.92264973 L0.937822174,4.07735027 C0.937822174,3.72008468 1.1284211,3.38995766 1.43782217,3.21132487 L6.5,0.288675135 C6.80940108,0.11004234 7.19059892,0.11004234 7.5,0.288675135 Z M7,4.3 C5.50883118,4.3 4.3,5.50883118 4.3,7 C4.3,8.49116882 5.50883118,9.7 7,9.7 C8.49116882,9.7 9.7,8.49116882 9.7,7 C9.7,5.50883118 8.49116882,4.3 7,4.3 Z" id="形状结合" fill="#666666"></path></g></g></g></svg>
\ No newline at end of file
src/views/components/svg-icon/image.ts 0 → 100644
const manager = '<?xml version="1.0" encoding="UTF-8"?><svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>编组 11</title><g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="账号管理-企业通讯录" class="_svg-icon" transform="translate(-20.000000, -97.000000)" fill="#666666" fill-rule="nonzero"><g id="编组-11" transform="translate(20.000000, 97.000000)"><g id="编组"><path d="M6.50000158,0 C8.23250158,0 9.65000158,1.4175 9.65000158,3.15 L9.65000158,3.15 L9.65000158,4.55000001 C9.65000158,5.76800001 8.95000159,6.82850001 7.93150159,7.34999999 L7.93150159,7.34999999 L11.1340016,8.05 C12.1035016,8.25300001 12.8000016,9.1105 12.8000016,10.1045 L12.8000016,10.1045 L12.8000016,12.5 C12.8000016,13.3284271 12.1284287,14 11.3000016,14 L11.3000016,14 L1.70000023,14 C0.871573102,14 0.200000226,13.3284271 0.200000226,12.5 L0.200000226,12.5 L0.200000226,10.1045 C0.199542069,9.11183651 0.894657361,8.25462501 1.86600159,8.05 L1.86600159,8.05 L5.06850159,7.34999999 C4.05000159,6.82850001 3.35000159,5.76800001 3.35000159,4.55000001 L3.35000159,4.55000001 L3.35000159,3.15 C3.35000159,1.4175 4.76750159,0 6.50000158,0 Z M13.3042616,5.5942802 C13.5941818,5.5942802 13.8282137,5.82831213 13.8282137,6.11823229 C13.8282137,6.40815246 13.5941818,6.64218439 13.3042616,6.64218439 L13.3042616,6.64218439 L11.2084532,6.64218439 C10.918533,6.64218439 10.6845011,6.40815246 10.6845011,6.11823229 C10.6845011,5.82831213 10.918533,5.5942802 11.2084532,5.5942802 L11.2084532,5.5942802 Z M13.3042616,3.49847181 C13.5941818,3.49847181 13.8282137,3.73250374 13.8282137,4.02242391 C13.8282137,4.31234407 13.5941818,4.546376 13.3042616,4.546376 L13.3042616,4.546376 L11.2084532,4.546376 C10.918533,4.546376 10.6845011,4.31234407 10.6845011,4.02242391 C10.6845011,3.73250374 10.918533,3.49847181 11.2084532,3.49847181 L11.2084532,3.49847181 Z M13.3042616,1.40266343 C13.5941818,1.40266343 13.8282137,1.63669536 13.8282137,1.92661552 C13.8282137,2.21653569 13.5941818,2.45056762 13.3042616,2.45056762 L13.3042616,2.45056762 L11.2084532,2.45056762 C10.918533,2.45056762 10.6845011,2.21653569 10.6845011,1.92661552 C10.6845011,1.63669536 10.918533,1.40266343 11.2084532,1.40266343 L11.2084532,1.40266343 Z" id="形状结合"></path></g></g></g></g></svg>';
const application = '<?xml version="1.0" encoding="UTF-8"?><svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>编组 13备份</title><g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="账号管理-企业通讯录" transform="translate(-20.000000, -247.000000)" class="_svg-icon" fill="#666666" fill-rule="nonzero"><g id="编组-13备份" transform="translate(20.000000, 247.000000)"><g id="编组" transform="translate(0.000000, 0.800000)"><path d="M0.723121995,3.44245793 C1.1473107,3.41260517 1.51597055,3.7284405 1.55259916,4.15009014 L1.55360577,4.16289063 C1.73140024,6.68457031 3.06529447,8.31634615 5.67325721,9.16739784 L5.75267428,9.19296875 C6.07134916,9.29403546 6.28919772,9.58700421 6.29495192,9.91998197 L6.29507212,9.93348858 L6.29507212,11.8432392 C6.29507212,12.2723257 5.94685998,12.6201923 5.51732272,12.6201923 C5.09208233,12.6201923 4.7465595,12.2792668 4.73967849,11.8560847 L4.73958834,11.8432392 L4.73957332,10.4862831 L4.71198918,10.4759615 C1.84840745,9.38939303 0.248212139,7.32313702 0.00919471154,4.36772837 L0.001953125,4.27208534 C-0.0282301683,3.84405048 0.294651442,3.47261118 0.723121995,3.44245793 Z M13.2191857,3.45748197 C12.794997,3.42762921 12.4263371,3.74346454 12.3897085,4.16511418 L12.3887019,4.17791466 C12.2109075,6.69959435 10.8770132,8.33137019 8.26905048,9.18242188 L8.18963341,9.20799279 C7.87095853,9.3090595 7.65310998,9.60202825 7.64735577,9.93500601 L7.64723558,9.94851262 L7.64723558,11.8582632 C7.64723558,12.2873498 7.99544772,12.6352163 8.42498498,12.6352163 C8.85022536,12.6352163 9.1957482,12.2942909 9.20262921,11.8711088 L9.20271935,11.8582632 L9.20273437,10.5013071 L9.23031851,10.4909856 C12.0939002,9.40441707 13.6940956,7.33816106 13.933113,4.3827524 L13.9403546,4.28710938 C13.9705379,3.85907452 13.6476562,3.48763522 13.2191857,3.45748197 L13.2191857,3.45748197 Z M8.84502704,0 C10.1516827,0 11.1628606,0.99468149 11.1628606,2.2796875 C11.1628606,3.58700421 10.1759465,4.6801232 8.59932392,6.12789964 L8.48432993,6.2331881 L8.36732272,6.33975361 L8.30806791,6.39353966 L8.18808594,6.50211839 L8.06616587,6.61209435 L7.87971755,6.77982272 L7.55976562,7.06702224 L7.31397236,7.28375901 C7.10836839,7.46508413 6.80168269,7.46786358 6.59295373,7.2921274 L6.5832482,7.28375901 L6.33745493,7.06702224 L5.95489784,6.72354267 L5.83106971,6.61210938 L5.64891827,6.44765625 C5.62899289,6.42962679 5.60907602,6.41158793 5.58916767,6.39353966 L5.47115385,6.2863131 C5.45165264,6.26855469 5.43224159,6.25084135 5.41289063,6.2331881 L5.29789663,6.12789964 C3.72130409,4.68013822 2.734375,3.58700421 2.734375,2.2796875 C2.734375,0.99468149 3.74555288,0 5.05220853,0 C5.78970853,0 6.48479567,0.331550481 6.94861779,0.870477764 C7.41240986,0.331565505 8.10754207,0 8.84502704,0 Z" id="形状"></path></g></g></g></g></svg>';
const setting = '<?xml version="1.0" encoding="UTF-8"?><svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>编组 5备份</title><g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="账号管理-企业通讯录" transform="translate(-20.000000, -497.000000)"><g id="编组-5备份" transform="translate(20.000000, 497.000000)"><rect id="矩形备份-3" x="0" y="0" width="14" height="14"></rect><path class="_svg-icon" d="M7.5,0.288675135 L12.5621778,3.21132487 C12.8715789,3.38995766 13.0621778,3.72008468 13.0621778,4.07735027 L13.0621778,9.92264973 C13.0621778,10.2799153 12.8715789,10.6100423 12.5621778,10.7886751 L7.5,13.7113249 C7.19059892,13.8899577 6.80940108,13.8899577 6.5,13.7113249 L1.43782217,10.7886751 C1.1284211,10.6100423 0.937822174,10.2799153 0.937822174,9.92264973 L0.937822174,4.07735027 C0.937822174,3.72008468 1.1284211,3.38995766 1.43782217,3.21132487 L6.5,0.288675135 C6.80940108,0.11004234 7.19059892,0.11004234 7.5,0.288675135 Z M7,4.3 C5.50883118,4.3 4.3,5.50883118 4.3,7 C4.3,8.49116882 5.50883118,9.7 7,9.7 C8.49116882,9.7 9.7,8.49116882 9.7,7 C9.7,5.50883118 8.49116882,4.3 7,4.3 Z" id="形状结合" fill="#666666"></path></g></g></g></svg>';
export const svgicons = {
manager,
application,
setting,
};
src/views/components/svg-icon/svg-icon.vue 0 → 100644
<template>
<div
class="banner-icon d-flex justify-content-center"
v-html="val"
:class="{ selected: selected }"
></div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
@Component({ components: {} })
export default class BannerIcon extends Vue {
@Prop()
private val!: string;
@Prop()
private selected!: boolean;
}
</script>
<style lang="less" scoped>
@import "~@/css/variables.less";
/deep/ ._banner-icon {
fill: #aaaaaa;
}
.selected /deep/ ._banner-icon {
fill: #33cca6;
}
</style>
src/views/pages/aside-panels/aside-panels.vue
......@@ -15,7 +15,8 @@
:is="item.content ? 'el-submenu' : 'el-menu-item'"
>
<template slot="title">
<div class="menu-title">
<div class="menu-title d-flex align-items-center">
<SvgIcon :val="item.icon"></SvgIcon>
<!-- <img class="menu-title-icon" :src="item.icon" /> -->
<div class="menu-title-name">{{ item.title }}</div>
</div>
......@@ -40,6 +41,8 @@
import { RouterEventer } from "@/router/event-bus";
import { MetaHeader } from "@/router/meta-header";
import { Component, Vue } from "vue-property-decorator";
import SvgIcon from "@/views/components/svg-icon/svg-icon.vue";
import { svgicons } from "@/views/components/svg-icon/image";
const SEEEION_SUBMENUS_CACHE = "session-submenus-cache";
......@@ -52,22 +55,22 @@
matchUrl?: Direction[];
}
@Component({ components: {} })
@Component({ components: { SvgIcon } })
export default class Asidepanels extends Vue {
private defaultActive = MetaHeader.home;
private defaultOpeneds: string[] = [];
private linkLine = "-";
private items: Menus[] = [
{
key: Direction.Home,
title: MetaHeader.home,
direction: Direction.Home,
icon: "",
},
// {
// key: Direction.Home,
// title: MetaHeader.home,
// direction: Direction.Home,
// icon: "",
// },
{
key: MetaHeader.employManager.root,
title: MetaHeader.employManager.root,
icon: "",
icon: svgicons.manager,
content: [
{
key: Direction.AddressBook,
......@@ -84,7 +87,7 @@
{
key: MetaHeader.serviceManagement.root,
title: MetaHeader.serviceManagement.root,
icon: "",
icon: svgicons.application,
content: [
{
key: Direction.InvoiceTitles,
......@@ -96,7 +99,7 @@
{
key: MetaHeader.enterpriseManagement.root,
title: MetaHeader.enterpriseManagement.root,
icon: "",
icon: svgicons.setting,
content: [
{
key: Direction.EnterpriseInfo,
......@@ -194,6 +197,7 @@
border-right: 1px solid #e6e6e6;
/deep/ .aside-menu {
padding-top: 15px;
height: 100%;
border-right: 0px;
background-color: #fff;
......@@ -207,6 +211,33 @@
border-top: 0px;
border-bottom: 0px;
}
.menu-title {
svg {
margin-right: 8px;
position: relative;
top: -1px;
}
}
.el-submenu__title,
.el-menu-item {
font-size: 14px;
color: #222222;
user-select: none;
}
.el-menu-item {
&:focus,
&:hover,
&.is-active {
background-color: #f0f7fe;
}
}
.el-menu-item {
padding-left: 55px !important;
}
}
}
</style>
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 sign in to comment