图标替换

ZZJ

2021-11-22 ff58b3c203ab46d41e447ea428138ba31e3362df

 src/pages/internetEquipment/components/helemetHead.vue

@@ -1,59 +1,62 @@
<template>
  <div class="helemetHead">
      <headCard v-for="(item,index) in cardData"
    <headCard
      v-for="(item, index) in cardData"
      :key="index"
      :number="item.number"
      :info="item.info"
      :color="item.color"
      :src="cardImage[index]"
      />
    />

      <helemetEchart />

    <helemetEchart />
  </div>
</template>

<script>
import headCard from '@/pages/internetEquipment/components/headCard'
import helemetEchart from '@/pages/internetEquipment/components/helemetEchart'
import headCard from "@/pages/internetEquipment/components/headCard";
import helemetEchart from "@/pages/internetEquipment/components/helemetEchart";
import { getBanner } from "@/api/helemt";

export default {
    data (){
        return {
            cardData: [
                {number:233,info:"设备总量",color:"#4E94FF"},
                {number:34,info:"本月新增",color:"#FFAA44"},
                {number:45,info:"今日预警",color:"#FF6464"},
            ],
            cardImage: [
                '/images/InternetDevice/Group 441.png',
                '/images/InternetDevice/Group 367.png',
                '/images/InternetDevice/Group 368.png',
            ]
        }
    },
    components :{
        headCard,
        helemetEchart
    }

}
  async created() {
    const res = await getBanner();
  },
  data() {
    return {
      cardData: [
        { number: 233, info: "设备总量", color: "#4E94FF" },
        { number: 34, info: "本月新增", color: "#FFAA44" },
        { number: 45, info: "今日预警", color: "#FF6464" },
      ],
      cardImage: [
        "/images/InternetDevice/Group 441.png",
        "/images/InternetDevice/Group 367.png",
        "/images/InternetDevice/Group 368.png",
      ],
    };
  },
  components: {
    headCard,
    helemetEchart,
  },
};
</script>

<style scoped lang="scss">
.helemetHead {
    display: flex;
  display: flex;

    .head-card {
        margin-right: 10px;
    }
  .head-card {
    margin-right: 10px;
  }

    .helemet-echart {
        margin-left: 10px;
        width: 570px;
        height: 90px;
        box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
        border-radius: 15px;
    }
  .helemet-echart {
    margin-left: 10px;
    width: 570px;
    height: 90px;
    box-shadow: 0px 2px 10px rgba(141, 164, 187, 0.25);
    border-radius: 15px;
  }
}
</style>