Преглед на файлове

build: 看板登录页面样式

chaooo преди 2 години
родител
ревизия
2f576c95b6

+ 1 - 0
src/assets/icons/eye-open.svg

@@ -0,0 +1 @@
+<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128"><defs><style/></defs><path d="M512 128q69.675 0 135.51 21.163t115.498 54.997 93.483 74.837 73.685 82.006 51.67 74.837 32.17 54.827L1024 512q-2.347 4.992-6.315 13.483T998.87 560.17t-31.658 51.669-44.331 59.99-56.832 64.34-69.504 60.16-82.347 51.5-94.848 34.687T512 896q-69.675 0-135.51-21.163t-115.498-54.826-93.483-74.326-73.685-81.493-51.67-74.496-32.17-54.997L0 513.707q2.347-4.992 6.315-13.483t18.816-34.816 31.658-51.84 44.331-60.33 56.832-64.683 69.504-60.331 82.347-51.84 94.848-34.816T512 128.085zm0 85.333q-46.677 0-91.648 12.331t-81.152 31.83-70.656 47.146-59.648 54.485-48.853 57.686-37.675 52.821-26.325 43.99q12.33 21.674 26.325 43.52t37.675 52.351 48.853 57.003 59.648 53.845T339.2 767.02t81.152 31.488T512 810.667t91.648-12.331 81.152-31.659 70.656-46.848 59.648-54.186 48.853-57.344 37.675-52.651T927.957 512q-12.33-21.675-26.325-43.648t-37.675-52.65-48.853-57.345-59.648-54.186-70.656-46.848-81.152-31.659T512 213.334zm0 128q70.656 0 120.661 50.006T682.667 512 632.66 632.661 512 682.667 391.339 632.66 341.333 512t50.006-120.661T512 341.333zm0 85.334q-35.328 0-60.33 25.002T426.666 512t25.002 60.33T512 597.334t60.33-25.002T597.334 512t-25.002-60.33T512 426.666z"/></svg>

+ 1 - 0
src/assets/icons/eye.svg

@@ -0,0 +1 @@
+<svg width="128" height="64" xmlns="http://www.w3.org/2000/svg"><path d="M127.072 7.994c1.37-2.208.914-5.152-.914-6.87-2.056-1.717-4.797-1.226-6.396.982-.229.245-25.586 32.382-55.74 32.382-29.24 0-55.74-32.382-55.968-32.627-1.6-1.963-4.57-2.208-6.397-.49C-.17 3.086-.399 6.275 1.2 8.238c.457.736 5.94 7.36 14.62 14.72L4.17 35.96c-1.828 1.963-1.6 5.152.228 6.87.457.98 1.6 1.471 2.742 1.471s2.284-.49 3.198-1.472l12.564-13.983c5.94 4.416 13.021 8.587 20.788 11.53l-4.797 17.418c-.685 2.699.686 5.397 3.198 6.133h1.37c2.057 0 3.884-1.472 4.341-3.68L52.6 42.83c3.655.736 7.538 1.227 11.422 1.227 3.883 0 7.767-.49 11.422-1.227l4.797 17.173c.457 2.208 2.513 3.68 4.34 3.68.457 0 .914 0 1.143-.246 2.513-.736 3.883-3.434 3.198-6.133l-4.797-17.172c7.767-2.944 14.848-7.114 20.788-11.53l12.336 13.738c.913.981 2.056 1.472 3.198 1.472s2.284-.49 3.198-1.472c1.828-1.963 1.828-4.906.228-6.87l-11.65-13.001c9.366-7.36 14.849-14.474 14.849-14.474z"/></svg>

+ 1 - 0
src/assets/icons/password.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687143470427" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1288" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M509.12 336.32c-63.36 0-121.92 20.16-170.88 54.72v-91.2c0-96 76.8-174.72 170.88-174.72S680 203.84 680 299.84c0 14.4 11.52 25.92 24.96 25.92 14.4 0 24.96-11.52 24.96-25.92 0-124.8-99.84-226.56-221.76-226.56-120.96 0-220.8 101.76-220.8 226.56v136.32c-48.96 54.72-79.68 127.68-79.68 208.32 0 169.92 135.36 308.16 301.44 308.16 166.08 0 301.44-138.24 301.44-308.16 0-169.92-135.36-308.16-301.44-308.16z m0 564.48c-138.24 0-250.56-115.2-250.56-256.32s112.32-256.32 250.56-256.32c138.24 0 250.56 115.2 250.56 256.32 0 142.08-112.32 256.32-250.56 256.32z" p-id="1289"></path><path d="M509.12 561.92c-15.36 0-27.84 12.48-27.84 27.84v126.72c0 15.36 12.48 27.84 27.84 27.84s27.84-12.48 27.84-27.84V589.76c0.96-15.36-12.48-27.84-27.84-27.84z" p-id="1290"></path></svg>

