第一阶段冲刺8
任务计划:
1.进行整个项目测试 确保展示时不会出问题
前端代码
警告!!!!!
老人摔倒了!!!
智慧助老控制台
信息卡片
ikun
</el-col>
</div>
</div>
</el-aside>
<el-container>
<!-- main ------------------------------------------------>
<el-main>
<el-col style="width: 100%; height: 100vh">
<div style="display: flex; flex-wrap: nowrap">
<video
style="border-radius: 10px"
ref="videoRef"
autoplay
muted
width="400"
height="300"
></video>
<div
style="
width: 350px;
background-color: white;
height: 300px;
border-radius: 10px;
margin-left: 80px;
margin-right: 30px;
"
>
<div style="display: flex; flex-wrap: nowrap">
<img
style="
margin-left: 40px;
margin-top: 30px;
width: 30px;
height: 35px;
"
src="../../assets/heart-rate.png"
/>
<h1
style="
margin-left: 10px;
font-weight: 200;
color: red;
margin-top: 40px;
"
>
心率
</h1>
</div>
<h1
style="font-size: 50px; margin-left: 14%; font-weight: 300"
>
79 次/分钟
</h1>
</div>
<div
style="
width: 350px;
background-color: white;
height: 300px;
border-radius: 10px;
margin: auto;
"
>
<div style="display: flex; flex-wrap: nowrap">
<img
style="
margin-left: 40px;
margin-top: 30px;
width: 30px;
height: 35px;
"
src="src\assets\aawater.png"
/>
<h1
style="
margin-left: 10px;
font-weight: 200;
color: red;
margin-top: 40px;
"
>
血压
</h1>
</div>
<h1
style="font-size: 50px; margin-left: 14%; font-weight: 300"
>
100 mmhg
</h1>
</div>
</div>
<div style="display: flex; flex-wrap: nowrap">
<div style="width: 400px; height: 400px; margin-top: 40px">
<div
style="
width: 100%;
background-color: white;
border-radius: 10px;
height: 180px;
display: flex;
flex-wrap: nowrap;
"
>
<div style="height: 100%; width: 50%">
<h1
style="
font-weight: 300;
color: #c4c4c4;
margin-left: 15px;
margin-top: 20px;
font-size: 20px;
"
>
uv
</h1>
<el-progress
style="
width: 180px;
margin-left: 10px;
margin-top: 30px;
"
:text-inside="true"
:stroke-width="20"
:percentage="80"
color="#ff6600"
status="exception"
>
<span></span>
</el-progress>
<h1
style="
font-weight: 300;
color: #333333;
margin-left: 15px;
font-weight: 500;
font-size: 30px;
margin-top: 20px;
"
>
强
</h1>
</div>
<div>
<h1
style="
font-size: 25px;
margin-left: 70px;
margin-top: 25px;
margin-bottom: 0px;
"
>
PA++
</h1>
<h2
style="
color: #bbbbbb;
margin-left: 85px;
margin-top: 10px;
margin-bottom: 1px;
"
>
SPF
</h2>
<span
style="
font-size: 45px;
font-weight: 800;
color: #ff6600;
margin-left: 75px;
margin-top: 0px;
"
>20</span
>
</div>
</div>
<div
style="
width: 100%;
display: flex;
flex-wrap: nowrap;
background-color: white;
border-radius: 10px;
height: 180px;
margin-top: 40px;
"
>
<div style="width: 50%; height: 100%">
<div
style="
font-size: 25px;
color: #bbbbbb;
margin-left: 25px;
margin-top: 25px;
"
>
PM2.5
</div>
<div
style="
font-size: 80px;
color: lightgreen;
margin-left: 17px;
margin-top: 5px;
"
>
{{ air['pm2.5'] }}
</div>
</div>
<div>
<div style="margin-left: 30px; margin-top: 25px">
<span style="font-size: 20px">峰值</span>
<el-text tag="ins" style="font-size: 20px"
>21:00</el-text
>
</div>
<div style="display: flex; flex-wrap: nowrap">
<img
style="
width: 40px;
margin-top: 50px;
margin-left: 30px;
"
src="src\assets\平均值_average.png"
/>
<div style="margin-left: 10px; margin-top: 65px">
<el-text
tag="ins"
style="font-size: 20px; margin-left: 15px"
>71</el-text
>
</div>
</div>
</div>
</div>
</div>
<div
style="
background-color: white;
width: 60%;
margin-left: 80px;
border-radius: 20px;
margin-top: 40px;
"
>
<div
id="container"
style="
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
border-radius: 20px;
"
></div>
</div>
</div>
</el-col>
</el-main>
</el-container>
</el-container>
</el-container>

浙公网安备 33010602011771号