准备开发首页

1

src/components/layout/index.module.less

@@ -1,6 +1,8 @@
 .wrap {
+  width: 100%;
   display: flex;
   flex-direction: row;
+  background: #f1f5ff;
   .WrapcoreView {
     margin-top: 32px;
   }
@@ -10,16 +12,148 @@
 .silder {
   width: 100px;
   background: #3044ca;
-  min-height: 100vh;
+  min-height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   .logoWrap {
     margin-top: 22px;
-    width: 62px;
-    height: 60px;
+    .logo {
+      img {
+        width: 62px;
+        height: 60px;
+      }
+    }
   }
   .sliderList {
     margin-top: 37px;
   }
 }
+
+.silderItem {
+  position: relative;
+  width: 84px;
+  height: 80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 18px;
+  justify-content: center;
+  border-radius: 20px;
+  .radiusIcon {
+    img {
+      width: 24px;
+      height: 139px;
+    }
+
+    position: absolute;
+    right: -8px;
+    top: -26px;
+  }
+  p {
+    margin-top: 4px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 20px;
+  }
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+}
+
+.silderItem.isActiveItem {
+  background-color: #f1f5ff;
+  border-radius: 20px 0px 0px 20px;
+  p {
+    color: #21225d;
+  }
+}
+.Wrapcore {
+  flex: 1;
+  .layoutTop {
+    height: 64px;
+    background-color: #fff;
+    line-height: 64px;
+    padding: 0 50px 0 32px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    .layoutLeft {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .schoolIcon {
+        margin-right: 8px;
+        img {
+          width: 32px;
+          height: 32px;
+        }
+      }
+      p {
+        font-size: 18px;
+        font-weight: 600;
+        color: #131415;
+      }
+    }
+    .layoutRight {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .messageBadge {
+        margin-right: 24px;
+        .messageIcon {
+          width: 32px;
+          height: 32px;
+        }
+      }
+
+      .line {
+        width: 1px;
+        height: 18px;
+        background-color: #dfdfdf;
+        margin-right: 24px;
+      }
+      .mesgWrap {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .teacherIcon {
+          width: 32px;
+          height: 32px;
+          border-radius: 50%;
+          overflow: hidden;
+        }
+        .rotueLeft {
+          transform: rotate(-90deg);
+          transition: 0.2s;
+          margin-left: 10px;
+        }
+        .rotueRight {
+          transform: rotate(90deg);
+          margin-left: 10px;
+          transition: 0.2s;
+        }
+      }
+    }
+  }
+}
+
+.propWrap {
+  background-color: var(--n-color);
+  border-radius: 16px;
+  width: 300px;
+  overflow: hidden;
+  height: 358px;
+  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;
+  }
+}

src/components/layout/layoutSilder.tsx

@@ -1,4 +1,4 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import { NImage } from 'naive-ui';
 import styles from './index.module.less';
 import logo from './images/logo.png';
