pikachu-fe/src/styles/common.scss

/* 面板 */
#app {
  min-width: 1440px;
}

.app-main {
  background-color: #f0f2f5;
}

.app-container {
  margin: 20px;
  background-color: #fff;
  &.has-nav {
    padding: 0;
  }
  .filter {
    border-bottom: 1px dashed #dcdfe6;
    margin-bottom: 22px;

    &.multiple {
      padding-bottom: 0;
    }
  }
}

.main-content {
  padding: 30px;
}

/* 盒子 */
.dis-b {
  display: block;
}

.w100 {
  width: 100%;
}

.pd-20 {
  padding: 20px;
}

.pdt-20 {
  padding-top: 20px;
}
.pdr-20 {
  padding-right: 20px;
}
.pdb-20 {
  padding-bottom: 20px;
}
.pdl-20 {
  padding-left: 20px;
}

.mg-20 {
  margin: 20px;
}
.mgt-20 {
  margin-top: 20px;
}
.mgr-20 {
  margin-right: 20px;
}
.mgb-20 {
  margin-bottom: 20px;
}
.mgl-20 {
  margin-left: 20px;
}

/* 浮动 */

.fl {
  float: left;
}

.fr {
  float: right;
}

.clear:after {
  content: '';
  display: table; // 也可以是'block'，或者是'list-item'
  clear: both;
}

/* 背景 */
.bg-fff {
  background-color: #fff;
}

/* 文字颜色 */
.c-t-1 {
  color: #303133;
}

.c-t-2 {
  color: #606266;
}

.c-t-3 {
  color: #909399;
}

.c-t-4 {
  color: #c0c4cc;
}

/* 对齐方式 */
.al-r {
  text-align: right;
}

.al-c {
  text-align: center;
}

/* 文字粗细 */
.fw-700 {
  font-weight: 700;
}

.fw-500 {
  font-weight: 500;
}

/* 图片 */
.img-fit {
  width: 100%;
  min-height: 100%;
}

/* 位置 */
.p-r {
  position: relative;
}

/* 其他 */
.ell {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* jsoneditor-vue */
.jsoneditor-vue {
  .jsoneditor {
    border: 1px solid #dcdfe6;
    border-radius: 4px;
  }

  .ace-jsoneditor .ace_gutter {
    background-color: #f5f5f5;
  }

  .jsoneditor-menu {
    background-color: #dcdcdc;
    border-bottom: 1px solid #dcdcdc;
  }
  .jsoneditor-contextmenu ul li button.jsoneditor-selected,
  div.jsoneditor-contextmenu ul li button.jsoneditor-selected:hover,
  div.jsoneditor-contextmenu ul li button.jsoneditor-selected:focus {
    background-color: #409eff;
  }
}

/* uploader */
.uploader-box {
  .el-form-item__content {
    line-height: 0;
  }
  .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .el-upload:hover {
    border-color: #409eff;
  }

  .uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .uploader-img {
    width: 100px;
    height: 100px;
    display: block;
  }

  .el-upload__input {
    display: none;
  }
}

/* input */
.ipt-tip {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: #c0c4cc;
}

/* vue-editor */
.quillWrapper {
  line-height: 1.5;
  .ql-toolbar.ql-snow {
    border: 1px solid #dcdfe6;
    border-radius: 4px 4px 0 0;
  }
  .ql-container.ql-snow {
    border: 1px solid #dcdfe6;
    border-radius: 0 0 4px 4px;
  }
}

/* 分割线 */
.divider {
  margin: 10px 0 30px;
  border-bottom: 1px dashed #dcdfe6;
}