代码提交

src/main.js

@@ -5,6 +5,7 @@ import App from './App'
 import router from './router'
 import store from './vuex/store'
 import 'element-ui/lib/theme-chalk/index.css'
+import '../theme/index.css'
 import './assets/css/iconfont.css'
 import axios from "axios"
 import {validator} from "./utils/validate";
@@ -29,4 +30,4 @@ new Vue({
         App
     },
     template: '<App/>'
-})
+})

theme/element-ui.scss

@@ -0,0 +1,301 @@
+ //覆盖一些element-ui样式
+.block-checkbox {
+  display: block;
+}
+
+.operation-container {
+  .cell {
+    padding: 10px !important;
+  }
+}
+
+.el-upload {
+  input[type="file"] {
+    display: none !important;
+  }
+}
+
+.el-upload__input {
+  display: none;
+}
+
+.cell {
+  .el-tag {
+    margin-right: 8px;
+  }
+}
+
+.small-padding {
+  .cell {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+}
+
+.status-col {
+  .cell {
+    padding: 0 10px;
+    text-align: center;
+    .el-tag {
+      margin-right: 0px;
+    }
+  }
+}
+//针对搜索功能覆盖elementUI部分样式
+
+ .search-dialog{
+   .el-dialog{
+     left:auto;
+     right: -150px;
+     top:15.8%!important;
+     min-width: 300px!important;
+     width:300px;
+     bottom:0;
+     padding-top:20px;
+   }
+   .filter-item{
+     //width: 100%;
+   }
+
+   .el-dialog__body{
+     padding:0px 20px 15px;
+     overflow: auto;height:88%;
+   }
+   .el-dialog__header{
+     display: none;
+   }
+   .el-form-item__content{
+     text-align: left;
+   }
+   .el-form-item{
+     margin-bottom:15px;
+   }
+   .el-form-item__label{
+     //width: 100%;
+     font-size: 14px;
+     text-align: left;
+   }
+   .el-dialog__footer{
+     text-align: center;
+   }
+   .el-radio-button{
+     .el-radio-button__inner{
+       white-space: nowrap;
+       cursor: pointer;
+       display: inline-block;
+       width: 90px;
+       height: 34px;
+       border: none;
+       font-size: 14px;
+       line-height:20px;
+       border-radius: 17px;
+       padding: 7px 20px;
+       background-color: #f5f5f5;
+       //margin-left:0px;
+     }
+
+     }
+   .el-radio-button:last-child .el-radio-button__inner{
+     margin-left: 15px;
+   }
+
+   .el-radio-group{
+     .el-radio-button.is-active{
+       .el-radio-button__inner{
+         background-color: #82bdf2;
+       }
+     }
+     .my-download-radio{
+       .el-radio-button__inner{
+         margin-left:0;
+         margin-top:20px;
+       }
+     }
+     .el-radio-button__inner{
+       width: auto;
+     }
+
+   }
+
+   .el-radio-button__inner{
+     background-color: #f5f5f5;
+   }
+   .el-dialog__footer{
+     width:100%;
+     padding:15px 20px;
+     float:left;
+     // padding-bottom:30px;
+     .reset{
+       float: left;
+     }
+
+   }
+}
+.dialog-footer .el-button--danger{
+  border:solid 1px #de5237;
+  background-color: #de5237;
+}
+
+
+
+//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461
+//.el-dialog {
+//  transform: none;
+//  position: initial;
+//  margin: 10% auto 0;
+//}
+//.el-dialog--small{
+//  width:650px;
+//}
+
+//文章页textarea修改样式
+.article-textarea {
+  textarea {
+    padding-right: 40px;
+    resize: none;
+    border: none;
+    border-radius: 0px;
+    border-bottom: 1px solid #bfcbd9;
+  }
+}
+
+//element ui upload
+.upload-container {
+  .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+      height: 200px;
+    }
+  }
+}
+
+.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{
+    transform: rotateZ(180deg);
+    transform-origin: center 4px;
+}
+.el-submenu__icon-arrow{
+    margin-top:-4px;
+}
+.el-checkbox__inner{
+  border-radius: 0;border: 1px solid #c4c4c4;
+}
+.el-pager li.active{
+    border-color: #5d8ab3;
+    background-color: #5d8ab3;
+}
+.el-table-column--selection .cell{
+  padding:0 0;
+}
+.el-table .cell, .el-table th>div{
+  padding:0 8px;
+}
+.el-tree-node__label{
+    max-width: 440px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.dialog-footer .el-button--primary{
+  border-color:#4d84ba!important;
+}
+.el-button--primary{
+  background-color:#4d84ba;border-color:#4d84ba;
+}
+.el-form-item__label{
+  color:#000;
+}
+.el-button--mini{ border:none; background: none; margin-top: 5px;}
+.el-tabs__active-bar{
+  background-color: #4d84ba;
+}
+.el-tabs__item.is-active {
+    color: #4d84ba;
+}
+.el-table{
+  border:solid 1px #c8cbd0;
+}
+.el-table::after, .el-table::before{
+  background:#c6cad6;height:0;
+}
+.el-pagination .btn-next, .el-pagination .btn-prev{
+    border: 1px solid #c8cbd0;
+}
+.el-submenu .el-menu-item{
+  min-width:auto;
+}
+.el-pager li{
+  margin:0 2px;border:solid 1px #c8cbd0;
+}
+.el-pager li.active+li{
+  border-left:solid 1px #c8cbd0;
+}
+.el-pagination .btn-next{
+  margin-left:2px;
+}
+.el-pagination .btn-prev{
+  margin-right:2px;
+}
+.el-pager li:last-child{
+  border-right:solid 1px #c8cbd0;
+}
+.v-content .el-tabs__content{
+    height:100%!important;
+}
+.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{
+  color:#4d84ba;
+}
+.el-form--label-top .el-form-item__label{
+  padding:0 0 6px 2px;
+}
+.material-wrapper .el-col-lg-6,.material-wrapper .el-col-6 {
+    width: 20%;
+}
+.fixScroll .el-table__body-wrapper{
+  height: 100%;overflow-x:hidden;
+}
+.tab-tags .el-radio__inner{
+  width:14px;height:14px;
+}
+.tab-tags .el-radio+.el-radio{
+  margin-left: 5px;
+}
+
+.dialogForm .el-dialog__body{
+    padding: 10px 20px;
+}
+.dialogForm .item-wrapper{
+  border:solid 1px #d5d5d5;
+}
+
+.exhibition-content .el-tabs--border-card .el-tabs__content{
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                margin-top: 43px;
+                left:0;right:0;overflow-y: auto;
+                height: auto!important;
+            }
+
+.el-message{
+  z-index: 9999 !important;
+  height:52px;
+  padding:0;min-width: 380px;
+}
+.el-message p{
+  color:#fff;padding-left:15px;
+}
+.el-message .el-message__group{
+  height:52px;
+}
+.el-message .el-message__img {
+    width: 20px;
+    height: 20px;
+    left: 10px;
+    top: 13px;
+    border-radius: 50%;
+}
+.el-message .el-message__closeBtn{
+    top:19px;right:12px;color:#fff;font-size:12px;font-weight: 700;
+}
+
+

theme/index.scss

@@ -0,0 +1,1538 @@
+@import './element-ui.scss';
+
+body {
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-size: 14px;
+}
+
+button, input, optgroup, select, textarea {
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; /* 1 */
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+
+b,
+strong {
+  font-weight: bold;
+}
+
+//common css
+.mt-10 {
+  margin-top: 10px
+}
+
+.mr-10 {
+  margin-right: 10px
+}
+
+.h100 {
+  height: 100%
+}
+
+.hide {
+  display: none;
+}
+
+.fr {
+  float: right;
+}
+
+.fl {
+  float: left;
+}
+
+.pt {
+  position: relative;
+}
+
+.pr-5 {
+  padding-right: 5px;
+}
+
+.pl-5 {
+  padding-left: 5px;
+}
+
+.block {
+  display: block;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.inlineBlock {
+  display: block;
+}
+
+textarea {
+  resize: none;
+}
+
+//.l-block {
+//    display: inline-block
+//}
+
+label {
+  font-weight: normal;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+li {
+  list-style: none;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+.no-padding {
+  padding: 0px !important;
+}
+
+.padding-content {
+  padding: 4px 0;
+}
+
+a:focus,
+a:active {
+  outline: none;
+}
+
+a,
+a:focus,
+a:hover {
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+}
+
+//去除chrome input上下箭头
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none !important;
+  margin: 0;
+}
+
+code {
+  background: #eef1f6;
+  padding: 15px 10px;
+  margin-bottom: 20px;
+  display: block;
+  line-height: 36px;
+  a {
+    color: #337ab7;
+    cursor: pointer;
+    &:hover {
+      color: rgb(32, 160, 255);
+    }
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all .2s ease
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+//main-container全局样式
+.app-container {
+  padding: 20px;
+
+}
+
+.components-container {
+  margin: 30px 50px;
+  position: relative;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.editor-container .CodeMirror {
+  height: 100% !important;
+}
+
+.wscn-icon {
+
+}
+
+.sub-navbar {
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  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;
+  }
+}
+
+.link-type,
+.link-type:focus {
+  color: #337ab7;
+  cursor: pointer;
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
+}
+
+.publishedTag,
+.draftTag,
+.deletedTag {
+  color: #fff;
+  background-color: $panGreen;
+  line-height: 1;
+  text-align: center;
+  margin: 0;
+  padding: 8px 12px;
+  font-size: 14px;
+  border-radius: 4px;
+  position: absolute;
+  left: 20px;
+  top: 10px;
+}
+
+.draftTag {
+  background-color: $yellow;
+}
+
+.deletedTag {
+  background-color: $red;
+}
+
+.input-label {
+  font-size: 14px;
+  color: #48576a;
+  line-height: 1;
+  padding: 11px 5px 11px 0;
+}
+
+.clearfix {
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+.no-marginLeft {
+  .el-checkbox {
+    margin: 0 20px 15px 0;
+  }
+  .el-checkbox + .el-checkbox {
+    margin-left: 0px;
+  }
+}
+
+.filter-container {
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
+}
+
+.filter-container {
+  margin: 15px 0 10px;
+  padding-bottom: 0;
+  float: right;
+}
+
+//refine vue-multiselect plugin
+.multiselect {
+  line-height: 16px;
+}
+
+.multiselect--active {
+  z-index: 1000 !important;
+}
+
+//refine simplemde
+.simplemde-container {
+  .editor-toolbar.fullscreen, .CodeMirror-fullscreen {
+    z-index: 1003;
+  }
+}
+
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0)
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg)
+  }
+  40%,
+  80% {
+    transform: rotate(10deg)
+  }
+}
+
+//table 部分
+.blue-table {
+  thead {
+
+    th {
+      // height:40px;
+      // line-height:40px;
+      // border: none;
+      background-color: #f3f3f3;
+    }
+    td {
+      border-color: #FFF;
+    }
+  }
+  tbody {
+    .cell {
+      border: none;
+      text-align: center;
+      height: 44px;
+      line-height: 44px;
+    }
+    tr {
+      // height: 40px;
+      // line-height: 40px;
+    }
+    td {
+      border-bottom: none;
+      // padding:5px 0;
+    }
+  }
+}
+
+.el-table {
+  .cell {
+    height: 44px;
+    line-height: 44px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+  th {
+    background-color: #eef1f6;
+    text-align: center;
+    .cell {
+      height: 40px;
+      line-height: 40px;
+      color: #000;
+    }
+  }
+  td {
+    border-bottom: none;
+    text-align: center;
+  }
+
+}
+
+.cell {
+  height: 40px;
+  line-height: 40px;
+  border: none;
+
+}
+
+.cell {
+  height: 40px;
+  line-height: 40px;
+  border: none;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+//button
+//big button in table head
+.btn {
+  width: 82px;
+  height: 28px;
+  line-height: 28px;
+  border: none;
+  font-size: 12px;
+  border-radius: 4px;
+  padding: 0 14px;
+  letter-spacing: 1px;
+}
+
+.btn-add, .el-button--primary.btn-add:hover {
+  background: #4d84ba
+}
+
+.btn-edit, .el-button--primary.btn-edit:hover {
+  background: #46be94
+}
+
+.btn-delete, .el-button--danger.btn-delete:hover {
+  background: #de5237;
+}
+
+.btn-reset {
+  background-color: #ddd;
+}
+
+.btn-add, .el-button--primary.btn-add:hover {
+  background: #4d84ba;
+  color: #FFF;
+}
+
+.btn-edit, .el-button--primary.btn-edit:hover {
+  background: #46be94;
+  color: #FFF;
+}
+
+.btn-delete, .el-button--danger.btn-delete:hover {
+  background: #de5237;
+  color: #FFF;
+}
+
+.icon-add1, .icon-delete1, .icon-edit1, .icon-tag, .icon-cancel, .icon-sucai {
+  overflow: hidden;
+  width: 13px;
+  height: 13px;
+  fill: #ffffff;
+  vertical-align: middle;
+  position: relative;
+  right: 0;
+  bottom: 1px;
+}
+
+.icon-sucai {
+  width: 16px;
+  height: 16px;
+  fill: #444;
+}
+
+.btn-tags .el-button {
+  padding: 4px;
+  border: none;
+  background: none;
+}
+
+.btn-tags .el-button:hover .icon-tag {
+  fill: #000;
+}
+
+.icon-tag {
+  fill: #666;
+  width: 20px;
+  height: 20px;
+}
+
+.icon-cancel {
+  fill: #666
+}
+
+.icon-btn, .data-table {
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    fill: #8ab4da;
+    border: none;
+  }
+  .icon:hover {
+    fill: #5c8cb4;
+  }
+}
+
+.cell .el-button--small {
+  padding: 4px 5px;
+  border: none;
+  background: none;
+}
+
+// big save button container
+.button-container {
+  margin-top: 40px;
+
+  button {
+    width: 120px;
+    border: 1px solid #5584ff;
+    border-radius: 30px;
+    background-color: #fff;
+    color: #5584ff;
+    font-size: 14px;
+  }
+
+  .save {
+    background-color: #5584ff;
+    color: #fff;
+  }
+
+  .icon {
+    width: 14px;
+    height: 14px;
+    padding-top: 2px;
+    margin-right: 5px;
+  }
+
+  .icon-save {
+    fill: #fff;
+  }
+}
+
+.search-dialog .el-button {
+  // border: 1px solid #c4c4c4;
+  width: 48%;
+}
+.search-dialog{
+  overflow-x: hidden;
+}
+
+
+.el-table__row .el-button + .el-button {
+  margin-left: 0px;
+}
+
+.account-filter-container {
+  float: right;
+  margin: 15px 0 10px;
+  padding-bottom: 0;
+}
+
+.el-table th {
+  font-weight: normal;
+}
+
+.v-content {
+  clear: both;
+  background-color: #fff;
+  padding: 10px 20px 20px;
+  // border:solid 1px #c6cad6;
+}
+
+.cell img {
+  height: 36px;
+  width: 36px;
+  vertical-align: middle;
+  border-radius: 50%;
+}
+
+.dialogForm .el-dialog {
+  width: 800px;
+  margin-bottom: 0;
+  top: 50% !important;
+  left: 50% !important;
+  margin-top: -290px;
+  margin-left: -300px;
+  transform: translateX(0);
+  // height: 550px;
+}
+.dialogShowFansForm .el-dialog {
+  width: 1200px;
+  margin-bottom: 0;
+  top: 50% !important;
+  left: 50% !important;
+  margin-top: -295px;
+  margin-left: -600px;
+  transform: translateX(0);
+}
+
+.dialogFans360Form .el-dialog {
+  width: 1200px;
+  margin-bottom: 0;
+  top: 50% !important;
+  left: 50% !important;
+  margin-top: -295px;
+  margin-left: -600px;
+  transform: translateX(0);
+  height: 630px;
+}
+
+.dialogFormBox {
+  overflow: auto;
+  max-height: 420px;
+}
+
+.el-form-item {
+  margin-bottom: 20px;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: #F5F5F5;
+}
+
+/*定义滚动条轨道 内阴影+圆角*/
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 3px;
+  background-color: #eee;
+}
+
+/*定义滑块 内阴影+圆角*/
+::-webkit-scrollbar-thumb {
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .2);
+  background-color: #ccc;
+}
+
+.radioLabel {
+  width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+//sharing-material
+//组织机构组件横向滚动条
+
+.sharing-material {
+  .item {
+    position: relative;
+    margin-top: 15px;
+    .icon-container {
+      padding-left: 10px;
+      padding-right: 10px;
+      margin-top: 5px;
+    }
+    .icon-container:after {
+      content: "\0020";
+      display: block;
+      height: 0;
+      clear: both;
+    }
+    .item-wrapper {
+      box-shadow: rgba(0, 0, 0, 0.12) 0px 2px 4px 0px, rgba(0, 0, 0, 0.04) 0px 0px 6px 0px;
+      padding-bottom: 10px;
+      border: solid 1px #c8cbd0;
+      overflow: hidden;
+      .icon-wrapper {
+        margin-left: 5px;
+      }
+      .icon-wrapper:first-child {
+        margin-left: 0;
+      }
+      .icon-wrapper:last-child {
+        float: right;
+      }
+      .image-cover {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 192px;
+      }
+      .image-cover-black {
+        background-color: rgba(0, 0, 0, 0.6);
+      }
+      .image-cover-white {
+        background-color: rgba(255, 255, 255, 0.6);
+      }
+    }
+  }
+  .material-content .account-filter-container {
+    margin: 0;
+  }
+
+  //account 实例下拉框
+  .control-bar {
+    color: #999;
+    .select-all-wrapper {
+      position: relative;
+    }
+    .select-all {
+      vertical-align: middle;
+      margin-left: 25px;
+      font-size: 14px;
+      line-height: 14px;
+      color: #999;
+    }
+    .float-right{
+      float: right;
+    }
+    a {
+      //float: right;
+      font-size: 14px;
+      line-height: 14px;
+      vertical-align: middle;
+      margin-top: 2px;
+      color: #999;
+      // text-decoration: underline;
+    }
+    a:hover {
+      color: #4d84ba;
+    }
+  }
+
+  .el-scrollbar__view {
+    max-width: 300px;
+  }
+  .material-content {
+    display: inline-block;
+  }
+
+  .icon-edit1 {
+    fill: #61c2c4;
+    width: 14px;
+    height: 14px;
+  }
+
+  .icon-wrapper {
+    display: inline-block;
+    width: 28px;
+    height: 28px;
+    border-radius: 100%;
+    border: 1px solid #61c2c4;
+    text-align: center;
+    line-height: 28px;
+  }
+
+  .delete {
+    border: 1px solid #e46456;
+  }
+
+  .delete .icon-edit1 {
+    fill: #e46456;
+  }
+
+  //material
+
+  .material-wrapper {
+    border: 1px solid #c8cbd0;
+    padding-top: 20px;
+    padding-bottom: 30px;
+    margin-top: 38px;
+    background: #fff;
+  }
+
+  .material-title {
+    text-align: center;
+    height: 40px;
+    line-height: 40px;
+    margin: 0;
+    padding: 0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .checkbox {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: 1px;
+    left: 0;
+  }
+
+  .item-checkbox {
+    right: 20px;
+    left: auto;
+    top: 10px;
+    z-index: 999;
+  }
+
+  .material-content {
+    width: 100%;
+    overflow: auto;
+    .delete:hover {
+      background: #e46456
+    }
+  }
+
+}
+
+//upload-img-container
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #20a0ff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 50px;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+  border: 1px solid #ccc;
+}
+
+.avatar {
+  width: 84px;
+  height: 84px;
+  display: block;
+}
+
+//push-message
+.exhibition .el-tabs__nav-wrap {
+  padding-left: 155px;
+  .el-tabs__nav-next, .el-tabs__nav-prev {
+    display: none;
+  }
+}
+
+.select-radio .el-radio__label {
+  display: none;
+}
+
+.message-country label {
+  text-indent: 14px;
+}
+
+.message-city label {
+  text-indent: 14px;
+}
+
+.message-province label {
+  text-indent: 28px;
+}
+
+.material-icon {
+  width: 100px;
+  height: 100px;
+  line-height: 100px;
+}
+
+.dataRport {
+  text-align: right;
+}
+
+.fans-filter-container {
+  float: right;
+  margin: 15px 0 10px;
+  padding-bottom: 0;
+}
+
+.message-container {
+  width: 100%;
+  .message {
+    height: 350px;
+    padding: 10px 15px;
+    overflow: auto;
+    background-color: #F5F5F5;
+    border-bottom: 1px solid #ccc;
+  }
+
+  .message-wrapper {
+    border-right: solid 1px #d5d5d5;
+  }
+  .el-icon-close:before {
+    content: "\E60C";
+    color: #999;
+    font-size: 14px;
+    display: inline-block;
+    margin: 10px 15px 0 0;
+  }
+  .message li {
+    margin-bottom: 15px;
+    left: 0;
+    position: relative;
+    display: block;
+  }
+  .message .time {
+    margin: 10px 0;
+    text-align: center;
+  }
+  .message .text {
+    display: inline-block;
+    position: relative;
+    max-width: calc(100% - 75px);
+    min-height: 35px;
+    line-height: 2.1;
+    font-size: 14px;
+    padding: 3px 10px;
+    text-align: left;
+    word-break: break-all;
+    background-color: #fff;
+    color: #000;
+    border-radius: 4px;
+    // box-shadow: 0px 1px 7px -5px #000;
+  }
+  .message .avatar {
+    float: left;
+    margin: 0 10px 0 0;
+    border-radius: 3px;
+    background: #fff;
+  }
+  .message .time > span {
+    display: inline-block;
+    padding: 5px 5px;
+    font-size: 12px;
+    color: #999;
+  }
+  .message .system > span {
+    padding: 4px 9px;
+    text-align: left;
+  }
+  .message .text:before {
+    content: " ";
+    position: absolute;
+    top: 12px;
+    right: 100%;
+    border: 5px solid transparent;
+    border-right-color: #fff;
+  }
+  .message .self {
+    text-align: right;
+  }
+  .message .self .avatar {
+    float: right;
+    margin: 0 0 0 10px;
+    width: 35px;
+    height: 35px;
+  }
+  .message .self .text {
+    background-color: rgb(158, 234, 106);
+    // border:none;
+  }
+
+  .message .self .text:before {
+    right: inherit;
+    left: 100%;
+    border-right-color: transparent;
+    border-left-color: rgb(158, 234, 106);
+  }
+  .message .image {
+    max-width: 200px;
+  }
+  img.static-emotion-gif, img.static-emotion {
+    vertical-align: middle !important;
+  }
+
+  .an-move-left {
+    left: 0;
+    animation: moveLeft .7s ease;
+    -webkit-animation: moveLeft .7s ease;
+  }
+  .an-move-right {
+    left: 0;
+    animation: moveRight .7s ease;
+    -webkit-animation: moveRight .7s ease;
+  }
+  @keyframes moveRight {
+    0% {
+      left: -20px;
+      opacity: 0
+    }
+    100% {
+      left: 0;
+      opacity: 1
+    }
+  }
+
+  @-webkit-keyframes moveRight {
+    0% {
+      left: -20px;
+      opacity: 0
+    }
+    100% {
+      left: 0;
+      opacity: 1
+    }
+  }
+  @keyframes moveLeft {
+    0% {
+      left: 20px;
+      opacity: 0
+    }
+    100% {
+      left: 0;
+      opacity: 1
+    }
+  }
+
+  @-webkit-keyframes moveLeft {
+    0% {
+      left: 20px;
+      opacity: 0;
+    }
+    100% {
+      left: 0;
+      opacity: 1
+    }
+  }
+  .el-dialog__body {
+    padding: 0;
+  }
+  .history-message {
+    position: absolute;
+    top: 0;
+    left: 100%;
+    width: 50%;
+    background-color: #fff;
+    .el-dialog__header {
+      height: 47px;
+    }
+  }
+  .el-dialog__header {
+    padding: 0px;
+  }
+  .el-dialog--small {
+    width: 40%;
+    top: 50% !important;
+    margin-top: -275px;
+  }
+  .el-dialog {
+    border-radius: 0;
+  }
+  .material-btn {
+    border: 0;
+  }
+  .history-message-btn {
+    float: right;
+    border: 0;
+    border-radius: 0;
+  }
+  .message_send textarea {
+    border: 0;
+    resize: none;
+    padding-left: 10px;
+  }
+  .el-dialog__body {
+    .el-dialog__header {
+      padding-left: 15px;
+      background-color: #f3efeb;
+      height: 47px;
+      line-height: 47px;
+      border-bottom: solid 1px #d5d5d5;
+    }
+    .el-dialog__title {
+      color: #333;
+      font-size: 16px;
+      font-weight: 700;
+      font-family: "微软雅黑"
+    }
+    .el-dialog__close {
+      color: #de5237;
+    }
+  }
+  .message_send textarea {
+    height: 63px;
+  }
+}
+
+.user-info-dialog {
+  .el-dialog {
+    top: 50%;
+    left: 39%;
+    width: 16%;
+  }
+  .el-dialog:before {
+    content: " ";
+    position: absolute;
+    bottom: 100%;
+    left: 20px;
+    border: 6px solid transparent;
+    border-bottom-color: #fff;
+  }
+}
+
+//qr-code
+
+.add-code {
+  .el-menu--horizontal .el-menu-item {
+    height: 50px;
+    line-height: 50px;
+  }
+  .el-menu-item.is-active {
+    border-bottom: none;
+    color: #48576a;
+  }
+  .el-menu--horizontal .el-menu-item {
+    float: left;
+  }
+  .code-main {
+    padding-top: 53px;
+  }
+  .navbar-container {
+    .router-link-active .el-menu-item {
+      border-bottom: 5px solid #4d84ba;
+      color: #4d84ba;
+    }
+  }
+  .child-code {
+    padding: 20px;
+    background: #fff;
+    min-height: 450px;
+  }
+  .show-all-btn {
+    float: right;
+    height: 100%;
+    padding: 0;
+    padding-right: 5px;
+    border: none;
+    background-color: inherit;
+  }
+  tbody {
+    .cell {
+      border-bottom: 1px solid #ccc;
+    }
+  }
+  .el-input.is-disabled {
+    .el-input__inner {
+      background-color: #fff;
+      color: #000;
+    }
+  }
+  .el-textarea.is-disabled {
+    .el-textarea__inner {
+      background-color: #fff;
+      color: #000;
+    }
+  }
+  .code-list {
+    .el-table {
+      height: 400px;
+      overflow-y: auto;
+    }
+  }
+  .el-select {
+    width: 100%;
+  }
+  .connected-car {
+    .el-select {
+      width: auto;
+    }
+  }
+  .code-edit-bar {
+    position: absolute;
+    left: 250px;
+    top: 200px;
+    ul {
+      padding: 0;
+      margin-left: 10px;
+      li {
+        margin-top: 10px;
+        .el-button--small {
+          padding: 4px 5px;
+        }
+      }
+    }
+  }
+  .el-date-editor--date {
+    width: 100%;
+  }
+
+  .qr-code-container {
+    margin-left: 50px;
+    text-align: center;
+    img {
+      width: 100px;
+    }
+  }
+}
+
+.code-part {
+  .el-date-editor.el-input {
+    width: 100%;
+  }
+}
+
+.item-wrapper-img {
+  height: 175px;
+  overflow: hidden;
+  display: table-cell;
+  display: block\0;
+  vertical-align: middle;
+  border-bottom: solid 1px #dedede;
+  padding: 4px;
+  line-height: 0;
+  width: 1000px;
+  width: 100%\0;
+  text-align: center;
+}
+
+.item-wrapper-img img {
+  max-height: 100%;
+  max-width: 100%;
+  position: relative;
+  top:50%;
+  transform: translateY(-50%);
+  -webkit-transform: translateY(-50%);
+
+}
+
+// 标签管理
+.container {
+  position: absolute;
+  top: 111px;
+  background: #fff;
+  border: solid 1px #c6cad6;
+  bottom: 20px;
+  right: 20px;
+  left: 20px;
+  padding: 20px;
+}
+
+.userlabel-content {
+  height: 100%;
+}
+
+.userlabel-tree {
+  overflow: auto;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 45px;
+  border-radius: 5px;
+}
+
+.icon-wrapper:hover {
+  background: #61c2c4
+}
+
+.icon-wrapper:hover svg, .delete:hover .icon-edit1 {
+  fill: #fff;
+}
+
+.dashboard-container {
+  clear: both;
+}
+
+//disabled
+.is-disabled {
+  svg {
+    fill: #bfcbd9;
+  }
+}
+
+.triangle-topright {
+  position: absolute;
+  right: 15px;
+  top: 0;
+  width: 0;
+  height: 0;
+  border-top: 60px solid rgba(0, 0, 0, 0.4);
+  border-left: 60px solid transparent;
+  z-index: 999;
+}
+
+.checkbox-normal {
+  width: 22px;
+  height: 22px;
+  position: absolute;
+}
+
+.item-checkbox-topleft {
+  left: 20px;
+  top: 5px;
+  z-index: 999;
+  //top: 1px;
+  //left: 0;
+}
+
+.triangle-topleft {
+  position: absolute;
+  left: 15px;
+  top: 0;
+  width: 0;
+  height: 0;
+  border-top: 60px solid rgba(108,226,108, 0.4);
+  border-right: 60px solid transparent;
+  z-index: 999;
+}
+
+.count-contaner {
+  .el-form-item__content {
+    margin-left: 0 !important;
+  }
+}
+
+.material-select-btn {
+  display: inline-block;
+  button {
+    border: 0;
+  }
+}
+
+//小分页
+.small-page {
+  margin-top: 4px;
+  position: relative;
+  height: 33px;
+  .el-pager li.active + li {
+    border-left: 0;
+  }
+  .el-pagination .btn-next, .el-pagination .btn-prev {
+    border: 0;
+    padding-top: 5px;
+  }
+  .el-pagination {
+    position: absolute;
+    right: 0;
+  }
+  .message-filter-icon {
+    position: absolute;
+    left: 5px;
+    padding: 0;
+    border: 0;
+    top: 10px;
+    display: inline-block;
+  }
+  .el-input {
+    width: 80px;
+  }
+  .el-input__inner {
+    height: 28px;
+  }
+  .el-autocomplete {
+    width: 100%;
+  }
+  .search-bar-btn {
+    position: absolute;
+    top: 5px;
+    right: 10px;
+    height: 28px;
+    padding: 4px 15px;
+  }
+  .search-bar {
+    height: 37px;
+    width: 100%;
+    position: absolute;
+    bottom: 33px;
+    background: #fff;
+    left: 0;
+    border-bottom: 1px solid #ccc;
+  }
+}
+
+.card-container {
+  .card-wrapper {
+    max-width: 100%;
+    width: 150px;
+    height: 78px;
+    background-color: white;
+    border-radius: 5px;
+  }
+  .card-body {
+    border-bottom: dashed 1px gray;
+    height: 50px;
+  }
+  .card-img-container {
+    float: left;
+    margin: 10px;
+    height: 30px;
+    width: 20%;
+    img {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+    }
+  }
+  .card-title {
+    margin-top: 15px;
+    float: left;
+    width: 50%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .card-foot {
+    font-size: 12px;
+    color: gray;
+    text-align: center;
+  }
+  .push-msg-card-foot{
+    padding: 10px;
+  }
+}
+
+
+// 消息提示
+.msg-error{
+    background-color: #e44c3c;
+    // border:solid 1px #fedddd;
+}
+.msg-error .errorCode{
+    font-size:12px;color:#f99;
+}
+.msg-error:before{
+    content: "\D7";background-color: #ac382c;
+}
+.msg-success:before{
+    content: "\2714";background-color:#1c8048;
+}
+.msg-error:before,.msg-success:before{
+    width: 62px;
+    height: 52px;
+    display: block;
+    float: left;
+    font-size: 28px;
+    font-weight: 700;
+    text-align: center;
+    line-height: 52px;
+    color: #fff;
+}
+.msg-success{
+    background-color: #24ac60;
+    // border:solid 1px #fedddd;
+}
+.reply-message-container{
+  overflow: hidden;
+}
+
+
+//行内多行表格
+.filter-table .el-table__row .cell{
+  height: auto;
+  padding: 0;
+}
+
+.inner-table {
+  border: 0;
+  .el-table__header {
+    display: none;
+  }
+  .el-table__row td:last-child{
+    border: 0;
+  }
+  .el-table__row>td:last-child{
+    border: 0;
+  }
+}
+
+//问卷
+.question-item{
+  .option-item{
+    margin-bottom: 20px;
+    .el-form-item__label{
+      width: 40px!important;
+    }
+    .el-form-item__content{
+      margin-left: 40px!important;
+    }
+  }
+  .title{
+    margin-left: 10px;
+  }
+}
+.report-btn{
+  width: 82px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 12px;
+  border-radius: 4px;
+  padding: 0 14px;
+  letter-spacing: 1px;
+}
+
+.underline{
+  color: #0000cc;
+  text-decoration:underline;
+}
+
+.box-show{
+  .corner{
+    display:none;
+  }
+}
+
+.box-show:hover{
+  .corner{
+    display:block;
+  }
+}
+
+.box-show .corner-show{
+  display:block !important;
+}
+
+
+
+.material-tag-topright {
+  position: absolute;
+  right: 0;
+  top: 5px;
+  width: 0;
+  height: 0;
+  margin-right: 50px;
+  z-index: 999;
+}
+.material-tag-item {
+  margin-top: 5px;
+  margin-left: 5px;
+  line-height: 30px;
+  color: #409EFF;
+}
+.bookmark-box {
+  width: 50px;
+  height: 33px;
+  background: url("../bookmarks.png") no-repeat;
+  background-size:cover;
+  opacity:0.85;
+  filter:Alpha(opacity=85); /* IE8 以及更早的浏览器 */
+  transform: rotate(-15deg);
+  -ms-transform: rotate(-15deg);
+  /* IE 9 */
+  -webkit-transform: rotate(-15deg);
+  /* Safari and Chrome */
+  -o-transform: rotate(-15deg);
+  /* Opera */
+  -moz-transform: rotate(-15deg);
+  /* Firefox */
+}
+
+.icon-info{
+  width: 26px;
+  height: 26px;
+  //fill: #4d84b;
+}
+
+.icon-enable1,.icon-disable1{
+  width: 26px;
+  height: 26px;
+}
+
+.icon-enable {
+  overflow: hidden;
+  width: 13px;
+  height: 13px;
+  fill: #ffffff;
+  vertical-align: middle;
+  position: relative;
+  right: 0;
+  bottom: 1px;
+}
+.icon-disable{
+  overflow: hidden;
+  width: 13px;
+  height: 13px;
+  fill: #ffffff;
+  vertical-align: middle;
+  position: relative;
+  right: 0;
+  bottom: 1px;
+}