登录页面开发完 字体上传完

.idea/encodings.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with NO BOM" />
+</project>
\ No newline at end of file

.idea/misc.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="JavaScriptSettings">
+    <option name="languageLevel" value="ES6" />
+  </component>
+</project>
\ No newline at end of file

.idea/modules.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/pcb.iml" filepath="$PROJECT_DIR$/.idea/pcb.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file

.idea/pcb.iml

+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file

.idea/vcs.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file

.idea/watcherTasks.xml

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectTasksOptions">
+    <TaskOptions isEnabled="true">
+      <option name="arguments" value="$FileName$ $FileNameWithoutExtension$.css --source-map" />
+      <option name="checkSyntaxErrors" value="true" />
+      <option name="description" />
+      <option name="exitCodeBehavior" value="ERROR" />
+      <option name="fileExtension" value="less" />
+      <option name="immediateSync" value="true" />
+      <option name="name" value="Less" />
+      <option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
+      <option name="outputFilters">
+        <array>
+          <FilterInfo>
+            <option name="description" value="" />
+            <option name="name" value="" />
+            <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
+          </FilterInfo>
+        </array>
+      </option>
+      <option name="outputFromStdout" value="false" />
+      <option name="program" value="lessc" />
+      <option name="runOnExternalChanges" value="true" />
+      <option name="scopeName" value="Project Files" />
+      <option name="trackOnlyRoot" value="true" />
+      <option name="workingDir" value="$FileDir$" />
+      <envs />
+    </TaskOptions>
+  </component>
+</project>
\ No newline at end of file

css/common/font/demo.css

