vue+vuetify实现一个简洁登录表单页面效果代码-html代码-BFW代码库

vue+vuetify实现一个简洁登录表单页面效果代码

代码语言：html

代码描述：vue+vuetify实现一个简洁登录表单页面效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900'>

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">

    <style>
        html, body {
            width: 100%;
            height: 100vh;
            margin: 0;
            padding: 0;
        }
        .back {
            width: 100%;
            height: 100vh;
            background-image: url('//repo.bfw.wiki/bfwrepo/image/60987bfc5afa0.png');
            background-size: cover;
            background-repeat: no-repeat;
        }

@keyframes opacity-in {
            from {
                opacity: 0.4;
            }
            to {
                opacity: 1;
            }
        }

@keyframes opacity-out {
            from {
                opacity: 1;
            }
            to {
                opacity: 0.4;
            }
        }

        .card-login {
            opacity: 0.4;
            animation-name: opacity-out;
            animation-duration: 2s;
        }

        .card-login:hover {
            opacity: 1;
            animation-name: opacity-in;
            animation-duration: 2s;
        }

        .alert-in {
            animation-name: opacity-in;
            animation-duration: 2s;
        }
    </style>



</head>

<body>
    <v-app id="app">
        <v-main>
            <v-container class="back" fill-height fluid>
                <v-row align="center" justify="center">
                    <v-col cols="12">
                        <v-dialog width="20%" v-model="alert">
                            <v-card>
                                <v-card-title>
                                    Login
                                </v-card-title>
                                <v-card-text>
                                    {{log}}
                                </v-card-text>
                                <v-card-actions>
                                    <v-spacer></v-spacer>
                                    <v-btn color="green darken-1" @click="alert = false&quo.........完整代码请登录后点击上方下载按钮下载查看