vue-form-wizard表单向导步骤表单效果代码-html代码-BFW代码库

vue-form-wizard表单向导步骤表单效果代码

代码语言：html

代码描述：vue-form-wizard表单向导步骤表单效果代码

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

<!DOCTYPE html>
<html lang="en" class="bg-gray-100 leading-normal text-sm">

<head>

    <meta charset="UTF-8">

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

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Mono'>

    <style>
        [v-cloak] {
            display: none;
        }

:focus {
            outline: 0;
        }

        body {
            font-family: "Fira Sans", sans-serif;
            line-height: 1.2;
        }

        pre {
            font-family: "Fira Mono", monospace;
        }

        .vue-form-wizard .wizard-tab-content {
            width: 100%;
            float: left;
            padding: 2rem 1rem;
        }
        .vue-form-wizard .wizard-nav {
            position: relative;
            text-align: center;
            display: -webkit-box;
            display: flex;
            flex-wrap: wrap;
        }
        .vue-form-wizard .wizard-nav li,
        .vue-form-wizard .wizard-nav a {
            -webkit-box-flex: 1;
            flex: 1;
            -webkit-box-align: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .vue-form-wizard .wizard-nav > li > a {
            color: #718096;
        }
        .vue-form-wizard .wizard-nav > li > a.disabled {
            pointer-events: none;
            cursor: default;
        }
        .vue-form-wizard .wizard-nav > li.active > a .wizard-icon {
            color: #fff;
        }
        .vue-form-wizard .wizard-nav .stepTitle {
            letter-spacing: 0.025em;
            text-transform: uppercase;
            font-size: 0.75rem;
            line-height: 2;
        }
        .vue-form-wizard .wizard-nav .wizard-icon-circle {
            width: 100%;
            background-color: #e2e8f0;
            border-radius: 0;
        }
        .vue-form-wizard .wizard-nav .wizard-icon-circle.checked:hover {
            background-color: #cbd5e0;
        }
        .vue-form-wizard .wizard-nav .wizard-icon-circle .wizard-icon-container {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
            justi.........完整代码请登录后点击上方下载按钮下载查看