DataDisplayPlatform_WebApp/src/components/Warning.vue

<template>
  <div class="warning df aic jcc">
    <img :src="exchangeUrl('warning')" alt="" />
    <div>预警 :</div>
    <div>小洋山港进入枯水期</div>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { mapState } from "vuex";

export default {
  setup() {
    function init() {}
    function exchangeUrl(icon) {
      return `/${icon}.png`;
    }
    onMounted(() => {
      init();
    });
    return {
      init,
      exchangeUrl,
    };
  },
};
</script>
<style lang="scss" scoped>
.warning {
  height: 34px;
  background: rgba(134, 172, 232, 0.2);
  border-radius: 2px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff3ec;
  img {
    height: 25px;
    width: 23px;
    margin-right: 14px;
  }
}
</style>