重置样式

.gitignore

@@ -29,3 +29,5 @@ coverage
 *.sw?
 .prettierrc.js
 auto-imports.d.ts
+components.d.ts
+components.d.ts

components.d.ts

@@ -7,16 +7,20 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    ElButton: typeof import('element-plus/es')['ElButton']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
-    ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDropdown: typeof import('element-plus/es')['ElDropdown']
+    ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
+    ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
-    ElRow: typeof import('element-plus/es')['ElRow']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElTag: typeof import('element-plus/es')['ElTag']
     EquipCard: typeof import('./src/components/equipCard.vue')['default']
     EquipDetailTable: typeof import('./src/components/equipDetailTable.vue')['default']
     FooterInfo: typeof import('./src/components/FooterInfo/index.vue')['default']

src/components/Navmenu/index.vue

@@ -1,14 +1,14 @@
 <script setup lang="ts">
     const router = useRouter()
-
+    const route = useRoute()
     const navMenuList = [
         { name: '首页', routerName: 'home' },
         { name: '自选直租', routerName: 'equipList' },
-        { name: '寻源比价', routerName: '/home' },
+        { name: '寻源比价', routerName: 'parity' },
         { name: '二手交易', routerName: '/home' },
         { name: '保险业务', routerName: '/home' },
         { name: '检验业务', routerName: '/home' },
-        { name: '企业专区', routerName: '/home' }
+        { name: '企业专区', routerName: 'enterpriseZone' }
     ]
 
     const navMenuClick = (name: any) => {
@@ -18,7 +18,11 @@
 
 <template>
     <ul class="nav-menu">
-        <li v-for="item in navMenuList" :key="item.name" @click="navMenuClick(item.routerName)">
+        <li
+            v-for="item in navMenuList"
+            :key="item.name"
+            @click="navMenuClick(item.routerName)"
+            :class="{ active: route.name === item.routerName }">
             {{ item.name }}
         </li>
     </ul>
@@ -47,5 +51,10 @@
                 border: none;
             }
         }
+
+        .active {
+            color: #333333;
+            font-weight: bold;
+        }
     }
 </style>

src/layout/header.vue

@@ -87,7 +87,7 @@
                     <span v-if="!isShowLogout">
                         <a class="a-border-none" @click="$router.push('/login')">登录</a>
                         <span style="margin: 0 3px">/</span>
-                        <a>注册</a>
+                        <a @click="$router.push('/register')">注册</a>
                     </span>
                     <span v-else>
                         <a @click="handlerLogout">退出登录</a>

src/router/index.ts

@@ -122,6 +122,28 @@ const routes: Array<RouteRecordRaw> = [
                 },
                 component: () => import('views/collect/index.vue')
             },
+            // 寻源比价页面
+            {
+                path: '/parity',
+                name: 'parity',
+                meta: {
+                    title: '寻源比较',
+                    isLogin: true,
+                    AuthFlag: false
+                },
+                component: () => import('views/parity/index.vue')
+            },
+            // 企业专区页面
+            {
+                path: '/enterpriseZone',
+                name: 'enterpriseZone',
+                meta: {
+                    title: '企业专区',
+                    isLogin: true,
+                    AuthFlag: false
+                },
+                component: () => import('views/enterpriseZone/index.vue')
+            },
             // 个人中心
             {
                 path: '/myuser', // 主路由地址

src/style/scss/index.scss

@@ -1,4 +1,5 @@
 @import './variable.scss';
+@import "../css/reset.css";
 @import './mixin.scss';
 @import './common.scss';
 @import './nprogress.scss';

src/views/Login.vue

@@ -1,26 +1,25 @@
 <script setup lang="ts">
-    import { loginApi } from 'http/api/login/index'
+import { loginApi } from 'http/api/login/index'
-    import { ElMessage } from 'element-plus'
+import { ElMessage } from 'element-plus'
-    import { useRoute, useRouter } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
-    import { mainStore } from 'store/main'
+import { mainStore } from 'store/main'
-    const userStore = mainStore()
+const userStore = mainStore()
-    const router = useRouter()
+const router = useRouter()
-    const route = useRoute()
+const route = useRoute()
-    const loginForm = ref({
+const loginForm = ref({
-        username: '',
+    username: '',
-        password: ''
+    password: ''
-    })
+})
 
-    const handlerLogin = async () => {
+const handlerLogin = async () => {
-        const res: any = await loginApi(loginForm.value)
+    const res: any = await loginApi(loginForm.value)
-        console.log('登录成功**', res)
+    console.log('登录成功**', res)
-        if (res.code === 200) {
+    if (res.code === 200) {
-            ElMessage({
+        ElMessage({
-                showClose: true,
+            showClose: true,
-                message: '登录成功',
+            message: '登录成功',
-                type: 'success'
+            type: 'success'
-            })
+        })
-        }
         userStore.setToken(res.data.access_token)
         if (res.data.user) {
             userStore.setUserInfo(res.data.user)
@@ -32,15 +31,16 @@
                     'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/2023/12/09/815629f192564db98ac55a643b46f853gouwu.png'
             })
         }
-
         // 跳转登录页面
-
+        
         if (route.query && route.query.redirect) {
             router.push(decodeURIComponent(route.query.redirect))
         } else {
             router.push('/home')
         }
+        
     }
+}
 </script>
 
 <template>