@@ -20,59 +20,80 @@ import SilderItem from './modals/silderItem';
 export default defineComponent({
   name: 'layoutSilder',
   setup() {
-    const itemInfoList = [
+    const itemInfoList = reactive([
       {
         activeIcon: indexIcon,
         name: '主页',
         normalIcon: indexNormal,
-        isActive: false
+        isActive: true,
+        id: 1
       },
       {
         activeIcon: studentIcon,
         name: '学生',
         normalIcon: studentNormal,
-        isActive: false
+        isActive: false,
+        id: 2
       },
       {
         activeIcon: classIcon,
         name: '班级',
         normalIcon: classNormal,
-        isActive: false
+        isActive: false,
+        id: 3
       },
       {
         activeIcon: palyIcon,
         name: '备课',
         normalIcon: palyNormal,
-        isActive: false
+        isActive: false,
+        id: 4
       },
       {
         activeIcon: kuIcon,
         name: '小酷AI',
         normalIcon: kuNormal,
-        isActive: false
+        isActive: false,
+        id: 5
       },
       {
         activeIcon: resourceIcon,
         name: '资源',
         normalIcon: resourceNormal,
-        isActive: false
+        isActive: false,
+        id: 6
       },
       {
         activeIcon: setIcon,
         name: '设置',
         normalIcon: setNormal,
-        isActive: false
+        isActive: false,
+        id: 7
       }
-    ];
+    ]);
+    const checkNavBar = (item: any) => {
+      console.log('checkNavBar', item);
+      itemInfoList.forEach((now: any) => {
+        now.isActive = false;
+      });
+      itemInfoList.forEach((now: any) => {
+        if (now.id == item.id) {
+          now.isActive = true;
+        }
+      });
+      console.log('checkNavBar', item);
+    };
     return () => (
       <>
         <div class={styles.silder}>
           <div class={styles.logoWrap}>
-            <NImage width="62" height="60" src={logo} preview-disabled></NImage>
+            <NImage class={styles.logo} src={logo} preview-disabled></NImage>
           </div>
           <div class={styles.sliderList}>
             {itemInfoList.map((item: any) => (
-              <SilderItem item={item}> </SilderItem>
+              <SilderItem onCheckNavBar={checkNavBar} item={item}>
+                {' '}
+              </SilderItem>
             ))}
           </div>
         </div>

src/components/layout/layoutTop.tsx

@@ -1,10 +1,75 @@
-import { defineComponent } from 'vue';
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+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';
 export default defineComponent({
   name: 'layoutTop',
   setup() {
+    const showHeadFlag = ref(false);
     return () => (
       <>
-        <div>layoutTop</div>
+        <div class={styles.layoutTop}>
+          <div class={styles.layoutLeft}>
+            <NImage src={schoolIcon} class={styles.schoolIcon}></NImage>
+            <p>武汉市武昌区教育局 | 武汉小学</p>
+          </div>
+          <div class={styles.layoutRight}>
+            <NBadge value={2} class={styles.messageBadge} color={'#FF1036'}>
+              <NImage
+                preview-disabled
+                class={styles.messageIcon}
+                src={messageIcon}></NImage>
+            </NBadge>
+            <div class={styles.line}></div>
+            <NPopover
+              show-arrow={false}
+              trigger="click"
+              onUpdate:show={val => {
+                showHeadFlag.value = val;
+              }}
+              class={styles.popoverHeader}
+              placement="bottom-end"
+              raw={true}
+              v-slots={{
+                trigger: () => (
+                  <div class={styles.mesgWrap}>
+                    <NImage
+                      preview-disabled
+                      class={styles.teacherIcon}
+                      src={teacherIcon}></NImage>
+                    <NIcon
+                      class={
+                        showHeadFlag.value
+                          ? styles.rotueLeft
+                          : styles.rotueRight
+                      }>
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        viewBox="0 0 24 24">
+                        <path
+                          d="M7.38 21.01c.49.49 1.28.49 1.77 0l8.31-8.31a.996.996 0 0 0 0-1.41L9.15 2.98c-.49-.49-1.28-.49-1.77 0s-.49 1.28 0 1.77L14.62 12l-7.25 7.25c-.48.48-.48 1.28.01 1.76z"
+                          fill="currentColor"></path>
+                      </svg>
+                    </NIcon>
+                  </div>
+                )
+              }}>
+              <div class={styles.propWrap}>
+                <div class={styles.teacherInfo}>
+                  <NImage
+                    class={styles.teacherIcon}
+                    src={teacherIcon}
+                    previewDisabled></NImage>
+                </div>
+                <div class={styles.propWrapList}></div>
+                <div class={styles.logoutInfo}></div>
+              </div>
+            </NPopover>
+          </div>
+        </div>
       </>
     );
   }

src/components/layout/modals/silderItem.tsx

@@ -1,28 +1,47 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive, ref, watch } from 'vue';
 import styles from '../index.module.less';
 import { NImage } from 'naive-ui';
-
+import radiusIcon from '../images/radiusIcon.png';
 export default defineComponent({
+  emits: ['checkNavBar'],
   props: ['item'],
   name: 'layoutSilder',
   setup(props, { emit }) {
+    const openNavBar = (item: any) => {
+      emit('checkNavBar', item);
+    };
+    const myItem = ref(props.item);
+    watch(
+      () => props.item,
+      val => {
+        console.log(val, 'myItem');
+        myItem.value = val;
+      },
+      {
+        deep: true
+      }
+    );
     return () => (
       <>
         <div
+          onClick={() => openNavBar(myItem.value)}
           class={[
             styles.silderItem,
-            props.item.isActive ? styles.isActiveItem : ''
+            myItem.value.isActive ? styles.isActiveItem : ''
           ]}>
           <NImage
-            width="62"
-            height="60"
+            width="26"
+            height="26"
             src={
-              props.item.isActive
-                ? props.item.activeIcon
-                : props.item.normalIcon
+              myItem.value.isActive
+                ? myItem.value.activeIcon
+                : myItem.value.normalIcon
             }
             preview-disabled></NImage>
-          <p>{props.item.name}</p>
+          <p>{myItem.value.name}</p>
+          {myItem.value.isActive ? (
+            <NImage src={radiusIcon} class={styles.radiusIcon}></NImage>
+          ) : null}
         </div>
       </>
     );