修改界面

master
夜笙歌 4 years ago
parent 8d17a6d494
commit 187075b45a

@ -14,15 +14,15 @@ body {
position: absolute; position: absolute;
width: 23%; width: 23%;
height: 35%; height: 35%;
top: 15%; top: 17%;
left: 2.5%; left: 1.5%;
} }
.outputStatistics{ .outputStatistics{
position: absolute; position: absolute;
width: 23%; width: 23%;
height: 35%; height: 35%;
top: 60%; top: 18.5%;
left: 2.5%; left: 75.3%;
} }
.quality{ .quality{
position: absolute; position: absolute;
@ -32,56 +32,58 @@ body {
left: 26.5%; left: 26.5%;
} }
.ecosphere{ .ecosphere{
background: url(../../img/board/month/one.png) no-repeat; /*background: url(../../img/board/month/one.png) no-repeat;*/
background-size: 100% 100%; /*background-size: 100% 100%;*/
position: absolute; /*position: absolute;*/
width: 23%; /*width: 23%;*/
height: 35%; /*height: 35%;*/
top: 15%; /*top: 15%;*/
left: 75%; /*left: 75%;*/
} }
.scene{ .scene{
background: url(../../img/board/month/two.jpg) no-repeat; background: url(../../img/board/month/two.jpg) no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 23%; width: 22%;
height: 35%; height: 34%;
top: 15%; top: 18%;
left: 50.5%; left: 51.5%;
}
.Highlight{
background-repeat: no-repeat;
background-size: 100% 100%;
position: absolute;
width: 22%;
height: 34%;
top: 18.7%;
left: 26.7%;
}
.nivoSlider{
width: 100%;
height: 100%;
} }
.HighlightOne{ .HighlightOne{
background-repeat: no-repeat; /*width: 23vw;*/
background-size: 100% 100%; /*height: 35vh;*/
/*position: absolute;*/ width: 230px;
width:200px; height: 350px;
height: 200px;
/*top: 16%;*/
/*left: 27.5%;*/
} }
.HighlightTwo{ .HighlightTwo{
background-repeat: no-repeat; /*width: 23vw;*/
background-size: 100% 100%; /*height: 35vh;*/
/*position: absolute;*/ width: 230px;
width:200px; height: 350px;
height: 200px;
/*top: 16%;*/
/*left: 38.5%;*/
} }
.HighlightThree{ .HighlightThree{
background-repeat: no-repeat; /*width: 23vw;*/
background-size: 100% 100%; /*height: 35vh;*/
/*position: absolute;*/ width: 230px;
width:200px; height: 350px;
height: 200px;
/*top: 34.5%;*/
/*left: 27.5%;*/
} }
.HighlightFour{ .HighlightFour{
background-repeat: no-repeat; /*width: 23vw;*/
background-size: 100% 100%; /*height: 35vh;*/
/*position: absolute;*/ width: 230px;
width:200px; height: 350px;
height: 200px;
/*top: 34.5%;*/
/*left: 38.5%*/
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.8 MiB

After

Width:  |  Height:  |  Size: 444 KiB

@ -26,10 +26,14 @@ $(() => {
}) })
autoUpdate(url + "/selectHighlightProducts", INTERVAL, data => { autoUpdate(url + "/selectHighlightProducts", INTERVAL, data => {
let url = data.map(val => val.picturePath) let url = data.map(val => val.picturePath)
$('#HighlightOne').css({backgroundImage: `url("http://10.100.70.5:9090/${url[0]}")`}) // $('#HighlightOne').css({backgroundImage: `url("http://10.100.70.5:9090/${url[0]}")`})
$('#HighlightTwo').css({backgroundImage: `url("http://10.100.70.5:9090/${url[1]}")`}) // $('#HighlightTwo').css({backgroundImage: `url("http://10.100.70.5:9090/${url[1]}")`})
$('#HighlightThree').css({backgroundImage: `url("http://10.100.70.5:9090/${url[2]}")`}) // $('#HighlightThree').css({backgroundImage: `url("http://10.100.70.5:9090/${url[2]}")`})
$('#HighlightFour').css({backgroundImage: `url("http://10.100.70.5:9090/${url[3]}")`}) // $('#HighlightFour').css({backgroundImage: `url("http://10.100.70.5:9090/${url[3]}")`})
$('#HighlightOne').attr("src" , `http://10.100.70.5:9090/${url[0]}`)
$('#HighlightTwo').attr("src" , `http://10.100.70.5:9090/${url[1]}`)
$('#HighlightThree').attr("src" , `http://10.100.70.5:9090/${url[2]}`)
$('#HighlightFour').attr("src" , `http://10.100.70.5:9090/${url[3]}`)
}) })
lineChart(null, document.getElementById("quality")) lineChart(null, document.getElementById("quality"))
@ -65,15 +69,15 @@ const curWeek = () => {
const moduleTitle = () => { const moduleTitle = () => {
const html = ` const html = `
<span style="position: absolute;top: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜集成控制中心</span> <span style="position: absolute;top: 2.9%;left: 50%;color: #fff;font-size: 1.1vw;transform: translateX(-50%);letter-spacing: 0.3vw">智能冷柜集成控制中心</span>
<span style="position: absolute;top: 10%;left: 3.3%;color: #CFD2D0;font-size: 1.0vw">用户满意度</span> <span style="position: absolute;top: 14.5%;left: 2.6%;color: #CFD2D0;font-size: 1.0vw">用户满意度</span>
<span style="position: absolute;top: 10%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">产品升级</span> <span style="position: absolute;top: 14.5%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">产品升级</span>
<span style="position: absolute;top: 10%;left: 51.5%;color: #CFD2D0;font-size: 1.0vw">场景升级</span> <span style="position: absolute;top: 14.5%;left: 68%;color: #CFD2D0;font-size: 1.0vw">场景升级</span>
<span style="position: absolute;top: 10%;left: 76%;color: #CFD2D0;font-size: 1.0vw">全价值链</span> <span style="position: absolute;top: 14.5%;left: 93%;color: #CFD2D0;font-size: 1.0vw">全价值链</span>
<span style="position: absolute;top: 54.5%;left: 3.3%;color: #CFD2D0;font-size: 1.0vw">产量统计</span> <span style="position: absolute;top: 57.8%;left: 3.3%;color: #CFD2D0;font-size: 1.0vw">产量统计</span>
<span style="position: absolute;top: 54.5%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">品质提升</span> <span style="position: absolute;top: 57.8%;left: 27.6%;color: #CFD2D0;font-size: 1.0vw">品质提升</span>
<span style="position: absolute;top: 54.5%;left: 51.5%;color: #CFD2D0;font-size: 1.0vw">周质量分析</span> <span style="position: absolute;top: 57.8%;left: 68%;color: #CFD2D0;font-size: 1.0vw">周质量分析</span>
<span style="position: absolute;top: 54.5%;left: 76%;color: #CFD2D0;font-size: 1.0vw">安全生产</span> <span style="position: absolute;top: 57.8%;left: 93%;color: #CFD2D0;font-size: 1.0vw">安全生产</span>
` `
$('body').append(html) $('body').append(html)
} }

@ -51,12 +51,13 @@
<!--<div class="HighlightTwo" id="HighlightTwo"></div>--> <!--<div class="HighlightTwo" id="HighlightTwo"></div>-->
<!--<div class="HighlightThree" id="HighlightThree"></div>--> <!--<div class="HighlightThree" id="HighlightThree"></div>-->
<!--<div class="HighlightFour" id="HighlightFour"></div>--> <!--<div class="HighlightFour" id="HighlightFour"></div>-->
<div class="Highlight" id="Highlight">
<div id="sliderq" class="nivoSlider"> <div id="slider" class="nivoSlider">
<img class="HighlightOne" id="HighlightOne"></img> <img class="HighlightOne" id="HighlightOne" width="23vw"/>
<img class="HighlightTwo" id="HighlightTwo"></img> <img class="HighlightTwo" id="HighlightTwo" width="23vw"/>
<img class="HighlightThree" id="HighlightThree"></img> <img class="HighlightThree" id="HighlightThree" width="23vw"/>
<img class="HighlightFour" id="HighlightFour"></img> <img class="HighlightFour" id="HighlightFour" width="23vw"/>
</div>
</div> </div>
</body> </body>
<script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script> <script src="../../static/js/board/month.js" th:src="@{/js/board/month.js}"></script>

Loading…
Cancel
Save