find-pass.vue 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <view class="find-pass">
  3. <view class="login-from">
  4. <view class="title">填写资料</view>
  5. <view class="input-item">
  6. <label for="">
  7. <text>中国(+86)</text>
  8. </label>
  9. <input type="number" placeholder="请输入注册的手机号">
  10. </view>
  11. <view class="input-item">
  12. <label for="">
  13. <text>验证码</text>
  14. </label>
  15. <input type="number" placeholder="" maxlength="6">
  16. <button class="send-vcode">获取验证码</button>
  17. </view>
  18. <view class="input-item">
  19. <label for="">
  20. <text>新密码</text>
  21. </label>
  22. <input type="password" placeholder="请再新密码">
  23. </view>
  24. <view class="input-item">
  25. <label for="">
  26. <text>确认密码</text>
  27. </label>
  28. <input type="password" placeholder="请再次输入新密码">
  29. </view>
  30. <view class="button-item" style="margin-top: 80upx;">
  31. <button class="confirm">确认修改</button>
  32. </view>
  33. </view>
  34. </view>
  35. </template>
  36. <script>
  37. export default {
  38. data() {
  39. return {
  40. }
  41. },
  42. methods: {
  43. }
  44. }
  45. </script>
  46. <style lang="scss" scoped>
  47. .find-pass {
  48. background: $primary-color;
  49. height: 100vh;
  50. width: 750rpx;
  51. overflow: hidden;
  52. }
  53. .login-from {
  54. margin: auto;
  55. width: 600upx;
  56. height: 700upx;
  57. background-color: white;
  58. border-radius: 20rpx;
  59. padding: 72upx;
  60. padding-top: 40upx;
  61. box-sizing: border-box;
  62. position: relative;
  63. z-index: 2;
  64. margin-top: 200upx;
  65. &::after {
  66. content: "";
  67. background: url(../../static/images/login/box-bottom.png) no-repeat;
  68. background-size: contain;
  69. width: 564upx;
  70. height: 30upx;
  71. display: block;
  72. position: absolute;
  73. bottom: -30upx;
  74. left: 18upx;
  75. z-index: -1;
  76. }
  77. .title{
  78. font-size: 30upx;
  79. color: #999999;
  80. font-weight: bold;
  81. text-align: center;
  82. margin-bottom: 80upx;
  83. }
  84. }
  85. .input-item {
  86. display: flex;
  87. position: relative;
  88. margin-bottom: 30upx;
  89. border-bottom: 2upx solid $primary-color;
  90. label {
  91. width: 158upx;
  92. font-size: 30upx;
  93. color: #999999;
  94. }
  95. input {
  96. flex-grow: 1;
  97. padding: 5upx;
  98. font-size: 30upx;
  99. }
  100. }
  101. .confirm {
  102. height: 80upx;
  103. border: 2upx solid $primary-color;
  104. line-height: 80upx;
  105. margin: 30upx 0;
  106. font-size: 32upx;
  107. background: $primary-color;
  108. color: white;
  109. &::after {
  110. border: none;
  111. }
  112. }
  113. .send-vcode {
  114. background: $primary-color;
  115. color: white;
  116. font-size: 24upx;
  117. position: absolute;
  118. padding: 5upx 0;
  119. width: 160upx;
  120. line-height: normal;
  121. right: 0upx;
  122. top:-5upx;
  123. }
  124. </style>