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

2026年1月13日 (二) 22:26的最新版本

/* ===== Banner 样式 ===== */
.main-banner{
  display:flex;
  align-items:center;
  gap:20px;
  padding:24px 32px;
  border-radius:8.5px;
  background:linear-gradient(135deg,#3e83ff 0%,var(--color-surface-2) 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; */
}
.title {
    color: var(--color-base);
}
.subtitle{
  font-size:20px;
  margin:.3em 0 1.5em;
  color:var(--color-base);
}
.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: 32px; /* 增加间距，增加呼吸感 (学术排版特征) */
+   gap:20px;
-   padding: 32px 40px;
+   padding:24px 32px;
+   border-radius:8.5px;
-  /* --- 核心修改 --- */
+   background:linear-gradient(135deg,#3e83ff 0%,var(--color-surface-2) 100%);
-   background: #fff; /* 回归纸张的本色（或极淡的米灰 var(--color-surface-1)） */
+   box-shadow:0 6px 18px rgba(0,0,0,.15);
+   overflow:hidden;
-  /* 极小的圆角，保留一点点精致的润泽感，但看起来几乎是直的 */
-  border-radius: 2px;
-  /* 关键设计：左侧品牌色实线。 */
-  /* 这在学术海报和商业研报中非常常见，既标识身份又保持克制 */
-  border-left: 5px solid #3e83ff;
-  /* 其余三边使用极细的灰线，模拟文档边界 */
-  border-top: 1px solid rgba(0,0,0,0.08);
-  border-right: 1px solid rgba(0,0,0,0.08);
-  border-bottom: 1px solid rgba(0,0,0,0.08);
-  /* 极其克制的阴影，仅用于让它微微脱离背景，不做夸张的悬浮 */
-   box-shadow: 0 2px 8px rgba(0,0,0,0.04);
-   overflow: hidden;
 }
+.banner-left img{
-.banner-left img {
+   max-width:200px;
-   max-width: 180px; /* 稍微缩小图片，让文字占比更重，更显“内容为王” */
+   height:auto;
-   height: auto;
-  /* 图片可以加个极细的边框让它像插图 */
-  /* border: 1px solid rgba(0,0,0,0.1); */
-  /* filter: grayscale(100%);  // 高阶玩法：图片去色，鼠标悬停变色，更显学术冷淡风 */
 }
+.banner-right{
-.banner-right {
+   flex:1;
-   flex: 1;
+   text-align:right;
-  /* 建议：学术/商业文档通常左对齐，右对齐会显得随意。
+  /* color:#0d1b3d; */
-     如果必须右对齐保持原样即可，但左对齐更严肃。 */
-   text-align: left;
 }
 .title {
-  /* 使用深色，接近黑色但不是纯黑，减少视觉疲劳 */
+    color: var(--color-base);
-  color: #0f172a;
-  /* 如果你的网站引入了衬线体 (Times New Roman, Georgia, Noto Serif)，这里是用它的最佳时机 */
-  font-family: "Georgia", "Times New Roman", serif;
-  font-weight: 600;
-  letter-spacing: 0.02em; /* 微加字间距，增加通透感 */
-  line-height: 1.3;
 }
+.subtitle{
-.subtitle {
+   font-size:20px;
-   font-size: 18px; /* 稍微调小字号，更显精致 */
+   margin:.3em 0 1.5em;
-   margin: 0.5em 0 1.5em;
+   color:var(--color-base);
-   color: #475569; /* 中灰色，形成清晰的信息层级 */
-  font-weight: 400;
-  line-height: 1.6; /* 增加行高，提升可读性 */
 }
+.divider{
-.divider {
+   height:1px;
-   height: 1px;
+   background:rgba(255,255,255,.6);
-  /* 极细的灰线，像表格线一样精确 */
+   margin-bottom:1.2em;
-   background: rgba(0,0,0,0.1);
-   margin-bottom: 1.2em;
-  width: 100%; /* 配合 text-align: left */
 }
+.count{
-.count {
+   font-size:16px;
-   font-size: 14px;
+   margin:0;
-   margin: 0;
-  text-transform: uppercase; /* 把标签改为全大写，增加形式感 */
-  letter-spacing: 0.1em;
-  color: #64748b;
-  font-weight: 600;
 }
-/* 其中的数字单独样式（如果有 span 包裹最好，没有的话针对整体） */
-/* 这种风格常把数字放大并加粗 */
-.count span {
-    color: #3e83ff; /* 用品牌色强调数据 */
-    font-family: sans-serif; /* 数据保持无衬线体的现代感 */
-    font-weight: 700;
-}
 /* ≤600 px 时纵向布局 */
-@media(max-width: 600px){
+@media(max-width:600px){
-   .main-banner {
+   .main-banner{
-     flex-direction: column;
+     flex-direction:column;
-     text-align: left; /* 移动端也保持左对齐 */
+     text-align:center;
-    border-left: 1px solid rgba(0,0,0,0.08); /* 移动端可能去掉侧边条，或者变为顶部条 */
-    border-top: 4px solid #3e83ff;
    }
-   .banner-right {
+   .banner-right{
-     text-align: left;
+     text-align:center;
    }
-   .divider {
+   .divider{
-     width: 100%;
+     width:80%;
-     margin: 16px 0;
+     margin:12px auto;
    }
 }

琪露若​（留言 | 贡献）

2026年1月13日 (二) 22:26的最新版本

琪露若（留言 | 贡献）