From c5fa874067433da6d5feb47f02f0e144db0d23ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com> Date: Wed, 30 Mar 2022 20:37:24 +0800 Subject: [PATCH 1/2] =?UTF-8?q?vue=E6=A8=A1=E6=9D=BF=E8=AF=AD=E6=B3=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo.html" | 70 +++ .../download/font_t90vc127xkl/demo.css" | 539 ++++++++++++++++++ .../font_t90vc127xkl/demo_index.html" | 253 ++++++++ .../download/font_t90vc127xkl/iconfont.css" | 25 + .../download/font_t90vc127xkl/iconfont.js" | 1 + .../download/font_t90vc127xkl/iconfont.json" | 30 + .../download/font_t90vc127xkl/iconfont.ttf" | Bin 0 -> 16256 bytes 7 files changed, 918 insertions(+) create mode 100644 "\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/demo.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo_index.html" create mode 100644 "\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.css" create mode 100644 "\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.js" create mode 100644 "\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.json" create mode 100644 "\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.ttf" diff --git "a/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/demo.html" "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/demo.html" new file mode 100644 index 0000000..759c6aa --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/demo.html" @@ -0,0 +1,70 @@ + + + + + + + Document + + + + + + +
+
+
+ + +
+
+ + 我是小猪皮杰，我是维尼的好朋友 + 我是小猪皮杰，我是维尼的好朋友 +
+
+ + +
+ + +
+ + + + \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo.css" "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo.css" new file mode 100644 index 0000000..a67054a --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo.css" @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git "a/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo_index.html" "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo_index.html" new file mode 100644 index 0000000..3149753 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/demo_index.html" @@ -0,0 +1,253 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+ + +
+
+
+
    + +
  • + +
    7 小熊维尼-01
    +
    &#xe60f;
    +
    • + +
  • + +
    11-小猪
    +
    &#xe618;
    +
    • + +
  • + +
    老虎
    +
    &#xe620;
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.ttf?t=1648629433215') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + 7 小熊维尼-01 +
    +
    .icon-xiaoxiongweini- +
    +
    • + +
  • + +
    + 11-小猪 +
    +
    .icon--xiaozhu +
    +
    • + +
  • + +
    + 老虎 +
    +
    .icon-laohu +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    7 小熊维尼-01
    +
    #icon-xiaoxiongweini-
    +
    • + +
  • + +
    11-小猪
    +
    #icon--xiaozhu
    +
    • + +
  • + +
    老虎
    +
    #icon-laohu
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git "a/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.css" "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.css" new file mode 100644 index 0000000..dbf6db1 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.css" @@ -0,0 +1,25 @@ +@font-face { + font-family: "iconfont"; /* Project id */ + src: url('iconfont.ttf?t=1648629433215') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-xiaoxiongweini-:before { + content: "\e60f"; +} + +.icon--xiaozhu:before { + content: "\e618"; +} + +.icon-laohu:before { + content: "\e620"; +} + diff --git "a/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.js" "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.js" new file mode 100644 index 0000000..7785609 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.js" @@ -0,0 +1 @@ +!function(c){var z,m,a,t,l,h='',s=(s=document.getElementsByTagName("script"))[s.length-1].getAttribute("data-injectcss"),i=function(c,z){z.parentNode.insertBefore(c,z)};if(s&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function p(){l||(l=!0,a())}function e(){try{t.documentElement.doScroll("left")}catch(c){return void setTimeout(e,50)}p()}z=function(){var c,z=document.createElement("div");z.innerHTML=h,h=null,(z=z.getElementsByTagName("svg")[0])&&(z.setAttribute("aria-hidden","true"),z.style.position="absolute",z.style.width=0,z.style.height=0,z.style.overflow="hidden",z=z,(c=document.body).firstChild?i(z,c.firstChild):c.appendChild(z))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(z,0):(m=function(){document.removeEventListener("DOMContentLoaded",m,!1),z()},document.addEventListener("DOMContentLoaded",m,!1)):document.attachEvent&&(a=z,t=c.document,l=!1,e(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,p())})}(window); \ No newline at end of file diff --git "a/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.json" "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.json" new file mode 100644 index 0000000..4a1f475 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.json" @@ -0,0 +1,30 @@ +{ + "id": "", + "name": "", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "3878981", + "name": "7 小熊维尼-01", + "font_class": "xiaoxiongweini-", + "unicode": "e60f", + "unicode_decimal": 58895 + }, + { + "icon_id": "9252036", + "name": "11-小猪", + "font_class": "-xiaozhu", + "unicode": "e618", + "unicode_decimal": 58904 + }, + { + "icon_id": "26270938", + "name": "老虎", + "font_class": "laohu", + "unicode": "e620", + "unicode_decimal": 58912 + } + ] +} diff --git "a/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.ttf" "b/\346\235\216\346\254\247\351\233\257/3.30-vue\347\254\254\344\272\214\346\254\241\350\257\276/download/font_t90vc127xkl/iconfont.ttf" new file mode 100644 index 0000000000000000000000000000000000000000..cb6bccc0be1b7c5b9f0edcf3c811e22126afd78c GIT binary patch literal 16256 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 literal 0 HcmV?d00001 -- Gitee From bc936de094b3eaa436ffd357ecbd1ea1f33dce5c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E6=AC=A7=E9=9B=AF?= <2836892088@qq.com> Date: Thu, 31 Mar 2022 18:35:22 +0800 Subject: [PATCH 2/2] =?UTF-8?q?3.31-vue=E7=99=BB=E5=BD=95=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../demo.html" | 79 +++++++++++++++++++ 1 file changed, 79 insertions(+) create mode 100644 "\346\235\216\346\254\247\351\233\257/3.31-vue\347\231\273\351\231\206\351\241\265\351\235\242/demo.html" diff --git "a/\346\235\216\346\254\247\351\233\257/3.31-vue\347\231\273\351\231\206\351\241\265\351\235\242/demo.html" "b/\346\235\216\346\254\247\351\233\257/3.31-vue\347\231\273\351\231\206\351\241\265\351\235\242/demo.html" new file mode 100644 index 0000000..8f770a5 --- /dev/null +++ "b/\346\235\216\346\254\247\351\233\257/3.31-vue\347\231\273\351\231\206\351\241\265\351\235\242/demo.html" @@ -0,0 +1,79 @@ + + + + + + + + Document + + + + +
+
+ 
手 机 号：
+
+ 
密    码：
+
+ 
验证密码：
+
+ +
+
+ + + + \ No newline at end of file -- Gitee