tlacitka

src/App.vue

@@ -11,7 +11,11 @@
                     
                             <h2>Parametry letu</h2>
                             <p>
-                                <select v-model="travelType">
+                                 Tip cesty
+                                <br>
+
+                                <select class="vyber" v-model="travelType">
+                                   
                                      <option value="" disabled>Vyberte jednu možnost</option>
                                      <option v-for="(option, index) in travelTypes" :key="index" :value="option">
                                         {{ option.text }}
@@ -22,7 +26,9 @@
                             
                             <!-- volba destinace -->
                             <p>
-                                <select v-model="travelDestinaction">
+                                Destinace
+                                <br>
+                                <select class="vyber" v-model="travelDestinaction">
                                     <option  value="" disabled>Vyberte jednu možnost</option>
                                     <option  v-for="(option, index) in travelDestinactions" :key="index" :value="option">
                                         {{ option.text }}
@@ -36,7 +42,8 @@
                         
                         
                             <div v-if="travelType.value == 'O'" class="input-group">
-                                <label for="inputDepartureDate">Označte datum odletu</label>
+                                <label for="inputDepartureDate"></label>
+                                <p>Označte datum odletu</p>
                                 <v-date-picker v-model="departureRangeDate" :min-date="new Date()" value="" id=""/>
                             </div>
                             <div v-else class="input-group">
@@ -48,13 +55,13 @@
                         <div class="hlavni2">
                             <p>
                                 <label  for="inputPersonCount">Počet cestujících</label><br>
-                                <input v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="3">
+                                <input class="vyber1" v-on:change="personCountChange()" v-model="personCount" type="number" id="inputPersonCount" min="1" max="3">
                             </p>
                             
                             <!-- volba třídy E, B -->
                             <p>
                                 <label for="inputClassType">Volba třídy</label><br>
-                                <select v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
+                                <select class="vyber" v-on:change="chosenSeats = []" v-model="classType" id="inputClassType">
                                     <option value="" disabled>Vyberte jednu možnost</option>
                                     <option v-for="(option, index) in classTypes" :key="index" :value="option">
                                         {{ option.text }}
@@ -79,7 +86,7 @@
                             </div>
                             
                             <br>
-                            <button v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
+                            <button class="vyber" v-on:click="chosenSeats=[]">Odebrat všechna sedadla</button>
                         </div>
                     
                     </div>
@@ -210,6 +217,27 @@ export default {
 </script>
 
 <style>
+    .vyber1{
+        background-color: #0563af;
+        width: 158px;
+        padding: 12px;
+        border: none;
+        color: white;
+    }
+
+
+    .vyber{
+        background-color: #0563af;
+        padding: 12px;
+        border: none;
+        color: white;
+    }
+    .kalen{
+         background-color: #0563af;
+         color: white;
+
+    }
+