<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="frozen.css">
<meta charset="utf-8">
<meta name = "viewport" content = "width = device-width,initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
<script type="text/javascript" src="vue.min.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
overflow: hidden;
}
body{
overflow-y: hidden;
overflow-x: hidden;
}
#app{
width: 100%;
height: 600px;
background: -webkit-linear-gradient(left top, #740479 , #224); /* Safari 5.1 - 6.0 */
}
.user_input_sec{
width: 100%;
/*top:250px;*/
height: 150px;
position: absolute;
}
.user_input_sec>.username_box{
position: absolute;
left: 50%;
width: 70%;
margin-left: -35%;
height: 30px;
border-radius: 5px;
background-color: #888;
border:1px solid #fff;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
}
.user_input_sec>.username_box>.username_input{
width: 100%;
background-color: #888;
border:0;
height: 30px;
text-align: center;
}
.user_input_sec>.password_box{
position: absolute;
top:40px;
left: 50%;
width: 70%;
margin-left: -35%;
height: 30px;
border-radius: 5px;
background-color: #888;
border:1px solid #fff;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
}
.user_input_sec>.password_box>.password_input{
width: 100%;
background-color: #888;
border:0;
height: 30px;
text-align: center;
}
.user_input_sec>.submit_box{
position: absolute;
top:80px;
left: 50%;
width: 70%;
margin-left: -35%;
height: 30px;
border-radius: 5px;
background-color: #888;
border:1px solid #fff;
}
.user_input_sec>.submit_box>.submit_input{
width: 100%;
background-color: #224;
border:0;
height: 30px;
text-align: center;
color: #fff;
}
.user_input_sec>.submit_box>.submit_input:active{
width: 100%;
background-color: #112;
border:0;
height: 30px;
text-align: center;
color: #fff;
}
.bot_text{
position: absolute;
color:#eee;
width: 100%;
text-align: center;
top:130px;
font-size: 14px;
}
.userimg{
position: absolute;
left:50%;
border-radius: 50%;
-webkit-box-shadow: 10px 10px 10px rgba(0,0,0,.5);
}
</style>
</head>
<body>
<div id="app" :style="appstyle">
<h1>{{onlode()}}</h1>
<img class="userimg" :src="imgsrc" :style="imgstyle">
<section class="user_input_sec" :style="secstyle">
<div class="username_box">
<input class="username_input" type="text" name="" placeholder="邮箱/手机号/帐号" v-model="userinfo.username">
</div>
<div class="password_box">
<input class="password_input" type="password" name="" placeholder="请输入密码" v-model="userinfo.password">
</div>
<div class="submit_box" @click="login()">
<input class="submit_input" type="submit" name="" value="登录" @click="login()" :style="loginbutstyle">
</div>
<div class="bot_text">
XX即时通讯 android
</div>
</section>
</div>
</body>
</html>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
appstyle:'height:500px;',
scrheight:0,
secstyle:'',
imgstyle:'',
loginbutstyle:'',
userinfo:[
{
username: '',
},
{
password: '',
}
],
imgsrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1554829607701&di=cad3ce7d7962529be95f2ff90f781dc2&imgtype=jpg&src=http%3A%2F%2Fimg4.imgtn.bdimg.com%2Fit%2Fu%3D1408989519%2C2042934024%26fm%3D214%26gp%3D0.jpg',
},
methods: {
onlode: function() {
if(this.scrheight==0)//防止弹出键盘改变尺寸
this.scrheight=document.documentElement.clientHeight;
this.appstyle='height:'+this.scrheight+"px;";
this.secstyle='top:'+this.scrheight/3+"px;";
this.imgstyle='top:'+this.scrheight/18+"px;"+'width:'+this.scrheight/5+"px;"+'height:'+this.scrheight/5+"px;"+'margin-left:-'+this.scrheight/10+"px;";
},
login: function() {
android.andfun(this.userinfo.username,this.userinfo.password);
}
}
})
</script>
h5 css3移动端漂亮登录界面
1星 需积分: 11 104 浏览量
2019-04-10
12:25:51
上传
评论 2
收藏 51KB RAR 举报 
h5移动端漂亮登录界面.rar （3个子文件） 
frozen.css 88KB vue.min.js 91KB
login.html 4KB资源评论
beyondwild2019-08-03楼主太贪了，我这只需要 5积分链接：https://download.csdn.net/download/yuyecsdn/11467833
Ahacker_l2019-08-09哥们会玩
