You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

99 lines
1.9 KiB

12 months ago
  1. <template>
  2. <view class="content">
  3. <view class="form">
  4. <view class="formItem">
  5. <view class="icon">
  6. <image src="../../static/images/icon (18).png" mode=""></image>
  7. </view>
  8. <view class="inputW">
  9. <u--input v-model="FormData.phone" placeholder="请输入手机号" type="number" clearable></u--input>
  10. </view>
  11. </view>
  12. <view class="formItem">
  13. <view class="icon">
  14. <image src="../../static/images/icon (14).png" mode=""></image>
  15. </view>
  16. <view class="inputW">
  17. <u--input v-model="FormData.phone" placeholder="请输入密码" clearable></u--input>
  18. </view>
  19. </view>
  20. <view class="formItem">
  21. <view class="inputW">
  22. <u--input v-model="FormData.phone" placeholder="请输入验证码" type="number" clearable></u--input>
  23. </view>
  24. <view class="sendCode">{{ sendCode }}</view>
  25. </view>
  26. <view class="formItem btnBg" @click="$goPage('/pages/index/index')">登录</view>
  27. </view>
  28. </view>
  29. </template>
  30. <script>
  31. export default {
  32. data() {
  33. return {
  34. FormData: {
  35. },
  36. sendCode: '获取验证码'
  37. }
  38. },
  39. onLoad() {
  40. },
  41. methods: {
  42. }
  43. }
  44. </script>
  45. <style lang="scss" scoped>
  46. .content {
  47. width: 100%;
  48. display: flex;
  49. justify-content: center;
  50. align-items: center;
  51. width: 100%;
  52. .form {
  53. width: 86%;
  54. margin-top: 24%;
  55. .formItem {
  56. width: 100%;
  57. display: flex;
  58. align-items: center;
  59. justify-content: center;
  60. height: 112rpx;
  61. border-radius: 56rpx;
  62. background: #f4f7ff;
  63. margin-bottom: 44rpx;
  64. padding: 0 50rpx;
  65. .icon {
  66. width: 48rpx;
  67. height: 48rpx;
  68. }
  69. .inputW {
  70. flex: 1;
  71. width: 0;
  72. u--input {
  73. }
  74. }
  75. .sendCode {
  76. font-size: 26rpx;
  77. color: rgb(192, 196, 204);;
  78. }
  79. &.btnBg {
  80. background: $themC;
  81. text-align: center;
  82. font-size: 30rpx;
  83. width: 100%;
  84. letter-spacing: 1em;
  85. opacity: 0.4;
  86. &.actvie {
  87. opacity: 1;
  88. }
  89. }
  90. }
  91. }
  92. }
  93. </style>