Compare commits
17 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| 61dd10de4f | |||
|
1e5637c720 | ||
|
|
6357bb5e2e | ||
|
|
844387d535 | ||
|
|
9e8032f072 | ||
|
|
18498231de | ||
|
|
011d01b594 | ||
| 93eaa2b9d2 | |||
| affdcd820b | |||
| 6c43ef111a | |||
| 25165d3dcd | |||
| f2d6c66ebd | |||
| 979ef57e36 | |||
| 59e7742132 | |||
| 4997496d9c | |||
| e10eec01be | |||
|
|
9fd672b356 |
21
LICENSE
Normal file
21
LICENSE
Normal file
@@ -0,0 +1,21 @@
|
||||
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.
|
||||
39
README.md
Normal file
39
README.md
Normal file
@@ -0,0 +1,39 @@
|
||||
# 通信行程卡纪念版 H5
|
||||
|
||||
仓库地址：[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：程序员小墨）
|
||||
BIN
docs/Screenshot-feat-color.jpg
Normal file
BIN
docs/Screenshot-feat-color.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
BIN
docs/Screenshot-feat-optimize.jpg
Normal file
BIN
docs/Screenshot-feat-optimize.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
docs/Screenshot.jpg
Normal file
BIN
docs/Screenshot.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 KiB |
445
feat-color.html
445
feat-color.html
@@ -1,445 +0,0 @@
|
||||
<!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>
|
||||
File diff suppressed because one or more lines are too long
146
index.html
146
index.html
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user