登录

src/components/Charts/index.vue

@@ -3,7 +3,7 @@
     <Echart
       :options="options"
       id="centreLeft1Chart"
-      height="400px"
+      height="300px"
       width="100%"
     ></Echart>
   </div>

src/router/index.js

@@ -55,7 +55,15 @@ export const constantRoutes = [
     }],
     hidden: true
   },
-
+  {
+    path: "/dataShow",
+    name: '数据展示',
+    component: () => import('@/views/dataShow/index'),
+    meta: {
+      title: "大屏展示",
+      icon: "el-icon-data-board"
+    }
+  },
   {
     path: '/',
     component: Layout,
@@ -69,15 +77,6 @@ export const constantRoutes = [
         icon: 'dashboard'
       }
     } ]
-  },
-  {
-    path: "/dataShow",
-    name: '数据展示',
-    component: () => import('@/views/dataShow/index'),
-    meta: {
-      title: "大屏展示",
-      icon: "dashboard"
-    }
   }
 ]
 

src/views/dataShow/right1.vue

@@ -58,7 +58,7 @@ export default {
             carousel: 'single',
             unit: '平方',
             waitTime: 4000,
-            rowNum: 3
+            rowNum: 4
           }
         }
       } else if (this.type === 2) {
@@ -71,7 +71,7 @@ export default {
             carousel: 'single',
             unit: '平方',
             waitTime: 4000,
-            rowNum: 3
+            rowNum: 4
           }
         }
       }
@@ -92,11 +92,11 @@ export default {
   width: 100%;
   .dv-scr-board {
     width: 346px;
-    height: 180px;
+    height: 230px;
     padding: 10px;
   }
   .dv-scr-rank-board {
-    height: 180px;
+    height: 230px;
     padding: 10px 20px;
   }
   .title {

src/views/dataShow/right2.vue

@@ -46,7 +46,7 @@ export default {
             carousel: 'single',
             unit: '平方',
             waitTime: 4000,
-            rowNum: 3
+            rowNum: 4
           }
         }
       } else if (this.type === 2) {
@@ -59,7 +59,7 @@ export default {
             carousel: 'single',
             unit: '平方',
             waitTime: 4000,
-            rowNum: 3
+            rowNum: 4
           }
         }
       }
@@ -80,11 +80,11 @@ export default {
   width: 100%;
   .dv-scr-board {
     width: 346px;
-    height: 180px;
+    height: 230px;
     padding: 10px;
   }
   .dv-scr-rank-board {
-    height: 180px;
+    height: 230px;
     padding: 10px 20px;
   }
 

src/views/login/index.vue

@@ -1,48 +1,53 @@
 <template>
   <div class="login-container">
+    <img class="build-img" src="~@/assets/login/build.png" alt="">
+<!--    <vue-particles color="#ffffff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"-->
+<!--      linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"-->
+<!--      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>-->
 
-    <vue-particles color="#ffffff" :particleOpacity="0.7" :particlesNumber="80" shapeType="circle" :particleSize="4"
+    <img class="title-img" src="~@/assets/login/title.png" alt="">
-      linesColor="#ffffff" :linesWidth="1" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150" :moveSpeed="3"
-      :hoverEffect="true" hoverMode="grab" :clickEffect="true" clickMode="push"> </vue-particles>
-
     <el-form size="small" ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on"
       label-position="left">
 
       <div class="title-container">
-        <h3 class="title">{{title}}</h3>
+        <h3 class="title">欢迎登录</h3>
       </div>
 
       <el-form-item prop="username">
-        <span class="svg-container">
+        <div class="form-item">
+          <span class="svg-container">
           <svg-icon icon-class="user" />
         </span>
-        <el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
+          <el-input ref="username" v-model="loginForm.username" placeholder="请输入登录名" name="username" type="text"
-          tabindex="1" auto-complete="on" />
+                    tabindex="1" auto-complete="on" />
+        </div>
       </el-form-item>
 
       <el-form-item prop="password">
-        <span class="svg-container">
+        <div class="form-item">
+          <span class="svg-container">
           <svg-icon icon-class="password" />
         </span>
-        <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
+          <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType"
-          placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
+                    placeholder="请输入密码" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" />
-        <span class="show-pwd" @click="showPwd">
+          <span class="show-pwd" @click="showPwd">
-          <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
+            <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" />
-        </span>
+          </span>
+        </div>
       </el-form-item>
 
       <el-form-item prop="code">
-        <div style="display: flex;">
+        <div class="form-item">
           <span class="svg-container">
-          <svg-icon icon-class="message" />
+            <svg-icon icon-class="message" />
-        </span>
+          </span>
           <el-input ref="username" v-model="loginForm.code" placeholder="请输入验证码" name="username" type="text"
                     tabindex="1" auto-complete="on" />
-          <el-button :loading="msgLoading" type="primary" size="small" :disabled="isVer" @click="sendSms">发送验证{{ isVer ? ('（'+verTime+'）') : '' }}</el-button>
+          <el-button class="msg-btn" :loading="msgLoading" type="primary" size="small" :disabled="isVer" @click="sendSms">发送验证{{ isVer ? ('（'+verTime+'）') : '' }}</el-button>
         </div>
       </el-form-item>
 
-      <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;"
+      <el-button :loading="loading" type="primary" class="login-btn"
         @click.native.prevent="handleLogin">登录</el-button>
 
 
@@ -222,20 +227,19 @@
   }
 
   /* reset element-ui css */
