修改 select 多选时的选项颜色， 修改浮标文字没有居中

src/assets/styles/realize/element-variables.scss

@@ -847,3 +847,30 @@ $typeMap: (primary:#3963BC,
     color: #3963BC;
   }
 }
+
+/* select */
+@include b(select) {
+  .el-tag {
+    background-color: #3963bc !important;
+    &__close.el-icon-close {
+      background-color: #3963bc;
+      right: -7px;
+      top: 0;
+      color: #fff;
+
+      &:hover {
+        background-color: #fff;
+        color: #3963bc;
+      }
+    }
+  }
+}
+
+/* Badge */
+
+@include b(badge) {
+  @include e(content) {
+    vertical-align: super;
+  }
+}
+

src/components/notify/notify.vue

@@ -191,14 +191,12 @@ export default {
   overflow: hidden;
   color: #c4c9d2;
 }
-</style>
-<style>
-.el-badge__content.is-fixed {
+.notify /deep/ .el-badge__content.is-fixed {
   transform-origin: center center;
   transform: translateY(-50%) translateX(100%) scale(0.8) !important;
 }
 
-.el-badge__content {
+.notify /deep/ .el-badge__content {
   border: 1px solid transparent !important;
   line-height: 20px !important;
 }

src/config/stage/plugins.js

@@ -1,10 +1,10 @@
 // 本文件是自动生成, 请勿修改
-import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
 import custom from '@/plugins/custom/stage-config'
+import LinCmsUi from '@/plugins/LinCmsUi/stage-config'
 
 const pluginsConfig = [
-  LinCmsUi,
   custom,
+  LinCmsUi,
 ]
 
 export default pluginsConfig

src/plugins/LinCmsUi/stage-config.js

@@ -132,6 +132,16 @@ const LinCmsUiRouter = {
           icon: 'iconfont icon-jiemiansheji',
           right: null,
         },
+        {
+          title: 'Steps 步骤条',
+          type: 'view',
+          name: null,
+          route: '/lin-cms-ui/navigation/steps',
+          filePath: 'plugins/LinCmsUi/views/navigation/Steps.vue',
+          inNav: true,
+          icon: 'iconfont icon-jiemiansheji',
+          right: null,
+        },
       ],
     },
     {

src/plugins/LinCmsUi/views/navigation/Steps.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="lin-container">
+    <div class="lin-title">Steps 步骤条</div>
+    <div class="lin-wrap-ui">
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>基础用法</span>
+        </div>
+        <el-row>
+          <div>
+            <el-steps :active="active" finish-status="success">
+              <el-step title="步骤 1"></el-step>
+              <el-step title="步骤 2"></el-step>
+              <el-step title="步骤 3"></el-step>
+              </el-steps>
+            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
+          </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{base}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+       <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>含状态步骤条</span>
+        </div>
+        <el-row>
+          <div>
+            <el-steps :space="200" :active="1" finish-status="success">
+              <el-step title="已完成"></el-step>
+              <el-step title="进行中"></el-step>
+              <el-step title="步骤 3"></el-step>
+            </el-steps>
+          </div>
+        </el-row>
+        <el-collapse class="test" style="color:red;">
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{title}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>有描述的步骤条</span>
+        </div>
+        <el-row>
+        <div>
+          <el-steps :active="1">
+          <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
+          <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
+          <el-step title="步骤 3" description="这段就没那么长了"></el-step>
+        </el-steps>
+        </div>
+        </el-row>
+        <el-collapse class="test" style="color:red;">
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{description}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>居中的步骤条</span>
+        </div>
+        <el-row>
+         <div>
+          <el-steps :active="2" align-center>
+            <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
+            <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
+            <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
+            <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
+          </el-steps>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{alignCenter}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+       <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>带图标的步骤条</span>
+        </div>
+        <el-row>
+         <div>
+          <el-steps :active="1">
+          <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+          <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+          <el-step title="步骤 3" icon="el-icon-picture"></el-step>
+        </el-steps>
+        </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{icon}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>竖式步骤条</span>
+        </div>
+        <el-row>
+          <div>
+          <div style="height: 300px;">
+            <el-steps direction="vertical" :active="1">
+              <el-step title="步骤 1"></el-step>
+              <el-step title="步骤 2"></el-step>
+              <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
+            </el-steps>
+          </div>
+          </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{vertical}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+
+      <el-card style="margin-bottom:50px;">
+        <div slot="header">
+          <span>简洁风格的步骤条</span>
+        </div>
+        <el-row>
+          <div>
+            <el-steps :active="1" simple>
+              <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+              <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+              <el-step title="步骤 3" icon="el-icon-picture"></el-step>
+            </el-steps>
+
+            <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+              <el-step title="步骤 1" ></el-step>
+              <el-step title="步骤 2" ></el-step>
+              <el-step title="步骤 3" ></el-step>
+            </el-steps>
+          </div>
+        </el-row>
+        <el-collapse>
+          <el-collapse-item title="查看代码" name="2">
+            <div style="white-space: pre-wrap;">{{simple}}</div>
+          </el-collapse-item>
+        </el-collapse>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  /* eslint-disable */
+  name: 'LinCmsUiButton',
+  components: {},
+  data() {
+    return {
+      active: 0,
+      base: `     
+        <el-steps :active="active" finish-status="success">
+          <el-step title="步骤 1"></el-step>
+          <el-step title="步骤 2"></el-step>
+          <el-step title="步骤 3"></el-step>
+        </el-steps>
+
+        <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
+
+        <script>
+          export default {
+            data() {
+              return {
+                active: 0
+              };
+            },
+
+            methods: {
+              next() {
+                if (this.active++ > 2) this.active = 0;
+              }
+            }
+          }
+        <\/script>`,
+      title: `
+        <el-steps :space="200" :active="1" finish-status="success">
+          <el-step title="已完成"></el-step>
+          <el-step title="进行中"></el-step>
+          <el-step title="步骤 3"></el-step>
+        </el-steps>`,
+      alignCenter: `
+        <el-steps :active="2" align-center>
+          <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
+          <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
+          <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
+          <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
+        </el-steps>`,
+      description: `
+        <el-steps :active="1">
+          <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>
+          <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>
+          <el-step title="步骤 3" description="这段就没那么长了"></el-step>
+        </el-steps>`,
+      icon: `
+        <el-steps :active="1">
+          <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+          <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+          <el-step title="步骤 3" icon="el-icon-picture"></el-step>
+        </el-steps>`,
+      vertical: `
+        <div style="height: 300px;">
+          <el-steps direction="vertical" :active="1">
+            <el-step title="步骤 1"></el-step>
+            <el-step title="步骤 2"></el-step>
+            <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>
+          </el-steps>
+        </div>`,
+      simple: `
+        <el-steps :active="1" simple>
+          <el-step title="步骤 1" icon="el-icon-edit"></el-step>
+          <el-step title="步骤 2" icon="el-icon-upload"></el-step>
+          <el-step title="步骤 3" icon="el-icon-picture"></el-step>
+        </el-steps>
+
+        <el-steps :active="1" finish-status="success" simple style="margin-top: 20px">
+          <el-step title="步骤 1" ></el-step>
+          <el-step title="步骤 2" ></el-step>
+          <el-step title="步骤 3" ></el-step>
+        /el-steps>`,
+    }
+  },
+  // 计算属性设置
+  computed: {},
+  // 数据变更监听
+  watch: {},
+  mounted() {
+    this.init()
+  },
+  methods: {
+    next() {
+      if (this.active++ > 2) this.active = 0
+    },
+    // 执行获取数据等初始化动作
+    init() {},
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../assets/style/container';
+.el-link+.el-link {
+  margin-left: 30px;
+}
+</style>