侧边栏样式调整

front-vue/src/assets/iconfont/demo.css

@@ -0,0 +1,539 @@
+/* Logo 字体 */
+@font-face {
+  font-family: "iconfont logo";
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
+  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+}
+
+.logo {
+  font-family: "iconfont logo";
+  font-size: 160px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* tabs */
+.nav-tabs {
+  position: relative;
+}
+
+.nav-tabs .nav-more {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  height: 42px;
+  line-height: 42px;
+  color: #666;
+}
+
+#tabs {
+  border-bottom: 1px solid #eee;
+}
+
+#tabs li {
+  cursor: pointer;
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 16px;
+  border-bottom: 2px solid transparent;
+  position: relative;
+  z-index: 1;
+  margin-bottom: -1px;
+  color: #666;
+}
+
+
+#tabs .active {
+  border-bottom-color: #f00;
+  color: #222;
+}
+
+.tab-container .content {
+  display: none;
+}
+
+/* 页面布局 */
+.main {
+  padding: 30px 100px;
+  width: 960px;
+  margin: 0 auto;
+}
+
+.main .logo {
+  color: #333;
+  text-align: left;
+  margin-bottom: 30px;
+  line-height: 1;
+  height: 110px;
+  margin-top: -50px;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.main .logo a {
+  font-size: 160px;
+  color: #333;
+}
+
+.helps {
+  margin-top: 40px;
+}
+
+.helps pre {
+  padding: 20px;
+  margin: 10px 0;
+  border: solid 1px #e7e1cd;
+  background-color: #fffdef;
+  overflow: auto;
+}
+
+.icon_lists {
+  width: 100% !important;
+  overflow: hidden;
+  *zoom: 1;
+}
+
+.icon_lists li {
+  width: 100px;
+  margin-bottom: 10px;
+  margin-right: 20px;
+  text-align: center;
+  list-style: none !important;
+  cursor: default;
+}
+
+.icon_lists li .code-name {
+  line-height: 1.2;
+}
+
+.icon_lists .icon {
+  display: block;
+  height: 100px;
+  line-height: 100px;
+  font-size: 42px;
+  margin: 10px auto;
+  color: #333;
+  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
+  -moz-transition: font-size 0.25s linear, width 0.25s linear;
+  transition: font-size 0.25s linear, width 0.25s linear;
+}
+
+.icon_lists .icon:hover {
+  font-size: 100px;
+}
+
+.icon_lists .svg-icon {
+  /* 通过设置 font-size 来改变图标大小 */
+  width: 1em;
+  /* 图标和文字相邻时，垂直对齐 */
+  vertical-align: -0.15em;
+  /* 通过设置 color 来改变 SVG 的颜色/fill */
+  fill: currentColor;
+  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
+      normalize.css 中也包含这行 */
+  overflow: hidden;
+}
+
+.icon_lists li .name,
+.icon_lists li .code-name {
+  color: #666;
+}
+
+/* markdown 样式 */
+.markdown {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.8;
+}
+
+.highlight {
+  line-height: 1.5;
+}
+
+.markdown img {
+  vertical-align: middle;
+  max-width: 100%;
+}
+
+.markdown h1 {
+  color: #404040;
+  font-weight: 500;
+  line-height: 40px;
+  margin-bottom: 24px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+  color: #404040;
+  margin: 1.6em 0 0.6em 0;
+  font-weight: 500;
+  clear: both;
+}
+
+.markdown h1 {
+  font-size: 28px;
+}
+
+.markdown h2 {
+  font-size: 22px;
+}
+
+.markdown h3 {
+  font-size: 16px;
+}
+
+.markdown h4 {
+  font-size: 14px;
+}
+
+.markdown h5 {
+  font-size: 12px;
+}
+
+.markdown h6 {
+  font-size: 12px;
+}
+
+.markdown hr {
+  height: 1px;
+  border: 0;
+  background: #e9e9e9;
+  margin: 16px 0;
+  clear: both;
+}
+
+.markdown p {
+  margin: 1em 0;
+}
+
+.markdown>p,
+.markdown>blockquote,
+.markdown>.highlight,
+.markdown>ol,
+.markdown>ul {
+  width: 80%;
+}
+
+.markdown ul>li {
+  list-style: circle;
+}
+
+.markdown>ul li,
+.markdown blockquote ul>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown>ul li p,
+.markdown>ol li p {
+  margin: 0.6em 0;
+}
+
+.markdown ol>li {
+  list-style: decimal;
+}
+
+.markdown>ol li,
+.markdown blockquote ol>li {
+  margin-left: 20px;
+  padding-left: 4px;
+}
+
+.markdown code {
+  margin: 0 3px;
+  padding: 0 5px;
+  background: #eee;
+  border-radius: 3px;
+}
+
+.markdown strong,
+.markdown b {
+  font-weight: 600;
+}
+
+.markdown>table {
+  border-collapse: collapse;
+  border-spacing: 0px;
+  empty-cells: show;
+  border: 1px solid #e9e9e9;
+  width: 95%;
+  margin-bottom: 24px;
+}
+
+.markdown>table th {
+  white-space: nowrap;
+  color: #333;
+  font-weight: 600;
+}
+
+.markdown>table th,
+.markdown>table td {
+  border: 1px solid #e9e9e9;
+  padding: 8px 16px;
+  text-align: left;
+}
+
+.markdown>table th {
+  background: #F7F7F7;
+}
+
+.markdown blockquote {
+  font-size: 90%;
+  color: #999;
+  border-left: 4px solid #e9e9e9;
+  padding-left: 0.8em;
+  margin: 1em 0;
+}
+
+.markdown blockquote p {
+  margin: 0;
+}
+
+.markdown .anchor {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-left: 8px;
+}
+
+.markdown .waiting {
+  color: #ccc;
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+  opacity: 1;
+  display: inline-block;
+}
+
+.markdown>br,
+.markdown>p>br {
+  clear: both;
+}
+
+
+.hljs {
+  display: block;
+  background: white;
+  padding: 0.5em;
+  color: #333333;
+  overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+  color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+  color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+  color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+  color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+  color: #63a35c;
+}
+
+.hljs-tag {
+  color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #795da3;
+}
+
+.hljs-addition {
+  color: #55a532;
+  background-color: #eaffea;
+}
+
+.hljs-deletion {
+  color: #bd2c00;
+  background-color: #ffecec;
+}
+
+.hljs-link {
+  text-decoration: underline;
+}
+
+/* 代码高亮 */
+/* PrismJS 1.15.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
+/**
+ * prism.js default theme for JavaScript, CSS and HTML
+ * Based on dabblet (http://dabblet.com)
+ * @author Lea Verou
+ */
+code[class*="language-"],
+pre[class*="language-"] {
+  color: black;
+  background: none;
+  text-shadow: 0 1px white;
+  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  word-wrap: normal;
+  line-height: 1.5;
+
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+  text-shadow: none;
+  background: #b3d4fc;
+}
+
+@media print {
+
+  code[class*="language-"],
+  pre[class*="language-"] {
+    text-shadow: none;
+  }
+}
+
+/* Code blocks */
+pre[class*="language-"] {
+  padding: 1em;
+  margin: .5em 0;
+  overflow: auto;
+}
+
+:not(pre)>code[class*="language-"],
+pre[class*="language-"] {
+  background: #f5f2f0;
+}
+
+/* Inline code */
+:not(pre)>code[class*="language-"] {
+  padding: .1em;
+  border-radius: .3em;
+  white-space: normal;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: slategray;
+}
+
+.token.punctuation {
+  color: #999;
+}
+
+.namespace {
+  opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+  color: #905;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+  color: #690;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+  color: #9a6e3a;
+  background: hsla(0, 0%, 100%, .5);
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+  color: #07a;
+}
+
+.token.function,
+.token.class-name {
+  color: #DD4A68;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+  color: #e90;
+}
+
+.token.important,
+.token.bold {
+  font-weight: bold;
+}
+
+.token.italic {
+  font-style: italic;
+}
+
+.token.entity {
+  cursor: help;
+}

front-vue/src/assets/iconfont/iconfont.css

@@ -0,0 +1,699 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 2923698 */
+  src: url('iconfont.woff2?t=1636439926059') format('woff2'),
+       url('iconfont.woff?t=1636439926059') format('woff'),
+       url('iconfont.ttf?t=1636439926059') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-qiandai:before {
+  content: "\e6a9";
+}
+
+.icon-qiandai1:before {
+  content: "\e6aa";
+}
+
+.icon-chaojiwangyinpiliangzhuanzhang:before {
+  content: "\e6ab";
+}
+
+.icon-kuahangzhanghupiliangzhuanzhangchaxun:before {
+  content: "\e6ac";
+}
+
+.icon-qiandai2:before {
+  content: "\e70f";
+}
+
+.icon-qiandai3:before {
+  content: "\e7b9";
+}
+
+.icon-zhuanzhang:before {
+  content: "\fb14";
+}
+
+.icon-zhuanzhang1:before {
+  content: "\e6ad";
+}
+
+.icon-qiandai4:before {
+  content: "\e6ae";
+}
+
+.icon-qianbao:before {
+  content: "\e6a5";
+}
+
+.icon-fapiao:before {
+  content: "\e6a6";
+}
+
+.icon-fapiaoguanli:before {
+  content: "\e6a7";
+}
+
+.icon-fapiaoguanli1:before {
+  content: "\e70b";
+}
+
+.icon-qianbao1:before {
+  content: "\e6a8";
+}
+
+.icon-gongyinglian:before {
+  content: "\e6a3";
+}
+
+.icon-gongyinglianguanli:before {
+  content: "\e600";
+}
+
+.icon-gongyinglian1:before {
+  content: "\e6a4";
+}
+
+.icon-payslip:before {
+  content: "\e612";
+}
+
+.icon-payslipManage:before {
+  content: "\e613";
+}
+
+.icon-payroll:before {
+  content: "\e614";
+}
+
+.icon-peixunManage:before {
+  content: "\e615";
+}
+
+.icon-online:before {
+  content: "\e616";
+}
+
+.icon-pdf:before {
+  content: "\e617";
+}
+
+.icon-partake:before {
+  content: "\e618";
+}
+
+.icon-project:before {
+  content: "\e619";
+}
+
+.icon-peixunType:before {
+  content: "\e61a";
+}
+
+.icon-password:before {
+  content: "\e61b";
+}
+
+.icon-postCode:before {
+  content: "\e61c";
+}
+
+.icon-phone:before {
+  content: "\e61d";
+}
+
+.icon-rate:before {
+  content: "\e61e";
+}
+
+.icon-radio:before {
+  content: "\e61f";
+}
+
+.icon-personChange:before {
+  content: "\e620";
+}
+
+.icon-question:before {
+  content: "\e621";
+}
+
+.icon-people:before {
+  content: "\e622";
+}
+
+.icon-salary:before {
+  content: "\e623";
+}
+
+.icon-select:before {
+  content: "\e624";
+}
+
+.icon-slider:before {
+  content: "\e625";
+}
+
+.icon-ShenPi:before {
+  content: "\e626";
+}
+
+.icon-size:before {
+  content: "\e627";
+}
+
+.icon-post:before {
+  content: "\e628";
+}
+
+.icon-subject:before {
+  content: "\e629";
+}
+
+.icon-resume:before {
+  content: "\e62a";
+}
+
+.icon-peoples:before {
+  content: "\e62b";
+}
+
+.icon-star:before {
+  content: "\e62c";
+}
+
+.icon-ShouFuKuan:before {
+  content: "\e62d";
+}
+
+.icon-textarea:before {
+  content: "\e62e";
+}
+
+.icon-skill:before {
+  content: "\e62f";
+}
+
+.icon-server:before {
+  content: "\e630";
+}
+
+.icon-qq:before {
+  content: "\e631";
+}
+
+.icon-revenueCode:before {
+  content: "\e632";
+}
+
+.icon-swagger:before {
+  content: "\e633";
+}
+
+.icon-special:before {
+  content: "\e634";
+}
+
+.icon-ShouYe:before {
+  content: "\e635";
+}
+
+.icon-tax:before {
+  content: "\e636";
+}
+
+.icon-row:before {
+  content: "\e637";
+}
+
+.icon-proType:before {
+  content: "\e638";
+}
+
+.icon-sentinel:before {
+  content: "\e639";
+}
+
+.icon-tree:before {
+  content: "\e63a";
+}
+
+.icon-time:before {
+  content: "\e63b";
+}
+
+.icon-salaryStaff:before {
+  content: "\e63c";
+}
+
+.icon-tab:before {
+  content: "\e63d";
+}
+
+.icon-shenhe:before {
+  content: "\e63e";
+}
+
+.icon-switch:before {
+  content: "\e63f";
+}
+
+.icon-ShuJuCangKu:before {
+  content: "\e640";
+}
+
+.icon-upload:before {
+  content: "\e641";
+}
+
+.icon-shouru:before {
+  content: "\e642";
+}
+
+.icon-search:before {
+  content: "\e643";
+}
+
+.icon-shangji:before {
+  content: "\e644";
+}
+
+.icon-wechat:before {
+  content: "\e645";
+}
+
+.icon-a-404:before {
+  content: "\e646";
+}
+
+.icon-shopping:before {
+  content: "\e647";
+}
+
+.icon-table:before {
+  content: "\e648";
+}
+
+.icon-bug:before {
+  content: "\e649";
+}
+
+.icon-checkbox:before {
+  content: "\e64a";
+}
+
+.icon-transfer:before {
+  content: "\e64b";
+}
+
+.icon-taxTotal:before {
+  content: "\e64c";
+}
+
+.icon-week:before {
+  content: "\e64d";
+}
+
+.icon-build:before {
+  content: "\e64e";
+}
+
+.icon-clipboard:before {
+  content: "\e64f";
+}
+
+.icon-total:before {
+  content: "\e650";
+}
+
+.icon-user:before {
+  content: "\e651";
+}
+
+.icon-theme:before {
+  content: "\e652";
+}
+
+.icon-tree-table:before {
+  content: "\e653";
+}
+
+.icon-company:before {
+  content: "\e654";
+}
+
+.icon-client:before {
+  content: "\e655";
+}
+
+.icon-time-range:before {
+  content: "\e656";
+}
+
+.icon-yujing:before {
+  content: "\e657";
+}
+
+.icon-tool:before {
+  content: "\e658";
+}
+
+.icon-customer:before {
+  content: "\e659";
+}
+
+.icon-dangAn:before {
+  content: "\e65a";
+}
+
+.icon-account:before {
+  content: "\e65b";
+}
+
+.icon-chart:before {
+  content: "\e65c";
+}
+
+.icon-drag:before {
+  content: "\e65d";
+}
+
+.icon-component:before {
+  content: "\e65e";
+}
+
+.icon-dayLog:before {
+  content: "\e65f";
+}
+
+.icon-code:before {
+  content: "\e660";
+}
+
+.icon-zhichu:before {
+  content: "\e661";
+}
+
+.icon-SocialFund:before {
+  content: "\e662";
+}
+
+.icon-zip:before {
+  content: "\e663";
+}
+
+.icon-dayLogs:before {
+  content: "\e664";
+}
+
+.icon-edit:before {
+  content: "\e665";
+}
+
+.icon-color:before {
+  content: "\e666";
+}
+
+.icon-yingshou:before {
+  content: "\e667";
+}
+
+.icon-education:before {
+  content: "\e668";
+}
+
+.icon-guide:before {
+  content: "\e669";
+}
+
+.icon-download:before {
+  content: "\e66a";
+}
+
+.icon-github:before {
+  content: "\e66b";
+}
+
+.icon-grade:before {
+  content: "\e66c";
+}
+
+.icon-druid:before {
+  content: "\e66d";
+}
+
+.icon-subsidy:before {
+  content: "\e66e";
+}
+
+.icon-eye-open:before {
+  content: "\e66f";
+}
+
+.icon-BaoXiao:before {
+  content: "\e670";
+}
+
+.icon-date:before {
+  content: "\e671";
+}
+
+.icon-validCode:before {
+  content: "\e672";
+}
+
+.icon-form:before {
+  content: "\e673";
+}
+
+.icon-ZhaoPinJianLi:before {
+  content: "\e674";
+}
+
+.icon-example:before {
+  content: "\e675";
+}
+
+.icon-job:before {
+  content: "\e676";
+}
+
+.icon-htType:before {
+  content: "\e677";
+}
+
+.icon-companyDept:before {
+  content: "\e678";
+}
+
+.icon-ht:before {
+  content: "\e679";
+}
+
+.icon-entry:before {
+  content: "\e67a";
+}
+
+.icon-cost:before {
+  content: "\e67b";
+}
+
+.icon-date-range:before {
+  content: "\e67c";
+}
+
+.icon-money:before {
+  content: "\e67d";
+}
+
+.icon-launch:before {
+  content: "\e67e";
+}
+
+.icon-approval:before {
+  content: "\e67f";
+}
+
+.icon-exit-fullscreen:before {
+  content: "\e680";
+}
+
+.icon-fullscreen:before {
+  content: "\e681";
+}
+
+.icon-cascader:before {
+  content: "\e682";
+}
+
+.icon-icon:before {
+  content: "\e683";
+}
+
+.icon-leaveTotal:before {
+  content: "\e684";
+}
+
+.icon-email:before {
+  content: "\e685";
+}
+
+.icon-button:before {
+  content: "\e686";
+}
+
+.icon-list:before {
+  content: "\e687";
+}
+
+.icon-message:before {
+  content: "\e688";
+}
+
+.icon-international:before {
+  content: "\e689";
+}
+
+.icon-logininfor:before {
+  content: "\e68a";
+}
+
+.icon-gsCompany:before {
+  content: "\e68b";
+}
+
+.icon-system:before {
+  content: "\e68c";
+}
+
+.icon-input:before {
+  content: "\e68d";
+}
+
+.icon-myResume:before {
+  content: "\e68e";
+}
+
+.icon-invoice:before {
+  content: "\e68f";
+}
+
+.icon-mulu:before {
+  content: "\e690";
+}
+
+.icon-excel:before {
+  content: "\e691";
+}
+
+.icon-link:before {
+  content: "\e692";
+}
+
+.icon-number:before {
+  content: "\e693";
+}
+
+.icon-nacos:before {
+  content: "\e694";
+}
+
+.icon-tmplate:before {
+  content: "\e695";
+}
+
+.icon-needHandle:before {
+  content: "\e696";
+}
+
+.icon-language:before {
+  content: "\e697";
+}
+
+.icon-dict:before {
+  content: "\e698";
+}
+
+.icon-nested:before {
+  content: "\e699";
+}
+
+.icon-need:before {
+  content: "\e69a";
+}
+
+.icon-lock:before {
+  content: "\e69b";
+}
+
+.icon-dashboard:before {
+  content: "\e69c";
+}
+
+.icon-log:before {
+  content: "\e69d";
+}
+
+.icon-monitor:before {
+  content: "\e69e";
+}
+
+.icon-leaveManage:before {
+  content: "\e69f";
+}
+
+.icon-eye:before {
+  content: "\e6a0";
+}
+
+.icon-documentation:before {
+  content: "\e6a1";
+}
+
+.icon-needPost:before {
+  content: "\e6a2";
+}
+
+.icon-zhaocaishouye:before {
+  content: "\e609";
+}
+
+.icon-zhaocairongziguanli:before {
+  content: "\e60a";
+}
+
+.icon-zhaocaishouxinguanli:before {
+  content: "\e60b";
+}
+
+.icon-zhaocairongxinguanli:before {
+  content: "\e60c";
+}
+
+.icon-zhaocaiwodelianshu:before {
+  content: "\e60d";
+}
+
+.icon-zhaocaifeiyongguanli:before {
+  content: "\e60e";
+}
+
+.icon-zhaocaixitongguanli:before {
+  content: "\e60f";
+}
+
+.icon-zhaocaihuankuanguanli:before {
+  content: "\e610";
+}
+
+.icon-zhaocaiwanglaizhangkuan:before {
+  content: "\e611";
+}
+

front-vue/src/assets/styles/huyi.scss

@@ -59,7 +59,7 @@
   margin-right: 20px;
 }
 .mb20 {
-  margin-bottom: 20px;
+  margin-bottom: 20px !important;
 }
 .m20 {
   margin-left: 20px;

front-vue/src/assets/styles/sidebar.scss

@@ -21,10 +21,8 @@
     left: 0;
     z-index: 1001;
     overflow: hidden;
-    -webkit-box-shadow: 2px 0 6px rgba(0,21,41,.35);
-    box-shadow: 2px 0 6px rgba(0,21,41,.35);
+    submenu-title-noDropdown // reset element-ui css
 
-    // reset element-ui css
     .horizontal-collapse-transition {
       transition: 0s width ease-in-out, 0s padding-left ease-in-out, 0s padding-right ease-in-out;
     }
@@ -51,14 +49,29 @@
       display: none;
     }
 
