feat(plugins): 更新天气插件html
This commit is contained in:
baby20162016
@@ -186,7 +186,7 @@ async def handle_weather(bot, event: MessageEvent, args: List[str]):
|
|||||||
try:
|
try:
|
||||||
# 渲染HTML模板为图片
|
# 渲染HTML模板为图片
|
||||||
base64_image = await image_manager.render_template_to_base64(
|
base64_image = await image_manager.render_template_to_base64(
|
||||||
"weather.html", weather_info, output_name="weather.png", width=1080
|
"weather.html", weather_info, output_name="weather.png", width=400, height=500
|
||||||
)
|
)
|
||||||
|
|
||||||
if base64_image:
|
if base64_image:
|
||||||
|
|||||||
@@ -4,23 +4,16 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>天气查询结果</title>
|
<title>天气查询结果</title>
|
||||||
|
<script src="https://unpkg.com/lucide@latest"></script>
|
||||||
<style>
|
<style>
|
||||||
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap');
|
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #0f172a; /* 深蓝黑背景 */
|
--bg-color: #7C96E8; /* 图片中的典型 Fluent 蓝色 */
|
||||||
--window-bg: rgba(30, 41, 59, 0.85); /* 窗口背景 */
|
--glass-bg: rgba(255, 255, 255, 0.15);
|
||||||
--border-color: rgba(255, 255, 255, 0.08);
|
--glass-border: rgba(255, 255, 255, 0.2);
|
||||||
--accent: #6366f1; /* 核心强调色 - 靛蓝 */
|
--text-main: #FFFFFF;
|
||||||
--accent-glow: rgba(99, 102, 241, 0.4);
|
--text-secondary: rgba(255, 255, 255, 0.8);
|
||||||
--text-title: #f8fafc;
|
|
||||||
--text-desc: #94a3b8;
|
|
||||||
--text-code: #a5f3fc; /* 代码高亮色 - 浅青 */
|
|
||||||
--card-bg: rgba(0, 0, 0, 0.2);
|
|
||||||
--weather-bg: #0b1120; /* 天气卡片深色背景 */
|
|
||||||
--sunny-color: #fbbf24; /* 晴天橙色 */
|
|
||||||
--cloudy-color: #6b7280; /* 多云灰色 */
|
|
||||||
--rainy-color: #3b82f6; /* 雨天蓝色 */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
@@ -30,283 +23,363 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Noto Sans SC', system-ui, sans-serif;
|
font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
color: var(--text-title);
|
color: var(--text-main);
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
padding: 0;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
padding: 40px 20px;
|
||||||
-webkit-font-smoothing: antialiased;
|
-webkit-font-smoothing: antialiased;
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 窗口容器 */
|
.container {
|
||||||
.window {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 100vh;
|
max-width: 500px; /* 窄屏手机比例 */
|
||||||
background: var(--window-bg);
|
|
||||||
backdrop-filter: blur(20px);
|
|
||||||
-webkit-backdrop-filter: blur(20px);
|
|
||||||
border-radius: 0;
|
|
||||||
border: none;
|
|
||||||
box-shadow: none;
|
|
||||||
overflow: auto;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
|
||||||
|
|
||||||
/* 顶部标题栏 */
|
|
||||||
.header {
|
|
||||||
padding: 32px 40px;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
|
||||||
background: rgba(255, 255, 255, 0.02);
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
gap: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dots {
|
/* 顶部城市信息 */
|
||||||
display: flex;
|
.header-section {
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
.dot {
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
.red { background: #ef4444; }
|
|
||||||
.yellow { background: #f59e0b; }
|
|
||||||
.green { background: #10b981; }
|
|
||||||
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 1.5px;
|
|
||||||
color: var(--text-desc);
|
|
||||||
text-transform: uppercase;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 内容区域 */
|
|
||||||
.content {
|
|
||||||
padding: 40px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
.page-title h1 {
|
|
||||||
font-size: 48px;
|
|
||||||
background: linear-gradient(to right, #fff, #94a3b8);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
.page-title p {
|
|
||||||
color: var(--text-desc);
|
|
||||||
font-size: 20px;
|
|
||||||
margin-top: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 城市信息 */
|
|
||||||
.city-info {
|
|
||||||
background: var(--card-bg);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
border-radius: 16px;
|
|
||||||
padding: 32px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.city-name {
|
.city-name {
|
||||||
font-size: 36px;
|
font-size: 28px;
|
||||||
font-weight: 700;
|
font-weight: 400;
|
||||||
color: var(--text-title);
|
letter-spacing: 2px;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 30px;
|
||||||
|
opacity: 0.95;
|
||||||
}
|
}
|
||||||
|
|
||||||
.query-time {
|
.main-temp-wrapper {
|
||||||
font-size: 16px;
|
position: relative;
|
||||||
color: var(--text-desc);
|
display: inline-block;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
margin-left: -10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 天气网格 */
|
.main-temp {
|
||||||
.weather-grid {
|
font-size: 120px;
|
||||||
display: grid;
|
font-weight: 300;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
line-height: 1;
|
||||||
gap: 24px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 天气卡片 */
|
.temp-unit {
|
||||||
.weather-card {
|
position: absolute;
|
||||||
background: var(--weather-bg);
|
top: 15px;
|
||||||
border-radius: 16px;
|
right: -35px;
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.weather-desc-row {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
opacity: 0.9;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.divider {
|
||||||
|
width: 1px;
|
||||||
|
height: 16px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 列表卡片部分 */
|
||||||
|
.forecast-card {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--glass-bg);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
-webkit-backdrop-filter: blur(20px);
|
||||||
|
border: 1px solid var(--glass-border);
|
||||||
|
border-radius: 24px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
|
||||||
border: 1px solid var(--border-color);
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 16px;
|
gap: 10px;
|
||||||
transition: transform 0.2s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.weather-card:hover {
|
.chart-container {
|
||||||
transform: translateY(-2px);
|
width: 100%;
|
||||||
|
height: 160px;
|
||||||
|
margin: 15px 0;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weather-header {
|
.chart-svg {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-line-high {
|
||||||
|
fill: none;
|
||||||
|
stroke: rgba(255, 255, 255, 0.95);
|
||||||
|
stroke-width: 2.5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-line-low {
|
||||||
|
fill: none;
|
||||||
|
stroke: rgba(255, 255, 255, 0.95);
|
||||||
|
stroke-width: 2;
|
||||||
|
stroke-linecap: round;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-dot-high {
|
||||||
|
fill: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-dot-low {
|
||||||
|
fill: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-label {
|
||||||
|
font-family: 'Noto Sans SC', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
fill: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-label-low {
|
||||||
|
font-family: 'Noto Sans SC', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
fill: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
|
.forecast-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
padding: 0 8px 10px 8px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
margin-bottom: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.weather-day {
|
.header-item {
|
||||||
font-size: 24px;
|
flex: 1;
|
||||||
font-weight: 700;
|
|
||||||
color: var(--text-title);
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-condition {
|
|
||||||
font-size: 18px;
|
|
||||||
color: var(--text-desc);
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-main {
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
|
||||||
|
|
||||||
.weather-temp {
|
|
||||||
font-size: 48px;
|
|
||||||
font-weight: 900;
|
|
||||||
color: var(--sunny-color);
|
|
||||||
margin: 16px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-details {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: var(--text-desc);
|
|
||||||
}
|
|
||||||
|
|
||||||
.weather-detail-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-label {
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-value {
|
|
||||||
color: var(--text-title);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 页脚 */
|
|
||||||
.footer {
|
|
||||||
margin-top: auto;
|
|
||||||
padding: 32px;
|
|
||||||
border-top: 1px solid var(--border-color);
|
|
||||||
text-align: center;
|
|
||||||
color: var(--text-desc);
|
|
||||||
font-size: 14px;
|
|
||||||
background: rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer .info-row {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer .version-info {
|
|
||||||
font-size: 12px;
|
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
margin-top: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 响应式设计 */
|
.forecast-grid {
|
||||||
@media (max-width: 768px) {
|
display: flex;
|
||||||
.content {
|
justify-content: space-between;
|
||||||
padding: 20px;
|
width: 100%;
|
||||||
}
|
padding: 0 5px;
|
||||||
|
}
|
||||||
|
|
||||||
.page-title h1 {
|
.grid-item {
|
||||||
font-size: 36px;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.weather-grid {
|
.grid-day {
|
||||||
grid-template-columns: 1fr;
|
display: flex;
|
||||||
}
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
.weather-card {
|
.day-label {
|
||||||
padding: 20px;
|
font-size: 15px;
|
||||||
}
|
font-weight: 500;
|
||||||
|
color: rgba(255, 255, 255, 0.95);
|
||||||
|
}
|
||||||
|
|
||||||
.weather-temp {
|
.day-date {
|
||||||
font-size: 36px;
|
font-size: 13px;
|
||||||
}
|
font-weight: 400;
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-icon {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
stroke-width: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.grid-temp {
|
||||||
|
font-size: 14px;
|
||||||
|
margin-top: 130px; /* 为图表留出空间 */
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
margin-top: 20px;
|
||||||
|
font-size: 12px;
|
||||||
|
opacity: 0.6;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 400px) {
|
||||||
|
.main-temp { font-size: 100px; }
|
||||||
|
.city-name { font-size: 24px; }
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="window">
|
<div class="container">
|
||||||
<div class="header">
|
<!-- 顶部核心信息 -->
|
||||||
<div class="dots">
|
<div class="header-section">
|
||||||
<div class="dot red"></div>
|
<div class="city-name">{{ city_name }}</div>
|
||||||
<div class="dot yellow"></div>
|
|
||||||
<div class="dot green"></div>
|
{% set first_day = weather_data[0] %}
|
||||||
|
<div class="main-temp-wrapper">
|
||||||
|
<span class="main-temp">{{ first_day.temperature.split(' / ')[0].replace('℃', '') if ' / ' in first_day.temperature else first_day.temperature.replace('℃', '') }}</span>
|
||||||
|
<span class="temp-unit">°C</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="weather-desc-row">
|
||||||
|
<span>{{ first_day.weather }}</span>
|
||||||
|
<div class="divider"></div>
|
||||||
|
<span>风力 {{ first_day.wind_power }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="title">天气查询</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="content">
|
<!-- 预测卡片 -->
|
||||||
<div class="page-title">
|
<div class="forecast-card">
|
||||||
<h1>天气查询结果</h1>
|
<div class="forecast-grid">
|
||||||
<p>{{ timestamp }}</p>
|
{% set month = query_time.split('年')[1].split('月')[0] if '年' in query_time else '3' %}
|
||||||
</div>
|
{# 星期名称映射 #}
|
||||||
|
{% set week_names = ['日', '一', '二', '三', '四', '五', '六'] %}
|
||||||
<div class="city-info">
|
{# 从第一天数据中提取今天是星期几 #}
|
||||||
<div class="city-name">{{ city_name }}</div>
|
{% set first_day_text = weather_data[0].day %}
|
||||||
<div class="query-time">查询时间: {{ query_time }}</div>
|
{% set today_week_text = first_day_text.split('(')[1].replace(')', '') if '(' in first_day_text else '今天' %}
|
||||||
</div>
|
{# 将文字星期转换为数字：今天=0, 明天=1, 后天=2, 周一=1, 周二=2... #}
|
||||||
|
{% if today_week_text == '今天' %}
|
||||||
<div class="weather-grid">
|
{% set today_week_num = 0 %}
|
||||||
{% for day_weather in weather_data %}
|
{% elif today_week_text == '明天' %}
|
||||||
<div class="weather-card">
|
{% set today_week_num = 1 %}
|
||||||
<div class="weather-header">
|
{% elif today_week_text == '后天' %}
|
||||||
<div class="weather-day">{{ day_weather.day }}</div>
|
{% set today_week_num = 2 %}
|
||||||
<div class="weather-condition">{{ day_weather.weather }}</div>
|
{% elif '周' in today_week_text %}
|
||||||
</div>
|
{% set week_day_char = today_week_text.replace('周', '').replace('星期', '') %}
|
||||||
<div class="weather-main">
|
{% set week_map = {'日': 0, '一': 1, '二': 2, '三': 3, '四': 4, '五': 5, '六': 6} %}
|
||||||
<div class="weather-temp">{{ day_weather.temperature }}</div>
|
{% set today_week_num = week_map[week_day_char] if week_day_char in week_map else 0 %}
|
||||||
</div>
|
{% else %}
|
||||||
<div class="weather-details">
|
{% set today_week_num = 0 %}
|
||||||
<div class="weather-detail-item">
|
{% endif %}
|
||||||
<div class="detail-label">风力</div>
|
{% for day_weather in weather_data[:5] %}
|
||||||
<div class="detail-value">{{ day_weather.wind_power }}</div>
|
<div class="grid-item">
|
||||||
</div>
|
<div class="grid-day">
|
||||||
<div class="weather-detail-item">
|
{% set day_text = day_weather.day %}
|
||||||
<div class="detail-label">风向</div>
|
{% set day_num = day_text.split('日')[0] %}
|
||||||
<div class="detail-value">{{ day_weather.wind_direction }}</div>
|
{% if loop.index0 == 0 %}
|
||||||
</div>
|
<span class="day-label">今日</span>
|
||||||
|
{% elif loop.index0 == 1 %}
|
||||||
|
<span class="day-label">明日</span>
|
||||||
|
{% elif loop.index0 == 2 %}
|
||||||
|
<span class="day-label">后日</span>
|
||||||
|
{% else %}
|
||||||
|
{# 计算这一天的星期：今天 + 天数偏移 #}
|
||||||
|
{% set target_week_num = (today_week_num + loop.index0) % 7 %}
|
||||||
|
<span class="day-label">星期{{ week_names[target_week_num] }}</span>
|
||||||
|
{% endif %}
|
||||||
|
<span class="day-date">{{ month }}/{{ day_num }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<i data-lucide="cloud" class="forecast-icon grid-icon" data-condition="{{ day_weather.weather }}"></i>
|
||||||
</div>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer">
|
<div class="chart-container">
|
||||||
<div class="info-row">数据来源: 中国天气网</div>
|
<svg class="chart-svg" viewBox="0 0 400 160" preserveAspectRatio="xMidYMid meet">
|
||||||
<div class="info-row">查询城市: {{ city_name }}</div>
|
{# 收集最高温和最低温数据 #}
|
||||||
<div class="version-info">
|
{% set high_list = [] %}
|
||||||
CalglauBot | Powered by NeoBot Framework
|
{% set low_list = [] %}
|
||||||
</div>
|
{% for day in weather_data[:5] %}
|
||||||
|
{% set parts = day.temperature.split(' / ') %}
|
||||||
|
{% set high_str = parts[0].replace('℃', '') %}
|
||||||
|
{% set low_str = parts[1].replace('℃', '') if parts | length > 1 else parts[0].replace('℃', '') %}
|
||||||
|
{% set high_val = high_str | int if high_str | int is defined else 0 %}
|
||||||
|
{% set low_val = low_str | int if low_str | int is defined else 0 %}
|
||||||
|
{% set _ = high_list.append(high_val) %}
|
||||||
|
{% set _ = low_list.append(low_val) %}
|
||||||
|
{% endfor %}
|
||||||
|
{% set all_temps = high_list + low_list %}
|
||||||
|
{% set min_t = all_temps | min %}
|
||||||
|
{% set max_t = all_temps | max %}
|
||||||
|
{% set temp_range = (max_t - min_t) if (max_t - min_t) > 0 else 1 %}
|
||||||
|
{% set pad_x = 40 %}
|
||||||
|
{% set pad_top = 25 %}
|
||||||
|
{% set pad_bottom = 20 %}
|
||||||
|
{% set cw = 320 %}
|
||||||
|
{% set ch = 115 %}
|
||||||
|
{# 绘制最低温折线 #}
|
||||||
|
<polyline class="chart-line-low" points="{% for t in low_list %}{{ pad_x + (loop.index0 * cw / 4) }},{{ pad_top + ch - ((t - min_t) / temp_range * ch) }}{% if not loop.last %} {% endif %}{% endfor %}"/>
|
||||||
|
{# 绘制最高温折线 #}
|
||||||
|
<polyline class="chart-line-high" points="{% for t in high_list %}{{ pad_x + (loop.index0 * cw / 4) }},{{ pad_top + ch - ((t - min_t) / temp_range * ch) }}{% if not loop.last %} {% endif %}{% endfor %}"/>
|
||||||
|
{# 绘制最低温圆点和标签 #}
|
||||||
|
{% for t in low_list %}
|
||||||
|
{% set x = pad_x + (loop.index0 * cw / 4) %}
|
||||||
|
{% set y = pad_top + ch - ((t - min_t) / temp_range * ch) %}
|
||||||
|
<circle class="chart-dot-low" cx="{{ x }}" cy="{{ y }}" r="3.5"/>
|
||||||
|
<text class="chart-label-low" x="{{ x }}" y="{{ y + 22 }}" text-anchor="middle">{{ t }}°</text>
|
||||||
|
{% endfor %}
|
||||||
|
{# 绘制最高温圆点和标签 #}
|
||||||
|
{% for t in high_list %}
|
||||||
|
{% set x = pad_x + (loop.index0 * cw / 4) %}
|
||||||
|
{% set y = pad_top + ch - ((t - min_t) / temp_range * ch) %}
|
||||||
|
<circle class="chart-dot-high" cx="{{ x }}" cy="{{ y }}" r="4"/>
|
||||||
|
<text class="chart-label" x="{{ x }}" y="{{ y - 14 }}" text-anchor="middle">{{ t }}°</text>
|
||||||
|
{% endfor %}
|
||||||
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="footer">
|
||||||
|
<p>数据更新于 {{ query_time }}</p>
|
||||||
|
<p>数据来源: 中国天气网 | NeoBot</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// 根据天气状况动态切换图标
|
||||||
|
function updateIcons() {
|
||||||
|
document.querySelectorAll('.forecast-icon').forEach(icon => {
|
||||||
|
const condition = icon.getAttribute('data-condition');
|
||||||
|
let iconName = 'cloud';
|
||||||
|
|
||||||
|
if (condition.includes('晴')) {
|
||||||
|
iconName = 'sun';
|
||||||
|
} else if (condition.includes('大雨') || condition.includes('暴雨')) {
|
||||||
|
iconName = 'cloud-rain-wind';
|
||||||
|
} else if (condition.includes('雨')) {
|
||||||
|
iconName = 'cloud-rain';
|
||||||
|
} else if (condition.includes('雪')) {
|
||||||
|
iconName = 'cloud-snow';
|
||||||
|
} else if (condition.includes('雷') || condition.includes('电')) {
|
||||||
|
iconName = 'cloud-lightning';
|
||||||
|
} else if (condition.includes('阴')) {
|
||||||
|
iconName = 'cloud';
|
||||||
|
} else if (condition.includes('云')) {
|
||||||
|
iconName = 'cloudy';
|
||||||
|
} else if (condition.includes('霾') || condition.includes('雾')) {
|
||||||
|
iconName = 'haze';
|
||||||
|
}
|
||||||
|
|
||||||
|
icon.setAttribute('data-lucide', iconName);
|
||||||
|
});
|
||||||
|
lucide.createIcons();
|
||||||
|
}
|
||||||
|
|
||||||
|
updateIcons();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html></content>
|
</html>
|
||||||
|
</content>
|
||||||
|
|||||||
Reference in New Issue
Block a user