leDouQuery.vue 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. <template>
  2. <view class="query-content">
  3. <view class="query-input">
  4. <u-input v-model="queryWord" :border="true" placeholder="请输入完整手机号码查询" type="number"/>
  5. <view class="query-button">
  6. <u-button shape="circle" type="primary">查询</u-button>
  7. </view>
  8. </view>
  9. <view class="query-result">
  10. <u-gap height="20" bg-color="#f8f8f8"></u-gap>
  11. <view class="result-list">
  12. <view class="result-title">
  13. <view>
  14. <u-icon name="account-fill" color="#666" size="28"></u-icon>
  15. <text>普通用户</text>
  16. </view>
  17. <view>
  18. <u-button type="warning" size="mini">乐豆核销</u-button>
  19. </view>
  20. </view>
  21. <view class="result-info">
  22. <u-cell-group>
  23. <u-cell-item :arrow="false" title="注册时间" value="2020-12-25 12:23:55"></u-cell-item>
  24. <u-cell-item :arrow="false" title="用户手机" value="1279495656"></u-cell-item>
  25. <u-cell-item :arrow="false" title="乐豆余额" :value-style="{color:'red'}" value="1200">
  26. </u-cell-item>
  27. </u-cell-group>
  28. </view>
  29. </view>
  30. </view>
  31. </view>
  32. </template>
  33. <script>
  34. export default{
  35. data() {
  36. return {
  37. queryWord: ''
  38. }
  39. },
  40. }
  41. </script>
  42. <style lang="less">
  43. .query-content{
  44. width: 100%;
  45. display: flex;
  46. flex-direction: column;
  47. .query-input{
  48. padding: 20rpx 60rpx;
  49. background: #FFFFFF;
  50. }
  51. .query-button{
  52. padding: 20rpx 0;
  53. }
  54. .query-result{
  55. flex-grow: 1;
  56. }
  57. .result-title{
  58. display: flex;
  59. align-items: center;
  60. justify-content: space-between;
  61. background: #fff;
  62. padding: 30rpx;
  63. border-bottom: 1rpx solid #eee;
  64. }
  65. }
  66. </style>