fengjun/ag-index
1
0
Fork 0
Code Activity

解决方案调整

Browse Source
This commit is contained in:
fengjun
2025-12-17 10:49:04 +08:00
parent 0932d6867d
commit 67e0ef4d09
3 changed files with 182 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/solution/inland_river_shipping.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

94
solution.html
View File

@@ -372,6 +372,17 @@
overflow: hidden;
}
.architecture-section > .container > .row {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.architecture-section > .container > .row > .col-md-6 {
display: flex;
align-items: center;
}
.arch-step {
display: flex;
align-items: flex-start;
@@ -503,6 +514,71 @@
color: #003080;
}
/* Architecture Visual Image Container */
.arch-visual-container {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(71, 85, 105, 0.5);
backdrop-filter: blur(8px);
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.arch-visual-container::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, rgba(0, 100, 255, 0.3), rgba(0, 150, 255, 0.2));
border-radius: 18px;
filter: blur(20px);
opacity: 0.5;
z-index: -1;
animation: pulse 4s ease-in-out infinite;
}
.arch-visual-container img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
position: relative;
z-index: 1;
}
/* Add hover effect */
.arch-visual-container:hover {
transform: translateY(-4px);
transition: transform 0.3s ease;
border-color: rgba(0, 150, 255, 0.6);
}
/* Responsive adjustments for the image container */
@media (max-width: 1200px) {
.arch-visual-container {
max-width: 540px;
}
}
@media (max-width: 991px) {
.arch-visual-container {
max-width: 480px;
}
}
@media (max-width: 767px) {
.arch-visual-container {
max-width: 100%;
margin: 24px auto 0;
}
}
/* Product Matrix Section */
.products-section {
padding: 100px 0;
@@ -787,6 +863,16 @@
align-items: center;
}
@media (max-width: 767px) {
.advantages-section .row {
flex-direction: column;
}
.advantages-section .col-md-6 {
width: 100%;
}
}
.advantages-section::before {
content: '';
position: absolute;
@@ -1128,7 +1214,7 @@
<section class="architecture-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="col-md-4">
<div class="reveal">
<h2 style="font-size: 32px; font-weight: 700; margin-bottom: 40px; color: #fff;">全链条数字化架构</h2>
@@ -1157,9 +1243,11 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-8">
<div class="reveal" style="transition-delay: 200ms;">
<img src=""></img>
<div class="arch-visual-container">
<img src="assets/images/solution/inland_river_shipping.png" alt="内河航运架构图">
</div>
</div>
</div>
</div>

94
solution_inland_river_shipping.html
View File

@@ -372,6 +372,17 @@
overflow: hidden;
}
.architecture-section > .container > .row {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.architecture-section > .container > .row > .col-md-6 {
display: flex;
align-items: center;
}
.arch-step {
display: flex;
align-items: flex-start;
@@ -503,6 +514,71 @@
color: #003080;
}
/* Architecture Visual Image Container */
.arch-visual-container {
position: relative;
width: 100%;
max-width: 700px;
margin: 0 auto;
background: rgba(255, 255, 255, 0.05);
border-radius: 16px;
padding: 20px;
border: 1px solid rgba(71, 85, 105, 0.5);
backdrop-filter: blur(8px);
box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.arch-visual-container::before {
content: '';
position: absolute;
inset: -2px;
background: linear-gradient(135deg, rgba(0, 100, 255, 0.3), rgba(0, 150, 255, 0.2));
border-radius: 18px;
filter: blur(20px);
opacity: 0.5;
z-index: -1;
animation: pulse 4s ease-in-out infinite;
}
.arch-visual-container img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
position: relative;
z-index: 1;
}
/* Add hover effect */
.arch-visual-container:hover {
transform: translateY(-4px);
transition: transform 0.3s ease;
border-color: rgba(0, 150, 255, 0.6);
}
/* Responsive adjustments for the image container */
@media (max-width: 1200px) {
.arch-visual-container {
max-width: 540px;
}
}
@media (max-width: 991px) {
.arch-visual-container {
max-width: 480px;
}
}
@media (max-width: 767px) {
.arch-visual-container {
max-width: 100%;
margin: 24px auto 0;
}
}
/* Product Matrix Section */
.products-section {
padding: 100px 0;
@@ -787,6 +863,16 @@
align-items: center;
}
@media (max-width: 767px) {
.advantages-section .row {
flex-direction: column;
}
.advantages-section .col-md-6 {
width: 100%;
}
}
.advantages-section::before {
content: '';
position: absolute;
@@ -1128,7 +1214,7 @@
<section class="architecture-section">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="col-md-4">
<div class="reveal">
<h2 style="font-size: 32px; font-weight: 700; margin-bottom: 40px; color: #fff;">全链条数字化架构</h2>
@@ -1157,9 +1243,11 @@
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-md-8">
<div class="reveal" style="transition-delay: 200ms;">
<img src=""></img>
<div class="arch-visual-container">
<img src="assets/images/solution/inland_river_shipping.png" alt="内河航运架构图">
</div>
</div>
</div>
</div>