login change ui

BoBoooooo · Dec 29, 2018 · 803379c · 803379c
1 parent d430ee9
commit 803379c
Show file tree

Hide file tree

Showing 7 changed files with 117 additions and 76 deletions.
diff --git a/src/components/BackToTop/index.vue b/src/components/BackToTop/index.vue
@@ -40,13 +40,13 @@ export default {
       type: Object,
       default() {
         return {
-          right: '50px',
-          bottom: '50px',
+          right: '2px',
+          bottom: '45px',
           width: '40px',
           height: '40px',
           'border-radius': '4px',
           'line-height': '45px',
-          background: '#e7eaf1',
+          background: '#d5e34a',
         }
       },
     },
@@ -121,7 +121,7 @@ export default {
   }
 
   .back-to-ceiling .Icon {
-    fill: #9aaabf;
+    fill: #000;
     background: none;
   }
 </style>
diff --git a/src/icons/svg/a.svg b/src/icons/svg/a.svg
diff --git a/src/icons/svg/banner.svg b/src/icons/svg/banner.svg
diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss
@@ -1,8 +1,11 @@
  //覆盖一些element-ui样式
 
- .el-input__inner{    //去掉border-radius
-   border-radius: 0px;
- }
+ .el-input__inner{
+  border-top:none!important;
+  border-left:none!important;
+  border-right: none!important;
+  border-radius: 0;
+}
  .el-breadcrumb__inner, .el-breadcrumb__inner a{
   font-weight: 400!important;
 }

diff --git a/src/views/layout/components/Navbar.vue b/src/views/layout/components/Navbar.vue
@@ -30,13 +30,13 @@
             首页
           </el-dropdown-item>
         </router-link>
-        <el-dropdown-item divided>
+        <el-dropdown-item >
           <span
             style="display:block;"
             @click="changepassword">修改密码</span>
         </el-dropdown-item>
 
-        <el-dropdown-item divided>
+        <el-dropdown-item >
           <span
             style="display:block;"
             @click="logout">退出</span>
