自定义封装对话框（dialog，节点内容的封装）

封装的对话框组件代码：

<!-- 自定义封装对话框 -->
<template>
  <div class="dia">
    <el-dialog
      title="haha"
      :visible.sync="visible"
      @close="$emit('update:show', false)"
      :show="show"
      width="30%"
      close-on-press-escape
    >
      <el-tabs :tab-position="tabPosition" style="height: 200px">
        <slot v-for="(item, index) in secData ? secData.flat() : secDate">
          <el-tab-pane :key="index" :class="flag === index ? 'isActive' : ''">
            <div slot="label" class="box first">
              <!-- 排名 -->
              <div
                class="ranking"
                :class="
                  index === 0
                    ? 'red'
                    : index === 1
                    ? 'orange'
                    : index === 2
                    ? 'yellow'
                    : 'hui'
                "
              >
                {{ index + 1 }}
              </div>
              <!-- 头像信息 -->
              <div class="img">
                <el-avatar :size="40" :src="item.circleUrl"></el-avatar>
              </div>
              <!-- 用户信息 -->
              <div class="info">
                <!-- 左边 -->
                <div class="i_left">
                  <span>~</span>
                  <span>今天天气真好啊</span>
                </div>
                <!-- 右边 -->
                <div class="i_right">
                  <span>{{ item.grade }}</span>
                  <span>14-21</span>
                </div>
              </div>
            </div>
            <!-- 显示的是内容 -->
            <div class="w_content">
              <div>{{item.id}}</div>
              <div class="block"></div>
              <!-- 底部固定 -->
              <div class="w_bottom">
                <div class="title">队列信息描述</div>
                <ul class="list">
                  <li>请谨防移动支付中的电信诈骗</li>
                </ul>
              </div>
            </div>
          </el-tab-pane>
        </slot>
      </el-tabs>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    secData: {
      type: Array,
    },
  },
  data() {
    return {
      visible: this.show,
      tabPosition: "left",
      secDate: [
        {
          id: 0,
          circleUrl:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 头像
          name: "先生",
          grade: 50.1,
        },
        {
          id: 1,
          circleUrl:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 头像
          name: "女士",
          grade: 49.1,
        },
        {
          id: 3,
          circleUrl:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 头像
          name: "先生",
          grade: 50.1,
        },
        {
          id: 4,
          circleUrl:
            "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png", // 头像
          name: "女士",
          grade: 60.1,
        },
      ],
      flag: 0, // 默认激活第一个
    };
  },
  methods: {
    QualityDialogClose() {
      this.$emit("update:QualityDialogFlag", false);
    },
  },
  watch: {
    show() {
      this.visible = this.show;
    },
  },
};
</script>
<style lang="less" scoped>
@c: white;
.test(@bc:white,@mr:5px) {
  content: "";
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 50%;
  background: @bc;
  vertical-align: middle;
  margin-right: @mr;
}
/* 对话框样式 */
/deep/ .el-dialog {
  width: 70% !important;
  height: 500px;
  .el-dialog__header {
    background-color: #3596c2;

    .el-dialog__title {
      color: @c;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: @c;
      font-size: 20px;
    }
  }
  .el-dialog__body {
    background-color: #213757;
    padding: 0;
    color: @c;
    position: relative;
    .el-tabs--left {
      height: 500px !important;
      .el-tabs__header {
        width: 255px;
        .el-tabs__item {
          color: @c;
          border-bottom: 1px solid rgb(65, 66, 65);
          height: 70px;
          padding: 0;
          .first {
            margin-top: 30px;
          }
          .box {
            width: 90%;
            margin: 0 auto;
            display: flex;
            overflow: hidden;
            .ranking {
              width: 20px;
              height: 20px;
              // border: 1px solid red;
              text-align: center;
              line-height: 20px;
              margin-right: 5px;
              background: red;
              color: white;
              margin-top: 25px;
            }
            .red {
              background: red;
            }
            .orange {
              background: #ee6509;
            }
            .yellow {
              background: rgb(245, 182, 8);
            }
            .hui {
              background: #86898f;
            }
            .img {
              margin-right: 10px;
              margin-top: 15px;
            }
            .info {
              display: flex;
              justify-content: space-between;
              font-size: 12px;
              height: 30px;
              flex-grow: 1;
              margin-top: 7px;
              .i_left {
                span:first-child {
                  height: 20px;
                  display: block;
                  text-align: left;
                }
              }
              .i_right {
                span:first-child {
                  height: 20px;
                  display: block;
                  text-align: right;
                  color: rgb(7, 105, 233);
                }
              }
            }
          }
        }
        .el-tabs__item.is-active {
          background: rgba(21, 37, 57, 0.6);
        }
      }
      .el-tabs__content {
        color: white;
        font-size: 12px;
        height: 100%;
        .w_content {
          .Summary {
            margin-top: 20px;
            .list {
              li {
                margin-top: 5px;
              }
              li:before {
                .test();
              }
            }
          }
          .w_bottom {
            position: fixed;
            bottom: 59px;
            left: 32%;
            width: 51.8%;
            z-index: 999;
            height: 80px;
            background-color: #213757;
            .title {
              margin-top: 20px;
            }
            .list {
              margin-top: 5px;
              li {
                color: #0d62a3;
              }
              li:before {
                .test(#0d62a3);
              }
            }
          }
          .block {
            height: 80px;
            width: 100%;
          }
        }
      }
      .el-tabs__content:hover {
        overflow-y: auto;
      }
      .el-tabs__content::-webkit-scrollbar {
        width: 2px;
      }

      .el-tabs__content::-webkit-scrollbar-track-piece {
        background-color: #fff;
      } /* 滚动条的内层滑轨背景颜色

     /* 滚动条的外层滑轨背景颜色 */
       .el-tabs__content::-webkit-scrollbar-track {
        background-color: #fff;
      } 
      .el-tabs__content::-webkit-scrollbar-thumb {
        background-color: #d4d8e2;
      } /* 滚动条的内层滑块颜色 */

      .el-tabs__content::-webkit-scrollbar-button {
        background-color: #fff;
        display: none;
      } /* 滑轨两头的监听按钮颜色 */
    }
  }
}

// 公共样式
ul li {
  list-style-type: none;
}
//去除顶部线
/deep/ .el-tabs--card > .el-tabs__header .el-tabs__nav {
  border: none;
}
</style>

对话框样式截图：