顶部 添加船卡片显示

css/style.css

@@ -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);
+	}
 }