提交

1

src/components/layout/index.module.less

@@ -4,7 +4,7 @@
   flex-direction: row;
   background: #f1f5ff;
   .WrapcoreView {
-    margin-top: 32px;
+    margin: 32px;
   }
   height: 100vh;
   overflow-y: scroll;
@@ -139,21 +139,69 @@
     }
   }
 }
-
+:global {
+  .n-popover {
+    overflow: hidden;
+    border-radius: 16px;
+  }
+}
 .propWrap {
   background-color: var(--n-color);
   border-radius: 16px;
   width: 300px;
-  overflow: hidden;
-  height: 358px;
+  overflow-y: auto;
   background: #ffffff;
   box-shadow: 0px 2px 17px 0px rgba(0, 0, 0, 0.08);
   padding: 20px !important;
-  .teacherIcon {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    border: 1px solid #ffffff;
-    overflow: hidden;
+  .teacherInfo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid #f2f2f2;
+    padding-bottom: 20px;
+    .teacherIcon {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: 1px solid #ffffff;
+      overflow: hidden;
+    }
+    .teacherName {
+      font-size: 22px;
+      font-weight: 600;
+      color: #333333;
+      margin-left: 16px;
+    }
+  }
+  .propWrapList {
+    padding-bottom: 17px;
+    border-bottom: 1px solid #f2f2f2;
+    margin-top: 16px;
+  }
+  .propWrapItem {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: 50px;
+    line-height: 50px;
+    cursor: pointer;
+    &:hover {
+      background: #f5f6fa;
+      border-radius: 10px;
+    }
+  }
+  .smallIcon {
+    width: 22px;
+    height: 23px;
+    margin-right: 21px;
+    margin-left: 10px;
+  }
+  .smallTitle {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333333;
+  }
+  .logoutInfo {
+    margin-top: 16px;
   }
 }

src/components/layout/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent } from 'vue';
 import LayoutSilder from './layoutSilder';
 import LayoutTop from './layoutTop';
 import styles from './index.module.less';
+import { NScrollbar } from 'naive-ui';
 export default defineComponent({
   name: 'layoutView',
   setup() {

src/components/layout/layoutTop.tsx

@@ -4,6 +4,11 @@ import { NImage, NBadge, NPopover, NIcon } from 'naive-ui';
 import schoolIcon from './images/schoolIcon.png';
 import teacherIcon from './images/teacherIcon.png';
 import messageIcon from './images/messageIcon.png';
+import closeIcon from './images/closeIcon.png';
+import clockIcon from './images/clockIcon.png';
+import schoolDot from './images/schoolDot.png';
+import personIcon from './images/personIcon.png';
+
 export default defineComponent({
   name: 'layoutTop',
   setup() {
@@ -25,7 +30,7 @@ export default defineComponent({
             <div class={styles.line}></div>
             <NPopover
               show-arrow={false}
-              trigger="click"
+              trigger="hover"
               onUpdate:show={val => {
                 showHeadFlag.value = val;
               }}
@@ -63,9 +68,43 @@ export default defineComponent({
                     class={styles.teacherIcon}
                     src={teacherIcon}
                     previewDisabled></NImage>
+                  <p class={styles.teacherName}>张晚意</p>
+                </div>
+                <div class={styles.propWrapList}>
+                  <div class={styles.propWrapItem}>
+                    {' '}
+                    <NImage
+                      class={styles.smallIcon}
+                      src={personIcon}
+                      previewDisabled></NImage>
+                    <p class={styles.smallTitle}>个人信息</p>
+                  </div>
+                  <div class={styles.propWrapItem}>
+                    {' '}
+                    <NImage
+                      class={styles.smallIcon}
+                      src={schoolDot}
+                      previewDisabled></NImage>
+                    <p class={styles.smallTitle}>学校信息</p>
+                  </div>
+                  <div class={styles.propWrapItem}>
+                    {' '}
+                    <NImage
+                      class={styles.smallIcon}
+                      src={clockIcon}
+                      previewDisabled></NImage>
+                    <p class={styles.smallTitle}>修改密码</p>
+                  </div>
+                </div>
+                <div class={styles.logoutInfo}>
+                  <div class={styles.propWrapItem}>
+                    <NImage
+                      class={styles.smallIcon}
+                      src={closeIcon}
+                      previewDisabled></NImage>
+                    <p class={styles.smallTitle}>退出登录</p>
+                  </div>
                 </div>
-                <div class={styles.propWrapList}></div>
-                <div class={styles.logoutInfo}></div>
               </div>
             </NPopover>
           </div>

src/styles/index.less

@@ -14,7 +14,7 @@
 
 body {
   user-select: none;
-  background-color: #F1F5FF;
+  background-color: #f1f5ff;
 }
 
 @font-face {
@@ -37,4 +37,26 @@ body {
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
-}
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 12px;
+  background-color: #fff;
+}
+
+::-webkit-scrollbar-thumb {
+  display: block;
+  min-height: 12px;
+  min-width: 8px;
+  border-radius: 6px;
+  background-color: rgb(217, 217, 217);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  display: block;
+  min-height: 12px;
+  min-width: 8px;
+  border-radius: 6px;
+  background-color: rgb(159, 159, 159);
+}

src/views/home/index.module.less

@@ -0,0 +1,55 @@
+.homeWrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .homeInfoLeft {
+    height: 500px;
+    width: 1286px;
+    .homeBanner {
+      height: 246px;
+      border-radius: 20px;
+      background-color: #d5e9ff;
+      position: relative;
+      .bannerPerson {
+        width: 327px;
+        height: 278px;
+        position: absolute;
+        left: 138px;
+        bottom: 0;
+        z-index: 100;
+      }
+      .bannerInfo {
+        width: 520px;
+        height: 156px;
+        position: absolute;
+        bottom: 45px;
+        right: 195px;
+        font-size: 18px;
+
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.65);
+        line-height: 25px;
+        letter-spacing: 1px;
+        h3 {
+          margin-bottom: 23px;
+          height: 35px;
+          font-size: 30px;
+          font-weight: 400;
+          color: #131415;
+        }
+        .bannerRrey {
+          color: rgba(0, 0, 0, 0.5);
+        }
+        .bannerRed {
+          color: #f24a6c;
+        }
+      }
+    }
+  }
+  .homeInfoRight {
+    height: 500px;
+
+    width: 450px;
+  }
+}

src/views/home/index.tsx

@@ -1,8 +1,28 @@
 import { defineComponent } from 'vue';
-
+import styles from './index.module.less';
+import bannerPerson from './images/bannerPerson.png';
+import { NImage } from 'naive-ui';
 export default defineComponent({
   name: 'home-page',
   setup() {
-    return () => <div style={{ fontSize: '18px' }}>首页</div>;
+    return () => (
+      <div class={styles.homeWrap}>
+        <div class={styles.homeInfoLeft}>
+          <div class={styles.homeBanner}>
+            <img class={styles.bannerPerson} src={bannerPerson}></img>
+            <div class={styles.bannerInfo}>
+              <h3>Hi，张老师 下午好！</h3>
+              <p class={styles.bannerMsg}>
+                您有 <span class={styles.bannerRed}> 4 </span>
+                <span class={styles.bannerRrey}> 条消息未读，</span>
+                <span class={styles.bannerRed}> 3 </span>
+                门课程未布置作业，请及时处理哦！
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class={styles.homeInfoRight}></div>
+      </div>
+    );
   }
 });