-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
113 lines (100 loc) · 5.04 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!-- Original code by Xecades -->
<!-- Modified code © 2021 - 2024 YangguangZhou (GitHub: YangguangZhou) -->
<!DOCTYPE html>
<html lang="zh-cn">
<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, maximum-scale=1.0">
<title>Cards Editor | Jerry Zhou</title>
<link type="favicon" rel="shortcut icon" href="https://jerryz.com.cn/favicon.png" />
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2597042766299857"
crossorigin="anonymous"></script>
<script async src="https://umami.jerryz.com.cn/script.js" data-website-id="1006ea39-2df4-43f1-9c17-fac76c4e4f1e"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/theme-chalk/index.css">
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&family=Ma+Shan+Zheng&family=Noto+Serif+SC:wght@400;700&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="style.css">
<meta name="description" content="个人电子名片编辑器，支持添加社交账号、访问统计、倒数日等多种功能">
</head>
<body>
<div id="app">
<div class="title">Cards编辑器</div>
<el-image class="image" :src="image" @click="open">
<div class="placeholder" slot="placeholder">加载中...</div>
</el-image>
<div id="imageLink" @click="copyToClipboard">
<span id="link">点击复制图片链接</span>
</div>
<el-row :gutter="20">
<el-col :span="3" class="text" :xs="7">背景图片</el-col>
<el-col :span="17">
<el-radio-group v-model="background" fill='#279cff'>
<el-radio-button label="#1"></el-radio-button>
<el-radio-button label="#2"></el-radio-button>
<el-radio-button label="#3"></el-radio-button>
<el-radio-button label="#4"></el-radio-button>
<el-radio-button label="#5"></el-radio-button>
</el-radio-group>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3" class="text" :xs="7">文字颜色</el-col>
<el-col :span="7">
<el-color-picker v-model="text_color" show-alpha></el-color-picker>
</el-col>
<el-col :span="3" class="text" :xs="7">背景颜色</el-col>
<el-col :span="7">
<el-color-picker v-model="bg_color" show-alpha></el-color-picker>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3" class="text" :xs="7">目标日期</el-col>
<el-col :span="7">
<el-date-picker v-model="date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd"></el-date-picker>
</el-col>
<el-col :span="3" class="text" :xs="7">日期文本</el-col>
<el-col :span="7">
<el-input v-model="str" :placeholder="str_placeholder"></el-input>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3" class="text" :xs="7">底部文本</el-col>
<el-col :span="7">
<el-input v-model="quote" placeholder="永远相信美好的事情即将发生✨"></el-input>
</el-col>
<el-col :span="3" class="text" :xs="7">访问量统计</el-col>
<el-col :span="7">
<el-input v-model="counter" placeholder="Cards"></el-input>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="3" class="text" :xs="7">社交账号</el-col>
<el-col :span="17">
<div class="social" v-for="(o, index) in icons">
<el-image :src="'https://cards.jerryz.com.cn/res/icon/' + o + '.svg'"></el-image>
<el-input v-model="social[index]" :placeholder="o"></el-input>
</div>
</el-col>
</el-row>
<div class="help">
温馨提示：预览图是可以点击的，点击链接就可以复制内容
</div>
<div class="counter">
<span id="busuanzi_value_page_pv"><i class="el-icon-loading"></i></span> Views |
<span id="busuanzi_value_site_uv"><i class="el-icon-loading"></i></span> Viewers
</div>
<div class="copyright">
Copyright © 2021-2024 <a href="https://jerryz.com.cn" target="_blank">Jerry Zhou</a>
</br>
<a href="https://github.com/YangguangZhou/Cards" target="_blank">GitHub</a>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"></script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<script src="script.js"></script>
<script src="mobile.js"></script>
</body>
</html>