@bytenew/bn-bus-ui 1.1.399

package/common.scss

@@ -0,0 +1,715 @@
+/** 关于 sass
+*       完全兼容 CSS3
+*       在 CSS 基础上增加变量、嵌套 (nesting)、混合 (mixins) 等功能
+*       通过函数进行颜色值与属性值的运算
+*       提供控制指令 (control directives)等高级功能
+*       自定义输出格式
+**/
+
+//对所有元素，选择使用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;
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+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: relative;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #f5f5f7;
+}
+
+//没有数据时提示文字的样式
+.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;
+}
+
+// 数字、字母超出换行
+.w-word-wrap {
+  word-wrap: break-word
+}
+
+.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;
+}
+
+/**
+ * 动态生成padding和margin类
+ * 范围：0-50px
+ * 示例：
+ *   .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;
+  }
+}
+
+/**
+ * 动态生成字体大小类
+ * 范围：12-50px
+ * 示例：
+ *   .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;
+  }
+}
+
+.w-font-weight {
+  font-weight: bold;
+}
+
+/**
+ * 动态生成字重类
+ * 范围：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;
+  }
+}
+
+//添加下划线
+.w-text-underline {
+  text-decoration: underline
+}
+
+// 定义颜色变量映射
+$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;
+    }
+  }
+}
+
+/**
+ * 动态生成边框类
+ * 样式：solid(实线)、dashed(虚线)、dotted(点线)
+ * 方向：all(四周)、top、right、bottom、left
+ * 粗细：1px(普通)、2px(粗体)
+ * 示例：
+ *   .w-border-solid { border: 1px solid #E9E9E9; }
+ *   .w-border-dashed-top { border-top: 1px dashed #E9E9E9; }
+ *   .w-border-solid-bold-left { border-left: 2px solid #E9E9E9; }
+ */
+// 定义边框样式映射
+$border-styles: (
+        'solid': solid,
+        'dashed': dashed,
+        'dotted': dotted
+);
+
+// 定义边框方向映射
+$border-directions: (
+        '': 'all',
+        '-top': top,
+        '-right': right,
+        '-bottom': bottom,
+        '-left': left
+);
+
+// 生成边框类
+@each $style-name, $style in $border-styles {
+  @each $direction-suffix, $direction in $border-directions {
+    // 1px边框
+    .w-border-#{$style-name}#{$direction-suffix} {
+      @if $direction == 'all' {
+        border: 1px #{$style} #E9E9E9;
+      } @else {
+        border-#{$direction}: 1px #{$style} #E9E9E9;
+      }
+    }
+
+    @for $i from 2 through 10 {
+      .w-border-#{$style-name}#{$direction-suffix}#{$i} {
+        @if $direction == 'all' {
+          border: #{$i}px #{$style} #E9E9E9;
+        } @else {
+          border-#{$direction}: #{$i}px #{$style} #E9E9E9;
+        }
+      }
+
+    }
+  }
+}
+
+/**
+ * 动态生成flex间隔类
+ * 范围：10-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 1 through 50 {
+  // 普通间隔（行列间隔相同）
+  .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-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-black3,
+.w-color-black4,
+.w-color-black5,
+.w-color-black6,
+.w-color-black7,
+.w-color-black8,
+.w-color-black85,
+.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
+{}
+
+//覆盖elementUI相关组件样式，写在最下面
+.el-timeline.is-start{
+  padding-left: 0;
+}
+
+.e-clear-tabs-border {
+  .el-tabs__nav-wrap::after {
+    display: none;
+  }
+}
+
+//Message 消息提醒样式重写
+.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;
+}
+
+.el-button{
+  border-radius: 4px;
+}