主页

src/App.vue

@@ -14,12 +14,4 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
 </style>

src/pages/components/HeadMenu.vue

@@ -0,0 +1,19 @@
+<template>
+    <div>
+
+    </div>
+</template>
+
+<script>
+export default {
+    setup () {
+        
+
+        return {}
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/pages/components/SideMenu.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <div class="bigBox">
+            <template v-for="(item, index) in menuList">
+                <div class="menuBox">
+                    <img :src="item.noChoose" alt="">
+                </div>
+            </template>
+        </div>
+    </div>
+</template>
+
+<script>
+import { ref, onMounted } from 'vue'
+import allImg from "../../../src/utils/allImg.js"
+export default {
+    setup() {
+        let menuList = ref([
+            {
+                name: "检测任务",
+                route: "/checkMession",
+                id: 1,
+                noChoose: allImg.searchGray,
+                isChoose: allImg.searchBlue
+            },
+            {
+                name: "报告结果",
+                route: "/check",
+                id: 2
+            },
+            {
+                name: "基础设置",
+                route: "/setting",
+                id: 3
+            },
+            {
+                name: "系统管理",
+                route: "/system",
+                id: 4
+            },
+        ])
+        onMounted(() => {
+
+        })
+        return {
+            menuList,
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

src/pages/home/HomePage.vue

@@ -1,19 +1,58 @@
 <template>
     <div>
-        <h1>this is home</h1>
+        <div class="bigBox">
+            <el-container>
+                <el-header class="headMenu">Header</el-header>
+                <el-container>
+                    <el-aside class="sideMenu">
+                        <SideMenu></SideMenu>
+                    </el-aside>
+                    <el-main class="elMain">Main</el-main>
+                </el-container>
+            </el-container>
+        </div>
     </div>
 </template>
 
 <script>
+import { ref,onMounted } from 'vue';
+import SideMenu from "@/pages/components/SideMenu.vue"
 export default {
-    setup () {
-        
+    setup() {
+
 
         return {}
+    },
+    components:{
+        SideMenu,
     }
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped>
+.bigBox {
+    width: 99vw;
+    height: 97vh;
+    background-color: #1B2446;
+}
+
+.sideMenu {
+    width: 8vw;
+    height: 89vh;
+    background-image: url('../../assets/image/leftSide.png');
+    background-repeat: no-repeat;
+    background-position: 20px 20px;
+    background-size: 65% 95%;
+}
 
+.headMenu {
+    width: 99vw;
+    height: 8vh;
+    background-color: red;
+}
+
+.elMain {
+    width: 80vw;
+    height: 89vh;
+}
 </style>

src/pages/login/LoginNow.vue

@@ -1,15 +1,27 @@
 <template>
     <div>
-        <div>
-            <el-form :model="loginForm" label-width="120px">
-                <el-form-item label="用户名">
-                    <el-input v-model="loginForm.username" />
-                </el-form-item>
-                <el-form-item label="密码">
-                    <el-input v-model="loginForm.userpass" />
-                </el-form-item>
-            </el-form>
-            <el-button type="primary" @click="sureLog">登录</el-button>
+        <div class="bigBox">
+            <div class="winBox">
+                <button class="winBtn">-</button>
+                <button class="winBtn">×</button>
+            </div>
+            <!-- 信息 -->
+            <div class="imgBox">
+                <img src="../../assets/image/loginImg.png" alt="">
+                <p>登录</p>
+            </div>
+            <!-- 登录信息 -->
+            <div class="formBox">
+                <el-form :model="loginForm" label-width="65px" style="padding-top: 30px;">
+                    <el-form-item label="用户名">
+                        <el-input class="loginInp" v-model="loginForm.username" placeholder="你的账号..." />
+                    </el-form-item>
+                    <el-form-item label="密码">
+                        <el-input class="loginInp" v-model="loginForm.userpass" placeholder="你的密码..." />
+                    </el-form-item>
+                </el-form>
+                <el-button class="loginBtn" type="primary" @click="sureLog">登录</el-button>
+            </div>
         </div>
     </div>
 </template>
@@ -17,9 +29,7 @@
 <script>
 import { ref, onMounted } from "vue"
 import { useRouter } from 'vue-router'
-
 import { ElMessage } from "element-plus"
-import { jsPlumb } from 'jsplumb'
 import login from "@/api/login"
 export default {
     setup() {
@@ -48,21 +58,21 @@ export default {
         }
         function sureLog() {
             let kis = encryptPassword(loginForm.value.userpass)
-            login.LoginNow({
-                login_account: loginForm.value.username,
-                pwd: kis
-            }).then(res => {
-                if (res.returncode === 200) {
-                    router.push('/home')
-                } else {
-                    ElMessage({
-                        message: res.msg,
-                        type: "error"
-                    })
-                    // router.push('/home')
-                }
-                console.log(res, 'login');
-            })
+            // login.LoginNow({
+            //     login_account: loginForm.value.username,
+            //     pwd: kis
+            // }).then(res => {
+            //     console.log(res, 'login');
+            //     if (res.returncode === 200) {
+            //         router.push('/home')
+            //     } else {
+            //         ElMessage({
+            //             message: res.msg,
+            //             type: "error"
+            //         })
+            //     }
+            // })
+            router.push('/home')
         }
         onMounted(() => {
         })
@@ -76,4 +86,65 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style scoped>
+.bigBox {
+    width: 384px;
+    height: 428px;
+    margin: 0 auto;
+    background-color: rgba(127, 127, 127, 0.5);
+    position: relative;
+}
+
+.formBox {
+    width: 320px;
+    height: 240px;
+    text-align: center;
+    background: #FFFFFF;
+    box-shadow: 0px 1px 20px 3px rgba(52, 123, 231, 0.12);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    margin: 0 auto;
+}
+
+.imgBox {
+    width: 272px;
+    height: 100px;
+    margin: 0 auto;
+    padding-top: 60px;
+}
+
+.loginInp {
+    width: 230px;
+    height: 40px;
+}
+
+.loginBtn {
+    width: 272px;
+    height: 40px;
+}
+
+.winBox {
+    width: 68px;
+    height: 68px;
+    position: absolute;
+    top: 0px;
+    left: 310px;
+}
+
+.winBtn {
+    width: 34px;
+    height: 34px;
+    background-color: transparent;
+    border: none;
+    font-size: 30px;
+    text-align: center;
+    line-height: 34px;
+}
+
+.winBtn:nth-child(1):hover {
+    border: 1px black solid;
+}
+.winBtn:nth-child(2):hover {
+    background-color: red;
+}
+</style>

src/pages/login/components/jsc/imgJs.js

@@ -0,0 +1 @@
+import loginImg from '@/assets/image/loginImg.png'

src/utils/allImg.js

@@ -0,0 +1,18 @@
+import searchGray from '../assets/icon/search_gray.png'
+import searchBlue from '../assets/icon/search_blue.png'
+import reportGray from "../assets/icon/report_gray.png"
+import reportBlue from "../assets/icon/report_blue.png"
+import settingGray from "../assets/icon/setting_gray.png"
+import settingBlue from "../assets/icon/setting_blue.png"
+import systemGray from "../assets/icon/system_gray.png"
+import systemBlue from "../assets/icon/system_blue.png"
+export default{
+    searchBlue,
+    searchGray,
+    reportBlue,
+    reportGray,
+    settingBlue,
+    settingGray,
+    systemBlue,
+    systemGray
+}

src/utils/request.js

@@ -6,7 +6,7 @@ import router from '@/router'
 // 请求url
 const service = axios.create({
     // baseURL: window.STATIC_CONFIG.proxyUrl, // url = base url + request url
-    baseURL: "http://8.142.173.95:10086/api",
+    baseURL: "http://8.142.173.95:9527/api",
     timeout: 15000 // request timeout
 })
 

vue.config.js

@@ -2,3 +2,16 @@ const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
   transpileDependencies: true
 })
+module.exports = {
+  devServer: {
+    proxy: {
+      '/api': {
+        target: 'http://8.142.173.95:9527', // 设置你的后端 API 地址
+        changeOrigin: true, // 允许跨域
+        // pathRewrite: {
+        //   '^/api': '', // 重写请求路径，去掉 '/api'
+        // },
+      },
+    },
+  },
+};