bot/app
3
6.9k
Fork 1
mirror of https://github.com/LiteyukiStudio/LiteyukiBot.git synced 2024-11-22 20:17:39 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

🎨🐛 修复了一个潜在的前端显示bug，优化代码结构

Browse Source
This commit is contained in:
Envision 2024-08-12 16:04:27 +08:00
parent 0d5f9fee52
commit 035d43fb18
3 changed files with 61 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/resources/liteyuki_weather/templates/css/weather_now.css
View File

@ -187,37 +187,37 @@
.ad-box {
margin-bottom: 20px;
img {
border-radius: 60px;
}
}
.sub-info {
#ad {
border-radius: 60px;
}
#sub-info {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
color: var(--main-text-color);
font-size: 40px;
font-size: 36px;
align-items: center;
}
.sub-info>div {
.sub-item {
display: flex;
align-items: center;
gap: 5px;
overflow: hidden;
padding-left: 20px;
}
/*要问就问html调svg为什么那么不友好*/
img {
/*要问就问为什么html调svg那么不友好*/
.sub-svg {
transform: translateY(-80px);
/*自定义颜色*/
/*此处用作自定义颜色*/
filter: drop-shadow(var(--main-text-color) 0 80px);
/*自定义透明度*/
/*此处用作自定义透明度*/
opacity: 1;
padding-right: 10px;
}
}
.attribution-box {
@ -225,8 +225,9 @@
position: relative;
display: flex;
justify-content: center;
}
#attribution-info {
.attribution-info {
backdrop-filter: blur(10px);
padding: 0 5px 0;
background-color: rgba(0, 0, 0, 0.5);
@ -236,5 +237,4 @@
word-wrap: break-word;
color: var(--sub-text-color);
text-align: center;
}
}

43
src/resources/liteyuki_weather/templates/js/weather_now.js
View File

@ -54,7 +54,7 @@ if ("aqi" in aqi) {
}
templates = {
let templates = {
"time": weatherNow["now"]["obsTime"],
"city": locationData["name"],
"adm": locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"],
@ -69,31 +69,48 @@ for (let id in templates) {
}
subtemplates = {
let subtemplates = {
"now-windDirect": weatherNow["now"]["windDir"] + " " + weatherNow["now"]["wind360"] + "°",
"now-windVelocity": "风矢 " + weatherNow["now"]["windScale"] + "级 " + weatherNow["now"]["windSpeed"] + "km/h",
"now-humidity": "湿度 " + weatherNow["now"]["humidity"] + "%",
"now-feelsLike": "体感 " + weatherNow["now"]["feelsLike"] + "°C",
"now-precip": "降水 " + weatherNow["now"]["precip"] + "mm",
"now-pressure": "气压 " + weatherNow["now"]["pressure"] + "hPa",
"vis": "能见 " + weatherNow["now"]["vis"] + "km",
"cloud ": "云量 " + (weatherNow["now"]["cloud"] == "" ? "无数据" : (weatherNow["now"]["cloud"] + "%")),
"now-vis": "能见 " + weatherNow["now"]["vis"] + "km",
"now-cloud": "云量 " + (weatherNow["now"]["cloud"] == "" ? "无数据" : (weatherNow["now"]["cloud"] + "%")),
"astronomy-sunrise": "日出 " + get_time_hour(weatherAstronomy["sunrise"]),
"astronomy-sunset": "日落 " + get_time_hour(weatherAstronomy["sunset"])
}
let subItemDivTemplate = document.importNode(document.getElementById("sub-info-template").content, true);
let subiconMap = {
"now-windDirect": "windDirect",
"now-windVelocity": "windVelocity",
"now-humidity": "humidity",
"now-feelsLike": "feelsLike",
"now-precip": "precip",
"now-pressure": "pressure",
"now-vis": "vis",
"now-cloud": "cloud",
"astronomy-sunrise": "sunrise",
"astronomy-sunset": "sunset"
};
let subItemDiv = subItemDivTemplate.querySelector(".sub-info");
let subtemplate = document.getElementById('sub-info-template').content;
let subcontainer = document.getElementById('sub-info');
for (let id in subtemplates) {
let element = subItemDiv.querySelector(`#${id}`);
if (element) {
element.innerText = subtemplates[id];
}
}
Object.keys(subtemplates).forEach(id => {
let subItemDiv = document.importNode(subtemplate, true).querySelector('.sub-item');
subItemDiv.querySelector(`div`).innerText = subtemplates[id];
let iconName = subiconMap[id];
subItemDiv.querySelector(`img`).src = `./img/svg/${iconName}.svg`;
subItemDiv.querySelector(`img`).alt = `SVG ${id}`;
subcontainer.appendChild(subItemDiv);
});
document.getElementById('sub-info').appendChild(subItemDiv);
let maxHourlyItem = 8
let percentWidth = 1 / (maxHourlyItem * 1.5) * 100

68
src/resources/liteyuki_weather/templates/weather_now.html
View File

@ -7,7 +7,6 @@
<link rel="stylesheet" href="./css/card.css">
<link rel="stylesheet" href="./css/fonts.css">
<link rel="stylesheet" href="css/weather_now.css">
<link rel="stylesheet" href="css/extra_info.css">
</head>
<!-- qw_icon: https://a.hecdn.net/img/common/icon/202106d/%d.png-->
@ -38,68 +37,9 @@
</template>
<template id="sub-info-template">
<div class="sub-info">
<div>
<img src="./img/svg/windDirect.svg" alt="SVG windDirect" width="60" height="60">
<div id="now-windDirect">
西北风 315°
</div>
</div>
<div><img src="./img/svg/windVelocity.svg" alt="SVG windVelocity" width="60" height="60">
<div id="now-windVelocity">
风矢 2级 10km/h
</div>
</div>
<div>
<img src="./img/svg/humidity.svg" alt="SVG humidity" width="60" height="60">
<div id="now-humidity">
湿度 45%
</div>
</div>
<div>
<img src="./img/svg/feelsLike.svg" alt="SVG feelsLike" width="60" height="60">
<div id="now-feelsLike">
体感 32°C
</div>
</div>
<div>
<img src="./img/svg/precip.svg" alt="SVG precip" width="60" height="60">
<div id="now-precip">
降水 0.0mm
</div>
</div>
<div>
<img src="./img/svg/pressure.svg" alt="SVG pressure" width="60" height="60">
<div id="now-pressure">
气压 979hPa
</div>
</div>
<div>
<img src="./img/svg/vis.svg" alt="SVG sunset" width="60" height="60">
<div id="vis">
能见 5km
</div>
</div>
<div>
<img src="./img/svg/cloud.svg" alt="SVG sunset" width="60" height="60">
<div id="cloud">
云量 50%
</div>
</div>
<div>
<img src="./img/svg/sunrise.svg" alt="SVG sunrise" width="60" height="60">
<div id="astronomy-sunrise">
日出 06:37
</div>
</div>
<div>
<img src="./img/svg/sunset.svg" alt="SVG sunset" width="60" height="60">
<div id="astronomy-sunset">
日落 19:01
</div>
</div>
<div class="sub-item">
<img class="sub-svg" src="" alt="SVG" width="50" height="50">
<div>示例信息</div>
</div>
</template>
@ -143,7 +83,7 @@
<script src="./js/card.js"></script>
<div class="attribution-box">
<div id="attribution-info"></div>
<div class="attribution-info"></div>
</div>
<script src="./js/weather_now.js"></script>