wangh
/
dlts_device_cockpit
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加看板

Browse Source
master
夜笙歌 2 years ago
parent 22594c92cd
commit 0c78307c40
9 changed files with 265 additions and 22 deletions
Show Stats Download Patch File Download Diff File

15
haiwei-admin/src/main/resources/static/board/board.css
Unescape Escape View File

@ -208,27 +208,28 @@ body {
height: 20px; height: 20px;
} }
.eqModal{ .eqModal {
display: none; display: none;
} }
.shade{ .shade {
position: absolute; position: absolute;
top: 0%; top: 0%;
left:0%; left: 0%;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #00000066; background-color: #00000066;
z-index: 100; z-index: 100;
} }
.centerModal{
.centerModal {
background-image: url("../../board/img/bigBg.png"); background-image: url("../../board/img/bigBg.png");
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: absolute; position: absolute;
transform: translate(-50%,-50%); transform: translate(-50%, -50%);
top: 50%; top: 50%;
left:50%; left: 50%;
width: 35vw; width: 35vw;
height: 21.85vw; height: 21.85vw;
z-index: 101; z-index: 101;

131
haiwei-admin/src/main/resources/static/board/board2.css
Unescape Escape View File

@ -0,0 +1,131 @@
body {
background-image: url("../../board/img/board2Bg.jpg");
background-size: 100% 100%;
background-repeat: no-repeat;
}
.topBtn {
background-image: url("../../board/img/click1.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 7.5vw;
height: 2.5vw;
position: absolute;
top: 2.8vw;
line-height: 2.5vw;
font-size: 1.2vw;
text-align: center;
color: #aaa;
}
.topBtnClick {
background-image: url("../../board/img/click.png");
color: #fff;
}
.title1 {
position: absolute;
font-size: 1vw;
left: 6%;
top: 14%;
color: #ddd;
}
.content {
position: absolute;
font-size: 0.8vw;
width: 21.5%;
height: 45%;
left: 5%;
top: 19%;
color: #ddd;
}
.content p {
margin-bottom: 8px;
}
.title2 {
position: absolute;
font-size: 1vw;
left: 75.5%;
top: 14%;
color: #ddd;
}
.customerPresentation {
position: absolute;
width: 21.5%;
height: 45%;
left: 73.5%;
top: 19%;
overflow: auto;
}
* ::-webkit-scrollbar-track {
background-color: rgba(0, 0, 0, 0) !important;
}
* ::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0) !important;
}
* ::-webkit-scrollbar {
width: 0;
background-color: rgba(0, 0, 0, 0) !important;
}
.customerPresentation .item {
background-image: url("../../board/img/rightShow.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 100%;
height: 2.5vw;
padding: 0.25vw 0.5vw;
vertical-align: top;
margin-bottom: 6px;
}
.customerPresentation .item span {
color: #68bdfb;
padding-left: 1vw;
line-height: 2vw;
font-size: 0.8vw;
}
.bottom{
position: absolute;
width: 91.5%;
height: 25%;
left: 4.5%;
top: 70%;
overflow: auto;
}
.bottom .item{
background-image: url("../../board/img/bottomImg.png");
background-size: 100% 100%;
background-repeat: no-repeat;
width: 43.76vh;
height: calc(24vh - 12px);
position: absolute;
left: 43.76vh;
background-position: 0 1vw;
}
.bottom .item .title{
position: absolute;
top: 1%;
left: 9%;
font-size: 1vw;
color: #ddd;
}
.bottom .item .img{
position: absolute;
top: 63%;
left: 50%;
width: 90%;
transform: translate(-50%,-50%);
}

84
haiwei-admin/src/main/resources/static/board/board2.js
Unescape Escape View File

@ -0,0 +1,84 @@
$(()=>{
let arr1 = [
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
{
name:'大连天晟通用机械有限公司',
img:'../../board/img/logo.png'
},
]
let arr2 = [
{
name:'积压脱水机',
img:'../../board/img/equipment.png'
},
{
name:'积压脱水机',
img:'../../board/img/equipment.png'
},
{
name:'积压脱水机',
img:'../../board/img/equipment.png'
},
{
name:'积压脱水机',
img:'../../board/img/equipment.png'
},
{
name:'积压脱水机',
img:'../../board/img/equipment.png'
},
]
arr1.forEach(e=>{
let html = `
<div class="item">
<img src="${e.img}" height="100%" style="vertical-align: top">
<span>${e.name}</span>
</div>
`
$("#customerPresentation").append(html)
})
arr2.forEach((e,i)=>{
let html = `
<div class="item" style="left:calc(${43.76*i}vh + ${i*12}px)">
<div class="title">${e.name}</div>
<img src="${e.img}" width="100%" class="img">
</div>
`
$("#bottom").append(html)
})
})

BIN
haiwei-admin/src/main/resources/static/board/img/board2Bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 278 KiB

BIN
haiwei-admin/src/main/resources/static/board/img/bottomImg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 18 KiB

BIN
haiwei-admin/src/main/resources/static/board/img/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
haiwei-admin/src/main/resources/static/board/img/rightShow.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 472 B

20
haiwei-admin/src/main/resources/templates/board/board1.html
Unescape Escape View File

@ -7,17 +7,21 @@
<link href="../../board/board.css" rel="stylesheet"> <link href="../../board/board.css" rel="stylesheet">
<script> <script>
const showModal = () =>{ const routerSkip = (e) => {
$.modal.openTab('看板1', ctx + e);
}
const showModal = () => {
$("#eqModal").show() $("#eqModal").show()
} }
const hideModal = () =>{ const hideModal = () => {
$("#eqModal").hide() $("#eqModal").hide()
} }
</script> </script>
<div> <div>
<div class="topBtn" style="left: 4vw;">首页</div> <div class="topBtn" onclick="routerSkip('board/board2')" style="left: 4vw;">首页</div>
<div class="topBtn topBtnClick" style="left: 14.5vw;">60型脱水量</div> <div class="topBtn topBtnClick" onclick="routerSkip('board/board1')" style="left: 14.5vw;">60型脱水机</div>
<div class="topBtn" style="left: 25vw;">60型一体机</div> <div class="topBtn" style="left: 25vw;">60型一体机</div>
<div class="topBtn" style="left: 71vw;">视频展示</div> <div class="topBtn" style="left: 71vw;">视频展示</div>
<div class="topBtn" style="left: 83vw;">文档归档</div> <div class="topBtn" style="left: 83vw;">文档归档</div>
@ -28,7 +32,7 @@
<div class="centerImg"> <div class="centerImg">
<div> <div>
<div class="centerInfo" style="top: 1%;left:15%" onclick="showModal()"> <div class="centerInfo" onclick="showModal()" style="top: 1%;left:15%">
<div class="win"> <div class="win">
<div class="title">位置1</div> <div class="title">位置1</div>
<div class="span1">转速: 50n/s</div> <div class="span1">转速: 50n/s</div>
@ -37,7 +41,7 @@
<div class="icon"></div> <div class="icon"></div>
</div> </div>
<div class="centerInfo" style="top: 35%;left:40%" onclick="showModal()"> <div class="centerInfo" onclick="showModal()" style="top: 35%;left:40%">
<div class="win"> <div class="win">
<div class="title">位置1</div> <div class="title">位置1</div>
<div class="span1">转速: 50n/s</div> <div class="span1">转速: 50n/s</div>
@ -46,7 +50,7 @@
<div class="icon"></div> <div class="icon"></div>
</div> </div>
<div class="centerInfo" style="top: 45%;left:71%" onclick="showModal()"> <div class="centerInfo" onclick="showModal()" style="top: 45%;left:71%">
<div class="win"> <div class="win">
<div class="title">位置1</div> <div class="title">位置1</div>
<div class="span1">转速: 50n/s</div> <div class="span1">转速: 50n/s</div>
@ -79,7 +83,7 @@
</div> </div>
<div class="eqModal" id="eqModal"> <div class="eqModal" id="eqModal">
<div class="shade" onclick="hideModal()"></div> <div class="shade" onclick="hideModal()"></div>
<div class="centerModal"></div> <div class="centerModal"></div>
</div> </div>
</div> </div>

37
haiwei-admin/src/main/resources/templates/board/board2.html
Unescape Escape View File

@ -1,14 +1,37 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" > <html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head> <head>
<th:block th:include="include :: header('新增参数')" /> <th:block th:include="include :: header('看板2')"/>
</head> </head>
<body class="white-bg"> <body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content"> <link href="../../board/board2.css" rel="stylesheet">
123 <script>
</div> const routerSkip = (e) => {
<th:block th:include="include :: footer" /> $.modal.openTab('看板1',ctx+e);
<script type="text/javascript"> }
</script> </script>
<div>
<div class="topBtn topBtnClick" style="left: 4vw;" onclick="routerSkip('board/board2')">首页</div>
<div class="topBtn" style="left: 14.5vw;" onclick="routerSkip('board/board1')">60型脱水机</div>
<div class="topBtn" style="left: 25vw;">60型一体机</div>
<div class="topBtn" style="left: 71vw;">视频展示</div>
<div class="topBtn" style="left: 83vw;">文档归档</div>
<div class="title1">公司内容介绍</div>
<div class="content">
<p>
大连天通用机械有限公司(简称大连天)创建于2004年，是一家从事高分子材料后处理干燥工艺和设备研发、制造的专业化企业，大连天极强的研发和试验能力，为用户提供各类高分子材料后处理干燥工艺，再根据工艺的要求设计、制造全套的装备，来解决各类客户的一揽子需求，直至交钥匙工程，大连天拥有强大的化学工程专业，机械工程专业，计算机自动控制专业的技术团队，可以为客户提供全方位的技术支持和售前、售后服务。</p>
<p>大连天展目前设备已涵盖合成橡胶后处理全线产品，研发并投入工业化生产的装置已经涵盖:顺丁橡胶、稀土顺丁橡胶、低顺橡胶、溶聚丁苯橡胶、乳聚丁苯橡胶、丁基橡胶、异成橡胶、乙丙橡胶、热塑性弹性体
(SBS、SIS、SEBS、SEPS)、氯丁橡胶、景醇橡胶、丁睛橡胶、氟橡胶、戊丁橡胶、高苯乙烯榜胶、聚丙烯酸脂橡胶、氯醚橡胶、氯磺化聚乙烯、天然橡胶、生物橡胶、炭黑充填胶、液体黄金、复合胶</p>
</div>
<div class="title2">客户展示</div>
<div class="customerPresentation" id="customerPresentation"></div>
<div class="bottom" id="bottom"></div>
</div>
<th:block th:include="include :: footer"/>
<script src="../../board/board2.js"></script>
</body> </body>
</html> </html>

Write Preview
Loading…
Cancel
Save