diff --git a/web/monit_web/src/api/user.js b/web/monit_web/src/api/user.js
new file mode 100644
index 0000000..aa7026e
--- /dev/null
+++ b/web/monit_web/src/api/user.js
@@ -0,0 +1,10 @@
+import request from "../utils/request";
+
+export const Login =data =>{
+    return request({
+        url: '/login',
+        method: "POST",
+        data: data,
+    })
+
+}
diff --git a/web/monit_web/src/assets/img/login-bg.jpg b/web/monit_web/src/assets/img/login-bg.jpg
new file mode 100755
index 0000000..bd2ba25
Binary files /dev/null and b/web/monit_web/src/assets/img/login-bg.jpg differ
diff --git a/web/monit_web/src/assets/img/login=JPG.webp b/web/monit_web/src/assets/img/login=JPG.webp
new file mode 100644
index 0000000..05b2d7e
Binary files /dev/null and b/web/monit_web/src/assets/img/login=JPG.webp differ
diff --git a/web/monit_web/src/main.js b/web/monit_web/src/main.js
index abde22d..7c13e89 100644
--- a/web/monit_web/src/main.js
+++ b/web/monit_web/src/main.js
@@ -1,9 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
 import router from './router'
 import './assets/css/icon.css'
 const app = createApp(App)
-
+app.use(ElementPlus)
 app.use(router)
 app.mount('#app')
diff --git a/web/monit_web/src/plugins/element.js b/web/monit_web/src/plugins/element.js
deleted file mode 100644
index d631bcd..0000000
--- a/web/monit_web/src/plugins/element.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import ElementPlus from 'element-plus'
-import { createI18n } from 'vue-i18n'
-import 'element-plus/lib/theme-chalk/index.css'
-import localeZH from 'element-plus/lib/locale/lang/zh-cn'
-import localeEN from 'element-plus/lib/locale/lang/en'
-import messages from '../utils/i18n'
-
-const i18n = createI18n({
-  locale: localeZH.name,
-  fallbackLocale: localeEN.name,
-  messages,
-})
-
-export default (app) => {
-  app.use(ElementPlus, { locale:localeZH })
-  app.use(i18n)
-}
\ No newline at end of file
diff --git a/web/monit_web/src/router/index.js b/web/monit_web/src/router/index.js
index 11d4f17..0e4ec62 100644
--- a/web/monit_web/src/router/index.js
+++ b/web/monit_web/src/router/index.js
@@ -5,6 +5,11 @@ const routes = [
         path: '/',
         name: "Home",
         component: () => import ( /* webpackChunkName: "login" */ "../view/home/Home.vue")
+    },
+    {
+        path: '/login',
+        name: "Login",
+        component: () => import('../view/login/Login.vue')
     }
 
 
diff --git a/web/monit_web/src/utils/request.js b/web/monit_web/src/utils/request.js
new file mode 100644
index 0000000..190f457
--- /dev/null
+++ b/web/monit_web/src/utils/request.js
@@ -0,0 +1,27 @@
+import axios from 'axios';
+import {useRouter} from "vue-router";
+const router = useRouter()
+
+const service = axios.create({
+    // process.env.NODE_ENV === 'development' 来判断是否开发环境
+    // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
+    baseURL: 'http://192.168.75.32:8000',
+    timeout: 5000
+});
+
+service.interceptors.request.use(function (config) {
+    console.log(config)
+    const token = window.sessionStorage.getItem("token")
+    if (token !== "" || token != null || token != '') {
+        config.headers["Authorization"] =  "Bearer " +token
+    }else{
+        message.error("没有token,请登录")
+        router.replace({
+            path: "/login"
+        })
+    }
+    return config
+})
+
+
+export default service;
diff --git a/web/monit_web/src/view/home/Home.vue b/web/monit_web/src/view/home/Home.vue
index 56d1552..08811a7 100644
--- a/web/monit_web/src/view/home/Home.vue
+++ b/web/monit_web/src/view/home/Home.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: "Home.vue"
+  name: "Home"
 }
 </script>
 
diff --git a/web/monit_web/src/view/login/Login.vue b/web/monit_web/src/view/login/Login.vue
index 1aa188e..5e775b2 100644
--- a/web/monit_web/src/view/login/Login.vue
+++ b/web/monit_web/src/view/login/Login.vue
@@ -1,13 +1,94 @@
 <template>
+<div class="container">
+   <div class="loginBox">
+     <div class="ms-login">管理系统平台</div>
+   <el-form
+    :label-position="labelPosition"
+    label-width="100px"
+    :model="formLabelAlign"
+    style="max-width: 460px"
+    class="loginForm">
+    <el-form-item label="用户名">
+      <el-input v-model="formLabelAlign.name" placeholder="请输入用户名"/>
+    </el-form-item>
+    <el-form-item label="密码">
+      <el-input v-model="formLabelAlign.region" placeholder="请输入密码" />
+    </el-form-item>
+    <el-form-item class="loginBtn">
+      <el-button type="primary" style="margin: 10px">登录</el-button>
+      <el-button type="info" style="margin: 10px">取消</el-button>
+    </el-form-item>
 
+
+  </el-form>
+
+
+   </div>
+</div>
 </template>
 
 <script>
+import { reactive, ref } from 'vue'
 export default {
-  name: "Login.vue"
+  name: "Login",
+  setup(){
+  const labelPosition = ref('right')
+  const formLabelAlign = reactive({
+    name: '',
+    region: '',
+    type: '',
+  })
+   return {
+     labelPosition,
+     formLabelAlign
+
+   }
+
+  }
 }
 </script>
 
 <style scoped>
 
+.container{
+  height: 100%;
+  background-color: #282C34;
+  background-image: url(../../assets/img/login=JPG.webp);
+  background-size: 100%;
+
+}
+.ms-login {
+    left: 50%;
+    top: 50%;
+    width: 350px;
+    margin-top: 20px;
+    text-align: center;
+    font-size: 25px;
+    margin-left: 35px;
+    overflow: hidden;
+}
+.loginBox{
+
+  width: 450px;
+  height: 300px;
+  background-color: #fff;
+  position: absolute;
+  top: 50%;
+  left: 70%;
+  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