From 035d43fb1843720909ef77b40e4e5474cd21543b Mon Sep 17 00:00:00 2001 From: Envision <9063072+elapsingdreams@user.noreply.gitee.com> Date: Mon, 12 Aug 2024 16:04:27 +0800 Subject: [PATCH] =?UTF-8?q?:art::bug:=20=E4=BF=AE=E5=A4=8D=E4=BA=86?= =?UTF-8?q?=E4=B8=80=E4=B8=AA=E6=BD=9C=E5=9C=A8=E7=9A=84=E5=89=8D=E7=AB=AF?= =?UTF-8?q?=E6=98=BE=E7=A4=BAbug=EF=BC=8C=E4=BC=98=E5=8C=96=E4=BB=A3?= =?UTF-8?q?=E7=A0=81=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../templates/css/weather_now.css | 54 +++++++-------- .../templates/js/weather_now.js | 43 ++++++++---- .../templates/weather_now.html | 68 ++----------------- 3 files changed, 61 insertions(+), 104 deletions(-) diff --git a/src/resources/liteyuki_weather/templates/css/weather_now.css b/src/resources/liteyuki_weather/templates/css/weather_now.css index 608c93bb..c8d83d2a 100644 --- 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; } \ No newline at end of file diff --git a/src/resources/liteyuki_weather/templates/js/weather_now.js b/src/resources/liteyuki_weather/templates/js/weather_now.js index b8af944f..d822caec 100644 --- 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 diff --git a/src/resources/liteyuki_weather/templates/weather_now.html b/src/resources/liteyuki_weather/templates/weather_now.html index 8a65bffc..6d0f9154 100644 --- a/src/resources/liteyuki_weather/templates/weather_now.html +++ b/src/resources/liteyuki_weather/templates/weather_now.html @@ -7,7 +7,6 @@ - @@ -38,68 +37,9 @@ @@ -143,7 +83,7 @@
-
+