TBA_GXPT/ruoyi-ui/src/views/monitor/service/GwStatistic.vue

<template>
  <div shadow="always" class="gw-statistic boxShadow">
    <div class="gw-statistic-value" :style="{'color': color}" v-html="showValue">
    </div>
    <div class="gw-statistic-name" :style="{'background-color': color}">
      <slot name="name">
        {{ name }}
      </slot>
    </div>
  </div>
</template>
<script setup>
import {isString} from "@/utils/validate.js";

const emit = defineEmits(['update'])
const props = defineProps({
  name: {
    type: String,
    default: ""
  },
  value: {
    default: ""
  },
  color: {
    type: String,
    default: "#477ACF"
  },
})
const showValue = ref("")

watch(() => props.value, v => {
  if (v && isString(v)) {
    if (v.length > 11) {
      const index = Math.floor(v.length / 2)
      showValue.value = v.substring(0, index + 1) + '<br/>' + v.substring(index + 1)
      return
    }
  }
  showValue.value = v
}, {immediate: true})
</script>
<style scoped lang="scss">
.gw-statistic {
  width: 100%;
  height: 100%;;
  border-radius: 8px;
  background-color: white;


  .gw-statistic-name {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 100%;
    color: white;
    text-align: center;
    border-radius: 0 0 8px 8px;
    height: 30%;
  }

  .gw-statistic-value {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: bold;
    height: 70%
  }

}

.boxShadow {
  box-shadow: -8px 0 15px -10px rgba(0, 0, 0, 0.1), /* 左侧阴影 */
  8px 0 15px -10px rgba(0, 0, 0, 0.1); /* 右侧阴影 */
  transition: box-shadow 0.3s ease;
}
</style>