Skip to content

肖康 / cloudSystem

Go to a project
Commit 60624613 by liangjianmin
Options

css

parent 7157504e
Expand all
Inline Side-by-side
Showing with 284 additions and 26 deletions
src/assets/css/font/demo_index.html
...@@ -55,6 +55,12 @@ ...@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont">&#xe735;</span>
<div class="name">登录-密码备份</div>
<div class="code-name">&amp;#xe735;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe733;</span> <span class="icon iconfont">&#xe733;</span>
<div class="name">隐藏</div> <div class="name">隐藏</div>
<div class="code-name">&amp;#xe733;</div> <div class="code-name">&amp;#xe733;</div>
...@@ -150,9 +156,9 @@ ...@@ -150,9 +156,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=1620613506704') format('woff2'), src: url('iconfont.woff2?t=1620617588072') format('woff2'),
url('iconfont.woff?t=1620613506704') format('woff'), url('iconfont.woff?t=1620617588072') format('woff'),
url('iconfont.ttf?t=1620613506704') format('truetype'); url('iconfont.ttf?t=1620617588072') format('truetype');
} }
</code></pre> </code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
...@@ -179,6 +185,15 @@ ...@@ -179,6 +185,15 @@
<ul class="icon_lists dib-box"> <ul class="icon_lists dib-box">
<li class="dib"> <li class="dib">
<span class="icon iconfont icondenglu-mimabeifen"></span>
<div class="name">
登录-密码备份
</div>
<div class="code-name">.icondenglu-mimabeifen
</div>
</li>
<li class="dib">
<span class="icon iconfont iconyincang"></span> <span class="icon iconfont iconyincang"></span>
<div class="name"> <div class="name">
隐藏 隐藏
...@@ -324,6 +339,14 @@ ...@@ -324,6 +339,14 @@
<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="#icondenglu-mimabeifen"></use>
</svg>
<div class="name">登录-密码备份</div>
<div class="code-name">#icondenglu-mimabeifen</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#iconyincang"></use> <use xlink:href="#iconyincang"></use>
</svg> </svg>
<div class="name">隐藏</div> <div class="name">隐藏</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=1620613506704') format('woff2'), src: url('iconfont.woff2?t=1620617588072') format('woff2'),
url('iconfont.woff?t=1620613506704') format('woff'), url('iconfont.woff?t=1620617588072') format('woff'),
url('iconfont.ttf?t=1620613506704') format('truetype'); url('iconfont.ttf?t=1620617588072') format('truetype');
} }
.iconfont { .iconfont {
...@@ -13,6 +13,10 @@ ...@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.icondenglu-mimabeifen:before {
content: "\e735";
}
.iconyincang:before { .iconyincang:before {
content: "\e733"; content: "\e733";
} }
......
src/assets/css/font/iconfont.json
...@@ -6,6 +6,13 @@ ...@@ -6,6 +6,13 @@
"description": "猎芯云芯系统前端", "description": "猎芯云芯系统前端",
"glyphs": [ "glyphs": [
{ {
"icon_id": "21489014",
"name": "登录-密码备份",
"font_class": "denglu-mimabeifen",
"unicode": "e735",
"unicode_decimal": 59189
},
{
"icon_id": "21484843", "icon_id": "21484843",
"name": "隐藏", "name": "隐藏",
"font_class": "yincang", "font_class": "yincang",
......
src/assets/css/login/index.less
...@@ -81,28 +81,116 @@ html, body, #app { ...@@ -81,28 +81,116 @@ html, body, #app {
margin: 0 auto; margin: 0 auto;
.input-box { .input-box {
width: 340px; position: relative;
width: 328px;
height: 43px; height: 43px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 2px; border-radius: 2px;
border: 1px solid #BEC9DF; border: 1px solid #BEC9DF;
margin-bottom: 20px; margin-bottom: 20px;
transition: all 0.2s ease;
padding-left: 12px;
.iconfont { i.iconfont {
font-size: 17px; padding: 12px 0;
font-size: 20px;
color: #a1acc1; color: #a1acc1;
} }
.inp { .inp {
padding-left: 9px;
height: 34px; height: 34px;
font-size: 14px; font-size: 14px;
background: transparent; background: transparent;
border-left: 1px solid #BEC9DF; border-left: 1px solid #BEC9DF;
margin-left: 12px;
&::-webkit-input-placeholder { &::-webkit-input-placeholder {
color: #333333; color: #A1ACC1;
} }
} }
.eye {
position: absolute;
right: 19px;
top: 13px;
font-size: 20px;
color: #a1acc1;
}
&:focus-within {
border: 1px solid #1969F9;
}
}
.code-box {
.l {
input {
width: 210px;
height: 43px;
line-height: 43px;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-indent: 17px;
font-size: 14px;
&::-webkit-input-placeholder {
color: #A1ACC1;
}
}
}
.r {
width: 118px;
height: 43px;
border-radius: 2px;
border: 1px solid #BEC9DF;
img {
width: 100%;
height: 100%;
}
}
}
.text {
position: relative;
padding: 11px 0;
text-align: right;
.error {
position: absolute;
left: 0;
top: 12px;
font-size: 12px;
color: #f10909;
}
a {
line-height: 17px;
font-size: 12px;
color: #999999;
}
}
.btn-submit {
width: 342px;
height: 42px;
line-height: 42px;
text-align: center;
background: #A1ACC1;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
display: block;
letter-spacing: 10px;
margin: 0 auto;
transition: all 0.2s ease;
&.active {
background: #1969F9;
}
} }
} }
} }
......
src/assets/css/login/index.min.css
...@@ -72,24 +72,96 @@ body, ...@@ -72,24 +72,96 @@ body,
margin: 0 auto; margin: 0 auto;
} }
.user-box .section .section-wrap .login-box .bar .input-box { .user-box .section .section-wrap .login-box .bar .input-box {
width: 340px; position: relative;
width: 328px;
height: 43px; height: 43px;
background: #FFFFFF; background: #FFFFFF;
border-radius: 2px; border-radius: 2px;
border: 1px solid #BEC9DF; border: 1px solid #BEC9DF;
margin-bottom: 20px; margin-bottom: 20px;
transition: all 0.2s ease;
padding-left: 12px;
} }
.user-box .section .section-wrap .login-box .bar .input-box .iconfont { .user-box .section .section-wrap .login-box .bar .input-box i.iconfont {
font-size: 17px; padding: 12px 0;
font-size: 20px;
color: #a1acc1; color: #a1acc1;
} }
.user-box .section .section-wrap .login-box .bar .input-box .inp { .user-box .section .section-wrap .login-box .bar .input-box .inp {
padding-left: 9px;
height: 34px; height: 34px;
font-size: 14px; font-size: 14px;
background: transparent; background: transparent;
border-left: 1px solid #BEC9DF; border-left: 1px solid #BEC9DF;
margin-left: 12px;
} }
.user-box .section .section-wrap .login-box .bar .input-box .inp::-webkit-input-placeholder { .user-box .section .section-wrap .login-box .bar .input-box .inp::-webkit-input-placeholder {
color: #333333; color: #A1ACC1;
}
.user-box .section .section-wrap .login-box .bar .input-box .eye {
position: absolute;
right: 19px;
top: 13px;
font-size: 20px;
color: #a1acc1;
}
.user-box .section .section-wrap .login-box .bar .input-box:focus-within {
border: 1px solid #1969F9;
}
.user-box .section .section-wrap .login-box .bar .code-box .l input {
width: 210px;
height: 43px;
line-height: 43px;
border-radius: 2px;
border: 1px solid #BEC9DF;
text-indent: 17px;
font-size: 14px;
}
.user-box .section .section-wrap .login-box .bar .code-box .l input::-webkit-input-placeholder {
color: #A1ACC1;
}
.user-box .section .section-wrap .login-box .bar .code-box .r {
width: 118px;
height: 43px;
border-radius: 2px;
border: 1px solid #BEC9DF;
}
.user-box .section .section-wrap .login-box .bar .code-box .r img {
width: 100%;
height: 100%;
}
.user-box .section .section-wrap .login-box .bar .text {
position: relative;
padding: 11px 0;
text-align: right;
}
.user-box .section .section-wrap .login-box .bar .text .error {
position: absolute;
left: 0;
top: 12px;
font-size: 12px;
color: #f10909;
}
.user-box .section .section-wrap .login-box .bar .text a {
line-height: 17px;
font-size: 12px;
color: #999999;
}
.user-box .section .section-wrap .login-box .bar .btn-submit {
width: 342px;
height: 42px;
line-height: 42px;
text-align: center;
background: #A1ACC1;
border-radius: 2px;
font-size: 20px;
color: #ffffff;
display: block;
letter-spacing: 10px;
margin: 0 auto;
transition: all 0.2s ease;
}
.user-box .section .section-wrap .login-box .bar .btn-submit.active {
background: #1969F9;
} }
/*# 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;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;;AAvEV,SA8CE,SAME,cAME,WAgBE;EACE,YAAA;EACA,cAAA;;AA5EV,SA8CE,SAME,cAME,WAgBE,KAIE;EACE,YAAA;EACA,YAAA;EACA,mBAAA;EACA,kBAAA;EACA,yBAAA;EACA,mBAAA;;AApFZ,SA8CE,SAME,cAME,WAgBE,KAIE,WAQE;EACE,eAAA;EACA,cAAA;;AAxFd,SA8CE,SAME,cAME,WAgBE,KAIE,WAaE;EACE,YAAA;EACA,eAAA;EACA,uBAAA;EACA,8BAAA;;AAEA,SAnDZ,SAME,cAME,WAgBE,KAIE,WAaE,KAMG;EACC,cAAA","file":"index.min.css"} {"version":3,"sources":["index.less"],"names":[],"mappings":"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","file":"index.min.css"}
\ No newline at end of file \ No newline at end of file
src/views/User/login.vue
...@@ -18,16 +18,30 @@ ...@@ -18,16 +18,30 @@
<div class="login-box"> <div class="login-box">
<p class="tit">欢迎登录云芯系统</p> <p class="tit">欢迎登录云芯系统</p>
<div class="bar"> <div class="bar">
<div class="input-box"> <div class="input-box lbBox">
<i class="iconfont iconuser va-m"></i> <i class="iconfont iconuser va-m"></i>
<input type="text" placeholder="请输入手机号" class="inp va-m"/> <input type="text" placeholder="请输入手机号" class="inp va-m" v-model="form.username"/>
<b class="lineBlock emptys"></b> <b class="lineBlock emptys"></b>
</div> </div>
<div class="input-box"> <div class="input-box lbBox">
<i class="iconfont iconuser va-m"></i> <i class="iconfont icondenglu-mimabeifen va-m"></i>
<input type="text" placeholder="请输入手机号" class="inp va-m"/> <input :type='pwdFlag?"password":"text"' placeholder="请输入登录密码" class="inp va-m" v-model="form.password"/>
<a href="javascript:;" class="iconfont eye" :class="pwdFlag ? 'iconyincang':'iconyanjing'" @click="changePwd()"></a>
<b class="lineBlock emptys"></b> <b class="lineBlock emptys"></b>
</div> </div>
<div class="code-box clr">
<div class="fl l">
<input type="text" placeholder="请输入验证码" v-model="form.code"/>
</div>
<a class="fr r" href="javascript:;">
<img src="https://www.ichunt.com/v3/public/verify" alt="">
</a>
</div>
<p class="text">
<span class="error">{{errror_text}}</span>
<a href="javascript:;">忘记密码</a>
</p>
<a href="javascript:;" class="btn-submit" :class="active ? 'active':''" @click="submit()" :loading="true">登录</a>
</div> </div>
</div> </div>
</div> </div>
...@@ -36,18 +50,67 @@ ...@@ -36,18 +50,67 @@
</template> </template>
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
export default { export default {
name: "index", name: "index",
data() { data() {
return {}; return {
pwdFlag: true,
active: false,
errror_text: '',
status1:false,
status2:false,
loading:true,
form: {
username: '',
password: '',
code: ''
}
};
}, },
watch: {}, watch: {
created() { form: {
deep: true,
handler: function (newV, oldV) {
let obj = newV;
if (obj.code || obj.password || obj.username) {
this.errror_text = '';
}
if (obj.code && obj.password && obj.username) {
this.active = true;
} else {
this.active = false;
}
}
}
},
created() {
}, },
computed: {}, computed: {},
methods: {} methods: {
changePwd: function () {
this.pwdFlag = !this.pwdFlag;
},
submit() {
if (!this.form.username) {
this.errror_text = '请输入手机号';
return false;
}
if (!this.form.password) {
this.errror_text = '请输入登录密码';
return false;
}
if (!this.form.code) {
this.errror_text = '请输入验证码';
return false;
}
}
}
}; };
</script> </script>
<style scoped> <style scoped>
......
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