coder-xiaomo/travel-card
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity GitHub Gitee

Compare commits

merge into: coder-xiaomo:main
Branches Tags
coder-xiaomo:main
coder-xiaomo:deploy
coder-xiaomo:feat-color
coder-xiaomo:feat-optimize
coder-xiaomo:pr
...
pull from: coder-xiaomo:feat-color
Branches Tags
coder-xiaomo:main
coder-xiaomo:deploy
coder-xiaomo:feat-color
coder-xiaomo:feat-optimize
coder-xiaomo:pr

8 Commits
main ... feat-color

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
10 changed files with 100 additions and 30 deletions
Show Stats Expand all files Collapse all files

8
README.md
View File

@ -1,9 +1,5 @@
# 通信行程卡纪念版 H5 # 通信行程卡 之 黄、红卡及彩蛋卡版
[GitHub](https://github.com/coder-xiaomo/travel-card) [Gitee](https://gitee.com/coder-xiaomo/travel-card)
**注意：本项目仅作纪念，无实际意义，不得用于防疫等相关场景** **注意：本项目仅作纪念，无实际意义，不得用于防疫等相关场景**
本项目由 程序员小墨 制作并开源，当前分支由[@小林囝](https://gitee.com/teochew)基于 main 分支修改而来
本项目由 程序员小墨 制作并开源，欢迎关注我的[B站](https://space.bilibili.com/457109942)和公众号（ID：程序员小墨）

BIN
assets/image/birthday-compressed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
assets/image/birthday.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
assets/image/no-compressed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
assets/image/no.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 69 KiB

BIN
assets/image/red-compressed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB

BIN
assets/image/red.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 124 KiB

BIN
assets/image/yellow-compressed.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/image/yellow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

122
index.html
View File

@ -4,6 +4,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>通信行程卡 - 纪念版</title> <title>通信行程卡 - 纪念版</title>
<link rel="shortcut icon" href="./assets/image/arrow-compressed.png" type="image/x-icon"> <link rel="shortcut icon" href="./assets/image/arrow-compressed.png" type="image/x-icon">
@ -164,6 +165,30 @@
.setting-input input { .setting-input input {
width: 100%; 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> </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.min.js"></script>
<!-- <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script> --> <!-- <script src="https://cdn.staticfile.org/vue/3.2.45/vue.global.prod.min.js"></script> -->
@ -171,7 +196,7 @@
<body> <body>
<div id="app"> <div id="app">
<div class="container"> <div class="container" :class="cardClass">
<div> <div>
<!-- 用于占位 --> <!-- 用于占位 -->
</div> </div>
@ -181,12 +206,11 @@
</div> </div>
<div class="card"> <div class="card">
<div> <div>
<div style="background-color: #CFEEDF; height: 20px;"></div> <div :class="`text-${cardClass}`" style=" height: 20px;"></div>
<div style="background-color: #CFEEDF; <div :class="`text-${cardClass}`" style="
height: 40px; height: 40px;
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
color: #00A766;
border-bottom-left-radius: 24px; border-bottom-left-radius: 24px;
border-bottom-right-radius: 24px; border-bottom-right-radius: 24px;
top: -20px; top: -20px;
@ -194,7 +218,7 @@
display: inline-block; display: inline-block;
padding: 0 40px; padding: 0 40px;
letter-spacing: 0.8px;"> letter-spacing: 0.8px;">
请收下绿色行程卡 请收下{{ cardColor }}色行程卡
</div> </div>
</div> </div>
<div> <div>
@ -206,7 +230,7 @@
</p> </p>
</div> </div>
<div style="display: grid; place-items: center;"> <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> <div>
<div <div
@ -251,13 +275,22 @@
<template v-for="item in setting"> <template v-for="item in setting">
<div class="setting-title">{{ item.name }}</div> <div class="setting-title">{{ item.name }}</div>
<div class="setting-input" :style="item.more ? {} : { 'grid-column': 'span 2' }"> <div class="setting-input" :style="item.more ? {} : { 'grid-column': 'span 2' }">
<textarea v-if="item.textarea" v-model="card[item.key]" :maxlength="item.maxlength" <textarea v-if="item.type == 'textarea'" v-model="card[item.key]"
style="width: 100%; resize: none;" rows="3"></textarea> :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" <input v-else :placeholder="item.name" :maxlength="item.maxlength"
v-model="card[item.key]" /> v-model="card[item.key]" />
</div> </div>
<div class="setting-reset" v-if="item.more"> <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> @click="card[item.key] = getRandom(item.more, card[item.key])">换一个</button>
</div> </div>
</template> </template>
@ -276,18 +309,9 @@
<!-- 底部说明 --> <!-- 底部说明 -->
<div class="footbar" :class="{ 'footbar-setting': showSetting }"> <div class="footbar" :class="{ 'footbar-setting': showSetting }">
<p :style="showSetting ? {} : { color: '#cfeedf' }"> <p :style="showSetting ? {} : { color: '#fffffffa' }">
* 本页面仅作纪念，无实际意义，不得用于防疫等相关场景 * 本页面仅作纪念，无实际意义，不得用于防疫等相关场景
</p> </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>
</div> </div>
<script> <script>
@ -300,46 +324,84 @@
card: { card: {
title: "通信行程卡纪念版", title: "通信行程卡纪念版",
subtitle: "做自己的健康第一责任人", subtitle: "做自己的健康第一责任人",
phone: "某某某", phone: "芒小幻",
time: "停止于：2022.12.13 00:00:00", time: "停止于：2022.12.13 00:00:00",
timeSpan: "2020 - 2022", timeSpan: "2020 - 2022",
location: "湖北省武汉市、湖北省天门市", // ["湖北省武汉市", "湖北省天门市"], type: 0,
location: "湖南省长沙市、芒果幻城",
}, },
setting: [ setting: [
{ {
key: "title", key: "title",
name: "标题", name: "标题",
type: 'input',
maxlength: 15, maxlength: 15,
more: ["通信行程卡纪念版", "行程卡纪念版", "通信大数据行程卡纪念版"] more: ["通信行程卡纪念版", "行程卡纪念版", "通信大数据行程卡纪念版"]
}, },
{ {
key: "subtitle", key: "subtitle",
name: "副标题", name: "副标题",
type: 'input',
maxlength: 15, maxlength: 15,
more: ["做自己的健康第一责任人", "回顾行程卡的1034天", "做好疫情防控第一责任人", "疫情防控，人人有责"] more: ["做自己的健康第一责任人", "回顾行程卡的1034天", "做好疫情防控第一责任人", "疫情防控，人人有责"]
}, },
{ {
key: "phone", key: "phone",
name: "归属人", name: "归属人",
type: 'input',
maxlength: 15, maxlength: 15,
more: ["2020***2022", "您的姓名", "189****1234", "某某某"] more: ["2020***2022", "您的姓名", "189****1234", "某某某", "芒小幻"]
}, },
{ {
key: "time", key: "time",
name: "时间", 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"] 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", key: "location",
name: "到达地点", name: "到达地点",
type: 'textarea',
maxlength: 300, maxlength: 300,
more: null, more: ["芒果幻城", "湖南省长沙市、芒果幻城", "湖北省武汉市", "湖北省武汉市、湖北省天门市"],
textarea: true, 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: { methods: {
toggleSetting(e) { toggleSetting(e) {
console.log(e) console.log(e)
@ -354,6 +416,18 @@
} }
return returnVal 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') }).mount('#app')
</script> </script>