添加(ui): 天气图标

fm-elpac · Feb 5, 2024 · 993058a · 993058a
1 parent b38487d
commit 993058a
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 6 deletions.
diff --git a/ui-vue/package-lock.json b/ui-vue/package-lock.json
diff --git a/ui-vue/package.json b/ui-vue/package.json
@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@mdi/font": "^7.4.47",
+    "qweather-icons": "^1.6.0",
     "roboto-fontface": "*",
     "vue": "^3.4.14",
     "vue-router": "^4.2.5",
@@ -19,7 +20,7 @@
     "@vitejs/plugin-vue": "^5.0.3",
     "sass": "^1.69.7",
     "unplugin-fonts": "^1.1.1",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "vite-plugin-vuetify": "^2.0.1"
   }
 }
diff --git a/ui-vue/src/c/天气/qw天气图标.vue b/ui-vue/src/c/天气/qw天气图标.vue
@@ -0,0 +1,17 @@
+<script setup>
+const p = defineProps({
+  图标: String,
+});
+</script>
+
+<template>
+  <div class="c-qw天气图标 text-primary">
+    <i :class="`qi-${p.图标}`" />
+  </div>
+</template>
+
+<style scoped>
+.c-qw天气图标 {
+  font-size: 1.2em;
+}
+</style>
diff --git a/ui-vue/src/c/天气/qw小时预报.vue b/ui-vue/src/c/天气/qw小时预报.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { computed } from "vue";
 import { 格式化时分 } from "@/util/时间.js";
+import cqw天气图标 from "./qw天气图标.vue";
 
 const p = defineProps({
   天气数据: Object,
@@ -11,6 +12,7 @@ const 显示数据 = computed(() => {
     时间: 格式化时分(new Date(x.fxTime)),
     温度: x.temp,
     t: Number.parseFloat(x.temp),
+    图标: x.icon,
   }));
   // 温度范围
   let 最小 = 0;
@@ -47,7 +49,10 @@ const 显示数据 = computed(() => {
     <v-row class="内容" no-gutters>
       <template v-for="(i, j) in 显示数据">
         <v-col class="列" col="1">
-          <span>{{ i.温度 }}&deg;C</span>
+          <div class="顶部">
+            <span>{{ i.温度 }}&deg;C</span>
+            <cqw天气图标 :图标="i.图标" />
+          </div>
 
           <div class="温度条0">
             <div class="温度条1">
@@ -87,6 +92,20 @@ const 显示数据 = computed(() => {
   align-items: center;
 }
 
+.顶部 {
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.c-qw天气图标 {
+  position: absolute;
+  left: 0;
+  bottom: 140%;
+  width: 100%;
+  text-align: center;
+}
+
 .温度条0 {
   position: relative;
   top: 0;

diff --git a/ui-vue/src/main.js b/ui-vue/src/main.js
@@ -1,4 +1,5 @@
 import "./assets/body.css";
+import "qweather-icons/font/qweather-icons.css";
 
 import { createApp } from "vue";
 import App from "./App.vue";