提交代码

vue-demo/src/plugins/vuetify.js

 import Vue from 'vue'
 import Vuetify from 'vuetify/lib/framework'
-
+import 'vuetify/dist/vuetify.min.css'
 Vue.use(Vuetify)
 
 export default new Vuetify({

vue-demo/src/router/index.js

 import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../views/Home.vue'
-
 Vue.use(VueRouter)
 
 const routes = [

vue-demo/src/views/Login.vue

 <template>
-  <div class="login">
-    <v-row no-gutters>
-      <v-col>
-        <v-card color="primary">
-            <v-card-text>This card will always be 16:9 (unless you put more stuff in it)</v-card-text>
-        </v-card>
-      </v-col>
-      <v-col>
-        <v-card>
-          <v-card-text>
-            <div id="userInfo" class="my-4 subtitle-1">
+  <div>
+    <v-container>
+      <v-row no-gutters>
+        <v-col>
+          <v-card color="primary" dark>
+            <v-card-text>
+              <h2
+                class="white--text"
+                align="left"
+              >Elegant Design with unlimited features, built with love</h2>
+              <h6
+                align="left"
+              >Wrappixel helps developers to build organized and well-coded admin dashboards full of beautiful and feature rich modules.</h6>
+            </v-card-text>
+          </v-card>
+        </v-col>
+        <v-col>
+          <v-card>
+            <v-card-title>
               <div>
-                <img
-                  src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODNFNEJCQjFEQzIxMUU3OERFRkU4NjlBMUU3RjM5RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RDlBRDQ3QTg0NDExMUU3ODM2Nzk0NTIyNjExRUVBNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RDlBRDQ3OTg0NDExMUU3ODM2Nzk0NTIyNjExRUVBNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNDUyRjkxN0QwMjExRTdBMDg1OTk1ODJGNTVFMzcwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwNDUyRjkyN0QwMjExRTdBMDg1OTk1ODJGNTVFMzcwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+a5xIawAAAtZJREFUeNrsmEtIlFEUx520MRryUamtEzOIDKIghRZFjZtWQlaLoMdKjax1iyCidUnZRqIIsgcJ0aYX1SqjxyqqASFoG0UzJYHWMP0P/Ac+7J7r+WZuNsQc+OFw7nfP/fvde8937k0UCoWaSrZFNRVuVYH/vcA6l7Nj3SZL38WgF+wEm8Fq0MS2LPgAXoKH4D74OV/AqbevbALnMRFxDAyCFuWZNtINjoLP4AI4S/F/bYr3ggw46RHnspXsk2GM4AJrwSgY55sp1doYY5QxgwiUQDfBQMC1P8CYtSEEyrrpMw78FfwwPisxz5UrcA844mn/Ba6ANFgGloMUN5L4LvMZzYY4RkkCZZART/sk2AAOMJVMR9py9B0EXeCZJ85IJD3FEiippFVpk/WzDbwzTOV7sJ19XNbKsWIJTDLPuew52A9mYmyKGfaZVNoHOaZZYFrJc7KeDoHZEnbuLPu61mQLx4wl0GXjnLI/vo7gNtdejr87HM9Jor6mxO6NI3Cj4r/l8HWCF0wbDaSPvk5jDHVMTeAah09K7ycO/xllFzaxba49ZSzXLJgFNjp82TmppGg7POvOtVSmlYKhsdxiIRnwU5e0xtcE5hy+lPJfPvIIeaC8qVS51cyU4t/q8J1QpizLNkuM2AJfK/7dSurYAibAdzJBX8YYQ7WE61yMkn8X/txVEnWXkgsttha80Sp5lPwJ6xuUtfNFOcNcKnHDJNm3LsQUy2fpvNImU3cV1McYp559ukMeO6VQ/aS09YPHoN0wRjuf7Q99Ls7yRKZZD8utMSbraOpooG+Mz/QEPRdH7AbTwpBnXR0mxZJfpnPpQt4sDDNtWKw5pDirwDzXz8VKvpvJs+rd59k4C3c347Hr4B44znW5Ikbfbzw8SaL+yLuaJWA9kA/DqhACi7tbrjFOswpORy6PmiObpXh5JDn1DsXlPXnylPlTV0lWvcCsCvzX9luAAQARlpHG7ldESwAAAABJRU5ErkJggg=="
-                />
-                <h2>Sign in</h2>
-                <h6>
-                  Don't have an account?
-                  <a href>Sign Up</a>
-                </h6>
+                <v-row>
+                  <v-col align="left">
+                    <img
+                      src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2xpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDowODNFNEJCQjFEQzIxMUU3OERFRkU4NjlBMUU3RjM5RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo5RDlBRDQ3QTg0NDExMUU3ODM2Nzk0NTIyNjExRUVBNCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo5RDlBRDQ3OTg0NDExMUU3ODM2Nzk0NTIyNjExRUVBNCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNDUyRjkxN0QwMjExRTdBMDg1OTk1ODJGNTVFMzcwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwNDUyRjkyN0QwMjExRTdBMDg1OTk1ODJGNTVFMzcwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+a5xIawAAAtZJREFUeNrsmEtIlFEUx520MRryUamtEzOIDKIghRZFjZtWQlaLoMdKjax1iyCidUnZRqIIsgcJ0aYX1SqjxyqqASFoG0UzJYHWMP0P/Ac+7J7r+WZuNsQc+OFw7nfP/fvde8937k0UCoWaSrZFNRVuVYH/vcA6l7Nj3SZL38WgF+wEm8Fq0MS2LPgAXoKH4D74OV/AqbevbALnMRFxDAyCFuWZNtINjoLP4AI4S/F/bYr3ggw46RHnspXsk2GM4AJrwSgY55sp1doYY5QxgwiUQDfBQMC1P8CYtSEEyrrpMw78FfwwPisxz5UrcA844mn/Ba6ANFgGloMUN5L4LvMZzYY4RkkCZZART/sk2AAOMJVMR9py9B0EXeCZJ85IJD3FEiippFVpk/WzDbwzTOV7sJ19XNbKsWIJTDLPuew52A9mYmyKGfaZVNoHOaZZYFrJc7KeDoHZEnbuLPu61mQLx4wl0GXjnLI/vo7gNtdejr87HM9Jor6mxO6NI3Cj4r/l8HWCF0wbDaSPvk5jDHVMTeAah09K7ycO/xllFzaxba49ZSzXLJgFNjp82TmppGg7POvOtVSmlYKhsdxiIRnwU5e0xtcE5hy+lPJfPvIIeaC8qVS51cyU4t/q8J1QpizLNkuM2AJfK/7dSurYAibAdzJBX8YYQ7WE61yMkn8X/txVEnWXkgsttha80Sp5lPwJ6xuUtfNFOcNcKnHDJNm3LsQUy2fpvNImU3cV1McYp559ukMeO6VQ/aS09YPHoN0wRjuf7Q99Ls7yRKZZD8utMSbraOpooG+Mz/QEPRdH7AbTwpBnXR0mxZJfpnPpQt4sDDNtWKw5pDirwDzXz8VKvpvJs+rd59k4C3c347Hr4B44znW5Ikbfbzw8SaL+yLuaJWA9kA/DqhACi7tbrjFOswpORy6PmiObpXh5JDn1DsXlPXnylPlTV0lWvcCsCvzX9luAAQARlpHG7ldESwAAAABJRU5ErkJggg=="
+                    />
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col align="left">
+                    <h2>Sign in</h2>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col align="left">
+                    <h6 class="subtitle-1">
+                      Don't have an account?
+                      <a href>Sign Up</a>
+                    </h6>
+                  </v-col>
+                </v-row>
               </div>
-              <div>
-                <form @submit.prevent="submit">
-                  <v-text-field
-                    v-model="name"
-                    :counter="10"
-                    :error-messages="errors"
-                    label="E-mail"
-                    required
-                  ></v-text-field>
-                  <v-text-field
-                    v-model="pwd"
-                    :counter="10"
-                    :error-messages="errors"
-                    label="Password"
-                    required
-                  ></v-text-field>
-                  <v-row align="center">
+            </v-card-title>
+            <v-card-text>
+              <form @submit.prevent="submit">
+                <v-row>
+                  <v-col>
+                    <v-text-field
+                      v-model="name"
+                      :rules="[rules.required]"
+                      :error-messages="errors"
+                      label="E-mail"
+                      outlined
+                      required
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col>
+                    <v-text-field
+                      :append-icon="show ? 'mdi-eye' : 'mdi-eye-off'"
+                      :type="show ? 'text' : 'password'"
+                      name="input-10-2"
+                      label="Password"
+                      outlined
+                      value
+                      @click:append="show = !show"
+                    ></v-text-field>
+                  </v-col>
+                </v-row>
+                <v-row align="center">
+                  <v-col align="left">
                     <v-checkbox
                       v-model="checkbox"
                       :error-messages="errors"
@@ -45,26 +78,49 @@
                       type="checkbox"
                       required
                     ></v-checkbox>
-                    <a href>Forgot pwd?</a>
-                  </v-row>
-                  <v-btn
-                    class="mr-4"
-                    type="submit"
-                    :disabled="invalid"
-                    color="primary"
-                    block
-                  >SIGN IN</v-btn>
-                </form>
-              </div>
-              <div></div>
-            </div>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-    <!-- <div class>
-      <h2>Elegant Design with unlimited features, built with love</h2>
-      <div>Wrappixel helps developers to build organized and well-coded admin dashboards full of beautiful and feature rich modules.</div>
-    </div>-->
+                  </v-col>
+                  <v-col align="right">
+                    <a class="link" href>Forgot pwd?</a>
+                  </v-col>
+                </v-row>
+                <v-row>
+                  <v-col>
+                    <v-btn
+                      class="mr-4"
+                      type="submit"
+                      :disabled="invalid"
+                      color="primary"
+                      block
+                    >SIGN IN</v-btn>
+                  </v-col>
+                </v-row>
+              </form>
+            </v-card-text>
+            <v-card-actions>
+              <v-spacer></v-spacer>
+              <v-btn text>Twitter</v-btn>
+              <v-btn text>Github</v-btn>
+              <v-spacer></v-spacer>
+            </v-card-actions>
+          </v-card>
+        </v-col>
+      </v-row>
+    </v-container>
   </div>
 </template>
+
+<script>
+export default {
+  data () {
+    return {
+      show: false,
+      password: 'Password',
+      rules: {
+        required: value => !!value || 'Required.',
+        emailMatch: () => 'The email and password you entered don\'t match'
+      }
+    }
+  }
+}
+
+</script>