diff --git a/src/assets/img/loginBackImage.8b77ab2c.png b/src/assets/img/loginBackImage.8b77ab2c.png
new file mode 100644
index 0000000..9126047
Binary files /dev/null and b/src/assets/img/loginBackImage.8b77ab2c.png differ
diff --git a/src/assets/img/loginbg.jpeg b/src/assets/img/loginbg.jpeg
new file mode 100644
index 0000000..ee27229
Binary files /dev/null and b/src/assets/img/loginbg.jpeg differ
diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png
new file mode 100644
index 0000000..9257133
Binary files /dev/null and b/src/assets/img/logo.png differ
diff --git a/src/components/common/Header.vue b/src/components/common/Header.vue
index 170420d..c1ed6d8 100644
--- a/src/components/common/Header.vue
+++ b/src/components/common/Header.vue
@@ -1,28 +1,19 @@
 <template>
   <div class="header">
-    <!-- 折叠按钮 -->
-    <!-- <div class="collapse-btn" @click="collapseChage">
-            <i v-if="!collapse" class="el-icon-s-fold"></i>
-            <i v-else class="el-icon-s-unfold"></i>
-        </div> -->
     <div class="logo">可视化智能管控系统</div>
     <v-sidebar></v-sidebar>
     <div class="header-right">
       <div class="header-user-con">
-        <el-select v-model="colorValue" value-key="value" @change="changeTheme">
+        <el-select v-model="colorValue" @change="changeTheme">
           <el-option
             v-for="item in colorList"
             :key="item.value"
             :label="item.label"
             :value="item.value"
           ></el-option>
-          <!-- <el-option label="红色" value="红色"></el-option>
-                    <el-option label="绿色" value="绿色"></el-option>
-                    <el-option label="橙色" value="橙色"></el-option> -->
         </el-select>
         <!-- 全屏显示 -->
-
-        <div class="btn-fullscreen" @click="handleFullScreen">
+        <!-- <div class="btn-fullscreen" @click="handleFullScreen">
           <el-tooltip
             effect="dark"
             :content="fullscreen ? `取消全屏` : `全屏`"
@@ -30,8 +21,7 @@
           >
             <i class="el-icon-rank"></i>
           </el-tooltip>
-        </div>
-
+        </div> -->
         <!-- 用户头像 -->
         <div class="user-avator">
           <img src="../../assets/img/user.jpeg" />
@@ -43,22 +33,29 @@
             <i class="el-icon-caret-bottom"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
-            <el-dropdown-item divided command="loginout"
-              >退出登录</el-dropdown-item
-            >
+            <el-dropdown-item command="noticeShow">公告</el-dropdown-item>
+            <el-dropdown-item command="changePwd"> 修改密码</el-dropdown-item>
+            <el-dropdown-item command="loginout">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </div>
+    <password-dialog
+      :dialogFormPsd="dialogFormPsd"
+      @psdDialogClose="psdDialogClose"
+    ></password-dialog>
   </div>
 </template>
 <script>
 // import bus from '../common/bus';
+import { mapState } from "vuex";
 import updateElementUiTheme from "update-element-ui-theme";
 import vSidebar from "./Sidebar.vue";
