我如何在 vuetify 中设计“通过谷歌注册”

时间:2021-02-28 12:40:55

标签: vue.js vuetify.js

enter image description here

我在做一个员工监控项目,首页有注册页面和登录,但是我遇到了一些问题,包括: 我正在尝试做相同的表格,但是当我想“通过谷歌注册”时,我不知道我该怎么做,这件事是由图像定义的。 我也想写“注册”这个词,点进去就到了注册页面,这个东西也是通过图片标出来的。

这是包含注册页面代码的注册代码。 注册.vue:

<template>
  <div class="bg">
    <v-container>
      <v-layout row class="padding">
        <v-flex xs12 sm6 offset-sm3>
          <v-card
            class="mx-auto mt-5 pa-4 text-center secondary text-no-wrap"
            max-width="1000"
            id="limited-products"
          >
           <div>___________________________________ or __________________________________</div>
            <v-card-text>
              <v-container>  
                <form>
                  <v-layout row>
                    <v-flex xs12>
                      <v-text-field
                        label="name"
                        v-model="name"
                        type="text"
                        outlined
                        dense
                        required
                        color="#D50000"
                        class="myfont"
                      >
                        {{ name }}
                      </v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs12>
                      <v-text-field
                        label="email"
                        v-model="email"
                        type="text"
                        outlined
                        dense
                        required
                        color="#D50000"
                        class="myfont"
                      >
                        {{ email }}
                      </v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs12>
                      <v-text-field
                        label="password"
                        v-model="password"
                        type="text"
                        outlined
                        dense
                        required
                        color="#D50000"
                        class="myfont"
                      >
                        {{ password }}
                      </v-text-field>
                    </v-flex>
                  </v-layout>
                  <v-layout row>
                    <v-flex xs12>
                      <v-btn class="red accent-4 color myfont">
                        Sign up
                      </v-btn>
                    </v-flex>
                  </v-layout>                
                </form>                
              </v-container>
            </v-card-text>
            <div>Have you an account?</div>login
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.myfont {
  font-family: "Mansalva", cursive;
}
.color {
  color: #fafafa;
}
.padding {
  padding-top: 40px;
}
.paddingLeft {
  padding-left: 40px;
}
.bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-size: cover;
  transform: scale(1);
}
</style>

0 个答案:

没有答案
相关问题