mirror of
https://github.com/LiteyukiStudio/LiteyukiBot.git
synced 2024-11-11 06:27:23 +08:00
🎨🐛 修复了一个潜在的前端显示bug，优化代码结构
This commit is contained in:
Envision
parent
0d5f9fee52
commit
035d43fb18
@ -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 {
|
||||
transform: translateY(-80px);
|
||||
/*自定义颜色*/
|
||||
filter: drop-shadow(var(--main-text-color) 0 80px);
|
||||
/*自定义透明度*/
|
||||
opacity: 1;
|
||||
padding-right: 10px;
|
||||
}
|
||||
/*要问就问为什么html调svg那么不友好*/
|
||||
.sub-svg {
|
||||
transform: translateY(-80px);
|
||||
/*此处用作自定义颜色*/
|
||||
filter: drop-shadow(var(--main-text-color) 0 80px);
|
||||
/*此处用作自定义透明度*/
|
||||
opacity: 1;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.attribution-box {
|
||||
@ -225,16 +225,16 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#attribution-info {
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0 5px 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 25px;
|
||||
justify-content: space-between;
|
||||
display: inline-flex;
|
||||
word-wrap: break-word;
|
||||
color: var(--sub-text-color);
|
||||
text-align: center;
|
||||
}
|
||||
.attribution-info {
|
||||
backdrop-filter: blur(10px);
|
||||
padding: 0 5px 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
font-size: 25px;
|
||||
justify-content: space-between;
|
||||
display: inline-flex;
|
||||
word-wrap: break-word;
|
||||
color: var(--sub-text-color);
|
||||
text-align: center;
|
||||
}
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user