diff --git a/ms-web/src/App.vue b/ms-web/src/App.vue index e370f91..8b88dad 100644 --- a/ms-web/src/App.vue +++ b/ms-web/src/App.vue @@ -19,4 +19,10 @@ margin: 0; padding: 0; } + * { + margin: 0; + padding: 0; + font-size: 14px; + } + diff --git a/ms-web/src/assets/icon/demo.css b/ms-web/src/assets/icon/demo.css deleted file mode 100644 index 3d9cbe7..0000000 --- a/ms-web/src/assets/icon/demo.css +++ /dev/null @@ -1,370 +0,0 @@ -*{margin: 0;padding: 0;list-style: none;} -/* -KISSY CSS Reset -理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。 -2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。 -3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修改后再使用。 -特色:1. 适应中文;2. 基于最新主流浏览器。 -维护:玉伯, 正淳 - */ - -/** 清除内外边距 **/ -body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ -dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ -pre, /* text formatting elements 文本格式元素 */ -form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ -th, td /* table elements 表格元素 */ { - margin: 0; - padding: 0; -} - -/** 设置默认字体 **/ -body, -button, input, select, textarea /* for ie */ { - font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; -} -h1, h2, h3, h4, h5, h6 { font-size: 100%; } -address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ -code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ -small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ - -/** 重置列表元素 **/ -ul, ol { list-style: none; } - -/** 重置文本格式元素 **/ -a { text-decoration: none; } -a:hover { text-decoration: underline; } - - -/** 重置表单元素 **/ -legend { color: #000; } /* for ie6 */ -fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ -button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ -/* 注:optgroup 无法扶正 */ - -/** 重置表格元素 **/ -table { border-collapse: collapse; border-spacing: 0; } - -/* 清除浮动 */ -.ks-clear:after, .clear:after { - content: '\20'; - display: block; - height: 0; - clear: both; -} -.ks-clear, .clear { - *zoom: 1; -} - -.main { - padding: 30px 100px; -width: 960px; -margin: 0 auto; -} -.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} - -.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; - -} - -.icon_lists li{ - float:left; - width: 100px; - height:180px; - text-align: center; - list-style: none !important; -} -.icon_lists .icon{ - font-size: 42px; - line-height: 100px; - margin: 10px 0; - color:#333; - -webkit-transition: font-size 0.25s ease-out 0s; - -moz-transition: font-size 0.25s ease-out 0s; - transition: font-size 0.25s ease-out 0s; - -} -.icon_lists .icon:hover{ - font-size: 100px; -} - - - -.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, -.markdown pre { - 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 pre { - border-radius: 6px; - background: #f7f7f7; - padding: 20px; -} - -.markdown pre code { - border: none; - background: #f7f7f7; - margin: 0; -} - -.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; - font-style: italic; -} - -.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; -} - -pre{ - background: #fff; -} - - - - - diff --git a/ms-web/src/assets/icon/demo_fontclass.html b/ms-web/src/assets/icon/demo_fontclass.html deleted file mode 100644 index 6c62fc5..0000000 --- a/ms-web/src/assets/icon/demo_fontclass.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - IconFont - - - - -
-

IconFont 图标

-
    - -
  • - -
    Password
    -
    .el-icon-ms-password
    -
  • - -
  • - -
    username
    -
    .el-icon-ms-username
    -
  • - -
- -

font-class引用

-
- -

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

-

与unicode使用方式相比,具有如下特点:

-
    -
  • 兼容性良好,支持ie8+,及所有现代浏览器。
  • -
  • 相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。
  • -
  • 因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。
  • -
  • 不过因为本质上还是使用的字体,所以多色图标还是不支持的。
  • -
-

使用步骤如下:

-

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

- - -
<link rel="stylesheet" type="text/css" href="./iconfont.css">
-

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

-
<i class="iconfont el-icon-ms-xxx"></i>
-
-

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

-
-
- - diff --git a/ms-web/src/assets/icon/demo_symbol.html b/ms-web/src/assets/icon/demo_symbol.html deleted file mode 100644 index 2400e0b..0000000 --- a/ms-web/src/assets/icon/demo_symbol.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - IconFont - - - - - - -
-

IconFont 图标

-
    - -
  • - -
    Password
    -
    #el-icon-ms-password
    -
  • - -
  • - -
    username
    -
    #el-icon-ms-username
    -
  • - -
- - -

symbol引用

-
- -

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

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

使用步骤如下:

-

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

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

第二步:加入通用css代码(引入一次就行):

-
<style type="text/css">
-.icon {
-   width: 1em; height: 1em;
-   vertical-align: -0.15em;
-   fill: currentColor;
-   overflow: hidden;
-}
-</style>
-

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

-
<svg class="icon" aria-hidden="true">
-  <use xlink:href="#el-icon-ms-xxx"></use>
-</svg>
-        
-
- - diff --git a/ms-web/src/assets/icon/demo_unicode.html b/ms-web/src/assets/icon/demo_unicode.html deleted file mode 100644 index eb7a7d0..0000000 --- a/ms-web/src/assets/icon/demo_unicode.html +++ /dev/null @@ -1,90 +0,0 @@ - - - - - - IconFont - - - - - -
-

IconFont 图标

-
    - -
  • - -
    Password
    -
    &#xe663;
    -
  • - -
  • - -
    username
    -
    &#xe653;
    -
  • - -
-

unicode引用

-
- -

unicode是字体在网页端最原始的应用方式,特点是:

-
    -
  • 兼容性最好,支持ie6+,及所有现代浏览器。
  • -
  • 支持按字体的方式去动态调整图标大小,颜色等等。
  • -
  • 但是因为是字体,所以不支持多色。只能使用平台里单色的图标,就算项目里有多色图标也会自动去色。
  • -
-
-

注意:新版iconfont支持多色图标,这些多色图标在unicode模式下将不能使用,如果有需求建议使用symbol的引用方式

-
-

unicode使用步骤如下:

-

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

-
@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.eot');
-  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
-  url('iconfont.woff') format('woff'),
-  url('iconfont.ttf') format('truetype'),
-  url('iconfont.svg#iconfont') format('svg');
-}
-
-

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

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

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

