Guest User

Untitled

a guest
Apr 25th, 2019
122
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2. <v-container>
  3. <v-layout
  4. row wrap
  5. >
  6. <v-flex xs12>
  7. <v-img
  8. :src="require('../assets/icon.png')"
  9. class="my-3"
  10. contain
  11. height="200"
  12. ></v-img>
  13. </v-flex>
  14.  
  15.  
  16. <v-flex xs4 offset-xs4>
  17. <v-divider light></v-divider>
  18. </v-flex>
  19.  
  20. <v-flex xs6 offset-xs5>
  21. &nbsp;
  22. </v-flex>
  23.  
  24. <v-flex xs4 offset-xs4>
  25. <span class="red--text font-weight-light subheading">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ลองตอบคำถามดู เราจะเลือกวิชาที่ใช่ให้คุณเอง</span>
  26. </v-flex>
  27. <v-flex xs6 offset-xs5>
  28. &nbsp;
  29. </v-flex>
  30.  
  31. <v-flex xs2 offset-xs5>
  32. <v-layout row justify-center>
  33. <v-dialog v-model="dialog" persistent max-width="600px">
  34. <template v-slot:activator="{ on }">
  35. <v-btn color="#00BFA5" dark v-on="on">Answer Me</v-btn>
  36. </template>
  37. <v-card>
  38. <v-card-title>
  39. <span class="headline">คำถามทดสอบว่าคุณเหมาะกับวิชาไหน?</span>
  40. </v-card-title>
  41. <v-card-text>
  42. <v-container grid-list-md>
  43. <v-layout wrap>
  44. <v-flex xs12 sm6 md4>
  45. <v-text-field label="Legal first name*" required></v-text-field>
  46. </v-flex>
  47. <v-flex xs12 sm6 md4>
  48. <v-text-field label="Legal middle name" hint="example of helper text only on focus"></v-text-field>
  49. </v-flex>
  50. <v-flex xs12 sm6 md4>
  51. <v-text-field
  52. label="Legal last name*"
  53. hint="example of persistent helper text"
  54. persistent-hint
  55. required
  56. ></v-text-field>
  57. </v-flex>
  58. <v-flex xs12>
  59. <v-text-field label="Email*" required></v-text-field>
  60. </v-flex>
  61. <v-flex xs12>
  62. <v-text-field label="Password*" type="password" required></v-text-field>
  63. </v-flex>
  64. <v-flex xs12 sm6>
  65. <v-select
  66. :items="['0-17', '18-29', '30-54', '54+']"
  67. label="Age*"
  68. required
  69. ></v-select>
  70. </v-flex>
  71. <v-flex xs12 sm6>
  72. <v-autocomplete
  73. :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"
  74. label="Interests"
  75. multiple
  76. ></v-autocomplete>
  77. </v-flex>
  78. </v-layout>
  79. </v-container>
  80. <small>*indicates required field</small>
  81. <div class="text-xs-center">
  82. <v-dialog
  83. v-model="dialog2"
  84. width="500"
  85. >
  86. <template v-slot:activator="{ on }">
  87. <v-btn
  88. color="red lighten-2"
  89. dark
  90. v-on="on"
  91. >
  92. วิชาที่ใช่ของฉันคือ...!?
  93. </v-btn>
  94. </template>
  95.  
  96. <v-card>
  97. <v-card-title
  98. class="headline grey lighten-2"
  99. primary-title
  100. >
  101. คำตอบของคุณคือวิชา...
  102. </v-card-title>
  103.  
  104. <v-card-text>
  105. ข้อมูล
  106. </v-card-text>
  107.  
  108. <v-divider></v-divider>
  109.  
  110. <v-card-actions>
  111. <v-spacer></v-spacer>
  112. <v-btn
  113. color="primary"
  114. flat
  115. @click="dialog = false"
  116. >
  117. OK
  118. </v-btn>
  119. </v-card-actions>
  120. </v-card>
  121. </v-dialog>
  122. </div>
  123. </v-card-text>
  124.  
  125. <v-card-actions>
  126. <v-spacer></v-spacer>
  127. <v-btn color="blue darken-1" flat @click="dialog = false">Close</v-btn>
  128. </v-card-actions>
  129. </v-card>
  130. </v-dialog>
  131. </v-layout>
  132. </v-flex>
  133.  
  134.  
  135. </v-layout>
  136. </v-container>
  137.  
  138. </template>
  139.  
  140.  
  141. <script>
  142. export default {
  143. data: () => ({
  144. dialog: false,
  145. dialog2: false,
  146. })
  147. }
  148. </script>
RAW Paste Data