3 changed files with 130 additions and 0 deletions
@ -0,0 +1,115 @@ |
|||
<template> |
|||
<view class="gtsmscode"> |
|||
<!-- 错误图标 --> |
|||
<view class="iconzone"> |
|||
<view class="imgicon"><image class="iamge" mode="center" src="../static/error.svg"></image></view> |
|||
<view class="msgtit">验证码错误</view> |
|||
<view class="msgnote">获取验证码1分钟之内可重新输入,重新输入验证码失败请重新获取</view> |
|||
</view> |
|||
<view class="titzone"> |
|||
<view class="title">请重新输入验证码</view> |
|||
</view> |
|||
|
|||
<view class="form-item"> |
|||
<input class="form-item--input" type="number" maxlength="6" /> |
|||
</view> |
|||
<view class=""> |
|||
重新获取验证码 |
|||
</view> |
|||
|
|||
<view class="form-item"> |
|||
<button class="sbtn">确认重新输入</button> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
|
|||
}, |
|||
methods: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.iconzone{ |
|||
// padding: 1.2rem 1.2rem 0 1.2rem; |
|||
// padding-left: 24rpx; |
|||
|
|||
.imgicon{ |
|||
width: 100%; |
|||
display: flex; |
|||
|
|||
.image{ |
|||
// width: 36rpx; |
|||
height: 36rpx; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
} |
|||
.msgtit{ |
|||
line-height: 1.4; |
|||
font-weight: 800; |
|||
font-size: 36rpx; |
|||
text-align: center; |
|||
} |
|||
|
|||
.msgnote{ |
|||
margin-top: 24rpx; |
|||
font-size: 28rpx; |
|||
line-height: 1.6; |
|||
color: #999; |
|||
text-indent: 20rpx; |
|||
} |
|||
} |
|||
|
|||
.titzone{ |
|||
margin-top: 46rpx; |
|||
padding-left: 1.08rem; |
|||
font-size: 36rpx; |
|||
font-weight: 800; |
|||
} |
|||
// 输入框元素 |
|||
.form-item { |
|||
display: flex; |
|||
padding: 18rpx; |
|||
border-bottom: 1rpx solid #f3f1f2; |
|||
margin-bottom: 30rpx; |
|||
height: 126rpx; |
|||
|
|||
&--input { |
|||
font-size: 36rpx; |
|||
letter-spacing: 1rpx; |
|||
flex: 1; |
|||
height: 100%; |
|||
line-height: 100%; |
|||
background-color: #F8F8F8; |
|||
padding-left: 12rpx; |
|||
border-bottom: #000 1rpx dashed; |
|||
} |
|||
|
|||
&--parts { |
|||
min-width: 100rpx; |
|||
height: 100%; |
|||
} |
|||
|
|||
.sbtn{ |
|||
text-align: center; |
|||
background-color: #0F476E; |
|||
height: 76rpx; |
|||
line-height: 76rpx; |
|||
color: #fff; |
|||
font-size: 34rpx; |
|||
display: block; |
|||
width: 90%; |
|||
} |
|||
} |
|||
</style> |
|||
|
After Width: | Height: | Size: 416 B |
Loading…
Reference in new issue