perf: style

src/components/Login.vue

@@ -7,13 +7,12 @@
           status-icon
           :rules="rules"
           ref="ruleForm"
-          label-width="100px"
         >
             <el-form-item><p style="font-size: 30px">登录</p></el-form-item>
-            <el-form-item label="账号" prop="name">
+            <el-form-item label="" prop="name">
               <el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
             </el-form-item>
-              <el-form-item label="密码" prop="pass">
+              <el-form-item label="" prop="pass">
                 <el-input
                   type="password"
                   v-model="ruleForm.pass"
@@ -29,14 +28,7 @@
               <el-button @click="resetForm('ruleForm')">清空</el-button>
             </el-form-item>
 
-          <el-form-item>
-            <el-link target="_blank" @click="$router.push({ path: '/register' })"
-            >没有账号?</el-link
-            >
-            <el-link type="primary" @click="$router.push({ path: '/register' })"
-            >去注册</el-link
-            >
-          </el-form-item>
+
           <el-form-item>
             <div style="width: 100%">
               <el-divider>三方登录</el-divider>
@@ -44,19 +36,28 @@
               <div style="width:50%;text-align: center">
                 <img src="https://ts2.cn.mm.bing.net/th?id=ODLS.f9daea21-9936-4164-815f-b5209459f3c6&w=32&h=32&qlt=90&pcl=fffffa&o=6&pid=1.2" style="width:10px;line-height: 56px"/>
                 <el-link type="primary" @click="thirdLogin('azure')"
-                >微软登录</el-link
+                >微软登录(测试中)</el-link
                 >
               </div>
               <div style="width:50%;text-align: center">
                 <img src="https://sola.gtimg.cn/aoi/sola/20210118201807_hzF9zYwEBj.png" style="width:10px;line-height: 56px"/>
                 <el-link type="primary" @click="thirdLogin('qq')"
-                >QQ登录</el-link
+                >QQ登录(测试中)</el-link
                 >
               </div>
               </div>
             </div>
           </el-form-item>
 
+          <el-form-item>
+            <el-link target="_blank" @click="$router.push({ path: '/register' })"
+            >没有账号?</el-link
+            >
+            <el-link type="primary" @click="$router.push({ path: '/register' })"
+            >去注册</el-link
+            >
+          </el-form-item>
+
         </el-form>
       </div>
     </el-card>
@@ -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;
+}
 </style>

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 @@
         </svg> -->
         </el-form-item>
 
-        <el-form-item label="账号" prop="name">
-          <el-input v-model="ruleForm.name"></el-input>
+        <el-form-item label="" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入账号"></el-input>
         </el-form-item>
 
-        <el-form-item label="密码" prop="pass">
+        <el-form-item label="" prop="pass">
           <el-input
             type="password"
             v-model="ruleForm.pass"
+            placeholder="请输入密码"
             autocomplete="off"
             show-password
           ></el-input>
         </el-form-item>
-        <el-form-item label="密码" prop="checkPass">
+        <el-form-item label="" prop="checkPass">
           <el-input
             type="password"
             v-model="ruleForm.checkPass"
             autocomplete="off"
+            placeholder="请确认密码"
             show-password
           ></el-input>
         </el-form-item>
@@ -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;
+}
 </style>

src/main.js

 // 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)

src/store/index.js

-// import Vue from 'vue'
-// import Vuex from 'vuex'
+import Vue from 'vue'
+import Vuex from 'vuex'
 
 
 // import createLogger from '../../../src/plugins/logger'

src/weather/EchartWeather.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-// import * as echarts from 'echarts'
+import * as echarts from 'echarts'
 export default {
     name: 'EchartWeather',
     data () {