注册页面编写基本完毕，添加icon

ms-web/src/App.vue

@@ -19,4 +19,10 @@
     margin: 0;
     padding: 0;
   }
+  * {
+    margin: 0;
+    padding: 0;
+    font-size: 14px;
+  }
 </style>
+

ms-web/src/assets/icon/demo.css

@@ -1,370 +0,0 @@
-*{margin: 0;padding: 0;list-style: none;}
-/*
-KISSY CSS Reset
-理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
-2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
-3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
-特色：1. 适应中文；2. 基于最新主流浏览器。
-维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
- */
-
-/** 清除内外边距 **/
-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;
-}
-
-
-
-
-

ms-web/src/assets/icon/demo_fontclass.html

@@ -1,52 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8"/>
-    <title>IconFont</title>
-    <link rel="stylesheet" href="demo.css">
-    <link rel="stylesheet" href="iconfont.css">
-</head>
-<body>
-    <div class="main markdown">
-        <h1>IconFont 图标</h1>
-        <ul class="icon_lists clear">
-            
-                <li>
-                <i class="icon iconfont el-icon-ms-password"></i>
-                    <div class="name">Password</div>
-                    <div class="fontclass">.el-icon-ms-password</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont el-icon-ms-username"></i>
-                    <div class="name">username</div>
-                    <div class="fontclass">.el-icon-ms-username</div>
-                </li>
-            
-        </ul>
-
-        <h2 id="font-class-">font-class引用</h2>
-        <hr>
-
-        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
-        <p>与unicode使用方式相比，具有如下特点：</p>
-        <ul>
-        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
-        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
-        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
-        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
-
-
-        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
-        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
-        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">el-icon-ms-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
-        <blockquote>
-        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
-        </blockquote>
-    </div>
-</body>
-</html>

ms-web/src/assets/icon/demo_symbol.html

@@ -1,79 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8"/>
-    <title>IconFont</title>
-    <link rel="stylesheet" href="demo.css">
-    <script src="iconfont.js"></script>
-
-    <style type="text/css">
-        .icon {
-          /* 通过设置 font-size 来改变图标大小 */
-          width: 1em; height: 1em;
-          /* 图标和文字相邻时，垂直对齐 */
-          vertical-align: -0.15em;
-          /* 通过设置 color 来改变 SVG 的颜色/fill */
-          fill: currentColor;
-          /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-             normalize.css 中也包含这行 */
-          overflow: hidden;
-        }
-
-    </style>
-</head>
-<body>
-    <div class="main markdown">
-        <h1>IconFont 图标</h1>
-        <ul class="icon_lists clear">
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#el-icon-ms-password"></use>
-                    </svg>
-                    <div class="name">Password</div>
-                    <div class="fontclass">#el-icon-ms-password</div>
-                </li>
-            
-                <li>
-                    <svg class="icon" aria-hidden="true">
-                        <use xlink:href="#el-icon-ms-username"></use>
-                    </svg>
-                    <div class="name">username</div>
-                    <div class="fontclass">#el-icon-ms-username</div>
-                </li>
-            
-        </ul>
-
-
-        <h2 id="symbol-">symbol引用</h2>
-        <hr>
-
-        <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
-        这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
-        <ul>
-          <li>支持多色图标了，不再受单色限制。</li>
-          <li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
-          <li>兼容性较差，支持 ie9+,及现代浏览器。</li>
-          <li>浏览器渲染svg的性能一般，还不如png。</li>
-        </ul>
-        <p>使用步骤如下：</p>
-        <h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
-        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;</span></code></pre>
-        <h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
-        <pre><code class="lang-js hljs javascript">&lt;style type=<span class="hljs-string">"text/css"</span>&gt;
-.icon {
-   width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
-   vertical-align: <span class="hljs-number">-0.15</span>em;
-   fill: currentColor;
-   overflow: hidden;
-}
-&lt;<span class="hljs-regexp">/style&gt;</span></code></pre>
-        <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
-        <pre><code class="lang-js hljs javascript">&lt;svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>&gt;<span class="xml"><span class="hljs-tag">
-  &lt;<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#el-icon-ms-xxx"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">use</span>&gt;</span>
-</span>&lt;<span class="hljs-regexp">/svg&gt;
-        </span></code></pre>
-    </div>
-</body>
-</html>

