登录页面

components.d.ts

@@ -11,6 +11,11 @@ declare module 'vue' {
     CloudWords: typeof import('./src/components/echartsCom/CloudWords.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
+    ElInput: typeof import('element-plus/es')['ElInput']
+    ElTabPane: typeof import('element-plus/es')['ElTabPane']
+    ElTabs: typeof import('element-plus/es')['ElTabs']
     EquipmentDialog: typeof import('./src/components/customCom/equipmentDialog.vue')['default']
     EquipmentLeasing: typeof import('./src/components/customCom/equipmentLeasing.vue')['default']
     HotProvider: typeof import('./src/components/customCom/hotProvider.vue')['default']

src/components/customCom/hotProvider.vue

@@ -81,7 +81,7 @@ const providerInfo = reactive({
     ]
 })
 
-const subActive = ref("hotEquipment")
+const subActive = ref("provider")
 //  provider hotEquipment
 const subTab = (type: any) => {
     subActive.value = type
@@ -170,6 +170,6 @@ const subTab = (type: any) => {
     width: 292px;
     height: 340px;
     margin-top: 12px;
-    background-color:  background-color: rgba($color: #011B37, $alpha: 0.6);;
+    background-color: rgba($color: #011B37, $alpha: 0.6);
 }
 </style>

src/components/echartsCom/CloudWords.vue

@@ -5,7 +5,7 @@
 <script setup lang="ts">
 import * as echarts from 'echarts'
 import jsonData from "./jsonData/china.json"
-import { fa } from 'element-plus/es/locale';
+ 
 let myChart: any = null
 const randomData = () => {
     var a = Math.random();

src/router/index.ts

@@ -20,6 +20,15 @@ const routes: Array<RouteRecordRaw> = [
         },
         component: () => import('views/screen/sharePlatform.vue'),
       },
+      {
+        path: '/login',
+        name: 'login',
+        meta: {
+          title: '',
+          icon: '',
+        },
+        component: () => import('views/login/index.vue'),
+      }
 ]
 
 const router = createRouter({

src/views/login/index.vue

@@ -0,0 +1,119 @@
+<template>
+    <div class="page_login">
+        <div class="top_title">
+            <div class="top_logo">
+                <img src="" alt="">
+            </div>
+            <div class="gap_line"></div>
+            <div class="top_title_text">
+                南方电网机具租赁共享平台
+            </div>
+        </div>
+        <div class="login_container">
+            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+                <el-tab-pane label="账号登录" name="account">
+                    <el-form :model="loginForm">
+                        <el-form-item>
+                            <el-input v-model.trim="loginForm.userName" placeholder="请输入账号" clearable>
+                                <template #prepend>
+                                    <img class="pre_icon" src="/src/assets/img/userIcon.png" />
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                        <el-form-item name="phone">
+                            <el-input v-model.trim="loginForm.password" placeholder="请输入密码" clearable>
+                                <template #prepend>
+                                    <img class="pre_icon" src="/src/assets/img/passwordIcon.png" />
+                                </template>
+                            </el-input>
+                        </el-form-item>
+                    </el-form>
+                    <el-button type="primary" size="small" style="display: block;width: 100%;">
+                        立即登陆
+                    </el-button>
+
+
+                </el-tab-pane>
+                <el-tab-pane label="手机登录" name="second">Config</el-tab-pane>
+            </el-tabs>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const activeName = ref("account")
+const loginForm = reactive({
+    userName: "",
+    password: ""
+})
+</script>
+
+<style scoped lang="scss">
+$loginColor: "#002F7B";
+
+.login_container {
+    width: 792px;
+    height: 545px;
+    background-color: #fff;
+}
+
+.page_login {
+    width: 100vw;
+    height: 100vh;
+    background-color: #fff;
+    background-image: url('../../assets/img/loginbg.png');
+    background-repeat: no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+}
+
+:deep(.el-input-group__prepend) {
+    background-color: #fff;
+    border-color: #fff;
+    box-shadow: none;
+}
+
+:deep(.el-input__wrapper) {
+
+    box-shadow: none;
+
+    .el-input__inner {
+        height: 85px;
+    }
+}
+
+.pre_icon {
+    width: 30px;
+    height: 30px;
+}
+
+:deep(.el-tabs) {
+    height: 146px;
+    .el-tabs__nav{
+        height: 146px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        .el-tabs__item {
+            width: 50%;
+        }
+        .is-active {
+        color: #002F7B !important;
+
+    }
+    }
+        
+
+    .el-tabs__active-bar {
+        background-color: rgba(255,255,255,0) !important;
+        &::after{
+            content:"",
+            
+        }
+
+    }
+}
+</style>