zfb.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
  1. <template>
  2. <view class="content">
  3. <view class="box">
  4. <view class="item top">
  5. <text>真实姓名</text>
  6. <input type="text" value="" placeholder="请输入真实姓名" />
  7. </view>
  8. <view class="item">
  9. <text>支付宝账号</text>
  10. <input type="text" value="" placeholder="请输入支付宝账号" />
  11. </view>
  12. </view>
  13. <button class="button" type="default">确认</button>
  14. </view>
  15. </template>
  16. <script>
  17. export default {
  18. data() {
  19. return {
  20. };
  21. }
  22. }
  23. </script>
  24. <style lang="scss">
  25. page , .content{
  26. height: 100%;
  27. padding: 0;
  28. margin: 0;
  29. }
  30. .top{
  31. border-bottom: 1rpx solid #F3F3F3;
  32. }
  33. .box{
  34. background: #FFFFFF;
  35. margin: 20rpx 0 70rpx 0;
  36. .item{
  37. display: flex;
  38. align-items: center;
  39. text{
  40. margin: 0 40rpx 0 25rpx;
  41. width: 150rpx;
  42. font-size: 30rpx;
  43. font-family: PingFang SC;
  44. font-weight: 400;
  45. color: #333333;
  46. line-height: 100rpx;
  47. }
  48. input{
  49. font-size: 28rpx;
  50. font-family: PingFang SC;
  51. font-weight: 400;
  52. color: #999999;
  53. line-height: 100rpx;
  54. }
  55. }
  56. }
  57. .button{
  58. text-align: center;
  59. width: 560rpx;
  60. height: 80rpx;
  61. background: linear-gradient(90deg, #44BFEC, #438BED);
  62. border-radius: 40rpx;
  63. font-size: 30rpx;
  64. font-family: PingFangSC;
  65. font-weight: 500;
  66. color: #FFFFFF;
  67. line-height: 80rpx;
  68. }
  69. </style>