add.vue 6.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299
  1. <template>
  2. <div class="add_car">
  3. <div class="form bd_bottom pdt32 pdb32" style="display: block">
  4. <div class="form-label">
  5. <span class="form-requird">*</span>
  6. <span>车牌号</span>
  7. </div>
  8. <div>
  9. <car-number v-model="carNumber"></car-number>
  10. </div>
  11. <div class="historyList">
  12. <div class="historyList-item mt32">
  13. <div>苏B51WK7</div>
  14. <div class="btn">
  15. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  16. </div>
  17. </div>
  18. <div class="historyList-item mt32">
  19. <div>苏B51WK7</div>
  20. <div class="btn">
  21. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  22. </div>
  23. </div>
  24. <div class="historyList-item mt32">
  25. <div>苏B51WK7</div>
  26. <div class="btn">
  27. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  28. </div>
  29. </div>
  30. <div class="historyList-item mt32">
  31. <div>苏B51WK7</div>
  32. <div class="btn">
  33. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  34. </div>
  35. </div>
  36. </div>
  37. </div>
  38. <div class="form bd_bottom" style="display: block">
  39. <div style="display: flex">
  40. <div class="form-label">
  41. <span class="form-requird">*</span>
  42. <span>司机姓名</span>
  43. </div>
  44. <div class="form-value">
  45. <input
  46. type="text"
  47. readonly
  48. placeholder="请选择"
  49. v-model="formData.userName"
  50. />
  51. </div>
  52. </div>
  53. <div class="historyList">
  54. <div class="historyList-item mt32">
  55. <div>宣师傅</div>
  56. <div class="btn">
  57. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  58. </div>
  59. </div>
  60. <div class="historyList-item mt32">
  61. <div>陈师傅</div>
  62. <div class="btn">
  63. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  64. </div>
  65. </div>
  66. <div class="historyList-item mt32">
  67. <div>刘师傅</div>
  68. <div class="btn">
  69. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  70. </div>
  71. </div>
  72. <div class="historyList-item mt32">
  73. <div>于师傅</div>
  74. <div class="btn">
  75. <van-icon name="clear" color="rgba(138, 5, 84, 1)" />
  76. </div>
  77. </div>
  78. </div>
  79. </div>
  80. <div class="form bd_bottom" style="display: block">
  81. <div style="display: flex">
  82. <div class="form-label">
  83. <span class="form-requird">*</span>
  84. <span>手机号</span>
  85. </div>
  86. <div class="form-value">
  87. <input
  88. type="text"
  89. readonly
  90. placeholder="请选择"
  91. v-model="formData.userName"
  92. />
  93. </div>
  94. </div>
  95. </div>
  96. <div class="form bd_bottom" style="display: block">
  97. <div style="display: flex">
  98. <div class="form-label">
  99. <span class="form-requird">*</span>
  100. <span>所属企业</span>
  101. </div>
  102. <div class="form-value">
  103. <input
  104. type="text"
  105. readonly
  106. placeholder="请选择"
  107. v-model="formData.userName"
  108. />
  109. </div>
  110. </div>
  111. </div>
  112. <div class="form bd_bottom" style="display: block">
  113. <div style="display: flex">
  114. <div class="form-label">
  115. <span class="form-requird">*</span>
  116. <span>创建时间</span>
  117. </div>
  118. <div class="form-value">
  119. <input
  120. type="text"
  121. readonly
  122. placeholder="请选择"
  123. v-model="formData.userName"
  124. />
  125. </div>
  126. </div>
  127. </div>
  128. <div class="foot-btn">
  129. <van-button color="rgba(138, 5, 84, 1)" type="primary"> 提交 </van-button>
  130. </div>
  131. </div>
  132. </template>
  133. <script>
  134. import CarNumber from "@/components/codecook-carnumber/codecook-carnumber.vue";
  135. export default {
  136. data() {
  137. return {
  138. formData: {},
  139. carNumber: "",
  140. };
  141. },
  142. components: {
  143. CarNumber,
  144. },
  145. mounted() {
  146. // demo();
  147. },
  148. methods: {},
  149. };
  150. </script>
  151. <style lang="scss">
  152. .add_car {
  153. .foot-btn {
  154. margin-top: 32rpx;
  155. margin-bottom: 32rpx;
  156. display: flex;
  157. justify-content: space-around;
  158. button {
  159. width: 654rpx;
  160. &:after {
  161. border-radius: 8rpx 8rpx 8rpx 8rpx;
  162. }
  163. }
  164. .cancel {
  165. button {
  166. color: rgba(138, 5, 84, 1) !important;
  167. }
  168. }
  169. }
  170. .form-value {
  171. width: 435rpx;
  172. input {
  173. width: 100%;
  174. }
  175. }
  176. .sj-select {
  177. display: flex;
  178. flex-wrap: wrap;
  179. margin-top: 32rpx;
  180. .select-item {
  181. text-align: center;
  182. line-height: 80rpx;
  183. width: 225rpx;
  184. height: 80rpx;
  185. background: rgba(255, 255, 255, 1);
  186. border-radius: 0rpx 0rpx 0rpx 0rpx;
  187. border: 2rpx solid #eaeff6;
  188. }
  189. .iselected {
  190. background: #ededed;
  191. }
  192. .isuse {
  193. background: rgba(142, 139, 228, 1);
  194. }
  195. }
  196. .sj-select-title {
  197. display: flex;
  198. align-items: center;
  199. .legend {
  200. display: flex;
  201. align-items: center;
  202. margin-right: 32rpx;
  203. }
  204. .sj-label {
  205. margin-right: 64rpx;
  206. }
  207. .white-legend {
  208. margin-right: 16rpx;
  209. width: 28rpx;
  210. height: 28rpx;
  211. background: #ffffff;
  212. border-radius: 0rpx 0rpx 0rpx 0rpx;
  213. border: 2rpx solid #e9e9e9;
  214. }
  215. .purple-legend {
  216. margin-right: 16rpx;
  217. width: 28rpx;
  218. height: 28rpx;
  219. background: #8e8be4;
  220. border-radius: 0rpx 0rpx 0rpx 0rpx;
  221. }
  222. }
  223. .bottom-form {
  224. background: #ffffff;
  225. padding: 32rpx;
  226. box-sizing: border-box;
  227. .mt-select {
  228. display: flex;
  229. flex-wrap: wrap;
  230. .select-item {
  231. border-radius: 8rpx 8rpx 8rpx 8rpx;
  232. padding: 12rpx 30rpx;
  233. margin-left: 5rpx;
  234. margin-right: 5rpx;
  235. margin-bottom: 32rpx;
  236. background: rgba(245, 247, 250, 1);
  237. }
  238. }
  239. }
  240. .historyList {
  241. display: none;
  242. // display: flex;
  243. justify-content: flex-start;
  244. flex-wrap: wrap;
  245. .historyList-item {
  246. padding: 10rpx 15rpx;
  247. display: flex;
  248. text-align: center;
  249. font-weight: 400;
  250. color: #666666;
  251. background: #f5f7fa;
  252. border-radius: 8rpx 8rpx 8rpx 8rpx;
  253. margin-left: 5rpx;
  254. margin-right: 5rpx;
  255. .btn {
  256. margin-left: 15rpx;
  257. }
  258. }
  259. }
  260. .form {
  261. padding: 32rpx 32rpx;
  262. display: flex;
  263. background: #ffffff;
  264. min-height: 112rpx;
  265. align-items: center;
  266. box-sizing: border-box;
  267. .form-label {
  268. font-weight: 400;
  269. font-size: 32rpx;
  270. color: #333333;
  271. margin-right: 64rpx;
  272. .form-requird {
  273. color: red;
  274. }
  275. }
  276. }
  277. .pdt32 {
  278. padding-top: 32rpx;
  279. }
  280. .pdb32 {
  281. padding-bottom: 32rpx;
  282. }
  283. .mb32 {
  284. margin-bottom: 32rpx;
  285. }
  286. .mt32 {
  287. margin-top: 32rpx;
  288. }
  289. .bd_bottom {
  290. border-bottom: 2rpx #e6e6e6 solid;
  291. }
  292. }
  293. </style>