+
   .login-container {
     .el-input {
+      flex: 1;
       display: inline-block;
-      height: 47px;
-      width: 85%;
 
       input {
         background: transparent;
         border: 0px;
         -webkit-appearance: none;
         border-radius: 0px;
-        padding: 12px 5px 12px 15px;
+        padding: 4px 5px 4px 15px;
         color: $light_gray;
-        height: 47px;
         caret-color: $cursor;
 
         &:-webkit-autofill {
@@ -244,13 +248,6 @@
         }
       }
     }
-
-    .el-form-item {
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      background: rgba(0, 0, 0, 0.1);
-      border-radius: 5px;
-      color: #454545;
-    }
   }
 </style>
 
@@ -259,21 +256,45 @@
   $dark_gray:#122583;
   $light_gray:#122583;
 
+  .build-img {
+    position: absolute;
+    width: 36.5vw;
+    object-fit: contain;
+    top: 27.3%;
+    left: 10.2%;
+  }
+  .title-img {
+    display: block;
+    width: 44.64vw;
+    object-fit: contain;
+    margin: 16.11vh auto 0;
+  }
+  .form-item {
+    height: 3vw;
+    width: 86.4%;
+    margin: auto;
+    border-radius: 8px;
+    background-color: #f4f4f4;
+    filter: drop-shadow(0 0 1px #cdcdcd);
+    display: flex;
+    align-items: center;
+  }
   .login-container {
-    min-height: 100%;
+    height: 100%;
     width: 100%;
-    //background-color: $bg;
+    background: url("~@/assets/login/bkg.png") no-repeat;
-    background: url("../../assets/bg.jpg") no-repeat;
+    background-size: cover;
     overflow: hidden;
 
     .login-form {
       position: relative;
-      width: 520px;
+      width: 28.7vw;
-      max-width: 100%;
+      margin: 9.81vh 10.2vw 0 auto;
-      padding: 20px 35px 0;
-      margin: 160px auto;
       overflow: hidden;
-      background-color: #fff;
+      border-radius: 10px;
+      box-shadow: inset 0 0 4px rgb(255,255,255,0.8);
+      filter: drop-shadow(0 0 7px rgba(0,0,0,0.2));
+      background-color: rgba(255,255,255,0.2);
     }
 
     .tips {
@@ -298,24 +319,86 @@
 
     .title-container {
       position: relative;
+      margin-bottom: 2vw;
 
       .title {
-        font-size: 26px;
-        color: $light_gray;
-        margin: 0px auto 40px auto;
         text-align: center;
-        font-weight: bold;
+        font-size: 1.7vw;
+        letter-spacing: 4px;
+        color: #ffffff;
+        padding: 1.41vw 0 1.2vw;
+        position: relative;
+
+        &::after {
+          content: "";
+          width: 100%;
+          height: 1px;
+          background: linear-gradient(to right, #fff0 20%, #fff, #fff0 80%);
+
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          right: 0;
+        }
       }
     }
 
     .show-pwd {
       position: absolute;
-      right: 10px;
+      right: 10%;
-      top: 7px;
+      top: 50%;
+      transform: translate(0, -50%);
       font-size: 16px;
       color: $dark_gray;
       cursor: pointer;
       user-select: none;
     }
+    .msg-btn {
+      border-radius: 0 8px 8px 0;
+      height: 100%;
+      background-image: linear-gradient(90deg, #1d57da 0%, #1d57da 0%, #4185c5 100%);
+    }
+    .login-btn {
+      width: 86.4%;
+      height: 3vw;
+      border-radius: 8px;
+      padding: 0;
+      background-image: linear-gradient(90deg, #1d57da 0%, #1d57da 0%, #05a658 100%);
+      display: block;
+      margin: auto auto 3.2vw;
+      font-size: 1.21vw;
+      letter-spacing: 3px;
+      color: #ffffff;
+    }
+  }
+  ::v-deep .el-form-item--small.el-form-item {
+    margin-bottom: 1.3vw;
+  }
+
+  @media (max-width: 960px) {
+    .title-img {
+      display: none;
+    }
+    .login-container .login-form {
+      width: 90%;
+      margin: auto;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .login-container .title-container .title {
+      font-size: 15px;
+    }
+    .form-item {
+      height: 40px;
+      margin-bottom: 10px;
+    }
+    .login-container .login-btn {
+      height: 40px;
+      font-size: 14px;
+    }
+    ::v-deep .el-form-item__error {
+      transform: translate(-20px,-76%);
+    }
   }
 </style>