修改时空算子库html结构

src/views/Sksjgl.vue

@@ -66,10 +66,12 @@
                 </div>
                 <!-- 功能卡片列表 -->
                 <!-- 单个功能卡片 -->
-                <div class="card-item" v-for="(item, index) in cardList" :key="index">
-                    <div class="card-title">{{ item.title }}</div>
-                    <div class="card-bg" :style="{ backgroundColor: item.bgColor }"></div>
-                    <div class="card-desc">{{ item.desc }}</div>
+                <div class="card-list">
+                    <div class="card-item" v-for="(item, index) in cardList" :key="index">
+                        <div class="card-title">{{ item.title }}</div>
+                        <div class="card-bg" :style="{ backgroundColor: item.bgColor }"></div>
+                        <div class="card-desc">{{ item.desc }}</div>
+                    </div>
                 </div>
             </div>
 
@@ -253,7 +255,6 @@ export default {
                 height: 400px;
                 // background: #f0f8ff;
                 // border: 1px solid #409eff;
-
                 display: flex;
                 align-items: center;
                 justify-content: center;
@@ -268,17 +269,23 @@ export default {
                         width: 100%;
                         height: 361px;
                         border-radius: 8px;
+                        transition: all 0.3s ease;
                     }
 
                     .label {
                         color: #ffffff;
                         text-align: center;
-                        height: 50px;
-                        line-height: 50px;
+                        height: 70px;
+                        line-height: 70px;
                         font-size: 24px;
                     }
                 }
 
+                &:hover .pictrue {
+                    transform: scale(1.05) translateY(-5px);
+                    box-shadow: 0 10px 30px rgba(24, 144, 255, 0.3);
+                    border-color: rgba(24, 144, 255, 0.6);
+                }
 
             }
         }
@@ -288,17 +295,17 @@ export default {
     .time-space-operator-lib {
         background-color: #1e407c;
         color: #fff;
-        padding: 50px 150px;
-        height: 700px;
+        padding: 100px 150px;
         box-sizing: border-box;
+        margin-bottom: 50px;
 
         /* 标题区域 */
         .title-section {
             text-align: center;
-            margin-bottom: 20px;
+            margin-bottom: 50px;
 
             h1 {
-                font-size: 28px;
+                font-size: 50px;
                 font-weight: bold;
             }
         }
@@ -306,14 +313,19 @@ export default {
         /* 描述区域 */
         .desc-section {
             margin-bottom: 30px;
-            line-height: 1.6;
-            font-size: 14px;
-            opacity: 0.9;
+            line-height: 2;
+            font-size: 20px;
+            text-indent: 2em;
         }
 
         /* 业务专区区域 */
         .business-section {
             margin-top: 20px;
+            border-radius: 16px 16px 16px 16px;
+            background-color: rgba(31, 41, 55, 0.16);
+            border: 1px solid #374151;
+            padding: 20px 20px;
+            box-sizing: border-box;
 
             .business-header {
                 display: flex;
@@ -322,6 +334,10 @@ export default {
                 margin-bottom: 15px;
                 font-size: 16px;
 
+                span {
+                    font-size: 20px;
+                }
+
                 .more-btn {
                     background-color: transparent;
                     border: 1px solid #fff;
@@ -337,16 +353,22 @@ export default {
         .card-list {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-            gap: 20px;
+            gap: 55px;
 
             .card-item {
                 background-color: rgba(255, 255, 255, 0.1);
                 padding: 15px;
                 border-radius: 8px;
-                height: 180px;
+                height: 240px;
                 display: flex;
                 flex-direction: column;
 
+                &:hover {
+                    cursor: pointer;
+                    box-shadow: 0 10px 30px rgba(24, 144, 255, 0.3);
+                    border-color: rgba(24, 144, 255, 0.6);
+                }
+
                 .card-title {
                     font-size: 15px;
                     font-weight: 500;