基于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) return
const 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%">
<div
style="
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-avatar
src="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>
<div
class="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">
<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;
"
>
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">
<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>
</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>
标签：web,5.3,const,color,text,100%,广告位,container,控制台 From： https://www.cnblogs.com/zeyangshuaige/p/18171318