diff --git a/package-lock.json b/package-lock.json
index 98c4e4e0222d1c0e4d200ce881058cd7b8b7ffff..d2efe6ee981a95c966b392d9fe4bf47a1a969728 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15766,7 +15766,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.2.tgz",
       "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
-      "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -15985,8 +15984,7 @@
     "binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.2.0.tgz",
-      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true
+      "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA=="
     },
     "bl": {
       "version": "4.1.0",
@@ -16079,7 +16077,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmmirror.com/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
-      "dev": true,
       "requires": {
         "fill-range": "^7.0.1"
       }
@@ -16239,7 +16236,6 @@
       "version": "3.5.3",
       "resolved": "https://registry.npmmirror.com/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
-      "dev": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -17938,7 +17934,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
-      "dev": true,
       "requires": {
         "to-regex-range": "^5.0.1"
       }
@@ -18182,7 +18177,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmmirror.com/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "optional": true
     },
     "function-bind": {
@@ -18281,7 +18275,6 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
       }
@@ -18662,6 +18655,11 @@
       "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmmirror.com/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ=="
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmmirror.com/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -18721,7 +18719,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -18752,8 +18749,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="
     },
     "is-file-esm": {
       "version": "1.0.0",
@@ -18773,7 +18769,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
@@ -18792,8 +18787,7 @@
     "is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="
     },
     "is-plain-obj": {
       "version": "3.0.0",
@@ -19955,8 +19949,7 @@
     "normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="
     },
     "normalize-range": {
       "version": "0.1.2",
@@ -20335,8 +20328,7 @@
     "picomatch": {
       "version": "2.3.1",
       "resolved": "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="
     },
     "pkg-dir": {
       "version": "4.2.0",
@@ -20923,7 +20915,6 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
       }
@@ -21211,6 +21202,25 @@
         "neo-async": "^2.6.2"
       }
     },
