246 lines
6.8 KiB
HTML
246 lines
6.8 KiB
HTML
<!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> |