Skip to content

肖康 / cloudSystem

Go to a project
Commit 20a3b11e by liangjianmin
Options

css

parent 029377a1
Expand all
Inline Side-by-side
Showing with 180 additions and 11 deletions
src/assets/css/font/demo_index.html
...@@ -55,6 +55,18 @@ ...@@ -55,6 +55,18 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe733;</span>
<div class="name">隐藏</div>
<div class="code-name">&amp;#xe733;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe734;</span>
<div class="name">眼睛</div>
<div class="code-name">&amp;#xe734;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64d;</span> <span class="icon iconfont">&#xe64d;</span>
<div class="name">drow</div> <div class="name">drow</div>
<div class="code-name">&amp;#xe64d;</div> <div class="code-name">&amp;#xe64d;</div>
...@@ -138,9 +150,9 @@ ...@@ -138,9 +150,9 @@
<pre><code class="language-css" <pre><code class="language-css"
>@font-face { >@font-face {
font-family: 'iconfont'; font-family: 'iconfont';
src: url('iconfont.woff2?t=1620612633065') format('woff2'), src: url('iconfont.woff2?t=1620613506704') format('woff2'),
url('iconfont.woff?t=1620612633065') format('woff'), url('iconfont.woff?t=1620613506704') format('woff'),
url('iconfont.ttf?t=1620612633065') format('truetype'); url('iconfont.ttf?t=1620613506704') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -167,6 +179,24 @@ ...@@ -167,6 +179,24 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont iconyincang"></span>
<div class="name">
隐藏
</div>
<div class="code-name">.iconyincang
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyanjing"></span>
<div class="name">
眼睛
</div>
<div class="code-name">.iconyanjing
</div>
</li>
<li class="dib">
<span class="icon iconfont icondrow"></span> <span class="icon iconfont icondrow"></span>
<div class="name"> <div class="name">
drow drow
...@@ -294,6 +324,22 @@ ...@@ -294,6 +324,22 @@
<li class="dib"> <li class="dib">
<svg class="icon svg-icon" aria-hidden="true"> <svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyincang"></use>
</svg>
<div class="name">隐藏</div>
<div class="code-name">#iconyincang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyanjing"></use>
</svg>
<div class="name">眼睛</div>
<div class="code-name">#iconyanjing</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icondrow"></use> <use xlink:href="#icondrow"></use>
</svg> </svg>
<div class="name">drow</div> <div class="name">drow</div>
......
src/assets/css/font/iconfont.css
@font-face { @font-face {
font-family: "iconfont"; /* Project id 2537242 */ font-family: "iconfont"; /* Project id 2537242 */
src: url('iconfont.woff2?t=1620612633065') format('woff2'), src: url('iconfont.woff2?t=1620613506704') format('woff2'),
url('iconfont.woff?t=1620612633065') format('woff'), url('iconfont.woff?t=1620613506704') format('woff'),
url('iconfont.ttf?t=1620612633065') format('truetype'); url('iconfont.ttf?t=1620613506704') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,14 @@ ...@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.iconyincang:before {
content: "\e733";
}
.iconyanjing:before {
content: "\e734";
}
.icondrow:before { .icondrow:before {
content: "\e64d"; content: "\e64d";
} }
......
src/assets/css/font/iconfont.json
...@@ -6,6 +6,20 @@ ...@@ -6,6 +6,20 @@
"description": "猎芯云芯系统前端", "description": "猎芯云芯系统前端",
"glyphs": [ "glyphs": [
{ {
"icon_id": "21484843",
"name": "隐藏",
"font_class": "yincang",
"unicode": "e733",
"unicode_decimal": 59187
},
{
"icon_id": "21484844",
"name": "眼睛",
"font_class": "yanjing",
"unicode": "e734",
"unicode_decimal": 59188
},
{
"icon_id": "21484159", "icon_id": "21484159",
"name": "drow", "name": "drow",
"font_class": "drow", "font_class": "drow",
......
src/assets/css/login/index.less
html, body, #app {
height: 100%;
}
.user-box { .user-box {
height: 100%;
.head-box { .head-box {
height: 80px; height: 80px;
background: #FFFFFF; background: #FFFFFF;
.head-wrap { .head-wrap {
width: 1190px; width: 1190px;
height: 100%;
margin: 0 auto; margin: 0 auto;
.logo { .logo {
...@@ -16,6 +24,14 @@ ...@@ -16,6 +24,14 @@
} }
} }
.line {
width: 1px;
height: 22px;
color: #e0e0e0;
background: #E0E0E0;
margin: 0 13px 0 15px;
}
.text { .text {
.t1 { .t1 {
font-size: 14px; font-size: 14px;
...@@ -31,4 +47,35 @@ ...@@ -31,4 +47,35 @@
} }
} }
} }
.section {
width: 100%;
height: calc(100% - 80px);
background: url("../../images/bg.png") no-repeat center;
background-size: cover;
.section-wrap {
position: relative;
width: 1190px;
height: 100%;
margin: 0 auto;
.login-box {
position: absolute;
right: 0;
top: 133px;
width: 400px;
height: 367px;
background: #FFFFFF;
border-radius: 8px;
.tit {
font-size: 20px;
color: #333333;
text-align: center;
margin: 25px 0;
}
}
}
}
} }
\ No newline at end of file
src/assets/css/login/index.min.css
html,
body,
#app {
height: 100%;
}
.user-box {
height: 100%;
}
.user-box .head-box { .user-box .head-box {
height: 80px; height: 80px;
background: #FFFFFF; background: #FFFFFF;
} }
.user-box .head-box .head-wrap { .user-box .head-box .head-wrap {
width: 1190px; width: 1190px;
height: 100%;
margin: 0 auto; margin: 0 auto;
} }
.user-box .head-box .head-wrap .logo { .user-box .head-box .head-wrap .logo {
...@@ -14,6 +23,13 @@ ...@@ -14,6 +23,13 @@
width: 81px; width: 81px;
height: 39px; height: 39px;
} }
.user-box .head-box .head-wrap .line {
width: 1px;
height: 22px;
color: #e0e0e0;
background: #E0E0E0;
margin: 0 13px 0 15px;
}
.user-box .head-box .head-wrap .text .t1 { .user-box .head-box .head-wrap .text .t1 {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
...@@ -24,4 +40,31 @@ ...@@ -24,4 +40,31 @@
font-size: 12px; font-size: 12px;
color: #666666; color: #666666;
} }
.user-box .section {
width: 100%;
height: calc(100% - 80px);
background: url("../../images/bg.png") no-repeat center;
background-size: cover;
}
.user-box .section .section-wrap {
position: relative;
width: 1190px;
height: 100%;
margin: 0 auto;
}
.user-box .section .section-wrap .login-box {
position: absolute;
right: 0;
top: 133px;
width: 400px;
height: 367px;
background: #FFFFFF;
border-radius: 8px;
}
.user-box .section .section-wrap .login-box .tit {
font-size: 20px;
color: #333333;
text-align: center;
margin: 25px 0;
}
/*# sourceMappingURL=index.min.css.map */ /*# sourceMappingURL=index.min.css.map */
\ No newline at end of file
src/assets/css/login/index.min.css.map
{"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA,SACE;EACE,YAAA;EACA,mBAAA;;AAHJ,SACE,UAGE;EACE,aAAA;EACA,cAAA;;AANN,SACE,UAGE,WAIE;EACE,WAAA;EACA,YAAA;;AAVR,SACE,UAGE,WAIE,MAIE;EACE,WAAA;EACA,YAAA;;AAdV,SACE,UAGE,WAcE,MACE;EACE,eAAA;EACA,cAAA;EACA,iBAAA;EACA,kBAAA;;AAvBV,SACE,UAGE,WAcE,MAQE;EACE,eAAA;EACA,cAAA","file":"index.min.css"} {"version":3,"sources":["index.less"],"names":[],"mappings":"AAAA;AAAM;AAAM;EACV,YAAA;;AAGF;EACE,YAAA;;AADF,SAGE;EACE,YAAA;EACA,mBAAA;;AALJ,SAGE,UAIE;EACE,aAAA;EACA,YAAA;EACA,cAAA;;AAVN,SAGE,UAIE,WAKE;EACE,WAAA;EACA,YAAA;;AAdR,SAGE,UAIE,WAKE,MAIE;EACE,WAAA;EACA,YAAA;;AAlBV,SAGE,UAIE,WAeE;EACE,UAAA;EACA,YAAA;EACA,cAAA;EACA,mBAAA;EACA,qBAAA;;AA3BR,SAGE,UAIE,WAuBE,MACE;EACE,eAAA;EACA,cAAA;EACA,iBAAA;EACA,kBAAA;;AAnCV,SAGE,UAIE,WAuBE,MAQE;EACE,eAAA;EACA,cAAA;;AAxCV,SA8CE;EACE,WAAA;EACA,QAAQ,iBAAR;EACA,gBAAgB,uCAAhB;EACA,sBAAA;;AAlDJ,SA8CE,SAME;EACE,kBAAA;EACA,aAAA;EACA,YAAA;EACA,cAAA;;AAxDN,SA8CE,SAME,cAME;EACE,kBAAA;EACA,QAAA;EACA,UAAA;EACA,YAAA;EACA,aAAA;EACA,mBAAA;EACA,kBAAA;;AAjER,SA8CE,SAME,cAME,WASE;EACE,eAAA;EACA,cAAA;EACA,kBAAA;EACA,cAAA","file":"index.min.css"}
\ No newline at end of file \ No newline at end of file
src/views/User/login.vue
<template> <template>
<div class="user-box"> <div class="user-box">
<div class="head-box"> <div class="head-box">
<div class="head-wrap"> <div class="head-wrap lbBox">
<a href="" class="logo"> <a href="" class="logo lineBlock va-m">
<img src="../../assets/images/logo.png" alt=""/> <img src="../../assets/images/logo.png" alt=""/>
</a> </a>
<div class="text"> <span class="line lineBlock va-m"></span>
<div class="text lineBlock va-m">
<p class="t1">云芯商家</p> <p class="t1">云芯商家</p>
<p class="t2">连接终端需求</p> <p class="t2">连接终端需求</p>
</div> </div>
<b class="lineBlock emptys"></b>
</div>
</div>
<div class="section">
<div class="section-wrap">
<div class="login-box">
<p class="tit">欢迎登录云芯系统</p>
</div>
</div> </div>
</div> </div>
</div> </div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment