上传

src/views/dashboard/index.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="dashboard-container">
-    <!-- <div class="dashboard-editor-container"> -->
-    <!-- <div class="info-container clearfix">
-        <pan-thumb :image="avatar" :width="'130px'" :height="'130px'">
-        </pan-thumb>
+    <div class="dashboard-editor-container">
+    <div class="info-container clearfix">
+     
+      <span class="welcome-title">欢迎登录</span>
+      
+      </div>
+      <div class="info-container clearfix">
+     
 
-        <span class="welcome-title">欢迎登录采销平台</span>
-      </div> -->
+     <span class="welcome-title">阳光会务后台</span>
+   </div>
     <!-- style="width: 60%; margin: -30px auto 0 auto" -->
-    <img :src="emptyGif" class="bg-img" />
+    <!-- <img :src="emptyGif" class="bg-img" /> -->
     <!-- <div class="duihua"> -->
     <!-- <img src="@/assets/img/duihuakuang.png" /> -->
     <!-- <img class="bg" src="@/assets/img/duihua.png" /> -->
@@ -20,7 +24,7 @@
         <p>开工了&nbsp;！</p>
         <p>快干活&nbsp;！</p>
       </div> -->
-    <!-- </div> -->
+    </div>
     <!-- <div class="wudi">woody</div> -->
   </div>
 </template>
@@ -121,23 +125,24 @@ export default {
   min-height: 100%;
   width: 100%;
   // display: flex;
-  // padding: 0 6% 0 0;
+  padding: 140px 6% 0 0;
   text-align: center;
+  box-sizing: border-box;
   // align-items: flex-start ;
   .info-container {
     display: block;
     width: 60%;
     text-align: center;
     margin: 0 auto;
-    padding: 10vh 0 0 0;
+    padding: 3.5vh 0 0 0;
     .welcome-title {
       vertical-align: top;
       padding: 0;
       margin: 0 0 0 18px;
       color: #97a8be;
       display: inline-block;
-      height: 130px;
-      line-height: 130px;
+      height: 70px;
+      line-height: 70px;
       font-size: 45px;
     }
   }

src/views/login/forget-password.vue

@@ -396,6 +396,7 @@ $light_gray: #eee;
       margin: 18vh auto 0 auto;
       // border-radius: 5px;
       background: #fff;
+      
     }
   }
   .success-card {

src/views/login/index.vue

@@ -89,10 +89,11 @@
           type="primary"
           style="width: 100%; margin-top: 5px"
           @click.native.prevent="handleLogin()"
-        >登&nbsp;&nbsp;录</el-button>
+          >登&nbsp;&nbsp;录</el-button
+        >
 
         <div style="position: relative; padding: 12px 0 0 0">
-       <!-- <div class="tips" style="float: left">
+          <!-- <div class="tips" style="float: left">
             <el-popover
               placement="top"
               title="初始密码："
@@ -103,218 +104,221 @@
               <i slot="reference" class="el-icon-info" />
             </el-popover>
           </div> -->
-         <router-link to="/forget-password">
+          <router-link to="/forget-password">
             <div class="tips" style="float: right">
               <span>忘记密码</span>
             </div>
-          </router-link> 
-       </div>
+          </router-link>
+        </div>
       </el-form>
     </div>
 
-    <div v-if="loginBeian !== ''" class="beian">    <div v-if="loginBeian !== ''" class="beian">      <span>{{ loginTitle }}</span>
-      <a target="_blank" :href="loginBeianUrl">{{ loginBeian }}</a>
-      <span />
+    <div v-if="loginBeian !== ''" class="beian">
+      <div v-if="loginBeian !== ''" class="beian">
+        <span>{{ loginTitle }}</span>
+        <a target="_blank" :href="loginBeianUrl">{{ loginBeian }}</a>
+        <span />
+      </div>
     </div>
-    </div>
-  </div></template>
+  </div>
+</template>
 
 <script>
-import { isnumber, isAlphanumeric, validAlphabets, isMobile } from '@/utils/validate'
-import asyncRequest from '@/apis/service/user'
-import Identify from '@/components/identify'
-import urlConfig from '@/apis/url-config'
-import resToken from '@/mixins/resToken'
+import { isnumber, isAlphanumeric, validAlphabets, isMobile } from "@/utils/validate";
+import asyncRequest from "@/apis/service/user";
+import Identify from "@/components/identify";
+import urlConfig from "@/apis/url-config";
+import resToken from "@/mixins/resToken";
 
 export default {
-  name: 'Login',
+  name: "Login",
   components: { Identify },
   mixins: [resToken],
   data() {
     const validateUsername = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('用户名不能为空！'))
+      if (value === "") {
+        callback(new Error("用户名不能为空！"));
       } else {
-        callback()
+        callback();
       }
-    }
+    };
     const validatePassword = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('密码不能为空！'))
