bigScreen/src/views/pageMonitor/topLeft/index.vue

<template>
  <div class="w-[51.29vh] h-[39.62vh] bgTopLeftBox bg-contain bg-center bg-no-repeat p-[3vh] box-border">
    <section class="flex justify-between">
      <template v-for="(item, index) in overviewData">
        <div class="w-[12.96vh] h-[14.81vh] bgTopLeftItemBox bg-contain bg-no-repeat pl-[1.48vh] py-[0.92vh]" :key="index">
          <img src="@/assets/svg/Monitor/TopLeft/TriangleBlue.svg" />
          <p class="tracking-[0.27vh] text-[1.48vh] leading-none mt-[2vh] mb-[2vh] opacity-80">{{ item['itemName'] }}</p>
          <p class="">
            <span class="text-[4.25vh] youshe text-[#733FF3] leading-none">{{ item['itemVal'] }}</span>
            <span class="text-[2.22vh] youshe text-[#733FF3] leading-none">{{ item['itemUnit'] }}</span>
          </p>
        </div>
      </template>
    </section>
    <div class="w-[45.18vh] h-[14.81vh] bgTopLeftItemBoxPurple bg-contain bg-no-repeat mt-[3.7vh] px-[2.96vh] py-[2.4vh] flex justify-between items-center">
      <section>
        <div class="flex">
          <img src="@/assets/svg/Monitor/TopLeft/TrianglePurple.svg" />
          <span class="youshe text-[1.75vh] ml-[1.11vh] opacity-80">总人数</span>
        </div>
        <p class="text-[#B53FDF] text-[4.07vh] mt-[1.4vh] youshe leading-none">350</p>
      </section>
      <section>
        <template v-for="(item, index) in peopleData">
          <div class="w-[25.55vh] h-[4.07vh] peopleItemBox px-[2.22vh] flex justify-between items-center" :class="!index && 'mb-[1.85vh]'" :key="index">
            <div class="flex items-end">
              <img src="@/assets/svg/Monitor/TopLeft/PointPurple.svg" />
              <span class="text-[1.48vh] opacity-80 ml-[0.74vh]">{{ item['itemName'] }}</span>
            </div>
            <div class="flex items-center">
              <span class="text-[#B53FDF] text-[2.4vh] youshe">{{ item['itemVal'] }}</span>
              <span class="text-[1.11vh] opacity-65 ml-[0.74vh]">人</span>
            </div>
          </div>
        </template>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      overviewData: [
        {
          itemName: '首台准点率',
          itemVal: '80',
          itemUnit: '%',
        },
        {
          itemName: '手术间利用率',
          itemVal: '86',
          itemUnit: '%',
        },
        {
          itemName: '急诊患者',
          itemVal: '180',
          itemUnit: '个',
        },
      ],
      peopleData: [
        {
          itemName: '进行中',
          itemVal: '50',
        },
        {
          itemName: '待进行',
          itemVal: '300',
        },
      ],
    };
  },
};
</script>

<style>
.bgTopLeftBox {
  background-image: url('@/assets/svg/Monitor/TopLeft/Box.svg');
}
.bgTopLeftItemBox {
  background-image: url('@/assets/svg/Monitor/TopLeft/ItemBox.svg');
}
.bgTopLeftItemBoxPurple {
  background-image: url('@/assets/svg/Monitor/TopLeft/ItemBoxPurple.svg');
}
.peopleItemBox {
  background: linear-gradient(271deg, rgba(85, 255, 212, 0.045) 2%, rgba(35, 150, 121, 0.066) 99%);
  border: 1.5px solid;
  border-image: linear-gradient(159deg, rgba(169, 213, 255, 0.4) -8%, rgba(169, 213, 255, 0) 38%) 1.5;
}
</style>