-
<i class="iconfont">&#x33;</i>
- -
-

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

-
-
- - - - diff --git a/ms-web/src/assets/icon/iconfont.css b/ms-web/src/assets/icon/iconfont.css index cc6ed00..9a29e8d 100644 --- a/ms-web/src/assets/icon/iconfont.css +++ b/ms-web/src/assets/icon/iconfont.css @@ -1,21 +1,20 @@ -@font-face {font-family: "iconfont"; - src: url('iconfont.eot?t=1513750823590'); /* IE9*/ - src: url('iconfont.eot?t=1513750823590#iefix') format('embedded-opentype'), /* IE6-IE8 */ - url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), - url('iconfont.ttf?t=1513750823590') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ - url('iconfont.svg?t=1513750823590#iconfont') format('svg'); /* iOS 4.1- */ +@font-face {font-family: "fontFamily"; + src: url('iconfont.eot?t=1514099756988'); /* IE9*/ + src: url('iconfont.eot?t=1514099756988#iefix') format('embedded-opentype'), /* IE6-IE8 */ + url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAfEAAsAAAAACvQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW70g7Y21hcAAAAYAAAABvAAABsv8A02BnbHlmAAAB8AAAA7kAAAR8372na2hlYWQAAAWsAAAALgAAADYP6i5WaGhlYQAABdwAAAAcAAAAJAfeA4ZobXR4AAAF+AAAABMAAAAUE+kAAGxvY2EAAAYMAAAADAAAAAwCkAPebWF4cAAABhgAAAAfAAAAIAEVANduYW1lAAAGOAAAAVMAAAKFV8s9R3Bvc3QAAAeMAAAANwAAAEgrP401eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s04gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDzzYW7438AQw9zE0AgUZgTJAQAqGAy+eJzFkdENgCAMRF9BjRpncAKHcABH8csvJ+4aelA/dAKveeR6KYEA0AJZLKIBOzCKdqVW88xY84ZV/UhPUp0++OzbdSl7+5BpLqr4rL1JpuM32X9HfzXVdX06vTjng67oQ1B+xOegzPgWkG5SJxUoAHicJZNLj9tUFMfvOde+13b8iB0/8nYeE3sy7SSTxLGrDpkU1ExbKH3MgxHlISE0qKgK2woB6oBUCQkWCHXHCoSExIJPUBaUBRICCbFlVcEXgBWbBq6nto+uz7HP7+/jew6RCfnvMX1Iy6RE1smIXCQ3CAF2BjomNqAdJwM8A15b9gLXpHE3bvNuZ0BnEHSY64/TJAoYZxaY0IRJe5zGA4xhmuzgNoz9BkClVt13enWHfgZaOW7eXz2PX4EXduvWzubqytm5O26VlLu641Qc51OFybKCKFkmLANflVWNrb6Wrar3MOxjCHolrl592WjVnDc+Tt5p9AIV4OQESrWW+c3crtrier/ql5wKLxpKuWp011y4+1ehXNIb0Z9EHJKo9R79m35E9sn35EfyMyHyqBPzAcRRfqZzSNIsnWMUi9AAsjSL0mxHrHNIfa8JIW1C4DPuBz43gTPuhigiTfBMyP8BZ/HWxJ+Mxtkoz8oxQ3hq00TQcphATYU7hx0RT4TqEE7lRHZXmCAFnpuj/UAoToVU4OdsC1iuaYLnBxMhSjt8kk6ycZqJl7HmFCt7X45fv8ApK2TQbFH6SKmZ3KCMqpJkMan+ZqHV7Kg2WApV/dFY2tR0Cc0imoZVoeyT6JppDUFjqPzy7dpzULTD7oMffFgzCld6n0syVSiVqiZQpUDFl2ggyf469Dcp1oSkq1iRA+yoTCVblWSJIleo0WSSBkx5hFK1il3v/B6Mvrj+riyJXJ1rCEw/AcCG4TUoZ9cPxa2N+FprfVP2HPesKdOjPXn3ErUKOtU1XpSRFex1vn2/QeXqQNmw466s2i/a/YJ5e920JGAznW4AFqaaf2QrkX0TGQtUS+NyJ5aoEhpoq6grqs3unQPsWICmRKljMkuFZ7YBr75kFTgCd1WqqyCpw76qbUgGfZWiHtDprFB2zDrAh4gql0GDvKeY6Klf6QN6ntRJRDJyjjxLbooJ6s5AjM7pEOXbaosda4uesAfQE4vwxHDBSDxpi2awk1QMjx/I3acz1WGBy/hoAAKSinbyPVqp9C7fOn7lUlROFoiLBHvJAmDx5F9c7u0vcfUB+tCrP/mjHkV17NV7sPouDYfN5jA8tHXdzg3+mdnjW5d7AjS+JhCr3yY5agJbyeLG3hIFybywOhS5ggRbOemFchgOw/B3vQhQ1N8zikVD1HxaOB5jj9jCCWIe8CDjkzjI4izmGfxUOmi9/Vbj0J25B43j2+FBCdfuLIb9aLS7XO6Oov5wcUcQ/gcHLJhAAAAAeJxjYGRgYABiHU3ZKfH8Nl8ZuFkYQOBaaqkOgv5fz8LA3ATkcjAwgUQB6wcIgAAAeJxjYGRgYG7438AQw8IAAkCSkQEVsAIARwsCbnicY2FgYGB+ycDAwoDAAA6bAP0AAAAAAAB2AaACGgI+eJxjYGRgYGBlOM3AxgACTEDMBYQMDP/BfAYAHS4B7QB4nG2STW7CMBCFn8tP1SB10dJ2Wa9YFCn8LNmihmUlFuxDcCAoiSPHINFdD9Dz9BA9QTe9Qe/QRzBCQiTy6Js3b8a2EgB3+IXA4XngOrCAx+zAV7jGs+Ma9Y7jOrnvuIEWRo6b1F8de+jizXEL93jnBFG/YfaCT8cCbXw5vsItvh3XqP84rpP/HDfwKITjJtriybGHmeg6bqEjPryxUaFVCznfySTSeaxz6+1DEGZJupuq5SYNzUk40UyZMtG5HPj9kzhRuTLHeeV2ObQ2lrHRmQzoUWmqZWH0WkXWX1lbjHq92Ol+pDMebwwDhRCWcQGJOXaMCSJo5IiraOk7UkBvxnpK35Q9S2zIIadcclzSZuwyKJntaxID+Pxkl5wTOvPKfX6+ElvuPKRq2Sm5DPszUuDmKE5IyRJFVVtTiaj7WFVdBX+NHt/4zO9XN8/+AcIWdF0AeJxjYGKAAC4G7ICVkYmRmZGFkZWRjYGxgqO0OLUoLzE3laMgsbi4PL8ohSUvNTWFgQEAiWIJJwA=') format('woff'), + url('iconfont.ttf?t=1514099756988') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('iconfont.svg?t=1514099756988#fontFamily') format('svg'); /* iOS 4.1- */ } -.iconfont { - font-family:"iconfont" !important; +.fontFamily { + font-family:"fontFamily" !important; font-size:16px; font-style:normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } - -[class^="el-icon-ms"], [class*=" el-icon-ms"] { +[class^="ms-web"], [class*=" ms-web"] { font-family:"fontFamily" !important; /* 以下内容参照第三方图标库本身的规则 */ font-size: 18px; @@ -23,8 +22,9 @@ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +.ms-web-username:before { content: "\e64c"; } -.el-icon-ms-password:before { content: "\e663"; } +.ms-web-password:before { content: "\e609"; } -.el-icon-ms-username:before { content: "\e653"; } +.ms-web-need:before { content: "\e61e"; } diff --git a/ms-web/src/assets/icon/iconfont.eot b/ms-web/src/assets/icon/iconfont.eot index 7ab87f9..360c632 100644 Binary files a/ms-web/src/assets/icon/iconfont.eot and b/ms-web/src/assets/icon/iconfont.eot differ diff --git a/ms-web/src/assets/icon/iconfont.js b/ms-web/src/assets/icon/iconfont.js index 0fb1b53..d6d16bd 100644 --- a/ms-web/src/assets/icon/iconfont.js +++ b/ms-web/src/assets/icon/iconfont.js @@ -1 +1 @@ -(function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) \ No newline at end of file +(function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) \ No newline at end of file diff --git a/ms-web/src/assets/icon/iconfont.svg b/ms-web/src/assets/icon/iconfont.svg index fe57cf7..07b63bc 100644 --- a/ms-web/src/assets/icon/iconfont.svg +++ b/ms-web/src/assets/icon/iconfont.svg @@ -9,9 +9,9 @@ Created by iconfont - + + - + + + + diff --git a/ms-web/src/assets/icon/iconfont.ttf b/ms-web/src/assets/icon/iconfont.ttf index c323bfa..5dbbb82 100644 Binary files a/ms-web/src/assets/icon/iconfont.ttf and b/ms-web/src/assets/icon/iconfont.ttf differ diff --git a/ms-web/src/assets/icon/iconfont.woff b/ms-web/src/assets/icon/iconfont.woff index e7eccf6..9f3d68b 100644 Binary files a/ms-web/src/assets/icon/iconfont.woff and b/ms-web/src/assets/icon/iconfont.woff differ diff --git a/ms-web/src/components/Register.vue b/ms-web/src/components/Register.vue index 9904db7..2291607 100644 --- a/ms-web/src/components/Register.vue +++ b/ms-web/src/components/Register.vue @@ -1,25 +1,111 @@ diff --git a/ms-web/src/components/SignIn.vue b/ms-web/src/components/SignIn.vue index 7fb67c7..8650097 100644 --- a/ms-web/src/components/SignIn.vue +++ b/ms-web/src/components/SignIn.vue @@ -6,12 +6,12 @@ - + - + @@ -30,7 +30,7 @@