diff --git a/Yi.Bbs.Vue3/src/assets/styles/login.css b/Yi.Bbs.Vue3/src/assets/styles/login.css new file mode 100644 index 00000000..e92aa050 --- /dev/null +++ b/Yi.Bbs.Vue3/src/assets/styles/login.css @@ -0,0 +1,210 @@ +@charset "UTF-8"; +* { + margin: 0; + padding: 0; +} + +/*公共CSS*/ +.box { + width: 100vw; + height: 100vh; + background-color: #1d4359; +} + +.box .content { + box-shadow: 0px 1px 6px #3b4859; +} + +.box .content .login-wrapper h1 { + text-align: center; +} + +.box .content .login-wrapper .login-form .form-item { + margin: 20px 0; +} + +.box .content .login-wrapper .login-form .form-item span { + display: block; + margin: 5px 20px; + font-weight: 100; +} + +.box .content .login-wrapper .login-form .form-item .input-item { + width: 100%; + border-radius: 40px; + padding: 20px; + box-sizing: border-box; + font-size: 20px; + font-weight: 200; +} + +.box .content .login-wrapper .login-form .form-item .input-item:focus { + outline: none; +} + +.box .content .login-wrapper .login-form .login-btn { + width: 100%; + border-radius: 40px; + color: #fff; + border: 0; + font-weight: 100; + margin-top: 10px; + cursor: pointer; +} + +.box .content .login-wrapper .divider { + width: 100%; + margin: 20px 0; + text-align: center; + display: flex; + align-items: center; + justify-content: center; +} + +.box .content .login-wrapper .divider span:nth-child(1) { + flex: 1; +} + +.box .content .login-wrapper .divider span:nth-child(3) { + flex: 1; +} + +.box .content .login-wrapper .divider .line { + display: inline-block; + max-width: 30%; + width: 30%; +} + +.box .content .login-wrapper .divider .divider-text { + vertical-align: middle; + margin: 0px 20px; + line-height: 0px; + display: inline-block; + width: 100px; +} + +.box .content .login-wrapper .other-login-wrapper { + width: 100%; + display: flex; + justify-content: center; + align-items: center; +} + +.box .content .login-wrapper .other-login-item { + cursor: pointer; + border: 1px solid #d6dee4; + padding: 10px; + margin: 10px; +} + +/*一般大于手机的尺寸CSS*/ +@media (min-width: 767px) { + .box { + background-color: #f0f2f5; + } + .box .content { + width: 85vw; + height: 90vh; + background: url("@/assets/login_images/login_two.jpg") no-repeat; + background-size: 90% 100%; + position: absolute; + right: 15%; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 20px; + background-color: #fff; + } + .box .content .login-wrapper { + width: 25vw; + position: absolute; + right: 15%; + top: 50%; + transform: translateY(-50%); + } + .box .content .login-wrapper h1 { + text-align: center; + font-size: 45px; + color: #516473; + margin-bottom: 40px; + } + .box .content .login-wrapper .login-form { + margin: 10px 0; + } + .box .content .login-wrapper .login-form .form-item span { + color: #516473; + } + .box .content .login-wrapper .login-form .form-item .input-item { + height: 60px; + border: 1px solid #d6dee4; + } + .box .content .login-wrapper .login-form .login-btn { + height: 50px; + background-color: #3b4859; + font-size: 20px; + } + .box .content .login-wrapper .divider .line { + border-bottom: 1px solid #d6dee4; + } + .box .content .login-wrapper .other-login-item { + border-radius: 20px; + } + .box .content .login-wrapper .other-login-item img { + cursor: pointer; + width: 40px; + height: 40px; + } +} + +/*手机端CSS*/ +@media (max-width: 768px) { + .box .content { + width: 100vw; + height: 100vh; + background: url("@/assets/login_images/login_bg_phone.png") no-repeat; + background-size: 100% 100%; + display: flex; + align-items: flex-start; + justify-content: center; + } + .box .content .login-wrapper { + width: 70%; + height: 60%; + padding-top: 15%; + } + .box .content .login-wrapper h1 { + font-size: 30px; + color: #fff; + } + .box .content .login-wrapper .login-form .form-item { + margin: 10px 0; + } + .box .content .login-wrapper .login-form .form-item span { + color: #71818d; + } + .box .content .login-wrapper .login-form .form-item .input-item { + height: 30px; + border: 1px solid #71818d; + background-color: transparent; + color: #fff; + } + .box .content .login-wrapper .login-form .login-btn { + height: 40px; + background-color: #eb5f5d; + font-size: 16px; + } + .box .content .login-wrapper .divider .line { + border-bottom: 1px solid #fff; + } + .box .content .login-wrapper .divider .divider-text { + color: #fff; + } + .box .content .login-wrapper .other-login-item { + border-radius: 15px; + } + .box .content .login-wrapper .other-login-item img { + cursor: pointer; + width: 35px; + height: 35px; + } +} diff --git a/Yi.Bbs.Vue3/src/assets/styles/login.min.css b/Yi.Bbs.Vue3/src/assets/styles/login.min.css new file mode 100644 index 00000000..d82193f1 --- /dev/null +++ b/Yi.Bbs.Vue3/src/assets/styles/login.min.css @@ -0,0 +1 @@ +*{margin:0;padding:0}.box{width:100vw;height:100vh;background-color:#1d4359}.box .content{box-shadow:0px 1px 6px #3b4859}.box .content .login-wrapper h1{text-align:center}.box .content .login-wrapper .login-form .form-item{margin:20px 0}.box .content .login-wrapper .login-form .form-item span{display:block;margin:5px 20px;font-weight:100}.box .content .login-wrapper .login-form .form-item .input-item{width:100%;border-radius:40px;padding:20px;box-sizing:border-box;font-size:20px;font-weight:200}.box .content .login-wrapper .login-form .form-item .input-item:focus{outline:none}.box .content .login-wrapper .login-form .login-btn{width:100%;border-radius:40px;color:#fff;border:0;font-weight:100;margin-top:10px;cursor:pointer}.box .content .login-wrapper .divider{width:100%;margin:20px 0;text-align:center;display:flex;align-items:center;justify-content:center}.box .content .login-wrapper .divider span:nth-child(1){flex:1}.box .content .login-wrapper .divider span:nth-child(3){flex:1}.box .content .login-wrapper .divider .line{display:inline-block;max-width:30%;width:30%}.box .content .login-wrapper .divider .divider-text{vertical-align:middle;margin:0px 20px;line-height:0px;display:inline-block;width:100px}.box .content .login-wrapper .other-login-wrapper{width:100%;display:flex;justify-content:center;align-items:center}.box .content .login-wrapper .other-login-item{cursor:pointer;border:1px solid #d6dee4;padding:10px;margin:10px}@media (min-width: 767px){.box{background-color:#f0f2f5}.box .content{width:85vw;height:90vh;background:url("@/assets/login_images/login_two.jpg") no-repeat;background-size:90% 100%;position:absolute;right:15%;top:50%;left:50%;transform:translate(-50%, -50%);border-radius:20px;background-color:#fff}.box .content .login-wrapper{width:25vw;position:absolute;right:15%;top:50%;transform:translateY(-50%)}.box .content .login-wrapper h1{text-align:center;font-size:45px;color:#516473;margin-bottom:40px}.box .content .login-wrapper .login-form{margin:10px 0}.box .content .login-wrapper .login-form .form-item span{color:#516473}.box .content .login-wrapper .login-form .form-item .input-item{height:60px;border:1px solid #d6dee4}.box .content .login-wrapper .login-form .login-btn{height:50px;background-color:#3b4859;font-size:20px}.box .content .login-wrapper .divider .line{border-bottom:1px solid #d6dee4}.box .content .login-wrapper .other-login-item{border-radius:20px}.box .content .login-wrapper .other-login-item img{cursor:pointer;width:40px;height:40px}}@media (max-width: 768px){.box .content{width:100vw;height:100vh;background:url("@/assets/login_images/login_bg_phone.png") no-repeat;background-size:100% 100%;display:flex;align-items:flex-start;justify-content:center}.box .content .login-wrapper{width:70%;height:60%;padding-top:15%}.box .content .login-wrapper h1{font-size:30px;color:#fff}.box .content .login-wrapper .login-form .form-item{margin:10px 0}.box .content .login-wrapper .login-form .form-item span{color:#71818d}.box .content .login-wrapper .login-form .form-item .input-item{height:30px;border:1px solid #71818d;background-color:transparent;color:#fff}.box .content .login-wrapper .login-form .login-btn{height:40px;background-color:#eb5f5d;font-size:16px}.box .content .login-wrapper .divider .line{border-bottom:1px solid #fff}.box .content .login-wrapper .divider .divider-text{color:#fff}.box .content .login-wrapper .other-login-item{border-radius:15px}.box .content .login-wrapper .other-login-item img{cursor:pointer;width:35px;height:35px}} diff --git a/Yi.Bbs.Vue3/src/router/index.js b/Yi.Bbs.Vue3/src/router/index.js index 0ec56979..43a266bd 100644 --- a/Yi.Bbs.Vue3/src/router/index.js +++ b/Yi.Bbs.Vue3/src/router/index.js @@ -31,6 +31,14 @@ const router = createRouter({ path: "/register", component: () => import("../views/Register.vue"), }, + { + name: "qq", + path: "/qq", + component: () => import("../views/qqAuth/index.vue"), + meta: { + title: "QQ授权", + }, + }, ], }, { diff --git a/Yi.Bbs.Vue3/src/views/login/index.vue b/Yi.Bbs.Vue3/src/views/login/index.vue index 447922e0..9602af92 100644 --- a/Yi.Bbs.Vue3/src/views/login/index.vue +++ b/Yi.Bbs.Vue3/src/views/login/index.vue @@ -139,7 +139,7 @@
其他方式登录
-
+
@@ -302,6 +302,14 @@ onMounted(async () => { const handleContact = () => { router.push("/contact"); }; + +const handleQQLogin = () => { + window.open( + "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=101951505&redirect_uri=https://ccnetcore.com/qq&state=true&scope=get_user_info", + undefined, + "width=500,height=500,left=50,top=50" + ); +};