+ 1 - 0
src/assets/icons/username.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1687143462995" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1152" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M524 714.8c-171.1 0-310.2-139.2-310.2-310.2S353 94.4 524 94.4s310.2 139.2 310.2 310.2S695 714.8 524 714.8z m0-557.1c-136.1 0-246.9 110.7-246.9 246.9S387.9 651.4 524 651.4c136.1 0 246.8-110.7 246.8-246.9S660.1 157.7 524 157.7z m148.3 773.2c-17.5 0-31.7-14.2-31.7-31.7 0-64.3-52.3-116.7-116.6-116.7s-116.7 52.3-116.7 116.7c0 17.5-14.2 31.7-31.7 31.7s-31.7-14.2-31.7-31.7c0-99.3 80.8-180 180-180s180 80.8 180 180c0.1 17.5-14.1 31.7-31.6 31.7z" p-id="1153"></path><path d="M524 567.5c-71.8 0-128-43.2-128-98.4 0-17.5 14.2-31.7 31.7-31.7s31.7 14.2 31.7 31.7c0 16.2 28.2 35.1 64.6 35.1 36.4 0 64.6-18.9 64.6-35.1 0-17.5 14.2-31.7 31.7-31.7s31.7 14.2 31.7 31.7c0 55.2-56.2 98.4-128 98.4z" p-id="1154"></path></svg>

BIN
src/assets/login/login.jpg


+ 1 - 1
src/layout/components/Navbar.vue

