63 lines
1.9 KiB
Vue
63 lines
1.9 KiB
Vue
<template>
|
|
<div>
|
|
<public-title title="基层医疗点远程会诊" />
|
|
<div class="inner">
|
|
<div class="inner-item" data-text="应急就医-服务中心"></div>
|
|
<div class="inner-item" data-text="采油九厂-薛岔作业区"></div>
|
|
<div class="inner-item" data-text="第九采油厂-五谷城作业区"></div>
|
|
<div class="inner-item" data-text="采油十一厂-彭阳作业区"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import PublicTitle from '../publicTitle.vue';
|
|
</script>
|
|
<style scoped lang="less">
|
|
.inner {
|
|
width: 100%;
|
|
height: calc(100% - 40px);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-around;
|
|
align-content: space-around;
|
|
padding-top: 2%;
|
|
|
|
.inner-item {
|
|
width: 48%;
|
|
height: 46%;
|
|
position: relative;
|
|
}
|
|
|
|
.inner-item:nth-child(1) {
|
|
background: url('../../assets/images/doctors1.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.inner-item:after {
|
|
position: absolute;
|
|
content: attr(data-text);
|
|
color: #fff;
|
|
bottom: 0px;
|
|
left: 0px;
|
|
width: 100%;
|
|
text-align: left;
|
|
padding-left: 10px;
|
|
background: linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.1));
|
|
}
|
|
|
|
.inner-item:nth-child(2) {
|
|
background: url('../../assets/images/doctors2.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.inner-item:nth-child(3) {
|
|
background: url('../../assets/images/doctors3.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
.inner-item:nth-child(4) {
|
|
background: url('../../assets/images/doctors4.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
</style> |