feat: 轻雪天气实时天气功能已更新

liteyuki/resources/templates/css/card.css

@@ -1,4 +1,4 @@
-#data-storage {
+.data-storage {
     display: none;
 }
 
@@ -6,6 +6,7 @@ body {
     background-repeat: repeat-y;
     background-size: cover;
     background-position: center;
+    text-shadow: 1px 1px 2px black;
     margin: 20px;
 }
 

liteyuki/resources/templates/css/fonts.css

@@ -71,6 +71,6 @@
     font-style: italic;
 }
 
-body {
+* {
     font-family: 'MapleMono', 'MiSans', sans-serif;
 }

liteyuki/resources/templates/css/weather_now.css

@@ -0,0 +1,83 @@
+#weather-info {
+    color: white;
+    /*justify-content: center;*/
+    /*align-items: center;*/
+    /*align-content: center;*/
+}
+
+#main-info {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#time {
+    font-size: 25px;
+    font-weight: bold;
+    font-style: italic;
+    text-align: right;
+    color: #aaa;
+
+}
+
+#adm {
+    font-size: 30px;
+    font-weight: bold;
+    text-align: center;
+    color: #aaa;
+}
+
+#city {
+    margin-top: 20px;
+    font-size: 70px;
+    font-weight: bold;
+    text-align: center;
+}
+
+#temperature {
+    display: flex;
+    align-items: baseline;
+
+}
+
+#temperature-now {
+    font-size: 70px;
+    font-weight: bold;
+}
+
+#temperature-range {
+    font-size: 40px;
+    font-weight: bold;
+    color: #aaa;
+}
+
+#description {
+    font-size: 50px;
+    font-weight: bold;
+}
+
+
+#aqi {
+    height: 50px;
+    display: flex;
+    border-radius: 60px;
+    padding: 5px;
+    font-size: 40px;
+    text-align: center;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+}
+
+#aqi-dot {
+    height: 80%;
+    aspect-ratio: 1 / 1;
+    border-radius: 50%;
+    background-color: #aaa;
+    margin-right: 20px;
+}
+
+.main-icon {
+    width: 240px;
+    height: 240px;
+}

liteyuki/resources/templates/js/weather_now.js

@@ -0,0 +1,59 @@
+/**
+ * @typedef {Object} Location
+ * @property {string} city - The city name.
+ * @property {string} country - The country name.
+ *
+ * @typedef {Object} Weather
+ * @property {number} temperature - The current temperature.
+ * @property {string} description - The weather description.
+ *
+ * @typedef {Object} Data
+ * @property {Location} location - The location data.
+ * @property {Weather} weather - The weather data.
+ */
+
+/** @type {Data} */
+
+let data = JSON.parse(document.getElementById("data").innerText)
+
+let weatherNow = data["weatherNow"]
+
+let weatherDaily = data["weatherDaily"]
+let weatherHourly = data["weatherHourly"]
+let aqi = data["aqi"]
+
+let locationData = data["location"]
+
+// set info
+// document.getElementById("time").innerText = weatherNow["now"]["obsTime"]
+// document.getElementById("city").innerText = locationData["name"]
+// document.getElementById("adm").innerText = locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"]
+// document.getElementById("temperature-now").innerText = weatherNow["now"]["temp"] + "°"
+// document.getElementById("temperature-range").innerText = weatherNow["now"]["feelsLike"] + "°"
+// document.getElementById("description").innerText = weatherNow["now"]["text"]
+// 处理aqi
+let aqiValue = 0
+aqi["aqi"].forEach(
+    (item) => {
+        if (item["defaultLocalAqi"]) {
+            document.getElementById("aqi-data").innerText = "AQI " + item["valueDisplay"] + " " + item["category"]
+            // 将(255,255,255)这种格式的颜色设置给css
+            document.getElementById("aqi-dot").style.backgroundColor = "rgb(" + item["color"] + ")"
+        }
+    }
+)
+
+templates = {
+    "time": weatherNow["now"]["obsTime"],
+    "city": locationData["name"],
+    "adm": locationData["country"] + " " + locationData["adm1"] + " " + locationData["adm2"],
+    "temperature-now": weatherNow["now"]["temp"] + "°",
+    "temperature-range": weatherDaily["daily"][0]["tempMin"] + "°/" + weatherDaily["daily"][0]["tempMax"] + "°",
+    "description": weatherNow["now"]["text"]
+}
+
+// 遍历每一个id，给其赋值
+
+for (let id in templates) {
+    document.getElementById(id).innerText = templates[id]
+}

liteyuki/resources/templates/status.html

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh">
 <head>
     <meta charset="UTF-8">
     <title>Liteyuki Status</title>

liteyuki/resources/templates/weather_now.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>Liteyuki Status</title>
+    <link rel="stylesheet" href="./css/card.css">
+    <link rel="stylesheet" href="./css/fonts.css">
+    <link rel="stylesheet" href="./css/weather_now.css">
+</head>
+<!-- qw_icon: https://a.hecdn.net/img/common/icon/202106d/%d.png-->
+<body>
+<div class="data-storage" id="data">{{ data | tojson }}</div>
+<div class="info-box" id="weather-info">
+    <div id="detail-info">
+        <div id="time">1145-01-12 22:22:22</div>
+        <div id="adm">国家 一级 二级</div>
+        <div id="city">城市</div>
+    </div>
+    <div id="main-info">
+        <div>
+            <img class="main-icon" src="./img/qw_icon/101.png" alt="AAA">
+        </div>
+        <div>
+            <div id="temperature">
+                <div id="temperature-now">
+                    90°
+                </div>
+                <div id="temperature-range">
+                    10°~90°
+                </div>
+            </div>
+            <div id="description">
+                好天气
+            </div>
+        </div>
+    </div>
+    <div id="aqi">
+        <div id="aqi-dot"></div>
+        <div id="aqi-data"> AQI 114 优</div>
+    </div>
+</div>
+<div class="info-box" id="sub-info"></div>
+<div class="info-box" id="hours-info"></div>
+<div class="info-box" id="days-info"></div>
+
+<script src="./js/card.js"></script>
+<script src="./js/weather_now.js"></script>
+</body>