@@ -59,12 +59,7 @@
                         <el-input v-model="loginForm.username" placeholder="账号" clearable />
                     </el-form-item>
                     <el-form-item>
-                        <el-input
+                        <el-input v-model="loginForm.password" placeholder="密码" clearable type="password" show-password />
-                            v-model="loginForm.password"
-                            placeholder="密码"
-                            clearable
-                            type="password"
-                            show-password />
                     </el-form-item>
                     <el-form-item>
                         <el-button type="primary" @click="handlerLogin">登 录</el-button>
@@ -80,77 +75,82 @@
 </template>
 
 <style lang="scss">
-    .login-container {
+.login-container {
-        height: 100vh;
+    height: 100vh;
-        background-color: #125ab6;
+    background-color: #125ab6;
-        display: flex;
+    display: flex;
-        align-items: center;
+    align-items: center;
-        justify-content: center;
+    justify-content: center;
-        background: url('../assets/img/home/2023_12_01_beijing2/login_bgnew.png') no-repeat;
+    background: url('../assets/img/home/2023_12_01_beijing2/login_bgnew.png') no-repeat;
-        background-size: cover;
+    background-size: cover;
 
-        .login-form {
+    .login-form {
-            width: 500px;
+        width: 500px;
-            height: 360px;
+        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;
 
-            h3 {
+            .login-type {
-                color: #fff;
+                height: 40px;
-                font-size: 18px;
+                margin-bottom: 40px;
-                font-weight: bold;
-                text-align: center;
-                margin-bottom: 30px;
-            }
-
-            .form-container {
-                flex: 1;
                 display: flex;
-                flex-direction: column;
+                color: #333;
-                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 {
+                div {
-                        color: #3498db;
+                    flex: 1;
-                        border-bottom: 1px solid #3498db;
+                    height: 40px;
+                    text-align: center;
+                    line-height: 40px;
+
+                    &:hover {
+                        cursor: pointer;
                     }
                 }
-                .el-form {
-                    padding: 0 50px;
 
-                    .el-input {
+                .active {
-                        height: 37px;
+                    color: #3498db;
-                    }
+                    border-bottom: 1px solid #3498db;
-                    .el-button {
+                }
-                        width: 100%;
+            }
-                        height: 37px;
-                    }
 
-                    .forget-password {
+            .el-form {
-                        margin-bottom: 0;
+                padding: 0 50px;
-                    }
 
-                    .forget-password .el-form-item__content {
+                .el-input {
-                        display: flex;
+                    height: 37px;
-                        align-items: center;
+                }
-                        justify-content: space-between;
+
-                    }
+                .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>

src/views/enterpriseZone/index.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+    import NavMenu from 'components/Navmenu/index.vue'
+</script>
+
+<template>
+    <!-- 企业专区 -->
+    <NavMenu />
+</template>
+
+<style></style>

src/views/parity/index.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+    import NavMenu from 'components/Navmenu/index.vue'
+</script>
+
+<template>
+    <!-- 寻源比价 -->
+
+    <NavMenu />
+
+    <!-- 表单 -->
+    <el-form :inline="true">
+        <el-form-item label="寻源标题：">
+            <el-input style="width: 160px" />
+        </el-form-item>
+
+        <el-form-item label="日期范围：">
+            <el-input style="width: 160px" />
+        </el-form-item>
+    </el-form>
+</template>
+
+<style scoped>
+    .el-form {
+        padding: 15px 0;
+    }
+</style>