ms-web/src/assets/icon/demo_unicode.html

@@ -1,90 +0,0 @@
-
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8"/>
-    <title>IconFont</title>
-    <link rel="stylesheet" href="demo.css">
-
-    <style type="text/css">
-
-        @font-face {font-family: "iconfont";
-          src: url('iconfont.eot'); /* IE9*/
-          src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
-          url('iconfont.woff') format('woff'), /* chrome, firefox */
-          url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-          url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
-        }
-
-        .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;
-        }
-
-    </style>
-</head>
-<body>
-    <div class="main markdown">
-        <h1>IconFont 图标</h1>
-        <ul class="icon_lists clear">
-            
-                <li>
-                <i class="icon iconfont">&#xe663;</i>
-                    <div class="name">Password</div>
-                    <div class="code">&amp;#xe663;</div>
-                </li>
-            
-                <li>
-                <i class="icon iconfont">&#xe653;</i>
-                    <div class="name">username</div>
-                    <div class="code">&amp;#xe653;</div>
-                </li>
-            
-        </ul>
-        <h2 id="unicode-">unicode引用</h2>
-        <hr>
-
-        <p>unicode是字体在网页端最原始的应用方式，特点是：</p>
-        <ul>
-        <li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
-        <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
-        <li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
-        </ul>
-        <blockquote>
-        <p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
-        </blockquote>
-        <p>unicode使用步骤如下：</p>
-        <h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
-        <pre><code class="lang-js hljs javascript">@font-face {
-  font-family: <span class="hljs-string">'iconfont'</span>;
-  src: url(<span class="hljs-string">'iconfont.eot'</span>);
-  src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
-  url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
-  url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
-  url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
-}
-</code></pre>
-        <h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
-        <pre><code class="lang-js hljs javascript">.iconfont{
-  font-family:<span class="hljs-string">"iconfont"</span> !important;
-  font-size:<span class="hljs-number">16</span>px;font-style:normal;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
-  -moz-osx-font-smoothing: grayscale;
-}
-</code></pre>
-        <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
-        <pre><code class="lang-js hljs javascript">&lt;i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>&gt;&amp;#x33;<span class="xml"><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span></span></code></pre>
-
-        <blockquote>
-        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
-        </blockquote>
-    </div>
-
-
-</body>
-</html>

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,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') 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"; }
 

ms-web/src/components/Register.vue

@@ -1,25 +1,111 @@
 <template>
-  <el-container>
-    <el-main>
+  <el-container class="page-container">
+    <el-main class="sign-up-container">
       <el-row type="flex" justify="center">
-        <el-col> <el-input v-model="username"></el-input></el-col>
+        <span class="title">用户注册</span>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="2" class="left-font" >用户名:</el-col>
+        <el-col :lg="4" >
+          <el-input v-model="username" placeholder="用户名" suffixIcon="ms-web-need" 　clearable></el-input>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="2" class="left-font" >密码:</el-col>
+        <el-col :lg="4">
+          <el-input type="password" v-model="password" placeholder="密码"  suffixIcon="ms-web-need" clearable></el-input>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="2" class="left-font" >确认密码:</el-col>
+        <el-col :lg="4">
+          <el-input type="password" v-model="validatePassword" placeholder="确认密码"  suffixIcon="ms-web-need" clearable></el-input>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="2" class="left-font" >真实姓名:</el-col>
+        <el-col :lg="4">
+          <el-input v-model="realname" placeholder="真实姓名" clearable></el-input>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="2" class="left-font" >手机号码:</el-col>
+        <el-col :lg="4">
+          <el-input v-model="phone" placeholder="手机号码" clearable></el-input>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="2" class="left-font" >邮箱:</el-col>
+        <el-col :lg="4">
+          <el-input v-model="email" placeholder="邮箱" 　suffixIcon="ms-web-need"　clearable></el-input>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="2" class="left-font" >性别:</el-col>
+        <el-col :lg="4">
+          <el-input v-model="sex" placeholder="性别" clearable></el-input>
+        </el-col>
+      </el-row>
+      <el-row type="flex" justify="center" class="row-line">
+        <el-col :lg="3">
+          <el-button type="success" size="medium" @click="signUp">提交</el-button>
+        </el-col>
+        <el-col :lg="3">
+          <el-button type="primary" size="medium" @click="reset">重置</el-button>
+        </el-col>
       </el-row>
     </el-main>
   </el-container>
 </template>
 
 <script>
