vue实现大气简洁发送手机验证码倒计时输入框效果代码-html代码-BFW代码库

vue实现大气简洁发送手机验证码倒计时输入框效果代码

代码语言：html

所属分类：其他

代码描述：vue实现大气简洁发送手机验证码倒计时输入框效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="false">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/rem.js"></script>
    <style>
        * {
	-webkit-tap-highlight-color:transparent;
	-webkit-touch-callout:text
}
*,*:before,*:after {
	box-sizing:border-box
}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre {
	margin:0;
	padding:0
}
small,big,input,textarea,button,select {
	font-size:100%
}
h1,h2,h3,h4,h5,h6 {
	font-size:inherit;
	font-weight:bold
}
b,strong {
	font-weight:bolder
}
address,em,i {
	font-style:normal
}
table {
	border-collapse:collapse;
	border-spacing:0;
	text-align:left
}
caption,th {
	text-align:inherit
}
ul,ol,menu {
	list-style:none
}
fieldset,img {
	border:0
}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu {
	display:block
}
audio,canvas,video {
	display:inline-block;
	*display:inline;
	*zoom:1
}
textarea {
	overflow:auto;
	resize:vertical;
	resize:none
}
input,textarea,button,select,a {
	font-family:inherit;
	outline:0 none;
	border:none;
	color:inherit
}
button::-moz-focus-inner,input::-moz-focus-inner {
	padding:0;
	border:0
}
mark {
	background-color:transparent
}
a,ins,s,u,del {
	text-decoration:none
}
sup,sub {
	vertical-align:baseline
}
html {
	overflow-x:hidden;
	height:100%;
	-webkit-text-size-adjust:100%
}
body {
	font-family:"PingFangSC","Helvetica Neue",Avenir,Helvetica,Arial,sans-serif;
	color:#4D4A63
}
button,input {
	-webkit-appearance:none
}
img,video {
	max-width:100%;
	height:auto
}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input::-moz-placeholder,textarea::-moz-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input:-ms-input-placeholder,textarea:-ms-input-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input::-ms-input-placeholder,textarea::-ms-input-placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
input::placeholder,textarea::placeholder {
	color:#C0BDD0;
	font-weight:400;
	font-size:14px
}
[role=button],button {
	cursor:pointer
}
.clearfix:after {
	clear:both;
	content:"";
	display:block;
	height:0;
	line-height:0;
	visibility:hidden
}
.clearfix {
	zoom:1
}
.fl {
	float:left
}
.fr {
	float:right
}
button:focus {
	outline:none!important
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance:none
}
html {
	font-size:8px
}
body {
	font-size:2rem;
	background:black
}
#toastTip {
	display:none;
	position:fixed;
	top:46%;
	left:50%;
	transform:translate(-50%,-50%);
	padding:2rem 2.4rem;
	min-width:200px;
	max-width:300px;
	line-height:2rem;
	font-size:2rem;
	text-align:center;
	color:#F2F2F9;
	background-color:rgba(33,21,54,0.8);
	border-radius:1rem;
	z-index:100
}
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:.........完整代码请登录后点击上方下载按钮下载查看