布局及引用
import React, { useEffect, useState } from 'react'
import './index.less'
import { history } from 'umi'
import AMapLoader from "@amap/amap-jsapi-loader";
// import {Button} from 'andt'
export default function Home() {
const [time, settime] = useState('')
let map = null;
useEffect(() => {
AMapLoader.load({
key: "9bc4b58f70634b73e3e7fc5f8d0c0e5c", // 申请好的Web端开发者Key,首次调用 load 时必填
version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
plugins: [], // 需要使用的的插件列表,如比例尺'AMap.Scale'等
})
.then((AMap) => {
map = new AMap.Map("home", {
// 设置地图容器id
mapStyle: "amap://styles/darkblue",//变颜色
viewMode: "3D", // 是否为3D地图模式
zoom: 17, // 初始化地图级别
center: [115.485406, 38.814064], // 初始化地图中心点位置
});
})
.catch((e) => {
console.log(e);
});
return () => {
map?.destroy();
};
}, []);
const gettime = () => {
let Da = new Date()
let nn = Da.getFullYear()
let yy = Da.getMonth() + 1
let dd = Da.getDate()
let shi = Da.getHours()
let ff = Da.getMinutes()
let ss = Da.getSeconds()
let getdate = nn + '-' + yy + '-' + dd + ':' + shi + ':' + ff + ':' + ss
settime(getdate)
}
useEffect(() => {
setInterval(() => {
gettime()
}, 1000)
})
return (
<div id='home'>
<div className="top">
<div className="top-img">
<div className="time">
<h2> {time}
</h2>
</div>
<h1>智慧照明综合管理平台</h1>
<div className="setting">
<div className="botton" >
进入管理系统
</div>
<div className="setting-img">
</div>
</div>
</div>
</div>
<div className="left">
<div className="content-item">
<div className="inner">
<div className="content-left">
<h3>设备状态</h3>
</div>
</div>
</div>
<div className="content-item">
<h3>实时功耗</h3>
</div>
<div className="content-item">
</div>
</div>
<div className="right">
<div className="content-item">
<h3>KPI</h3>
</div>
<div className="content-item">
<h3>区域分布</h3>
</div>
<div className="content-item">
<h3>报警信息</h3>
</div>
</div>
</div>
)
}
样式如下(less):
html{
font-size: 100px;
}
position: relative;
color:
width: 100%;
height: 100vh;
padding: 0px;
margin: 0px;
z-index: 0;
.top{
position: absolute;
z-index: 1;
width: 100%;
height: calc(100% - 92%);
.top-img{
width: 100%;
height: 100%;
background-image: url(~@/images/top_title.8d58eda.png);
background-size: cover; /* 使背景图片充满整个容器 */
display: flex;
justify-content: space-around;
align-items: center;
text-align: center;
.time{
width: calc(100% - 65%);
h2{
font-size: 16px;
color:
}
}
h1{
font-size: 22px;
font-weight: 600;
color:
width: calc(100% - 70%);
height: calc(100% - 40%);
}
.setting{
width: calc(100% - 65%);
display: flex;
justify-content: space-around;
align-items:start;
.botton{
padding: 1.3% 2.5% ;
border-radius: 10px;
background-color: skyblue;
width: calc(100% - 70%);
}
.setting-img{
padding: 1.5% 2.5% ;
background-image: url(~@/images/xit_nav_icon.18f5906.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
}
}
}
.left{
position: absolute;
top: 8%;
left: 0%;
z-index: 1;
width: calc(100% - 70%);
height: 90%;
.content-item{
width: 70%;
// margin-top: 10px;
height: calc(100% / 3);
margin: 0 auto;
background-image: url(~@/images/content_bj.a8f4280.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
.inner{
h3{
color:
}
}
}
}
.right{
position: absolute;
top: 8%;
right: 0%;
z-index: 1;
width: calc(100% - 70%);
height: 90%;
.content-item{
width: 70%;
height: calc(100% / 3);
margin: 0 auto;
// border: 25px
background-image: url(~@/images/content_bj.a8f4280.png);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
}
}
.content-item{
h3{
padding: 10px;
color:
}
}