build

src/components/layout/guide-section/index.module.less

@@ -77,6 +77,13 @@
       height: 22px;
       margin-left: 12px;
       cursor: pointer;
+      transition: .2s ease;
+
+      &:hover {
+        background-color: rgba(34, 71, 133, 0.08);
+        border-radius: 4px;
+        transition: .2s ease;
+      }
     }
     .screen {
       background: url('./images/screen.png') no-repeat center;

src/components/layout/index.module.less

@@ -76,19 +76,26 @@
   }
 
   .radiusIcon {
-    img {
-      width: 26px;
-      height: 137px;
-    }
-
+    width: 26px;
+    height: 137px;
     position: absolute;
     right: -10px;
     top: -29px;
   }
 
+  // .radiusIcon1 {
+  //   // width: 26px;
+  //   // height: 137px;
+  //   width: 92px;
+  //   height: 124px;
+  //   position: absolute;
+  //   right: -10px;
+  //   top: -29px;
+  // }
+
   p {
     margin-top: 4px;
-    font-size: max(14px, 10Px);
+    font-size: max(14px, 10px);
     font-weight: 600;
     color: #ffffff;
     line-height: 20px;
@@ -100,9 +107,13 @@
 }
 
 .silderItem.isActiveItem {
+  // position: relative;
   background-color: #f1f5ff;
   border-radius: 20px 0px 0px 20px;
-
+  div, p {
+    position: relative;
+    z-index: 1;
+  }
   p {
     color: #21225d;
   }
@@ -137,7 +148,7 @@
       }
 
       p {
-        font-size: max(18px, 14Px);
+        font-size: max(18px, 14px);
         font-weight: 600;
         color: #131415;
       }
@@ -148,12 +159,9 @@
       flex-direction: row;
       align-items: center;
 
-
-
       .messageBadge {
         margin-right: 24px;
 
-
         .messageIcon {
           width: 32px;
           height: 32px;
@@ -227,7 +235,6 @@
           height: 32px;
           border-radius: 50%;
           overflow: hidden;
-
         }
 
         flex: 1;
@@ -272,19 +279,15 @@
 
 :global {
   .nameTool.n-popover {
-
     background-color: #000 !important;
     color: #fff;
-
   }
-
 }
 
 :global {
   .n-popover {
     // overflow: hidden;
     border-radius: 16px;
-
   }
 }
 
@@ -334,12 +337,11 @@
       border-radius: 50%;
       border: 1px solid #ffffff;
       overflow: hidden;
-
     }
 
     .teacherName {
       flex: 1;
-      font-size: max(20px, 15Px);
+      font-size: max(20px, 15px);
       font-weight: 600;
       color: #333333;
       overflow: hidden;
@@ -355,9 +357,9 @@
 
       .roleType {
         margin-top: 3px;
-        font-size: max(12px, 11Px);
-        color: #2089FF;
-        background: #E8F4FF;
+        font-size: max(12px, 11px);
+        color: #2089ff;
+        background: #e8f4ff;
         border-radius: 3px;
         border: 1px solid rgba(25, 140, 254, 0.5);
         padding: 0 4px;
@@ -405,7 +407,6 @@
 }
 
 :global {
-
   .fade-slide-leave-active,
   .fade-slide-enter-active {
     transition: all 0.3s;
@@ -470,7 +471,7 @@
   padding: 16px 20px;
   justify-content: space-between;
 
-  &>div {
+  & > div {
     display: flex;
 
     &:last-child {
@@ -483,7 +484,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    font-size: max(12px, 11Px);
+    font-size: max(12px, 11px);
     cursor: pointer;
     text-align: center;
 
@@ -497,7 +498,6 @@
       }
     }
 
-
     &:hover {
       opacity: 0.8;
     }
@@ -543,8 +543,8 @@
 .imGroupContainer,
 .container {
   background-color: #fff;
-  width: 868Px;
-  height: 540Px;
+  width: 868px;
+  height: 540px;
   border-radius: 15px;
 }
 
@@ -552,14 +552,12 @@
   visibility: hidden;
 }
 
-
 .showClass {
   width: 800px;
   border-radius: 16px;
   overflow: hidden;
 }
 
-
 .showModalTone {
   width: 500px;
 
@@ -573,11 +571,10 @@
       text-align: center;
 
       span {
-        color: #EA4132;
+        color: #ea4132;
       }
     }
   }
-
 }
 
 .suggestWrap {
@@ -595,8 +592,6 @@
   background-color: transparent !important;
   box-shadow: none !important;
 
-
-
   :global {
     .n-card-header {
       display: none;
@@ -627,7 +622,6 @@
     //   }
     // }
   }
-
 }
 
 .popoverClassModel {
@@ -638,4 +632,4 @@
 
 .popBox {
   z-index: 9999;
-}
+}

src/components/layout/layoutSilder.tsx

@@ -12,8 +12,8 @@ import palyIcon from './images/palyIcon.png';
 import palyNormal from './images/palyNormal.png';
 import resourceIcon from './images/resourceIcon.png';
 import resourceNormal from './images/resourceNormal.png';
-import setIcon from './images/setIcon.png';
-import setNormal from './images/setNormal.png';
+// import setIcon from './images/setIcon.png';
+// import setNormal from './images/setNormal.png';
 import studentIcon from './images/studentIcon.png';
 import studentNormal from './images/studentNormal.png';
 import dataIcon from './images/dataIcon.png';

src/components/layout/modals/silderItem.tsx

@@ -1,51 +1,48 @@
-import { defineComponent, 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 => {
-        myItem.value = val;
-      },
-      {
-        deep: true
-      }
-    );
-    return () => (
-      <>
-        <div
-          onClick={() => openNavBar(myItem.value)}
-          class={[
-            styles.silderItem,
-            myItem.value.isActive ? styles.isActiveItem : ''
-          ]}>
-          <NImage
-            width="26"
-            height="26"
-            src={
-              myItem.value.isActive
-                ? myItem.value.activeIcon
-                : myItem.value.normalIcon
-            }
-            preview-disabled></NImage>
-          <p>{myItem.value.name}</p>
-          {myItem.value.isActive ? (
-            <NImage
-              src={radiusIcon}
-              class={styles.radiusIcon}
-              previewDisabled></NImage>
-          ) : null}
-        </div>
-      </>
-    );
-  }
-});
+import { defineComponent, ref, watch } from 'vue';
+import styles from '../index.module.less';
+import { NImage } from 'naive-ui';
+import radiusIcon from '../images/radiusIcon.png';
+import radiusIcon1 from '../images/radiusIcon-1.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 => {
+        myItem.value = val;
+      },
+      {
+        deep: true
+      }
+    );
+    return () => (
+      <div
+        onClick={() => openNavBar(myItem.value)}
+        class={[
+          styles.silderItem,
+          myItem.value.isActive ? styles.isActiveItem : ''
+        ]}>
+        <NImage
+          width="26"
+          height="26"
+          src={
+            myItem.value.isActive
+              ? myItem.value.activeIcon
+              : myItem.value.normalIcon
+          }
+          preview-disabled></NImage>
+        <p>{myItem.value.name}</p>
+        {myItem.value.isActive ? (
+          <img src={radiusIcon} class={styles.radiusIcon} />
+          // <img src={radiusIcon1} class={styles.radiusIcon1} />
+        ) : null}
+      </div>
+    );
+  }
+});