| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172 |
- <!DOCTYPE html>
- <html lang="zh-CN">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>API测试报告 - {{ report_date }}</title>
- <style>
- body {
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- line-height: 1.6;
- color: #333;
- max-width: 100%;
- margin: 0;
- padding: 20px;
- }
- .container {
- max-width: 800px;
- margin: 0 auto;
- background: #fff;
- border-radius: 8px;
- box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
- overflow: hidden;
- }
- .header {
- background: linear-gradient(135deg, #3498db, #2980b9);
- color: white;
- padding: 30px;
- text-align: center;
- }
- .header h1 {
- margin: 0;
- font-size: 28px;
- }
- .header p {
- margin: 10px 0 0;
- opacity: 0.9;
- }
- .content {
- padding: 30px;
- }
- .stats {
- display: flex;
- justify-content: space-around;
- margin-bottom: 30px;
- flex-wrap: wrap;
- }
- .stat {
- text-align: center;
- padding: 20px;
- border-radius: 8px;
- color: white;
- min-width: 120px;
- margin: 10px;
- }
- .stat.passed {
- background: linear-gradient(135deg, #27ae60, #2ecc71);
- }
- .stat.failed {
- background: linear-gradient(135deg, #e74c3c, #e67e22);
- }
- .stat.skipped {
- background: linear-gradient(135deg, #95a5a6, #7f8c8d);
- }
- .stat.total {
- background: linear-gradient(135deg, #3498db, #2980b9);
- }
- .stat .number {
- font-size: 32px;
- font-weight: bold;
- display: block;
- }
- .stat .label {
- font-size: 14px;
- opacity: 0.9;
- }
- .summary {
- background: #f8f9fa;
- padding: 20px;
- border-radius: 8px;
- margin-bottom: 20px;
- }
- .test-case {
- border-left: 4px solid #dee2e6;
- padding: 15px;
- margin-bottom: 15px;
- background: #f8f9fa;
- border-radius: 4px;
- }
- .test-case.passed {
- border-left-color: #27ae60;
- }
- .test-case.failed {
- border-left-color: #e74c3c;
- }
- .test-case.skipped {
- border-left-color: #f39c12;
- }
- .footer {
- text-align: center;
- padding: 20px;
- background: #f8f9fa;
- color: #6c757d;
- font-size: 14px;
- }
- .btn {
- display: inline-block;
- padding: 10px 20px;
- background: #3498db;
- color: white;
- text-decoration: none;
- border-radius: 4px;
- margin-top: 20px;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="header">
- <h1>API测试报告</h1>
- <p>生成时间: {{ report_time }}{% if environment %} | 环境: {{ environment }}{% endif %}</p>
- </div>
- <div class="content">
- <div class="stats">
- <div class="stat passed">
- <span class="number">{{ summary.passed }}</span>
- <span class="label">通过</span>
- </div>
- <div class="stat failed">
- <span class="number">{{ summary.failed }}</span>
- <span class="label">失败</span>
- </div>
- <div class="stat skipped">
- <span class="number">{{ summary.skipped }}</span>
- <span class="label">跳过</span>
- </div>
- <div class="stat total">
- <span class="number">{{ summary.total }}</span>
- <span class="label">总计</span>
- </div>
- </div>
- <div class="summary">
- <h3>测试概要</h3>
- <p>成功率: <strong>{{ summary.success_rate }}%</strong></p>
- <p>总耗时: <strong>{{ summary.duration }}</strong></p>
- </div>
- <h3>测试用例详情</h3>
- {% for test in tests %}
- <div class="test-case {{ test.status }}">
- <strong>{{ test.name }}</strong>
- <div>状态: {{ test.status|upper }} | 耗时: {{ test.duration }}</div>
- {% if test.error %}
- <div style="margin-top: 10px; color: #e74c3c;">
- <strong>错误信息:</strong> {{ test.error }}
- </div>
- {% endif %}
- </div>
- {% endfor %}
- <div style="text-align: center;">
- <a href="{{ report_url }}" class="btn">查看完整报告</a>
- </div>
- </div>
- <div class="footer">
- <p>© 2024 API自动化测试平台. 本邮件由系统自动生成,请勿直接回复。</p>
- </div>
- </div>
- </body>
- </html>
|