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/materialdesignicons.min.css">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/vuetify.min.css">

    <style>
        html, body {
            width: 100%;
            heigh: 100%;
            margin: 0;
            padding: 0;
        }
        .back {
            background-image: url('//repo.bfw.wiki/bfwrepo/image/5e5ef0b278727.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 translate="no">
    <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 colo.........完整代码请登录后点击上方下载按钮下载查看