主题色切换时，移动端Chrome导航栏颜色跟随变化；Fix : 时间超过15个字符无法输入

2022-12-18 16:58:13 +08:00
parent 6c43ef111a
commit 5c26420d8f
1 changed files with 14 additions and 1 deletions
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="theme-color" content="#00A961" id="metaThemeColor">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通信行程卡 - 纪念版</title>
    <link rel="shortcut icon" href="./assets/image/arrow-compressed.png" type="image/x-icon">
@@ -355,7 +356,7 @@
                            key: "time",
                            name: "时间",
                            type: 'input',
-                            maxlength: 15,
+                            maxlength: 25,
                            more: ["2020.02.13 - 2022.12.13", "2020年 - 2022年", "停止于：2022.12.13 00:00:00", "更新于：2022.12.13 00:00:00"]
                        },
                        {
@@ -415,6 +416,18 @@
                    }
                    return returnVal
                }
+            },
+            mounted() {
+                this.$watch("card.type", (newVal, oldVal) => {
+                    // console.log(oldVal, newVal)
+                    let newColor = ''
+                    switch (newVal) {
+                        case 0: newColor = "#00A961"; break;
+                        case 1: newColor = "#f7ba00"; break;
+                        default: newColor = "#e43b00"; break;
+                    }
+                    document.getElementById('metaThemeColor').content = newColor
+                });
            }
        }).mount('#app')
    </script>