add.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <view class="appWrapper padding-sm">
  3. <form action="">
  4. <view class="form-item margin-top">
  5. <view class="title">设备编号:</view>
  6. <input name="input"></input>
  7. </view>
  8. <view class="form-item">
  9. <view class="title">设备名称:</view>
  10. <input name="input"></input>
  11. </view>
  12. <view class="form-item">
  13. <view class="title">安装位置:</view>
  14. <input name="input"></input>
  15. </view>
  16. <view class="form-item">
  17. <view class="title">所属楼层:</view>
  18. <select name="" id="">
  19. <option value="">楼层一</option>
  20. <option value="">楼层一</option>
  21. <option value="">楼层一</option>
  22. </select>
  23. </view>
  24. <view class="form-item">
  25. <view class="title">站点:</view>
  26. <select name="" id="">
  27. <option value="">站点一</option>
  28. <option value="">站点一</option>
  29. <option value="">站点一</option>
  30. </select>
  31. </view>
  32. <view class="form-item">
  33. <view class="title">设备类型:</view>
  34. <select name="" id="">
  35. <option value="">智慧用电</option>
  36. <option value="">视频监控</option>
  37. </select>
  38. </view>
  39. <view class="btn-area submitBottomBtn">
  40. <button class="bg-blue round margin-top">提 交 </button>
  41. </view>
  42. </form>
  43. </view>
  44. </template>
  45. <script>
  46. export default {
  47. data() {
  48. return {
  49. index: -1,
  50. picker: ['楼层一', '楼层二', '楼层三'],
  51. }
  52. },
  53. methods: {
  54. PickerChange(e) {
  55. this.index = e.detail.value
  56. },
  57. }
  58. }
  59. </script>
  60. <style lang="scss">
  61. .cu-form-group {
  62. border-top: 0;
  63. }
  64. input,
  65. select,
  66. option {
  67. line-height: 70rpx;
  68. padding: 0 20rpx;
  69. height: 70rpx;
  70. border: 1px solid #EDEDED;
  71. // width:500rpx!important;
  72. background-color: #fff;
  73. box-sizing: border-box;
  74. appearance: none;
  75. -moz-appearance: none;
  76. -webkit-appearance: none;
  77. color: #999;
  78. }
  79. select:focus,
  80. select:active,
  81. select:hover {
  82. outline: none;
  83. }
  84. select {
  85. background: url(../../static/arrow.png) no-repeat scroll 98% center;
  86. background-size: 6%;
  87. }
  88. .form-item {
  89. padding: 0 40rpx;
  90. display: flex;
  91. align-items: center;
  92. margin-bottom: 20rpx;
  93. .title {
  94. width: 170rpx;
  95. }
  96. input,
  97. select {
  98. width: 500rpx;
  99. font-size:28rpx;
  100. }
  101. }
  102. </style>