Skip to content

肖康 / cloudSystem

Go to a project
Commit 60624613 by liangjianmin
Options

css

parent 7157504e
Expand all
Inline Side-by-side
Showing with 282 additions and 24 deletions
src/assets/css/font/demo_index.html
......@@ -55,6 +55,12 @@
<ul class="icon_lists dib-box">
<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>
<div class="name">隐藏</div>
<div class="code-name">&amp;#xe733;</div>
......@@ -150,9 +156,9 @@
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1620613506704') format('woff2'),
url('iconfont.woff?t=1620613506704') format('woff'),
url('iconfont.ttf?t=1620613506704') format('truetype');
src: url('iconfont.woff2?t=1620617588072') format('woff2'),
url('iconfont.woff?t=1620617588072') format('woff'),
url('iconfont.ttf?t=1620617588072') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
......@@ -179,6 +185,15 @@
<ul class="icon_lists dib-box">
<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>
<div class="name">
隐藏
......@@ -324,6 +339,14 @@
<li class="dib">
<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>
</svg>
<div class="name">隐藏</div>
......
src/assets/css/font/iconfont.css
@font-face {
font-family: "iconfont"; /* Project id 2537242 */
src: url('iconfont.woff2?t=1620613506704') format('woff2'),
url('iconfont.woff?t=1620613506704') format('woff'),
url('iconfont.ttf?t=1620613506704') format('truetype');
src: url('iconfont.woff2?t=1620617588072') format('woff2'),
url('iconfont.woff?t=1620617588072') format('woff'),
url('iconfont.ttf?t=1620617588072') format('truetype');
}
.iconfont {
......@@ -13,6 +13,10 @@
-moz-osx-font-smoothing: grayscale;
}
.icondenglu-mimabeifen:before {
content: "\e735";
}
.iconyincang:before {
content: "\e733";
}
......
src/assets/css/font/iconfont.json
......@@ -6,6 +6,13 @@
"description": "猎芯云芯系统前端",
"glyphs": [
{
"icon_id": "21489014",
"name": "登录-密码备份",
"font_class": "denglu-mimabeifen",
"unicode": "e735",
"unicode_decimal": 59189
},
{
"icon_id": "21484843",
"name": "隐藏",
"font_class": "yincang",
......
src/assets/css/login/index.less
......@@ -81,27 +81,115 @@ html, body, #app {
margin: 0 auto;
.input-box {
width: 340px;
position: relative;
width: 328px;
height: 43px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #BEC9DF;
margin-bottom: 20px;
transition: all 0.2s ease;
padding-left: 12px;
.iconfont {
font-size: 17px;
i.iconfont {
padding: 12px 0;
font-size: 20px;
color: #a1acc1;
}
.inp {
padding-left: 9px;
height: 34px;
font-size: 14px;
background: transparent;
border-left: 1px solid #BEC9DF;
margin-left: 12px;
&::-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,
margin: 0 auto;
}
.user-box .section .section-wrap .login-box .bar .input-box {
width: 340px;
position: relative;
width: 328px;
height: 43px;
background: #FFFFFF;
border-radius: 2px;
border: 1px solid #BEC9DF;
margin-bottom: 20px;
transition: all 0.2s ease;
padding-left: 12px;
}
.user-box .section .section-wrap .login-box .bar .input-box .iconfont {
font-size: 17px;
.user-box .section .section-wrap .login-box .bar .input-box i.iconfont {
padding: 12px 0;
font-size: 20px;
color: #a1acc1;
}
.user-box .section .section-wrap .login-box .bar .input-box .inp {
padding-left: 9px;
height: 34px;
font-size: 14px;
background: transparent;
border-left: 1px solid #BEC9DF;
margin-left: 12px;
}
.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 */
\ 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"}
\ No newline at end of file
{"version":3,"sources":["index.less"],"names":[],"mappings":"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","file":"index.min.css"}
\ No newline at end of file
src/views/User/login.vue
......@@ -18,16 +18,30 @@
<div class="login-box">
<p class="tit">欢迎登录云芯系统</p>
<div class="bar">
<div class="input-box">
<div class="input-box lbBox">
<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>
</div>
<div class="input-box">
<i class="iconfont iconuser va-m"></i>
<input type="text" placeholder="请输入手机号" class="inp va-m"/>
<div class="input-box lbBox">
<i class="iconfont icondenglu-mimabeifen va-m"></i>
<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>
</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>
......@@ -40,14 +54,63 @@
export default {
name: "index",
data() {
return {};
return {
pwdFlag: true,
active: false,
errror_text: '',
status1:false,
status2:false,
loading:true,
form: {
username: '',
password: '',
code: ''
}
};
},
watch: {
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;
}
}
}
},
watch: {},
created() {
},
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>
<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