+/* 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;
+}

css/common/font/iconfont.json

+{
+  "id": "1617142",
+  "name": "pcb",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon",
+  "description": "第三方PCB项目",
+  "glyphs": [
+    {
+      "icon_id": "12869531",
+      "name": "email",
+      "font_class": "email",
+      "unicode": "e602",
+      "unicode_decimal": 58882
+    },
+    {
+      "icon_id": "12869533",
+      "name": "password",
+      "font_class": "password",
+      "unicode": "e603",
+      "unicode_decimal": 58883
+    },
+    {
+      "icon_id": "12869534",
+      "name": "imgcode",
+      "font_class": "imgcode",
+      "unicode": "e604",
+      "unicode_decimal": 58884
+    },
+    {
+      "icon_id": "12869866",
+      "name": "address",
+      "font_class": "address",
+      "unicode": "e605",
+      "unicode_decimal": 58885
+    },
+    {
+      "icon_id": "12869871",
+      "name": "baoguo",
+      "font_class": "baoguo",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
+    {
+      "icon_id": "12869874",
+      "name": "bianji",
+      "font_class": "bianji",
+      "unicode": "e607",
+      "unicode_decimal": 58887
+    },
+    {
+      "icon_id": "12869877",
+      "name": "chilun",
+      "font_class": "chilun",
+      "unicode": "e608",
+      "unicode_decimal": 58888
+    },
+    {
+      "icon_id": "12869905",
+      "name": "dianluban",
+      "font_class": "dianluban",
+      "unicode": "e609",
+      "unicode_decimal": 58889
+    },
+    {
+      "icon_id": "12869914",
+      "name": "dingdan",
+      "font_class": "dingdan",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
+    {
+      "icon_id": "12869956",
+      "name": "dingdanchenggong",
+      "font_class": "dingdanchenggong",
+      "unicode": "e60b",
+      "unicode_decimal": 58891
+    },
+    {
+      "icon_id": "12869968",
+      "name": "feiji",
+      "font_class": "feiji",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "12869975",
+      "name": "file",
+      "font_class": "file",
+      "unicode": "e60d",
+      "unicode_decimal": 58893
+    },
+    {
+      "icon_id": "12869977",
+      "name": "fukuan",
+      "font_class": "fukuan",
+      "unicode": "e60e",
+      "unicode_decimal": 58894
+    },
+    {
+      "icon_id": "12869984",
+      "name": "gouwuche",
+      "font_class": "gouwuche",
+      "unicode": "e60f",
+      "unicode_decimal": 58895
+    },
+    {
+      "icon_id": "12869985",
+      "name": "jiantou",
+      "font_class": "jiantou",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "12869987",
+      "name": "jisuanqi",
+      "font_class": "jisuanqi",
+      "unicode": "e611",
+      "unicode_decimal": 58897
+    },
+    {
+      "icon_id": "12869992",
+      "name": "jixieshou",
+      "font_class": "jixieshou",
+      "unicode": "e612",
+      "unicode_decimal": 58898
+    },
+    {
+      "icon_id": "12869994",
+      "name": "kaiguan",
+      "font_class": "kaiguan",
+      "unicode": "e613",
+      "unicode_decimal": 58899
+    },
+    {
+      "icon_id": "12870006",
+      "name": "laba",
+      "font_class": "laba",
+      "unicode": "e614",
+      "unicode_decimal": 58900
+    },
+    {
+      "icon_id": "12870008",
+      "name": "pcbban",
+      "font_class": "pcbban",
+      "unicode": "e615",
+      "unicode_decimal": 58901
+    },
+    {
+      "icon_id": "12870013",
+      "name": "phone",
+      "font_class": "phone",
+      "unicode": "e616",
+      "unicode_decimal": 58902
+    },
+    {
+      "icon_id": "12870014",
+      "name": "shenhe",
+      "font_class": "shenhe",
+      "unicode": "e617",
+      "unicode_decimal": 58903
+    },
+    {
+      "icon_id": "12870020",
+      "name": "shouji",
+      "font_class": "shouji",
+      "unicode": "e618",
+      "unicode_decimal": 58904
+    },
+    {
+      "icon_id": "12870021",
+      "name": "shoujibeifen",
+      "font_class": "shoujibeifen",
+      "unicode": "e619",
+      "unicode_decimal": 58905
+    },
+    {
+      "icon_id": "12870025",
+      "name": "shousuo",
+      "font_class": "shousuo",
+      "unicode": "e61a",
+      "unicode_decimal": 58906
+    },
+    {
+      "icon_id": "12870026",
+      "name": "success",
+      "font_class": "success",
+      "unicode": "e61b",
+      "unicode_decimal": 58907
+    },
+    {
+      "icon_id": "12870029",
+      "name": "tianjia",
+      "font_class": "tianjia",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "12870032",
+      "name": "touxiang",
+      "font_class": "touxiang",
+      "unicode": "e61d",
+      "unicode_decimal": 58909
+    },
+    {
+      "icon_id": "12870034",
+      "name": "xiaoxi",
+      "font_class": "xiaoxi",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "12870036",
+      "name": "zhizhao",
+      "font_class": "zhizhao",
+      "unicode": "e61f",
+      "unicode_decimal": 58911
+    },
+    {
+      "icon_id": "12870092",
+      "name": "fuwu",
+      "font_class": "fuwu",
+      "unicode": "e620",
+      "unicode_decimal": 58912
+    },
+    {
+      "icon_id": "12870095",
+      "name": "shijian",
+      "font_class": "shijian",
+      "unicode": "e621",
+      "unicode_decimal": 58913
+    },
+    {
+      "icon_id": "12870096",
+      "name": "zhuanshi",
+      "font_class": "zhuanshi",
+      "unicode": "e622",
+      "unicode_decimal": 58914
+    }
+  ]
+}

css/login/login.css

+@import '../common/font/iconfont.css';
+html {
+  -webkit-text-size-adjust: 100%;
+  -ms-text-size-adjust: 100%;
+}
+html * {
+  outline: 0;
+  -webkit-text-size-adjust: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+html,
+body {
+  font-family: sans-serif;
+}
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+menu,
+nav,
+section {
+  margin: 0;
+  padding: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-size: 100%;
+  border: none;
+}
+input[type=button],
+input[type=submit],
+input[type=file],
+button {
+  cursor: pointer;
+  -webkit-appearance: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+ol,
+ul,
+dl {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: 100%;
+  font-weight: 500;
+}
+a {
+  text-decoration: none;
+}
+img {
+  border: none;
+}
+.clr {
+  *zoom: 1;
+  clear: both;
+}
+.clr:after {
+  content: ".";
+  clear: both;
+  height: 0;
+  visibility: hidden;
+  display: block;
+}
+.fl {
+  float: left;
+  _display: inline;
+}
+.fr {
+  float: right;
+  _display: inline;
+}
+.va-t {
+  vertical-align: top;
+}
+.va-m {
+  vertical-align: middle;
+}
+.va-b {
+  vertical-align: bottom;
+}
+.i-hide {
+  display: none;
+}
+.i-show {
+  display: block;
+}
+.lineBlock {
+  display: inline-block;
+  *display: inline;
+  zoom: 1;
+  letter-spacing: normal;
+  word-spacing: normal;
+}
+.lbBox {
+  font-size: 0 !important;
+  *word-spacing: -1px !important;
+}
+label,
+dd,
+dd,
+dt {
+  font-weight: normal;
+}
+.boxsiz {
+  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+}
+a:hover,
+a:focus {
+  text-decoration: none;
+}
+html,
+body {
+  width: 100%;
+}
+body {
+  overflow: hidden;
+}
+.login-pcb {
+  height: 560px;
+  background: url(../../images/login/login-bg.jpg) no-repeat;
+  background-size: 1920px 600px;
+  background-position: center;
+  padding-top: 40px;
+}
+.login-pcb .login-box {
+  width: 420px;
+  padding-top: 28px;
+  margin: 0 auto;
+  background: #fff;
+  box-shadow: 0px 6px 10px 0px rgba(0, 129, 210, 0.2);
+  border-radius: 2px;
+}
+.login-pcb .login-box h3 {
+  height: 31px;
+  line-height: 31px;
+  width: 89px;
+  font-size: 24px;
+  font-family: Arial-BoldMT, Arial;
+  font-weight: normal;
+  color: #2B2F33;
+  line-height: 28px;
+  padding-left: 40px;
+  border-left: 6px solid #E89721;
+}
+.login-pcb .login-box .lg-con {
+  padding: 40px;
+  padding-top: 30px;
+}
+.login-pcb .login-box .lg-con .form-group {
+  margin-bottom: 15px;
+  position: relative;
+}
+.login-pcb .login-box .lg-con .form-group input {
+  width: 288px;
+  height: 40px;
+  padding-left: 40px;
+  padding-right: 10px;
+  border: 1px solid #DAE0E6;
+  font-size: 14px;
+  font-family: ArialMT;
+  color: #2B2F33;
+  line-height: 40px;
+  transition: all 0.8s;
+}
+.login-pcb .login-box .lg-con .form-group input:focus {
+  border-color: #0081D2;
+}
+.login-pcb .login-box .lg-con .form-group i {
+  position: absolute;
+  left: 12px;
+  top: 13px;
+  font-size: 16px;
+  color: #828E99;
+}
+.login-pcb .login-box .lg-con .form-group .tips-x {
+  font-size: 13px;
+  font-family: ArialMT;
+  color: #828E99;
+  display: none;
+  margin-top: 5px;
+}
+.login-pcb .login-box .lg-con .form-group.img-code-group img {
+  width: 80px;
+  height: 38px;
+  position: absolute;
+  right: 5px;
+  top: 2px;
+}
+.login-pcb .login-box .lg-con .form-group.img-code-group input {
+  width: 198px;
+  padding-right: 100px;
+}
+.login-pcb .login-box .lg-con .form-group.error input {
+  color: #FF0D0D;
+  border-color: #FF0D0D;
+}
+.login-pcb .login-box .lg-con .form-group.error i {
+  color: #FF0D0D;
+}
+.login-pcb .login-box .lg-con .form-group.error .tips-x {
+  color: #FF0D0D;
+  display: block;
+}
+.login-pcb .login-box .lg-con .form-group.warn .tips-x {
+  color: #828E99;
+  display: block;
+}
+.login-pcb .login-box .lg-con .go-login {
+  width: 340px;
+  height: 40px;
+  background: #0081D2;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 14px;
+  font-family: Arial-BoldMT, Arial;
+  font-weight: normal;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+}
+.login-pcb .login-box .lg-con .go-login:hover {
+  background: #189EF2;
+}
+.login-pcb .login-box .lg-con .go-forget {
+  font-size: 13px;
+  font-family: ArialMT;
+  padding-top: 25px;
+}
+.login-pcb .login-box .lg-con .go-forget .fl {
+  color: #575E66;
+  cursor: pointer;
+}
+.login-pcb .login-box .lg-con .go-forget .fl span {
+  display: block;
+  width: 12px;
+  height: 12px;
+  padding: 3px;
+  border-radius: 18px;
+  border: 1px solid #C2C7CC;
+  position: relative;
+  top: -2px;
+}
+.login-pcb .login-box .lg-con .go-forget .fl strong {
+  margin-left: 10px;
+  font-weight: normal;
+}
+.login-pcb .login-box .lg-con .go-forget .fl.act span {
+  border-color: #0081D2;
+}
+.login-pcb .login-box .lg-con .go-forget .fl.act i {
+  display: block;
+  width: 12px;
+  height: 12px;
+  background: #0081D2;
+  border-radius: 12px;
+}
+.login-pcb .login-box .lg-con .go-forget .fr {
+  color: #0081D2;
+}
+.login-pcb .login-box .lg-con .go-reg {
+  margin-top: 30px;
+  display: block;
+  line-height: 40px;
+  text-align: center;
+  width: 340px;
+  height: 40px;
+  background: #F0F4F7;
+  border-radius: 2px;
+  font-size: 13px;
+  font-family: ArialMT;
+  color: #828E99;
+  border: 1px solid #F0F4F7;
+}
+.login-pcb .login-box .lg-con .go-reg strong {
+  font-size: 13px;
+  font-family: Arial-BoldMT, Arial;
+  color: #2B2F33;
+  margin-left: 10px;
+}
+.login-pcb .login-box .lg-con .go-reg:hover {
+  background: #fff;
+  border: 1px solid #F0F4F7;
+}
+.login-pcb .login-box .lg-con .go-reg:hover strong {
+  color: #0081D2;
+}
+/*# sourceMappingURL=login.css.map */
\ No newline at end of file

