bigScreen/src/views/pageScheduling/index.vue

<template>
  <div class="w-[172.22vh] h-[83.51vh] bgBox mx-auto relative">
    <div class="absolute w-[38.51vh] h-[3.7vh] bgTitleBox top-[-1.9vh] left-[3.6vh]">
      <div class="w-[29.62vh] h-[2.5vh] mx-auto mt-[0.64vh] flex justify-between items-center leading-none">
        <div class="h-[0.64vh]">
          <img class="h-full" src="@/assets/svg/Monitor/Triangle.svg" />
        </div>
        <span class="panmen text-[1.66vh]">白班</span>
        <p class="panmen text-[1.66vh]">手术间: 178</p>
        <p class="panmen text-[1.66vh]">护理人员: 135</p>
      </div>
    </div>
    <section class="w-[166.2vh] h-[77.12vh] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
      <el-carousel direction="vertical" :autoplay="true" :interval="5000" indicatorPosition="none">
        <el-carousel-item v-for="item in 3" :key="item">
          <section class="carouselItemBox">
            <template v-for="(item, index) in 39">
              <div class="w-[54.25vh] h-[4.44vh] leading-[4.44vh] text-center" :class="index % 6 < 3 ? 'bgOdd' : 'bgEven'" :key="index">
                <div class="inline-block w-[9.07vh] h-[1.66vh] leading-none">
                  <span class="panmen text-[#8C5AFA] text-[1.48vh]">R-{{ String(index + 1).padStart(3, '0') }}</span>
                </div>
                <div class="inline-block w-[23vh] h-[1.66vh] leading-none pl-[1.94vh] border-l border-dashed border-l-[rgba(213,209,228,0.24)]">
                  <span class="text-[1.48vh]">陈宇、孙晨、邓一帆</span>
                </div>
              </div>
            </template>
          </section>
        </el-carousel-item>
      </el-carousel>
    </section>
  </div>
</template>

<script>
import { Carousel, CarouselItem } from 'element-ui';
export default {
  components: {
    'el-carousel': Carousel,
    'el-carousel-item': CarouselItem,
  },
};
</script>

<style lang="scss" scoped>
.bgBox {
  background-image: url('@/assets/svg/Schedule/Box.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.bgTitleBox {
  background-image: url('@/assets/svg/Schedule/TitleBox.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
:deep(.el-carousel) {
  height: 100%;
  .el-carousel__item,
  .el-carousel__container {
    height: 100%;
    .carouselItemBox {
      display: grid;
      grid-template-columns: repeat(3, minmax(54.25vh, 1fr));
      grid-row-gap: 1.64vh;
    }
  }
}
.bgOdd {
  background-color: rgba(50, 35, 105, 0.38);
}
.bgEven {
  background-color: rgba(74, 78, 103, 0.15);
}
</style>