项目初始化
This commit is contained in:
liuhanqing
344
ruoyi-ui/public/monitor/css/style.css
Normal file
344
ruoyi-ui/public/monitor/css/style.css
Normal file
@@ -0,0 +1,344 @@
|
||||
/* 页面基本样式 */
|
||||
body {
|
||||
background-color: #f3f3f4; /* 设置背景色 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; /* 防止出现滚动条 */
|
||||
}
|
||||
|
||||
/* 主容器样式 */
|
||||
#main {
|
||||
position: absolute;
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
z-index: -99; /* 确保在最底层 */
|
||||
height: 870px;
|
||||
width: 1700px;
|
||||
transform: scale(1);
|
||||
transform-origin: center center;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#main.dragging {
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
/* 小方块样式 */
|
||||
.small-box {
|
||||
position: absolute;
|
||||
background-color: #3c8dbc;
|
||||
border: 2px solid #ffffff;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease; /* 添加过渡动画效果 */
|
||||
}
|
||||
|
||||
/* 控制按钮容器样式 */
|
||||
.control-buttons {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
/* 控制按钮样式 */
|
||||
.control-buttons button {
|
||||
padding: 10px 20px;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#enableDragBtn {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
#enableDragBtn:hover:not(:disabled) {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
#disableDragBtn {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
#disableDragBtn:hover:not(:disabled) {
|
||||
background-color: #da190b;
|
||||
}
|
||||
|
||||
.control-buttons button:disabled {
|
||||
background-color: #cccccc;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* 设备拖动控制按钮样式 */
|
||||
.drag-control-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.drag-control-btn {
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.drag-control-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.enable-drag {
|
||||
background-color: #4CAF50;
|
||||
}
|
||||
|
||||
.enable-drag:hover:not(:disabled) {
|
||||
background-color: #45a049;
|
||||
}
|
||||
|
||||
.disable-drag {
|
||||
background-color: #f44336;
|
||||
}
|
||||
|
||||
.disable-drag:hover:not(:disabled) {
|
||||
background-color: #da190b;
|
||||
}
|
||||
|
||||
/* 链条输送机样式 */
|
||||
.conveyor {
|
||||
position: absolute;
|
||||
background-image: url('../img/Lssj.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.1s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.conveyor:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.conveyor:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.conveyor-center {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #51bfff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 滚筒输送机样式 */
|
||||
.roller-conveyor {
|
||||
position: absolute;
|
||||
background-image: url('../img/Gssj.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.1s ease;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.roller-conveyor:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.roller-conveyor:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.roller-conveyor-center {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #51bfff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 堆垛机样式 */
|
||||
.stacker {
|
||||
position: absolute;
|
||||
background-image: url('../img/ddj.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.1s ease, left 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.stacker:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.stacker:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.stacker-center {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #51bfff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* RGV样式 */
|
||||
.rgv {
|
||||
position: absolute;
|
||||
background-image: url('../img/rgv.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.1s ease, left 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
.rgv:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.rgv:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.rgv-center {
|
||||
position: absolute;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background-color: #51bfff;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 堆垛机轨道样式 */
|
||||
.track {
|
||||
position: absolute;
|
||||
background-image: url('../img/gd.png');
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.track:hover {
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.track:active {
|
||||
cursor: grabbing;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
/* 报警闪红光 */
|
||||
.breathing-border {
|
||||
border: 1px solid #ff0000;
|
||||
box-sizing: border-box;
|
||||
animation: breathing 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes breathing {
|
||||
0% {
|
||||
border-color: #ff0000;
|
||||
box-shadow: 0 0 0px 0px rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
border-color: #ff0000;
|
||||
box-shadow: 0 0 15px 15px rgba(0, 123, 255, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
border-color: #ff0000;
|
||||
box-shadow: 0 0 0px 0px rgba(255, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/* 报警信息滚动动画 */
|
||||
@keyframes scroll-left {
|
||||
0% {
|
||||
left: 20%;
|
||||
}
|
||||
100% {
|
||||
left: -150%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 慢速滚动动画 */
|
||||
@keyframes scroll-left-slow {
|
||||
0% {
|
||||
left: 100%;
|
||||
}
|
||||
100% {
|
||||
left: -100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 列位置显示样式 */
|
||||
.column-positions {
|
||||
margin-top: 10px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.column-positions-info p {
|
||||
margin: 0 0 10px 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.positions-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.position-item {
|
||||
background-color: #fff;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.position-item span:first-child {
|
||||
color: #666;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.position-item span:last-child {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
Reference in New Issue
Block a user