移动端漂亮登录界面

使用html少量css3 js vue.js开发由于原项目与android交互调用了安卓的方法下面是效果图下面是实现代码<!DOCTYPE html><html><head><title></title><link rel="stylesh...

Ahacker_l

10350人浏览 · 2019-04-17 22:42:22

Ahacker_l · 2019-04-17 22:42:22 发布

使用html 少量css3 js vue.js开发由于原项目与android交互调用了安卓的方法

下面是效果图

下面是实现代码

<!-- 即时通讯训练项目,登录页 -->
<!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
    			<a @click='regester()'>注册</a>
    		</div>
		</section>



	</div>



</body>
</html>

<script type="text/javascript">
	var vue=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;
				android.postheight(this.scrheight); 
           }
           	
           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.login(this.userinfo.username,this.userinfo.password);


    	},
    	regester: function() {
        	android.regester();
    	}
  	}

})




</script>

声明:转载请注明出处,本人入门级菜鸟,内容大多学习于网络,存在问题太多不一一列举,大佬多多指教.本人QQ941131649

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^