小幅度修改登录页样式

张恒
package-lock.json
src/renderer/icons/svg/eye-open.svg
src/renderer/views/login/index.vue
--- a/package-lock.json
查看文件 @872f1d2
+++ b/package-lock.json
查看文件 @872f1d2
@@ -7930,12 +7930,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7950,17 +7952,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -8077,7 +8082,8 @@
         "inherits": {
           "version": "2.0.4",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -8089,6 +8095,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -8103,6 +8110,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -8223,7 +8231,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -8235,6 +8244,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8356,6 +8366,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
--- a/src/renderer/icons/svg/eye-open.svg 0 → 100644
查看文件 @872f1d2
+++ b/src/renderer/icons/svg/eye-open.svg 0 → 100644
查看文件 @872f1d2
+<?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="1577517047047" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6202" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085z m0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334z m0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333z m0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z" p-id="6203"></path></svg>
\ No newline at end of file
--- a/src/renderer/views/login/index.vue
查看文件 @872f1d2
+++ b/src/renderer/views/login/index.vue
查看文件 @872f1d2
@@ -35,17 +35,12 @@
             placeholder="密码"
           ></el-input>
           <span class="show-pwd" @click="showPwd">
-            <svg-icon icon-class="eye" />
+            <svg-icon :icon-class="pwdType ==='password'?'eye':'eye-open'" />
           </span>
         </el-form-item>
-        <el-form-item>
+        <div class="login-btn">
-          <el-button
+          <button class="btn" @click="handleLogin">登录</button>
-            type="primary"
+        </div>
-            style="width:100%;"
-            :loading="loading"
-            @click.native.prevent="handleLogin"
-          >登录</el-button>
-        </el-form-item>
         <div class="tips">
           <span style="margin-right:20px;">用户名: admin</span>
           <span>密码：随便什么都行</span>
@@ -136,7 +131,8 @@ $light_gray: #eee;
   width: 100%;
   top: 0;
   left: 0;
-  background-image: url("https://cn.bing.com/th?id=OHR.ClavijoLandscape_ZH-CN1525245124_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp");
+  background-image: url("https://i.loli.net/2019/10/18/buDT4YS6zUMfHst.jpg");
+  background-position: center;
   /deep/ .el-input {
     display: inline-block;
     height: 47px;
@@ -172,6 +168,55 @@ $light_gray: #eee;
       width: 520px;
       padding: 35px 35px 15px 35px;
       margin: 120px auto;
+      align-items: center;
+      color: white;
+      background: rgba(0, 0, 0, 0.8);
+      border-radius: 10px;
+      box-shadow: 0 0.4px 0.6px rgba(0, 0, 0, 0.141),
+        0 1px 1.3px rgba(0, 0, 0, 0.202), 0 1.9px 2.5px rgba(0, 0, 0, 0.25),
+        0 3.4px 4.5px rgba(0, 0, 0, 0.298), 0 6.3px 8.4px rgba(0, 0, 0, 0.359),
+        0 15px 20px rgba(0, 0, 0, 0.5);
+      .login-btn {
+        .btn {
+          position: relative;
+          width: 100%;
+          padding: 6px 0;
+          margin: 10px 0 36px 0;
+          font-size: 1.2em;
+          color: white;
+          background: transparent;
+          border: 2px solid hsla(204, 70%, 53%, 1);
+          outline: none;
+          cursor: pointer;
+          overflow: hidden;
+          transition: 0.5s;
+
+          &::before {
+            position: absolute;
+            content: "";
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(
+              120deg,
+              transparent,
+              hsla(204, 70%, 53%, 0.5),
+              transparent
+            );
+            transform: translateX(-100%);
+            transition: 0.5s;
+          }
+
+          &:hover {
+            box-shadow: 0 0 20px 10px hsla(204, 70%, 53%, 0.5);
+          }
+
+          &:hover::before {
+            transform: translateX(100%);
+          }
+        }
+      }
     }
     .tips {
       font-size: 14px;