提交UI 修改

1

src/components/CDatePicker/index.tsx

@@ -2,6 +2,7 @@ import { defineComponent, ref } from 'vue';
 import styles from './index.module.less';
 import { NIcon, NImage, NDatePicker } from 'naive-ui';
 import dateIcons from './images/dateIcon.png';
+import disDate from './images/disDate.png';
 export default defineComponent({
   name: 'CDatePicker',
   props: {
@@ -15,6 +16,7 @@ export default defineComponent({
     }
   },
   setup(props, { emit, attrs }) {
+    const isFocus = ref(false);
     const timer = ref(null);
     const updateTimer = () => {
       console.log('更新日期', timer.value);
@@ -26,7 +28,7 @@ export default defineComponent({
           <NImage
             previewDisabled
             class={styles.dateIcons}
-            src={dateIcons}></NImage>
+            src={isFocus.value ? dateIcons : disDate}></NImage>
           <NDatePicker
             {...attrs}
             class={styles.CDatePicker}
@@ -35,6 +37,12 @@ export default defineComponent({
             separator={props.separator}
             type={props.type as any}
             onUpdate:value={updateTimer}
+            onFocus={() => {
+              isFocus.value = true;
+            }}
+            onBlur={() => {
+              isFocus.value = false;
+            }}
             v-slots={{
               'date-icon': () => (
                 <>

src/components/layout/index.module.less

@@ -62,7 +62,7 @@
     }
 
     position: absolute;
-    right: -8px;
+    right: -9px;
     top: -26px;
   }
 
@@ -130,7 +130,23 @@
 
       .messageBadge {
         margin-right: 24px;
-
+        :global {
+          .n-badge-sup {
+            height: 22px;
+            padding: 0 5px;
+            border: 1px solid #fff;
+            min-width: 22px;
+            border-radius: 11px;
+            text-align: center;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            line-height: 20px;
+          }
+          .n-base-slot-machine-current-number__inner {
+            top: 1px;
+          }
+        }
         .messageIcon {
           width: 32px;
           height: 32px;
@@ -299,6 +315,7 @@
     flex-direction: column;
     align-items: center;
     font-size: 12px;
+    cursor: pointer;
     &:hover {
       opacity: 0.8;
     }

src/components/layout/index.tsx

@@ -123,7 +123,7 @@ export default defineComponent({
       initMoveable();
     });
     const startShowModal = (val: 'setTimeIcon' | 'beatIcon' | 'toneIcon') => {
-      console.log(val);
+      if (val == 'setTimeIcon') console.log(val);
     };
     return () => (
       <div class={[styles.wrap, 'wrap']}>

src/components/layout/layoutSilder.tsx

@@ -33,14 +33,6 @@ export default defineComponent({
         path: '/'
       },
       {
-        activeIcon: studentIcon,
-        name: '学生',
-        normalIcon: studentNormal,
-        isActive: false,
-        id: 2,
-        path: '/studentList'
-      },
-      {
         activeIcon: classIcon,
         name: '班级',
         normalIcon: classNormal,
@@ -49,6 +41,15 @@ export default defineComponent({
         path: '/classList'
       },
       {
+        activeIcon: studentIcon,
+        name: '学生',
+        normalIcon: studentNormal,
+        isActive: false,
+        id: 2,
+        path: '/studentList'
+      },
+
+      {
         activeIcon: palyIcon,
         name: '备课',
         normalIcon: palyNormal,

src/components/layout/layoutTop.tsx

@@ -25,7 +25,11 @@ export default defineComponent({
             <p>武汉市武昌区教育局 | 武汉小学</p>
           </div>
           <div class={styles.layoutRight}>
-            <NBadge value={2} class={styles.messageBadge} color={'#FF1036'}>
+            <NBadge
+              value={999}
+              max={99}
+              class={styles.messageBadge}
+              color={'#FF1036'}>
               <NImage
                 preview-disabled
                 class={styles.messageIcon}

src/styles/index.less

@@ -1,6 +1,3 @@
-:root {
-  --product-color: #3044ca;
-}
 * {
   padding: 0;
   margin: 0;
@@ -110,12 +107,17 @@ body {
   padding: 0 20px !important;
   background-color: #f7f7f8 !important;
   color: rgba(0, 0, 0, 0.88) !important;
+
+  .n-data-table-th__title {
+    font-weight: 600;
+  }
 }
 .n-data-table-tr {
   .n-data-table-td {
-    &:nth-child(1) {
-      padding-left: 20px;
-    }
+    padding-left: 20px;
+
+    color: #333333;
+    font-size: 15px;
   }
 }
 .n-data-table-th__title-wrapper {
@@ -184,3 +186,15 @@ body {
   transform: scale(1.4);
   opacity: 0.1;
 }
+@font-face {
+  font-family: 'DINA';
+  src: url('../common/DIN_Alternate_Bold.ttf');
+}
+
+:root {
+  --product-color: #3044ca;
+  --n-text-color: #1677ff !important;
+}
+.n-button--primary-type {
+  color: #1677ff !important;
+}

src/views/home/components/teachList.tsx

@@ -40,23 +40,23 @@ export default defineComponent({
           conent: '人教版二年级上册 | 第三单元 |【歌表演】大雁',
           image: ''
         }
+      ],
+      '06-15': [
+        {
+          classGroup: '3年级2班',
+          teacherName: '孙忆枫',
+          conent: '人教版二年级上册 | 第二单元 |【歌表演】大雁',
+          image: ''
+        }
+      ],
+      '06-14': [
+        {
+          classGroup: '3年级2班',
+          teacherName: '孙忆枫',
+          conent: '人教版二年级上册 | 第一单元 |【歌表演】大雁',
+          image: ''
+        }
       ]
-      // '06-15': [
-      //   {
-      //     classGroup: '3年级2班',
-      //     teacherName: '孙忆枫',
-      //     conent: '人教版二年级上册 | 第二单元 |【歌表演】大雁',
-      //     image: ''
-      //   }
-      // ],
-      // '06-14': [
-      //   {
-      //     classGroup: '3年级2班',
-      //     teacherName: '孙忆枫',
-      //     conent: '人教版二年级上册 | 第一单元 |【歌表演】大雁',
-      //     image: ''
-      //   }
-      // ]
     } as any;
     return () => (
       <>
@@ -64,6 +64,7 @@ export default defineComponent({
           {Object.keys(teachList).map(key => (
             <TeachGroup list={teachList[key]} keys={key}></TeachGroup>
           ))}
+          <div class={styles.teachListWrapWall}></div>
         </div>
       </>
     );

src/views/home/components/trainData.tsx

@@ -70,6 +70,9 @@ export default defineComponent({
         yAxis: [
           {
             type: 'value',
+            axisLabel: {
+              formatter: '{value}人'
+            },
             axisTick: {
               show: false
             },
@@ -90,19 +93,20 @@ export default defineComponent({
         },
         series: [
           {
-            data: payForm.payInfoList,
-            type: 'line',
-            name: '合格人数',
+            // smooth: true,
+            data: payForm.studentList,
             symbolSize: 10,
+            type: 'line',
+            name: '不合格人数',
             symbol: 'circle',
             smooth: true,
             itemStyle: {
-              color: '#198CFE',
+              color: '#FF7AA7',
               borderColor: '#fff',
               borderWidth: 3
             },
             lineStyle: {
-              width: 2 //设置线条粗细
+              width: 3 //设置线条粗细
             },
             areaStyle: {
               color: {
@@ -114,12 +118,13 @@ export default defineComponent({
                 colorStops: [
                   {
                     offset: 0,
-                    color: 'rgba(212, 231, 255, 1)'
+                    color: 'rgba(255, 243, 246, 1)'
                     // 0% 处的颜色
                   },
                   {
                     offset: 1,
-                    color: 'rgba(221, 235, 254, 0)' // 100% 处的颜色
+                    // 100% 处的颜色
+                    color: 'rgba(255, 246, 248, 0)'
                   }
                 ]
               }
@@ -129,20 +134,19 @@ export default defineComponent({
             }
           },
           {
-            // smooth: true,
-            data: payForm.studentList,
-            symbolSize: 10,
+            data: payForm.payInfoList,
             type: 'line',
-            name: '不合格人数',
+            name: '合格人数',
+            symbolSize: 10,
             symbol: 'circle',
             smooth: true,
             itemStyle: {
-              color: '#FF7AA7',
+              color: '#198CFE',
               borderColor: '#fff',
               borderWidth: 3
             },
             lineStyle: {
-              width: 3 //设置线条粗细
+              width: 2 //设置线条粗细
             },
             areaStyle: {
               color: {
@@ -154,13 +158,12 @@ export default defineComponent({
                 colorStops: [
                   {
                     offset: 0,
-                    color: 'rgba(255, 243, 246, 1)'
+                    color: 'rgba(212, 231, 255, 1)'
                     // 0% 处的颜色
                   },
                   {
                     offset: 1,
-                    // 100% 处的颜色
-                    color: 'rgba(255, 246, 248, 0)'
+                    color: 'rgba(221, 235, 254, 0)' // 100% 处的颜色
                   }
                 ]
               }

src/views/home/index.module.less

@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: row;
   // align-items: center;
-  justify-content: space-between;
+  // justify-content: space-between;
   align-content: stretch;
   .homeInfoLeft {
     display: flex;
@@ -29,7 +29,7 @@
         bottom: 45px;
         right: 195px;
         font-size: 18px;
-        font-weight: 400;
+
         color: rgba(0, 0, 0, 0.65);
         line-height: 25px;
         letter-spacing: 1px;
@@ -37,7 +37,7 @@
           margin-bottom: 23px;
           height: 35px;
           font-size: 30px;
-          font-weight: 400;
+          font-weight: 600;
           color: #131415;
         }
         .bannerRrey {
@@ -103,6 +103,7 @@
     }
   }
   .homeInfoRight {
+    margin-left: 20px;
     width: 450px;
   }
 }
@@ -209,8 +210,9 @@
           color: #777777;
           line-height: 18px;
           span {
+            font-family: 'DINA';
             font-size: 24px;
-            font-weight: bold;
+            font-weight: 600;
             color: #131415;
             line-height: 28px;
           }
@@ -402,17 +404,50 @@
     padding: 20px;
     border-radius: 20px;
     margin-top: 20px;
+    .rightTeachingWrapTitle {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+      .lookMore {
+        cursor: pointer;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        color: #1677ff;
+        .lookMoreArrow {
+          width: 12px;
+          height: 12px;
+        }
+      }
+    }
   }
 }
 .teachListWrap {
+  position: relative;
+  .teachListWrapWall {
+    position: absolute;
+    bottom: 0;
+    height: 159px;
+    width: 100%;
+    background: linear-gradient(
+      180deg,
+      rgba(255, 255, 255, 0) 0%,
+      #ffffff 100%
+    );
+    border-radius: 0px 0px 20px 20px;
+  }
 }
 .teachGroup {
   margin-top: 12px;
+
   .teachGroupTitle {
+    position: relative;
+    left: -10px;
     font-size: 14px;
     font-weight: 400;
     color: #aaaaaa;
-    width: 40px;
+    width: 60px;
     text-align: center;
     margin-bottom: 12px;
   }

src/views/home/index.tsx

@@ -15,9 +15,13 @@ import goClass from './images/goClass.png';
 import boxIcon from './images/boxIcon.png';
 import TeachList from './components/teachList';
 import ChioseModal from './modals/chioseModal';
+import blueArrow from './images/blueArrow.png';
+import soureIcon from './images/soureIcon.png';
+import { useRouter } from 'vue-router';
 export default defineComponent({
   name: 'home-page',
   setup() {
+    const router = useRouter();
     const state = reactive({
       loading: false,
       pagination: {
@@ -117,11 +121,17 @@ export default defineComponent({
         },
         {
           title: '提交率',
-          key: 'submitRate'
+          key: 'submitRate',
+          render(row: any) {
+            return <span>{row.submitRate}%</span>;
+          }
         },
         {
           title: '合格率',
-          key: 'quantityRate'
+          key: 'quantityRate',
+          render(row: any) {
+            return <span>{row.quantityRate}%</span>;
+          }
         },
         {
           title: '操作',
@@ -217,27 +227,39 @@ export default defineComponent({
                     src={goClass}></NImage>
                   <p>开始上课</p>
                 </div>
+
                 <div class={styles.quickItem}>
                   <NImage
                     previewDisabled
                     class={styles.quickItemImg}
-                    src={cloundIcon}></NImage>
-                  <p>我的资源</p>
+                    src={soureIcon}></NImage>
+                  <p>布置作业</p>
                 </div>
-                <div class={styles.quickItem}>
+                <div
+                  class={styles.quickItem}
+                  onClick={() => router.push('/natural-resources')}>
                   <NImage
                     previewDisabled
                     class={styles.quickItemImg}
-                    src={boxIcon}></NImage>
-                  <p>工具箱</p>
+                    src={cloundIcon}></NImage>
+                  <p>我的资源</p>
                 </div>
               </div>
             </div>
           </div>
           <div class={styles.rightTeachingWrap}>
-            <h3 class={styles.rightTitle}>
-              <div class={styles.titleDot}></div>教学进度
-            </h3>
+            <div class={styles.rightTeachingWrapTitle}>
+              <h3 class={styles.rightTitle}>
+                <div class={styles.titleDot}></div>教学进度
+              </h3>
+              <div class={styles.lookMore}>
+                查看全部{' '}
+                <NImage
+                  src={blueArrow}
+                  class={styles.lookMoreArrow}
+                  previewDisabled></NImage>
+              </div>
+            </div>
             <TeachList></TeachList>
           </div>
         </div>