init project

resources/js/vue/views/MyInfo.vue

@@ -0,0 +1,121 @@
+<template>
+  <v-form>
+    <v-container grid-list-xs fluid>
+      <material-card
+        color="black"
+        title="My Info">
+        <v-layout align-center justify-center wrap class="px-5 my-3">
+          <v-flex xs12 sm4 md4>
+            <v-text-field
+              name="username"
+              label="User Name"
+              color="black"
+              v-model="username"
+              id="id1"
+              class="pa-2"
+            ></v-text-field>
+          </v-flex>
+          <v-flex xs12 sm4 md4>
+            <v-select
+              :items="items"
+              label="Gender"
+              name="gender"
+              v-model="gender"
+              single-line
+              id="id3"
+              class="pa-2"
+              color="black">
+            </v-select>
+          </v-flex>
+          <v-flex xs12 sm4 md4>
+            <v-text-field
+              name="cellnumber"
+              label="Cell Number"
+              v-model="cellnumber"
+              color="black"
+              class="pa-2"
+              id="id2"
+            ></v-text-field>
+          </v-flex>
+        </v-layout>
+        <v-layout align-center justify-center wrap class="px-5 mb-3">
+          <v-flex xs12 sm4 md4>
+            <v-text-field
+              name="emailaddress"
+              label="Email Address"
+              v-model="emailaddress"
+              id="id4"
+              class="px-2"
+              color="black"
+              style="padding-top:75px"
+            ></v-text-field>
+          </v-flex>
+          <v-flex xs12 sm8 md8>
+            <v-textarea
+              color="black"
+              v-model="address"
+              class="pa-2"
+              name="address">
+              <template v-slot:label>
+                <div>
+                  Address
+                </div>
+              </template>
+            </v-textarea>
+          </v-flex>
+        </v-layout>
+        <v-layout row wrap justify-center align-center>
+          <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+            <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+              <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+              <span class="white--text">SAVE</span>
+            </v-btn>
+          </v-flex>
+          <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+            <router-link to="/">
+              <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                <v-icon class="black--text">keyboard_arrow_left</v-icon>
+                <span class="black--text">Back</span>
+              </v-btn>
+            </router-link>
+          </v-flex>
+        </v-layout>
+      </material-card>
+    </v-container>
+  </v-form>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      username:'',
+      gender:'',
+      cellnumber:'',
+      emailaddress:'',
+      address:'',
+
+      items: [
+        'Item 1',
+        'Item 2',
+        'Item 3',
+        'Item 4'
+      ],
+    }
+      // const Info = Object.freeze({
+      //   username:'',
+      //   cellnumber:'',
+      //   emailaddress:'',
+      //   address:''
+      //   gender:0
+      // })
+      // return {
+      //   InfoForm : Object.assign({} ,Info),
+      //   Info
+      // }
+  }
+}
+</script>
+
+<style lang="css" scoped>
+</style>