@@ -31,7 +31,7 @@ const { isFullscreen, toggle } = useFullscreen();
  * 注销
  */
 function logout() {
-  ElMessageBox.confirm("确定注销并退出系统吗?", "提示", {
+  ElMessageBox.confirm("确定退出系统吗?", "提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",

+ 1 - 0
src/store/modules/permission.ts

@@ -29,6 +29,7 @@ const schoolRoutes: RouteRecordRaw[] = JSON.parse(
             name: "DashboardArea",
             icon: "board",
             keepAlive: true,
+            breadcrumb: false,
           },
         },
       ],

+ 2 - 2
src/views/dashboard/components/BarChart.vue

@@ -57,8 +57,8 @@ const options = {
     },
   },
   grid: {
-    left: "10%",
-    right: "10%",
+    left: "5%",
+    right: "5%",
     top: "8%",
     containLabel: true,
   },

+ 2 - 2
src/views/dashboard/index.vue

@@ -168,7 +168,7 @@ onMounted(() => {
               <div class="bar">
                 <BarChart
                   id="barChart1"
-                  width="460px"
+                  width="400px"
                   height="500px"
                   title="全体学员初期训练专注力评分占比"
                   percent-data="5,5,65,10,10"
@@ -181,7 +181,7 @@ onMounted(() => {
               <div class="bar">
                 <BarChart
                   id="barChart2"
-                  width="460px"
+                  width="400px"
                   height="500px"
                   title="全体学员训练近期专注力评分平均占比"
                   percent-data="10,25,65,30,10"

+ 84 - 80
src/views/login/index.vue

@@ -6,54 +6,41 @@
       :rules="loginRules"
       class="login-form"
     >
-      <div class="flex text-white items-center py-4">
-        <span class="text-2xl flex-1 text-center">水母智脑-数据看板系统</span>
+      <div class="title">
+        <span>登录</span>
       </div>
-
       <el-form-item prop="username">
-        <div class="p-2 text-white">
-          <svg-icon icon-class="user" />
-        </div>
+        <span class="m-2">
+          <svg-icon size="30px" icon-class="username" /> </span
+        >|
         <el-input
           ref="username"
           v-model="loginData.username"
           class="flex-1"
-          size="large"
           placeholder="请输入登录账号"
           name="username"
         />
       </el-form-item>
-
-      <el-tooltip
-        :disabled="isCapslock === false"
-        content="Caps lock is On"
-        placement="right"
-      >
-        <el-form-item prop="password">
-          <span class="p-2 text-white">
-            <svg-icon icon-class="password" />
-          </span>
-          <el-input
-            v-model="loginData.password"
-            class="flex-1"
-            placeholder="请输入登录密码"
-            :type="passwordVisible === false ? 'password' : 'input'"
-            size="large"
-            name="password"
-            @keyup="checkCapslock"
-            @keyup.enter="handleLogin"
+      <el-form-item prop="password">
+        <span class="m-2">
+          <svg-icon size="30px" icon-class="password" /> </span
+        >|
+        <el-input
+          v-model="loginData.password"
+          class="flex-1"
+          placeholder="请输入登录密码"
+          :type="passwordVisible === false ? 'password' : 'input'"
+          name="password"
+          @keyup.enter="handleLogin"
+        />
+        <span class="mr-3" @click="passwordVisible = !passwordVisible">
+          <svg-icon
+            size="18px"
+            :icon-class="!passwordVisible ? 'eye' : 'eye-open'"
+            class="cursor-pointer"
           />
-          <span class="mr-2" @click="passwordVisible = !passwordVisible">
-            <svg-icon
-              :icon-class="!passwordVisible ? 'eye' : 'eye-open'"
-              class="text-white cursor-pointer"
-            />
-          </span>
-        </el-form-item>
-      </el-tooltip>
-
-      <el-checkbox v-model="loginData.auto" label="自动登录" size="large" />
-
+        </span>
+      </el-form-item>
       <el-button
         size="default"
         :loading="loading"
@@ -63,6 +50,13 @@
         >登录
       </el-button>
 
+      <el-checkbox
+        v-model="loginData.auto"
+        label="自动登录"
+        size="small"
+        fill="#727272"
+      />
+
       <!-- 账号密码提示 -->
       <div class="mt-4 text-white text-sm">
         <span>admin</span>,
@@ -91,14 +85,9 @@ const route = useRoute();
  */
 const loading = ref(false);
 /**
- * 是否大写锁定
- */
-const isCapslock = ref(false);
-/**
  * 密码是否可见
  */
 const passwordVisible = ref(false);
-
 /**
  * 登录表单引用
  */
@@ -119,7 +108,7 @@ const loginRules = {
  * 用户名校验
  */
 function usernameValidator(rule: any, value: any, callback: any) {
-	callback();
+  callback();
 }
 /**
  * 密码校验器
@@ -131,15 +120,6 @@ function passwordValidator(rule: any, value: any, callback: any) {
     callback();
   }
 }
-
-/**
- * 检查输入大小写状态
- */
-function checkCapslock(e: any) {
-  const { key } = e;
-  isCapslock.value = key && key.length === 1 && key >= "A" && key <= "Z";
-}
-
 /**
  * 登录
  */
@@ -177,59 +157,76 @@ function handleLogin() {
 
 <style lang="scss" scoped>
 .login-container {
+  box-sizing: border-box;
   width: 100%;
-  min-height: 100%;
+  height: 100%;
+  min-height: 750px;
   overflow: hidden;
-  background-color: #2d3a4b;
-
+  background: #eaf7fd url("../../assets/login/login.jpg") no-repeat left top;
+  background-size: auto 100%;
   .login-form {
-    width: 520px;
+    width: 500px;
     max-width: 100%;
-    padding: 160px 35px 0;
-    margin: 0 auto;
+    padding: 0 42px;
+    margin: 260px auto;
     overflow: hidden;
-
-    .captcha {
-      position: absolute;
-      top: 0;
-      right: 0;
-
-      img {
-        width: 120px;
-        height: 48px;
-        cursor: pointer;
-      }
+    background: #ffffff;
+    box-shadow: 0 0 10px #f2f3f5;
+    .title {
+      height: 98px;
+      line-height: 98px;
+      font-size: 30px;
+      color: #151515;
+    }
+    .svg-icon {
+      width: 18px;
+      height: 18px;
     }
   }
+  .el-form-item {
+    background: #f2f3f5;
+    border: 1px solid #f2f3f5;
+    border-radius: 5px;
+    height: 54px;
+    line-height: 54px;
+    margin-bottom: 40px;
+    font-size: 16px;
+    color: #747474;
+  }
+  .el-button {
+    background: #006eff;
+    height: 54px;
+    line-height: 54px;
+    font-size: 18px;
+    margin: 20px auto;
+  }
 }
-
-.el-form-item {
-  background: rgb(0 0 0 / 10%);
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: 5px;
+@media only screen and (min-width: 1200px) {
+  .login-container {
+    padding-left: 660px;
+  }
 }
 
 .el-input {
   background: transparent;
-
+  height: 54px;
+  line-height: 54px;
   // 子组件 scoped 无效,使用 :deep
   :deep(.el-input__wrapper) {
     padding: 0;
     background: transparent;
     box-shadow: none;
-
+    height: 54px;
     .el-input__inner {
-      color: #fff;
       background: transparent;
+      height: 54px;
       border: 0;
       border-radius: 0;
-      caret-color: #fff;
-
+      text-indent: 1.5em;
       &:-webkit-autofill {
         box-shadow: 0 0 0 1000px transparent inset !important;
         -webkit-text-fill-color: #fff !important;
       }
-
       // 设置输入框自动填充的延迟属性
       &:-webkit-autofill,
       &:-webkit-autofill:hover,
@@ -241,4 +238,11 @@ function handleLogin() {
     }
   }
 }
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+  background-color: #727272;
+  border-color: #727272;
+}
+:deep(.el-checkbox__input.is-checked + .el-checkbox__label) {
+  color: #727272;
+}
 </style>