基于vue3+ElementPlus做的一个居家养老静态界面，内容准备后期实现
以下是效果图 特别声明用到了百度地图JS API进行位置展示与iV Cam模拟实时监控
以下是代码部分
<script setup> import { onMounted, onBeforeUnmount } from 'vue' import { ref } from 'vue' const videoRef = ref(null) let stream = null function loadJScript() {const script = document.createElement('script')script.type = 'text/javascript'script.src ='//api.map.baidu.com/api?type=webgl&v=1.0&ak=llEL7o82KutbtrUpWu5GEz6y8HJ6mzQO&callback=init'document.body.appendChild(script) }function init() {const container = document.getElementById('container')if (!container) returnconst map = new window.BMapGL.Map(container) // 创建Map实例const point = new window.BMapGL.Point(116.404, 39.915) // 创建点坐标map.centerAndZoom(point, 10)map.enableScrollWheelZoom() // 启用滚轮放大缩小var marker = new window.BMapGL.Marker(point, {enableDragging: true})map.addOverlay(marker) } onMounted(async () => {loadJScript()try {// 获取媒体设备（通常是前置或后置摄像头）stream = await navigator.mediaDevices.getUserMedia({video: true,audio: false // 如果需要音频，设置为true })// 将视频流绑定到video元素if (videoRef.value) {videoRef.value.srcObject = stream}} catch (error) {console.error('Error accessing camera:', error)} })onBeforeUnmount(() => {// 组件卸载时记得关闭视频流if (stream) {stream.getTracks().forEach((track) => track.stop())} }) if (typeof window !== 'undefined') {window.init = init } </script><template><div class="common-layout"><el-container><el-header><div class="logo-container"><span style="font-weight: bold; font-size: 25px" class="logo-text">智慧助老控制台</span></div></el-header><el-container><!----------------------------------------------- aside --><el-aside width="250px"><div><div class="as"><el-col style="height: 100%"><divstyle=" width: 90%;background-color: aqua;border-radius: 10px;margin: auto;padding-top: 10px;padding-bottom: 20px;" ><h1 style="text-align: center">信息卡片</h1><el-row style="margin-top: 30px; margin-left: 40px"><el-avatarsrc="https://b0.bdstatic.com/e002551e53878af3bbe5b7d1a2c7e73d.jpg@h_1280"/><h1 style="margin-left: 30px">ikun</h1></el-row><el-divider style="width: 80%; margin-left: 8%" /><el-row style="margin-left: 45px"> 性别：男 </el-row><el-divider style="width: 80%; margin-left: 10%" /><el-row style="margin-left: 45px"> 年龄：2.5岁 </el-row><el-divider style="width: 80%; margin-left: 10%" /><el-row style="margin-left: 45px"> 生肖：鸡 </el-row><el-divider style="width: 80%; margin-left: 10%" /><el-row style="margin-left: 45px"> 爱好：唱跳rap篮球 </el-row></div><divclass="ad-text"style=" background-color: yellow;width: 90%;margin: auto;height: 35vh;border-radius: 10px;margin-top: 10px;" ><span>广告位招租。。。。</span><br /><br /><span>广告位招租。。。。</span><br /><br /><span>广告位招租。。。。</span><br /><br /><span>广告位招租。。。。</span><br /><br /><span>广告位招租。。。。</span></div></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"><videostyle="border-radius: 10px"ref="videoRef"autoplaymutedwidth="400"height="300"></video><divstyle=" width: 350px;background-color: white;height: 300px;border-radius: 10px;margin-left: 80px;margin-right: 30px;" ><div style="display: flex; flex-wrap: nowrap"><imgstyle=" margin-left: 40px;margin-top: 30px;width: 30px;height: 35px;" src="../../assets/heart-rate.png"/><h1style=" margin-left: 10px;font-weight: 200;color: red;margin-top: 40px;" >心率</h1></div><h1style="font-size: 50px; margin-left: 14%; font-weight: 300">79 次/分钟</h1></div><divstyle=" width: 350px;background-color: white;height: 300px;border-radius: 10px;margin: auto;" ><div style="display: flex; flex-wrap: nowrap"><imgstyle=" margin-left: 40px;margin-top: 30px;width: 30px;height: 35px;" src="src\assets\aawater.png"/><h1style=" margin-left: 10px;font-weight: 200;color: red;margin-top: 40px;" >血压</h1></div><h1style="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"><divstyle=" width: 100%;background-color: white;border-radius: 10px;height: 180px;display: flex;flex-wrap: nowrap;" ><div style="height: 100%; width: 50%"><h1style=" font-weight: 300;color: #c4c4c4;margin-left: 15px;margin-top: 20px;font-size: 20px;" >uv</h1><el-progressstyle=" width: 180px;margin-left: 10px;margin-top: 30px;" :text-inside="true":stroke-width="20":percentage="80"color="#ff6600"status="exception"><span></span></el-progress><h1style=" font-weight: 300;color: #333333;margin-left: 15px;font-weight: 500;font-size: 30px;margin-top: 20px;" >强</h1></div><div><h1style=" font-size: 25px;margin-left: 70px;margin-top: 25px;margin-bottom: 0px;" >PA++</h1><h2style=" color: #bbbbbb;margin-left: 85px;margin-top: 10px;margin-bottom: 1px;" >SPF</h2><spanstyle=" font-size: 45px;font-weight: 800;color: #ff6600;margin-left: 75px;margin-top: 0px;" >20</span></div></div><divstyle=" width: 100%;display: flex;flex-wrap: nowrap;background-color: white;border-radius: 10px;height: 180px;margin-top: 40px;" ><div style="width: 50%; height: 100%"><divstyle=" font-size: 25px;color: #bbbbbb;margin-left: 25px;margin-top: 25px;" >PM2.5</div><divstyle=" font-size: 80px;color: lightgreen;margin-left: 17px;margin-top: 5px;" >32</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"><imgstyle=" width: 40px;margin-top: 50px;margin-left: 30px;" src="src\assets\平均值_average.png"/><div style="margin-left: 10px; margin-top: 65px"><el-texttag="ins"style="font-size: 20px; margin-left: 15px">71</el-text></div></div></div></div></div><divstyle=" background-color: white;width: 60%;margin-left: 80px;border-radius: 20px;margin-top: 40px;" ><divid="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></div> </template><style lang="scss" scoped> .ad-text {font-weight: 800;font-size: 24px;width: 200px;height: 50px;overflow: hidden;position: relative;text-align: center; }.ad-text > span {position: absolute;width: 100%;animation:changeColor 1s infinite alternate,slideToLeft 5s linear infinite;white-space: nowrap;color: red; /* 初始颜色，动画会改变它 */ }@keyframes changeColor {0% {color: red;}10% {color: blue;}20% {color: green;}30% {color: red;}40% {color: blue;}50% {color: green;}60% {color: red;}70% {color: blue;}80% {color: green;}90% {color: red;}100% {color: blue;} }@keyframes slideToLeft {0% {left: 100%;}100% {left: -100%;} }.demo-pagination-block + .demo-pagination-block {margin-top: 10px; } .demo-pagination-block .demonstration {margin-bottom: 16px; } .common-layout {height: 100vh;width: 100%;.el-header {background-color: #fff;display: flex; // 使用flex布局来放置Logo和文本align-items: center; // 垂直居中justify-content: center;padding: 10px; // 可以添加一些内边距 .logo-container {display: flex; // Logo和文本也使用flex布局align-items: center; // 垂直居中 .logo-image {height: 30px; // 根据你的Logo大小调整 width: auto;margin-right: 10px; // Logo和文本之间的间距 }.logo-text {font-size: 16px; // 根据需要调整文本大小 }}}.el-aside {background-color: #fff;height: 100vh;} } </style>
