界面响应式调整

vue/src/assets/icons/svg/validCode.svg

@@ -1 +1 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569580729849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#C6CCDA" p-id="1940"></path><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#C6CCDA" p-id="1941"></path></svg>
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1569580729849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M513.3 958.5c-142.2 0-397.9-222.1-401.6-440.5V268c1.7-39.6 31.7-72.3 71.1-77.3 49-4.6 97.1-16.5 142.7-35.3 47.8-14 91.9-38.3 129.4-71.1 30.3-24.4 72.9-26.3 105.3-4.6 39.9 30.7 83.8 55.9 130.5 74.6 48.6 14.7 98.2 25.9 148.4 33.7 38.5 7.6 67.1 40.3 69.5 79.5 3.3 84.9 2.5 169.9-2.6 254.7-33.7 281.6-253.7 436.4-392.7 436.3z m-0.1-813.7c-7.2-0.2-14.3 2-20 6.4-39.7 35.2-86.8 61.1-137.7 75.7-46.8 19.2-96.2 31-146.6 35.2-11 3.2-18.8 13-19.5 24.4v230.1c3.5 180.3 223.3 361 323.9 361s287.3-120.2 317.6-360.5c7.3-142.7 0-228.6 0-229.6-1.3-13.3-11-24.3-24-27.3-49.6-7.7-98.6-19-146.5-33.7-46.3-19.5-89.7-45.3-129-76.7-5.8-3.8-12.7-5.5-19.5-4.9l1.3-0.1z" fill="#fff" p-id="1940"></path><path d="M750.1 428L490.7 673.2c-11.7 11.1-29.5 12.9-43.1 4.2l-6.8-5.8-141.2-149.4c-9.3-9.3-12.7-22.9-9-35.5 3.8-12.6 14.1-22.1 27-24.8 12.9-2.7 26.1 1.9 34.6 11.9L469 597.5l233.7-221c14.6-12.8 36.8-11.6 49.9 2.7 13.2 14.2 11.5 35.3-2.5 48.8" fill="#fff" p-id="1941"></path></svg>

vue/src/views/login.vue

@@ -26,16 +26,16 @@
                             </el-button>
                         </div>
                         <div v-if="register">
-                            <el-button style="padding:0px;">
-                                <router-link :to='{path:"/register",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">注册账号
-                                </router-link>
-                            </el-button>
                             <el-button type="warning" style="padding:0px;">
                                 <el-link href="https://wumei.live/" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">返回官网</el-link>
                             </el-button>
                             <el-button type="danger" style="padding:0px;">
                                 <el-link href="https://wumei.live/doc" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">查看文档</el-link>
                             </el-button>
+                            <el-button style="padding:0px;">
+                                <router-link :to='{path:"/register",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">注册账号
+                                </router-link>
+                            </el-button>
                         </div>
                     </div>
                 </div>
@@ -44,23 +44,23 @@
                 <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
                     <h3 class="title" v-if="!bindAccount">账号登录</h3>
                     <h3 class="bindAccountTitle" v-else>绑定物美智能账户</h3>
-                    <div style="font-size:16px;color:#eee;margin-bottom:10px;">演示账号：wumei<span style="margin:0 10px;">123456</span></div>
+                    <div style="font-size:16px;color:#333;margin-bottom:10px;">演示账号：wumei<span style="margin:0 10px;">123456</span></div>
                     <el-form-item prop="username">
                         <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
-                            <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
+                            <svg-icon slot="prefix" icon-class="user" class="input-icon" />
                         </el-input>
                     </el-form-item>
                     <el-form-item prop="password">
                         <el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
-                            <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
+                            <svg-icon slot="prefix" icon-class="password" class="input-icon" />
                         </el-input>
                     </el-form-item>
                     <el-form-item prop="code" v-if="captchaOnOff">
                         <el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
-                            <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
+                            <svg-icon slot="prefix" icon-class="validCode" class="input-icon" />
                         </el-input>
                         <div class="login-code">
-                            <img :src="codeUrl" @click="getCode" class="login-code-img" />
+                            <img :src="codeUrl" @click="getCode" />
                         </div>
                     </el-form-item>
                     <el-checkbox v-model="loginForm.rememberMe" style="margin:0px 0px 25px 0px;color:#000;">记住密码</el-checkbox>
