diff --git a/src/assets/fonts/demo.css b/src/assets/fonts/demo.css new file mode 100755 index 0000000..3d9cbe7 --- /dev/null +++ b/src/assets/fonts/demo.css @@ -0,0 +1,370 @@ +*{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/src/assets/fonts/demo_fontclass.html b/src/assets/fonts/demo_fontclass.html new file mode 100755 index 0000000..a4cab35 --- /dev/null +++ b/src/assets/fonts/demo_fontclass.html @@ -0,0 +1,100 @@ + + + + + + IconFont + + + + +
+

IconFont 图标

+
    + +
  • + +
    show-password
    +
    .icon-showpassword
    +
    • + +
  • + +
    user
    +
    .icon-user
    +
    • + +
  • + +
    users
    +
    .icon-users
    +
    • + +
  • + +
    password-b
    +
    .icon-3702mima
    +
    • + +
  • + +
    06商品
    +
    .icon-shangpin
    +
    • + +
  • + +
    25单据
    +
    .icon-danju
    +
    • + +
  • + +
    28体积、空间
    +
    .icon-tijikongjian
    +
    • + +
  • + +
    225默认头像
    +
    .icon-morentouxiang
    +
    • + +
  • + +
    406报表
    +
    .icon-baobiao
    +
    • + +
  • + +
    lock_fill
    +
    .icon-lock_fill
    +
    • + +
+ +

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 icon-xxx"></i>
+
+

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

+
+
+ + diff --git a/src/assets/fonts/demo_symbol.html b/src/assets/fonts/demo_symbol.html new file mode 100755 index 0000000..f390e7f --- /dev/null +++ b/src/assets/fonts/demo_symbol.html @@ -0,0 +1,143 @@ + + + + + + IconFont + + + + + + +
+

IconFont 图标

+
    + +
  • + +
    show-password
    +
    #icon-showpassword
    +
    • + +
  • + +
    user
    +
    #icon-user
    +
    • + +
  • + +
    users
    +
    #icon-users
    +
    • + +
  • + +
    password-b
    +
    #icon-3702mima
    +
    • + +
  • + +
    06商品
    +
    #icon-shangpin
    +
    • + +
  • + +
    25单据
    +
    #icon-danju
    +
    • + +
  • + +
    28体积、空间
    +
    #icon-tijikongjian
    +
    • + +
  • + +
    225默认头像
    +
    #icon-morentouxiang
    +
    • + +
  • + +
    406报表
    +
    #icon-baobiao
    +
    • + +
  • + +
    lock_fill
    +
    #icon-lock_fill
    +
    • + +
+ + +

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="#icon-xxx"></use>
+</svg>
+
+
+ + diff --git a/src/assets/fonts/demo_unicode.html b/src/assets/fonts/demo_unicode.html new file mode 100755 index 0000000..f0c634c --- /dev/null +++ b/src/assets/fonts/demo_unicode.html @@ -0,0 +1,138 @@ + + + + + + IconFont + + + + + +
+

IconFont 图标

+
    + +
  • + +
    show-password
    +
    &#xea3f;
    +
    • + +
  • + +
    user
    +
    &#xe89a;
    +
    • + +
  • + +
    users
    +
    &#xe8b5;
    +
    • + +
  • + +
    password-b
    +
    &#xe66c;
    +
    • + +
  • + +
    06商品
    +
    &#xe888;
    +
    • + +
  • + +
    25单据
    +
    &#xe89b;
    +
    • + +
  • + +
    28体积、空间
    +
    &#xe89f;
    +
    • + +
  • + +
    225默认头像
    +
    &#xe8c9;
    +
    • + +
  • + +
    406报表
    +
    &#xe902;
    +
    • + +
  • + +
    lock_fill
    +
    &#xe709;
    +
    • + +
+

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/src/assets/fonts/iconfont.css b/src/assets/fonts/iconfont.css new file mode 100755 index 0000000..cd76f6c --- /dev/null +++ b/src/assets/fonts/iconfont.css @@ -0,0 +1,37 @@ + +@font-face {font-family: "iconfont"; + src: url('iconfont.eot?t=1523541245904'); /* IE9*/ + src: url('iconfont.eot?t=1523541245904#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=1523541245904') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ + url('iconfont.svg?t=1523541245904#iconfont') format('svg'); /* iOS 4.1- */ +} + +.iconfont { + font-family:"iconfont" !important; + font-size:16px; + font-style:normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-showpassword:before { content: "\ea3f"; } + +.icon-user:before { content: "\e89a"; } + +.icon-users:before { content: "\e8b5"; } + +.icon-3702mima:before { content: "\e66c"; } + +.icon-shangpin:before { content: "\e888"; } + +.icon-danju:before { content: "\e89b"; } + +.icon-tijikongjian:before { content: "\e89f"; } + +.icon-morentouxiang:before { content: "\e8c9"; } + +.icon-baobiao:before { content: "\e902"; } + +.icon-lock_fill:before { content: "\e709"; } + diff --git a/src/assets/fonts/iconfont.eot b/src/assets/fonts/iconfont.eot new file mode 100755 index 0000000..c6dc0ee Binary files /dev/null and b/src/assets/fonts/iconfont.eot differ diff --git a/src/assets/fonts/iconfont.js b/src/assets/fonts/iconfont.js new file mode 100755 index 0000000..9672a33 --- /dev/null +++ b/src/assets/fonts/iconfont.js @@ -0,0 +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 diff --git a/src/assets/fonts/iconfont.svg b/src/assets/fonts/iconfont.svg new file mode 100755 index 0000000..1384321 --- /dev/null +++ b/src/assets/fonts/iconfont.svg @@ -0,0 +1,63 @@ + + + + + +Created by iconfont + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/fonts/iconfont.ttf b/src/assets/fonts/iconfont.ttf new file mode 100755 index 0000000..f3231ca Binary files /dev/null and b/src/assets/fonts/iconfont.ttf differ diff --git a/src/assets/fonts/iconfont.woff b/src/assets/fonts/iconfont.woff new file mode 100755 index 0000000..afe5e89 Binary files /dev/null and b/src/assets/fonts/iconfont.woff differ diff --git a/src/components/Login.vue b/src/components/Login.vue index ac66c96..264d937 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -4,9 +4,16 @@
logo
- - - + @@ -53,4 +60,15 @@ export default { } } } + .btns{ + display: flex; + justify-content: flex-end; + } + .login-from{ + width: 100%; + padding: 0 20px; + position: absolute; + bottom: 0; + box-sizing: border-box; + } diff --git a/src/main.js b/src/main.js index 3301392..51184c0 100644 --- a/src/main.js +++ b/src/main.js @@ -3,6 +3,7 @@ import App from './App.vue' import router from './router' import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' +import './assets/fonts/iconfont.css' import './assets/css/globel.css' Vue.use(ElementUI)