<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2026-01-12 14:23:40
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-01-12 14:31:29
 * @FilePath: /huaxindd-web/src/views/Ind2/components/Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="bottom">
    <div class="line-box" v-for="item in arr" :key="item.text">
      <div :style="{ background: item.color }" class="sq"></div>
      <div class="text">{{ item.text }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      arr: [
        {
          text: "低压",
          color: "#69FFA0",
        },
        {
          text: "中压",
          color: "#FF9869",
        },
        {
          text: "次高压",
          color: "#438EBA",
        },
        {
          text: "高压",
          color: "#FFE669",
        },
      ],
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.bottom {
  position: absolute;
  bottom: 10px;
  left: 50%;
  margin-left: -117px;
  width: 314px;
  display: flex;
  justify-content: space-between;
  .line-box {
    display: flex;
    align-items: center;
    .sq {
      width: 21px;
      height: 10px;
      border-radius: 3px;
      margin-right: 5px;
    }
    .text {
      font-size: 16;
      color: #fff;
    }
  }
}
</style>
