<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 10:25:29
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-22 09:30:43
 * @FilePath: \znxjxt-ui\src\views\big-screen\disease-components\work-order.vue
 * @Description: 病害巡检-工单统计
-->

<template>
  <div class="content">
    <div
      :class="`work-div-${index}`"
      v-for="(item, index) in workList"
      :key="`work-${index}`"
    >
      <span>{{ item.value }}</span>
    </div>
  </div>
</template>
  
  <script>
export default {
  name: "WorkOrder",
  data() {
    return {
      // 工单数据
      workList: [
        {
          value: 2565,
        },
        {
          value: 12,
        },
        {
          value: "22%",
        },
      ],
    };
  },
};
</script>
  
  <style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  color: #ffffff;

  > div {
    width: 30%;
    height: 100%;
    line-height: 8rem;
    display: flex;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 800;
    font-family: "DouYu";
  }

  .work-div-0 {
    background-image: url("../../../assets/screen/disease/work-div-0.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: 0 50%;

    span {
      background: linear-gradient(
        to bottom,
        #ffffff,
        #2773d0
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
    }
  }

  .work-div-1 {
    background-image: url("../../../assets/screen/disease/work-div-1.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: 0 50%;

    span {
      background: linear-gradient(
        to bottom,
        #ffffff,
        #E9BC5C
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
    }
  }

  .work-div-2 {
    background-image: url("../../../assets/screen/disease/work-div-2.png");
    background-repeat: no-repeat;
    background-size: 95%;
    background-position: 0 50%;

    span {
      background: linear-gradient(
        to bottom,
        #ffffff,
        #21F1E1
      ); /*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
      background-clip: text; /*将设置的背景颜色限制在文字中*/
      -webkit-text-fill-color: transparent; /*给文字设置成透明*/
    }
  }
}
</style>
  