@bytenew/bn-applet-ui 1.1.10

package/common.scss

@@ -0,0 +1,1358 @@
+/** =============================================
+ *  第一部分：公共基础样式（与 BnBusUi/common.scss 相同）
+ *  说明：以下样式与 bn-components-v3/BnBusUi/common.scss 保持一致
+ * ============================================= */
+
+//对所有元素，选择使用IE的怪异盒模型 wid = padding + wid;
+* {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+*:before, *:after {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+input[type="radio"] {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+input[type="search"] {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  -webkit-appearance: textfield;
+}
+
+//重写p标签样式   去掉margin-bottom
+p {
+  margin-bottom: 0 !important;
+}
+
+//改变浏览器滚动条默认样式，但其实我们引用了vue-scroll用来做模拟滚动条。
+::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+
+::-webkit-scrollbar-track-piece {
+  -webkit-border-radius: 8px;
+}
+
+::-webkit-scrollbar-thumb:vertical {
+  height: 10px;
+  background-color: rgba(144, 147, 153, .3);
+  -webkit-border-radius: 6px;
+}
+
+::-webkit-scrollbar-thumb:horizontal {
+  width: 10px;
+  background-color: rgba(144, 147, 153, .3);
+  -webkit-border-radius: 6px;
+}
+
+//清除元素默认样式，选择默认字体
+#app, html, body {
+  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif;
+  margin: 0;
+  background-color: #f9f9fb !important;
+}
+
+input, button {
+  font-family: "PingFang SC", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Source Han Sans", "Noto Sans CJK Sc", "Microsoft YaHei", "Microsoft Jhenghei", sans-serif;
+}
+
+ul, li {
+  margin: 0;
+  padding: 0;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+input::-webkit-input-placeholder {
+  color: #A9AAAA;
+}
+
+input::-moz-placeholder {
+  color: #A9AAAA;
+}
+
+input:-moz-placeholder {
+  color: #A9AAAA;
+}
+
+input:-ms-input-placeholder {
+  color: #A9AAAA;
+}
+
+// 处理input type = number的上下箭头
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}
+
+input[type="number"] {
+  -moz-appearance: textfield;
+}
+
+a:hover {
+  text-decoration: none;
+  text-underline: none;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+// 默认容器样式，占满屏幕，存在滚动条
+.w-source {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #f5f5f7;
+}
+
+// 数字、字母超出换行
+.w-word-wrap {
+  word-wrap: break-word
+}
+
+//没有数据时提示文字的样式
+.w-empty {
+  width: 100%;
+  line-height: 48px;
+  font-size: 12px;
+  color: #999;
+  text-align: center;
+}
+
+//文案提示样式
+.w-tip {
+  font-size: 14px;
+  padding: 10px;
+  border: 1px solid;
+  border-radius: 4px;
+  border-color: #eee;
+  background: #FAFAFA;
+  color: #666;
+
+  &.success {
+    border-color: #bee0ad;
+    background: #f0f9eb;
+    color: #67c23a;
+  }
+
+  &.info {
+    border-color: #b9d9fd;
+    background: #ecf5ff;
+    color: #409eff;
+  }
+
+  &.warn {
+    border-color: #f0c98e;
+    background: #fdf6ec;
+    color: #e6a23c;
+  }
+
+  &.err {
+    border-color: #f2c8c8;
+    background: #fef0f0;
+    color: #f56c6c;
+  }
+
+  &.no-border {
+    border: none;
+  }
+
+  &-num {
+    font-size: 14px;
+    font-weight: bold;
+    color: #409EFF;
+    margin-right: 6px;
+  }
+}
+
+//弹性布局 wrap换行 默认是不换行
+.w-flex-wrap {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  flex-wrap: wrap;
+}
+
+/*
+左右方向
+flex-start（默认值）：左对齐
+flex-end：右对齐
+center： 居中
+space-between：两端对齐，项目之间的间隔都相等。
+space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
+*/
+//左右两端
+.w-flex-between {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  justify-content: space-between;
+}
+
+//左右靠左
+.w-flex-left {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  justify-content: flex-start;
+}
+
+//左右靠右
+.w-flex-right {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  justify-content: flex-end;
+}
+
+//横向居中，左右居中
+.w-flex-lrCenter {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  justify-content: center;
+}
+
+/*
+上下方向
+flex-start：交叉轴的起点对齐。
+flex-end：交叉轴的终点对齐。
+center：交叉轴的中点对齐。
+baseline: 项目的第一行文字的基线对齐。
+stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
+*/
+//上下居中
+.w-flex-center {
+  display: flex;
+  align-items: center;
+}
+
+//上下靠上
+.w-flex-top {
+  display: flex;
+  align-items: flex-start;
+}
+
+//上下靠下
+.w-flex-bottom {
+  display: flex;
+  align-items: flex-end;
+}
+
+//上下靠下
+.w-flex-baseline {
+  display: flex;
+  align-items: baseline;
+}
+
+/**
+ * 动态生成flex间隔类
+ * 范围：4-30px
+ * 示例：
+ *   .w-flex-gap10 { gap: 10px !important; }
+ *   .w-flex-column-gap20 { column-gap: 20px !important; }
+ *   .w-flex-row-gap15 { row-gap: 15px !important; }
+ */
+@for $i from 4 through 30 {
+  // 普通间隔（行列间隔相同）
+  .w-flex-gap#{$i} {
+    display: flex;
+    gap: #{$i}px !important;
+  }
+
+  // 列间隔（水平方向）
+  .w-flex-column-gap#{$i} {
+    display: flex;
+    column-gap: #{$i}px !important;
+  }
+
+  // 行间隔（垂直方向）
+  .w-flex-row-gap#{$i} {
+    display: flex;
+    row-gap: #{$i}px !important;
+  }
+}
+
+/**
+ * 动态生成padding和margin类
+ * 范围：0-60px
+ * 示例：
+ *   .w-padding20 { padding: 20px !important; }
+ *   .w-padding-left30 { padding-left: 30px !important; }
+ *   .w-margin15 { margin: 15px !important; }
+ *   .w-margin-top25 { margin-top: 25px !important; }
+ */
+@for $i from 0 through 60 {
+  // padding类
+  .w-padding#{$i} {
+    padding: #{$i}px !important;
+  }
+
+  .w-padding-left#{$i} {
+    padding-left: #{$i}px !important;
+  }
+
+  .w-padding-right#{$i} {
+    padding-right: #{$i}px !important;
+  }
+  .w-padding-lr#{$i} {
+    padding-left: #{$i}px !important;
+    padding-right: #{$i}px !important;
+  }
+
+  .w-padding-top#{$i} {
+    padding-top: #{$i}px !important;
+  }
+
+  .w-padding-bottom#{$i} {
+    padding-bottom: #{$i}px !important;
+  }
+  .w-padding-tb#{$i} {
+    padding-top: #{$i}px !important;
+    padding-bottom: #{$i}px !important;
+  }
+
+  // margin类
+  .w-margin#{$i} {
+    margin: #{$i}px !important;
+  }
+
+  .w-margin-left#{$i} {
+    margin-left: #{$i}px !important;
+  }
+
+  .w-margin-right#{$i} {
+    margin-right: #{$i}px !important;
+  }
+
+  .w-margin-lr#{$i} {
+    margin-left: #{$i}px !important;
+    margin-right: #{$i}px !important;
+  }
+
+  .w-margin-top#{$i} {
+    margin-top: #{$i}px !important;
+  }
+
+  .w-margin-bottom#{$i} {
+    margin-bottom: #{$i}px !important;
+  }
+
+  .w-margin-tb#{$i} {
+    margin-top: #{$i}px !important;
+    margin-bottom: #{$i}px !important;
+  }
+}
+
+/**
+ * 动态生成字体大小类
+ * 范围：10-60px
+ * 示例：
+ *   .w-font14 { font-size: 14px !important; }
+ *   .w-font24 { font-size: 24px !important; }
+ */
+@for $i from 10 through 60 {
+  .w-font#{$i} {
+    font-size: #{$i}px !important;
+  }
+}
+
+/**
+ * 动态生成字重类
+ * 范围：100-900，步进值100
+ * 示例：
+ *   .w-font-weight400 { font-weight: 400 !important; } // Regular
+ *   .w-font-weight700 { font-weight: 700 !important; } // Bold
+ */
+@for $i from 1 through 9 {
+  .w-font-weight#{$i * 100} {
+    font-weight: #{$i * 100} !important;
+  }
+}
+
+/**
+ * 动态生成行高类
+ * 范围：10-100px
+ * 示例：
+ *   .w-line-height32 { line-height: 32px !important; }
+ *   .w-line-height40 { line-height: 40px !important; }
+ */
+@for $i from 10 through 100 {
+  .w-line-height#{$i} {
+    line-height: #{$i}px !important;
+  }
+}
+
+// 定义颜色变量映射
+$colors: (
+        'black': black,
+        'black3': #333333,
+        'black4': #444444,
+        'black5': #555555,
+        'black6': #666666,
+        'black7': #777777,
+        'black8': #888888,
+        'black85': rgba(0, 0, 0, 0.85),
+        'black9': #999,
+        'white': #FFFFFF,
+        'red': #FF5F5F,
+        'blue': #409EFF,
+        'yellow': #F2DA04,
+        'gray': #999999,
+        'green': #3d8050,
+        'green-min': #50B34B,
+        'deep-orange': #FF5722,
+        'orange': #FA7D00,
+        'purple': #b662ff,
+        'pink': #FF6B9A,
+        'teal': #20B2AA,
+        'cyan': #1BCDDF,
+        'brown': #A5673F,
+        'indigo': #6610F2,
+        'lime': #CDDC39,
+        'amber': #FFC107,
+        'navy': #001F3F,
+        'olive': #808000,
+        'maroon': #800000,
+        'coral': #FF7F50,
+        'turquoise': #40E0D0,
+        'violet': #EE82EE,
+        'gold': #FFD700
+);
+
+// 使用@each生成颜色类
+@each $name, $color in $colors {
+  .w-color-#{$name} {
+    @if $name == 'black' {
+      color: $color !important;
+    } @else {
+      color: $color;
+    }
+  }
+}
+
+//添加下划线
+.w-text-underline {
+  text-decoration: underline
+}
+
+.w-font-weight {
+  font-weight: bold;
+}
+
+.clearFix:after {
+  display: block;
+  content: "";
+  clear: both;
+}
+
+.w-text-over {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.w-text-over-two {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+
+.w-text-over-three {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  -webkit-box-orient: vertical;
+}
+
+.w-text-center {
+  text-align: center;
+}
+
+.w-text-right {
+  text-align: right;
+}
+
+.w-text-left {
+  text-align: left;
+}
+
+.w-float-left {
+  float: left;
+}
+
+.w-float-right {
+  float: right;
+}
+
+.w-default-wrap {
+  position: relative;
+  width: 100%;
+}
+
+.w-default-hover:hover {
+  color: #2d8cf0;
+  cursor: pointer;
+}
+
+.w-cursor-pointer {
+  cursor: pointer;
+  outline: none;
+}
+
+// 基础类名声明（用于编辑器自动补全）
+.w-padding,
+.w-padding-left,
+.w-padding-right,
+.w-padding-lr,
+.w-padding-top,
+.w-padding-bottom,
+.w-padding-tb,
+.w-margin,
+.w-margin-left,
+.w-margin-right,
+.w-margin-top,
+.w-margin-bottom,
+.w-margin-lr,
+.w-margin-tb,
+.w-font-weight,
+.w-color-black,
+.w-line-height,
+.w-border-solid,
+.w-border-solid-top,
+.w-border-solid-right,
+.w-border-solid-bottom,
+.w-border-solid-left,
+.w-border-dashed,
+.w-border-dashed-top,
+.w-border-dashed-right,
+.w-border-dashed-bottom,
+.w-border-dashed-left,
+.w-border-dotted,
+.w-border-dotted-top,
+.w-border-dotted-right,
+.w-border-dotted-bottom,
+.w-border-dotted-left,
+.w-flex-gap,
+.w-flex-column-gap,
+.w-flex-row-gap,
+.w-color-black,
+.w-color-black85,
+.w-color-black3,
+.w-color-black4,
+.w-color-black5,
+.w-color-black6,
+.w-color-black7,
+.w-color-black8,
+.w-color-black9,
+.w-color-white,
+.w-color-red,
+.w-color-blue,
+.w-color-yellow,
+.w-color-gray,
+.w-color-green,
+.w-color-green-min,
+.w-color-orange,
+.w-color-purple,
+.w-color-pink,
+.w-color-teal,
+.w-color-cyan,
+.w-color-brown,
+.w-color-indigo,
+.w-color-lime,
+.w-color-amber,
+.w-color-deep-orange,
+.w-color-navy,
+.w-color-olive,
+.w-color-maroon,
+.w-color-coral,
+.w-color-turquoise,
+.w-color-violet,
+.w-color-gold
+{}
+
+
+/** =============================================
+ *  第二部分：BnAppletUi 独有样式（与 BnBusUi/common.scss 不同）
+ *  说明：以下样式为本项目独有，BnBusUi中不存在
+ * ============================================= */
+
+// 主题色相关
+.w-color-theme {
+  color: #2783F2;
+}
+
+.w-color-blue-deep {
+  color: #2783F2
+}
+
+.w-color-gray-deep {
+  color: #666666;
+}
+
+.w-color-black-deep {
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.w-color-black-deep4 {
+  color: #444444;
+}
+
+.w-color-light-gray {
+  color: #999999;
+}
+
+.w-tip-color {
+  color: #C6D9EE;
+}
+
+.w-font-color65{
+  color: rgba(0,0,0,0.65);
+}
+
+.w-font-color85{
+  color: rgba(0,0,0,0.85);
+}
+
+// 边框相关
+.w-border-dashed {
+  border-top: 1px dashed #E9E9E9;
+}
+
+.w-border-solid {
+  border-top: 1px solid #E9E9E9;
+}
+
+.w-border-bold {
+  border-top: 2px solid #E9E9E9;
+}
+
+.w-border-radius6 {
+  border-radius: 6px;
+}
+
+// 按钮相关
+.w-brain-input-radius6 .el-input__inner {
+  border-radius: 6px;
+}
+
+.w-brain-button{
+  border-radius: 6px;
+  padding: 9px 10px;
+  font-size: 12px;
+  font-weight: 400;
+  &:hover {
+    border-color: #409EFF;
+  }
+  .wicon{
+    font-size: inherit;
+  }
+}
+
+.w-button-border0 {
+  border: 0px;
+}
+
+// 字体相关
+.w-font-min {
+  font-size: 12px;
+}
+
+.w-font-more13 {
+  font-size: 13px;
+}
+
+.w-font-more {
+  font-size: 14px;
+}
+
+.w-font-weight4 {
+  font-weight: 400;
+}
+
+.w-font-max {
+  font-size: 16px;
+}
+
+.w-font-big {
+  font-size: 18px;
+}
+
+// 行高相关
+.w-line-height-text {
+  line-height: 32px;
+}
+
+.w-line-height26 {
+  line-height: 26px;
+}
+
+// 布局辅助
+.w-vertical-align-middle {
+  vertical-align: middle;
+}
+
+.flex-center{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.flex-evenly {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  justify-content: space-evenly;
+}
+
+.flex-between {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  justify-content: space-between;
+}
+
+.flex-start {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+}
+
+.flex-wrap {
+  display: flex;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  flex-wrap: wrap;
+}
+
+// KPI 指标卡片样式
+.w-kpi-warp {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  white-space: nowrap;
+  width: 100%;
+}
+
+.w-kpi-box {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 4px 0;
+  max-width: 100%;
+}
+
+.w-kpi-title {
+  color: #666;
+  max-width: 100%;
+  font-size: .4em;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.w-kpi-main {
+  color: #444;
+  max-width: 100%;
+  font-size: .9em;
+  font-family: AlibabaPuHuiTi, Avenir, wf_SegoeUI, "Segoe UI", Segoe, "Segoe WP", Tahoma, Verdana, Arial, sans-serif;
+  font-weight: 600;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  &.w-cursor-pointer {
+    color: #2783F2;
+  }
+}
+
+.w-kpi-footer {
+  color: #666;
+  max-width: 100%;
+  font-size: .35em;
+  font-weight: lighter;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.w-kpi-plus {
+  color: #FA5555;
+}
+
+.w-kpi-nge {
+  color: #170;
+}
+
+// 闪烁动画
+@keyframes flash {
+  0% {
+    background-color: transparent;
+  }
+  50% {
+    background-color: yellow;
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
+//富文本编辑器内table code blockquote等标签的自定义样式
+.w-editor-content {
+  /* table 样式 */
+  table {
+    border-top: 1px solid #ccc;
+    border-left: 1px solid #ccc;
+  }
+
+  table td,
+  table th {
+    border-bottom: 1px solid #ccc;
+    border-right: 1px solid #ccc;
+    padding: 3px 5px;
+  }
+
+  table th {
+    border-bottom: 2px solid #ccc;
+    text-align: center;
+  }
+
+  /* blockquote 样式 */
+  blockquote {
+    display: block;
+    border-left: 8px solid #d0e5f2;
+    padding: 5px 10px;
+    margin: 10px 0;
+    line-height: 1.4;
+    font-size: 100%;
+    background-color: #f1f1f1;
+  }
+
+  /* code 样式 */
+  code {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1;
+    background-color: #f1f1f1;
+    border-radius: 3px;
+    padding: 3px 5px;
+    margin: 0 3px;
+  }
+
+  pre code {
+    display: block;
+  }
+
+  /* ul ol 样式 */
+  ul, ol {
+    margin: 10px 0 10px 20px;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    animation: flash 0.5s ease infinite;
+  }
+}
+
+// 班牛旗帜颜色
+.flag-color-gray {
+  color: #999999;
+}
+
+.flag-color-red {
+  color: #EA3D3D;
+}
+
+.flag-color-yellow {
+  color: #FFC60B;
+}
+
+.flag-color-green {
+  color: #3ACB36;
+}
+
+.flag-color-blue {
+  color: #0664F0;
+}
+
+.flag-color-purple {
+  color: #BA2FFF;
+}
+
+.flag-color-orange {
+  color: #F48804;
+}
+
+.flag-color-lightBlue {
+  color: #41B4FA;
+}
+
+.flag-color-lightPink {
+  color: #E5B6B6;
+}
+
+.flag-color-bottleGreen {
+  color: #9BA217;
+}
+
+.flag-color-peach {
+  color: #E4248E;
+}
+
+// 青色（抖音的，在班牛没有这个颜色，班牛这边是深绿色）
+.flag-color-cyan {
+  color: #9BA217;
+}
+
+// 固定的不可变的UI统一图标颜色
+.icon-worksheet1 {
+  color: #2783F2 !important;
+}
+
+.icon-workflow2 {
+  color: #722ed1 !important;
+}
+
+.icon-board1 {
+  color: #52C41A !important;
+}
+
+.icon-folder3 {
+  color: #FAAD14 !important;
+}
+
+.icon-folder3-close {
+  color: #FAAD14 !important;
+}
+
+.icon-appletIcon {
+  color: #3370FF;
+}
+
+.icon-cooApp {
+  color: #ff4d4f;
+}
+
+
+/** =============================================
+ *  第三部分：Element UI 组件样式覆盖
+ *  说明：以下为覆盖 Element UI 组件的默认样式
+ * ============================================= */
+
+//Message 消息提醒样式重写（仿 Ant Design 风格）
+.el-message {
+  min-width: 0 !important;
+  padding: 10px 16px !important;
+  background-color: #fff !important;
+  border-radius: 4px !important;
+  border: none !important;
+  box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05) !important;
+  display: inline-flex !important;
+  align-items: center !important;
+
+  .el-message__icon {
+    margin-right: 10px !important;
+    flex-shrink: 0 !important;
+  }
+
+  .el-message__content {
+    font-size: 14px !important;
+    color: rgba(0, 0, 0, 0.85) !important;
+    line-height: 1.5715 !important;
+  }
+
+  .el-message__closeBtn {
+    color: rgba(0, 0, 0, 0.45) !important;
+    font-size: 12px !important;
+    top: 50% !important;
+    transform: translateY(-50%) !important;
+    &:hover {
+      color: rgba(0, 0, 0, 0.75) !important;
+    }
+  }
+}
+
+//MessageBox.confirm 样式重写
+.el-message-box__header {
+  padding: 15px !important;
+}
+
+.el-message-box__content {
+  padding: 15px !important;
+}
+
+.el-message-box__btns button:nth-child(2) {
+  margin-left: 15px !important;
+}
+
+.el-message-box {
+  padding-bottom: 15px !important;
+}
+
+.el-message-box__title {
+  color: #4D4D4D !important;
+}
+
+/*去除 dialog 组件 header部分的默认内边距*/
+.w-dialog {
+  .el-dialog__header {
+    padding: 0 !important;
+  }
+
+  &-title {
+    position: relative;
+    padding: 16px 20px;
+    font-size: 16px;
+    color: #666;
+    border-bottom: 1px solid #E9E9E9;
+  }
+
+  &-close {
+    position: absolute;
+    right: 10px;
+    top: 15px;
+    width: 20px;
+    height: 16px;
+    text-align: center;
+    line-height: 16px;
+    cursor: pointer;
+
+    span {
+      color: #999;
+      font-size: 14px;
+    }
+  }
+}
+
+.w-dialog-height {
+  height: calc(100% - 100px);
+}
+
+/* header和footer带边框的dialog，并修改对应button样式 */
+.w-dialog-border {
+  &.w-center {
+    margin-top: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  > .el-dialog__header {
+    font-size: 16px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+    line-height: 24px;
+    padding: 16px 24px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+
+    .el-dialog__title {
+      height: 24px;
+      font-size: 16px;
+      font-weight: 500;
+      color: rgba(0, 0, 0, 0.85);
+      line-height: 24px;
+    }
+
+    .el-dialog__headerbtn {
+      top: 16px;
+      right: 22px;
+
+      > i {
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 16px;
+
+        &:hover {
+          color: #2783f2;
+        }
+      }
+    }
+  }
+
+  > .el-dialog__body {
+    padding: 0;
+  }
+
+  > .el-dialog__footer {
+    padding: 10px 24px;
+    border-top: 1px solid rgba(0, 0, 0, 0.06);
+
+    > .w-dialog-border-footer {
+      position: relative;
+
+      > .el-button {
+        height: 32px;
+        padding: 5px 16px;
+
+        > span {
+          height: 22px;
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 22px;
+          vertical-align: middle;
+        }
+
+        &.el-button--default {
+          background: #fff;
+          color: rgba(0, 0, 0, 0.65);
+          border: 1px solid rgba(0, 0, 0, 0.15);
+
+          &:hover {
+            border-color: #2783f2;
+
+            > span {
+              color: #2783f2;
+            }
+          }
+        }
+
+        &.el-button--primary {
+          > span {
+            color: #fff;
+          }
+        }
+
+        &.el-button--primary:not(.is-disabled) {
+          border-color: #2783f2;
+          background: #2783f2;
+
+          &:hover {
+            background: rgba($color: #2783f2, $alpha: 0.9);
+          }
+        }
+
+        &.el-button--danger:not(.is-disabled) {
+          border-color: #FA5555;
+          background: #FA5555;
+
+          &:hover {
+            background: rgba($color: #FA5555, $alpha: 0.9);
+          }
+        }
+      }
+    }
+  }
+}
+
+/*去除 dialog 组件 默认的下边距*/
+.el-dialog {
+  margin-bottom: 0 !important;
+}
+
+/*默认去除弹框组件中dialog的body部分的内边距*/
+.el-dialog__body {
+  padding: 0 !important;
+  height: 100%;
+}
+
+/*默认去除弹框组件中popover的内边距*/
+.el-popover {
+  padding: 0 !important;
+  min-width: 50px !important;
+}
+
+/*去除颜色选择板清空按钮的多余内边距*/
+.el-color-dropdown__link-btn {
+  padding: 7px 5px !important;
+}
+
+/*Tabs组件去除头部的下边距margin*/
+.el-tabs {
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+}
+
+/*Select组件打开时的抖动问题*/
+.el-select__input {
+  vertical-align: baseline !important;
+}
+
+/*去除下拉菜单的默认上边距*/
+.el-dropdown-menu {
+  margin-top: 0 !important;
+}
+
+/*覆盖 select 组件的默认样式，用于高级筛选中计算条件的位置*/
+.height-search-select {
+  input {
+    border: none;
+    padding-left: 10px;
+    padding-right: 25px;
+    background: #F5F5F5;
+    color: #3BA3F8;
+  }
+}
+
+/*dialog 相关样式*/
+.w-edit-task-dialog {
+  height: calc(100% - 10px);
+}
+
+/*抽屉组件body的高度自适应100%*/
+.el-drawer__body {
+  height: 100%;
+}
+
+/*成员管理-添加部门/成员 dialog header - title字体居中设置*/
+.systemRole-content .el-dialog__header {
+  text-align: center;
+}
+
+/*成员管理-系统角色 dialog默认30%，这里需自定义设置最小宽度*/
+.systemRole .el-dialog {
+  min-width: 500px;
+}
+
+/*去除tabs组件底部边框*/
+.w-clear-tabs-border {
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+}
+
+/*标签组件的删除按钮的重定义*/
+.el-tag .el-icon-close {
+  top: 0 !important;
+  font-size: 14px !important;
+}
+
+.el-radio__label {
+  padding-left: 5px !important;
+  font-weight: 400;
+}
+
+/*解决在表格中悬浮提示的文字太宽的样式*/
+.el-tooltip__popper {
+  max-width: 300px;
+}
+
+/*工单表格中单元格的样式*/
+.w-project-table-cell {
+  padding: 0 !important;
+
+  .cell {
+    white-space: nowrap !important;
+  }
+}
+
+/*工单表格中单元格的样式*/
+.w-project-title-cell {
+  background: #F5F8FC !important;
+  padding: 4px 0 !important;
+  color: #666;
+
+  .cell {
+    white-space: nowrap !important;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
+/*工单表格横向滚动条，鼠标悬浮时变粗*/
+.el-table__body-wrapper::-webkit-scrollbar {
+  height: 14px !important;
+}
+
+.el-table__body-wrapper::-webkit-scrollbar-thumb:vertical {
+  height: 14px;
+  background-color: rgba(144, 147, 153, .3);
+  -webkit-border-radius: 8px;
+}
+
+/*工单表格中朴素单元格的样式*/
+.w-project-table-cell-s {
+  .cell {
+    white-space: nowrap !important;
+  }
+}
+
+/*工单表格子表单表格样式*/
+.w-project-table-child-form-row {
+  vertical-align: top !important;
+
+  .cell {
+    white-space: nowrap !important;
+  }
+}
+
+//element message-box 标题字号修改
+.el-message-box__title {
+  font-size: 16px;
+}
+
+//退款管理弹窗
+.refundInformation {
+  height: 100%;
+}
+
+.refundInformation .el-dialog {
+  height: calc(100% - 120px);
+}
+
+//新小程序列表页面修改tabs组件行高
+.w-set-tabs-line-height .el-tabs__nav-next, .w-set-tabs-line-height .el-tabs__nav-prev {
+  line-height: 58px !important;
+}
+
+.w-set-tabs-line-height .el-tabs__item {
+  height: 50px;
+  line-height: 50px;
+}
+
+/* 修改button primary 默认颜色 */
+.el-button--primary {
+  border-color: #2783F2;
+  background: #2783F2;
+
+  &:hover {
+    background: rgba($color: #2783F2, $alpha: 0.9);
+  }
+}
+
+.el-button{
+  border-radius: 4px;
+}
+
+.el-tabs__nav-wrap::after {
+  height: 1px;
+}
+
+//修复 Chrome 浏览器自动更新为checkbox默认添加margin-top:16px问题
+.el-checkbox {
+  margin-top: 0 !important;
+  padding-bottom: 0 !important;
+}