+      if (value === "") {
+        callback(new Error("密码不能为空！"));
       } else {
         if (!isAlphanumeric(value)) {
-          callback(new Error('密码为6-18位数字字母组合！'))
+          callback(new Error("密码为6-18位数字字母组合！"));
         } else if (value.length < 6 || value.length > 18) {
-          callback(new Error('密码为6-18位数字字母组合！'))
+          callback(new Error("密码为6-18位数字字母组合！"));
         } else if (isnumber(value)) {
-          callback(new Error('密码不能为纯数字！'))
+          callback(new Error("密码不能为纯数字！"));
         } else if (validAlphabets(value)) {
-          callback(new Error('密码不能为纯字母！'))
+          callback(new Error("密码不能为纯字母！"));
         } else {
-          callback()
+          callback();
         }
       }
-    }
+    };
 
     const validateCode = (rule, value, callback) => {
-      if (value === '') {
-        callback(new Error('验证码不能为空!'))
+      if (value === "") {
+        callback(new Error("验证码不能为空!"));
       } else {
         if (value !== this.identifyCode) {
-          callback(new Error('请输入正确的验证码'))
+          callback(new Error("请输入正确的验证码"));
         } else {
-          callback()
+          callback();
         }
       }
-    }
+    };
 
     return {
-      ver: '',
+      ver: "",
       show: false,
       loginTitle: urlConfig.loginTitle,
       loginBeian: urlConfig.loginBeian,
       loginBeianUrl: urlConfig.loginBeianUrl,
       loginForm: {
-        username: 'admin',
-        password: 'admin123',
-        code: ''
+        username: "admin",
+        password: "admin123",
+        code: "",
       },
       loginRules: {
-        username: [{ required: true, trigger: 'blur', validator: validateUsername }],
-        password: [{ required: true, trigger: 'blur', validator: validatePassword }],
-        code: [{ required: true, trigger: 'blur', validator: validateCode }]
+        username: [{ required: true, trigger: "blur", validator: validateUsername }],
+        password: [{ required: true, trigger: "blur", validator: validatePassword }],
+        code: [{ required: true, trigger: "blur", validator: validateCode }],
       },
-      identifyCode: '',
-      identifyCodes: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'],
-      passwordType: 'password',
+      identifyCode: "",
+      identifyCodes: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"],
+      passwordType: "password",
       capsTooltip: false,
       loading: false,
       showDialog: false,
       redirect: undefined,
-      otherQuery: {}
-    }
+      otherQuery: {},
+    };
   },
   watch: {
     $route: {
-      handler: function(route) {
-        const query = route.query
+      handler: function (route) {
+        const query = route.query;
         if (query) {
-          this.redirect = query.redirect
-          this.otherQuery = this.getOtherQuery(query)
+          this.redirect = query.redirect;
+          this.otherQuery = this.getOtherQuery(query);
         }
       },
-      immediate: true
-    }
+      immediate: true,
+    },
   },
   mounted() {
-    this.refreshCode()
-    this.bindEnterEvent()
+    this.refreshCode();
+    this.bindEnterEvent();
     // this.getversion();
-    if (this.loginForm.username === '') {
-      this.$refs.username.focus()
-    } else if (this.loginForm.password === '') {
-      this.$refs.password.focus()
+    if (this.loginForm.username === "") {
+      this.$refs.username.focus();
+    } else if (this.loginForm.password === "") {
+      this.$refs.password.focus();
     }
   },
   beforeDestroy() {
-    this.removeEnterEvent()
+    this.removeEnterEvent();
   },
   methods: {
     bindEnterEvent() {
-      window.addEventListener('keydown', this.listener)
+      window.addEventListener("keydown", this.listener);
     },
     removeEnterEvent() {
-      window.removeEventListener('keydown', this.listener)
+      window.removeEventListener("keydown", this.listener);
     },
     listener(e) {
-      e.keyCode === 13 && this.handleLogin()
+      e.keyCode === 13 && this.handleLogin();
     },
     async getversion() {
-      const { code, data } = await asyncRequest.version({})
+      const { code, data } = await asyncRequest.version({});
       if (code === 0) {
-        const { version } = data
-        this.ver = version
+        const { version } = data;
+        this.ver = version;
       } else {
-        this.ver = ''
+        this.ver = "";
       }
     },
     setVisible(val) {
-      this.show = val
+      this.show = val;
     },
     handleClick() {
-      this.show = true
+      this.show = true;
     },
     handleSuccess() {
-      this.show = false
-      this.handleLogin()
+      this.show = false;
+      this.handleLogin();
     },
     checkCapslock(e) {
-      const { key } = e
-      this.capsTooltip = key && key.length === 1 && key >= 'A' && key <= 'Z'
+      const { key } = e;
+      this.capsTooltip = key && key.length === 1 && key >= "A" && key <= "Z";
     },
     showPwd() {
-      if (this.passwordType === 'password') {
-        this.passwordType = ''
+      if (this.passwordType === "password") {
+        this.passwordType = "";
       } else {
-        this.passwordType = 'password'
+        this.passwordType = "password";
       }
       this.$nextTick(() => {
-        this.$refs.password.focus()
-      })
+        this.$refs.password.focus();
+      });
     },
     // 生成随机数
     randomNum(min, max) {
-      max = max + 1
-      return Math.floor(Math.random() * (max - min) + min)
+      max = max + 1;
+      return Math.floor(Math.random() * (max - min) + min);
     },
     // 更新验证码
     refreshCode() {
-      this.identifyCode = ''
-      this.makeCode(this.identifyCodes, 4)
+      this.identifyCode = "";
+      this.makeCode(this.identifyCodes, 4);
     },
     makeCode(data, len) {
       for (let i = 0; i < len; i++) {
         this.identifyCode += this.identifyCodes[
           this.randomNum(0, this.identifyCodes.length - 1)
-        ]
+        ];
       }
     },
     async handleLogin() {
-       try{
-         await this.$refs.loginForm.validate()
-         const response = await this.$store.dispatch('user/login',this.loginForm)
-         const { code } = response
-         if(Number(code) === 1) this.getMenu()
-         this.loading = false
-       }catch (e){
-         console.log(e)
-         this.loading = false
-       }
+      try {
+        await this.$refs.loginForm.validate();
+        const response = await this.$store.dispatch("user/login", this.loginForm);
+        const { code } = response;
+        if (Number(code) === 1) this.getMenu();
+        this.loading = false;
+      } catch (e) {
+        console.log(e);
+        this.loading = false;
+      }
     },
     getMenu() {
       this.$store
-        .dispatch('user/getMenuList', this)
+        .dispatch("user/getMenuList", this)
         .then((res) => {
           window.vm.$router.push({
-            path: '/welcome/dashboard/',
-            query: this.otherQuery
-          })
-          this.loading = false
+            path: "/welcome/dashboard/",
+            query: this.otherQuery,
+          });
+          this.loading = false;
         })
         .catch((err) => {
-          this.loading = false
-        })
+          this.loading = false;
+        });
     },
     getOtherQuery(query) {
       return Object.keys(query).reduce((acc, cur) => {
-        if (cur !== 'redirect') {
-          acc[cur] = query[cur]
+        if (cur !== "redirect") {
+          acc[cur] = query[cur];
         }
-        return acc
-      }, {})
-    }
-  }
-}
+        return acc;
+      }, {});
+    },
+  },
+};
 </script>
 
 <style lang="scss">
