小熊登录页 加入

 package.json

@@ -14,6 +14,7 @@
        "axios": "^0.24.0",
        "babel-plugin-import": "^1.13.3",
        "core-js": "^2.6.5",
        "jquery": "^3.6.0",
        "jsdom": "^18.1.1",
        "location": "0.0.1",
        "mockjs2": "^1.0.8",

 src/api/appManage.js

@@ -4,7 +4,7 @@
 * @author yubaoshan
 * @date 2020年4月23日12:10:57
 */
import { axios } from '@/utils/request'
import { axios } from '../utils/request.js'

/**
 * 系统应用列表

 src/assets/img/body.png

 src/assets/img/eye-doe.png

 src/assets/img/eye.png

 src/assets/img/face.png

 src/assets/img/left-arm.png

 src/assets/img/left-ear.png

 src/assets/img/mouth-circle.png

 src/assets/img/mouth-closed.png

 src/assets/img/mouth-half.png

 src/assets/img/mouth-open.png

 src/assets/img/mouth-smile.png

 src/assets/img/muzzle.png

 src/assets/img/nose.png

 src/assets/img/password-hide.png

 src/assets/img/password-show.png

 src/assets/img/right-arm.png

 src/assets/img/right-ear.png

 src/assets/main.css

New file
@@ -0,0 +1,300 @@


.login-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: calc(3%);
    width: 380px;
    height: 480px;
    background: #35cfbb;
    border-radius: 10px;
    box-shadow: 0 0 16px #333;
    opacity: 0.85;
}

/*密码框输入状态*/
.login-animate,
.password-animate {
    width: 11em;
    height: 11em;
    border-radius: 6em;
    background: #cefefb;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}

/*div下产生过度动画的时间*/
.login-animate div,
.password-animate div {
    transition: all 0.5s;
    -o-transition: all 0.5s;
    /* Opera */
    -moz-transition: all 0.5s;
    /* Firefox 4 */
    -webkit-transition: all 0.5s;
    /* Safari and Chrome */
}

.login-animate .body {
    background-image: url(./img/body.png);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
    width: 6.9em;
    height: 5.5em;
    position: absolute;
    bottom: -2em;
    left: calc(50% - 3.4em);
    z-index: 0;
}

.login-animate .head {
    background-image: url(./img/face.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 7.3em;
    height: 6.3em;
    position: absolute;
    bottom: 1em;
    bottom: 1.15em;
    left: calc(50% - 3.6em);
    z-index: 1;
    -webkit-transform: rotate(0deg);
    -ms-transform: skew(30deg);
}

.login-animate .left-ear {
    background-image: url(./img/left-ear.png);
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    width: 3em;
    height: 3.5em;
    position: absolute;
    bottom: 4.8em;
    left: calc(50% - 4.4em);
}


.height-eys-doe {
    background-image: url(./img/eye-doe.png) !important;
}

.login-animate .right-ear {
    background-image: url(./img/right-ear.png);
    background-size: 86%;
    background-repeat: no-repeat;
    background-position: center;
    width: 3em;
    height: 3.5em;
    position: absolute;
    bottom: 4.55em;
    left: calc(50% + 1.5em);
}

.login-animate .left-eye {
    background-image: url(./img/eye.png);
    background-size: 86%;
    background-repeat: no-repeat;
    background-position: center;
    width: 1em;
    height: 1em;
    position: absolute;
    bottom: 3.55em;
    left: calc(50% - 2.3em);
}

.login-animate .right-eye {
    background-image: url(./img/eye.png);
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    width: 1em;
    height: 1em;
    position: absolute;
    bottom: 3.55em;
    left: calc(50% + 1.25em);
}

.login-animate .face {
    background-image: url(./img/muzzle.png);
    background-size: 78%;
    background-repeat: no-repeat;
    background-position: center;
    width: 5.0em;
    height: 4em;
    position: absolute;
    bottom: 0em;
    left: calc(50% - 2.5em);
}

.login-animate .nose {
    background-image: url(./img/nose.png);
    background-size: 95%;
    background-repeat: no-repeat;
    background-position: center;
    width: 1em;
    height: 1em;
    position: absolute;
    top: 0.6em;
    left: calc(50% - 0.5em);
}

.login-animate .mouth {
    background-image: url(./img/mouth-smile.png);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    width: 2em;
    height: 1em;
    position: absolute;
    bottom: 1.0em;
    left: calc(50% - 1em);
}

.login-animate .left-arm {
    background-image: url(./img/left-arm.png);
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    width: 3em;
    height: 7em;
    position: absolute;
    bottom: -7.5em;
    left: 2em;
    z-index: 2;
    transition: bottom 0.5s;
}

.login-animate .right-arm {
    background-image: url(./img/right-arm.png);
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    width: 3em;
    height: 7em;
    position: absolute;
    bottom: -7.5em;
    left: 6em;
    z-index: 2;
    transition: bottom 0.5s;
}

.password-animate .mouth.show {
    width: 1em;
    left: calc(50% - 0.5em);
    background-image: url(./img/mouth-circle.png);
}

.password-animate .left-arm.show,
.password-animate .right-arm.show {
    bottom: -1.7em !important;
}

.password-animate .left-arm,
.password-animate .right-arm {
    bottom: -0.5em;
}

.username-animate .left-ear {
    left: 1.5em;
}

.username-animate .right-ear {
    left: 7em;
    bottom: 3.9em;
}

.username-animate .left-eye {
    left: 0.5em;
    bottom: 3.0em;
}

/*双眼发光*/
.username-animate .left-eye.doe,
.username-animate .right-eye.doe {
    background-image: url(./img/eye-doe.png);
}

/*点击输入的时候各部位移动位置*/
.username-animate .right-eye {
    left: 4em;
    bottom: 3.0em;
}

.username-animate .face {
    left: 1em;
    bottom: -0.4em;
}

.username-animate .nose {
    left: 1.4em;
    top: 0.65em;
}

.username-animate .mouth {
    bottom: 0.75em;
    background-image: url(./img/mouth-half.png);
}

.username-animate .mouth.doe {
    background-image: url(./img/mouth-open.png);
    height: 2em;
    bottom: 0.5em;
}

.login-form {
    width: calc(65%);
    padding: 0 2.5em;

}

.username,
.password {
    position: relative;
    width: 100%;
    margin: 20px 0;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 5px 0 #333;
}

.username>input,
.password>input {
    /* width: calc(100% - 20px); */
    width: calc(100%);
    padding: 0 10px;
    height: 2.5em;
    border: 0;
    border-radius: 5px;
}

.password>input {
    /* width: calc(100% - 3.3em); */
    width: calc(100%);
    padding: 0 2.3em 0 1em;
}

.pwd-eye {
    width: 1.2em;
    height: 1.2em;
    position: absolute;
    top: calc(50% - 0.6em);
    right: 0.5em;
    background-size: 85%;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('./img/password-show.png');
}

.pwd-eye-show {
    background-image: url('./img/password-show.png');
}


.pwd-eye-hide{
    background-image: url('./img/password-hide.png');
}

 src/components/fixed/header.vue

@@ -2,10 +2,11 @@
    <a-row type="flex" justify="start">
        <a-col v-bind="showSmall">
            <div class="menu">
                <router-link to="/main1">Home »</router-link>
                <router-link to="/main2">乐谱搜索 »</router-link>
                <router-link to="/main3">我的网盘 »</router-link>
                <router-link to="/main4">友人帐 »</router-link>
                <router-link to="/main1">Home</router-link>
                <router-link to="/main2">乐谱搜索</router-link>
                <router-link to="/main3">我的网盘</router-link>
                <router-link to="/main4">友人帐</router-link>
                <router-link to="/login">登录</router-link>
            </div>
        </a-col>
        <a-col v-bind="showMain">

 src/components/group/tempBoxActicle.v

 src/components/mini/box-new-article.vue

@@ -140,7 +140,7 @@
    }

    .recent-post-item * {
        cursor: url(@cursorURL), auto !important;
        //cursor: url(@cursorURL), auto !important;
        font-size: @global-font-size;
        color: @font-color;
    }

 src/components/mini/box1-info.vue

@@ -17,7 +17,7 @@
</template>

<script>
    import { getAppPage } from '/src/api/appManage.js'
    import { getAppPage } from '../../api/appManage.js'
    export default {
        name: "box",
        data() {

 src/components/mini/box11-login.vue

New file
@@ -0,0 +1,235 @@
<template>

    <div class="login-block">
        <div class="login-animate  ">
            <div class="left-ear"></div>
            <div class="right-ear"></div>
            <div class="head">
                <div class="left-eye"></div>
                <div class="right-eye"></div>
                <div class="face">
                    <div class="nose"></div>
                    <div class="mouth"></div>
                </div>
            </div>
            <div class="body"></div>
            <div class="left-arm"></div>
            <div class="right-arm"></div>
        </div>

        <div class="login-form">
            <div class="username">
                <input type="text" name="username" autocomplete="off">
            </div>
            <div class="password ">
                <input type="password" name="password">
                <div class="pwd-eye" data-flag="hide"></div>
            </div>
            <div class="login">
                <button id="focus" @click="myLogin">SIGN IN</button>
            </div>
        </div>
    </div>

</template>

<script>
    import $ from 'jquery'
    export default {
        components: {},
        props: {},
        data() {
            return {}
        },
        mounted() {
            $(".pwd-eye").hide();
            $(".pwd-eye").click(function() {
                var flag = $(this).attr('data-flag');

                $(this).attr('data-flag', flag == 'show' ? 'hide' : 'show');
                if (flag == 'show') {
                    $(this).addClass('pwd-eye-show');
                    $(this).removeClass('pwd-eye-hide');
                } else {
                    $(this).removeClass('pwd-eye-show');
                    $(this).addClass('pwd-eye-hide');
                }

                $('input[name="password"]').attr('type', flag == 'show' ? 'password' : 'text');

                if (flag != 'show' && $('input[name="password"]').val() != '') {
                    $('.left-arm').addClass('show');
                    $('.mouth').addClass('show');
                    $('.right-arm').addClass('show');
                } else {
                    $('.left-arm').removeClass('show');
                    $('.mouth').removeClass('show');
                    $('.right-arm').removeClass('show');
                }
            });

            $('input[name="username"]').focus(function() {
                $(".login-animate").addClass('username-animate');
                $(".login-animate").removeClass('password-animate');
                var length = $(this).val().length;
                getposition(length);
            });

            $('input[name="username"]').bind('input', function() {
                var length = $(this).val().length;
                getposition(length);
            });

            function getposition(length) {
                //计算当前输入字节长度
                var face = parseFloat(1.5 / 36 * length);
                var nose = parseFloat(1 / 36 * length);
                var mouth = parseFloat(1 / 36 * length);
                var left_eye = parseFloat(2 / 36 * length);
                var right_eye = parseFloat(2 / 36 * length);
                var left_ear = parseFloat(1 / 36 * length);
                var right_ear = parseFloat(2 / 36 * length);

                //头部旋转
                if (length >= 0 && length <= 25) {
                    $('.head').css('-webkit-transform', "rotate(" + (10 - length / 2) + "deg)");
                }

                //左边为初始值
                $('.face').css('left', 0.8 + (face > 0.5 ? 0.5 : face) + 'em');
                $('.nose').css('left', 1.4 + (nose > 0.6 ? 0.6 : nose) + 'em');
                $('.mouth doe').css('left', 0.8 + (mouth > 0.8 ? 0.8 : mouth) + 'em');

                $('.left-eye').css('left', 0.9 + (left_eye > 0.8 ? 0.8 : left_eye) + 'em');
                $('.right-eye').css('left', 4.3 + (right_eye > 0.7 ? 0.7 : right_eye) + 'em');

                $('.left-ear').css('left', 1.9 - (left_ear > 0.5 ? 0.5 : left_ear) + 'em');
                $('.right-ear').css('left', 7.2 - (right_ear > 0.5 ? 0.5 : right_ear) + 'em');
                $('.right-ear').css('bottom', 3.9 + (right_ear > 0.7 ? 0.7 : right_ear) + 'em');

                if (length >= 2) {
                    $('.left-eye').addClass('doe');
                    $('.right-eye').addClass('doe');
                    $('.mouth').addClass('doe');
                } else {
                    $('.left-eye').removeClass('doe');
                    $('.right-eye').removeClass('doe');
                    $('.mouth').removeClass('doe');
                }
            }


            //失去焦点
            $('input[name="username"]').blur(function() {
                var length = $(this).val().length;

                if (length > 2) {
                    $(".left-eye").addClass('height-eys-doe');
                    $(".right-eye").addClass('height-eys-doe');
                } else {
                    $(".left-eye").removeClass('height-eys-doe');
                    $(".right-eye").removeClass('height-eys-doe');
                }

                $(".login-animate").removeClass('username-animate');
                $(".login-animate").removeClass('password-animate');

                $('.head').css('-webkit-transform', "rotate(0deg)"); //回正头部


                $('.face').attr('style', '');
                $('.nose').attr('style', '');
                $('.left-eye').attr('style', '');
                $('.right-eye').attr('style', '');
                $('.left-ear').attr('style', '');
                $('.right-ear').attr('style', '');

                //如果账号和密码都不为空,呈嘴巴张开,眼睛发光 && $('input[name="password"]').val().length > 0
                if ($('input[name="username"]').val().length > 0) {
                    // $(".login-animate").addClass('username-animate');
                    // $(".left-eye").addClass('doe');
                }

            });

            $('input[name="password"]').focus(function() {
                $(".pwd-eye").show();
                $(".login-animate").removeClass('username-animate');
                $(".login-animate").addClass('password-animate');
            });

            $('input[name="password"]').blur(function() {
                if ($(this).val() == '') {
                    $(".pwd-eye").hide();
                    $(".login-animate").removeClass('username-animate');
                    $(".login-animate").removeClass('password-animate');
                }
            });
        },
        methods: {
            myLogin() {
                this.$message.info("口令错误啦..")
            }
        }
    }
</script>

<style scoped="">
    @import url("../../assets/main.css");

    button:active {
        transform: scale(1.23);
    }

    button:focus {
        outline: none;
    }

    button.ghost {
        background: transparent;
        border-color: #fff;
    }

    button {
        border-radius: 20px;
        border: 1px solid #fff;
        /*background: #3dceba;*/
        background: #00b69d;
        color: #fff;
        font-size: 12px;
        font-weight: bold;
        padding: 12px 45px;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: transform 80ms ease-in;
        cursor: pointer;
        /*margin-left: calc(25%);
            position: relative;*/
    }

    .login {
        -webkit-animation: free_download 1s linear alternate infinite;
        animation: free_download 1s linear alternate infinite;
        padding: 0px 15px 0px;
    }

    @-webkit-keyframes free_download {
        0% {
            -webkit-transform: scale(0.9);
        }

        100% {
            -webkit-transform: scale(1);
        }
    }

    @keyframes free_download {
        0% {
            transform: scale(0.9);
        }

        100% {
            transform: scale(1);
        }
    }
</style>

 src/components/mini/box9-netFile.vue

@@ -1,5 +1,5 @@
<template>
    <div class="module-box">
    <div class="">
        <!-- <iframe src="http://yun.gofor.live/" width="100%" height="800" frameborder="0" scrolling="auto" id="iframename" name="iframename"></iframe> -->
        <iframe src="http://t.inleft.com/share/" width="100%" height="800" frameborder="0" scrolling="auto" id="iframename" name="iframename"></iframe>
    </div>
@@ -11,7 +11,6 @@
        props: {},
        data() {
            return {
				
            }
        },
        methods: {
@@ -21,7 +20,6 @@
</script>

<style>
    .module-box{
    }
	
     
</style>

 src/components/swichLabel/main5-show.vue

New file
@@ -0,0 +1,25 @@
<template>
    <div class="blog-main">
        <div class="login-box">
            <login></login>
        </div>
    </div>
</template>

<script>
    import login from "../mini/box11-login.vue"
    export default {
        components: {
            login,
        },
    }
</script>

<style lang="less">
    .login-box {
        display: flex;
        justify-content: center;

        min-height: 700px;
    }
</style>

 src/config/router.config.js

@@ -6,6 +6,7 @@
import main2 from '../components/swichLabel/main2-show.vue'
import main3 from '../components/swichLabel/main3-show.vue'
import main4 from '../components/swichLabel/main4-show.vue'
import login from '../components/swichLabel/main5-show.vue'

import box1 from '../components/mini/box1-info.vue'
import tagTime from '../components/mini/tagTime.vue'
@@ -73,6 +74,9 @@
            {
                path: '/main4',
                component: main4,
            }, {
                path: '/login',
                component: login,
            },