|
@@ -17,9 +17,11 @@
|
|
|
}
|
|
}
|
|
|
.screen {
|
|
.screen {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
- width: 100vw;
|
|
|
|
|
- height: 100vh;
|
|
|
|
|
- padding: clamp(12px, 1vw, 20px);
|
|
|
|
|
|
|
+ width: 1920px;
|
|
|
|
|
+ height: 1080px;
|
|
|
|
|
+ padding: 16px;
|
|
|
|
|
+ transform-origin: left top;
|
|
|
|
|
+ overflow: hidden;
|
|
|
background:
|
|
background:
|
|
|
linear-gradient(130deg, rgba(11, 107, 114, .2), transparent 38%),
|
|
linear-gradient(130deg, rgba(11, 107, 114, .2), transparent 38%),
|
|
|
linear-gradient(235deg, rgba(48, 96, 147, .18), transparent 42%),
|
|
linear-gradient(235deg, rgba(48, 96, 147, .18), transparent 42%),
|
|
@@ -43,18 +45,16 @@
|
|
|
gap: 14px;
|
|
gap: 14px;
|
|
|
width: 100%;
|
|
width: 100%;
|
|
|
height: 100%;
|
|
height: 100%;
|
|
|
- min-width: 1200px;
|
|
|
|
|
- min-height: 680px;
|
|
|
|
|
}
|
|
}
|
|
|
.header {
|
|
.header {
|
|
|
display: grid;
|
|
display: grid;
|
|
|
- grid-template-columns: 1fr minmax(360px, 640px) 1fr;
|
|
|
|
|
|
|
+ grid-template-columns: 1fr 600px 1fr;
|
|
|
align-items: center;
|
|
align-items: center;
|
|
|
}
|
|
}
|
|
|
.title {
|
|
.title {
|
|
|
position: relative;
|
|
position: relative;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- font-size: clamp(30px, 2.25vw, 44px);
|
|
|
|
|
|
|
+ font-size: 36px;
|
|
|
font-weight: 700;
|
|
font-weight: 700;
|
|
|
color: #f1ffff;
|
|
color: #f1ffff;
|
|
|
text-shadow: 0 0 18px rgba(61, 226, 255, .85);
|
|
text-shadow: 0 0 18px rgba(61, 226, 255, .85);
|
|
@@ -115,7 +115,7 @@
|
|
|
.kpi-value {
|
|
.kpi-value {
|
|
|
margin-top: 8px;
|
|
margin-top: 8px;
|
|
|
font-family: Impact, "Arial Narrow", sans-serif;
|
|
font-family: Impact, "Arial Narrow", sans-serif;
|
|
|
- font-size: clamp(26px, 1.9vw, 38px);
|
|
|
|
|
|
|
+ font-size: 32px;
|
|
|
line-height: 1;
|
|
line-height: 1;
|
|
|
color: #45f1ff;
|
|
color: #45f1ff;
|
|
|
text-shadow: 0 0 16px rgba(69, 241, 255, .5);
|
|
text-shadow: 0 0 16px rgba(69, 241, 255, .5);
|
|
@@ -244,7 +244,7 @@
|
|
|
</style>
|
|
</style>
|
|
|
</head>
|
|
</head>
|
|
|
<body>
|
|
<body>
|
|
|
-<div class="screen">
|
|
|
|
|
|
|
+<div class="screen" id="screen">
|
|
|
<div class="shell">
|
|
<div class="shell">
|
|
|
<div class="header">
|
|
<div class="header">
|
|
|
<div></div>
|
|
<div></div>
|
|
@@ -490,6 +490,7 @@
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
$(function() {
|
|
$(function() {
|
|
|
|
|
+ fitScreen();
|
|
|
initCharts();
|
|
initCharts();
|
|
|
updateTime();
|
|
updateTime();
|
|
|
loadData();
|
|
loadData();
|
|
@@ -498,10 +499,20 @@
|
|
|
$('#stockList, #actionList, #unlinkedList').on('mouseenter', function() { scrollPaused[this.id] = true; });
|
|
$('#stockList, #actionList, #unlinkedList').on('mouseenter', function() { scrollPaused[this.id] = true; });
|
|
|
$('#stockList, #actionList, #unlinkedList').on('mouseleave', function() { scrollPaused[this.id] = false; });
|
|
$('#stockList, #actionList, #unlinkedList').on('mouseleave', function() { scrollPaused[this.id] = false; });
|
|
|
$(window).on('resize', function() {
|
|
$(window).on('resize', function() {
|
|
|
|
|
+ fitScreen();
|
|
|
Object.keys(charts).forEach(function(key) { charts[key].resize(); });
|
|
Object.keys(charts).forEach(function(key) { charts[key].resize(); });
|
|
|
['stockList', 'actionList', 'unlinkedList'].forEach(function(id) { startAutoScroll(id, 80); });
|
|
['stockList', 'actionList', 'unlinkedList'].forEach(function(id) { startAutoScroll(id, 80); });
|
|
|
});
|
|
});
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ function fitScreen() {
|
|
|
|
|
+ var scaleX = window.innerWidth / 1920;
|
|
|
|
|
+ var scaleY = window.innerHeight / 1080;
|
|
|
|
|
+ $('#screen').css({
|
|
|
|
|
+ transform: 'scale(' + scaleX + ',' + scaleY + ')',
|
|
|
|
|
+ transformOrigin: 'left top'
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
</script>
|
|
</script>
|
|
|
</body>
|
|
</body>
|
|
|
</html>
|
|
</html>
|