From 734af16e854c82ee4a5c7538b2dbf85118aadeca Mon Sep 17 00:00:00 2001 From: yma16 <17685043634@163.com> Date: Sun, 18 Jun 2023 23:06:21 +0800 Subject: [PATCH] perf: style --- src/components/Login.vue | 70 ++++++++++++++++------------------- src/components/Register.vue | 16 +++++--- src/main.js | 28 +++++++------- src/store/index.js | 4 +- src/weather/EchartWeather.vue | 2 +- 5 files changed, 58 insertions(+), 62 deletions(-) diff --git a/src/components/Login.vue b/src/components/Login.vue index 169cd3c..b11533b 100644 --- a/src/components/Login.vue +++ b/src/components/Login.vue @@ -7,13 +7,12 @@ status-icon :rules="rules" ref="ruleForm" - label-width="100px" >

登录

- + - + 清空 - - 没有账号? - 去注册 - +
三方登录 @@ -44,19 +36,28 @@
微软登录微软登录(测试中)
QQ登录QQ登录(测试中)
+ + 没有账号? + 去注册 + + @@ -116,11 +117,23 @@ export default { const url = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=3a46d800-6bcc-47b5-9724-5a651b336bdb&scope=User.Read%20openid%20profile%20offline_access&redirect_uri=https%3A%2F%2Fyongma16.xyz%2Fazure_login_callback%2F&client-request-id=d4f3e873-d59f-417d-8101-ad19aac54168&response_mode=fragment&response_type=code&x-client-SKU=msal.js.browser&x-client-VER=2.26.0&client_info=1&code_challenge=pmwq-hZFKj0arSiO6WXFHngszqW0cH0fwMpd-a1Vuns&code_challenge_method=S256&nonce=e8d65872-8fe9-45b4-9b4d-b0c7db70a61f&state=eyJpZCI6IjVjNGUyZDQyLTI5Y2MtNDc5MS1iMmQ4LTBiZDAwZWM5Y2M2MyIsIm1ldGEiOnsiaW50ZXJhY3Rpb25UeXBlIjoicG9wdXAifX0%3D' const openHandle = window.open(url, '_black') console.log('openHandle', openHandle) + var winLoop = setInterval(function () { + if (openHandle.closed) { + clearInterval(winLoop) + alert('closed') + } + }, 1000) }, qqLogin () { const url = 'https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100330589&response_type=token&scope=all&redirect_uri=https%3A%2F%2Fconnect.qq.com%2Fsdk%2Fwebtools%2Findex2.html' const openHandle = window.open(url, '_black') console.log('openHandle', openHandle) + var winLoop = setInterval(function () { + if (openHandle.closed) { + clearInterval(winLoop) + alert('closed') + } + }, 1000) }, submitForm (formName) { const that = this // this指向 @@ -177,37 +190,16 @@ export default { width: 100%; height: auto; } -.left { - position: relative; - margin-top: 50px; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} -.text { - align-content: center; - display: flex; - margin: 0 auto; - font-size: 14px; -} - -.item { - display: flex; - margin: 0 auto; - /* width: 50%; */ -} - .box-card { position: relative; - align-self: center; - align-content: center; display: flex; - width: 450px; - /* padding-left:25%; */ + max-width: 450px; margin: 0 auto; - opacity: 1; margin-top: 80px; - background-color: #ffffff; + background-color: rgba(255,255,255,.95); box-sizing: border-box; } +/deep/ .el-card__body{ + width: 100% !important; +} diff --git a/src/components/Register.vue b/src/components/Register.vue index fbdf4b4..46a35e2 100644 --- a/src/components/Register.vue +++ b/src/components/Register.vue @@ -8,7 +8,6 @@ status-icon :rules="rules" ref="ruleForm" - label-width="100px" class="demo-ruleForm" style="text-align: center; margin: 0 auto" v-loading="loading" @@ -37,23 +36,25 @@ -->
- - + + - + - + @@ -206,9 +207,12 @@ export default { display: flex; width: 450px; /* padding-left:25%; */ - margin: 0 25%; + margin: 0 auto; opacity: 1; margin-top: 80px; background-color: #ffffff; } +/deep/ .el-card__body{ + width: 100% !important; +} diff --git a/src/main.js b/src/main.js index 58d0683..b7f79b1 100644 --- a/src/main.js +++ b/src/main.js @@ -1,15 +1,15 @@ // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. // vue cdn -// import Vue from 'vue' -// import axios from 'axios' -// import hljs from 'highlight.js' -// import * as echarts from 'echarts' -// import importElementComponents from './importElement' -// import importEchartsComponents from './importEchartsComponents' -// // 样式cnd -// import 'github-markdown-css/github-markdown.css' -// import 'nprogress/nprogress.css' +import Vue from 'vue' +import axios from 'axios' +import hljs from 'highlight.js' +import * as echarts from 'echarts' +import importElementComponents from './importElement' +import importEchartsComponents from './importEchartsComponents' +// 样式cnd +import 'github-markdown-css/github-markdown.css' +import 'nprogress/nprogress.css' // 无需cdn import useRouter from './router' import VueRouter from 'vue-router' @@ -57,11 +57,11 @@ if (env === 'production') { // 路由 const router = useRouter(Vue, VueRouter) - // // 按需引入elementui - // importElementComponents(Vue) - // - // // 按需引入echarts - // importEchartsComponents(Vue) + // 按需引入elementui + importElementComponents(Vue) + + // 按需引入echarts + importEchartsComponents(Vue) Vue.config.productionTip = false Vue.use(cookies) diff --git a/src/store/index.js b/src/store/index.js index 3207cd3..f71c124 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,5 +1,5 @@ -// import Vue from 'vue' -// import Vuex from 'vuex' +import Vue from 'vue' +import Vuex from 'vuex' // import createLogger from '../../../src/plugins/logger' diff --git a/src/weather/EchartWeather.vue b/src/weather/EchartWeather.vue index cefade7..1dfd283 100644 --- a/src/weather/EchartWeather.vue +++ b/src/weather/EchartWeather.vue @@ -15,7 +15,7 @@