generated from root/feiqiu-ETL
274 lines
9.5 KiB
CSS
274 lines
9.5 KiB
CSS
/**
|
|
* 通用Banner背景样式
|
|
* 使用方式：
|
|
* 1. 引入此CSS文件
|
|
* 2. 在banner容器上添加 class="banner-bg"
|
|
* 3. 添加主题类名定义颜色，如 class="banner-bg theme-blue"
|
|
*
|
|
* 可用主题：
|
|
* - theme-blue (默认蓝色)
|
|
* - theme-blue-light (浅蓝色)
|
|
* - theme-red (红色-高优先)
|
|
* - theme-orange (橙色-优先)
|
|
* - theme-pink (粉色-关系)
|
|
* - theme-green (绿色)
|
|
* - theme-purple (紫色)
|
|
*/
|
|
|
|
/* ===== 主题颜色变量定义 ===== */
|
|
:root {
|
|
/* 蓝色主题 (默认) */
|
|
--banner-color-start: #1e6fff;
|
|
--banner-color-mid: #3d8bff;
|
|
--banner-color-end: #5ba3ff;
|
|
|
|
/* 纹理透明度 */
|
|
--texture-opacity: 0.08;
|
|
}
|
|
|
|
/* ===== 基础Banner样式 ===== */
|
|
.banner-bg {
|
|
position: relative;
|
|
background:
|
|
/* 1. 底部边缘高光 */
|
|
linear-gradient(0deg, rgba(255,255,255,0.15) 0%, transparent 25%),
|
|
/* 2. 右下角光晕 */
|
|
radial-gradient(ellipse 60% 45% at 85% 95%, rgba(255,255,255,0.25) 0%, transparent 55%),
|
|
/* 3. 左侧柔和光晕 */
|
|
radial-gradient(ellipse 50% 80% at 5% 40%, rgba(255,255,255,0.12) 0%, transparent 50%),
|
|
/* 4. 顶部深色加深 */
|
|
linear-gradient(180deg, rgba(0,0,0,0.18) 0%, transparent 40%),
|
|
/* 5. 左上角深色区域 */
|
|
radial-gradient(ellipse 80% 70% at -10% -5%, rgba(0,0,0,0.25) 0%, transparent 45%),
|
|
/* 6. 斜向丝绸光带 */
|
|
linear-gradient(315deg,
|
|
transparent 0%,
|
|
rgba(255,255,255,0.04) 20%,
|
|
rgba(255,255,255,0.12) 45%,
|
|
rgba(255,255,255,0.12) 55%,
|
|
rgba(255,255,255,0.04) 80%,
|
|
transparent 100%
|
|
),
|
|
/* 7. 主渐变 - 多色过渡（翻转） */
|
|
linear-gradient(330deg,
|
|
var(--banner-color-start) 0%,
|
|
var(--banner-color-start) 15%,
|
|
var(--banner-color-mid) 40%,
|
|
var(--banner-color-mid) 60%,
|
|
var(--banner-color-end) 85%,
|
|
var(--banner-color-end) 100%
|
|
);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ===== 纹理层 - 几何线条 ===== */
|
|
.banner-bg::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
opacity: var(--texture-opacity);
|
|
background-image:
|
|
/* 斜线网格 */
|
|
repeating-linear-gradient(
|
|
45deg,
|
|
transparent,
|
|
transparent 20px,
|
|
rgba(255,255,255,0.5) 20px,
|
|
rgba(255,255,255,0.5) 21px
|
|
),
|
|
repeating-linear-gradient(
|
|
-45deg,
|
|
transparent,
|
|
transparent 20px,
|
|
rgba(255,255,255,0.3) 20px,
|
|
rgba(255,255,255,0.3) 21px
|
|
);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ===== 纹理层 - 右上角柔和光晕 ===== */
|
|
.banner-bg::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: -110px;
|
|
right: -130px;
|
|
width: 300px;
|
|
height: 280px;
|
|
background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.1) 40%, transparent 65%);
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* 确保内容在纹理之上 */
|
|
.banner-bg > * {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
/* ===== 主题颜色预设 ===== */
|
|
|
|
/* 蓝色主题 (默认) - 深蓝色 */
|
|
.banner-bg.theme-blue,
|
|
.banner-bg {
|
|
--banner-color-start: #002d80;
|
|
--banner-color-mid: #0052d9;
|
|
--banner-color-end: #2b7de9;
|
|
}
|
|
|
|
/* 浅蓝色主题 */
|
|
.banner-bg.theme-blue-light {
|
|
--banner-color-start: #1a6dd9;
|
|
--banner-color-mid: #4087e9;
|
|
--banner-color-end: #6ba8f8;
|
|
}
|
|
|
|
/* 红色主题 - 高优先召回 */
|
|
.banner-bg.theme-red {
|
|
--banner-color-start: #991b1b;
|
|
--banner-color-mid: #dc2626;
|
|
--banner-color-end: #ef4444;
|
|
}
|
|
|
|
/* 橙色主题 - 优先召回 */
|
|
.banner-bg.theme-orange {
|
|
--banner-color-start: #9a3412;
|
|
--banner-color-mid: #ea580c;
|
|
--banner-color-end: #f97316;
|
|
}
|
|
|
|
/* 粉色主题 - 关系构建 */
|
|
.banner-bg.theme-pink {
|
|
--banner-color-start: #9d174d;
|
|
--banner-color-mid: #db2777;
|
|
--banner-color-end: #ec4899;
|
|
}
|
|
|
|
/* 绿色主题 */
|
|
.banner-bg.theme-green {
|
|
--banner-color-start: #00796b;
|
|
--banner-color-mid: #00a870;
|
|
--banner-color-end: #4cd964;
|
|
}
|
|
|
|
/* 紫色主题 */
|
|
.banner-bg.theme-purple {
|
|
--banner-color-start: #7b1fa2;
|
|
--banner-color-mid: #9c27b0;
|
|
--banner-color-end: #ba68c8;
|
|
}
|
|
|
|
/* 青绿色主题 - 客户回访 */
|
|
.banner-bg.theme-teal {
|
|
--banner-color-start: #0f766e;
|
|
--banner-color-mid: #14b8a6;
|
|
--banner-color-end: #2dd4bf;
|
|
}
|
|
|
|
/* 黑金主题 - 客户详情 */
|
|
.banner-bg.theme-dark-gold {
|
|
--banner-color-start: #1a1a1a;
|
|
--banner-color-mid: #2a2520;
|
|
--banner-color-end: #1f1c18;
|
|
--texture-opacity: 0.06;
|
|
}
|
|
.banner-bg.theme-dark-gold::after {
|
|
bottom: 0px;
|
|
right: 0px;
|
|
width: 500px;
|
|
height: 500px;
|
|
background:
|
|
radial-gradient(ellipse at 60% 70%, rgba(255, 196, 0, 0.25) 0%, transparent 50%),
|
|
linear-gradient(135deg, transparent 0%, rgba(255, 187, 0, 0.15) 30%, rgba(255, 183, 0, 0.2) 60%, transparent 100%);
|
|
}
|
|
|
|
/* 珊瑚粉主题 - 助教详情 */
|
|
.banner-bg.theme-coral {
|
|
--banner-color-start: #be4a62;
|
|
--banner-color-mid: #d4617a;
|
|
--banner-color-end: #e8899a;
|
|
}
|
|
|
|
/* ===== 纹理变体 ===== */
|
|
|
|
|
|
/* 艺术波浪纹理 */
|
|
.banner-bg.texture-artistic::before {
|
|
background-image:
|
|
/* 全局柔和渐变 */
|
|
linear-gradient(120deg,
|
|
rgba(255,255,255,0.15) 0%,
|
|
transparent 40%,
|
|
rgba(255,255,255,0.05) 70%,
|
|
rgba(255,255,255,0.12) 100%
|
|
),
|
|
/* 多层流动曲线 */
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath d='M-20 80 Q30 40 80 80 T180 80 T280 80' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.5'/%3E%3Cpath d='M-20 120 Q40 160 100 120 T220 120' fill='none' stroke='rgba(255,255,255,0.08)' stroke-width='1'/%3E%3Cpath d='M-20 160 Q50 130 110 160 T240 160' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E");
|
|
background-size: 100% 100%, 200px 150px;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 丝绸流线纹理 */
|
|
.banner-bg.texture-silk::before {
|
|
background-image:
|
|
/* 丝绸光泽渐变 */
|
|
linear-gradient(135deg,
|
|
rgba(255,255,255,0.18) 0%,
|
|
transparent 25%,
|
|
rgba(255,255,255,0.06) 50%,
|
|
transparent 75%,
|
|
rgba(255,255,255,0.1) 100%
|
|
),
|
|
/* 优雅的贝塞尔曲线 */
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200'%3E%3Cpath d='M0 100 C50 50, 100 150, 150 100 S250 50, 300 100' fill='none' stroke='rgba(255,255,255,0.1)' stroke-width='2'/%3E%3Cpath d='M0 140 C60 90, 120 190, 180 140 S280 90, 340 140' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.5'/%3E%3Cpath d='M0 60 C40 30, 90 90, 140 60 S220 30, 280 60' fill='none' stroke='rgba(255,255,255,0.05)' stroke-width='1'/%3E%3C/svg%3E");
|
|
background-size: 100% 100%, 280px 180px;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Windows 11 Bloom 风格 - 流动丝带效果 */
|
|
.banner-bg.texture-aurora::before {
|
|
background-image:
|
|
/* 流动丝带 SVG */
|
|
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 200' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='ribbon1' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0.4)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.15)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0.3)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon2' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(0,0,0,0.15)'/%3E%3Cstop offset='50%25' stop-color='rgba(255,255,255,0.2)'/%3E%3Cstop offset='100%25' stop-color='rgba(0,0,0,0.1)'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon3' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='rgba(255,255,255,0)'/%3E%3Cstop offset='30%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='70%25' stop-color='rgba(255,255,255,0.35)'/%3E%3Cstop offset='100%25' stop-color='rgba(255,255,255,0)'/%3E%3C/linearGradient%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='2'/%3E%3C/filter%3E%3C/defs%3E%3C!-- 底层丝带 --%3E%3Cpath d='M-50 180 Q80 100 180 140 T350 100 T500 140' fill='none' stroke='url(%23ribbon2)' stroke-width='60' stroke-linecap='round' filter='url(%23blur)'/%3E%3C!-- 中层丝带 --%3E%3Cpath d='M-30 50 Q100 120 200 70 T380 110 T520 60' fill='none' stroke='url(%23ribbon1)' stroke-width='45' stroke-linecap='round'/%3E%3C!-- 顶层高光丝带 --%3E%3Cpath d='M0 120 Q120 60 220 100 T420 70' fill='none' stroke='url(%23ribbon3)' stroke-width='25' stroke-linecap='round'/%3E%3C!-- 光影细节 --%3E%3Cpath d='M50 90 Q150 150 280 90 T450 120' fill='none' stroke='rgba(255,255,255,0.25)' stroke-width='8' stroke-linecap='round'/%3E%3C/svg%3E");
|
|
background-size: 480px 160px;
|
|
background-position: center 40px;
|
|
background-repeat: no-repeat;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 流线纹理 */
|
|
.banner-bg.texture-flow::before {
|
|
background-image:
|
|
repeating-linear-gradient(
|
|
120deg,
|
|
transparent,
|
|
transparent 40px,
|
|
rgba(255,255,255,0.08) 40px,
|
|
rgba(255,255,255,0.08) 80px
|
|
);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 简约纹理 - 只有光晕无线条 */
|
|
.banner-bg.texture-minimal::before {
|
|
background: none;
|
|
}
|
|
|
|
/* ===== 动画效果（可选） ===== */
|
|
.banner-bg.animated::before {
|
|
animation: texture-shift 20s linear infinite;
|
|
}
|
|
|
|
@keyframes texture-shift {
|
|
0% {
|
|
background-position: 0 0, 0 0;
|
|
}
|
|
100% {
|
|
background-position: 40px 40px, -40px -40px;
|
|
}
|
|
}
|
|
|