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 @@
<ul class="icon_lists dib-box">
<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>
<div class="name">drow</div>
<div class="code-name">&amp;#xe64d;</div>
......@@ -138,9 +150,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1620612633065') format('woff2'),
url('iconfont.woff?t=1620612633065') format('woff'),
url('iconfont.ttf?t=1620612633065') format('truetype');
src: url('iconfont.woff2?t=1620613506704') format('woff2'),
url('iconfont.woff?t=1620613506704') format('woff'),
url('iconfont.ttf?t=1620613506704') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -167,6 +179,24 @@
<ul class="icon_lists dib-box">
<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>
<div class="name">
drow
......@@ -294,6 +324,22 @@
<li class="dib">
<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>
</svg>
<div class="name">drow</div>
......
src/assets/css/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 2537242 */
src: url('iconfont.woff2?t=1620612633065') format('woff2'),
url('iconfont.woff?t=1620612633065') format('woff'),
url('iconfont.ttf?t=1620612633065') format('truetype');
src: url('iconfont.woff2?t=1620613506704') format('woff2'),
url('iconfont.woff?t=1620613506704') format('woff'),
url('iconfont.ttf?t=1620613506704') format('truetype');
}
.iconfont {
......@@ -13,6 +13,14 @@
-moz-osx-font-smoothing: grayscale;
}
.iconyincang:before {
content: "\e733";
}
.iconyanjing:before {
content: "\e734";
}
.icondrow:before {
content: "\e64d";
}
......
src/assets/css/font/iconfont.json
......@@ -6,6 +6,20 @@
"description": "猎芯云芯系统前端",
"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",
"name": "drow",
"font_class": "drow",
......
src/assets/css/login/index.less
html, body, #app {
height: 100%;
}
.user-box {
height: 100%;
.head-box {
height: 80px;
background: #FFFFFF;
.head-wrap {
width: 1190px;
height: 100%;
margin: 0 auto;
.logo {
......@@ -16,6 +24,14 @@
}
}
.line {
width: 1px;
height: 22px;
color: #e0e0e0;
background: #E0E0E0;
margin: 0 13px 0 15px;
}
.text {
.t1 {
font-size: 14px;
......@@ -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 {
height: 80px;
background: #FFFFFF;
}
.user-box .head-box .head-wrap {
width: 1190px;
height: 100%;
margin: 0 auto;
}
.user-box .head-box .head-wrap .logo {
......@@ -14,6 +23,13 @@
width: 81px;
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 {
font-size: 14px;
color: #333333;
......@@ -24,4 +40,31 @@
font-size: 12px;
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 */
\ 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"}
\ No newline at end of file
{"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
src/views/User/login.vue
<template>
<div class="user-box">
<div class="head-box">
<div class="head-wrap">
<a href="" class="logo">
<div class="head-wrap lbBox">
<a href="" class="logo lineBlock va-m">
<img src="../../assets/images/logo.png" alt=""/>
</a>
<div class="text">
<span class="line lineBlock va-m"></span>
<div class="text lineBlock va-m">
<p class="t1">云芯商家</p>
<p class="t2">连接终端需求</p>
</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>
......
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