174 lines
4.2 KiB
Vue
174 lines
4.2 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="title">5G工厂机电智核数字孪生平台</div>
|
|
<div class="bottom">
|
|
<div class="topBox">
|
|
<div class="date">实时数据</div>
|
|
<div>
|
|
<span>25</span>
|
|
<p>产量</p>
|
|
</div>
|
|
<div>
|
|
<span>2130</span>
|
|
<p>主轴转速</p>
|
|
</div>
|
|
<div>
|
|
<span>1</span>
|
|
<p>急停状态</p>
|
|
</div>
|
|
<div>
|
|
<span>1090</span>
|
|
<p>切削速度</p>
|
|
</div>
|
|
<div>
|
|
<span>21</span>
|
|
<p>负载电流</p>
|
|
</div>
|
|
<div>
|
|
<span>19</span>
|
|
<p>额定电流</p>
|
|
</div>
|
|
</div>
|
|
<div class="productChart">
|
|
<p></p>
|
|
</div>
|
|
<div class="mainshaftChart">
|
|
<p></p>
|
|
</div>
|
|
<div class="loadChart">
|
|
<p></p>
|
|
</div>
|
|
<div class="ratedChart">
|
|
<p></p>
|
|
</div>
|
|
<div class="one"><p></p></div>
|
|
<div class="two"><p></p></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
<style scope lang="less">
|
|
.container {
|
|
font-family: "SourceHanSansSC-regular";
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: #fff;
|
|
background-image: url("../assets/image/图片 2 Copy@1x.png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
.title {
|
|
height: 11%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 48px;
|
|
color: #fff;
|
|
font-family: "SourceHanSansSC-regular";
|
|
background-image: url("../assets/image/边框样式2@1x.png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
}
|
|
.bottom {
|
|
height: calc(100vh - 11%);
|
|
padding-top: 19px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
div {
|
|
}
|
|
.topBox {
|
|
width: 95%;
|
|
height: 114px;
|
|
margin: 0 auto;
|
|
color: #fff;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
background-image: url("../assets/image/矩形 2 Copy@1x.png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
div {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
span {
|
|
color: rgba(255, 255, 255, 1);
|
|
font-size: 48px;
|
|
}
|
|
p {
|
|
color: rgba(239, 239, 239, 1);
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
.date {
|
|
left: 53px;
|
|
top: 157px;
|
|
width: 40px;
|
|
height: 63px;
|
|
color: rgba(64, 149, 229, 1);
|
|
font-size: 20px;
|
|
text-align: left;
|
|
font-family: "SourceHanSansSC-bold";
|
|
}
|
|
}
|
|
.productChart {
|
|
margin-top: 45px;
|
|
margin-left: 45px;
|
|
}
|
|
.mainshaftChart {
|
|
margin-left: 45px;
|
|
margin-top: 45px;
|
|
}
|
|
.loadChart {
|
|
position: absolute;
|
|
right: 45px;
|
|
top: 180px;
|
|
}
|
|
.ratedChart {
|
|
position: absolute;
|
|
right: 45px;
|
|
top: 533px;
|
|
}
|
|
.one {
|
|
position: absolute;
|
|
right: 560px;
|
|
top: 533px;
|
|
}
|
|
.two {
|
|
position: absolute;
|
|
left: 560px;
|
|
top: 533px;
|
|
}
|
|
.one,
|
|
.two,
|
|
.ratedChart,
|
|
.loadChart,
|
|
.mainshaftChart,
|
|
.productChart {
|
|
background-image: url("../assets/image/矩形 2 Copy@1x.png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
width: 414px;
|
|
height: 308px;
|
|
p {
|
|
height: 43px;
|
|
width: 100%;
|
|
background-image: url("../assets/image/矩形 3 Copy@1x (1).png");
|
|
background-size: cover; /* 图像大小适应容器 */
|
|
background-repeat: no-repeat; /* 防止图像平铺 */
|
|
background-position: center; /* 图像在容器中居中 */
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|