+    .el-submenu.is-opened,
+    .el-submenu.is-opened .el-menu {
+      background-color: #EBF3FF;
+    }
+
     a {
       display: inline-block;
       width: 100%;
       overflow: hidden;
+
+      &:hover {
+        li span {
+          color: #ffffff;
+        }
+      }
     }
 
-    .svg-icon {
+    .iconfont {
+      width: 16px;
+      height: 16px;
       margin-right: 16px;
+      font-size: 16px;
+      vertical-align: middle;
     }
 
     .el-menu {
@@ -67,30 +80,45 @@
       width: 100% !important;
     }
 
-    .el-menu-item, .el-submenu__title {
+    .el-submenu__title:hover>span {
+      color: #ffffff;
+    }
+
+    .el-submenu.is-active,
+    .el-menu-item.is-active {
+      span {
+        font-weight: 500;
+      }
+    }
+
+    .el-submenu__title,
+    .el-menu-item {
+      padding-left: 38px !important;
+      font-family: PingFangSC-Medium, PingFang SC;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       white-space: nowrap !important;
     }
 
     // menu hover
+
     .submenu-title-noDropdown,
     .el-submenu__title {
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        background-color: $subMenuHover !important;
       }
     }
 
-    & .theme-dark .is-active > .el-submenu__title {
-      color: $subMenuActiveText !important;
-    }
-
     & .nest-menu .el-submenu>.el-submenu__title,
     & .el-submenu .el-menu-item {
       min-width: $sideBarWidth !important;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.06) !important;
+        li span {
+          color: #ffffff;
+        }
+
+        background-color: $subMenuHover !important;
       }
     }
 
