未计成本展示修复

src/views/super/Ranking/RankList.vue

@@ -13,24 +13,18 @@
             </CustomDropdown>
         </div>
 
-        <div v-if="dataRank == 1" style="margin-bottom: 20px;text-align: left">
-            <el-alert type="info" :closable="false" show-icon>
-                <template #title>
-                    未计成本
-                </template>
-                <div style="margin-top: 8px; line-height: 1.6; font-size: 14px; color: #606266;">
-                    <template v-if="dataType == 'ver_type'">
-                        1. AI（服务器成本）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                        2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                        3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                    </template>
-                    <template v-if="dataType == 'check_type'">
-                        1. AI（服务器成本）<br />
-                        2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI<br />
-                        3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span><br />
-                    </template>
-                </div>
-            </el-alert>
+        <div v-if="dataRank == 1 && (dataType == 'ver_type' || dataType == 'check_type')" style="margin-bottom: 20px;text-align: left" class="beforeNotice">
+            <p class="noticeTop flex"><img src="@/assets/site/siteSemInfo_Icon.svg" alt=""> 未计成本</p>
+            <div v-if="dataType == 'ver_type'" class="noticeBot column">
+                <p>1. AI（服务器成本）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+                <p>2. Turnitin <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+                <p>3. 学术（知网PMLC，硕博VIP）<span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+            </div>
+            <div v-if="dataType == 'check_type'" class="noticeBot column">
+                <p>1. AI（服务器成本）</p>
+                <p>2. Turnitin国际版、TurnitinUK版、Turnitin国际版+AI</p>
+                <p>3. 知网PMLC，硕博VIP <span v-if="view == 'year'" style="color:red;">2025年（含）后计入成本</span></p>
+            </div>
         </div>
 
         <div class=" flex-common">
@@ -667,4 +661,25 @@ export default {
     }
   }
 }
+
+.beforeNotice {
+  margin-top: 12px;
+  border-radius: 4px;
+  background: #F2F7FF;
+  border: 1px solid #BFDAFF;
+  padding: 20px 14px;
+  color: #1E2226;
+  letter-spacing: 0.08em;
+
+  .noticeTop {
+    gap: 8px;
+    margin-bottom: 12px;
+
+  }
+
+  .noticeBot {
+    gap: 10px;
+  }
+
+}
 </style>