diff --git a/package-lock.json b/package-lock.json
index 15f83ea..ca426d6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "axios": "^0.27.2",
         "core-js": "^3.8.3",
         "echarts": "^5.3.3",
+        "pinia": "^2.0.18",
         "vue": "^3.2.13",
         "vue-echarts": "^6.2.3",
         "vue-router": "^4.1.3"
@@ -8073,6 +8074,50 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.0.18.tgz",
+      "integrity": "sha512-I5MW05UVX6a5Djka136oH3VzYFiZUgeOApBwFjMx6pL91eHtGVlE3adjNUKLgtwGnrxiBRuJ8+4R3LKJKwnyZg==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.2.1",
+        "vue-demi": "*"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.7",
+      "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz",
+      "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
@@ -17477,6 +17522,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmmirror.com/pinia/-/pinia-2.0.18.tgz",
+      "integrity": "sha512-I5MW05UVX6a5Djka136oH3VzYFiZUgeOApBwFjMx6pL91eHtGVlE3adjNUKLgtwGnrxiBRuJ8+4R3LKJKwnyZg==",
+      "requires": {
+        "@vue/devtools-api": "^6.2.1",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.7",
+          "resolved": "https://registry.npmmirror.com/vue-demi/-/vue-demi-0.13.7.tgz",
+          "integrity": "sha512-hbhlvpx1gFW3TB5HxJ0mNxyA9Jh5iQt409taOs6zkhpvfJ7YzLs1rsLufJmDsjH5PI1cOyfikY1fE/meyHfU5A==",
+          "requires": {}
+        }
+      }
+    },
     "pkg-dir": {
       "version": "4.2.0",
       "resolved": "https://registry.npmmirror.com/pkg-dir/-/pkg-dir-4.2.0.tgz",
diff --git a/package.json b/package.json
index 4b411b9..6273752 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "echarts": "^5.3.3",
+    "pinia": "^2.0.18",
     "vue": "^3.2.13",
     "vue-echarts": "^6.2.3",
     "vue-router": "^4.1.3"
diff --git a/src/assets/css/images/background.jpeg b/src/assets/css/images/background.jpeg
new file mode 100644
index 0000000..87ac496
Binary files /dev/null and b/src/assets/css/images/background.jpeg differ
diff --git a/src/components/Layout.vue b/src/components/Layout.vue
index 22f80fc..cdb83ca 100644
--- a/src/components/Layout.vue
+++ b/src/components/Layout.vue
@@ -22,7 +22,7 @@
       <a-layout-header style="background: #fff; padding: 0" class="headers">
         <a-dropdown style="margin-right: 20px" class="down">
         <a class="ant-dropdown-link" @click.prevent>
-         强彦文
+          {{username}}
         <DownOutlined />
       </a>`
     <template #overlay>
@@ -30,6 +30,9 @@
         <a-menu-item>
           <a href="javascript:" @click="login">注销</a>
         </a-menu-item>
+         <a-menu-item>
+          <a href="javascript:" @click="Check">修改用户名</a>
+        </a-menu-item>
       </a-menu>
     </template>
   </a-dropdown>
@@ -61,6 +64,9 @@ import {
 } from '@ant-design/icons-vue';
 import {useRouter,useRoute} from "vue-router";
 import { defineComponent, ref,watch } from 'vue';
+import {useStore} from "@/store";
+import {storeToRefs} from "pinia";
+
 export default defineComponent({
   name: "layout",
   components: {
@@ -75,26 +81,27 @@ export default defineComponent({
   setup() {
     const  collapsed = ref(false)
     const selectedKeys = ref(['1'])
+    const {username} = storeToRefs(useStore())
     let container = {
        padding: '24px', background: '#fff', minHeight: '100%'}
     const router = useRouter()
     const route = useRoute()
     const goTopage=(item)=>{
       router.push('/'+item.key).catch((err)=>err)
-      console.log(route.meta.title)
     }
     const login =()=>{
       //清除cookie
       router.push("/login")
     }
-
     return {
       collapsed,
       selectedKeys,
       container,
       goTopage,
       route,
-      login
+      login,
+      username,
+      Check
     };
   },
 });
diff --git a/src/main.js b/src/main.js
index efa6bd3..a95635d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,7 +7,10 @@ import './assets/css/style.css'
 import Echarts from "vue-echarts";
 import "echarts"
 const app = createApp(App)
+import {createPinia} from "pinia";
+const pina = createPinia()
 app.component("Echarts",Echarts)
 app.use(Antd)
+app.use(pina)
 app.use(router)
 app.mount('#app')
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..1ee08d8
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,17 @@
+import {defineStore} from "pinia";
+const useStore = defineStore("mon",{
+    state(){
+        return {
+            username: "乔文章"
+        }
+    },
+    actions:{
+        Update(username){
+          this.username = username
+        }
+    }
+})
+
+export {
+    useStore
+}
\ No newline at end of file
diff --git a/src/view/Login.vue b/src/view/Login.vue
index d6bace8..22e2403 100644
--- a/src/view/Login.vue
+++ b/src/view/Login.vue
@@ -1,15 +1,142 @@
 <template>
-<div>
-  我是登录页面
+<div class="container">
+  <div class="loginBox">
+     <a-form class="loginForm" :model="formdata"
+           :rules="rules" ref="formRef" >
+       <a-form-item
+        name="username"
+       >
+         <a-input placeholder="请输入用户名" v-model:value="formdata.username">
+           <template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
+         </a-input>
+       </a-form-item>
+       <a-form-item name="password" >
+         <a-input-password placeholder="请输入密码"  v-model:value="formdata.password" v-on:keyup.enter="">
+           <template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
+         </a-input-password>
+       </a-form-item>
+       <a-form-item class="loginBtn">
+         <a-button type="primary" style="margin: 10px" @click="">登录</a-button>
+         <a-button type="info" style="margin: 10px" @click.prevent="close">取消</a-button>
+       </a-form-item>
+     </a-form>
+  </div>
+
+
 </div>
 </template>
 
 <script>
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
+import { useRouter } from 'vue-router'
+import {reactive,toRaw,ref} from 'vue'
+import { message } from 'ant-design-vue';
+import {useStore} from "@/store";
+
+
 export default {
-  name: "Login.vue"
+  name: "login",
+  components:{
+    UserOutlined,
+    LockOutlined,
+  },
+  setup(){
+    const formdata=reactive({
+      username: "",
+      password: "",
+    })
+    //用户名和密码验证校验
+    const formRef = ref();
+
+    const router = useRouter()
+
+    const rules = {
+      username:{
+        required: true,
+        min:2,
+        max:12,
+        message: "用户名在3-12个字符之间"
+      },
+      password:{
+        required: true, message: '请输入密码',trigger:'blur'
+      }
+    }
+    const close = () => {
+      formRef.value.resetFields();
+    };
+    const mon = useStore()
+    const Check =(username)=>{
+       mon.Update(username)
+    }
+
+
+    // const logins = () => {
+    //      formRef.value.validate().then(()=>{
+    //        Login(formdata).then((rep)=>{
+    //          if (rep.data.code !==200){
+    //            message.error(rep.data.msg)
+    //          }else{
+    //            message.success(rep.data.msg)
+    //            console.log(rep.data)
+    //            window.sessionStorage.setItem('token',rep.data.data.token)
+    //            router.push('/admin/index')
+    //          }
+    //        })
+    //      }).catch((err)=>{
+    //        message.error("输入非法数据,请重新输入!",err)
+    //      })
+    // }
+
+
+
+
+
+
+
+
+
+
+
+    return {
+      formdata,
+      close,
+      rules,
+      formRef,
+    }
+  },
+
 }
-</script>
+</script >
 
 <style scoped>
+.container{
+  height: 100%;
+  background-color: #282C34;
+  background-image: url("../assets/css/images/background.jpeg");
+
+}
+.loginBox{
+  width: 450px;
+  height: 300px;
+  background-color: rgb(50, 109, 146);
+  position: absolute;
+  top: 50%;
+  left: 80%;
+  transform: translate(-50%,-50%);
+  border-radius: 9px;
+
+}
+.loginForm{
+  width: 100%;
+  position: absolute;
+  bottom: 10%;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+.loginBtn{
+  display: flex;
+  justify-content: flex-end;
+}
+
 
 </style>
\ No newline at end of file