荔园登录页

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import HomeView from '../views/HomeView.vue';
 import homepageL  from '@/views/homepageL.vue'
+import loginPage from '@/views/login/loginPage.vue'
+import KanBan from '@/views/KanBan.vue';
 
 Vue.use(VueRouter);
 
@@ -28,6 +30,16 @@ const routes = [
       },
     ],
   },
+  {
+    path:'/loginPage',
+    name:'loginPage',
+    component:loginPage
+  },
+  {
+    path:'/KanBan',
+    name:'KanBan',
+    component:KanBan
+  }
 ];
 
 const router = new VueRouter({

src/views/login/loginPage.vue

@@ -0,0 +1,157 @@
+<template>
+    <!-- 全屏包裹容器 -->
+    <div class="loginBg">
+        <div class="loginBox">
+            <div class="login_top">
+                <img src="../../assets/school.png" alt="">
+                <div class="top_title">深圳市荔园教育集团</div>
+                <div>AI智慧校园平台</div>
+            </div>
+            <div class="login_content">
+                组织号
+                <div class="input-container">
+                    <input type="text" placeholder="请输入组织号" class="input">
+                </div>
+                账户
+                <div class="input-container">
+                    <input type="text" placeholder="请输入账户" class="input">
+                </div>
+                密码
+                <div class="input-container">
+                    <input type="text" placeholder="请输入密码" class="input">
+                </div>
+                <button class="confirm">提交</button>
+            </div>
+
+
+        </div>
+    </div>
+</template>
+<script>
+     export default {
+        name:'loginPage',
+        data() {
+            return {
+                orgId:'',
+                account:'',
+                password:''
+            }
+        },
+    }
+</script>
+<style scoped>
+.loginBg {
+    width: 100vw;
+    height: 100vh;
+    background-image: url('../../assets/login.png');
+    background-size: cover;
+    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+}
+
+.loginBox {
+    height: 533px;
+    background-color: #fff;
+    border-radius: 10px;
+    /* 添加投影提升层次感 */
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+}
+
+.loginBox img {
+    width: 45px;
+    height: 37px;
+}
+
+.login_top {
+    margin-top: 36px;
+    text-align: center;
+}
+
+.top_title {
+    font-size: 25px;
+    font-weight: 700;
+}
+
+.login_top div {
+    margin-top: 12px;
+    color: #69727d;
+}
+.login_content{
+    margin: 33px;
+    font-size: 14px;
+    color: #59616f;
+}
+.input{
+    outline: none;
+    width: 344px;
+    height: 42px;
+    border-radius: 10px;
+    border: 1px solid #d1d5db;
+    padding-left: 40px;
+    font-size: 16px;
+    margin-top: 5px;
+    margin-bottom: 14px;
+    color:#a3a9b4;
+    line-height: 42px;
+}
+/* 设置占位符文字颜色 */
+.input::placeholder {
+    color: #a3a9b4; /* 替换为您想要的占位符颜色 */
+    opacity: 1; /* 确保占位符不透明 */
+}
+
+.input-container {
+    position: relative;
+}
+.input-container:nth-child(1)::before {
+    content: '';
+    background-image: url('../../assets/organzation.png'); /* 组织号图片 */
+    background-size: 20px 20px; /* 设置图片大小 */
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 10px; /* 图片距离输入框左边的距离 */
+    top: 39%; /* 垂直居中 */
+    transform: translateY(-50%); /* 垂直居中 */
+    width: 20px; /* 图片宽度 */
+    height: 20px; /* 图片高度 */
+}
+
+.input-container:nth-child(2)::before {
+    content: '';
+    background-image: url('../../assets/personal.png'); /* 账户图片 */
+    background-size: 20px 20px; /* 设置图片大小 */
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 10px; /* 图片距离输入框左边的距离 */
+    top: 41%; /* 垂直居中 */
+    transform: translateY(-50%); /* 垂直居中 */
+    width: 20px; /* 图片宽度 */
+    height: 20px; /* 图片高度 */
+}
+
+.input-container:nth-child(3)::before {
+    content: '';
+    background-image: url('../../assets/password.png'); /* 密码图片 */
+    background-size: 20px 20px; /* 设置图片大小 */
+    background-repeat: no-repeat;
+    position: absolute;
+    left: 10px; /* 图片距离输入框左边的距离 */
+    top: 41%; /* 垂直居中 */
+    transform: translateY(-50%); /* 垂直居中 */
+    width: 20px; /* 图片宽度 */
+    height: 20px; /* 图片高度 */
+}
+.confirm{
+    width: 384px;
+    height: 40px;
+    background: #0354d7;
+    border: none;
+    border-radius: 9px;
+    color: #fff;
+    font-size: 16px;
+    cursor: pointer;
+}
+</style>