SHARE
TWEET

Untitled

a guest Apr 25th, 2019 100 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
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top