update

Merge branch 'main' into deploy
2022-12-18 17:01:26 +08:00 · 2022-12-15 19:55:29 +08:00 · 2022-12-15 13:18:49 +08:00 · 2022-12-14 20:20:43 +08:00
17 changed files with 848 additions and 62 deletions
--- a/21
+++ b/21
@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 程序员小墨
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
--- a/README.md
+++ b/README.md
@ -1,41 +0,0 @@
-# 通信行程卡纪念版 H5
-
-> **关于网传微信小程序涉嫌违规相关资讯与本项目无关，且不存在相互抄袭，[点击查看特别说明](https://www.bilibili.com/read/cv20610303)。**
-
-仓库地址：[GitHub](https://github.com/coder-xiaomo/travel-card) [Gitee](https://gitee.com/coder-xiaomo/travel-card)
-
-演示地址：https://coder-xiaomo.gitee.io/travel-card/
-
-<div align=center><img src="docs/Screenshot.jpg" width="300px" /></div>
-
-
-
-## 更多版本
-
-感谢大家提的Pr，由于功能差异无法合并到同一分支，所以合并到不同分支中了，大家可以前往以下分支查看：
-
-### [feat-color](https://gitee.com/coder-xiaomo/travel-card/tree/feat-color/): 黄、红卡及彩蛋卡版
-
-> [@小林囝](https://gitee.com/teochew)提交的[Pull Request](https://gitee.com/coder-xiaomo/travel-card/pulls/1)
-
-**演示地址：https://coder-xiaomo.gitee.io/travel-card/feat-color**
-
-<div align=center><img src="docs/Screenshot-feat-color.jpg" width="300px" /></div>
-
-
-
-### [feat-optimize](https://gitee.com/coder-xiaomo/travel-card/tree/feat-optimize/): 优化页面结构，更像原版，添加标题字体等
-
-> [@呱行次比猫](https://space.bilibili.com/38238808)提交的[Pull Request](https://gitee.com/coder-xiaomo/travel-card/pulls/3)
-
-**演示地址：https://coder-xiaomo.gitee.io/travel-card/feat-optimize**
-
-<div align=center><img src="docs/Screenshot-feat-optimize.jpg" width="300px" /></div>
-
-
-
-## 一些说明
-
-**注意：本项目仅作纪念，无实际意义，不得用于防疫等相关场景**
-
-欢迎关注我的[B站](https://space.bilibili.com/457109942)和公众号（ID：程序员小墨）
--- a/assets/font/PangMenZhengDao-3.ttf
+++ b/assets/font/PangMenZhengDao-3.ttf
--- 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/docs/Screenshot-feat-color.jpg
+++ b/docs/Screenshot-feat-color.jpg
--- a/docs/Screenshot-feat-optimize.jpg
+++ b/docs/Screenshot-feat-optimize.jpg
--- a/docs/Screenshot.jpg
+++ b/docs/Screenshot.jpg
--- a/feat-color.html
+++ b/feat-color.html
@ -0,0 +1,445 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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">
+    <style>
+        .animate {
+            animation-name: arrowScale;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+            animation-duration: 1.8s;
+        }
+
+        @keyframes arrowScale {
+            0% {
+                transform: scale(1);
+            }
+
+            50% {
+                transform: scale(1.28);
+            }
+
+            100% {
+                transform: scale(1);
+            }
+        }
+    </style>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+        }
+
+        html,
+        body {
+            height: 100%;
+            text-align: center;
+            user-select: none;
+        }
+
+        a,
+        a:visited {
+            color: #42B883;
+            /* color: white; */
+            text-decoration: none;
+            margin: 0 4px;
+        }
+
+        button {
+            border: none;
+            background-color: #00A961;
+            color: white;
+            padding-top: 4px;
+            padding-bottom: 4px;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+
+        #app {
+            max-width: 512px;
+            background-color: #00A961;
+            margin: 0 auto;
+            height: 100%;
+        }
+
+        .container {
+            display: grid;
+            height: 100%;
+            width: 100%;
+            grid-template-columns: 1fr;
+            /* grid-template-rows: 4fr 12fr 42fr 20fr; */
+            grid-template-rows: 4fr 12fr auto 20fr;
+            place-items: center;
+        }
+
+        .title {
+            color: white;
+        }
+
+        .card {
+            width: 80%;
+            height: 100%;
+            background-color: white;
+            border-radius: 20px;
+            overflow: hidden;
+            display: grid;
+            /* grid-template-rows: 40px 72px 1fr 60px; */
+            grid-template-rows: 40px 72px 240px auto;
+        }
+
+        .bottom {
+            color: white;
+            font-size: 13px;
+            width: 100%;
+            height: 100%;
+        }
+
+        .footbar {
+            color: white;
+            font-size: 13px;
+            position: absolute;
+            bottom: 3px;
+            left: 0;
+            right: 0;
+            z-index: 3;
+        }
+
+        .footbar-setting {
+            font-size: 14;
+            background-color: #000000;
+            bottom: 0;
+            border-top-left-radius: 25px;
+            border-top-right-radius: 25px;
+            padding: 10px;
+            line-height: 1.5em;
+        }
+
+        .cover {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 1;
+        }
+
+        .grey-cover {
+            /* background-color: #0000006e; */
+            /* 兼容 */
+            background-color: #000000;
+            opacity: 0.5;
+        }
+
+        .control-panel-container {
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            z-index: 2;
+            display: grid;
+            place-items: center;
+        }
+
+        .control-panel {
+            width: 80%;
+            max-width: 480px;
+            min-height: 30%;
+            background-color: #FFF;
+        }
+
+        .setting-title {
+            text-align: left;
+        }
+
+        .setting-input {
+            width: 100%;
+        }
+
+        .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> -->
+</head>
+
+<body>
+    <div id="app">
+        <div class="container" :class="cardClass">
+            <div>
+                <!-- 用于占位 -->
+            </div>
+            <div class="title">
+                <h1 style="letter-spacing: 2.5px; text-indent: 2.5px;">{{ card.title }}</h1>
+                <p style="margin-top: 5px;">{{ card.subtitle }}</p>
+            </div>
+            <div class="card">
+                <div>
+                    <div :class="`text-${cardClass}`" style=" height: 20px;"></div>
+                    <div :class="`text-${cardClass}`" style="
+                                height: 40px;
+                                position: relative;
+                                margin: 0 auto;
+                                border-bottom-left-radius: 24px;
+                                border-bottom-right-radius: 24px;
+                                top: -20px;
+                                line-height: 40px;
+                                display: inline-block;
+                                padding: 0 40px;
+                                letter-spacing: 0.8px;">
+                        请收下{{ cardColor }}色行程卡
+                    </div>
+                </div>
+                <div>
+                    <p style="font-weight: bold; font-size: 16px; margin-top: 18px;">
+                        {{ card.phone }}的动态行程卡
+                    </p>
+                    <p style="font-size: 18px; color: grey; margin-top: 12px;">
+                        {{ card.time }}
+                    </p>
+                </div>
+                <div style="display: grid; place-items: center;">
+                    <img :src="cardArrow" style="width: 45%;" class="animate" />
+                </div>
+                <div>
+                    <div
+                        style="border-top: 1px solid #E3E3E3; margin: 0 20px; padding-top: 8px; color: #91919B; padding-bottom: 12px;">
+                        您于 {{ card.timeSpan }} 年到达或途经：<span style="font-weight: bold; color: black;">{{ card.location
+                            }}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="bottom">
+                <div style="margin: 12px 10%;">
+                    2022年12月13日0时起，正式下线“通信行程卡”服务，“通信行程卡”短信、网页、微信小程序、支付宝小程序、APP等查询渠道将同步下线。
+                </div>
+                <div>
+                    ———— 三年了，再见 ————
+                </div>
+                <div style="margin-top: 8px;">
+                    <p>2020.02.13 - 2022.12.13</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- 设置页面 -->
+        <div v-if="showSetting" class="cover grey-cover"></div>
+        <div v-else class="cover" @click="toggleSetting"></div>
+        <div v-if="showSetting" class="control-panel-container" @click="toggleSetting">
+            <div class="control-panel" @click.stop>
+                <div style="position: relative; text-align: initial; padding: 16px;">
+                    <!-- 关闭按钮 -->
+                    <div style="font-size: 40px;
+                                position: absolute;
+                                right: 5px;
+                                top: 5px;
+                                line-height: 32px;
+                                width: 32px;
+                                height: 32px;
+                                cursor: pointer;" @click="toggleSetting">×</div>
+                    <div style="display: grid;">
+                        <div style="font-weight: bold; margin-bottom: 20px;">设置</div>
+                        <!-- 设置项 -->
+                        <div style="display: grid; grid-template-columns: auto 1fr 60px; gap: 10px; font-size: 14px;">
+                            <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.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 v-if="item.type != 'radio'" style="width: 100%;"
+                                        @click="card[item.key] = getRandom(item.more, card[item.key])">换一个</button>
+                                </div>
+                            </template>
+                        </div>
+                        <div style="font-size: 13px; color: grey;">
+                            <p><b>说明：</b></p>
+                            <p style="text-indent: 5px;">1. 配置好后，您可以截图保存</p>
+                            <p style="text-indent: 5px;">2. 点击屏幕可以再次打开本窗口</p>
+                            <p style="text-indent: 5px;">3. 以上配置在刷新后将恢复默认</p>
+                        </div>
+                        <button style="margin-top: 10px;" @click="toggleSetting">完成</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 底部说明 -->
+        <div class="footbar" :class="{ 'footbar-setting': showSetting }">
+            <p :style="showSetting ? {} : { color: '#fffffffa' }">
+                * 本页面仅作纪念，无实际意义，不得用于防疫等相关场景
+            </p>
+        </div>
+    </div>
+    <script>
+        const { createApp } = Vue
+
+        createApp({
+            data() {
+                return {
+                    showSetting: true,
+                    card: {
+                        title: "通信行程卡纪念版",
+                        subtitle: "做自己的健康第一责任人",
+                        phone: "芒小幻",
+                        time: "停止于：2022.12.13 00:00:00",
+                        timeSpan: "2020 - 2022",
+                        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", "某某某", "芒小幻"]
+                        },
+                        {
+                            key: "time",
+                            name: "时间",
+                            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: ["芒果幻城", "湖南省长沙市、芒果幻城", "湖北省武汉市", "湖北省武汉市、湖北省天门市"],
+                            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)
+                    this.showSetting = !this.showSetting
+                },
+                getRandom(arr, oldVal) {
+                    let returnVal = oldVal
+                    while (returnVal == oldVal && (
+                        arr.length > 1 || (arr.length == 1 && arr[0] !== oldVal)
+                    )) {
+                        returnVal = arr[Math.floor(Math.random() * arr.length)]
+                    }
+                    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>
+    <script>
+        var _hmt = _hmt || [];
+        (function () {
+            var hm = document.createElement("script");
+            hm.src = "https://hm.baidu.com/hm.js?c705e08000e0184050fbc8a24866da5c";
+            var s = document.getElementsByTagName("script")[0];
+            s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
+</body>
+
+</html>
--- a/feat-optimize.html
+++ b/feat-optimize.html
--- a/index.html
+++ b/index.html
@ -358,6 +358,15 @@
            }
        }).mount('#app')
    </script>
+    <script>
+        var _hmt = _hmt || [];
+        (function () {
+            var hm = document.createElement("script");
+            hm.src = "https://hm.baidu.com/hm.js?c705e08000e0184050fbc8a24866da5c";
+            var s = document.getElementsByTagName("script")[0];
+            s.parentNode.insertBefore(hm, s);
+        })();
+    </script>
 </body>

 </html>
Author	SHA1	Message	Date
程序员小墨	d6cd348902	update	2022-12-18 17:01:26 +08:00
程序员小墨	18d08900ac	update	2022-12-15 19:55:29 +08:00
程序员小墨	e0174a332e	Merge branch 'main' into deploy	2022-12-15 13:18:49 +08:00
程序员小墨	354836f619	添加统计代码	2022-12-14 20:20:43 +08:00