DangerTips.vue

<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2023-02-01 09:37:02
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2023-02-01 09:59:55
 * @FilePath: /danger-manage-web/src/views/dangerScale/profile/tiops.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="danger-tips">
    <!-- <div>管道压力</div> -->
    <div class="hasColorBox" :style="{ color: dangerColor['1'] }">
      <div :style="{ backgroundColor: dangerColor['1'] }"></div>
      <span>重大风险</span>
    </div>
    <div class="hasColorBox" :style="{ color: dangerColor[`2`] }">
      <div :style="{ backgroundColor: dangerColor[`2`] }"></div>
      <span>较大风险</span>
    </div>
    <div class="hasColorBox" :style="{ color: dangerColor[`3`] }">
      <div :style="{ backgroundColor: dangerColor[`3`] }"></div>
      <span>一般风险</span>
    </div>
    <div class="hasColorBox" :style="{ color: dangerColor[`4`] }">
      <div :style="{ backgroundColor: dangerColor[`4`] }"></div>
      <span>低风险</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      dangerColor: {
        1: "red",
        2: "orange",
        3: "yellow",
        4: "blue",
      },
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.danger-tips {
  position: absolute;
  color: #fff;
  left: 10px;
  top: 10px;
  padding: 1px;
  padding-left:10px;
  width: 150px;
  // background: rgba(6, 29, 51, 0.2);
  .hasColorBox {
    // border: 1px solid #053b6a;
    padding: 2px 5px;
    margin-bottom: 5px;
    position:relative;
    & > div {
      display: inline-block;
      width: 50px;
      height: 20px;
      margin-right: 10px;
    }
    & > span {
      position:absolute;
      display: inline-block;
      width: 100px;
    }

  }
}
</style>