styles.css：修订间差异

2025年6月22日 (日) 15:19的版本

/* ===== Banner 样式 ===== */
.main-banner{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px 32px;
  border-radius:16px;
  background:linear-gradient(135deg,#3e83ff 0%,#eaf1ff 100%);
  box-shadow:0 6px 18px rgba(0,0,0,.15);
  overflow:hidden;
}
.banner-left img{
  max-width:200px;
  height:auto;
}
.banner-right{
  flex:1;
  text-align:right;
  color:#0d1b3d;
}
.banner-right h1{
  font-size:38px;
  font-weight:700;
  margin:0;
}
.subtitle{
  font-size:20px;
  margin:.3em 0 1.5em;
  color:#2f2f2f;
}
.divider{
  height:1px;
  background:rgba(255,255,255,.6);
  margin-bottom:1.2em;
}
.count{
  font-size:16px;
  margin:0;
}
/* ≤600 px 时纵向布局 */
@media(max-width:600px){
  .main-banner{
    flex-direction:column;
    text-align:center;
  }
  .banner-right{
    text-align:center;
  }
  .divider{
    width:80%;
    margin:12px auto;
  }
}

@@ 第1行： / 第1行： @@
-/* ===== 蓝字白底 Banner 样式 ===== */
+/* ===== Banner 样式 ===== */
-.main-banner {
+.main-banner{
-   display: flex;
+   display:flex;
-   align-items: center;
+   align-items:center;
-   gap: 20px;
+   gap:20px;
-   padding: 24px 32px;
+   padding:24px 32px;
-   border-radius: 16px;
+   border-radius:16px;
-   background: var(--color-surface-1); /* 改为纯白背景 */
+   background:linear-gradient(135deg,#3e83ff 0%,#eaf1ff 100%);
-   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+   box-shadow:0 6px 18px rgba(0,0,0,.15);
-   overflow: hidden;
+   overflow:hidden;
 }
-.banner-left img {
+.banner-left img{
-   max-width: 200px;
+   max-width:200px;
-   height: auto;
+   height:auto;
 }
-.banner-right {
+.banner-right{
-   flex: 1;
+   flex:1;
-   text-align: right;
+   text-align:right;
-   color: #3e83ff; /* 主文字改为蓝色 */
+   color:#0d1b3d;
 }
-.banner-right h1 {
+.banner-right h1{
-   font-size: 38px;
+   font-size:38px;
-   font-weight: 700;
+   font-weight:700;
-   margin: 0;
+   margin:0;
-  color: #0d1b3d; /* 标题使用深蓝色 */
 }
-.subtitle {
+.subtitle{
-   font-size: 20px;
+   font-size:20px;
-   margin: 0.3em 0 1.5em;
+   margin:.3em 0 1.5em;
-   color: #3e83ff; /* 副标题使用亮蓝色 */
+   color:#2f2f2f;
 }
-.divider {
+.divider{
-   height: 1px;
+   height:1px;
-   background: rgba(62, 131, 255, 0.3); /* 改为蓝色半透明分割线 */
+   background:rgba(255,255,255,.6);
-   margin-bottom: 1.2em;
+   margin-bottom:1.2em;
 }
-.count {
+.count{
-   font-size: 16px;
+   font-size:16px;
-   margin: 0;
+   margin:0;
-  color: #0d1b3d; /* 计数文字使用深蓝色 */
 }
 /* ≤600 px 时纵向布局 */
-@media (max-width: 600px) {
+@media(max-width:600px){
-   .main-banner {
+   .main-banner{
-     flex-direction: column;
+     flex-direction:column;
-     text-align: center;
+     text-align:center;
    }
-   .banner-right {
+   .banner-right{
-     text-align: center;
+     text-align:center;
    }
-   .divider {
+   .divider{
-     width: 80%;
+     width:80%;
-     margin: 12px auto;
+     margin:12px auto;
    }
 }