<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-10-18 15:15:04
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-10-18 15:47:15
 * @FilePath: \znxjxt-ui\src\views\big-screen\road-components\manage-maintain.vue
 * @Description: 道路资产大屏-管养道路统计
-->

<template>
  <div class="content">
    <div class="maintain-left">
      <span>{{ mileage }}</span
      >km
    </div>
    <div class="maintain-right">
      <span>{{ count }}</span
      >条
    </div>
  </div>
</template>

<script>
import { roadRankStatistics } from "@/api/xj/screen/road-screen";
export default {
  name: "ManageMaintain",
  data() {
    return {
      // 道路总里程
      mileage: "0",
      // 道路总数
      count: "0",
    };
  },
  created() {
    this.getRoadList();
  },
  methods: {
    getRoadList() {
      roadRankStatistics().then(({ code, data }) => {
        if (code === 200) {
          this.mileage = (data.mileage / 1000).toFixed();
          this.count = data.count;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  color: #ffffff;

  > div {
    width: 47%;
    height: 100%;
    padding-left: 3rem;
    line-height: 5rem;
    display: flex;
    justify-content: center;
    font-size: 1rem;
    color: #aac6c7;

    span {
      padding-right: 0.5rem;
      font-weight: 800;
      font-family: "DouYu";
      font-size: 1.2rem;
    }
  }

  .maintain-left {
    background-image: url("../../../assets/screen/road/maintain-left.png");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 100% 65%;

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

  .maintain-right {
    background-image: url("../../../assets/screen/road/maintain-right.png");
    background-repeat: no-repeat;
    background-position: 100%;
    background-size: 100% 65%;

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