From fb62ecaf8b0eba8f8567c50ab7143a02b5b7d974 Mon Sep 17 00:00:00 2001 From: xing Date: Tue, 16 Jun 2020 10:44:52 +0800 Subject: [PATCH] =?UTF-8?q?=E5=BC=95=E5=85=A5=E4=B8=89=E6=96=B9=E5=9B=BE?= =?UTF-8?q?=E6=A0=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/fonts/demo.css | 370 +++++++++++++++++++++++++++ src/assets/fonts/demo_fontclass.html | 100 ++++++++ src/assets/fonts/demo_symbol.html | 143 +++++++++++ src/assets/fonts/demo_unicode.html | 138 ++++++++++ src/assets/fonts/iconfont.css | 37 +++ src/assets/fonts/iconfont.eot | Bin 0 -> 3656 bytes src/assets/fonts/iconfont.js | 1 + src/assets/fonts/iconfont.svg | 63 +++++ src/assets/fonts/iconfont.ttf | Bin 0 -> 3488 bytes src/assets/fonts/iconfont.woff | Bin 0 -> 2384 bytes src/components/Login.vue | 24 +- src/main.js | 1 + 12 files changed, 874 insertions(+), 3 deletions(-) create mode 100755 src/assets/fonts/demo.css create mode 100755 src/assets/fonts/demo_fontclass.html create mode 100755 src/assets/fonts/demo_symbol.html create mode 100755 src/assets/fonts/demo_unicode.html create mode 100755 src/assets/fonts/iconfont.css create mode 100755 src/assets/fonts/iconfont.eot create mode 100755 src/assets/fonts/iconfont.js create mode 100755 src/assets/fonts/iconfont.svg create mode 100755 src/assets/fonts/iconfont.ttf create mode 100755 src/assets/fonts/iconfont.woff 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 0000000000000000000000000000000000000000..c6dc0ee7a0ccde7657d1842e079478df51a95c71 GIT binary patch literal 3656 zcmc&1ZERE5^_=_O^LJhnJGS#d$a5UqD+x~G*iOm@HsK?HfKo_P0Ykw!&KLfYQbI-fy4B7co8IRGQNm5`q4xhuaDbcJ#+zX z-??{~p42DSM=(1zks_JF(HI{^k|3B2De;1e3uM8+*%=HhoEL*W+DF8CH5NZWzVJ~VY=yUbeA7m9{iC%S!-+uI-uA%Dnc_P2+H&FF16HFzTN zXwYjin`%+U_1Ncw{g!dP?*`!+^At%yx6&4-+UbxvUcZH=Mz=hZ#zC+KeTudCg% zQQh5@Xox5-%PEJ`+2nM-YB5QYg)y;K#+=t?C`ctX4*?p_+Io5`brcm?V!!=5a zGj$=FZw+{@h?NSuS`_(biTdVx`k!g`xSUPqx*AJkbB({F0Z;wK-sp0)2LDW<@{F$j zO9XbDR;dYsJWkOZ>`aPmIAftIbdbePI7(?!_GIT4JI>r;tL}y)S1Q2@_KiR-FN-E&)(u*FK-sjb=y~E zp(3xoXO4?_Xiz%Z8oDRT_d=~lrNKie#?AKE)9KgA78%q|(l)X+s97UZYpr>z)+9X( zVeF6h2jhe&C13hvXt6)aCKRHMW~bNI`r2!)Hm|eU5f#uRZ~Dj~fa4=I(Y~kM(P;HH ziOeq5cKV}i=-3)P+;db43pg|&?rZYBYq!7aYuYCc451K~Y-fju&syAmM}5~i*LHtX zL!cZD)kR-sYn1fZ?g;1TEurvJG9Zw*{{9f*7$vV2{XB>Dluci6UxZ>tiq1`JpW7D_ z&LQhm`Vhr)qsL#7HdvKThMhkAB4joxU8;jOC*Db7M+>X8bfB7~;!Y&qOC(rjRCc-K(Um0mW7qU?0aEJ;}X z9ieqj=l)eH&x%?>4cHPXk*ZT(;Yu=FlAQ`yTjyL^O!CI-nF1!njMYo7 z0C^wFXngqs_Au`z5RXO z{!ok(EqF0x4)uG5C8w-bl4^zL3M)TS7F-L;H6-@N2KD{7=AK)8>j4AVnM{%%^^qe3 z!@~ndB2N5yulkRR>E7>OdYaGUlurvZz($InVy5D8`(1o3H)Av&@wfy2n7-m}f3?g> zt)8-SiS3NVcH+OU>MMnCj7=XnaFR_MWt7x{{7@OXh!d=R)ZEu-eJ%p(ezEGJ<2O2YS1QxB0 zGdB?_m&cXyQX!}8qzN;aXXw^YCOifT zoPg7W*WNK~|0DVOjbp9;TK?I$k+oVwFe)_.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}")}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 0000000000000000000000000000000000000000..f3231ca4caadd1cef1d44b1ced8a7081c1590d8d GIT binary patch literal 3488 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 literal 0 HcmV?d00001 diff --git a/src/assets/fonts/iconfont.woff b/src/assets/fonts/iconfont.woff new file mode 100755 index 0000000000000000000000000000000000000000..afe5e89ef540b46c41d72c2d23c721adb99268af GIT binary patch literal 2384 zcmY*adpOhWAO3DjJJ`zB$|*ucBon_EXjA z%}8^O@+#-v7sDIn5cQH*{WQO?`s?>x*L^*o`@TNUbwAhVkNXovK6D6x0N_Eo0rKlN zrt}wIumArzcu+_H06~DNF$mIQS&3Z+9|1W zO@hN>m|zX|ZQujIM#KA_l`SWO=qJGXGuTG}VS+`GYfpkA0Khdsz8%Ca_$chsNftL6 z)Yd)lAPfo901y_=SnqQKxym|F6G#;nJsR|dhk<+t2n~oT;LoPBfGz?}-Ol8J((OOjlB=6{$p_d06rWz%w^=Kma`_^wa3#)_hA`vNbwQYCseR(kG)43z9T5;OcMi z$H~c~o$0n5EW!^e#c|q7ju(83)DDlzzqt$00w4zp6bz%3qU(42)kcF6tar-y1rdfB z)(Hm66;4dFl+&xY7M-@WKz3Q?_N@YND6HAFt8S2Y*;@ z@m-leve&<6X-L_=S5UO<7YCP!WP4a3^OW|-gvm*wdrx0mD_FWw#?%8?W^ zNrH0xH2!_hqaOHtN6`Xc2{T>6%&+VpaH|d*zHx;%dzY8mhQHwyV-!{;^U2oMl4fQilZeEioseXaH@1?6TFGENdD4z|7 zH;58CD2-Q)v~iA3Mn?Q9YvRYNX%S~7FLgfo3g=FYD!H}G)kcL z-D|h}FvCuM%r4I3<*<77pqp{&LD-0xUN>j)MnHip{LxMDQ*fB@DkQy2SA3}Nv(=zC zzM2(&bS$?NZh*;==!VD`*kdA%n;Vt*D-MxzfZkH{Y$-4&dFF8!i4}Kk3#^-N*%f1y zSrJ)(2$^vtACqD4oCod0I7HTqvo6Z1`9FUY${{9>TVNKOC9tr0uUVTa`{o$RVE?zP zo7AI-aC%k0R-o`abXy*}jg#rrd9<8e&2iqn^XeaVw$l|V6@mK-eosGw2@qP=W$hIg zK1J8XpEuR7D&qA3`_>>XFLh!J~p1nC~{;RgSc4*d@h1COfp;cuT>1_M|Wu3z+XWC;el@mUg;vS!9G)In3IVt>DE8ElPqlqLMd>MWE{P`1ZPS1S( zp+)SN)Y;vRMQ{o7v?DSmkPUZtx2x-2`rBt8!~Jx)J>Gl%?7s7R!gh>^b+lfbRrGVi z)#JPag?|Yd`a_b^NolStipzX0wV$TS{7FY~Hm6iOFPxiQFvuXalx9|P!@Bp+U0PBR zynArNWw6=Kc#GdVR?&kyl@{n|rAbs1;lZ=fXKX+$&HkKWN)D$se7l09$U|Gkspb|Y zrlyf1UZe2NYOd48J0*THLW#Vn)v+kd=Eptduc|rf{inC9BeAl!-u3_}iuU)MT;IJ)@cp&sTI{sJ2 z(`dh#muOX!eDnyj~P1oYt$WzYfuB7p{A2@(jo4;h7O zLtUYH&_7^G>v{QW$IuZcXh8r(TVo1J+L*pZvw{KG8A!}}p60r^HXACW1$>8>si$gB z9%IO!wLxI+5A=@uN9~x%7x{+eD4^vh4c6^~LwCok@d0m%9Bt#Dbof zgXAR309E(1+`a5qx32u>GPUb4PC%j#Jo6;YKum(XbFk<9-ewW^1Us$)$m8sn;P|79 zS?#`?k_{COjmr?H`E#vfDX;dYXgJ?CE>DyE)4wwFFDIXYTl6Sg)5jI(X*DY!KwY`V zNwQ~ghRkLf+_LM^4MqZY2*Lv+>H<`|Z(T6UN6R}6To!dboQrl>-d@m0wIx)s+k?~V Xce4tg6n{NnNww&1tA~tZc6$F0FHsDq literal 0 HcmV?d00001 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)