模板:WelcomeHeader/styles.css：修订间差异

2025年5月31日 (六) 13:55的最新版本

/* ===== 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 样式 ===== */
-.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: rgba(255, 255, 255, 0.85);
+   background:linear-gradient(135deg,#3e83ff 0%,#eaf1ff 100%);
-  border: 1px solid rgba(255, 255, 255, 0.6);
+   box-shadow:0 6px 18px rgba(0,0,0,.15);
-   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+   overflow:hidden;
-   overflow: hidden;
-  position: relative;
 }
+.banner-left img{
-/* 背景渐变层 */
+   max-width:200px;
-.main-banner::before {
+   height:auto;
-   content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-   bottom: 0;
-  background: linear-gradient(135deg, rgba(62, 131, 255, 0.4) 0%, rgba(234, 241, 255, 0.3) 100%);
-  z-index: -1;
 }
+.banner-right{
-.banner-left img {
+   flex:1;
-   max-width: 200px;
+   text-align:right;
-   height: auto;
+   color:#0d1b3d;
-   filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
+.banner-right h1{
-.banner-right {
+   font-size:38px;
-   flex: 1;
+   font-weight:700;
-   text-align: right;
+   margin:0;
-   color: #0d1b3d;
 }
+.subtitle{
-.banner-right h1 {
+   font-size:20px;
-   font-size: 38px;
+   margin:.3em 0 1.5em;
-   font-weight: 700;
+   color:#2f2f2f;
-   margin: 0;
 }
+.divider{
-.subtitle {
+   height:1px;
-   font-size: 20px;
+   background:rgba(255,255,255,.6);
-   margin: 0.3em 0 1.5em;
+   margin-bottom:1.2em;
-   color: #2f2f2f;
 }
+.count{
-.divider {
+   font-size:16px;
-   height: 1px;
+   margin:0;
-   background: rgba(0, 0, 0, 0.1);
-  margin-bottom: 1.2em;
 }
-.count {
-  font-size: 16px;
-  margin: 0;
-}
 /* ≤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;
    }
 }