@@ -121,7 +149,7 @@
       .el-tooltip {
         padding: 0 !important;
 
-        .svg-icon {
+        .iconfont {
           margin-left: 20px;
         }
       }
@@ -133,7 +161,7 @@
       &>.el-submenu__title {
         padding: 0 !important;
 
-        .svg-icon {
+        .iconfont {
           margin-left: 20px;
         }
 
@@ -194,7 +222,10 @@
 // when menu collapsed
 .el-menu--vertical {
   &>.el-menu {
-    .svg-icon {
+    .iconfont {
+      width: 16px;
+      height: 16px;
+      font-size: 16px;
       margin-right: 16px;
     }
   }
@@ -202,8 +233,11 @@
   .nest-menu .el-submenu>.el-submenu__title,
   .el-menu-item {
     &:hover {
-      // you can use $subMenuHover
-      background-color: rgba(0, 0, 0, 0.06) !important;
+      li span {
+        color: #ffffff;
+      }
+
+      background-color: $subMenuHover !important;
     }
   }
 

front-vue/src/assets/styles/variables.scss

@@ -23,9 +23,9 @@ $menuLightHover:#f0f1f5;
 $sidebarLightTitle: #001529;
 
 $subMenuBg:#4280f2;//三级菜单背景颜色
-$subMenuHover:#308EEE;
+$subMenuHover:#4280f2;
 
-$sideBarWidth: 200px;
+$sideBarWidth: 215px;
 
 
 
@@ -45,6 +45,6 @@ $sideBarWidth: 200px;
   sideBarWidth: $sideBarWidth;
   sidebarTitle: $sidebarTitle;
   sidebarLightTitle: $sidebarLightTitle;
- 
-  
+
+
 }

front-vue/src/components/IconSelect/index.vue

@@ -5,27 +5,28 @@
       <i slot="suffix" class="el-icon-search el-input__icon" />
     </el-input>
     <div class="icon-list">
-      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item)">
-        <svg-icon :icon-class="item" style="height: 30px;width: 16px;" />
-        <span>{{ item }}</span>
+      <div v-for="(item, index) in iconList" :key="index" @click="selectedIcon(item.font_class)">
+        <span class="iconfont" :class="'icon-' + item.font_class"></span>
+        <span>{{ item.name }}</span>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import icons from './requireIcons'
+import icons from '@/assets/iconfont/iconfont.json'
+console.log(icons)
 export default {
   name: 'IconSelect',
   data() {
     return {
       name: '',
-      iconList: icons
+      iconList: icons.glyphs
     }
   },
   methods: {
     filterIcons() {
-      this.iconList = icons
+      this.iconList = icons.glyphs
       if (this.name) {
         this.iconList = this.iconList.filter(item => item.includes(this.name))
       }
@@ -36,7 +37,7 @@ export default {
     },
     reset() {
       this.name = ''
-      this.iconList = icons
+      this.iconList = icons.glyphs
     }
   }
 }

front-vue/src/components/SvgIcon/index.vue

@@ -58,4 +58,8 @@ export default {
   mask-size: cover!important;
   display: inline-block;
 }
+use path#icon-rx{
+  stroke: red;
+  fill: red;
+}
 </style>

front-vue/src/layout/components/Sidebar/Item.vue

@@ -17,7 +17,7 @@ export default {
     const vnodes = []
 
     if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
+      vnodes.push(<span class={("iconfont icon-" + icon)}></span>)
     }
 
     if (title) {

front-vue/src/layout/components/Sidebar/index.vue

@@ -8,10 +8,12 @@
                 :unique-opened="true"
                 :active-text-color="settings.theme"
                 :collapse-transition="false"
+                @select="selectHandle"
                 mode="vertical"
             >
                 <sidebar-item
                     v-for="(route, index) in permission_routes"
+                    :selectIndex="selectIndex"
                     :key="route.path  + index"
                     :item="route"
                     :base-path="'/' + route.path"
@@ -32,7 +34,8 @@ export default {
     data () {
         return {
             children: [],
-            basepath: ""
+            basepath: "",
+            selectIndex: ""
         }
     },
     computed: {
@@ -62,6 +65,12 @@ export default {
             this.children = data.children
             this.basepath = data.basepath
         })
+    },
+    methods: {
+      selectHandle (index, indexpath) {
+        this.selectIndex = index
+        console.log(index, indexpath)
+      }
     }
 };
 </script>

front-vue/src/main.js

@@ -14,6 +14,7 @@ import permission from './directive/permission'
 import { download } from '@/utils/request'
 
 import './assets/icons' // icon
+import './assets/iconfont/iconfont.css' // 导航栏菜单图标
 import './permission' // permission control
 import { getDicts } from "@/api/system/dict/data";
 import { getConfigKey } from "@/api/system/config";

front-vue/src/views/home.vue

@@ -8,7 +8,7 @@
             <div class="zap-home__title">平台数据统计</div>
             <el-row :gutter="20">
                 <!-- 第一行 -->
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">入驻企业总数</div>
                         <div class="zap-card__wrap zap-card__blue">
@@ -17,7 +17,7 @@
                         </div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">入驻核心企业数</div>
                         <div class="zap-card__wrap zap-card__pink">
@@ -26,7 +26,7 @@
                         </div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">入驻供应商</div>
                         <div class="zap-card__wrap zap-card__gold">
@@ -36,7 +36,7 @@
                     </div>
                 </el-col>
                 <!-- 第二行 -->
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">平台总授信额度</div>
                         <div class="zap-card__wrap zap-card__gold">
@@ -45,7 +45,7 @@
                         </div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">平台可用授信额度</div>
                         <div class="zap-card__wrap zap-card__pink">
@@ -54,7 +54,7 @@
                         </div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">平台放款金额</div>
                         <div class="zap-card__wrap zap-card__pink">
@@ -64,7 +64,7 @@
                     </div>
                 </el-col>
                 <!-- 第三行 -->
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">发起融资业务</div>
                         <div class="zap-card__wrap zap-card__blue">
@@ -73,7 +73,7 @@
                         </div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">平台开立融信</div>
                         <div class="zap-card__wrap zap-card__gold">
@@ -82,7 +82,7 @@
                         </div>
                     </div>
                 </el-col>
-                <el-col :xs="24" :sm="12" :md="8" :lg="8">
+                <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
                     <div class="zap-card">
                         <div class="zap-card__title">未融资额度</div>
                         <div class="zap-card__wrap zap-card__pink">
@@ -461,48 +461,45 @@
     <!-- 融资企业 -->
     <div v-if="company.scyType == '02'" class="zap-margin">
         <el-row :gutter="20">
-            <el-col :span="12">
-                <home-statistics type="rongxin" title="">
-                    <el-row>
-                        <el-col :span="12">
-                            <div class="zap-card" @click="toCredit()">
-                                <div class="zap-card__title">持有融信额度(元)</div>
-                                <div class="zap-card__wrap zap-card__blue">
-                                    <span class="zap-card__num">{{handleInput(effectBalance)}}</span>
-                                </div>
-                            </div>
-                        </el-col>
-                        <el-col :span="12">
-                            <div class="zap-card" @click="toFinanceRecord()">
-                                <div class="zap-card__title">融资中额度(元)</div>
-                                <div class="zap-card__wrap zap-card__pink">
-                                    <span class="zap-card__num">{{handleInput(availableBalance)}}</span>
-                                </div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="12">
-                            <div class="zap-card" @click="toFinanceRecord()">
-                                <div class="zap-card__title">已融资额度(元)</div>
-                                <div class="zap-card__wrap zap-card__blue">
-                                    <span class="zap-card__num">{{handleInput(loanBalance)}}</span>
-                                </div>
-                            </div>
-                        </el-col>
-                        <el-col :span="12">
-                            <div class="zap-card" @click="toCredit()">
-                                <div class="zap-card__title">即将到期融资额度(30天)(元)</div>
-                                <div class="zap-card__wrap zap-card__pink">
-                                    <span class="zap-card__num">{{handleInput(expiredBalance)}}</span>
-                                </div>
-                            </div>
-                        </el-col>
-                    </el-row>
-                </home-statistics>
+            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
+                <div class="zap-card" @click="toCredit()">
+                    <div class="zap-card__title">持有融信额度</div>
+                    <div class="zap-card__wrap zap-card__blue">
+                        <span class="zap-card__num">{{handleInput(effectBalance)}}</span>
+                        <span class="zap-card__unit">元</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
+                <div class="zap-card" @click="toFinanceRecord()">
+                    <div class="zap-card__title">融资中额度</div>
+                    <div class="zap-card__wrap zap-card__pink">
+                        <span class="zap-card__num">{{handleInput(availableBalance)}}</span>
+                        <span class="zap-card__unit">元</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
+
+                <div class="zap-card" @click="toFinanceRecord()">
+                    <div class="zap-card__title">已融资额度</div>
+                    <div class="zap-card__wrap zap-card__blue">
+                        <span class="zap-card__num">{{handleInput(loanBalance)}}</span>
+                        <span class="zap-card__unit">元</span>
+                    </div>
+                </div>
+            </el-col>
+            <el-col class="mb20" :xs="24" :sm="12" :md="8" :lg="8">
+                <div class="zap-card" @click="toCredit()">
+                    <div class="zap-card__title">即将到期融资额度(30天)</div>
+                    <div class="zap-card__wrap zap-card__pink">
+                        <span class="zap-card__num">{{handleInput(expiredBalance)}}</span>
+                        <span class="zap-card__unit">元</span>
+                    </div>
+                </div>
             </el-col>
         </el-row>
-        <div class="zap-form mt20">
+        <div class="zap-form">
             <el-tabs v-model="activeName">
                 <el-tab-pane label="我的待办" name="first" style="height:400px">
                     <el-table :data="workList" :show-header="false">
@@ -1971,6 +1968,7 @@ export default {
 
     .el-table th.el-table__cell.is-leaf,
     .el-table td.el-table__cell {
+        text-align: left;
         border-bottom: 1px dashed #999999;
     }
 
@@ -2000,4 +1998,8 @@ export default {
         background-color: #fff;
     }
 }
+
+.zap-home__main .mb20 {
+    margin-bottom: 20px !important;
+}
 </style>

front-vue/src/views/system/menu/index.vue

@@ -1,514 +1,476 @@
 <template>
-  <div class="app-container">
-     <el-card class="fiche">
-          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList">收起</right-toolbar>
-          <span style="margin-bottom: 10px;color:#333333;font:14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial,sans-serif">所选条件:</span>
-         <div  style="float: right;margin-right:1%">
-            <el-button type="cyan"  icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"  style="float: ;">重置</el-button>
-         </div>
-         <hr  style="margin-top: 16px;">
-    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
-      <el-form-item label="菜单名称" prop="menuName">
-        <el-input
-          v-model="queryParams.menuName"
-          placeholder="请输入菜单名称"
-          clearable
-          size="small"
-          @keyup.enter.native="handleQuery"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
-          <el-option
-            v-for="dict in statusOptions"
-            :key="dict.dictValue"
-            :label="dict.dictLabel"
-            :value="dict.dictValue"
-          />
-        </el-select>
-      </el-form-item>
+<div class="app-container zap-main">
+    <search-bar :hiddenSetting="true" @query="handleQuery" @reset="resetQuery">
+        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
+            <el-form-item label="菜单名称" prop="menuName">
+                <el-input v-model="queryParams.menuName" placeholder="请输入菜单名称" clearable size="small" @keyup.enter.native="handleQuery" />
+            </el-form-item>
+            <el-form-item label="状态" prop="status">
+                <el-select v-model="queryParams.status" placeholder="菜单状态" clearable size="small">
+                    <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+                </el-select>
+            </el-form-item>
 
-    </el-form>
-    </el-card>
+        </el-form>
+    </search-bar>
 
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['system:menu:add']"
-        >新增</el-button>
-      </el-col>
+        <el-col :span="1.5">
+            <el-button type="primary" icon="el-icon-plus" @click="handleAdd" v-hasPermi="['system:menu:add']">新增</el-button>
+        </el-col>
 
     </el-row>
 
-    <el-table
-      v-loading="loading"
-      :data="menuList"
-      row-key="menuId"
-      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
-    >
-      <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
-      <el-table-column prop="icon" label="图标" align="center" width="100">
-        <template slot-scope="scope">
-          <svg-icon :icon-class="scope.row.icon" />
-        </template>
-      </el-table-column>
-      <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
-      <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
-      <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column>
-      <el-table-column label="创建时间" align="center" prop="createTime">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.createTime) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:menu:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-plus"
-            @click="handleAdd(scope.row)"
-            v-hasPermi="['system:menu:add']"
-          >新增</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['system:menu:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+    <el-row class="zap-form">
+        <el-table v-loading="loading" :data="menuList" row-key="menuId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+            <el-table-column prop="menuName" label="菜单名称" :show-overflow-tooltip="true" width="160"></el-table-column>
+            <el-table-column prop="icon" label="图标" align="center" width="100">
+                <template slot-scope="scope">
+                    <span class="iconfont" :class="'icon-' + scope.row.icon"></span>
+                </template>
+            </el-table-column>
+            <el-table-column prop="orderNum" label="排序" width="60"></el-table-column>
+            <el-table-column prop="perms" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="component" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
+            <el-table-column prop="status" label="状态" :formatter="statusFormat" width="80"></el-table-column>
+            <el-table-column label="创建时间" align="center" prop="createTime">
+                <template slot-scope="scope">
+                    <span>{{ parseTime(scope.row.createTime) }}</span>
+                </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+                <template slot-scope="scope">
+                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:menu:edit']">修改</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-plus" @click="handleAdd(scope.row)" v-hasPermi="['system:menu:add']">新增</el-button>
+                    <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['system:menu:remove']">删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+    </el-row>
 
     <!-- 添加或修改菜单对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-row>
-          <el-col :span="24">
-            <el-form-item label="上级菜单">
-              <treeselect
-                v-model="form.parentId"
-                :options="menuOptions"
-                :normalizer="normalizer"
-                :show-count="true"
-                placeholder="选择上级菜单"
-              />
-            </el-form-item>
-          </el-col>
-          <el-col :span="24">
-            <el-form-item label="菜单类型" prop="menuType">
-              <el-radio-group v-model="form.menuType">
-                <el-radio label="M">目录</el-radio>
-                <el-radio label="C">菜单</el-radio>
-                <el-radio label="F">按钮</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="24"  v-if="form.menuType != 'F'" >
-            <el-form-item label="菜单图标">
-              <el-popover
-                placement="bottom-start"
-                width="460"
-                trigger="click"
-                @show="$refs['iconSelect'].reset()"
-              >
-                <IconSelect ref="iconSelect" @selected="selected" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                  <svg-icon
-                    v-if="form.icon"
-                    slot="prefix"
-                    :icon-class="form.icon"
-                    class="el-input__icon"
-                    style="height: 32px;width: 16px;"
-                  />
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                </el-input>
-              </el-popover>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="菜单名称" prop="menuName">
-              <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="显示排序" prop="orderNum">
-              <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item label="是否外链">
-              <el-radio-group v-model="form.isFrame">
-                <el-radio label="0">是</el-radio>
-                <el-radio label="1">否</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item label="路由地址" prop="path">
-              <el-input v-model="form.path" placeholder="请输入路由地址" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="组件路径" prop="component">
-              <el-input v-model="form.component" placeholder="请输入组件路径" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" v-if="form.menuType != 'M'">
-            <el-form-item label="权限标识">
-              <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item label="显示状态">
-              <el-radio-group v-model="form.visible">
-                <el-radio
-                  v-for="dict in visibleOptions"
-                  :key="dict.dictValue"
-                  :label="dict.dictValue"
-                >{{dict.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" v-if="form.menuType != 'F'">
-            <el-form-item label="菜单状态">
-              <el-radio-group v-model="form.status">
-                <el-radio
-                  v-for="dict in statusOptions"
-                  :key="dict.dictValue"
-                  :label="dict.dictValue"
-                >{{dict.dictLabel}}</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="12" v-if="form.menuType == 'C'">
-            <el-form-item label="是否缓存">
-              <el-radio-group v-model="form.isCache">
-                <el-radio label="0">缓存</el-radio>
-                <el-radio label="1">不缓存</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
+        <el-row class="zap-form">
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="上级菜单">
+                            <treeselect v-model="form.parentId" :options="menuOptions" :normalizer="normalizer" :show-count="true" placeholder="选择上级菜单" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24">
+                        <el-form-item label="菜单类型" prop="menuType">
+                            <el-radio-group v-model="form.menuType">
+                                <el-radio label="M">目录</el-radio>
+                                <el-radio label="C">菜单</el-radio>
+                                <el-radio label="F">按钮</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="24" v-if="form.menuType != 'F'">
+                        <el-form-item label="菜单图标">
+                            <el-popover placement="bottom-start" width="460" trigger="click" @show="$refs['iconSelect'].reset()">
+                                <IconSelect ref="iconSelect" @selected="selected" />
+                                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
+                                    <span v-if="form.icon" slot="prefix" class="iconfont" :class="'icon-' + form.icon"></span>
+                                    <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+                                </el-input>
+                            </el-popover>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="菜单名称" prop="menuName">
+                            <el-input v-model="form.menuName" placeholder="请输入菜单名称" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="显示排序" prop="orderNum">
+                            <el-input-number v-model="form.orderNum" controls-position="right" :min="0" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="form.menuType != 'F'">
+                        <el-form-item label="是否外链">
+                            <el-radio-group v-model="form.isFrame">
+                                <el-radio label="0">是</el-radio>
+                                <el-radio label="1">否</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="form.menuType != 'F'">
+                        <el-form-item label="路由地址" prop="path">
+                            <el-input v-model="form.path" placeholder="请输入路由地址" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12">
+                        <el-form-item label="组件路径" prop="component">
+                            <el-input v-model="form.component" placeholder="请输入组件路径" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="form.menuType != 'M'">
+                        <el-form-item label="权限标识">
+                            <el-input v-model="form.perms" placeholder="请权限标识" maxlength="50" />
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="form.menuType != 'F'">
+                        <el-form-item label="显示状态">
+                            <el-radio-group v-model="form.visible">
+                                <el-radio v-for="dict in visibleOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="form.menuType != 'F'">
+                        <el-form-item label="菜单状态">
+                            <el-radio-group v-model="form.status">
+                                <el-radio v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictValue">{{dict.dictLabel}}</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                    <el-col :span="12" v-if="form.menuType == 'C'">
+                        <el-form-item label="是否缓存">
+                            <el-radio-group v-model="form.isCache">
+                                <el-radio label="0">缓存</el-radio>
+                                <el-radio label="1">不缓存</el-radio>
+                            </el-radio-group>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
         </el-row>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-      <el-dialog :visible.sync="dialogVisible">
-        <img width="100%" :src="dialogImageUrl" alt="">
-      </el-dialog>
+        <div slot="footer" class="dialog-footer">
+            <el-button type="primary" @click="submitForm">确 定</el-button>
+            <el-button @click="cancel">取 消</el-button>
+        </div>
+        <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+        </el-dialog>
     </el-dialog>
-  </div>
+</div>
 </template>
 
 <script>
-import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
+import {
+    listMenu,
+    getMenu,
+    delMenu,
+    addMenu,
+    updateMenu
+} from "@/api/system/menu";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
-import { uploadFileNew } from "@/api/common/file";
+import {
+    uploadFileNew
+} from "@/api/common/file";
 export default {
-  name: "Menu",
-  components: { Treeselect, IconSelect },
-  data() {
-    return {
-      // 遮罩层
-      loading: true,
-      // 显示搜索条件
-      showSearch: true,
-      // 菜单表格树数据
-      menuList: [],
-      // 菜单树选项
-      menuOptions: [],
-      // 弹出层标题
-      title: "",
-      // 是否显示弹出层
-      open: false,
-      // 显示状态数据字典
-      visibleOptions: [],
-      // 菜单状态数据字典
-      statusOptions: [],
-      //app图标
-      fileList:[],
-      limitCountImg:1,
-      noneBtnImg:false,
-      dialogImageUrl: '',
-      dialogVisible: false,
-      showBtnImg:true,
-      // 查询参数
-      queryParams: {
-        menuName: undefined,
-        visible: undefined
-      },
-      // 表单参数
-      form: {},
-      // 表单校验
-      rules: {
-        menuName: [
-          { required: true, message: "菜单名称不能为空", trigger: "blur" }
-        ],
-        orderNum: [
-          { required: true, message: "菜单顺序不能为空", trigger: "blur" }
-        ],
-        path: [
-          { required: true, message: "路由地址不能为空", trigger: "blur" }
-        ]
-      }
-    };
-  },
-  created() {
-    this.getList();
-    this.getDicts("sys_show_hide").then(response => {
-      this.visibleOptions = response.data;
-    });
-    this.getDicts("sys_normal_disable").then(response => {
-      this.statusOptions = response.data;
-    });
-  },
-  methods: {
-    // 选择图标
-    selected(name) {
-      this.form.icon = name;
-    },
-    /** 查询菜单列表 */
-    getList() {
-      this.loading = true;
-      listMenu(this.queryParams).then(response => {
-        this.menuList = this.handleTree(response.data, "menuId");
-        this.loading = false;
-      });
-    },
-    /** 转换菜单数据结构 */
-    normalizer(node) {
-      if (node.children && !node.children.length) {
-        delete node.children;
-      }
-      return {
-        id: node.menuId,
-        label: node.menuName,
-        children: node.children
-      };
-    },
-    /** 查询菜单下拉树结构 */
-    getTreeselect() {
-      listMenu().then(response => {
-        this.menuOptions = [];
-        const menu = { menuId: 0, menuName: '主类目', children: [] };
-        menu.children = this.handleTree(response.data, "menuId");
-        this.menuOptions.push(menu);
-      });
-    },
-    // 显示状态字典翻译
-    visibleFormat(row, column) {
-      if (row.menuType == "F") {
-        return "";
-      }
-      return this.selectDictLabel(this.visibleOptions, row.visible);
-    },
-    // 菜单状态字典翻译
-    statusFormat(row, column) {
-      if (row.menuType == "F") {
-        return "";
-      }
-      return this.selectDictLabel(this.statusOptions, row.status);
-    },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        menuId: undefined,
-        parentId: 0,
-        menuName: undefined,
-        icon: undefined,
-        menuType: "M",
-        orderNum: undefined,
-        isFrame: "1",
-        isCache: "0",
-        visible: "0",
-        status: "0",
-        approval : "0"
-      };
-      this.resetForm("form");
-      this.fileList = [];
-      this.noneBtnImg = false;
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.getList();
+    name: "Menu",
+    components: {
+        Treeselect,
+        IconSelect
     },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 菜单表格树数据
+            menuList: [],
+            // 菜单树选项
+            menuOptions: [],
+            // 弹出层标题
+            title: "",
+            // 是否显示弹出层
+            open: false,
+            // 显示状态数据字典
+            visibleOptions: [],
+            // 菜单状态数据字典
+            statusOptions: [],
+            //app图标
+            fileList: [],
+            limitCountImg: 1,
+            noneBtnImg: false,
+            dialogImageUrl: '',
+            dialogVisible: false,
+            showBtnImg: true,
+            // 查询参数
+            queryParams: {
+                menuName: undefined,
+                visible: undefined
+            },
+            // 表单参数
+            form: {},
+            // 表单校验
+            rules: {
+                menuName: [{
+                    required: true,
+                    message: "菜单名称不能为空",
+                    trigger: "blur"
+                }],
+                orderNum: [{
+                    required: true,
+                    message: "菜单顺序不能为空",
+                    trigger: "blur"
+                }],
+                path: [{
+                    required: true,
+                    message: "路由地址不能为空",
+                    trigger: "blur"
+                }]
+            }
+        };
     },
-    /** 新增按钮操作 */
-    handleAdd(row) {
-      this.reset();
-      this.getTreeselect();
-      if (row != null && row.menuId) {
-        this.form.parentId = row.menuId;
-      } else {
-        this.form.parentId = 0;
-      }
-      this.open = true;
-      this.title = "添加菜单";
+    created() {
+        this.getList();
+        this.getDicts("sys_show_hide").then(response => {
+            this.visibleOptions = response.data;
+        });
+        this.getDicts("sys_normal_disable").then(response => {
+            this.statusOptions = response.data;
+        });
     },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      this.getTreeselect();
-      getMenu(row.menuId).then(response => {
-        this.form = response.data;
-        if(response.data.iconUrl){
-            this.fileList.push({name: "app图标",url:response.data.iconUrl});
-            this.noneBtnImg = true;
-        }else{
+    methods: {
+        // 选择图标
+        selected(name) {
+            this.form.icon = name;
+        },
+        /** 查询菜单列表 */
+        getList() {
+            this.loading = true;
+            listMenu(this.queryParams).then(response => {
+                this.menuList = this.handleTree(response.data, "menuId");
+                this.loading = false;
+            });
+        },
+        /** 转换菜单数据结构 */
+        normalizer(node) {
+            if (node.children && !node.children.length) {
+                delete node.children;
+            }
+            return {
+                id: node.menuId,
+                label: node.menuName,
+                children: node.children
+            };
+        },
+        /** 查询菜单下拉树结构 */
+        getTreeselect() {
+            listMenu().then(response => {
+                this.menuOptions = [];
+                const menu = {
+                    menuId: 0,
+                    menuName: '主类目',
+                    children: []
+                };
+                menu.children = this.handleTree(response.data, "menuId");
+                this.menuOptions.push(menu);
+            });
+        },
+        // 显示状态字典翻译
+        visibleFormat(row, column) {
+            if (row.menuType == "F") {
+                return "";
+            }
+            return this.selectDictLabel(this.visibleOptions, row.visible);
+        },
+        // 菜单状态字典翻译
+        statusFormat(row, column) {
+            if (row.menuType == "F") {
+                return "";
+            }
+            return this.selectDictLabel(this.statusOptions, row.status);
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                menuId: undefined,
+                parentId: 0,
+                menuName: undefined,
+                icon: undefined,
+                menuType: "M",
+                orderNum: undefined,
+                isFrame: "1",
+                isCache: "0",
+                visible: "0",
+                status: "0",
+                approval: "0"
+            };
+            this.resetForm("form");
+            this.fileList = [];
             this.noneBtnImg = false;
-        }
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 新增按钮操作 */
+        handleAdd(row) {
+            this.reset();
+            this.getTreeselect();
+            if (row != null && row.menuId) {
+                this.form.parentId = row.menuId;
+            } else {
+                this.form.parentId = 0;
+            }
+            this.open = true;
+            this.title = "添加菜单";
+        },
+        /** 修改按钮操作 */
+        handleUpdate(row) {
+            this.reset();
+            this.getTreeselect();
+            getMenu(row.menuId).then(response => {
+                this.form = response.data;
+                if (response.data.iconUrl) {
+                    this.fileList.push({
+                        name: "app图标",
+                        url: response.data.iconUrl
+                    });
+                    this.noneBtnImg = true;
+                } else {
+                    this.noneBtnImg = false;
+                }
 
-        this.open = true;
-        this.title = "修改菜单";
-      });
-    },
-    /** 提交按钮 */
-    submitForm: function() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          //文件不为空
-          if(this.fileList[0]){
-            this.form.iconUrl = this.fileList[0].url;
-          }
-          if (this.form.menuId != undefined) {
-            const loading = this.$loading({
-                lock: true,
-                text: "Loading",
-                spinner: "el-icon-loading",
-                background: "rgba(0, 0, 0, 0.7)",
-            })
-            updateMenu(this.form).then(response => {
-              loading.close();
-              this.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            }).catch((response)=>{
-              loading.close();
+                this.open = true;
+                this.title = "修改菜单";
             });
-          } else {
-            const loading = this.$loading({
-                lock: true,
-                text: "Loading",
-                spinner: "el-icon-loading",
-                background: "rgba(0, 0, 0, 0.7)",
-            })
-            addMenu(this.form).then(response => {
-              loading.close();
-              this.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            }).catch((response)=>{
-              loading.close();
+        },
+        /** 提交按钮 */
+        submitForm: function () {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    //文件不为空
+                    if (this.fileList[0]) {
+                        this.form.iconUrl = this.fileList[0].url;
+                    }
+                    if (this.form.menuId != undefined) {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: "Loading",
+                            spinner: "el-icon-loading",
+                            background: "rgba(0, 0, 0, 0.7)",
+                        })
+                        updateMenu(this.form).then(response => {
+                            loading.close();
+                            this.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        }).catch((response) => {
+                            loading.close();
+                        });
+                    } else {
+                        const loading = this.$loading({
+                            lock: true,
+                            text: "Loading",
+                            spinner: "el-icon-loading",
+                            background: "rgba(0, 0, 0, 0.7)",
+                        })
+                        addMenu(this.form).then(response => {
+                            loading.close();
+                            this.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        }).catch((response) => {
+                            loading.close();
+                        });
+                    }
+                }
             });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', "警告", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        }).then(function() {
-          return delMenu(row.menuId);
-        }).then(() => {
-          this.getList();
-          this.msgSuccess("删除成功");
-        })
-        .catch(() => {
-          this.$message({
-            type: "warning",
-            message: "已取消删除",
+        },
+        /** 删除按钮操作 */
+        handleDelete(row) {
+            this.$confirm('是否确认删除名称为"' + row.menuName + '"的数据项?', "警告", {
+                    confirmButtonText: "确定",
+                    cancelButtonText: "取消",
+                    type: "warning"
+                }).then(function () {
+                    return delMenu(row.menuId);
+                }).then(() => {
+                    this.getList();
+                    this.msgSuccess("删除成功");
+                })
+                .catch(() => {
+                    this.$message({
+                        type: "warning",
+                        message: "已取消删除",
 
-          });
-        });
-    },
-    /** 上传图片 */
-    submitUpload(){
-      this.$refs.upload.submit();
-    },
-    //文件移除提示
-    handleRemove(file, fileList) {
-      for(let i = 0;i < this.fileList.length;i++){
-        if(file.uid == this.fileList[i].uid){
-          this.fileList.splice(i, 1);
-          break;
-        }
-      }
-      this.noneBtnImg = fileList.length >= this.limitCountImg;
-    },
+                    });
+                });
+        },
+        /** 上传图片 */
+        submitUpload() {
+            this.$refs.upload.submit();
+        },
+        //文件移除提示
+        handleRemove(file, fileList) {
+            for (let i = 0; i < this.fileList.length; i++) {
+                if (file.uid == this.fileList[i].uid) {
+                    this.fileList.splice(i, 1);
+                    break;
+                }
+            }
+            this.noneBtnImg = fileList.length >= this.limitCountImg;
+        },
 
-    dealImgChange(file, fileList){
-           this.noneBtnImg = fileList.length >= this.limitCountImg;
-    },
+        dealImgChange(file, fileList) {
+            this.noneBtnImg = fileList.length >= this.limitCountImg;
+        },
 
-    handleExceed(files, fileList) {
-      this.$message.warning(`当前限制选择 1 个文件`);
-    },
-    handlePictureCardPreview(file) {
-        this.dialogImageUrl = file.url;
-        this.dialogVisible = true;
-      },
-    //手动上传文件触发
-    httpRequest(param) {
-      let fileObj = param.file // 相当于input里取得的files
-      let fd = new FormData()// FormData 对象
-      fd.append('file', fileObj)// 文件对象
-      fd.append('fileType','00')//文件类型
-      const loading = this.$loading({
-        lock: true,
-        text: 'Loading',
-        spinner: 'el-icon-loading',
-        background: 'rgba(0, 0, 0, 0.7)'
-      });
-      uploadFileNew(fd).then(response => {
-        if(response){
-          this.fileList.push({uid : response.fileId,url:response.fileUrl})
-          console.log(response.url)
-          setTimeout(() => {
-            loading.close();
-          }, 2000);
-        }
-      }).catch(response => {
-            loading.close();
-      })
-    },
-  }
+        handleExceed(files, fileList) {
+            this.$message.warning(`当前限制选择 1 个文件`);
+        },
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url;
+            this.dialogVisible = true;
+        },
+        //手动上传文件触发
+        httpRequest(param) {
+            let fileObj = param.file // 相当于input里取得的files
+            let fd = new FormData() // FormData 对象
+            fd.append('file', fileObj) // 文件对象
+            fd.append('fileType', '00') //文件类型
+            const loading = this.$loading({
+                lock: true,
+                text: 'Loading',
+                spinner: 'el-icon-loading',
+                background: 'rgba(0, 0, 0, 0.7)'
+            });
+            uploadFileNew(fd).then(response => {
+                if (response) {
+                    this.fileList.push({
+                        uid: response.fileId,
+                        url: response.fileUrl
+                    })
+                    console.log(response.url)
+                    setTimeout(() => {
+                        loading.close();
+                    }, 2000);
+                }
+            }).catch(response => {
+                loading.close();
+            })
+        },
+    }
 };
 </script>
+
 <style>
-.showUoload .el-upload--picture-card{
-  width:110px;
-  height:110px;
-  line-height:110px;
+.showUoload .el-upload--picture-card {
+    width: 110px;
+    height: 110px;
+    line-height: 110px;
 }
-.uoloadSty .el-upload--picture-card{
-  display:none;
+
+.uoloadSty .el-upload--picture-card {
+    display: none;
 }
 </style>