css/login/login.css.map

+{"version":3,"sources":["login.less","D:/lxWork/pcb/css/common/base.less"],"names":[],"mappings":"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","file":"login.css"}
\ No newline at end of file

css/login/login.less

+@import '../common/base.less';
+@import '../common/font/iconfont.css';
+.login-pcb{
+  height:560px;background: url(../../images/login/login-bg.jpg) no-repeat;
+  background-size: 1920px 600px;
+  background-position: center;
+  padding-top: 40px;
+  .login-box{
+    width:420px;
+    padding-top: 28px;
+    margin:0 auto;
+    background:#fff;
+    box-shadow:0px 6px 10px 0px rgba(0,129,210,0.2);
+    border-radius:2px;
+    h3{
+      height:31px;line-height: 31px;
+      width:89px;
+      font-size:24px;
+      font-family:Arial-BoldMT,Arial;
+      font-weight:normal;
+      color:#2B2F33;
+      line-height:28px;
+      padding-left: 40px;
+      border-left:6px solid #E89721;
+    }
+    .lg-con{
+      padding:40px;padding-top: 30px;
+      .form-group{
+        margin-bottom: 15px;
+        position: relative;
+        input{
+          width:288px;
+          height:40px;
+          padding-left:40px;
+          padding-right: 10px;
+          border:1px solid #DAE0E6;
+          font-size:14px;
+          font-family:ArialMT;
+          color:#2B2F33;
+          line-height: 40px;
+          transition: all 0.8s;
+          &:focus{
+            border-color:#0081D2;
+          }
+        }
+        i{position: absolute;
+          left:12px;top:13px;
+          font-size: 16px;
+          color:#828E99;
+        }
+        .tips-x{font-size:13px;
+          font-family:ArialMT;
+          color:#828E99;
+          display: none;margin-top: 5px;}
+        &.img-code-group{
+          img{width:80px;height:38px;position: absolute;right:5px;top:2px;}
+          input{width:198px;padding-right: 100px;}
+        }
+        &.error{
+          input{color:#FF0D0D;border-color:#FF0D0D;}
+          i{color:#FF0D0D;}
+          .tips-x{color:#FF0D0D;display:block;}
+        }
+        &.warn{
+          .tips-x{color:#828E99;display:block;}
+        }
+      }
+      .go-login{
+        width:340px;
+        height:40px;
+        background:#0081D2;
+        border-radius:2px;
+        color:#fff;
+        font-size:14px;
+        font-family:Arial-BoldMT,Arial;
+        font-weight:normal;
+        line-height: 40px;
+        text-align: center;
+        cursor: pointer;
+        &:hover{background: #189EF2;}
+      }
+      .go-forget{
+        font-size:13px;
+        font-family:ArialMT;
+        padding-top:25px;
+        .fl{
+          color:#575E66;
+          cursor: pointer;
+          span{
+            display: block;
+            width:12px;
+            height:12px;
+            padding:3px;
+            border-radius: 18px;
+            border:1px solid #C2C7CC;
+            position: relative;
+            top:-2px;
+          }
+          strong{
+            margin-left: 10px;
+            font-weight: normal;
+          }
+          &.act{
+            span{
+              border-color:#0081D2;
+            }
+            i{
+              display: block;
+              width:12px;
+              height:12px;
+              background:#0081D2;
+              border-radius: 12px;
+            }
+          }
+          }
+        .fr{
+          color:#0081D2;
+        }
+      }
+      .go-reg{
+        margin-top: 30px;
+        display: block;
+        line-height: 40px;text-align: center;
+        width:340px;
+        height:40px;
+        background:#F0F4F7;
+        border-radius:2px;
+        font-size:13px;
+        font-family:ArialMT;
+        color:#828E99;
+        border:1px solid #F0F4F7;
+        strong{
+          font-size:13px;
+          font-family:Arial-BoldMT,Arial;
+          color:#2B2F33;
+          margin-left: 10px;
+        }
+        &:hover{
+          background: #fff;
+          border:1px solid #F0F4F7;
+          strong{color:#0081D2;}
+        }
+      }
+    }
+  }
+}
\ No newline at end of file

login.html

+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>Instant PCB Login</title>
+    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
+    <meta name="keywords" content="pcb quote, pcb quote online, instant pcb quote, pcb calculator, pcb cost calculator"/>
+    <meta name="description" content="The instant online pcb quote calculator helps you estimate the pricing of your standard printed circuit boards manufacturing. Quote Now!"/>
+    <meta http-equiv="Pragma" content="public">
+    <meta http-equiv="content-type" content="text/html;charset=utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="google-site-verification" content="XNE5qH9_Odx-8pk7VkeHWk62joNlbqzlBa4DzkhC1U4"/>
+    <link href="./css/login/login.css" rel="stylesheet"/>
+</head>
+<body>
+<div class="login-pcb">
+    <div class="login-box">
+        <h3>Sign In</h3>
+        <div class="lg-con">
+            <!--提示样式  错误 error   提示warn 否则无-->
+            <div class="form-group warn">
+                <i class="iconfont iconemail"></i>
+                <input type="text" placeholder="Valid Email address" />
+                <div class="tips-x">* Please enter a correct email addresss.</div>
+            </div>
+            <div class="form-group error">
+                <i class="iconfont iconpassword"></i>
+                <input type="password" placeholder="Password" />
+                <div class="tips-x">* Wrong password, please re-enter.</div>
+            </div>
+            <div class="form-group img-code-group ">
+                <i class="iconfont iconimgcode"></i>
+                <input type="text" placeholder="Verification code" />
+                <img src="./images/login/login-bg.jpg" alt="" />
+                <div class="tips-x">* Wrong password, please re-enter.</div>
+            </div>
+            <div class="go-login">Sign in</div>
+            <div class="go-forget clr">
+                <div class="fl clr act">
+                    <span class="fl">
+                        <i></i>
+                    </span>
+                    <strong class="fl">Keep me signed in</strong>
+                </div>
+                <a class="fr" href="/forget.html">Forget Password?</a>
+            </div>
+            <a class="go-reg" href="./reg.html">New to pcbbuy?<strong>Register</strong></a>
+        </div>
+
+    </div>
+</div>
+<script src="./js/jquery.js" type="text/javascript"></script>
+<script>
+    $(".go-forget .fl.clr").click(function(){
+        $(this).toggleClass('act');
+    })
+</script>
+</body>
+</html>