+import passwordDialog from "@/views/components/passwordDialog.vue";
 export default {
   components: {
     vSidebar,
+    passwordDialog,
   },
   data() {
     return {
@@ -81,90 +78,104 @@ export default {
         },
       ],
       colorValue: "",
-      theme: {},
-
-      //collapse: false,
       fullscreen: false,
-      name: "xinyin",
+      dialogFormPsd: false,
     };
   },
   computed: {
+    ...mapState(["username"]),
     username() {
-      let username = localStorage.getItem("ms_username");
-      return username ? username : this.name;
+      let name = localStorage.getItem("username");
+      return name;
     },
   },
   methods: {
     //修改主题色
-    changeTheme(e) {
-      console.log(e);
-      this.theme = this.colorList.find(function (i) {
-        return i.value === e;
+    changeTheme(event) {
+      console.log(event);
+      let colorTheme = {};
+      colorTheme = this.colorList.find(function (item) {
+        return item.value === event;
       }); //在change中获取到整条对象数据
-      console.log(this.theme);
-      updateElementUiTheme({
-        theme: this.theme.value,
-        themeName: "--my-theme-name",
-      });
+      console.log(colorTheme);
+
       const app = document.getElementById("app");
       console.log(app);
-      if (this.theme.label === "蓝色") {
-        this.theme.value = "#20a0ff";
+      if (colorTheme.label === "蓝色") {
+        colorTheme.value = "#20a0ff";
         app.classList.add("blueStyle");
         app.classList.remove("redStyle", "greenStyle", "orangeStyle");
-      } else if (this.theme.label === "红色") {
-        this.theme.value = "#EE320C";
+      } else if (colorTheme.label === "红色") {
+        colorTheme.value = "#EE320C";
         app.classList.remove("blueStyle", "greenStyle", "orangeStyle");
         app.classList.add("redStyle");
-      } else if (this.theme.label === "绿色") {
-        this.theme.value = "#25EE28";
+      } else if (colorTheme.label === "绿色") {
+        colorTheme.value = "#25EE28";
         app.classList.add("greenStyle");
-      } else if (this.theme.label === "橙色") {
-        this.theme.value = "#f08200";
+      } else if (colorTheme.label === "橙色") {
+        colorTheme.value = "#f08200";
         app.classList.remove("blueStyle", "greenStyle", "redStyle");
         app.classList.add("orangeStyle");
       }
+
+      updateElementUiTheme({
+        theme: colorTheme.value,
+        themeName: "--my-theme-name",
+      });
     },
     // 用户名下拉菜单选择事件
     handleCommand(command) {
-      if (command == "loginout") {
-        localStorage.removeItem("ms_username");
-        this.$router.push("/login");
+      switch (command) {
+        case "noticeShow": //公告
+          console.log(command);
+          break;
+        case "changePwd": //修改密码
+          console.log(command);
+          this.dialogFormPsd = true;
+          break;
+        case "loginout": //退出登录
+          this.$store.commit("REMOVE_INFO");
+          this.$router.push("/login");
+          break;
       }
+      // if (command == "loginout") {
+      //   localStorage.removeItem("ms_username");
+      //   this.$router.push("/login");
+      // }
     },
-    // 侧边栏折叠
-    // collapseChage() {
-    //     this.collapse = !this.collapse;
-    //     bus.$emit('collapse', this.collapse);
-    //     this.$store.commit('changeOpen', this.collapse);
-    // },
-    // 全屏事件
-    handleFullScreen() {
-      let element = document.documentElement;
-      if (this.fullscreen) {
-        if (document.exitFullscreen) {
-          document.exitFullscreen();
-        } else if (document.webkitCancelFullScreen) {
-          document.webkitCancelFullScreen();
-        } else if (document.mozCancelFullScreen) {
-          document.mozCancelFullScreen();
-        } else if (document.msExitFullscreen) {
-          document.msExitFullscreen();
-        }
-      } else {
-        if (element.requestFullscreen) {
-          element.requestFullscreen();
-        } else if (element.webkitRequestFullScreen) {
-          element.webkitRequestFullScreen();
-        } else if (element.mozRequestFullScreen) {
-          element.mozRequestFullScreen();
-        } else if (element.msRequestFullscreen) {
-          // IE11
-          element.msRequestFullscreen();
-        }
-      }
-      this.fullscreen = !this.fullscreen;
+
+    //psdDialogClose 修改密码弹窗关闭
+    psdDialogClose() {
+      this.dialogFormPsd = false;
     },
+
+    // 全屏事件
+    // handleFullScreen() {
+    //   let element = document.documentElement;
+    //   if (this.fullscreen) {
+    //     if (document.exitFullscreen) {
+    //       document.exitFullscreen();
+    //     } else if (document.webkitCancelFullScreen) {
+    //       document.webkitCancelFullScreen();
+    //     } else if (document.mozCancelFullScreen) {
+    //       document.mozCancelFullScreen();
+    //     } else if (document.msExitFullscreen) {
+    //       document.msExitFullscreen();
+    //     }
+    //   } else {
+    //     if (element.requestFullscreen) {
+    //       element.requestFullscreen();
+    //     } else if (element.webkitRequestFullScreen) {
+    //       element.webkitRequestFullScreen();
+    //     } else if (element.mozRequestFullScreen) {
+    //       element.mozRequestFullScreen();
+    //     } else if (element.msRequestFullscreen) {
+    //       // IE11
+    //       element.msRequestFullscreen();
+    //     }
+    //   }
+    //   this.fullscreen = !this.fullscreen;
+    // },
   },
   created() {
     this.colorValue = this.colorList[0].label;
diff --git a/src/main.js b/src/main.js
index 1aeb757..e1149bd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -38,18 +38,15 @@ new Vue({
 //使用钩子函数对路由进行权限跳转
 router.beforeEach((to, from, next) => {
   document.title = `${to.meta.title} | 可视化智能管控系统`;
-  const role = localStorage.getItem("ms_username");
-  //const token = localStorage.getItem("token");
-  // if (token === null || token === "") {
-  //   next("/login");
-  // } else
+  const role = localStorage.getItem("username");
+  const token = localStorage.getItem("token");
   if (!role && to.path !== "/login") {
     next("/login");
   } else if (to.meta.permission) {
     console.log(to.meta.permission);
     console.log(role);
     // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
-    role === "admin" ? next() : next("/403");
+    role === "xytest" ? next() : next("/403");
   } else {
     next();
   }
diff --git a/src/store/index.js b/src/store/index.js
index 40806e9..3750046 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -6,14 +6,25 @@ Vue.use(Vuex);
 export default new Vuex.Store({
   state: {
     //用户登录token 存储
-    token: localStorage.getItem("token") ? localStorage.getItem("token") : "",
+    token: "",
+    username: "",
   },
   getters: {},
   mutations: {
-    //修改token  并将token存入localstorage
-    setToken(state, user) {
-      state.token = user.token;
-      localStorage.setItem("token", user.token);
+    SET_TOKEN(state, token) {
+      state.token = token;
+      localStorage.setItem("token", token);
+      console.log(state);
+      console.log("store、localstorage保存token成功！");
+    },
+    SET_USERINFO(state, username) {
+      state.username = username;
+      localStorage.setItem("username", username);
+      console.log("store、localstorage保存userinfo成功！");
+    },
+    //退出清除locastorge
+    REMOVE_INFO(state) {
+      localStorage.clear();
     },
   },
   actions: {},
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 6c00033..f0849be 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,33 +1,38 @@
 <template>
   <div class="login-wrap">
     <div class="ms-login">
-      <div class="ms-title">后台管理系统</div>
+      <div class="ms-title">
+        <img src="../assets/img/logo.png" alt="欣影" />
+        <h3>可视化智能管控系统</h3>
+      </div>
       <el-form
-        :model="param"
+        :model="userInfo"
         :rules="rules"
-        ref="login"
+        ref="loginForm"
         label-width="0px"
         class="ms-content"
+        size="medium"
       >
         <el-form-item prop="username">
-          <el-input v-model="param.username" placeholder="username">
-            <el-button slot="prepend" icon="el-icon-lx-people"></el-button>
+          <el-input v-model="userInfo.username" placeholder="用户名">
+            <el-button slot="prepend" icon="el-icon-user"></el-button>
           </el-input>
         </el-form-item>
         <el-form-item prop="password">
           <el-input
             type="password"
-            placeholder="password"
-            v-model="param.password"
+            placeholder="密码"
+            show-password
+            v-model="userInfo.password"
             @keyup.enter.native="submitForm()"
           >
-            <el-button slot="prepend" icon="el-icon-lx-lock"></el-button>
+            <el-button slot="prepend" icon="el-icon-lock"></el-button>
           </el-input>
         </el-form-item>
         <div class="login-btn">
           <el-button type="primary" @click="submitForm()">登录</el-button>
         </div>
-        <p class="login-tips">Tips : 用户名和密码随便填。</p>
+        <!-- <p class="login-tips">Tips : 用户名和密码随便填。</p> -->
       </el-form>
     </div>
   </div>
@@ -35,13 +40,13 @@
 
 <script>
 import { mapMutations } from "vuex";
-import { login, get1, get2 } from "@/utils/api/index";
+import { login } from "@/utils/api/index";
 export default {
   data: function () {
     return {
-      param: {
-        username: "admin",
-        password: "123123",
+      userInfo: {
+        username: "xytest",
+        password: "123456",
       },
       rules: {
         username: [
@@ -49,40 +54,23 @@ export default {
         ],
         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
       },
+      token: "",
     };
   },
   computed: {
-    ...mapMutations(["setToken"]),
+    ...mapMutations(["setColorTheme"]),
   },
   methods: {
     submitForm() {
-      this.$refs.login.validate((valid) => {
+      this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          // login({
-          //   account: "xytest",
-          //   pwd: "2b4c6570bb613fb6b81589fbfa635edf",
-          //   captcha: "bgsq",
-          //   requestIp: "180.166.218.222",
-          //   requestPort: "7200",
-          // })
-          //   .then((res) => {
-          //     console.log(res);
-
-          //     this.$message.success("登录成功");
-
-          //     this.token = "asdadadadadasdasd" + res.statusCode;
-          //     this.setToken({ token: this.token });
-          //     this.$router.push("/");
-          //   })
-          //   .catch((error) => {
-          //     alert("账号或密码错误");
-          //     console.log(error);
-          //   });
-          this.$message.success("登录成功");
-          localStorage.setItem("ms_username", this.param.username);
-
-          console.log("加密密码：" + this.$md5(this.param.username));
+          console.log(valid);
+          //this.userInfo.password = this.$md5(this.userInfo.password); //密码加密
+          this.token = this.$md5(this.userInfo.password); //获取token
+          this.$store.commit("SET_TOKEN", this.token); //将token保存在vuex中
+          this.$store.commit("SET_USERINFO", this.userInfo.username); //将用户信息保存在vuex中
           this.$router.push("/");
+          this.$message.success("登录成功");
         } else {
           this.$message.error("请输入账号和密码");
           console.log("error submit!!");
@@ -92,14 +80,7 @@ export default {
     },
     getLogin() {},
   },
-  created() {
-    get1().then((res) => {
-      console.log(res);
-    });
-    get2().then((res) => {
-      console.log(res);
-    });
-  },
+  created() {},
 };
 </script>
 
@@ -108,29 +89,43 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  background: url(../assets/img/login-bg.jpg) no-repeat center center;
+  background: url(../assets/img/loginbg.jpeg) no-repeat center center;
   background-size: cover;
   .ms-login {
     position: absolute;
+    width: 420px;
+    height: 454px;
     left: 50%;
     top: 50%;
-    width: 350px;
-    margin: -190px 0 0 -175px;
+    transform: translate(-50%;-50%);
     border-radius: 5px;
-    background: rgba(255, 255, 255, 0.3);
-    -webkit-backdrop-filter: blur(5px);
-    backdrop-filter: blur(5px);
+    background: url(../assets/img/loginBackImage.8b77ab2c.png) no-repeat;
+    // -webkit-backdrop-filter: blur(5px);
+    // backdrop-filter: blur(15px);
     overflow: hidden;
+    background-size: 100%;
     .ms-title {
-      width: 100%;
-      line-height: 50px;
       text-align: center;
-      font-size: 20px;
-      color: @color-white;
       border-bottom: 1px solid @border-color-base;
+      padding: 40px 16px;
+
+      img {
+        margin-bottom: 8px;
+        width: 160px;
+      }
+      h3 {
+        font-size: 30px;
+        background: linear-gradient(0deg, #86b7ff, #4293fd 99.46289%);
+        background-clip: text;
+        -webkit-text-fill-color: transparent;
+        // font-weight: normal;
+      }
     }
     .ms-content {
-      padding: 30px 30px;
+      padding: 40px 40px;
+      .el-form-item {
+        margin-bottom: 30px;
+      }
       .login-btn {
         text-align: center;
         button {
@@ -140,11 +135,11 @@ export default {
         }
       }
     }
-    .login-tips {
-      font-size: 12px;
-      line-height: 30px;
-      color: @color-white;
-    }
+    // .login-tips {
+    //   font-size: 12px;
+    //   line-height: 30px;
+    //   color: @color-white;
+    // }
   }
 }
 </style>
diff --git a/src/views/components/passwordDialog.vue b/src/views/components/passwordDialog.vue
new file mode 100644
index 0000000..753ce59
--- /dev/null
+++ b/src/views/components/passwordDialog.vue
@@ -0,0 +1,48 @@
+<template>
+  <el-dialog
+    class="psdDialog"
+    title="修改密码"
+    :visible.sync="dialogFormPsd"
+    width="420px"
+  >
+    <el-form :model="psdForm" label-position="left" label-width="80px">
+      <el-form-item label="登录账号:">
+        <el-input v-model="psdForm.name" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="原密码:">
+        <el-input v-model="psdForm.originalPsd" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="新密码:">
+        <el-input v-model="psdForm.newPsd" autocomplete="off"></el-input>
+      </el-form-item>
+      <el-form-item label="确认密码:">
+        <el-input v-model="psdForm.confirmPsd" autocomplete="off"></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">取 消</el-button>
+      <el-button type="primary" @click="closeDialog">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: ["dialogFormPsd"],
+
+  data() {
+    return {
+      psdForm: {
+        name: "",
+        originalPsd: "",
+        newPsd: "",
+        confirmPsd: "",
+      },
+    };
+  },
+  methods: {
+    closeDialog() {
+      this.$emit("psdDialogClose");
+    },
+  },
+};
+</script>