[Archived]
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

Search.vue 1.8KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <template>
  2. <div class="main-form">
  3. <!-- <Card shadow style="flex: 1;"> -->
  4. <Form :model="formItem" label-position="top" :label-width="0" style="flex: 1;">
  5. <FormItem>
  6. <AutoComplete
  7. v-model="formItem.source"
  8. size="large"
  9. :data="routes"
  10. class="extra-large"
  11. placeholder="From where are you leaving?"
  12. style="width:300px"></AutoComplete>
  13. </FormItem>
  14. <FormItem>
  15. <AutoComplete
  16. v-model="formItem.destination"
  17. size="large"
  18. class="extra-large"
  19. :data="routes"
  20. placeholder="To where are you going?"
  21. style="width:300px"></AutoComplete>
  22. </FormItem>
  23. </Form>
  24. <!-- </Card> -->
  25. <Button style="height: 64px; font-weight: 700; font-size: 1.8em;" class="footer" type="primary" @click="handleSubmit()">Go</Button>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. data () {
  31. return {
  32. formItem: {
  33. source: '',
  34. destination: ''
  35. },
  36. routes: ['Ramallah', 'Nablus', 'Jenin', 'Bethlahem', 'Hebron', 'Gaza', 'Salfit']
  37. }
  38. },
  39. methods: {
  40. handleSubmit () {
  41. this.$router.push({path: 'schedule', query: { source: this.formItem.source, dest: this.formItem.destination }})
  42. }
  43. }
  44. }
  45. </script>
  46. <!-- Add "scoped" attribute to limit CSS to this component only -->
  47. <style>
  48. .extra-large input {
  49. height: 65px !important;
  50. text-align: center;
  51. }
  52. .extra-large input::-webkit-input-placeholder {
  53. color: #898989;
  54. }
  55. </style>
  56. <style scoped>
  57. .main-form {
  58. padding: 10px;
  59. display: flex;
  60. align-items: center;
  61. height: 100vh;
  62. margin-top: -50px;
  63. }
  64. .footer {
  65. position: absolute;
  66. bottom: 0;
  67. width: 90%;
  68. left: 5%;
  69. margin-bottom: 10px;
  70. }
  71. </style>