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

update README
Merge branch 'merge' into feat-color
2022-12-18 16:58:13 +08:00 · 2022-12-15 19:47:48 +08:00 · 2022-12-15 19:14:31 +08:00 · 2022-12-15 11:11:57 +00:00 · 2022-12-15 18:34:51 +08:00 · 2022-12-15 18:34:39 +08:00
10 changed files with 100 additions and 30 deletions
--- a/README.md
+++ b/README.md
@ -1,9 +1,5 @@
-# 通信行程卡纪念版 H5
-
-[GitHub](https://github.com/coder-xiaomo/travel-card) [Gitee](https://gitee.com/coder-xiaomo/travel-card)
+# 通信行程卡 之 黄、红卡及彩蛋卡版

 **注意：本项目仅作纪念，无实际意义，不得用于防疫等相关场景**

-
-
-本项目由 程序员小墨 制作并开源，欢迎关注我的[B站](https://space.bilibili.com/457109942)和公众号（ID：程序员小墨）
+本项目由 程序员小墨 制作并开源，当前分支由[@小林囝](https://gitee.com/teochew)基于 main 分支修改而来
--- a/assets/image/birthday-compressed.png
+++ b/assets/image/birthday-compressed.png
--- a/assets/image/birthday.png
+++ b/assets/image/birthday.png
--- a/assets/image/no-compressed.png
+++ b/assets/image/no-compressed.png
--- a/assets/image/no.png
+++ b/assets/image/no.png
--- a/assets/image/red-compressed.png
+++ b/assets/image/red-compressed.png
--- a/assets/image/red.png
+++ b/assets/image/red.png
--- a/assets/image/yellow-compressed.png
+++ b/assets/image/yellow-compressed.png
--- a/assets/image/yellow.png
+++ b/assets/image/yellow.png
--- 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">
@ -164,6 +165,30 @@
        .setting-input input {
            width: 100%;
        }
+
+        .yellow {
+            background-color: #f7ba00;
+        }
+
+        .red,
+        .no {
+            background-color: #e43b00;
+        }
+
+        .text-green {
+            color: #00A766;
+            background-color: #CFEEDF;
+        }
+
+        .text-red {
+            color: #e43b00;
+            background-color: #ffe6dc;
+        }
+
+        .text-yellow {
+            color: #f7ba00;
+            background-color: #fff4d3;
+        }
    </style>
    <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script> -->
@ -171,7 +196,7 @@

 <body>
    <div id="app">
-        <div class="container">
+        <div class="container" :class="cardClass">
            <div>
                <!-- 用于占位 -->
            </div>
@ -181,12 +206,11 @@
            </div>
            <div class="card">
                <div>
-                    <div style="background-color: #CFEEDF; height: 20px;"></div>
-                    <div style="background-color: #CFEEDF;
+                    <div :class="`text-${cardClass}`" style=" height: 20px;"></div>
+                    <div :class="`text-${cardClass}`" style="
                                height: 40px;
                                position: relative;
                                margin: 0 auto;
-                                color: #00A766;
                                border-bottom-left-radius: 24px;
                                border-bottom-right-radius: 24px;
                                top: -20px;
@ -194,7 +218,7 @@
                                display: inline-block;
                                padding: 0 40px;
                                letter-spacing: 0.8px;">
-                        请收下绿色行程卡
+                        请收下{{ cardColor }}色行程卡
                    </div>
                </div>
                <div>
@ -206,7 +230,7 @@
                    </p>
                </div>
                <div style="display: grid; place-items: center;">
-                    <img src="./assets/image/arrow-compressed.png" style="width: 45%;" class="animate" />
+                    <img :src="cardArrow" style="width: 45%;" class="animate" />
                </div>
                <div>
                    <div
@ -251,13 +275,22 @@
                            <template v-for="item in setting">
                                <div class="setting-title">{{ item.name }}</div>
                                <div class="setting-input" :style="item.more ? {} : { 'grid-column': 'span 2' }">
-                                    <textarea v-if="item.textarea" v-model="card[item.key]" :maxlength="item.maxlength"
-                                        style="width: 100%; resize: none;" rows="3"></textarea>
+                                    <textarea v-if="item.type == 'textarea'" v-model="card[item.key]"
+                                        :maxlength="item.maxlength" style="width: 100%; resize: none;"
+                                        rows="3"></textarea>
+                                    <div v-else-if="item.type == 'radio'">
+                                        <select v-model="card[item.key]">
+                                            <option v-for="radioItem in item.more" :value="radioItem.value"
+                                                :selected="card[item.key] == radioItem.value">
+                                                {{radioItem.name}}
+                                            </option>
+                                        </select>
+                                    </div>
                                    <input v-else :placeholder="item.name" :maxlength="item.maxlength"
                                        v-model="card[item.key]" />
                                </div>
                                <div class="setting-reset" v-if="item.more">
-                                    <button style="width: 100%;"
+                                    <button v-if="item.type != 'radio'" style="width: 100%;"
                                        @click="card[item.key] = getRandom(item.more, card[item.key])">换一个</button>
                                </div>
                            </template>
@ -276,18 +309,9 @@

        <!-- 底部说明 -->
        <div class="footbar" :class="{ 'footbar-setting': showSetting }">
-            <p :style="showSetting ? {} : { color: '#cfeedf' }">
+            <p :style="showSetting ? {} : { color: '#fffffffa' }">
                * 本页面仅作纪念，无实际意义，不得用于防疫等相关场景
            </p>
-            <p v-if="showSetting">
-                本页面由 程序员小墨 制作并开源<br>
-                欢迎关注：
-                <a target="_blank" href="https://space.bilibili.com/457109942">B站</a>
-                <a @click="alert('微信搜索 [程序员小墨] 公众号并关注即可，感谢支持！')">公众号</a>
-                开源地址：
-                <a target="_blank" href="https://github.com/coder-xiaomo/travel-card">GitHub</a>
-                <a target="_blank" href="https://gitee.com/coder-xiaomo/travel-card">Gitee</a>
-            </p>
        </div>
    </div>
    <script>
@ -300,46 +324,84 @@
                    card: {
                        title: "通信行程卡纪念版",
                        subtitle: "做自己的健康第一责任人",
-                        phone: "某某某",
+                        phone: "芒小幻",
                        time: "停止于：2022.12.13 00:00:00",
                        timeSpan: "2020 - 2022",
-                        location: "湖北省武汉市、湖北省天门市", // ["湖北省武汉市", "湖北省天门市"],
+                        type: 0,
+                        location: "湖南省长沙市、芒果幻城",
                    },
                    setting: [
                        {
                            key: "title",
                            name: "标题",
+                            type: 'input',
                            maxlength: 15,
                            more: ["通信行程卡纪念版", "行程卡纪念版", "通信大数据行程卡纪念版"]
                        },
                        {
                            key: "subtitle",
                            name: "副标题",
+                            type: 'input',
                            maxlength: 15,
                            more: ["做自己的健康第一责任人", "回顾行程卡的1034天", "做好疫情防控第一责任人", "疫情防控，人人有责"]
                        },
                        {
                            key: "phone",
                            name: "归属人",
+                            type: 'input',
                            maxlength: 15,
-                            more: ["2020***2022", "您的姓名", "189****1234", "某某某"]
+                            more: ["2020***2022", "您的姓名", "189****1234", "某某某", "芒小幻"]
                        },
                        {
                            key: "time",
                            name: "时间",
-                            maxlength: 15,
+                            type: 'input',
+                            maxlength: 25,
                            more: ["2020.02.13 - 2022.12.13", "2020年 - 2022年", "停止于：2022.12.13 00:00:00", "更新于：2022.12.13 00:00:00"]
                        },
+                        {
+                            key: "type",
+                            name: "类型",
+                            type: 'radio',
+                            maxlength: 1,
+                            more: [{ name: '绿色', value: 0 }, { name: '黄色', value: 1 }, { name: '红色', value: 2 }, { name: '禁止', value: 3 }, { name: '生日', value: 4 }]
+                        },
                        {
                            key: "location",
                            name: "到达地点",
+                            type: 'textarea',
                            maxlength: 300,
-                            more: null,
+                            more: ["芒果幻城", "湖南省长沙市、芒果幻城", "湖北省武汉市", "湖北省武汉市、湖北省天门市"],
                            textarea: true,
                        }
                    ]
                }
            },
+            computed: {
+                cardColor() {
+                    switch (this.card.type) {
+                        case 0: return "绿"
+                        case 1: return "黄"
+                        default: return "红"
+                    }
+                },
+                cardClass() {
+                    switch (this.card.type) {
+                        case 0: return "green"
+                        case 1: return "yellow"
+                        default: return "red"
+                    }
+                },
+                cardArrow() {
+                    switch (this.card.type) {
+                        case 1: return './assets/image/yellow-compressed.png'
+                        case 2: return './assets/image/red-compressed.png'
+                        case 3: return './assets/image/no-compressed.png'
+                        case 4: return './assets/image/birthday-compressed.png'
+                        default: return './assets/image/arrow-compressed.png'
+                    }
+                }
+            },
            methods: {
                toggleSetting(e) {
                    console.log(e)
@ -354,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>
Author	SHA1	Message	Date
程序员小墨	5c26420d8f	主题色切换时，移动端Chrome导航栏颜色跟随变化；Fix : 时间超过15个字符无法输入	2022-12-18 16:58:13 +08:00
程序员小墨	6c43ef111a	update README	2022-12-15 19:47:48 +08:00
程序员小墨	f2d6c66ebd	Merge branch 'merge' into feat-color	2022-12-15 19:14:31 +08:00
程序员小墨	979ef57e36	!1 增加黄、红卡及彩蛋卡 Merge pull request !1 from 小林囝/main	2022-12-15 11:11:57 +00:00
程序员小墨	59e7742132	代码优化	2022-12-15 18:34:51 +08:00
程序员小墨	4997496d9c	图片压缩	2022-12-15 18:34:39 +08:00
程序员小墨	e10eec01be	Merge branch 'main' of https://gitee.com/teochew/travel-card	2022-12-15 18:33:39 +08:00
小林囝	9fd672b356	增加红黄色	2022-12-15 14:00:09 +08:00