feat(banner): 替换为高端大气纯净3D科技艺术主视觉，彻底移除繁杂文字与UI截图，并调优通透遮罩
这个提交包含在：
wikiboss
@@ -1,4 +1,4 @@
|
||||
<link rel="stylesheet" href="__ADDON__/css/modern_nhc.css?v=20261009_vivid">
|
||||
<link rel="stylesheet" href="__ADDON__/css/modern_nhc.css?v=20261009_grand">
|
||||
<link rel="stylesheet" href="__ADDON__/m/css/materialize.css">
|
||||
<link rel="stylesheet" href="__ADDON__/m/css/loader.css">
|
||||
<link rel="stylesheet" href="__ADDON__/m/css/lightbox.css">
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<link href="__ADDON__/images/favicon.ico" type="image/x-icon" rel="icon">
|
||||
<link href="__ADDON__/css/modern_nhc.css?v=20261009_vivid" rel="stylesheet" type="text/css">
|
||||
<link href="__ADDON__/css/modern_nhc.css?v=20261009_grand" rel="stylesheet" type="text/css">
|
||||
<link href="__ADDON__/css/style.css" rel="stylesheet" type="text/css">
|
||||
<link href="__ADDON__/css/animate.css" rel="stylesheet" type="text/css">
|
||||
<link href="__ADDON__/css/page_style.css" rel="stylesheet" type="text/css">
|
||||
|
||||
@@ -386,29 +386,29 @@ img {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 轮播图幻灯片不同主题背景与中式意境光影 (浅色高雅、通透羽化、右侧鲜明视窗完全释放) */
|
||||
/* 轮播图幻灯片不同主题背景与中式意境光影 (高端大气现代科技主视觉，纯净无杂乱文字，右侧通透绽放) */
|
||||
.nhc-slide-theme-1 {
|
||||
background:
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.98) 36%, rgba(255, 255, 255, 0.82) 44%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_lead.svg') right center / cover no-repeat;
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_lead.jpg') right center / cover no-repeat;
|
||||
}
|
||||
|
||||
.nhc-slide-theme-2 {
|
||||
background:
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.98) 36%, rgba(255, 255, 255, 0.82) 44%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_craft.svg') right center / cover no-repeat;
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_craft.jpg') right center / cover no-repeat;
|
||||
}
|
||||
|
||||
.nhc-slide-theme-3 {
|
||||
background:
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.98) 36%, rgba(255, 255, 255, 0.82) 44%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_agent.svg') right center / cover no-repeat;
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_agent.jpg') right center / cover no-repeat;
|
||||
}
|
||||
|
||||
.nhc-slide-theme-4 {
|
||||
background:
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.98) 36%, rgba(255, 255, 255, 0.82) 44%, rgba(255, 255, 255, 0) 54%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_matrix.svg') right center / cover no-repeat;
|
||||
linear-gradient(90deg, #FFFFFF 0%, rgba(255, 255, 255, 0.95) 30%, rgba(255, 255, 255, 0.6) 42%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0) 100%),
|
||||
url('../images/banners/banner_matrix.jpg') right center / cover no-repeat;
|
||||
}
|
||||
|
||||
/* 轮播图切换过渡微动画 */
|
||||
@@ -1662,23 +1662,23 @@ img {
|
||||
}
|
||||
.nhc-slide-theme-1 {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.90) 65%, rgba(255, 255, 255, 0.70) 100%),
|
||||
url('../images/banners/banner_lead.svg') 80% center / cover no-repeat;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%),
|
||||
url('../images/banners/banner_lead.jpg') 80% center / cover no-repeat;
|
||||
}
|
||||
.nhc-slide-theme-2 {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.90) 65%, rgba(255, 255, 255, 0.70) 100%),
|
||||
url('../images/banners/banner_craft.svg') 80% center / cover no-repeat;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%),
|
||||
url('../images/banners/banner_craft.jpg') 80% center / cover no-repeat;
|
||||
}
|
||||
.nhc-slide-theme-3 {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.90) 65%, rgba(255, 255, 255, 0.70) 100%),
|
||||
url('../images/banners/banner_agent.svg') 80% center / cover no-repeat;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%),
|
||||
url('../images/banners/banner_agent.jpg') 80% center / cover no-repeat;
|
||||
}
|
||||
.nhc-slide-theme-4 {
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.90) 65%, rgba(255, 255, 255, 0.70) 100%),
|
||||
url('../images/banners/banner_matrix.svg') 80% center / cover no-repeat;
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.88) 60%, rgba(255, 255, 255, 0.65) 100%),
|
||||
url('../images/banners/banner_matrix.jpg') 80% center / cover no-repeat;
|
||||
}
|
||||
.nhc-hero-title {
|
||||
font-size: 32px;
|
||||
|
||||
二进制文件未显示。
|
之前 宽度: | 高度: | 大小: 485 KiB 之后 宽度: | 高度: | 大小: 591 KiB |
二进制文件未显示。
|
之前 宽度: | 高度: | 大小: 487 KiB 之后 宽度: | 高度: | 大小: 524 KiB |
二进制文件未显示。
|
之前 宽度: | 高度: | 大小: 490 KiB 之后 宽度: | 高度: | 大小: 627 KiB |
二进制文件未显示。
|
之前 宽度: | 高度: | 大小: 493 KiB 之后 宽度: | 高度: | 大小: 518 KiB |
@@ -1,12 +1,13 @@
|
||||
# -*- coding: utf-8 -*-
|
||||
"""
|
||||
测试鲜明轮播图系统 (Test Vivid Banner Carousel System)
|
||||
验证首屏 4 张轮播图的鲜明度、专业业务实体感、无AI味、CSS通透遮罩以及全端结构完整性。
|
||||
测试高端大气轮播图主视觉系统 (Test Premium Hero Visual Banners)
|
||||
验证首屏 4 张轮播图的高清画质、纯净无杂乱文字、高端科技美学、CSS 通透羽化及响应式适配。
|
||||
"""
|
||||
|
||||
import os
|
||||
import re
|
||||
import unittest
|
||||
from PIL import Image
|
||||
|
||||
ROOT_DIR = os.path.abspath(os.path.join(os.path.dirname(__file__), ".."))
|
||||
BANNER_DIR = os.path.join(ROOT_DIR, "public", "assets", "addons", "official", "images", "banners")
|
||||
@@ -15,66 +16,42 @@ PC_HOME_PATH = os.path.join(ROOT_DIR, "addons", "official", "view", "web", "offi
|
||||
M_HOME_PATH = os.path.join(ROOT_DIR, "addons", "official", "view", "web", "official_home", "index_e.html")
|
||||
|
||||
|
||||
class VividBannerCarouselTest(unittest.TestCase):
|
||||
"""验证鲜明高质感轮播图组件"""
|
||||
class PremiumHeroBannerTest(unittest.TestCase):
|
||||
"""验证高端大气轮播图主视觉"""
|
||||
|
||||
def test_01_banner_files_exist_and_non_empty(self):
|
||||
"""1. 验证 4 张核心轮播图资源物理存在且大小合理"""
|
||||
banners = ["banner_lead", "banner_craft", "banner_agent", "banner_matrix"]
|
||||
def test_01_banner_images_high_quality(self):
|
||||
"""1. 验证 4 张核心轮播大图物理存在、分辨率高、画质饱满"""
|
||||
banners = ["banner_lead.jpg", "banner_craft.jpg", "banner_agent.jpg", "banner_matrix.jpg"]
|
||||
for b in banners:
|
||||
svg_file = os.path.join(BANNER_DIR, f"{b}.svg")
|
||||
jpg_file = os.path.join(BANNER_DIR, f"{b}.jpg")
|
||||
# 必须至少有一种高质感格式存在，且文件大小大于 2KB
|
||||
exists = False
|
||||
if os.path.exists(svg_file) and os.path.getsize(svg_file) > 2048:
|
||||
exists = True
|
||||
elif os.path.exists(jpg_file) and os.path.getsize(jpg_file) > 2048:
|
||||
exists = True
|
||||
self.assertTrue(exists, f"轮播图文件不存在或过小: {b}")
|
||||
img_path = os.path.join(BANNER_DIR, b)
|
||||
self.assertTrue(os.path.exists(img_path), f"轮播图不存在: {b}")
|
||||
file_size = os.path.getsize(img_path)
|
||||
self.assertGreater(file_size, 200 * 1024, f"轮播图画质过低或文件过小: {b} ({file_size} bytes)")
|
||||
|
||||
with Image.open(img_path) as im:
|
||||
width, height = im.size
|
||||
self.assertGreaterEqual(width, 1280, f"宽度不足高清要求: {b}")
|
||||
self.assertGreaterEqual(height, 700, f"高度不足首屏要求: {b}")
|
||||
|
||||
def test_02_css_gradient_mask_not_obscuring_right_visual(self):
|
||||
"""2. 验证 CSS 渐变遮罩优化：右侧区域必须保持通透，严禁在 50% 处覆盖 >90% 重度白雾"""
|
||||
def test_02_css_uses_clean_banners_and_clear_masks(self):
|
||||
"""2. 验证 CSS 使用全新大图，且羽化渐变遮罩在右侧（>52%）完全通透无遮挡"""
|
||||
with open(CSS_PATH, "r", encoding="utf-8") as f:
|
||||
css_content = f.read()
|
||||
|
||||
# 检查 4 个 slide 主题
|
||||
for i in range(1, 5):
|
||||
theme_class = f".nhc-slide-theme-{i}"
|
||||
self.assertIn(theme_class, css_content, f"CSS 中缺少主题定义: {theme_class}")
|
||||
for b in ["banner_lead.jpg", "banner_craft.jpg", "banner_agent.jpg", "banner_matrix.jpg"]:
|
||||
self.assertIn(b, css_content, f"CSS 中未正确引用大图: {b}")
|
||||
|
||||
# 检查是否去除了原本在 50% 覆盖 0.92 白色的遮罩问题
|
||||
# 原写法: rgba(255, 255, 255, 0.92) 50%
|
||||
# 优化后右侧主体应通透，不再出现 50% 处 0.92 白
|
||||
self.assertNotIn("rgba(255, 255, 255, 0.92) 50%", css_content,
|
||||
"CSS 仍保留 50% 处 92% 重度白色遮罩，导致右侧鲜明视窗被严重冲淡泛白")
|
||||
"CSS 仍保留 50% 处 92% 重度白色遮罩")
|
||||
|
||||
def test_03_banner_rich_content_and_vivid_colors(self):
|
||||
"""3. 验证轮播图包含真实工业级软件要素与鲜明品牌色彩 (科技蓝 #2563EB, 辅助青 #06B6D4, 紫 #7C3AED)"""
|
||||
svg_banners = {
|
||||
"banner_lead": ["2563EB", "06B6D4", "QPS", "微服务"],
|
||||
"banner_craft": ["2563EB", "06B6D4", "小程序", "API"],
|
||||
"banner_agent": ["7C3AED", "2563EB", "RAG", "Agent"],
|
||||
"banner_matrix": ["2563EB", "POS", "ERP", "SaaS"]
|
||||
}
|
||||
for b, expected_keywords in svg_banners.items():
|
||||
svg_file = os.path.join(BANNER_DIR, f"{b}.svg")
|
||||
if os.path.exists(svg_file):
|
||||
with open(svg_file, "r", encoding="utf-8") as f:
|
||||
content = f.read()
|
||||
for kw in expected_keywords:
|
||||
self.assertTrue(
|
||||
kw.lower() in content.lower(),
|
||||
f"轮播图 {b}.svg 缺少业务要素或鲜明特征词: {kw}"
|
||||
)
|
||||
|
||||
def test_04_pc_and_mobile_template_integrity(self):
|
||||
"""4. 验证 PC 与移动端模板幻灯片数量均为 4，包含对应的主题类名"""
|
||||
def test_03_pc_and_mobile_template_integrity(self):
|
||||
"""3. 验证 PC 与移动端模板幻灯片数量均为 4，包含对应的主题类名"""
|
||||
for page_path in [PC_HOME_PATH, M_HOME_PATH]:
|
||||
with open(page_path, "r", encoding="utf-8") as f:
|
||||
html = f.read()
|
||||
for i in range(1, 5):
|
||||
self.assertIn(f"nhc-slide-theme-{i}", html, f"页面缺少主题类 nhc-slide-theme-{i}: {page_path}")
|
||||
# 必须包含 4 个幻灯片标识
|
||||
self.assertEqual(len(re.findall(r'nhc-slide-theme-\d', html)), 4, f"幻灯片数量不等于 4: {page_path}")
|
||||
|
||||
|
||||
|
||||
在新工单中引用
屏蔽一个用户