From 6d105720dba848e7413fe6709f68d85f0a264fbf Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Sun, 23 Jan 2022 23:03:29 +0800 Subject: [PATCH] 小熊登录页 加入 --- src/assets/img/mouth-open.png | 0 src/assets/img/password-show.png | 0 src/components/swichLabel/main5-show.vue | 25 ++ src/assets/img/eye.png | 0 src/components/fixed/header.vue | 9 src/assets/img/body.png | 0 src/components/group/tempBoxActicle.v | 0 src/assets/img/eye-doe.png | 0 src/assets/img/left-arm.png | 0 src/assets/img/right-ear.png | 0 src/components/mini/box-new-article.vue | 2 src/config/router.config.js | 4 src/api/appManage.js | 2 src/assets/img/mouth-circle.png | 0 src/assets/img/face.png | 0 src/assets/main.css | 300 ++++++++++++++++++++++++++++++ src/components/mini/box11-login.vue | 235 +++++++++++++++++++++++ src/assets/img/mouth-smile.png | 0 src/assets/img/mouth-closed.png | 0 src/assets/img/nose.png | 0 src/assets/img/muzzle.png | 0 src/assets/img/password-hide.png | 0 src/assets/img/mouth-half.png | 0 src/assets/img/left-ear.png | 0 package.json | 1 src/components/mini/box9-netFile.vue | 6 src/assets/img/right-arm.png | 0 src/components/mini/box1-info.vue | 2 28 files changed, 575 insertions(+), 11 deletions(-) diff --git a/package.json b/package.json index 828db2c..cde43cf 100644 --- a/package.json +++ b/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", diff --git a/src/api/appManage.js b/src/api/appManage.js index d03bcc0..af30a75 100644 --- a/src/api/appManage.js +++ b/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' /** * 系统应用列表 diff --git a/src/assets/img/body.png b/src/assets/img/body.png new file mode 100644 index 0000000..9df7e50 --- /dev/null +++ b/src/assets/img/body.png Binary files differ diff --git a/src/assets/img/eye-doe.png b/src/assets/img/eye-doe.png new file mode 100644 index 0000000..8207c0c --- /dev/null +++ b/src/assets/img/eye-doe.png Binary files differ diff --git a/src/assets/img/eye.png b/src/assets/img/eye.png new file mode 100644 index 0000000..cd15a2d --- /dev/null +++ b/src/assets/img/eye.png Binary files differ diff --git a/src/assets/img/face.png b/src/assets/img/face.png new file mode 100644 index 0000000..8e3b1f2 --- /dev/null +++ b/src/assets/img/face.png Binary files differ diff --git a/src/assets/img/left-arm.png b/src/assets/img/left-arm.png new file mode 100644 index 0000000..e97bf3e --- /dev/null +++ b/src/assets/img/left-arm.png Binary files differ diff --git a/src/assets/img/left-ear.png b/src/assets/img/left-ear.png new file mode 100644 index 0000000..1e764e3 --- /dev/null +++ b/src/assets/img/left-ear.png Binary files differ diff --git a/src/assets/img/mouth-circle.png b/src/assets/img/mouth-circle.png new file mode 100644 index 0000000..546e64c --- /dev/null +++ b/src/assets/img/mouth-circle.png Binary files differ diff --git a/src/assets/img/mouth-closed.png b/src/assets/img/mouth-closed.png new file mode 100644 index 0000000..79b2382 --- /dev/null +++ b/src/assets/img/mouth-closed.png Binary files differ diff --git a/src/assets/img/mouth-half.png b/src/assets/img/mouth-half.png new file mode 100644 index 0000000..d80c22c --- /dev/null +++ b/src/assets/img/mouth-half.png Binary files differ diff --git a/src/assets/img/mouth-open.png b/src/assets/img/mouth-open.png new file mode 100644 index 0000000..7ed15a7 --- /dev/null +++ b/src/assets/img/mouth-open.png Binary files differ diff --git a/src/assets/img/mouth-smile.png b/src/assets/img/mouth-smile.png new file mode 100644 index 0000000..5c06fe3 --- /dev/null +++ b/src/assets/img/mouth-smile.png Binary files differ diff --git a/src/assets/img/muzzle.png b/src/assets/img/muzzle.png new file mode 100644 index 0000000..72cb5f5 --- /dev/null +++ b/src/assets/img/muzzle.png Binary files differ diff --git a/src/assets/img/nose.png b/src/assets/img/nose.png new file mode 100644 index 0000000..c297800 --- /dev/null +++ b/src/assets/img/nose.png Binary files differ diff --git a/src/assets/img/password-hide.png b/src/assets/img/password-hide.png new file mode 100644 index 0000000..bc15a8e --- /dev/null +++ b/src/assets/img/password-hide.png Binary files differ diff --git a/src/assets/img/password-show.png b/src/assets/img/password-show.png new file mode 100644 index 0000000..f0a0833 --- /dev/null +++ b/src/assets/img/password-show.png Binary files differ diff --git a/src/assets/img/right-arm.png b/src/assets/img/right-arm.png new file mode 100644 index 0000000..f0611b7 --- /dev/null +++ b/src/assets/img/right-arm.png Binary files differ diff --git a/src/assets/img/right-ear.png b/src/assets/img/right-ear.png new file mode 100644 index 0000000..fb3b050 --- /dev/null +++ b/src/assets/img/right-ear.png Binary files differ diff --git a/src/assets/main.css b/src/assets/main.css new file mode 100644 index 0000000..3f24f3b --- /dev/null +++ b/src/assets/main.css @@ -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'); +} \ No newline at end of file diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue index 8188297..57d88e8 100644 --- a/src/components/fixed/header.vue +++ b/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"> diff --git a/src/components/group/tempBoxActicle.vue b/src/components/group/tempBoxActicle.v similarity index 100% rename from src/components/group/tempBoxActicle.vue rename to src/components/group/tempBoxActicle.v diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue index 6f3fb0a..f8fd220 100644 --- a/src/components/mini/box-new-article.vue +++ b/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; } diff --git a/src/components/mini/box1-info.vue b/src/components/mini/box1-info.vue index 4e14603..0ffa087 100644 --- a/src/components/mini/box1-info.vue +++ b/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() { diff --git a/src/components/mini/box11-login.vue b/src/components/mini/box11-login.vue new file mode 100644 index 0000000..ca3fa7c --- /dev/null +++ b/src/components/mini/box11-login.vue @@ -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> diff --git a/src/components/mini/box9-netFile.vue b/src/components/mini/box9-netFile.vue index 77b7fab..4956bbd 100644 --- a/src/components/mini/box9-netFile.vue +++ b/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> diff --git a/src/components/swichLabel/main5-show.vue b/src/components/swichLabel/main5-show.vue new file mode 100644 index 0000000..003c08d --- /dev/null +++ b/src/components/swichLabel/main5-show.vue @@ -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> diff --git a/src/config/router.config.js b/src/config/router.config.js index 71f7d62..2190c80 100644 --- a/src/config/router.config.js +++ b/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, }, -- Gitblit v1.9.1