maotu-webtopo/src/components/vue-xq-test/vue-nitrogen-injection.vue

<template>
  <el-card class="card">
    <h3 class="cardHead">2号主变排油注氮灭火</h3>

    <div class="cardBody">
      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
        <el-col :span="12" class="full-width-col">
          <el-tag type="danger" size="large" class="full-width-tag">火灾探测器1</el-tag>
        </el-col>

        <el-col :span="12" class="full-width-col">
          <el-tag type="danger" size="large" class="full-width-tag">火灾探测器2</el-tag>
        </el-col>
      </el-row>

      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
        <el-col :span="12" class="full-width-col">
          <el-tag type="warning" size="large" class="full-width-tag">火灾探测器3</el-tag>
        </el-col>

        <el-col :span="12" class="full-width-col">
          <el-tag type="primary" size="large" class="full-width-tag">火灾探测器4</el-tag>
        </el-col>
      </el-row>

      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
        <el-col :span="12" class="full-width-col">
          <el-tag type="danger" size="large" class="full-width-tag">注氮阀</el-tag>
        </el-col>

        <el-col :span="12" class="full-width-col">
          <el-tag type="danger" size="large" class="full-width-tag">排油阀</el-tag>
        </el-col>
      </el-row>

      <el-row :gutter="0" style="display: flex; align-items: center" class="row-spacing">
        <el-col :span="12" class="full-width-col">
          <el-tag type="danger" size="large" class="full-width-tag">断流阀</el-tag>
        </el-col>

        <el-col :span="12" class="full-width-col">
          <el-tag type="primary" size="large" class="full-width-tag">氮气瓶</el-tag>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { computed, ref, watch, onMounted } from 'vue';

const props = defineProps({
  fontFamily: {
    type: String,
    default: 'Segoe UI'
  },
  fontSize: {
    type: Number,
    default: 14
  },
  testColor: {
    type: String,
    default: '#000000'
  },
  testBool: {
    type: Boolean,
    default: true
  }
});

let computedSize = computed({
  // 读取
  get() {
    return props.fontSize + 'px';
  }, // 修改
  set(val) {
    console.log('有人修改了fullName', val);
  }
});
</script>

<style scoped>
.row-spacing {
  margin-bottom: 10px; /* 每行之间的间隔 */
}

.full-width-col {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.full-width-tag {
  width: 85%; /* 填满父容器 */
  text-align: center; /* 文字水平居中 */
  display: flex; /* 使用 flexbox */
  justify-content: center; /* 文字水平居中 */
  align-items: center; /* 文字垂直居中 */
  font-size: v-bind('computedSize');
}

/* 闪烁动画 */
.blinking-tag {
  animation: blink 1s infinite; /* 1秒一次无限循环 */
}

@keyframes blink {
  0%,
  100% {
    opacity: 1; /* 完全不透明 */
  }
  50% {
    opacity: 0.3; /* 半透明 */
  }
}

.card {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* max-width: 480px; */
  color: v-bind('props.testColor');
  font-family: v-bind('props.fontFamily');
  /* font-family: 'Segoe UI'; */
  font-size: v-bind('computedSize' - 1);
}

.cardHead {
  margin: 0;
  padding: 0px;
  padding-bottom: 20px;
  text-align: center;
  color: #ffffff;
  font-size: v-bind('computedSize' + 2);
}
.cardBody {
  width: 100%;
  margin: 0 0%;
  padding: 0px 0%;
  /* padding-bottom: 15px; */
}
</style>