bigScreen/src/views/pageOperation/rightMid/index.vue

<template>
  <div class="w-[116.94vh] h-[85.8vh] bgRightMidBox">
    <div class="w-[112.96vh] h-[77.03vh] mx-auto mt-[2.96vh]">
      <div class="h-[4.44vh] leading-[4.44vh] text-center bg-[#322369]">
        <div class="inline-block">
          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">手术间</div>
          <div class="inline-block w-[16.51vh] text-[#AAAAAA] text-[1.48vh]">手术名称</div>
          <div class="inline-block w-[13.11vh] text-[#AAAAAA] text-[1.48vh]">申请类型</div>
          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">入手术室时间</div>
          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">麻醉开始时间</div>
          <div class="inline-block w-[16.66vh] text-[#AAAAAA] text-[1.48vh]">手术开始时间</div>
          <div class="inline-block w-[11.11vh] text-[#AAAAAA] text-[1.48vh]">是否准点</div>
        </div>
      </div>
      <div class="h-[72.58vh]">
        <el-carousel direction="vertical" :autoplay="false" :interval="5000" indicatorPosition="none">
          <el-carousel-item v-for="item in 1" :key="item">
            <template v-for="(item, index) in 14">
              <div class="h-[4.44vh] leading-[4.44vh] mt-[0.74vh] text-center itemStyle" :key="index">
                <div class="inline-block">
                  <div class="inline-block w-[11.11vh] text-[1.48vh] panmen">R-{{ String(index + 1).padStart(3, '0') }}</div>
                  <div class="inline-block w-[16.51vh] text-[1.48vh]">阑尾切除术</div>
                  <div class="inline-block w-[13.11vh] text-[1.48vh] align-middle">
                    <img class="mx-auto" src="@/assets/svg/Operation/RightMid/Emergency.svg" />
                  </div>
                  <div class="inline-block w-[16.66vh] text-[1.48vh]">2023-02-20 12:23:34</div>
                  <div class="inline-block w-[16.66vh] text-[1.48vh]">2023-02-20 12:24:34</div>
                  <div class="inline-block w-[16.66vh] text-[1.48vh]">2023-02-20 12:24:34</div>
                  <div class="inline-block w-[11.11vh] text-[1.48vh] text-[#349AFC]">准点</div>
                </div>
              </div>
            </template>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

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

<style lang="scss" scoped>
.bgRightMidBox {
  background-image: url('@/assets/svg/Operation/RightMid/Box.svg');
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.itemStyle {
  background: rgba(74, 78, 103, 0.15);
  box-sizing: border-box;
  border: 1px solid rgba(87, 151, 181, 0.4);
}
:deep(.el-carousel) {
  height: 100%;
  .el-carousel__item,
  .el-carousel__container {
    height: 100%;
  }
}
</style>