Merge pull request #59 from ElapsingDreams/main

🎨🐛 修复了一个潜在的前端显示bug，优化代码结构
2024-08-12 16:37:38 +08:00 · 2024-08-12 16:37:38 +08:00 · facf5bedb1
commit facf5bedb1
parent 0d5f9fee52 035d43fb18
3 changed files with 61 additions and 104 deletions
--- a/src/resources/liteyuki_weather/templates/css/weather_now.css
+++ b/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为什么那么不友好*/
-    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;
 }
--- a/src/resources/liteyuki_weather/templates/js/weather_now.js
+++ b/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",
-    "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
--- a/src/resources/liteyuki_weather/templates/weather_now.html
+++ b/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>
-                <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>