+    "sass": {
+      "version": "1.53.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.53.0.tgz",
+      "integrity": "sha512-zb/oMirbKhUgRQ0/GFz8TSAwRq2IlR29vOUJZOx0l8sV+CkHUfHa4u5nqrG+1VceZp7Jfj59SVW9ogdhTvJDcQ==",
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
+    "sass-loader": {
+      "version": "13.0.2",
+      "resolved": "https://registry.npmmirror.com/sass-loader/-/sass-loader-13.0.2.tgz",
+      "integrity": "sha512-BbiqbVmbfJaWVeOOAu2o7DhYWtcNmTfvroVgFXa6k2hHheMxNAeDHLNoDy/Q5aoaVlz0LH+MbMktKwm9vN/j8Q==",
+      "requires": {
+        "klona": "^2.0.4",
+        "neo-async": "^2.6.2"
+      }
+    },
     "schema-utils": {
       "version": "2.7.1",
       "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-2.7.1.tgz",
@@ -21966,7 +21976,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "requires": {
         "is-number": "^7.0.0"
       }
diff --git a/package.json b/package.json
index 7321ecc742d8415158288f57fcc161daa37d005b..52a85364cb479d941ccd61c66c990cd9d48a9d66 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "axios": "^0.27.2",
     "core-js": "^3.8.3",
     "element-plus": "^2.2.9",
+    "sass": "^1.53.0",
     "node-sass": "^7.0.1",
     "sass-loader": "^13.0.2",
     "vue": "^3.2.13",
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 62b047671fe8d3b21a231e4eb34c524d4382d874..d39112002566745ab867a6f4d11fe0b472c46e14 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,40 +1,65 @@
 <template>
-    <div id="header">
-        <div >欢迎您：</div>
-        <div id="system"    >系统管理员</div>
-        <!-- <div id="hospital"  >医院管理员</div> -->
-        <!-- <div id="area"     >区县管理员</div> -->
-        <!-- <div id="doctor"    >医生</div> -->
-        <div id="line">-</div>
-        <div>name</div>
-        <img id="img" src="../assets/logo.png"  />
+    <div id="header" style="background-color:azure">
+        <el-dropdown>
+            <div >
+                <div >欢迎您：</div>
+                <div id="system" >系统管理员</div>
+                <!-- <div id="hospital"  >医院管理员</div> -->
+                <!-- <div id="area"     >区县管理员</div> -->
+                <!-- <div id="doctor"    >医生</div> -->
+                <div id="line">-</div>
+                <div>name</div>
+                <img id="img" src="../assets/logo.png"  />
+            </div>
+            <template #dropdown>
+                <el-dropdown-menu>
+                    <el-dropdown-item @click="changepassword">修改资料</el-dropdown-item>
+                    <el-dropdown-item @click="userinfochange">修改个人密码</el-dropdown-item>
+                    <el-dropdown-item divided @click="back">退出登录</el-dropdown-item>
+                </el-dropdown-menu>
+            </template>
+        </el-dropdown>
     </div>
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue'
-
+import router from '../router/index'
 
 export default defineComponent({
     setup () {
         const  body  =  ref('')
- 
-        return { body }
+        
+        const back = ()=>{
+            router.push('/login')
+            window.localStorage.clear()
+        }
+        const userinfochange = ()=>{
+            router.push('/home/system/change')
+        }
+        const changepassword = ()=>{
+            router.push('/home/system/self')
+        }
+        return { body,back,userinfochange,changepassword }
     }
 })
 </script>
 
 <style scoped>
-#header{
+.el-tooltip__trigger{
     display: flex;
     align-items: center;
     justify-content: end;
-    height: 70px;
+    height: 74px;
     width: 100%;
     /* border: 2px solid green; */
-    box-shadow:  0 1px 50px 10px  #E9EAEE   ;
 }
-.el-header{
-    --el-header-padding: 0;
+#header{
+    width: 100%;
+    background-color: rgb(255, 255, 255) !important;
+    display: flex ;
+    justify-content: end;
+    box-shadow:  0 1px 50px 10px  #E9EAEE   ;
+
 }
 #system{
     background-color: red;
diff --git a/src/components/Home.vue b/src/components/Home.vue
index d3c2f9fc3f50d74db7f1315657c7ca8fb52f79ed..b2edb8a01714973d6a69ee262cb77a9cb166e2be 100644
--- a/src/components/Home.vue
+++ b/src/components/Home.vue
@@ -5,7 +5,7 @@
                 <v-aside></v-aside>
             </el-aside>
             <el-container>
-                <el-header>
+                <el-header width="100%">
                     <v-head></v-head>
                 </el-header>
                 <el-main>
@@ -32,13 +32,18 @@ export default defineComponent({
     },
     setup () {
         
-
         return {}
     }
 })
 </script>
 
 <style scoped>
+.el-header{
+    width: 100%;
+    height: 78px;
+    display:flex;
+    justify-content: end;
+}
 .el-footer{
     background-color: #f3f3f3;
     border-radius:5px;
@@ -46,4 +51,7 @@ export default defineComponent({
 .footer{
     margin-top:20px
 }
+.el-header{
+    --el-header-padding:0px !important;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 73e61d59f104755ff9baeb4bc9fed0eac352a6ed..542763aeda996eafe983a7d5160be64ed20dae12 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,7 +1,7 @@
 <template>
     <div id="side">
         <el-menu  router :default-active="onRoutes" text-color="#000000">
-            <el-menu-item >发热信息登记管理</el-menu-item>
+            <el-menu-item index="/home/homepage">发热信息登记</el-menu-item>
             <el-menu-item index="/home/homepage">系统首页</el-menu-item>
             <el-menu-item index="/home/feverinformation">发热信息记录</el-menu-item>
             <el-menu-item index="/home/data/area">区县管理</el-menu-item>
@@ -34,9 +34,9 @@ export default defineComponent({
 
 <style scoped>
 .el-menu{
-    height: 940px;
-    border-radius: 10px;
-    background-image:linear-gradient(#5695ddc4,#2345ad) ;
+    height: calc(100vh);
+    /* border-radius: 10px; */
+    background-image:linear-gradient(#5695ddc4,#3a5bc0) ;
 }
 .el-menu-item.is-active{
     color: greenyellow;
diff --git a/src/http/api.ts b/src/http/api.ts
index 8b67c8dc0fa79d02c7dccf668b30dfae207d621a..c080180f23fe3ac6d4f4b8da3631136aff44e19e 100644
--- a/src/http/api.ts
+++ b/src/http/api.ts
@@ -1,8 +1,4 @@
 import $http from "./index";
-
-interface logindata {
-    username:string;
-    password:string;
-}
+import {logindata} from '../type/login'
 
 export const login = (data:logindata)=>$http({url:"",method:"",data}) 
\ No newline at end of file
diff --git a/src/http/index.ts b/src/http/index.ts
index ba48edc467f3222874e001391fb7feddd7055328..c631a9b6fe612d6962061b46b77f717e85e23a75 100644
--- a/src/http/index.ts
+++ b/src/http/index.ts
@@ -1,29 +1,48 @@
 import axios from 'axios';
+import { ElMessage } from 'element-plus';
+
+
+enum MSGS {
+    "操作成功" = 200,
+    "密码错误",
+    "账号错误",
+    "请求异常"
+}
+
 
 //创建http实例
 const $http = axios.create({
     baseURL:'',
     timeout:2000,
     headers:{
-
+        "Content-Type":"application/json;charset=utf-8"
     },
 })
 
 //请求拦截
 
-$http.interceptors.request.use(
-    config=>{
-
+$http.interceptors.request.use(config=>{
+    config.headers =  config.headers || {}
+    if(localStorage.getItem('token')){
+        config.headers.token = localStorage.getItem('token') || ''
     }
-)
+    return config
+})
+
+
+$http.interceptors.response.use(res=>{
 
-$http.interceptors.response.use(
-    res=>{
+    const code:number = res.data.code
 
-    },err=>{
-        
+    if(code!==200){
+        ElMessage.error(MSGS[code])
+        return Promise.reject(res.data)
     }
-)
+
+    return res.data
+},err=>{
+    console.log(err);
+})
 
 
-export default $http
\ No newline at end of file
+export default $http
diff --git a/src/type/login.ts b/src/type/login.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9edd8b21c47e0adddf59a9143e9dc2cfccc5701f
--- /dev/null
+++ b/src/type/login.ts
@@ -0,0 +1,17 @@
+
+export interface logindata {
+    username:string;
+    password:string;
+}
+
+
+export  class userdatainit{
+    userInfo:logindata = {
+        username:'',
+        password:''
+    }
+}
+
+
+
+  
\ No newline at end of file
diff --git a/src/views/404.vue b/src/views/404.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/src/views/Area.vue b/src/views/Area.vue
index bf049b35911c632f792e9f00bfba2eca41eab9b2..0c023066b47965f34047d2fde6794ca446880fc9 100644
--- a/src/views/Area.vue
+++ b/src/views/Area.vue
@@ -1,21 +1,132 @@
 <template>
-    <div>
-        区县数据维护
+    <div >
+        <div id="area-hader" style="text-align:left;font-size: 30px;height: 60px;">区县数据维护</div>
+        <div style="width:92%;margin:0 2%;border: 1px solid gray;padding: 2%;box-shadow:  0 1px 50px 10px  #E9EAEE   ;">
+            <div id="table-header" >
+                <div style="color:#5695ddc4;font-size: 25px;">区县数据</div>
+                <div style="display: flex; width:300px;margin-right: 3%;" >
+                    <div style="width:100px;font-size:25px;height: 30px;">搜索：</div>
+                    <el-input  v-model="search" size="" placeholder="请输入区县名称" />
+                </div>
+            </div>
+            <div id="table">
+                <el-table :data="filterTableData" style="width: 100%" stripe="ture" border="ture">
+                    <el-table-column label="编号" prop="date" />
+                    <el-table-column label="区县名称" prop="name" />
+                    <el-table-column label="操作">
+                        <template #default="scope">
+                            <el-button @click="handleEdit(scope.$index, scope.row)">修改</el-button>
+                            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+        </div>
     </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref ,computed} from 'vue'
 
 export default defineComponent({
     setup () {
-        
-
-        return {}
+        interface User {
+          date: string
+          name: string
+        }
+        const search = ref('')
+        const filterTableData = computed(() =>
+          tableData.filter(
+            (data) =>
+              !search.value ||
+              data.name.toLowerCase().includes(search.value.toLowerCase())||
+              data.date.toLowerCase().includes(search.value.toLowerCase())
+          )
+        )
+        const handleEdit = (index: number, row: User) => {
+          console.log(index, row)
+        }
+        const handleDelete = (index: number, row: User) => {
+          console.log(index, row)
+        }
+        const tableData: User[] = [
+          {
+            date: '1',
+            name: '卫滨区',
+          },
+          {
+            date: '2',
+            name: '红旗区',
+          },
+          {
+            date: '3',
+            name: '牧野区',
+          },
+          {
+            date: '4',
+            name: '凤泉区',
+          },
+            {
+            date: '5',
+            name: '新乡县',
+          },
+          {
+            date: '6',
+            name: '获嘉县',
+          },
+          {
+            date: '7',
+            name: '卫辉市',
+          },
+          {
+            date: '8',
+            name: '原阳县',
+          },
+            {
+            date: '9',
+            name: '延津县',
+          },
+          {
+            date: '10',
+            name: '封丘县',
+          },
+          {
+            date: '11',
+            name: '高新区',
+          },
+          {
+            date: '12',
+            name: '经开区',
+          },
+            {
+            date: '13',
+            name: '平原示范区',
+          },
+          {
+            date: '14',
+            name: '长垣市',
+          },
+          {
+            date: '15',
+            name: '辉县市',
+          },
+        ]
+        return {tableData,handleDelete,handleEdit,filterTableData,search}
     }
 })
 </script>
 
 <style scoped>
-
+.el-input{
+    height:38px;
+    width:200px;
+}
+#table-header{
+    display: flex;
+    justify-content:space-between
+}
+#area-header{
+    position:absolute;
+    right: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 76e12848716e4e878f9ccd9cbbdb6c6ae694ed96..dab5bc6de8fe3184304b1c6fe47381a7806234d3 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -1,23 +1,24 @@
 <template>
     <div id="background">
         <div id="login">
+            <img src="" />
             <div id="formbox">
                 <el-form>
                     <div id="title">发热信息登记系统 用户登录</div>
                     <el-form-item>
-                        <el-input  v-model="account" placeholder="请输入登陆用户名" input-style="height:50px" clearable />
+                        <el-input  v-model="userInfo.username" placeholder="请输入登陆用户名" input-style="height:50px" clearable />
                     </el-form-item>                
                     
                     <el-form-item>
-                        <el-input v-model="password" type="password" placeholder="请输入密码" input-style="height:50px" show-password />
+                        <el-input v-model="userInfo.password" type="password" placeholder="请输入密码" input-style="height:50px" show-password />
                     </el-form-item>
                     
                     <el-form-item>
-                        <el-checkbox label="在本设备上记住我" name="type" />
+                        <el-checkbox label="在本设备上记住我" size="large" name="type" />
                     </el-form-item>
 
                     <el-form-item>
-                        <button id="button">登录</button>
+                        <el-button id="button" @click="onSubmit">登录</el-button>
                     </el-form-item>
                 </el-form>
             </div>
@@ -27,16 +28,19 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
-import { ref } from 'vue'
+import { defineComponent,reactive,ref,toRefs } from 'vue'
+import { login } from '@/http/api'
+import {userdatainit} from '../type/login'
 
 export default defineComponent({
     setup () {
-        const password = ref('')
-        const account = ref('')
+        const data = reactive(new userdatainit()) 
+    function onSubmit(){
+        let res = login
 
-        return { password,account }
     }
+        return { onSubmit,...toRefs(data)}
+    },
 })
 </script>
 
@@ -47,12 +51,13 @@ export default defineComponent({
     background-color: #4E73DF;
 }
 #login{
-    position: absolute;
     top: 35%;
-    right: 35%;
-    width: 30%;
+    margin-left:40%;
+    width: 400px;
     border-radius:15px;
     background-color:white ;
+    position: absolute;
+    /* display: flex; */
 }
 #formbox{
     margin: 10px;