new login web submint

pages/account/login/index.vue

@@ -21,20 +21,19 @@
       <div class="login">
         <div class="cen">
           <div class="log_code_box">
-            <div class="log_code">
+            <div class="log_code" @click="handlTrance">
               <img src="@/assets/images/login/erwei.jpg" alt="logoCode" />
-              <img src="@/assets/images/login/sanjiao.png" alt="" class="sanjiao" />
+              <transition name="animation">
+                <!-- <img v-if="imgFlag" src="@/assets/images/login/sanjiao.png" alt="" class="sanjiao" /> -->
+                <div v-if="imgFlag" class="sanjiao"></div>
+              </transition>
             </div>
           </div>
           <h2 class="mb20">登 录</h2>
-          <Login @on-submit="handleSubmit">
-            <UserName name="username" value="" />
-            <Password name="password" value="" enter-to-submit />
-            <!-- <div class="page-account-auto-login mb20">
-              <Checkbox v-model="autoLogin">{{ $t('page.login.remember') }}</Checkbox>
-              <a href>{{ $t('page.login.forgot') }}</a>
-            </div> -->
-            <div class="mt20">
+          <Login @on-submit="handleSubmit" class="form_sub">
+            <UserName name="username" class="user_name" value="" />
+            <Password name="password" class="pass_word" value="" enter-to-submit />
+            <div class="sub_btn">
               <Submit class="shadown">{{ $t('page.login.submit') }}</Submit>
             </div>
           </Login>
@@ -57,7 +56,8 @@ export default {
   data() {
     return {
       value1: 0,
-      autoLogin: true
+      autoLogin: true,
+      imgFlag: true,
     };
   },
   created() {
@@ -113,6 +113,9 @@ export default {
           this.$Message.error("用户信息22查询失败!");
         }
       });
+    },
+    handlTrance(){
+      this.imgFlag = !this.imgFlag
     }
   }
 };
@@ -155,9 +158,10 @@ export default {
     bottom: 168px;
     left: 360px;
     right: 360px;
-    background: url("../../../assets/images/login/login02.jpg") no-repeat -177px -16px;
-    background-size: 94%;
+    background: url("../../../assets/images/login/login02.jpg") no-repeat -37px 13px;
+    background-size: 74%;
     display: flex;
+    h2{ padding: 4px 0 15px 0;}
     .ad {
       flex: 1;
       text-align: center;
@@ -171,8 +175,8 @@ export default {
     }
     .login {
       background-color: white;
-      width: 420px;
-      padding: 0 50px;
+      width: 410px;
+      padding: 0 40px;
       display: flex;
       // align-items: center;
       flex-direction: row;
@@ -180,12 +184,18 @@ export default {
         width: 100%;
         .log_code_box{
           text-align: right;
-          height: 130px;
-          margin: 0 -50px 0 0;
+          height: 110px;
+          margin: 0 -40px 0 0;
           .log_code{
-            width: 100px;
+            cursor: pointer;
+            width: 90px;
+            height: 85PX;
             float: right;
             .sanjiao{
+              width: 90px;
+              height: 90px;
+              border-bottom: 90px solid #ffffff;
+              border-right: 90px solid transparent;
               position: absolute;
               right: 0px;
               top: 0px;
@@ -193,19 +203,37 @@ export default {
           }
         }
         .ivu-input-wrapper {
-          margin-bottom: 5px;
+          margin-bottom: 6px;
         }
-        .mt20 {
-          margin-top: 50px;
-          .shadown {
-            box-shadow: 1px 5px 15px #2680eb;
-          }
-          .ivu-btn-large {
-            height: 50px !important;
+        .sub_btn{
+          .shadown{
+            padding: 30px 0 0 0;
+            button{
+              height: 72px;
+              border:none;
+              letter-spacing: 3px;
+              font-size: 18px;
+              background:  url("../../../assets/images/login/btn_bg.png") no-repeat center;
+              span{
+                margin: -14px 0 0;
+                display: block;
+              }
+            }
           }
         }
       }
     }
   }
 }
+.animation-enter-to,.animation-leave-to{
+  animation: mymove 1s 1s linear;
+}
+@keyframes mymove {
+  0%{
+    transform: translateX(0px);
+  }
+  100%{
+    transform: translateX(-45px);
+  }
+}
 </style>
\ No newline at end of file