修改界面

master
夜笙歌 4 years ago
parent 837da90998
commit f16cc3d522

@ -11,7 +11,7 @@ body {
} }
.btnOne { .btnOne {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOne.png); background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnOneClick.png);
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 7.6%; width: 7.6%;
@ -20,7 +20,7 @@ body {
left: 36.1%; left: 36.1%;
} }
.btnTwo { .btnTwo {
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwoClick.png); background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/btnTwo.png);
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 7.6%; width: 7.6%;
@ -36,7 +36,7 @@ body {
height: 65.2%; height: 65.2%;
top: 20.1%; top: 20.1%;
left: 4.3%; left: 4.3%;
display: none; display: block;
} }
.layerTwo{ .layerTwo{
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/layerTwo.png); background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/layerTwo.png);
@ -46,32 +46,23 @@ body {
height: 72.6%; height: 72.6%;
top: 13%; top: 13%;
left: 0.7%; left: 0.7%;
display: block; display: none;
} }
.infoOne{ .infoOne{
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png); background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 14.8%; width: 14.8%;
height: 17%; height: 20%;
top: 8.6%; top: 8.6%;
left: 82.7%; left: 82.7%;
} }
.infoTwo{
background-size: 100% 100%;
position: absolute;
width: 35.6%;
height: 6%;
top: 3.6%;
left: 50%;
transform: translateX(-50%);
}
.infoThree{ .infoThree{
background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png); background-image: url(../../img/board/intelligentRefrigeratorInterconnectionFactory/info.png);
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
width: 17.6%; width: 14.8%;
height: 15.2%;; height: 20%;
top: 8.6%; top: 8.6%;
left: 0.7%; left: 0.7%;
} }

@ -26,27 +26,31 @@ $(() => {
}) })
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: 0.9%;left: 50%;color: #fff;font-size: 1.3vw;transform: translateX(-50%);letter-spacing: 0.3vw">澳柯玛冷柜智能互联工厂</span>
` `
$('body').append(html) $('body').append(html)
} }
const infoOne = () => { const infoOne = () => {
const html = ` const html = `
<span style="position: absolute;top: 10%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">工厂拥有8条智能化生产线36台机器人采用MES系统可同时实现8个系列208种产品的自动混合生产单班定员162人日产能4200台人均每日13台人均效率是原工厂的2.2通过与O2O销售平台TMS系统的连接实现用户的个性化定制</span> <span style="position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">智能制造</span>
<span style="line-height: 0.8vw;position: absolute;top: 25%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">8条智能化生产线36台机器人配备MES系统实现8大系列208种产品的柔性化混流生产 </span>
<span style="line-height: 0.8vw;position: absolute;top: 55%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">日产能4200台单班定员162人人均效率13台/提升2.2</span>
<span style="line-height: 0.8vw;position: absolute;top: 75%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.8vw;">打通O2O销售平台TMS物流系统实现用户的个性化定制</span>
` `
$('#infoOne').append(html) $('#infoOne').append(html)
} }
const infoTwo = () => { const infoTwo = () => {
const html = ` const html = `
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: calc(50% - 0.5vw);left: calc(50% - 9vw);width:90%;color: rgba(255,255,255,1);font-size: 1vw;">冷柜行业第一个国家级智能制造示范项目</span> <span style="transform: translateX(-50%);overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 9%;left: 50% ;color: rgba(255,255,255,1);font-size: 1.25vw;">冷柜行业第一个国家级智能制造示范项目</span>
` `
$('#infoTwo').append(html) $('#infoTwo').append(html)
} }
const infoThree = () => { const infoThree = () => {
const html = ` const html = `
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 21%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的个性化大规模定制冷柜智能工厂</span> <span style=" overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 10%;left: 6%;width:90%;color: red;font-size: 0.9vw;font-weight: 600">世界领先</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 41%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的使用机器人最多的冷柜智能工厂</span> <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 30%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">大规模个性化定制冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 61%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.75vw;">世界领先的人均效率最高的冷柜智能化工厂</span> <span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 50%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">使用机器人最多的冷柜智能工厂</span>
<span style="overflow: hidden;text-overflow: ellipsis;white-space:nowrap;position: absolute;top: 70%;left: 6%;width:90%;color: rgba(255,255,255,1);font-size: 0.9vw;">人均效率最高的冷柜智能化工厂</span>
` `
$('#infoThree').append(html) $('#infoThree').append(html)
} }

@ -1,5 +1,6 @@
const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100 const vw = (document.documentElement.clientWidth || document.body.clientWidth) / 100
let time1 =() =>{} let time1 =() =>{}
let time2 =() =>{}
// 随机数 // 随机数
const random = (val = 1) => { const random = (val = 1) => {
return Math.ceil(Math.random() * val) return Math.ceil(Math.random() * val)
@ -1610,6 +1611,7 @@ const singleVerticalBarChart = function (data, id, rotate = 0,bottom='15%') {
$(window).resize(charts.resize); $(window).resize(charts.resize);
} }
const singleVerticalBarChartTwo = function (data, id) { const singleVerticalBarChartTwo = function (data, id) {
clearInterval(time2)
let time = () => { let time = () => {
} }
let charts = echarts.init(id); let charts = echarts.init(id);
@ -1761,7 +1763,7 @@ const singleVerticalBarChartTwo = function (data, id) {
}) })
let step = 1 / (data.xName.length / 11) * 100 let step = 1 / (data.xName.length / 11) * 100
time = setInterval(() => { time2 = setInterval(() => {
option.dataZoom[0].end += step option.dataZoom[0].end += step
option.dataZoom[0].start += step option.dataZoom[0].start += step
if (option.dataZoom[0].start >= 100) { if (option.dataZoom[0].start >= 100) {
@ -1774,7 +1776,6 @@ const singleVerticalBarChartTwo = function (data, id) {
} }
charts.setOption(option); charts.setOption(option);
}, 3000) }, 3000)
time()
} }

Loading…
Cancel
Save