395 lines
15 KiB
HTML
395 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<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="card.type==1?'yellow':card.type==0?'':'red'">
|
||
<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="card.type==1?'text-yellow':card.type==0?'text-green':'text-red'" style=" height: 20px;"></div>
|
||
<div :class="card.type==1?'text-yellow':card.type==0?'text-green':'text-red'" 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;">
|
||
请收下{{card.type==1?'黄':card.type==0?'绿':'红'}}色行程卡
|
||
</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="card.type==1?'./assets/image/yellow-compressed.png':card.type==2?'./assets/image/red-compressed.png':card.type==3?'./assets/image/no-compressed.png':card.type==4?'./assets/image/birthday-compressed.png':'./assets/image/arrow-compressed.png'" 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]">
|
||
<template v-for="iitem in item.more">
|
||
<option
|
||
:value="iitem.value"
|
||
:selected="card[item.key]==iitem.value"> {{iitem.name}}</option>
|
||
</template>
|
||
</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: 15,
|
||
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,
|
||
}
|
||
]
|
||
}
|
||
},
|
||
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
|
||
}
|
||
}
|
||
}).mount('#app')
|
||
</script>
|
||
</body>
|
||
|
||
</html> |