@@ -93,6 +93,24 @@ export default {
 <style rel="stylesheet/scss" lang="scss" scoped>
 
 @import '~@/styles/index.scss';
+
+ .user-dropdown{
+        background: #333;
+          margin-top:0px;
+          padding:0px;
+
+.popper__arrow{
+  display: none!important;
+}
+.el-dropdown-menu__item{
+  color:$primary;
+  &:hover{
+    background: #222;
+  }
+}
+
+
+      }
   .navbar {
       padding-left:24px;
       padding-right:44px;
@@ -123,7 +141,7 @@ export default {
       position: absolute;
       right: 120px;
       top: 14px;
-    color:white;
+      color:white;
 
 
       &:focus{

diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
@@ -140,6 +140,7 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+@import '~@/styles/variables';
 .tags-view-container {
       padding:0px!important;
 
@@ -153,7 +154,7 @@ export default {
       height: 26px;
       line-height: 26px;
       border: 1px solid #d8dce5;
-      color: #495060;
+      color: #333;
       background: #fff;
       padding: 0 8px;
       font-size: 12px;
@@ -163,12 +164,12 @@ export default {
         margin-left: 15px;
       }
       &.active {
-        background-color: #42b983;
-        color: #fff;
-        border-color: #42b983;
+        background-color: $primary;
+        color: #333;
+        border-color: $primary;
         &::before {
           content: '';
-          background: #fff;
+          background: rgb(238, 83, 83);
           display: inline-block;
           width: 8px;
           height: 8px;
@@ -181,22 +182,22 @@ export default {
   }
   .contextmenu {
     margin: 0;
-    background: #fff;
+    background: #333;
     z-index: 2;
     position: absolute;
     list-style-type: none;
     padding: 5px 0;
     border-radius: 4px;
     font-size: 12px;
     font-weight: 400;
-    color: #333;
+    color: #000;
     box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
     li {
       margin: 0;
       padding: 7px 16px;
       cursor: pointer;
       &:hover {
-        background: #eee;
+        background: #222;
       }
     }
   }
@@ -210,7 +211,7 @@ export default {
     .el-icon-close {
       width: 16px;
       height: 16px;
-      vertical-align: 2px;
+      vertical-align: 3px;
       border-radius: 50%;
       text-align: center;
       transition: all .3s cubic-bezier(.645, .045, .355, 1);
@@ -221,8 +222,8 @@ export default {
         vertical-align: -3px;
       }
       &:hover {
-        background-color: #b4bccc;
-        color: #fff;
+        background-color: #fff;
+        color: #222;
       }
     }
   }

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
@@ -1,19 +1,20 @@
 <template>
   <div class="login-container">
-    <el-form
+
+    <el-row>
+      <el-col :span="12">
+        <el-form
       ref="loginForm"
       :model="loginForm"
       class="login-form"
       auto-complete="on"
       label-position="left"
     >
-      <h3 class="title">
-        Anshare Admin v2.0
-      </h3>
+      <h5 class="title">
+        Welcome!
+      </h5>
       <el-form-item prop="username">
-        <span class="svg-container">
-          <svg-icon icon-class="yonghuming" />
-        </span>
+
         <el-input
           v-model="loginForm.username"
           name="username"
@@ -23,9 +24,7 @@
         />
       </el-form-item>
       <el-form-item prop="password">
-        <span class="svg-container">
-          <svg-icon icon-class="mima" />
-        </span>
+
         <el-input
           v-model="loginForm.password"
           :type="pwdType"
@@ -46,16 +45,24 @@
         <el-button
           :loading="loading"
           type="default"
-          style="width:100%;background:rbg(170,198,190)"
           @click.native.prevent="handleLogin"
         >
-          <svg-icon
+          <!-- <svg-icon
             icon-class="login"
             style="font-size:24px"
-          />
+          /> -->
+          LOGIN
         </el-button>
       </el-form-item>
     </el-form>
+      </el-col>
+            <el-col :span="12" class="wallpaper">
+              <svg-icon icon-class="banner" class="banner"></svg-icon>
+<div class="line"></div>
+            </el-col>
+
+    </el-row>
+
   </div>
 </template>
 
@@ -103,38 +110,9 @@ export default {
 }
 </script>
 
-<style rel="stylesheet/scss" lang="scss">
-$bg:#2d3a4b;
-$light_gray:white;
-
-/* reset element-ui css */
-.login-container {
-  .el-input {
-    display: inline-block;
-    height: 20px;
-    width: 70%;
-    input {
-      background: transparent;
-      border: 0px;
-      -webkit-appearance: none;
-      border-radius: 0px;
-      padding: 12px 5px 12px 15px;
-      color: $light_gray;
-      height: 30px;
-
-    }
-  }
-  .el-form-item {
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 5px;
-    color: #454545;
-  }
-}
-
-</style>
-
 <style rel="stylesheet/scss" lang="scss" scoped>
+
+@import '~@/styles/variables';
 $bg:#2d3a4b;
 $dark_gray:#fff;
 $light_gray:#fff;
@@ -143,15 +121,53 @@ $light_gray:#fff;
   position: fixed;
   height: 100%;
   width: 100%;
-  background: url('~@/assets/loginbg.jpg') center center no-repeat;
-  background-size:100% 100%;
+  .el-button{
+    display: block;
+
+margin:0 auto;
+width:70%;
+border-radius:15px;
+background:$primary;
+box-shadow: 0 4px 9.6px 0.4px rgba(74,227,135,.5);
+color:#fff;
+  }
+  .el-row{
+      height: 100%;
+
+  };
+  .el-col{
+      height: 100%;
+
+  }
+
+    .wallpaper{
+    background: #333;
+    overflow: hidden;
+    position:relative;
+    .banner{
+      color:$primary;
+      width: 40%;
+      height: 2.625rem;
+      position: absolute;
+      transform: translate(-50%,-50%);
+      left:50%;
+      top:48%;
+    }
+    .line{
+      width:27%;
+            height: 100%;
+
+      margin:0 auto;
+      // transform: rotate(15deg);
+      background: #282828;
+    }
+  }
   // background-color: $bg;
   .login-form {
-    position: absolute;
-    top:15%;
-    right: 13%;
+    margin:0 auto;
     width: 300px;
     max-width: 100%;
+    margin-top:50px;
     padding: 20px 35px;
 
   }
@@ -175,12 +191,11 @@ $light_gray:#fff;
 
   }
   .title {
-    font-size: 26px;
-    font-weight: 400;
-    color: #f2f2f2;
-    margin: 0px auto 40px auto;
+    font-size: 2rem;
+    color: #34495e;
+    margin-bottom: 32px;
     text-align: center;
-    font-weight: bold;
+    font-weight: 500;
   }
   .show-pwd {
     position: absolute;