登录页

fhKeeper/formulahousekeeper/customerBuler-crm/src/pages/login.vue

@@ -1,118 +1,51 @@
 <template>
-    <div @click="tologin">登录</div>
-    <h2> {{ store.name }}</h2>
-    <h1 @click="changeName">修改名称</h1>
-    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" />
-    <div @click="networkRequest()">点击发起网络请求</div>
-    <div class="abc fonsSize30">测试sass样式</div>
-    <div class="text-pink-200">1111</div>
+  <div class="loginView w-screen h-screen overflow-hidden pt-20">
+    <div class="w-96 h-3/5 bg-white m-auto border-t-8 border-blue-400 shadow-xl rounded-md pl-9 pr-9">
+      <div class="m-auto pt-4">
+        <img class="w-1/5 h-1/5 m-auto" :src="loginLogo" alt="">
+      </div>
+      <h2 class="text-xl text-center pt-4 font-bold">客户管家</h2>
+      <div class="pt-5">
+        <el-input :prefix-icon="UserFilled" size="large" class="mt-4" v-model="username" placeholder="账号/手机号" />
+        <el-input :prefix-icon="Lock" show-password size="large" class="mt-8" v-model="password" placeholder="密码" />
+        <div class="pt-8">
+          <el-button type="primary" size="large" class="w-full" :loading="loginLoading" @click="login">登录</el-button>
+        </div>
+      </div>
+      <el-divider content-position="center">或</el-divider>
+      <div class="m-auto mb-5">
+        <img class="w-9 m-auto p-1 rounded-full border-blue-300 border-2 cursor-pointer" :src="qiyeweixin" alt="">
+      </div>
+      <div class="flex justify-between">
+        <div class="cursor-pointer text-blue-400">联系客服</div>
+        <div class="flex justify-around">
+          <div class="mr-4 cursor-pointer text-blue-400">使用说明</div>
+          <div class="cursor-pointer text-blue-400">企业注册</div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
-<script lang="ts" setup>
-
-import { useRouter } from 'vue-router'
-import { useStore } from "../store/index";
-import { post } from '@/utils/request'
-
-const router = useRouter()
-const store = useStore()
-function tologin() {
-    router.push({
-        name: 'index'
-    })
-}
-function changeName(): void {
-    store.name = '索索'
-}
-
-async function networkRequest(): Promise<void> {
-    console.log('发起请求')
-    const requestUrl = '/user/loginAdmin'
-    const data = {
-        username: '18130408100',
-        password: '220926'
-    }
-    // proxy.$post(requestUrl, data)
-    // .then((response: any) => {
-    //     console.log(response, '<=== 请求返回的数据')
-    // })
-    const res = await post(requestUrl, data)
-    console.log(res, '<=== 请求返回的数据')
-}
-
-
-interface Tree {
-    label: string
-    children?: Tree[]
-}
-
-const handleNodeClick = (data: Tree) => {
-    console.log(data)
-}
-
-const data: Tree[] = [
-    {
-        label: 'Level one 1',
-        children: [
-            {
-                label: 'Level two 1-1',
-                children: [
-                    {
-                        label: 'Level three 1-1-1',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'Level one 2',
-        children: [
-            {
-                label: 'Level two 2-1',
-                children: [
-                    {
-                        label: 'Level three 2-1-1',
-                    },
-                ],
-            },
-            {
-                label: 'Level two 2-2',
-                children: [
-                    {
-                        label: 'Level three 2-2-1',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        label: 'Level one 3',
-        children: [
-            {
-                label: 'Level two 3-1',
-                children: [
-                    {
-                        label: 'Level three 3-1-1',
-                    },
-                ],
-            },
-            {
-                label: 'Level two 3-2',
-                children: [
-                    {
-                        label: 'Level three 3-2-1',
-                    },
-                ],
-            },
-        ],
-    },
-]
-
-const defaultProps = {
-    children: 'children',
-    label: 'label',
-}
 
+<script lang="ts" setup>
+import loginLogo from "@/assets/login/login_logo.png";
+import qiyeweixin from "@/assets/login/qiyeweixin.png";
+import { UserFilled, Lock } from '@element-plus/icons-vue'
+import { ref } from "vue";
+const username = ref("");
+const password = ref("");
+const loginLoading = ref(false);
+const login = () => {
+  loginLoading.value = true;
+  console.log(username.value, password.value);
+  setTimeout(() => {
+    loginLoading.value = false;
+  }, 1000);
+};
 </script>
 
-<style lang="scss" scoped></style>
-
+<style lang="scss" scoped>
+.loginView {
+  background: #f0f2f5 url("../assets/login/background.png") no-repeat;
+}
+</style>

fhKeeper/formulahousekeeper/customerBuler-crm/src/styles.css

@@ -1,80 +0,0 @@
-:root {
-    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-    line-height: 1.5;
-    font-weight: 400;
-  
-    color-scheme: light dark;
-    color: rgba(255, 255, 255, 0.87);
-    background-color: #242424;
-  
-    font-synthesis: none;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-  
-  a {
-    font-weight: 500;
-    color: #646cff;
-    text-decoration: inherit;
-  }
-  a:hover {
-    color: #535bf2;
-  }
-  
-  body {
-    margin: 0;
-    display: flex;
-    place-items: center;
-    min-width: 320px;
-    min-height: 100vh;
-  }
-  
-  h1 {
-    font-size: 3.2em;
-    line-height: 1.1;
-  }
-  
-  button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #1a1a1a;
-    cursor: pointer;
-    transition: border-color 0.25s;
-  }
-  button:hover {
-    border-color: #646cff;
-  }
-  button:focus,
-  button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
-  
-  .card {
-    padding: 2em;
-  }
-  
-  #app {
-    max-width: 1280px;
-    margin: 0 auto;
-    padding: 2rem;
-    text-align: center;
-  }
-  
-  @media (prefers-color-scheme: light) {
-    :root {
-      color: #213547;
-      background-color: #ffffff;
-    }
-    a:hover {
-      color: #747bff;
-    }
-    button {
-      background-color: #f9f9f9;
-    }
-  }
-  

fhKeeper/formulahousekeeper/customerBuler-crm/tsconfig.json

@@ -23,7 +23,8 @@
     "noFallthroughCasesInSwitch": true,
     "paths": {
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["element-plus/global"]
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
   "references": [{ "path": "./tsconfig.node.json" }]