-  let data = {
-    username: ''
+  let signUp = {
+    username: '',
+    password: '',
+    validatePassword: '',
+    realname: '',
+    phone: '',
+    email: '',
+    sex: ''
   }
   export default {
     name: 'Register',
     data () {
-      return data
+      return signUp
+    },
+    methods: {
+      signUp () {
+        this.$http.post('', this.$querystring.stringify(signUp))
+          .then(response => {
+            console.log(response)
+          }, error => {
+            console.log(error)
+          })
+      },
+      reset () {
+        signUp.username = ''
+        signUp.password = ''
+      }
     }
   }
 </script>
 
 <style lang="less" scoped>
-
+  .page-container{
+    color: #909399;
+    background-color: #2c4557;
+    height: 100%;
+    .sign-up-container{
+      padding-top: 5%;
+      .title {
+        font-size: 2rem;
+      }
+      .row-line{
+        margin-top: 10px;
+        .left-font{
+          line-height: 40px;
+        }
+      }
+    }
+  }
 </style>

ms-web/src/components/SignIn.vue

@@ -6,12 +6,12 @@
       </el-row>
       <el-row type="flex" justify="center">
         <el-col :sm="5" :md="7" :lg="5" :xl="4">
-          <el-input v-model="username" placeholder="用户名" size="large" clearable></el-input>
+          <el-input v-model="username" placeholder="用户名" prefixIcon="ms-web-username" size="large" clearable></el-input>
         </el-col>
       </el-row>
       <el-row type="flex" justify="center" class="row-line">
         <el-col :sm="5" :md="7" :lg="5" :xl="4">
-          <el-input v-model="password" placeholder="密码" size="large" clearable type="password"></el-input>
+          <el-input v-model="password" placeholder="密码" prefixIcon="ms-web-password" size="large"  clearable type="password"></el-input>
         </el-col>
       </el-row>
       <el-row type="flex" justify="center" class="row-line">
@@ -30,7 +30,7 @@
   </el-container>
 </template>
 <script>
-  let data = {
+  let signIn = {
     username: '',
     password: '',
     imageCode: '',
@@ -39,12 +39,12 @@
   export default {
     name: 'SignIn',
     data () {
-      return data
+      return signIn
     },
     methods: {
       signIn: function () {
         let that = this
-        that.$http.post('http://fthipw.natappfree.cc:10006/upms/user/login', that.$querystring.stringify(data))
+        that.$http.post('http://fthipw.natappfree.cc:10006/upms/user/login', that.$querystring.stringify(signIn))
           .then(response => {
             console.log(response.data)
           }, error => {
@@ -67,7 +67,7 @@
       padding-top: 15%;
       .title {
         color: #909399;
-        font-size: 30px;
+        font-size: 2rem;
         margin-bottom: 100px;
       }
       .row-line {

ms-web/src/main.js

@@ -10,6 +10,8 @@ import 'element-ui/lib/theme-chalk/index.css'
 import axios from 'axios'
 //  引入vuex进行数据管理
 import Vuex from 'vuex'
+//  引入icon图标
+require('./assets/icon/iconfont.css')
 
 Vue.use(ElementUI)
 Vue.use(Vuex)