<template>
|
<div class="homeclass">
|
<div style="height: 12%;padding-top: 20px;">
|
<el-row>
|
<el-col :span="12" >
|
<div style="display: grid;grid-template-columns: minmax(160px, 25%) 1fr;">
|
<div style="margin-top: 5px;">
|
<img class="image_1" style="width: 159px;height: 62px; margin-left: 20px;display: inline-block;" referrerpolicy="no-referrer" src="@/assets/logo.png" />
|
|
</div>
|
<div class="titlecss">自助签到系统</div>
|
</div>
|
</el-col>
|
<el-col v-if="dialogVisible" :span="12" style="text-align: right;padding-top: 10px;">
|
<el-input ref="inputRef" id="inputCode" style="width: 400px; height: 40px;ime-mode:active;margin-right: 20px;"
|
placeholder="请输入患者卡号或扫描条码" />
|
|
|
</el-col>
|
<el-col v-else :span="12">
|
|
<div class="dateclas" style="float: right;margin-top: 20px;">
|
<div class="dateTimeclas" style="float: right;">07:22</div>
|
2014-09-23
|
</div>
|
|
</el-col>
|
</el-row>
|
</div>
|
<template v-if="dialogVisible">
|
<div style="height: 72%;" class="parentBody">
|
<div style="width: 800px;height: 500px;background-color: aqua;"></div>
|
</div>
|
<div style="height: 18%;">
|
<el-row>
|
<el-col :span="6" style="padding-left: 40px; font-size: 34px; color: #FFFFFF;">
|
16:00
|
<br>
|
2023-06-05
|
</el-col>
|
<el-col :span="12" style="font-size: 40px;color: #FFFFFF;text-align: center; padding-top: 20px;">
|
请将脸部对准摄像头
|
</el-col>
|
<el-col :span="6"></el-col>
|
</el-row>
|
<div></div>
|
</div>
|
</template>
|
<template v-else>
|
<div style="height: 84%;">
|
<el-row style="height: 100%; " gutter="20">
|
<el-col :span="12" >
|
<div style="height: 66%; background:rgba(246, 244, 244, 0.3);border-radius: 12px;opacity: 0.9;" >
|
<div style="height: 15%; border-bottom: 4px solid #EDF5FF; text-align: right; padding-right: 20px; font-size: 30px; line-height: 90px;color: #0d44dc;font-weight: 500;font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;">
|
透前称重(kg)
|
</div>
|
<div style="height: 77%;">
|
<div style="display: grid;grid-template-columns: minmax(250px, 40%) 1fr; height: 100%; padding-left: 20px;padding-top: 20px;">
|
<!-- 头像 -->
|
<div :style="{backgroundImage:`url(${anv})`}" style="background-size:100% 100%;height: 100%;">
|
|
</div>
|
<div style="display: grid;place-items: center;font-size: 120px;font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 500;color: #65AAF6;">
|
112/233
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div style="height: 31%; margin-top: 20px;border-radius: 12px;" >
|
<el-row style="height: 100%;background:rgba(246, 244, 244, 0.3);border-radius: 12px;opacity: 0.9;">
|
<el-col :span="8">
|
<div class="textwenben" style="height: 28%; font-size: 25px;background-color: #DFB144; border-radius: 12px 0 0 0;">
|
机号/床位好
|
</div>
|
<div class="textwenben" style="height: 70%; font-size: 80px; color: #DFB144;">
|
28床
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="textwenben" style="height: 28%; font-size: 25px;background-color: #41B593; ">
|
上次透后血压(mmgh)
|
</div>
|
<div class="textwenben" style="height: 70%; font-size: 80px; color: #41B593;
|
border-left: #FFFFFF solid 2px;border-right: #FFFFFF solid 2px;">
|
28床
|
</div>
|
</el-col>
|
<el-col :span="8">
|
<div class="textwenben" style="height: 28%; font-size: 25px;background-color: #65AAF6;border-radius: 0 12px 0 0 ">
|
脉搏(次/分)
|
</div>
|
<div class="textwenben" style="height: 70%; font-size: 80px; color: #65AAF6;">
|
28床
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</el-col>
|
<el-col :span="12">
|
<div ref="myChartRef" class="echat" style="height: 49%;">
|
|
</div>
|
<div ref="myChartRef" class="echat" style="height: 48%;margin-top: 2%;">
|
</div>
|
</el-col>
|
</el-row>
|
|
</div>
|
</template>
|
|
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { ref } from 'vue';
|
|
const dialogVisible=ref(false)
|
const anv=ref('http://dhimg.leon056.com/hemodialysis/face/PAT9326175252362sKFe/face-1701040731610.jpg-202311270719101645.jpg')
|
</script>
|
<style src="./index.css" />
|
<style lang="less" scoped>
|
.titlecss{
|
border-left:1px solid #ffffff ;
|
padding-left: 20px;
|
// margin-bottom: 20px;
|
font-size: 40px;
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
font-weight: 500;
|
color: #FFFFFF;
|
line-height: 48px;
|
height: 54px;
|
}
|
.textwenben{
|
display: grid;
|
place-items: center;
|
font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
|
font-weight: 500;
|
color: #FFFFFF;
|
}
|
.parentBody{
|
display: grid;
|
place-items: center;
|
}
|
.echat{
|
background-color: #FFFFFF;
|
border-radius: 12px;
|
}
|
.dateclas{
|
width: 334px;
|
height: 42px;
|
background: #FFFFFF;
|
// // text-align: center;
|
line-height: 42px;
|
box-shadow: 0px 2px 4px 0px rgba(112,163,221,0.5);
|
border-radius: 20px;
|
font-size: 30px;
|
}
|
.dateTimeclas{
|
height: 42px;
|
text-align: center;
|
width: 120px;
|
line-height: 42px;
|
background: #65AAF6;
|
box-shadow: 2px 2px 4px 0px rgba(112,163,221,0.5);
|
border-radius: 16px;
|
font-size: 30px;
|
color: #FFFFFF;
|
}
|
::v-deep .el-input__wrapper {
|
background-color: transparent !important;
|
color: #ffffff;
|
}
|
//提示框的字体颜色
|
::v-deep input::-webkit-input-placeholder {
|
color: #fff;
|
}
|
::v-deep input::-moz-input-placeholder {
|
color: #fff;
|
}
|
::v-deep input::-ms-input-placeholder {
|
color: #fff;
|
}
|
</style>
|
|
|
