@0Melon0
1 year ago
parent
01d18640a4
commit
96454b33ef
|
After Width: | Height: | Size: 5.7 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
@ -1,9 +1,75 @@
|
|||||||
<template>
|
<template>
|
||||||
<div></div>
|
<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="false" :interval="5000" indicatorPosition="none">
|
||||||
|
<el-carousel-item v-for="item in 1" :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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {};
|
import { Carousel, CarouselItem } from 'element-ui';
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
'el-carousel': Carousel,
|
||||||
|
'el-carousel-item': CarouselItem,
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style></style>
|
<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>
|
||||||
|
|||||||
Loading…
Reference in new issue