Merge pull request #59 from ElapsingDreams/main

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

src/resources/liteyuki_weather/templates/css/weather_now.css

@@ -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为什么那么不友好*/
+/*要问就问为什么html调svg那么不友好*/
-    img {
+.sub-svg {
-        transform: translateY(-80px);
+    transform: translateY(-80px);
-        /*自定义颜色*/
+    /*此处用作自定义颜色*/
-        filter: drop-shadow(var(--main-text-color) 0 80px);
+    filter: drop-shadow(var(--main-text-color) 0 80px);
-        /*自定义透明度*/
+    /*此处用作自定义透明度*/
-        opacity: 1;
+    opacity: 1;
-        padding-right: 10px;
+    padding-right: 10px;
-    }
 }
 
 .attribution-box {
@@ -225,16 +225,16 @@
     position: relative;
     display: flex;
     justify-content: center;
-
+}
-    #attribution-info {
+
-        backdrop-filter: blur(10px);
+.attribution-info {
-        padding: 0 5px 0;
+    backdrop-filter: blur(10px);
-        background-color: rgba(0, 0, 0, 0.5);
+    padding: 0 5px 0;
-        font-size: 25px;
+    background-color: rgba(0, 0, 0, 0.5);
-        justify-content: space-between;
+    font-size: 25px;
-        display: inline-flex;
+    justify-content: space-between;
-        word-wrap: break-word;
+    display: inline-flex;
-        color: var(--sub-text-color);
+    word-wrap: break-word;
-        text-align: center;
+    color: var(--sub-text-color);
-    }
+    text-align: center;
 }

src/resources/liteyuki_weather/templates/js/weather_now.js

@@ -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",
+    "now-vis": "能见 " + weatherNow["now"]["vis"] + "km",
-    "cloud ": "云量 " + (weatherNow["now"]["cloud"] == "" ? "无数据" : (weatherNow["now"]["cloud"] + "%")),
+    "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) {
+Object.keys(subtemplates).forEach(id => {
-    let element = subItemDiv.querySelector(`#${id}`);
+    let subItemDiv = document.importNode(subtemplate, true).querySelector('.sub-item');
-    if (element) {
+
-        element.innerText = subtemplates[id];
+    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

src/resources/liteyuki_weather/templates/weather_now.html

@@ -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 class="sub-item">
-            <div>
+            <img class="sub-svg" src="" alt="SVG" width="50" height="50">
-                <img src="./img/svg/windDirect.svg" alt="SVG windDirect" width="60" height="60">
+            <div>示例信息</div>
-                <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>
 
     </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>