顶部 添加船卡片显示
This commit is contained in:
浅念
+173
@@ -49,7 +49,61 @@ body {
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
.centers{
|
||||
position: fixed;
|
||||
top: 115px;
|
||||
left: 23%;
|
||||
width: 54%;
|
||||
min-width: 1050px;
|
||||
background: url(../img/shiplistbg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
padding: 1% 3%;
|
||||
max-height: 70%;
|
||||
}
|
||||
.cents-top{
|
||||
display: flex;
|
||||
}
|
||||
.shiptopcard{
|
||||
background: url(../img/shipbg.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
width: 24%;
|
||||
padding: 10px 15px;
|
||||
display: inline-block;
|
||||
margin: 0.5%;
|
||||
font-size: 0.8rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.shiptopcard:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 12px rgba(6, 244, 255, 0.2);
|
||||
}
|
||||
@media (max-width:1650px) {
|
||||
.shiptopcard{
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
}
|
||||
@media (min-width:3800px) {
|
||||
.centers{
|
||||
padding: 4% 6%;
|
||||
}
|
||||
.shiptopcard{
|
||||
padding: 40px 60px;
|
||||
}
|
||||
|
||||
}
|
||||
.tag{
|
||||
background-color: #f70303;
|
||||
padding: 0px 2px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.displayflex{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.left {
|
||||
float: left;
|
||||
background: -webkit-radial-gradient(50% 10%, farthest-corner, rgb(42 79 169 / 70%) 0%, rgb(16 30 66 / 70%) 50%, rgb(9 13 27 / 70%), rgb(0 0 0 / 70%));
|
||||
@@ -1071,6 +1125,7 @@ body {
|
||||
font-size: clamp(0.75rem, 1vw, 1.875rem);
|
||||
padding: 8px 30px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#modalOverlay .modal-close{
|
||||
top: auto;
|
||||
@@ -1244,4 +1299,122 @@ body {
|
||||
.statusbtn .status4.active {
|
||||
background: linear-gradient(to bottom, #ff9f43, #e6ac0e);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.centers-tabs {
|
||||
width: 100px;
|
||||
margin-right: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
.centers-cont {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
.centers-tab {
|
||||
font-size: 0.875rem;
|
||||
padding: 8px 10px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.centers-tab:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.centers-tab.active {
|
||||
background: linear-gradient(to bottom, #06f4ff, #00c6ff);
|
||||
color: #142c64;
|
||||
box-shadow: 0 2px 8px rgba(6, 244, 255, 0.3);
|
||||
}
|
||||
|
||||
.centers-tab.active::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 20px;
|
||||
background: #142c64;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.centers-content {
|
||||
display: none;
|
||||
animation: fadeIn 0.3s ease;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.centers-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.centers-content .content-wrapper {
|
||||
max-height: 80px;
|
||||
overflow: hidden;
|
||||
transition: max-height 0.3s ease;
|
||||
}
|
||||
|
||||
.expanded .centers-content .content-wrapper {
|
||||
max-height: 2000px;
|
||||
}
|
||||
|
||||
.mores {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
padding: 10px 0 0px;
|
||||
transition: all 0.3s ease;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mores:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.mores img {
|
||||
width: 20px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.mores.expanded img {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.mores .more-text {
|
||||
font-size: 0.875rem;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.mores .less-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mores.expanded .more-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mores.expanded .less-text {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
BIN
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 346 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 296 KiB |
+29
-1
@@ -114,6 +114,32 @@
|
||||
<div class="boxfoot"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="centers">
|
||||
<div class="cents-top">
|
||||
<div class="centers-tabs">
|
||||
<div class="centers-tab active" data-i18n="Intransit"></div>
|
||||
<div class="centers-tab" data-i18n="Inport"></div>
|
||||
</div>
|
||||
<div class="centers-cont ">
|
||||
<div class="centers-content active">
|
||||
<div class="content-wrapper shipListdatas">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="centers-content">
|
||||
<div class="content-wrapper navigatedatas">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mores">
|
||||
<img src="./img/la.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="right">
|
||||
<div class="box card" style="height:calc(100% - 0px)">
|
||||
<div class="tit" data-i18n="carinfo"></div>
|
||||
@@ -185,6 +211,8 @@
|
||||
</div>
|
||||
<div class="pagination-container"></div>
|
||||
<div class="pagination-container1"></div>
|
||||
<div class="pagination-containerkp"></div>
|
||||
<div class="pagination-containerkp1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tab-content" id="tab2">
|
||||
@@ -263,7 +291,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 生成地 -->
|
||||
<!-- 卡片 -->
|
||||
|
||||
<!-- 车详情弹出框 -->
|
||||
<div class="modal-overlay" id="modalOverlaycar">
|
||||
|
||||
+21
@@ -207,6 +207,27 @@ function locationfn(lang,status){
|
||||
success: function(result){
|
||||
navigatedatas = result.data.navigate
|
||||
shipListdatas = result.data.pending
|
||||
var navigatedatashtml=''
|
||||
var shipListdatashtml=''
|
||||
$.each(navigatedatas,function(){
|
||||
navigatedatashtml+=`<div class="shiptopcard" data-name="navigate" data-id="${this.id}">
|
||||
<p class="displayflex">${this.ship_name} <span class="tag">${this.count}</span></p>
|
||||
<p>DEST: ${this.port}</p>
|
||||
<p>ETA:${this.last_time}</p>
|
||||
</div>`
|
||||
});
|
||||
$.each(shipListdatas,function(){
|
||||
shipListdatashtml+=`<div class="shiptopcard" data-name="shipList" data-id="${this.id}">
|
||||
<p class="displayflex">${this.ship_name} <span class="tag">${this.count}</span></p>
|
||||
<p>DEST: ${this.port}</p>
|
||||
<p>ETA:${this.last_time}</p>
|
||||
</div>`
|
||||
});
|
||||
$(".shipListdatas").html(shipListdatashtml)
|
||||
$(".navigatedatas").html(navigatedatashtml)
|
||||
if(navigatedatas.length>4||shipListdatas.length>4){
|
||||
$('.mores').show()
|
||||
}
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
|
||||
@@ -30,6 +30,8 @@
|
||||
"yujidaodashijian":"الوقت المتوقع للوصول",
|
||||
"Nextstation":"المحطة التالية",
|
||||
"Nexttime":"٢ دقيقة",
|
||||
"Inport":"في الميناء",
|
||||
"Intransit":"قيد النقل",
|
||||
"history":"التاريخ",
|
||||
"detail":"التفاصيل",
|
||||
"prevPage":"الصفحة السابقة",
|
||||
|
||||
@@ -30,6 +30,8 @@
|
||||
"yujidaodashijian":"Estimated arrival time",
|
||||
"Nextstation":"Next station",
|
||||
"Nexttime":"Next Stop Arrival",
|
||||
"Inport":"In port",
|
||||
"Intransit":"In transit",
|
||||
"history":"History",
|
||||
"detail":"Detail",
|
||||
"prevPage":"Previous page",
|
||||
|
||||
@@ -29,6 +29,8 @@
|
||||
"yujidaodashijian":"Ожидаемое время прибытия",
|
||||
"Nextstation":"Следующая станция",
|
||||
"Nexttime":"Прибытие",
|
||||
"Inport":" В порту",
|
||||
"Intransit":"В пути",
|
||||
"history":"История",
|
||||
"detail":"Подробнее",
|
||||
"close":"Закрыть",
|
||||
|
||||
@@ -30,6 +30,8 @@
|
||||
"yujidaodashijian":"预计到达时间",
|
||||
"Nextstation":"下一站",
|
||||
"Nexttime":"下站预计到达时间",
|
||||
"Inport":"在港",
|
||||
"Intransit":"运输中",
|
||||
"history":"历史记录",
|
||||
"detail":"详细信息",
|
||||
"prevPage":"上一页",
|
||||
|
||||
+70
-7
@@ -3668,7 +3668,9 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
|
||||
$(".infotimes").hide();
|
||||
$(".pagination-container1").show();
|
||||
$(".pagination-container").hide();
|
||||
Vehiclelocation(params.data.id,langzh)
|
||||
$(".pagination-containerkp").hide();
|
||||
$(".pagination-containerkp1").hide();
|
||||
Vehiclelocation(params.data.id,langzh,'pagination-container1')
|
||||
return false
|
||||
}else{
|
||||
//获取船上车辆信息
|
||||
@@ -3676,8 +3678,10 @@ function Global(chinaGeoCoordMap, nameMap, isshow) {
|
||||
$('#globalLoading').show();
|
||||
$(".infotimes").show();
|
||||
$(".pagination-container").show();
|
||||
$(".pagination-containerkp1").hide();
|
||||
$(".pagination-containerkp").hide();
|
||||
$(".pagination-container1").hide();
|
||||
Vehicleshipfn(params.data.id,langzh)
|
||||
Vehicleshipfn(params.data.id,langzh,'pagination-container')
|
||||
}
|
||||
// 设置标题
|
||||
// modalTitle.textContent = params.name;
|
||||
@@ -3712,7 +3716,7 @@ function vehicleshipData(id,lang,page){
|
||||
})
|
||||
}
|
||||
//船上车辆
|
||||
function Vehicleshipfn(id,lang){
|
||||
function Vehicleshipfn(id,lang,name){
|
||||
$.ajax({
|
||||
url:baseURL+'/Vehicle/ship',
|
||||
type:'POST',
|
||||
@@ -3760,7 +3764,7 @@ function Vehicleshipfn(id,lang){
|
||||
const totalPages = Math.ceil(totalItems / pageSize);
|
||||
// 分页配置
|
||||
const pagination = new Pagination({
|
||||
container: document.querySelector('.pagination-container'),
|
||||
container: document.querySelector(`.${name}`),
|
||||
currentPage: 1,
|
||||
totalPages: totalPages,
|
||||
onPageChange: (page) => {
|
||||
@@ -3819,7 +3823,7 @@ function loadTableData(id,lang,page){
|
||||
}
|
||||
})
|
||||
}
|
||||
function Vehiclelocation(id,lang){
|
||||
function Vehiclelocation(id,lang,name){
|
||||
$.ajax({
|
||||
url:baseURL+'/Vehicle/location',
|
||||
type:'POST',
|
||||
@@ -3837,7 +3841,7 @@ function Vehiclelocation(id,lang){
|
||||
const totalPages = Math.ceil(totalItems / pageSize);
|
||||
// 分页配置
|
||||
const pagination = new Pagination({
|
||||
container: document.querySelector('.pagination-container1'),
|
||||
container: document.querySelector(`.${name}`),
|
||||
currentPage: 1,
|
||||
totalPages: totalPages,
|
||||
onPageChange: (page) => {
|
||||
@@ -3919,6 +3923,39 @@ function getcardetile(id){
|
||||
});
|
||||
}
|
||||
$(function(){
|
||||
// 为所有 shiptopcard 添加点击事件
|
||||
$(document).on('click', '.shiptopcard', function() {
|
||||
// 获取当前点击卡片的 data-id
|
||||
document.getElementById('modalOverlay').style.display = 'block';
|
||||
const id = this.getAttribute('data-id');
|
||||
var names= this.getAttribute('data-name');
|
||||
// 移除其他卡片的激活状态
|
||||
document.querySelectorAll('.shiptopcard').forEach(c => c.classList.remove('active'));
|
||||
// 添加当前卡片的激活状态
|
||||
this.classList.add('active');
|
||||
if(names=="navigate"){
|
||||
$('.modal-tabs').children().not(':first').hide();
|
||||
$('#globalLoading').show();
|
||||
$(".infotimes").hide();
|
||||
|
||||
$(".pagination-containerkp1").show();
|
||||
$(".pagination-container1").hide();
|
||||
$(".pagination-containerkp").hide();
|
||||
$(".pagination-container").hide();
|
||||
Vehiclelocation(id,localStorage.getItem('lang')|| 'en','pagination-containerkp1')
|
||||
return false
|
||||
}else{
|
||||
//获取船上车辆信息
|
||||
$('.modal-tabs').children().show();
|
||||
$('#globalLoading').show();
|
||||
$(".infotimes").show();
|
||||
$(".pagination-containerkp").show();
|
||||
$(".pagination-container").hide();
|
||||
$(".pagination-containerkp1").hide();
|
||||
$(".pagination-container1").hide();
|
||||
Vehicleshipfn(id,localStorage.getItem('lang')|| 'en','pagination-containerkp')
|
||||
}
|
||||
});
|
||||
// 弹出层控制
|
||||
const modalOverlay = document.getElementById('modalOverlay');
|
||||
const modalClose = document.querySelector('.modal-close');
|
||||
@@ -3996,6 +4033,32 @@ $(function(){
|
||||
// console.log('Switch is OFF');
|
||||
// }
|
||||
// });
|
||||
|
||||
document.querySelectorAll('.centers-tab').forEach(tab => {
|
||||
tab.addEventListener('click', () => {
|
||||
// 移除所有标签的激活状态
|
||||
document.querySelectorAll('.centers-tab').forEach(t => t.classList.remove('active'));
|
||||
// 移除所有内容的激活状态
|
||||
document.querySelectorAll('.centers-content').forEach(c => c.classList.remove('active'));
|
||||
// 添加当前标签的激活状态
|
||||
tab.classList.add('active');
|
||||
// 添加对应内容的激活状态
|
||||
const index = Array.from(tab.parentElement.children).indexOf(tab);
|
||||
document.querySelectorAll('.centers-content')[index].classList.add('active');
|
||||
});
|
||||
});
|
||||
document.querySelectorAll('.mores').forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const wrapper = button.previousElementSibling;
|
||||
const isExpanded = wrapper.classList.contains('expanded');
|
||||
|
||||
if (isExpanded) {
|
||||
wrapper.classList.remove('expanded');
|
||||
button.classList.remove('expanded');
|
||||
} else {
|
||||
wrapper.classList.add('expanded');
|
||||
button.classList.add('expanded');
|
||||
}
|
||||
});
|
||||
});
|
||||
})
|
||||
|
||||
|
||||
Reference in New Issue
Block a user