xinyouhe/dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
chenlan
2025-06-06 11:48:32 +08:00
commit 8b13b88b3e
41 changed files with 735447 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+246
View File
@@ -0,0 +1,246 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title></title>
<link rel="stylesheet" href="css/style.css">
<script src="plugins/echarts.min.js"></script>
<script src="plugins/jquery.js "></script>
<script src="js/public.js"></script>
<style>
/* RTL布局专用样式 */
body[dir="rtl"] {
text-align: right;
}
body[dir="rtl"] .cont {
direction: rtl;
}
@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi) { /* 1.5×96=144 */
#root-container {
transform: scale(0.9);
transform-origin: 0 0; /* 左上角为缩放基点 */
width: calc(100% / 0.9); /* 补偿缩放后的宽度 */
height: calc(100vh / 0.9); /* 补偿缩放后的高度 */
overflow: hidden; /* 隐藏溢出内容 */
/* position: fixed; */
/* top: 0px; */
}
}
.topimg{
width: 100%;
height: 250px;
box-sizing: border-box;
border: 2px solid #142c64;
border-image: url(./img/border.png) 51 38 21 132;
border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
position: relative;
margin-bottom: 0.833rem;
}
.inner{
position: absolute;
top: -2.125rem;
right: -1.583rem;
bottom: -0.875rem;
left: -5.5rem;
padding: 1rem 1.5rem;
display: flex;
align-items: center;
}
.topimg img{
height: 100%;
margin: auto;
width: 100%;
object-fit: cover;
object-position: center;
}
.carmsg p{
line-height: 35px;
background: linear-gradient(to bottom, #fff, rgb(6 244 255));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.cartitle{
padding-top: 20px;
height:85px;
text-align: center;
font-size: 17px;
font-weight: bold;
background: linear-gradient(to bottom, #fff, rgb(6 244 255));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.toggle-btn {
display: inline-block;
margin-top: 10px;
padding: 8px 15px;
color: white;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
display: flex;
justify-content: center;
}
.toggle-btn:hover {
color: #3367d6;
}
.toggle-btn .more-text {
display: inline;
}
.toggle-btn .less-text {
display: none;
}
.toggle-btn.expanded .more-text {
display: none;
}
.toggle-btn.expanded .less-text {
display: inline;
}
.carmsg {
overflow: hidden;
transition: all 0.4s ease;
}
.carmsg.collapsed {
max-height: 100px; /* 收起时显示的高度 */
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.carmsg.expanded {
max-height: 2000px; /* 足够大的值容纳所有内容 */
}
</style>
</head>
<body id="root-container">
<div id="world" style="height: 99%"></div>
<div class="cont">
<!-- <label for="toggle2" class="toggle2">
<span class="toggle2-button" id="langSwitch" data-i18n="buttonText"></span>
</label> -->
<div class="custom-select toggle2">
<div class="select-selected" data-i18n="lang"></div>
<div class="select-items">
<div data-id="zh" data-i18n="zh"></div>
<div data-id="en" data-i18n="en"></div>
<div data-id="ru" data-i18n="ru"></div>
<div data-id="ar" data-i18n="ar"></div>
</div>
</div>
<div class="title">
<div data-i18n="title"></div>
<div class="times fadeIn delay16">
<p>
<span id="moth"></span>
<span id="week"></span>
</p>
<p>
<span id="time"></span>
</p>
</div>
</div>
<div class="left">
<div class="box card" style="height:calc(20% - 0px)">
<div class="tit" data-i18n="carall"></div>
<div class="all" dir="ltr">
</div>
</div>
<div class="box card" style="height:calc(78% - 0px)">
<div class="tit" data-i18n="newdata"></div>
<div class="boxnav citylist">
<ul id="nav">
</ul>
</div>
<div class="boxfoot"></div>
</div>
</div>
<div class="right">
<div class="box card" style="height:calc(100% - 0px)">
<div class="tit" data-i18n="carinfo"></div>
<div class="boxnav">
<div class="cartitle"></div>
<div class="topimg">
<div class="inner">
</div>
</div>
<div class="carmsg ">
<p><span data-i18n="vin"></span> : <span class="vin"></span></p>
<p><span data-i18n="category"></span> : <span class="classify"></span></p>
<p><span data-i18n="vehicletype"></span> : <span class="model"></span></p>
<p><span data-i18n="destination1"></span> : <span class="destination"></span></p>
<p><span data-i18n="destination"></span> : <span class="fbo_destination"></span></p>
<p><span data-i18n="Departuretime"></span> : <span class="departure_time"></span></p>
<p><span data-i18n="Vehiclestatus"></span> : <span class="status"></span></p>
<p><span data-i18n="ArrivalDate"></span> : <span class="arrival_time"></span></p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="plugins/jquery.liMarquee.js"></script>
<script src="js/china.js"></script>
<script src="js/fz.js"></script>
<script type="text/javascript" src="js/world.js"></script>
<script src="js/i18n.js"></script>
<script>
$(window).load(function() {
$("body").addClass("load")
})
// 点击选择框时显示/隐藏选项
$(".select-selected").click(function() {
$(this).toggleClass("select-arrow-active");
$(this).next(".select-items").toggle();
});
// 点击页面其他位置时关闭下拉框
$(document).click(function(e) {
if (!$(e.target).closest(".custom-select").length) {
$(".select-selected").removeClass("select-arrow-active");
$(".select-items").hide();
}
});
const dpr = window.devicePixelRatio;
if (dpr >= 1.5) {
const container = document.getElementById('root-container');
const world = document.getElementById('world');
container.style.transform = `scale(${1/dpr})`;
container.style.width = `${dpr * 100}%`;
container.style.height = `${dpr * 100}vh`;
myChart.resize();
}
console.log(window.devicePixelRatio)
function handleHighDPR() {
const dpr = window.devicePixelRatio;
if (dpr >= 1.5) {
const container = document.getElementById('root-container');
const world = document.getElementById('world');
container.style.transform = `scale(${1/dpr})`;
container.style.width = `${dpr * 100}%`;
container.style.height = `${dpr * 100}vh`;
myChart.resize();
}
}
window.addEventListener('resize', handleHighDPR);
</script>
</body>
</html>