1 Star 0 Fork 22

Xmses/YunQ_DynamicResume

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
1.js 19.30 KB
一键复制 编辑 原始数据 按行查看 历史
郭子山 提交于 2020-10-16 10:34 . Gs1016-1
$(function() {
webpackJsonp([1], {
100: function(n, t) {
n.exports = {
render: function() {
var n = this,
t = n.$createElement,
e = n._self._c || t;
return e("div", { ref: "container", staticClass: "resumeEditor", class: { htmlMode: n.enableHtml } }, [n.enableHtml ? e("div", { domProps: { innerHTML: n._s(n.result) } }) : e("pre", [n._v(n._s(n.result))])])
},
staticRenderFns: []
}
},
40: function(n, t) {},
41: function(n, t, e) {
e(89);
var r = e(15)(e(48), e(100), "data-v-647e008b", null);
n.exports = r.exports
},
42: function(n, t, e) {
e(87);
var r = e(15)(e(49), e(98), "data-v-35c047fd", null);
n.exports = r.exports
},
43: function(n, t, e) {
e(86);
var r = e(15)(e(46), e(97), "data-v-22ce9519", null);
n.exports = r.exports
},
44: function(n, t, e) {
e(88);
var r = e(15)(e(47), e(99), "data-v-53c8d54c", null);
n.exports = r.exports
},
46: function(n, t, e) {
"use strict";
Object.defineProperty(t, "__esModule", { value: !0 });
var r, o = e(16),
i = e.n(o),
s = e(26),
h = e.n(s),
a = e(25),
d = e.n(a),
u = e(42),
l = e.n(u),
c = e(41),
p = e.n(c),
m = e(40);
e.n(m), t.default = {
name: "app",
components: { StyleEditor: l.a, ResumeEditor: p.a },
data: function() {
return {
interval: 3,
currentStyle: "",
enableHtml: !1,
fullStyle: ["/*\n* Inspired by http://guoqingyun.top/\n* 大家好,我是郭清云。\n* 我来写一份简历!\n*/\n\n/* 给所有元素加上过渡效果 */\n* {\n transition: all .1s;\n}\n/* 设置背景颜色 */\nhtml {\n color: rgb(222,222,222); background: rgb(0,43,54);\n}\n\n/* 设置边框 */\n.styleEditor {\n padding: .5em;\n border: 1px solid;\n margin: .5em;\n overflow: auto;\n width: 45vw; height: 90vh;\n /* background: rgb(20,20,20); */\n}\n/* 代码高亮 */\n.token.selector{ color: rgb(133,153,0); }\n.token.property{ color: rgb(187,137,0); }\n.token.punctuation{ color: yellow; }\n.token.function{ color: rgb(42,161,152); }\n\n/* 加3D效果 */\nhtml{\n perspective: 1000px;\n}\n.styleEditor {\n position: fixed; left: 0; top: 0;\n -webkit-transition: none;\n transition: none;\n -webkit-transform: rotateY(10deg) translateZ(-100px) ;\n transform: rotateY(10deg) translateZ(-100px) ;\n}\n\n/* 准备一个编辑器 */\n.resumeEditor{\n position: fixed; right: 0; top: 0;\n padding: .5em; margin: .5em;\n width: 48vw; height: 90vh;\n border: 1px solid;\n background: white; color: #222;\n overflow: auto;\n}\n/* 开始写简历 */\n", '\n/*将Markdown格式翻译成HTML\n *再对HTML加点样式\n*/\n.resumeEditor{\n padding: 2em;\n}\n.resumeEditor h2{\n display: inline-block;\n border-bottom: 1px solid;\n margin: 1em 0 .5em;\n}\n.resumeEditor ul,.resumeEditor ol{\n list-style: none;\n}\n.resumeEditor ul> li::before{\n content: \'\';\n margin-right: .5em;\n}\n.resumeEditor ol {\n counter-reset: section;\n}\n.resumeEditor ol li::before {\n counter-increment: section;\n content: counters(section, ".") " ";\n margin-right: .5em;\n}\n.resumeEditor blockquote {\n margin: 1em;\n padding: .5em;\n background: #ddd;\n}\n'],
currentMarkdown: "",
fullMarkdown: "\n郭清云\n----\n22岁,ASP.NET程序员,两年C# Web从业经验,目前在重庆工作。\n有良好的文档编写和代码书写规范,能独立解决问题、百折不挠、细节控\n<br/>\n\n技能\n----\n* 后端开发\n* 小程序开发\n* 单点登录\n* 权限管理\n* 开源爱好者\n* 博客系统\n\n技术及语言\n----\n - **C#**: MVC、WEBAPI、WINFROM\n - **前端**: Bootstrap、LayUI、jQuery UI\n - **数据库**: MySQL、SQLServer、redis\n**Others**: Git、Svn\n\n工作经历\n----\n1. [鸿程鞋业连锁软件开发中心]\n2. [重庆科创职业学院](http://www.cqie.cn/)\n\n开源项目\n----\n1. [云清园小站个人博客](http://www.guoqingyun.top/)\n2. [小程序个人简历](https://gitee.com/guo_zi_shan/yun-q_-resume)\n3. [多动症简历](http://www.guoqingyun.top/dynamicResume.html)\n\n联系我\n----\n* 联系QQ:**925627046** | 微信:**Crooked0521**\n* 主要涉及技术:**C#后端开发**、**小程序开发**、**开源爱好者**\n\n> \n"
}
},
created: function() { this.makeResume() },
methods: {
makeResume: (r = d()(h.a.mark(function n() {
return h.a.wrap(function(n) {
for (;;) switch (n.prev = n.next) {
case 0:
return n.next = 2, this.progressivelyShowStyle(0);
case 2:
return n.next = 4, this.progressivelyShowResume();
case 4:
return n.next = 6, this.progressivelyShowStyle(1);
case 6:
return n.next = 8, this.showHtml();
case 8:
return n.next = 10, this.progressivelyShowStyle(2);
case 10:
case "end":
return n.stop()
}
}, n, this)
})), function() { return r.apply(this, arguments) }),
showHtml: function() { var e = this; return new i.a(function(n, t) { e.enableHtml = !0, n() }) },
progressivelyShowStyle: function(c) {
var t = this;
return new i.a(function(a, n) {
var u = t.interval,
l = d()(h.a.mark(function n() {
var t, e, r, o, i, s = this;
return h.a.wrap(function(n) {
for (;;) switch (n.prev = n.next) {
case 0:
if (t = this.fullStyle[c]) { n.next = 3; break }
return n.abrupt("return");
case 3:
e = this.fullStyle.filter(function(n, t) { return t <= c }).map(function(n) { return n.length }).reduce(function(n, t) { return n + t }, 0), r = e - t.length, this.currentStyle.length < e ? (o = this.currentStyle.length - r, i = t.substring(o, 1 + o) || " ", this.currentStyle += i, "\n" === t.substring(o - 1, o) && this.$refs.styleEditor && this.$nextTick(function() { s.$refs.styleEditor.goBottom() }), setTimeout(l, u)) : a();
case 6:
case "end":
return n.stop()
}
}, n, this)
})).bind(t);
l()
})
},
progressivelyShowResume: function() {
var o = this;
return new i.a(function(t, n) {
var e = o.fullMarkdown.length,
r = o.interval;
! function n() { o.currentMarkdown.length < e ? (o.currentMarkdown = o.fullMarkdown.substring(0, o.currentMarkdown.length + 1), o.currentMarkdown[o.currentMarkdown.length - 1], "\n" === o.currentMarkdown[o.currentMarkdown.length - 2] && o.$refs.resumeEditor && o.$nextTick(function() { return o.$refs.resumeEditor.goBottom() }), setTimeout(n, r)) : t() }()
})
}
}
}
},
47: function(n, t, e) {
"use strict";
Object.defineProperty(t, "__esModule", { value: !0 });
var r, o = e(16),
i = e.n(o),
s = e(26),
h = e.n(s),
a = e(25),
d = e.n(a),
u = e(42),
l = e.n(u),
c = e(41),
p = e.n(c),
m = e(40);
e.n(m), t.default = {
name: "app",
components: { StyleEditor: l.a, ResumeEditor: p.a },
data: function() {
return {
interval: 3,
currentStyle: "",
enableHtml: !1,
fullStyle: ["/*\n* Inspired by http://guoqingyun.top/\n* 大家好,我是郭清云。\n* 我来写一份简历!\n*/\n\n/* 首先给所有元素加上过渡效果 */\n* {\n transition: all .1s;\n}\n/* 白色背景太单调了,我们来点背景 */\nhtml {\n color: rgb(222,222,222);\n background: rgb(0,43,54);\n}\n/* 文字离边框太近了 */\n.styleEditor {\n padding: .5em;\n border: 1px solid;\n overflow: auto;\n width: 90vw;\n margin: 2.5vh 5vw;\n height: 90vh;\n}\n/* 太高了 */\n.styleEditor {\n height: 45vh;\n}\n/* 代码高亮 */\n.token.selector{\n color: rgb(133,153,0);\n}\n.token.property{\n color: rgb(187,137,0);\n}\n.token.punctuation{\n color: yellow;\n}\n.token.function{\n color: rgb(42,161,152);\n}\n/* 加点 3D 效果呗 */\nhtml{\n perspective: 1000px;\n}\n.styleEditor {\n position: fixed; left: 0; top: 0;\n transform: rotateX(-10deg) translateZ(-50px) ;\n}\n/* 接下来我给自己准备一个编辑器 */\n.resumeEditor{\n position: fixed;\n top: 50%; left: 0;\n padding: .5em; margin: 2.5vh;\n width: 95vw; height: 45vh;\n border: 1px solid;\n background: white; color: #222;\n overflow: auto;\n}\n/* 开始写简历 */\n", '\n.resumeEditor{\n padding: 2em;\n}\n.resumeEditor h2{\n display: inline-block;\n border-bottom: 1px solid;\n margin: 1em 0 .5em;\n}\n.resumeEditor ul,.resumeEditor ol{\n list-style: none;\n}\n.resumeEditor ul> li::before{\n content: \'\';\n margin-right: .5em;\n}\n.resumeEditor ol {\n counter-reset: section;\n}\n.resumeEditor ol li::before {\n counter-increment: section;\n content: counters(section, ".") " ";\n margin-right: .5em;\n}\n.resumeEditor blockquote {\n margin: 1em;\n padding: .5em;\n background: #ddd;\n}\n'],
currentMarkdown: "",
fullMarkdown: "\n郭清云\n----\n22岁,ASP.NET程序员,两年C# Web从业经验,目前在重庆工作。\n有良好的文档编写和代码书写规范,能独立解决问题、百折不挠、细节控\n<br/>\n\n技能\n----\n* 后端开发\n* 小程序开发\n* 单点登录\n* 权限管理\n* 开源爱好者\n* 博客系统\n\n技术及语言\n----\n - **C#**: MVC、WEBAPI、WINFROM\n - **前端**: Bootstrap、LayUI、jQuery UI\n - **数据库**: MySQL、SQLServer、redis\n**Others**: Git、Svn\n\n工作经历\n----\n1. [鸿程鞋业连锁软件开发中心]\n2. [重庆科创职业学院](http://www.cqie.cn/)\n\n开源项目\n----\n1. [云清园小站个人博客](http://www.guoqingyun.top/)\n2. [小程序个人简历](https://gitee.com/guo_zi_shan/yun-q_-resume)\n3. [多动症简历](http://www.guoqingyun.top/dynamicResume.html)\n\n联系我\n----\n* 联系QQ:**925627046** | 微信:**Crooked0521**\n* 主要涉及技术:**C#后端开发**、**小程序开发**、**开源爱好者**\n\n> \n"
}
},
created: function() { this.makeResume() },
methods: {
makeResume: (r = d()(h.a.mark(function n() {
return h.a.wrap(function(n) {
for (;;) switch (n.prev = n.next) {
case 0:
return n.next = 2, this.progressivelyShowStyle(0);
case 2:
return n.next = 4, this.progressivelyShowResume();
case 4:
return n.next = 6, this.progressivelyShowStyle(1);
case 6:
return n.next = 8, this.showHtml();
case 8:
return n.next = 10, this.progressivelyShowStyle(2);
case 10:
case "end":
return n.stop()
}
}, n, this)
})), function() { return r.apply(this, arguments) }),
showHtml: function() { var e = this; return new i.a(function(n, t) { e.enableHtml = !0, e.$nextTick(function() { e.$refs.resumeEditor.goTop() }), n() }) },
progressivelyShowStyle: function(c) {
var t = this;
return new i.a(function(a, n) {
var u = t.interval,
l = d()(h.a.mark(function n() {
var t, e, r, o, i, s = this;
return h.a.wrap(function(n) {
for (;;) switch (n.prev = n.next) {
case 0:
if (t = this.fullStyle[c]) { n.next = 3; break }
return n.abrupt("return");
case 3:
e = this.fullStyle.filter(function(n, t) { return t <= c }).map(function(n) { return n.length }).reduce(function(n, t) { return n + t }, 0), r = e - t.length, this.currentStyle.length < e ? (o = this.currentStyle.length - r, i = t.substring(o, 1 + o) || " ", this.currentStyle += i, "\n" === t.substring(o - 1, o) && this.$refs.styleEditor && this.$nextTick(function() { s.$refs.styleEditor.goBottom() }), setTimeout(l, u)) : a();
case 6:
case "end":
return n.stop()
}
}, n, this)
})).bind(t);
l()
})
},
progressivelyShowResume: function() {
var o = this;
return new i.a(function(t, n) {
var e = o.fullMarkdown.length,
r = o.interval;
! function n() { o.currentMarkdown.length < e ? (o.currentMarkdown = o.fullMarkdown.substring(0, o.currentMarkdown.length + 1), o.currentMarkdown[o.currentMarkdown.length - 1], "\n" === o.currentMarkdown[o.currentMarkdown.length - 2] && o.$refs.resumeEditor && o.$nextTick(function() { return o.$refs.resumeEditor.goBottom() }), setTimeout(n, r)) : t() }()
})
}
}
}
},
48: function(n, t, e) {
"use strict";
Object.defineProperty(t, "__esModule", { value: !0 });
var r = e(90),
i = e.n(r);
t.default = {
props: ["markdown", "enableHtml"],
name: "ResumeEditor",
computed: {
result: function() {
var r = new i.a.Renderer;
i.a.setOptions({ renderer: r, gfm: !0, tables: !0, breaks: !0, pedantic: !1, sanitize: !1, smartLists: !0, smartypants: !1 });
var o = r.link;
return r.link = function(n, t, e) {
return o.call(r, n, t, e).replace(/^<a /, '<a target="_blank" rel="nofollow" id="" ')
},
this.enableHtml ? i()(this.markdown, { rendererMD: r }) : this.markdown
}
},
methods: { goBottom: function() { this.$refs.container.scrollTop = 1e5 }, goTop: function() { this.$refs.container.scrollTop = 0 } }
}
},
49: function(n, t, e) {
"use strict";
Object.defineProperty(t, "__esModule", { value: !0 });
var r = e(91),
o = e.n(r);
t.default = { name: "Editor", props: ["code"], computed: { highlightedCode: function() { return o.a.highlight(this.code, o.a.languages.css) }, codeInStyleTag: function() { return "<style>" + this.code + "</style>" } }, methods: { goBottom: function() { this.$refs.container.scrollTop = 1e5 } } }
},
50: function(n, t, e) {
"use strict";
Object.defineProperty(t, "__esModule", { value: !0 });
var r = e(45),
o = e(43),
i = e.n(o),
s = e(44),
a = e.n(s),
u = document.documentElement.clientWidth;
new r.a({ el: "#app", render: function(n) { return n(500 < u ? i.a : a.a) } })
},
86: function(n, t) {},
87: function(n, t) {},
88: function(n, t) {},
89: function(n, t) {},
97: function(n, t) {
n.exports = {
render: function() {
var n = this,
t = n.$createElement,
e = n._self._c || t;
return e("div", { attrs: { id: "app" } }, [e("StyleEditor", { ref: "styleEditor", attrs: { code: n.currentStyle } }), n._v(" "), e("ResumeEditor", { ref: "resumeEditor", attrs: { markdown: n.currentMarkdown, enableHtml: n.enableHtml } })], 1)
},
staticRenderFns: []
}
},
98: function(n, t) {
n.exports = {
render: function() {
var n = this,
t = n.$createElement,
e = n._self._c || t;
return e("div", { ref: "container", staticClass: "styleEditor" }, [e("div", { staticClass: "code", domProps: { innerHTML: n._s(n.codeInStyleTag) } }), n._v(" "), e("pre", { domProps: { innerHTML: n._s(n.highlightedCode) } })])
},
staticRenderFns: []
}
},
99: function(n, t) {
n.exports = {
render: function() {
var n = this,
t = n.$createElement,
e = n._self._c || t;
return e("div", { attrs: { id: "app" } }, [e("StyleEditor", { ref: "styleEditor", attrs: { code: n.currentStyle } }), n._v(" "), e("ResumeEditor", { ref: "resumeEditor", attrs: { markdown: n.currentMarkdown, enableHtml: n.enableHtml } })], 1)
},
staticRenderFns: []
}
}
}, [50]);
})
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/xmses/yun-q_-dynamic-resume.git
git@gitee.com:xmses/yun-q_-dynamic-resume.git
xmses
yun-q_-dynamic-resume
YunQ_DynamicResume
master

搜索帮助