添加/修改公共样式

src/styles/common.scss

@@ -0,0 +1,564 @@
+.infoPosin {
+    position: relative;
+  }
+  
+  .infoR {
+    position: absolute;
+    right: 0;
+    top: -50px
+  }
+  
+  .boxMain {
+    padding: 0 30px;
+    position: relative;
+  }
+  
+  .boxMar {
+    margin: 10px 0 0;
+  }
+  
+  .mainInfo {
+    margin-bottom: 15px;
+  }
+  
+  .rInfo {
+    position: relative;
+  }
+  
+  .rInfo {
+    .fr {
+      position: absolute;
+      right: 5px;
+      top: -45px;
+      z-index: 9;
+    }
+  }
+  
+  // 头部信息
+  .titInfo {
+    border-bottom: 1px solid #e1e1e1;
+    padding: 10px 0;
+  }
+  
+  .borBom {
+    border-bottom: 1px solid #e1e1e1;
+  }
+  
+  .mainInfo {
+    .titInfo {
+      font-weight: 700;
+      margin-bottom: 15px;
+    }
+  }
+  
+  // 标题
+  .centInfo {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 700;
+    color: #666;
+  }
+  
+  .infoR {
+    text-align: right
+  }
+  
+  // 表单
+  .formInfo {
+  
+    // .el-input__inner{width: 80%;}
+    // .el-input{width: 70%;}
+    .textR {
+      vertical-align: top;
+      width: 100%;
+      padding-right: 10px;
+    }
+  }
+  
+  .seleInfo {
+    .el-select--medium {
+      width: 100px;
+    }
+  }
+  
+  .el-form-item {
+    margin-bottom: 20px;
+  }
+  
+  .posInfo {
+    padding: 0 0 0 20px;
+  
+    span {
+      padding-right: 8px;
+  
+      em {
+        &.active {
+          color: #8a97f8
+        }
+  
+        &.disabled {
+          color: #999;
+        }
+      }
+    }
+  }
+  
+  .inputW2 {
+    width: 200px;
+  }
+  
+  .inputW {
+    width: 300px;
+  }
+  
+  .inputW5 {
+    width: 500px;
+  }
+  
+  .seleW {
+    .el-input__inner {
+      border: 0 none;
+      padding: 0;
+      width: 60px;
+    }
+  
+  }
+  
+  .formInfo .seleW .el-input {
+    width: 100%
+  }
+  
+  .upload-file {
+    display: inline-block;
+  }
+  
+  /* 谷歌 */
+  .formInfo input::-webkit-outer-spin-button,
+  .formInfo input::-webkit-inner-spin-button,
+  .phoneInfo input::-webkit-outer-spin-button,
+  .phoneInfo input::-webkit-inner-spin-button,
+  .el-form-item input::-webkit-outer-spin-button,
+  .el-form-item input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    line-height: 30px;
+  }
+  
+  /* 火狐 */
+  .phoneInfo input[type="number"],
+  .formInfo input [type="number"],
+  .el-form-item input [type="number"] {
+    -moz-appearance: textfield;
+    line-height: 30px;
+  }
+  
+  // 搜索
+  .showMore {
+    text-align: center;
+    padding: 10px 0 0;
+  }
+  
+  .formInfo {
+    .el-input--medium {
+      .el-input__inner {
+        // width: 220px;
+      }
+    }
+  
+    .inputW {
+  
+      .el-input__inner {
+        width: 300px;
+      }
+    }
+  }
+  
+  .tagInfo .el-tag .el-icon-close {
+    color: #fff;
+  }
+  
+  .tags-container {
+    span {
+      margin-right: 5px;
+    }
+  
+    padding: 10px 0 0;
+  
+    .active {
+      background-color: #42b983;
+      color: #fff;
+      border-color: #42b983;
+    }
+  
+  }
+  
+  .serachInput {
+    display: inline-block;
+    margin: 0 10px;
+  
+    .el-input--medium {
+      width: 150px;
+  
+      .el-input__inner {
+        height: 28px;
+        line-height: 28px;
+      }
+    }
+  }
+  
+  .searchInfo {
+    text-align: right;
+    padding: 0 0 15px;
+  
+    .inputW {
+      width: 150px;
+    }
+  }
+  
+  // 弹窗信息
+  .el-dialog__header {
+    background: #66b1ff;
+  
+    .el-icon-close:before {
+      color: #fff;
+    }
+  
+    .el-dialog__title {
+      color: #fff;
+    }
+  
+  }
+  
+  // 图标
+  .fa-eye {
+    color: #ccc;
+    cursor: pointer;
+  }
+  
+  .iconInfo span {
+    cursor: pointer;
+    // padding-left: 20px;
+  }
+  
+  // 字体颜色
+  .colRed {
+    color: red;
+  }
+  
+  .col999 {
+    color: #999;
+  }
+  
+  .colGreen {
+    color: #42b983
+  }
+  
+  // 对齐
+  .textR {
+    text-align: right;
+    width: 150px;
+    display: inline-block;
+  }
+  
+  .userInfo {
+    .textR {
+      width: 150px;
+    }
+  }
+  
+  // 员工
+  .userInfo {
+    padding: 30px;
+  }
+  
+  .userHead {
+    width: 80px;
+    height: 80px;
+    border-radius: 40px;
+    border: 1px solid #ccc;
+    background: #e1e1e1;
+    overflow: hidden;
+    margin: 0 0 0 50px;
+    text-align: right;
+  }
+  
+  .headInfo {
+    p {
+      padding: 5px 0;
+    }
+  }
+  
+  .leaveInfo {
+    .userHead {
+      text-align: right;
+      float: right;
+      margin-right: 30px;
+    }
+  
+    border-bottom: 1px solid #dcdfe6;
+    padding: 20px 50px;
+    margin-bottom: 20px;
+  
+    // border-bottom: 1px solid #dcdfe6;
+    span {
+      color: #999;
+    }
+  
+    em {
+      padding: 0 15px 0 5px;
+    }
+  }
+  
+  .headInfo {
+    .headText {
+      margin-left: 130px;
+  
+      .textR {
+        width: 80px;
+      }
+  
+      .el-row {
+        overflow: hidden;
+        line-height: 36px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+  
+  // table报表
+  .tableList {
+    border: 1px solid #ccc;
+    border-collapse: collapse;
+  
+    td {
+      border: 1px solid #ccc;
+      height: 35px;
+      padding: 0 8px;
+    }
+  
+    th {
+      border: 1px solid #ccc;
+      height: 35px;
+      width: 250px;
+      text-align: left;
+      font-weight: normal;
+      padding: 0 8px;
+      background: #f9f9f9;
+    }
+  
+    .title {
+      background: #e1e1e1;
+    }
+  }
+  
+  // .el-breadcrumb__separator,.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{color: #fff;}
+  // 报表上传
+  .uploadBox {
+    width: 60%;
+    border-radius: 5px;
+    border: 1px dashed #d9d9d9;
+    margin: 100px auto 0;
+  
+    .upload-demo {
+      display: inline-block;
+      width: 49%;
+      float: left;
+      text-align: center;
+  
+      .el-upload {
+        display: block;
+      }
+  
+      .el-upload-dragger {
+        width: auto;
+        border: 0 none;
+        border-left: 1px dashed #d9d9d9
+      }
+    }
+  
+    // .upload-text {
+    //   position: absolute;
+    //   top: 50%;
+    // }
+  }
+  
+  .warningTip {
+    // background: url(./../assets/401_images/401.gif) no-repeat 50% 0;
+    text-align: center;
+    padding: 100px 0;
+  }
+  
+  // 分页
+  .pagination {
+    margin-top: 10px;
+    text-align: right;
+  }
+  
+  // 底部
+  .dialog-footer {
+    text-align: center;
+  }
+  .quitApproval {
+    display: flex;
+    padding: 15px;
+    .contLeft {
+      flex: 4;
+      background: #fff;
+      margin-right: 10px;
+      padding: 20px;
+      .topTit {
+        display: flex;
+        border-bottom: solid 1px #ccc;
+        img {
+          width: 100px;
+          height: 100px;
+          border-radius: 50%;
+        }
+        .more {
+          display: inline-block;
+          position: relative;
+          text-align: center;
+          width: 16px;
+          line-height: 14px;
+          font-size: 12px;
+          top: -1px;
+          left: 5px;
+          border: solid 1px #666;
+          color: #666;
+          border-radius: 50px;
+        }
+        .info {
+          margin-left: 10px;
+          line-height: 25px;
+          .name {
+            span {
+              background: $green1;
+              color: #fff;
+              padding: 4px 10px;
+              border-radius: 3px;
+              margin-left: 10px;
+              font-size: 12px;
+            }
+          }
+          .stName{
+            span {
+              background: $red;
+              color: #fff;
+              padding: 4px 10px;
+              border-radius: 3px;
+              margin-left: 10px;
+              font-size: 12px;
+            }
+          }
+          .time {
+            ul {
+              position: relative;
+              display: inline-block;
+              li {
+                position: absolute;
+                border-radius: 3px;
+                box-shadow: 1px 2px 2px #ccc;
+                top: 34px;
+                left: -43px;
+                width: 500px;
+                padding: 5px 10px;
+                line-height: 20px;
+                display: none;
+                background: #fff;
+                border: solid 1px #ccc;
+              }
+              li::before {
+                position: absolute;
+                content: "∧";
+                left: 50px;
+                top: -15px;
+                background: #fff;
+                color: #ccc;
+              }
+            }
+            ul:hover li {
+              display: block;
+            }
+          }
+        }
+      }
+      .content {
+        padding: 10px 0;
+        min-height: 500px;
+        p {
+          margin: 25px 0;
+          span {
+            display: inline-block;
+            width: 220px;
+            text-align: right;
+            padding-right: 5px;
+            margin-right: 15px;
+            color: #999;
+            border-right: solid 1px #ccc;
+            vertical-align: top;
+          }
+        }
+      }
+    }
+    .contRit {
+      flex: 1;
+      background: #fff;
+      padding: 0 20px;
+      .topTit {
+        margin-bottom: 10px;
+        border-bottom: solid 1px #ccc;
+        line-height: 40px;
+      }
+      .Items {
+        padding: 20px 0;
+        li {
+          display: flex;
+          min-height: 70px;
+          .name {
+            position: relative;
+            text-align: center;
+            line-height: 24px;
+            padding: 0 0 10px 0;
+            flex: 3;
+            border-right: solid 1px #ccc;
+          }
+          .name:after {
+            content: " ";
+            border-radius: 50%;
+            position: absolute;
+            width: 10px;
+            height: 10px;
+            border: solid 2px $green1;
+            right: -5px;
+            top: 0px;
+            background: #fff;
+          }
+          .stName {
+            position: relative;
+            text-align: center;
+            line-height: 24px;
+            padding: 0 0 10px 0;
+            flex: 3;
+            border-right: solid 1px #ccc;
+          }
+          .stName:after {
+            content: " ";
+            border-radius: 50%;
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            border: solid 2px $red;
+            right: -5px;
+            top: 0px;
+            background: #fff;
+          }
+          .act {
+            flex: 2;
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+  .hr-block {
+    margin: 10px 0;
+  }

src/styles/index.scss

@@ -3,6 +3,7 @@
 @import './transition.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
+@import './common.scss'; //引入common.scss样式表
 
 body {
   height: 100%;

src/styles/variables.scss

@@ -1,10 +1,25 @@
+// base color
+$blue: #409EFF;
+
+$light-blue:#3A71A8;
+$red:#C03639;
+$pink: #E65D6E;
+$green: #30B08F;
+$orange:#fa7c4d;
+$tiffany: #4AB7BD;
+$yellow:#FEC171;
+$panGreen: #30B08F;
+$green1: #44b549;
+
 // sidebar
-$menuText:#bfcbd9;
+$menuText:#ffffff;
 $menuActiveText:#409EFF;
 $subMenuActiveText:#f4f4f5; // https://github.com/ElemeFE/element/issues/12951
 
-$menuBg:#304156;
+$menuBg: transparent;
-$menuHover:#263445;
+$menuHover:#ffffff;
+
+
 
 $subMenuBg:#1f2d3d;
 $subMenuHover:#001528;
@@ -23,3 +38,15 @@ $sideBarWidth: 210px;
   subMenuHover: $subMenuHover;
   sideBarWidth: $sideBarWidth;
 }
+
+$cl-0: #cfeffe;
+$cl-1: #a8f8bb;
+$cl-2: #fedbd7;
+$cl-3: #ffe8c9;
+$cl-4: #fdfcd5;
+$cl-10: #25a49e;
+
+// //sidebar
+// $menuBg:#001529;
+// $subMenuBg:#001529;
+// $menuHover:#001529;