@@ -374,8 +378,12 @@ $light_gray: #f2f2f2;
   left: 0;
   width: 100%;
   height: 100%;
-  transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
-  background-image: url("~@/assets/design/bg-pc.jpg");
+  line-height: 1;
+  text-align: center;
+  background: #fff;
+  position: relative;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  // background-image: url("~@/assets/design/bg-pc.jpg");
   zoom: 1;
   background-repeat: no-repeat;
   background-size: 100% 100%;
@@ -383,11 +391,21 @@ $light_gray: #f2f2f2;
   text-align: center;
   .login-form-main {
     height: 500px;
-    position: absolute;
-    right: 200px;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: all 0.20s cubic-bezier(0.4, 0, 0.2, 1);
+    width: 450px;
+    display: inline-block;
+    margin:  0 auto;
+    box-shadow: 0 0 6px #fdf6ec;
+    margin-top: calc(50vh - 300px);
+    background: #fdf6ec;
+    border:1px solid #faecd8;
+    border-radius: 20px;
+    overflow: hidden;
+  
+    // position: absolute;
+    // right: 200px;
+    // top: 50%;
+    // transform: translateY(-50%);
+    // transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 
     img {
       width: 400px;
@@ -395,12 +413,12 @@ $light_gray: #f2f2f2;
     }
 
     .main-title {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 2;
-      left: 170px;
-      top: 125px;
+      // position: absolute;
+      // top: 0;
+      // left: 0;
+      // z-index: 2;
+      // left: 170px;
+      // top: 125px;
       text-align: left;
       color: #fff;
       h1 {
@@ -415,24 +433,26 @@ $light_gray: #f2f2f2;
       width: 400px;
       top: -40px;
       right: 100px;
-      z-index: 3;
+      // z-index: 3;
       max-width: 100%;
-      padding: 50px 28px 35px 28px;
+      padding: 65px 28px 35px 28px;
       margin: 0 auto;
       overflow: hidden;
       border-radius: 20px;
 
-      .el-form-item{
+      .el-form-item {
         border: 1px solid transparent;
         border-bottom: 1px solid #e1e1e1;
         border-radius: 0px;
       }
 
       .el-button--primary {
-        background-color: #087af5;
-        border-color: #087af5;
+        background:linear-gradient(rgb(250, 170, 110), rgb(249, 138, 54));;
+        border:0px solid #087af5;
+        color: #fff;
         height: 46px;
         font-size: 16px;
+        margin: 5px 0 0 0;
         text-align: center;
         border-radius: 15px;
       }
@@ -538,79 +558,81 @@ $light_gray: #f2f2f2;
   height: 38px;
 }
 
-.el-icon-key,.el-icon-user,.el-icon-unlock{
-  color:#087af5 !important;
+.el-icon-key,
+.el-icon-user,
+.el-icon-unlock {
+  color: #087af5 !important;
   font-weight: 700;
 }
 
-@media screen and (max-width: 1800px) {
-  .login-container{
-    .login-form-main {
-      right: 100px;
-    }
-  }
-}
-
-@media screen and (max-width: 1200px) {
-  .login-container{
-    .login-form-main {
-      right: 50px;
-    }
-  }
-}
-
-@media screen and (max-width: 1024px) {
-  .login-container{
-    background-image: url("~@/assets/design/bg-pad.jpg");
-    .login-form-main {
-      right: 50px;
-      width: 300px;
-    }
-  }
-}
-
-@media screen and (max-width: 992px) {
-  .login-container{
-    background-image: url("~@/assets/design/bg-pad.jpg");
-    .login-form-main {
-      right: 20px;
-      width: 360px;
-    }
-  }
-}
-
-@media screen and (max-width: 840px) {
-  .login-container{
-    background-image: url("~@/assets/design/bg-pad.jpg");
-    .login-form-main {
-      right: 5px;
-    }
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .login-container{
-    background-image: url("~@/assets/design/bg-phone.jpg");
-    .login-form-main {
-      right: 20px;
-      width: 95%;
-      background: #fff;
-      left: 50%;
-      transform: translate(-50%,-50%);
-      border-radius: 20px;
-      height: auto;
-    }
-  }
-
-  .beian{
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 0px !important;
-
-    a{
-      color: #fff !important;
-    }
-  }
-}
+// @media screen and (max-width: 1800px) {
+//   .login-container {
+//     .login-form-main {
+//       right: 100px;
+//     }
+//   }
+// }
+
+// @media screen and (max-width: 1200px) {
+//   .login-container {
+//     .login-form-main {
+//       right: 50px;
+//     }
+//   }
+// }
+
+// @media screen and (max-width: 1024px) {
+//   .login-container {
+//     background-image: url("~@/assets/design/bg-pad.jpg");
+//     .login-form-main {
+//       right: 50px;
+//       width: 300px;
+//     }
+//   }
+// }
+
+// @media screen and (max-width: 992px) {
+//   .login-container {
+//     background-image: url("~@/assets/design/bg-pad.jpg");
+//     .login-form-main {
+//       right: 20px;
+//       width: 360px;
+//     }
+//   }
+// }
+
+// @media screen and (max-width: 840px) {
+//   .login-container {
+//     background-image: url("~@/assets/design/bg-pad.jpg");
+//     .login-form-main {
+//       right: 5px;
+//     }
+//   }
+// }
+
+// @media screen and (max-width: 768px) {
+//   .login-container {
+//     background-image: url("~@/assets/design/bg-phone.jpg");
+//     .login-form-main {
+//       right: 20px;
+//       width: 95%;
+//       background: #fff;
+//       left: 50%;
+//       transform: translate(-50%, -50%);
+//       border-radius: 20px;
+//       height: auto;
+//     }
+//   }
+
+//   .beian {
+//     position: fixed;
+//     left: 50%;
+//     transform: translateX(-50%);
+//     padding: 0px !important;
+
+//     a {
+//       color: #fff !important;
+//     }
+//   }
+// }
 </style>