@@ -275,7 +275,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .login {
     background: linear-gradient(303deg, #48c6ef 10%, #6f86d6 80%);
     height: 100%;
@@ -303,8 +303,20 @@ export default {
     text-align: center;
     padding: 30px;
 
+    @media screen and (min-width:992px) {
         h1 {
-        font-size: 46px;
+            font-size: 32px;
+        }
+
+        h2 {
+            font-size: 20px;
+            margin-top: -15px;
+        }
+    }
+
+    @media screen and (min-width:1200px) {
+        h1 {
+            font-size: 42px;
         }
 
         h2 {
@@ -313,23 +325,52 @@ export default {
         }
     }
 
+    @media screen and (min-width:1920px) {
+        h1 {
+            font-size: 48px;
+        }
+
+        h2 {
+            font-size: 30px;
+            margin-top: -15px;
+        }
+    }
+
+}
+
 .login-form {
-    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 20px 30px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 6px;
+    border-radius: 10px;
-    background-color: rgba(250, 250, 250, 0.2);
+    background-color: rgba(250, 250, 250, 0.8);
     border: 1px solid #fff;
     padding: 25px 25px 5px 25px;
     margin: 0 auto;
     z-index: 1000;
-    max-width: 400px;
+    max-width: 370px;
     margin-bottom: 100px;
 
     .el-input {
         height: 38px;
-
         input {
             height: 38px;
-            background-color: rgba(255, 255, 255, 0.9);
+            background-color: rgba(0, 0, 0, 0.1);
+            color:#333;
+        }
+         // 谷歌
+        input::-webkit-input-placeholder{
+            color:#666;
+        }
+        // 火狐19+版本
+        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
+            color:#666;
+        }
+        // 火狐4-18版本
+        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+            color:#666;
+        }
+        // IE10-11版本
+        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
+            color:#666;
         }
     }
 
@@ -337,6 +378,7 @@ export default {
         height: 39px;
         width: 14px;
         margin-left: 2px;
+        color:#fff;
     }
 }
 
@@ -348,6 +390,8 @@ export default {
     img {
         cursor: pointer;
         vertical-align: middle;
+        border-radius:5px;
+        height:38px;
     }
 }
 
@@ -364,7 +408,5 @@ export default {
     letter-spacing: 1px;
 }
 
-.login-code-img {
+
-    height: 38px;
-}
 </style>

vue/src/views/register.vue

@@ -26,16 +26,16 @@
                             </el-button>
                         </div>
                         <div>
-                            <el-button style="padding:0px;">
-                                <router-link :to='{path:"/login",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">账号登录
-                                </router-link>
-                            </el-button>
                             <el-button type="warning" style="padding:0px;">
                                 <el-link href="https://wumei.live/" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">返回官网</el-link>
                             </el-button>
                             <el-button type="danger" style="padding:0px;">
                                 <el-link href="https://wumei.live/doc" :underline="false" target="_blank" style="color:#fff;padding:12px 18px;">查看文档</el-link>
                             </el-button>
+                            <el-button style="padding:0px;">
+                                <router-link :to='{path:"/login",query: this.$route.query }' style="color:#666;padding:12px 18px;display:flex;">账号登录
+                                </router-link>
+                            </el-button>
                         </div>
                     </div>
                 </div>
@@ -69,7 +69,7 @@
                             <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                         </el-input>
                         <div class="register-code">
-                            <img :src="codeUrl" @click="getCode" class="register-code-img" />
+                            <img :src="codeUrl" @click="getCode" />
                         </div>
                     </el-form-item>
                     <el-form-item style="width:100%;">
@@ -275,7 +275,7 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .register {
     background: linear-gradient(303deg, #48c6ef 10%, #6f86d6 80%);
     height: 100%;
@@ -294,35 +294,71 @@ export default {
     color: #fff;
     text-align: center;
     padding: 30px;
-
+    @media screen and (min-width:992px) {
         h1 {
-        font-size: 46px;
+            font-size: 32px;
+        }
+        h2 {
+            font-size: 20px;
+            margin-top: -15px;
+        }
     }
 
+    @media screen and (min-width:1200px) {
+        h1 {
+            font-size: 42px;
+        }
         h2 {
             font-size: 26px;
             margin-top: -15px;
         }
     }
 
+    @media screen and (min-width:1920px) {
+        h1 {
+            font-size: 48px;
+        }
+        h2 {
+            font-size: 30px;
+            margin-top: -15px;
+        }
+    }
+}
+
 .register-form {
     box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.1);
-    border-radius: 6px;
+    border-radius: 10px;
     background: #ffffff;
-    background-color: rgba(250, 250, 250, 0.2);
+    background-color: rgba(250, 250, 250, 0.8);
     border: 1px solid #fff;
     padding: 25px 25px 5px 25px;
     margin:0 auto;
     z-index: 1000;
-    max-width: 400px;
+    max-width: 370px;
     margin-bottom: 100px;
 
     .el-input {
         height: 38px;
-
         input {
             height: 38px;
-            background-color: rgba(255, 255, 255, 0.9);
+            background-color: rgba(0, 0, 0, 0.1);
+            color:#333;
+        }
+         // 谷歌
+        input::-webkit-input-placeholder{
+            color:#666;
+        }
+        // 火狐19+版本
+        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
+            color:#666;
+        }
+        // 火狐4-18版本
+        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
+            color:#666;
+        }
+        // IE10-11版本
+        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
+            color:#666;
         }
     }
 
@@ -330,6 +366,7 @@ export default {
         height: 39px;
         width: 14px;
         margin-left: 2px;
+        color:#fff;
     }
 }
 
@@ -341,6 +378,8 @@ export default {
     img {
         cursor: pointer;
         vertical-align: middle;
+        border-radius:5px;
+        height: 38px;
     }
 }
 
@@ -356,8 +395,4 @@ export default {
     font-size: 12px;
     letter-spacing: 1px;
 }
-
-.register-code-img {
-    height: 38px;
-}
 </style>