@bytenew/bn-applet-ui 1.1.12 → 1.1.13

package/common.scss

@@ -1,1358 +1,1409 @@
-/** =============================================
- *  第一部分：公共基础样式（与 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;
+/** =============================================
+ *  第一部分：公共基础样式（与 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;
+}
+
+/**
+ * 动态生成字重类
+ * 范围：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;
+  }
+}
+
+// 定义颜色变量映射
+$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;
+}
+//0到100的循环生成类
+@for $i from 0 through 100 {
+  /**
+ * 动态生成flex间隔类
+ * 示例：
+ *   .w-flex-gap10 { gap: 10px !important; }
+ *   .w-flex-column-gap20 { column-gap: 20px !important; }
+ *   .w-flex-row-gap15 { row-gap: 15px !important; }
+ */
+  // 普通间隔（行列间隔相同）
+  .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;
+  }
+  /**
+ * 动态生成行高类
+ * 示例：
+ *   .w-line-height32 { line-height: 32px !important; }
+ *   .w-line-height40 { line-height: 40px !important; }
+ */
+  .w-line-height#{$i} {
+    line-height: #{$i}px !important;
+  }
+  /**
+ * 动态生成圆角类
+ * 示例：
+ *   .w-radius20 {  radius: 20px !important; }
+ */
+
+  .w-radius#{$i} {
+    border-radius: #{$i}px !important;
+  }
+  .w-radius-bl#{$i} {
+    border-bottom-left-radius:  #{$i}px !important;
+  }
+  .w-radius-br#{$i} {
+    border-bottom-right-radius:  #{$i}px !important;
+  }
+  .w-radius-tl#{$i} {
+    border-top-left-radius:  #{$i}px !important;
+  }
+  .w-radius-tr#{$i} {
+    border-top-right-radius:  #{$i}px !important;
+  }
+  /**
+ * 动态生成padding和margin类
+ * 示例：
+ *   .w-padding20 { padding: 20px !important; }
+ *   .w-padding-left30 { padding-left: 30px !important; }
+ *   .w-margin15 { margin: 15px !important; }
+ *   .w-margin-top25 { margin-top: 25px !important; }
+ */
+  // 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;
+  }
+  /**
+ * 动态生成字体大小类
+ * 示例：
+ *   .w-font14 { font-size: 14px !important; }
+ *   .w-font24 { font-size: 24px !important; }
+ */
+  .w-font#{$i} {
+    font-size: #{$i}px !important;
+  }
+}
+// 基础类名声明（用于编辑器自动补全）
+.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,
+.w-radius,
+.w-radius-bl,
+.w-radius-br,
+.w-radius-tl,
+.w-radius-tr,
+{}
+
+
+/** =============================================
+ *  第二部分：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 {
+  margin-bottom: 0 !important;
+  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;
+}
+/* 统一修改 element 走马灯组件样式 */
+.el-carousel.el-carousel--horizontal {
+  border-radius: 18px;
+  overflow: hidden;
+  border: 1px solid #e4e7ed;
+}
+
+.el-carousel__item {
+  border-radius: 18px;
+}
+
+.el-carousel__indicator {
+  .el-carousel__button {
+    height: 8px;
+    width: 8px;
+    border-radius: 4px;
+    background: #d7d5d5;
+  }
+
+  &.is-active {
+    .el-carousel__button {
+      background: #fff;
+      width: 24px;
+    }
+  }
+}
+
+//输入框圆角修改为8px
+.el-input__wrapper{
+  border-radius: 8px;
+}
+
+/* Element Plus Dialog 样式修改 */
+.el-dialog {
+  border-radius: 18px;
+  overflow: hidden;
+  margin-bottom: 0;
 }