styles

package-lock.json

@@ -6512,8 +6512,7 @@
     },
     "js-yaml": {
       "version": "3.7.0",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
-      "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
+      "resolved": "",
       "dev": true,
       "requires": {
         "argparse": "^1.0.7",

package.json

@@ -94,7 +94,6 @@
     "file-loader": "1.1.5",
     "friendly-errors-webpack-plugin": "1.6.1",
     "html-webpack-plugin": "2.30.1",
-    "husky": "0.14.3",
     "lint-staged": "7.2.0",
     "node-notifier": "5.1.2",
     "node-sass": "^4.7.2",

src/styles/index.scss

@@ -5,7 +5,6 @@
 @import './sidebar.scss';
 @import './btn.scss';
 @import './reset.scss';
-
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
@@ -66,8 +65,6 @@ div:focus {
   outline: none;
 }
 
-
-
 .fr {
   float: right;
 }
@@ -115,11 +112,9 @@ code {
   line-height: 36px;
   font-size: 15px;
   font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
-
   a {
     color: #337ab7;
     cursor: pointer;
-
     &:hover {
       color: rgb(32, 160, 255);
     }
@@ -133,7 +128,6 @@ code {
   padding: 1rem;
   line-height: 1.6rem;
   word-spacing: .05rem;
-
   a {
     color: #42b983;
     font-weight: 600;
@@ -143,6 +137,9 @@ code {
 //main-container全局样式
 .app-container {
   padding: 20px;
+  background: #fff;
+  margin: 0 15px 15px 15px;
+  min-height: calc(100vh - 185px);
 }
 
 .components-container {
@@ -167,16 +164,13 @@ code {
   padding-right: 20px;
   transition: 600ms ease position;
   background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
-
   .subtitle {
     font-size: 20px;
     color: #fff;
   }
-
   &.draft {
     background: #d0d0d0;
   }
-
   &.deleted {
     background: #d0d0d0;
   }
@@ -186,7 +180,6 @@ code {
 .link-type:focus {
   color: #337ab7;
   cursor: pointer;
-
   &:hover {
     color: rgb(32, 160, 255);
   }
@@ -194,7 +187,6 @@ code {
 
 .filter-container {
   padding-bottom: 10px;
-
   .filter-item {
     display: inline-block;
     vertical-align: middle;
@@ -211,11 +203,9 @@ code {
   z-index: 1000 !important;
 }
 
-
 .DetailsTit {
   border-bottom: 1px #e5e5e5 solid;
   text-align: center;
-
   span {
     height: 50px;
     line-height: 50px;
@@ -226,7 +216,6 @@ code {
     margin: 0 auto;
     display: inline-block;
     font-weight: 700;
-
     &::before,
     &::after {
       content: '';
@@ -237,11 +226,9 @@ code {
       height: 2px;
       background: $main-color;
     }
-
     &::before {
       left: 10px;
     }
-
     &::after {
       right: 10px;
     }
@@ -259,26 +246,24 @@ code {
   @include box-sizing;
   @include display-flex;
   @include align-items-center;
-  @include justify-content-between;
-  // border-bottom: 1px #e6e6e6 dashed;
-
+  @include justify-content-between; // border-bottom: 1px #e6e6e6 dashed;
   ul {
     li {
       font-size: 15px;
       line-height: 30px;
-      label{
-        color:#34495e;
+      label {
+        color: #34495e;
       }
       .content {
         color: $main-color;
       }
-
       .unit {
         color: $font-color;
       }
     }
   }
 }
+
 .note {
   font-size: 14px;
   color: $pgh-color;
@@ -290,14 +275,181 @@ code {
   }
 }
 
-.el-dialog__body{
-  padding: 10px 20px !important;
+.el-dialog__body {
+  max-height: calc(100vh - 350px) !important;
+  overflow-y: scroll !important;
+  margin-right: 8px;
+  /* 针对缺省样式 (必须的) */
+  &::-webkit-scrollbar {
+    width: 6px;
+    height: 10px;
+  }
+  /* 滚动条的滑轨背景颜色 */
+  &::-webkit-scrollbar-track {
+    background-color: #fff;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+  }
+  /* 滑块颜色 */
+  &::-webkit-scrollbar-thumb {
+    background: #d7dce2;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+  }
+  /*内层轨道的颜色*/
+  &::-webkit-scrollbar-track-piece {
+    background-color: #fff;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+  }
+  /* 滑轨两头的监听按钮颜色 */
+  &::-webkit-scrollbar-button {
+    background-color: #eee;
+    width: 0;
+    height: 0;
+  }
+  /* 横向滚动条和纵向滚动条相交处尖角的颜色 */
+  &::-webkit-scrollbar-corner {
+    background-color: #eee;
+  }
 }
 
-.NoData{
+.NoData {
   width: 200px;
-  margin:  0 auto;
-  img{
+  margin: 0 auto;
+  img {
     width: 100%;
   }
 }
+
+.el-menu-item,
+.el-submenu__title {
+  height: 46px !important;
+  line-height: 46px !important;
+  padding: 0 15px !important;
+}
+
+.el-menu-item {
+  min-width: 0;
+}
+
+.position {
+  background: #f6f8f9;
+  padding: 10px 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 52px;
+}
+
+// 筛选全局样式
+.app-container {
+  .cell {
+    margin: 0px 0 12px 0;
+    display: flex;
+    align-items:center;
+    justify-content: flex-start;
+    box-sizing: border-box;
+    color: #333;
+    .el-button--primary{
+      margin-left: 6px;
+    }
+    .title {
+      width: 80px;
+      display: inline-block;
+      font-weight: normal;
+      color: #909399;
+      padding: 6px 0;
+      .name {
+        width: 60px;
+        text-align: justify;
+        text-justify: distribute-all-lines;
+        text-align-last: justify;
+        -moz-text-align-last: justify;
+        -webkit-text-align-last: justify;
+        display: inline-block;
+        font-size: 14px;
+      }
+    }
+    .time {
+      -webkit-box-flex: 1;
+      -ms-flex: 1;
+      flex: 1;
+      ul {
+        margin: 0;
+        padding-left: 5px;
+        li {
+          float: left;
+          list-style: none;
+          cursor: pointer;
+          padding: 6px 0;
+          color: #606266;
+          border-radius: 4px;
+          margin: 0 8px 0 0;
+          font-size: 14px;
+          width: 70px;
+          text-align: center;
+          &:hover {
+            background: #f5f7fa;
+          }
+        }
+        .active {
+          background: #409eff;
+          color: #fff;
+        }
+      }
+    }
+  }
+}
+
+// 表格
+.el-table {
+  th,
+  td {
+    .cell {
+      margin: 0;
+      padding: 0 12px;
+    }
+  }
+  td {
+    .cell {
+      padding: 0 12px;
+    }
+  }
+}
+
+// 标题线
+.dataTitle {
+  color: #303133;
+  font-size: 14px;
+  border-bottom: 2px #E4E7ED solid;
+  height: 36px;
+  line-height: 36px;
+  margin: 0 0 25px 0;
+  position: relative;
+  &::before {
+    position: absolute;
+    left: 0;
+    bottom: -2px;
+    content: "";
+    width: 60px;
+    height: 2px;
+    background: #409eff;
+  }
+}
+
+
+.el-dialog__wrapper{
+  z-index: 9999 !important;
+}
+
+.el-dialog{
+  left: 50% !important;
+  position: fixed !important;
+  top: 50% !important;
+  transform: translate(-50%,-50%) !important;
+  margin-top: 0 !important; 
+}

src/styles/sidebar.scss

@@ -3,17 +3,17 @@
   .main-container {
     min-height: 100%;
     transition: margin-left .28s;
-    margin-left: 170px;
+    margin-left: 150px;
     position: relative;
   }
   // 侧边栏
   .sidebar-container {
     transition: width 0.28s;
-    width: 170px !important;
+    width: 150px !important;
     height: 100%;
     position: fixed;
     font-size: 0px;
-    top: 0;
+    top: 60px;
     bottom: 0;
     left: 0;
     z-index: 1001;
@@ -26,6 +26,12 @@
       overflow-x: hidden!important;
       .el-scrollbar__view {
         height: 100%;
+        .hamburger-container {
+          padding: 20px 10px 10px 10px;
+          color: #fff;
+          text-align: center;
+          cursor: pointer;
+        }
       }
     }
     .is-horizontal {
@@ -37,7 +43,7 @@
       overflow: hidden;
     }
     .svg-icon {
-      margin-right: 16px;
+      margin-right: 6px;
     }
     .el-menu {
       border: none;
@@ -63,6 +69,7 @@
       overflow: hidden;
       &>.el-submenu__title {
         padding-left: 10px !important;
+        
         .el-submenu__icon-arrow {
           display: none;
         }
@@ -84,14 +91,14 @@
   }
   .sidebar-container .nest-menu .el-submenu>.el-submenu__title,
   .sidebar-container .el-submenu .el-menu-item {
-    min-width: 180px !important;
+    // min-width: 180px !important;
     background-color: $subMenuBg !important;
     &:hover {
       background-color: $menuHover !important;
     }
   }
   .el-menu--collapse .el-menu .el-submenu {
-    min-width: 180px !important;
+    // min-width: 180px !important;
   }
 
   //适配移动端