password.vue 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <view>
  3. <u-navbar title="修改密码" autoBack placeholder></u-navbar>
  4. <view class="card_password">
  5. <view class="item_pass">
  6. <view class="pass_title">旧密码<span style="color: red;">*</span></view>
  7. <u--input placeholder="请输入内容" border="surround" v-model="userInfo.name"></u--input>
  8. </view>
  9. <view class="item_pass">
  10. <view class="pass_title">新密码<span style="color: red;">*</span></view>
  11. <u--input placeholder="请输入内容" border="surround" v-model="userInfo.name"></u--input>
  12. </view>
  13. <view class="item_pass">
  14. <view class="pass_title">再次输入新密码<span style="color: red;">*</span></view>
  15. <u--input placeholder="请输入内容" border="surround" v-model="userInfo.name"></u--input>
  16. </view>
  17. </view>
  18. <view class="card_btn">
  19. <u-button type="primary" :disabled="disabled" text="提交"></u-button>
  20. </view>
  21. </view>
  22. </template>
  23. <script>
  24. export default {
  25. data() {
  26. return {
  27. model1: {
  28. name: 'uView UI',
  29. },
  30. userInfo: {
  31. name: ''
  32. },
  33. rules: {
  34. 'name': {
  35. type: 'string',
  36. required: true,
  37. message: '请填写姓名',
  38. trigger: ['blur', 'change']
  39. },
  40. },
  41. disabled:false,
  42. }
  43. }
  44. }
  45. </script>
  46. <style lang="scss">
  47. .card_password {
  48. padding: 20rpx 40rpx 40rpx 40rpx;
  49. }
  50. .item_pass {
  51. margin-top: 30rpx;
  52. }
  53. .pass_title {
  54. margin-bottom: 20rpx;
  55. }
  56. .card_btn {
  57. margin: 40rpx;
  58. }
  59. </style>