登录页接口调试完成

components.d.ts

@@ -10,20 +10,15 @@ declare module 'vue' {
     ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
-    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElRadio: typeof import('element-plus/es')['ElRadio']
-    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElTable: typeof import('element-plus/es')['ElTable']
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
-    ElTag: typeof import('element-plus/es')['ElTag']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
   }

env/.env.dev

@@ -4,3 +4,4 @@ VITE_BUILD_MODE = 'dev'
 
 # 开发环境接口地址
 VITE_API_URL = '/proxyApi' 
+

src/http/api/login/index.ts

@@ -0,0 +1,6 @@
+import { get, post } from '../../index'
+
+// 登录接口
+export const loginApi = (data) => {
+    return post('/login', data)
+}

src/views/Login.vue

@@ -1,12 +1,138 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+    import { loginApi } from '../../src/http/api/login/index.ts'
+    // import { ElMessage } from 'element-plus'
+    import { useRouter } from 'vue-router'
+    const router = useRouter()
+
+    const loginForm = ref({
+        username: '',
+        password: ''
+    })
+
+    const handlerLogin = async () => {
+        const res = await loginApi(loginForm.value)
+
+        console.log('登录成功**', res)
+
+        // if (res.code === 200) {
+        //     // ElMessage({
+        //     //     showClose: true,
+        //     //     message: '登录成功',
+        //     //     type: 'success'
+        //     // })
+        //     // 登录首页
+        //     // router.push('/')
+
+        // }
+    }
+</script>
 
 <template>
-    <div class="login-container">登录页</div>
+    <div class="login-container">
+        <div class="login-form">
+            <h3>机具租赁共享平台</h3>
+
+            <div class="form-container">
+                <div class="login-type">
+                    <div class="active">账号登录</div>
+                    <div>手机登录</div>
+                </div>
+
+                <el-form>
+                    <el-form-item>
+                        <el-input v-model="loginForm.username" placeholder="账号" clearable />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-input
+                            v-model="loginForm.password"
+                            placeholder="密码"
+                            clearable
+                            type="password"
+                            show-password />
+                    </el-form-item>
+                    <el-form-item>
+                        <el-button type="primary" @click="handlerLogin">登 录</el-button>
+                    </el-form-item>
+                    <el-form-item class="forget-password">
+                        <a href="">忘记密码</a>
+                        <a href="">立即注册</a>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
 </template>
 
-<style>
+<style lang="scss">
     .login-container {
         height: 100vh;
         /* background-color: skyblue; */
+        background-color: #125ab6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .login-form {
+            width: 500px;
+            height: 360px;
+            display: flex;
+            flex-direction: column;
+
+            h3 {
+                color: #fff;
+                font-size: 18px;
+                font-weight: bold;
+                text-align: center;
+                margin-bottom: 30px;
+            }
+
+            .form-container {
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                background-color: #c7dff4;
+                border-radius: 5px;
+                .login-type {
+                    height: 40px;
+                    margin-bottom: 40px;
+                    display: flex;
+                    color: #333;
+                    div {
+                        flex: 1;
+                        height: 40px;
+                        text-align: center;
+                        line-height: 40px;
+                        &:hover {
+                            cursor: pointer;
+                        }
+                    }
+
+                    .active {
+                        color: #3498db;
+                        border-bottom: 1px solid #3498db;
+                    }
+                }
+                .el-form {
+                    padding: 0 50px;
+
+                    .el-input {
+                        height: 37px;
+                    }
+                    .el-button {
+                        width: 100%;
+                        height: 37px;
+                    }
+
+                    .forget-password {
+                        margin-bottom: 0;
+                    }
+
+                    .forget-password .el-form-item__content {
+                        display: flex;
+                        align-items: center;
+                        justify-content: space-between;
+                    }
+                }
+            }
+        }
     }
 </style>

vite.config.ts

@@ -82,7 +82,7 @@ export default ({ mode }: any) => {
       // open: envInfo.VITE_OPEN,
       proxy: {
         '/proxyApi': {
-          target: 'https://test.com',
+          target: 'http://10.40.92.185:9200',
           secure: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/proxyApi/, ''),