提交

1

src/components/layout/index.module.less

@@ -127,8 +127,10 @@
       display: flex;
       flex-direction: row;
       align-items: center;
+
       .messageBadge {
         margin-right: 24px;
+
         :global {
           .n-badge-sup {
             left: 20px;
@@ -138,6 +140,7 @@
             animation: TadaNum 1s 2s both infinite !important;
           }
         }
+
         .messageIcon {
           -webkit-animation: Tada 1s 2s both infinite;
           -moz-animation: Tada 1s 2s both infinite;
@@ -147,16 +150,19 @@
           height: 32px;
         }
       }
+
       @keyframes Tada {
         0% {
           transform: scale(1);
           transform: scale(1);
         }
+
         10%,
         20% {
           transform: scale(0.9) rotate(-3deg);
           transform: scale(0.9) rotate(-3deg);
         }
+
         30%,
         50%,
         70%,
@@ -164,12 +170,14 @@
           transform: scale(1.1) rotate(3deg);
           transform: scale(1.1) rotate(3deg);
         }
+
         40%,
         60%,
         80% {
           transform: scale(1.1) rotate(-3deg);
           transform: scale(1.1) rotate(-3deg);
         }
+
         100% {
           transform: scale(1) rotate(0);
           transform: scale(1) rotate(0);
@@ -289,6 +297,7 @@
 }
 
 :global {
+
   .fade-slide-leave-active,
   .fade-slide-enter-active {
     transition: all 0.3s;
@@ -314,6 +323,7 @@
   cursor: pointer;
   z-index: 1000;
 }
+
 .isDragIng {
   width: 138px;
   height: 138px;
@@ -323,10 +333,12 @@
   .moveable-control-box {
     --moveable-color: transparent !important;
   }
+
   .n-popover {
     background-color: transparent !important;
   }
 }
+
 .booxToolWrap {
   width: 286px;
   height: 95px;
@@ -338,15 +350,18 @@
   align-items: center;
   padding: 8px 23px 10px;
   justify-content: space-between;
+
   .booxToolItem {
     display: flex;
     flex-direction: column;
     align-items: center;
     font-size: 12px;
     cursor: pointer;
+
     &:hover {
       opacity: 0.8;
     }
+
     img {
       width: 56px;
       height: 56px;
@@ -354,18 +369,23 @@
     }
   }
 }
+
 .setTimeImage {
   cursor: pointer;
+
   img {
     width: 792px;
   }
 }
+
 .beatImage {
   cursor: pointer;
+
   img {
     width: 698px;
   }
 }
+
 .changePwdModal {
   border-radius: 16px;
-}
+}

src/components/layout/layoutSilder.tsx

@@ -16,6 +16,8 @@ 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'
+import dataNormal from './images/dataNormal.png'
 import SilderItem from './modals/silderItem';
 import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
 export default defineComponent({
@@ -81,11 +83,19 @@ export default defineComponent({
         path: '/natural-resources'
       },
       {
+        activeIcon: dataIcon,
+        name: '数据',
+        normalIcon: dataNormal,
+        isActive: false,
+        id: 7,
+        path: '/data-module'
+      },
+      {
         activeIcon: setIcon,
         name: '设置',
         normalIcon: setNormal,
         isActive: false,
-        id: 7,
+        id: 8,
         path: '/setting'
       }
     ]);

src/router/routes/index.ts

@@ -125,6 +125,14 @@ export const constantRoutes: RouteRecordRaw[] = [
         }
       },
       {
+        path: '/data-module',
+        name: 'data-module',
+        component: () => import('@/views/data-module/index'),
+        meta: {
+          title: '数据'
+        }
+      },
+      {
         path: '/natural-resources',
         name: 'natural-resources',
         component: () => import('@/views/natural-resources/index'),

src/views/data-module/index.module.less

@@ -0,0 +1,58 @@
+@img: '../setting/images';
+
+.listWrap {
+  min-height: 805px;
+  padding: 32px;
+  background-color: #fff;
+  border-radius: 20px;
+
+  .customTabs {
+    :global {
+      .n-tabs-tab--active {
+        font-size: 18px !important;
+
+        font-weight: 600 !important;
+        color: #131415 !important;
+      }
+
+      .n-tabs-tab {
+        font-size: 18px;
+        padding: 8px 0 !important;
+        font-weight: 400;
+        min-width: 50px;
+        color: #8b8d98;
+
+        &:hover {
+          color: #198cfe !important;
+        }
+      }
+
+      .n-tabs-bar {
+        // background-color: red !important;
+        width: 50px !important;
+        height: 5px !important;
+        background: url('@{img}/barIcon.png') no-repeat;
+        background-size: 50px 5px;
+      }
+    }
+  }
+}
+
+.searchBtn {
+  width: 90px;
+  height: 43px;
+  background: #198cfe;
+  border-radius: 8px;
+  line-height: 41px;
+  font-weight: 600 !important;
+  font-size: 18px;
+}
+
+.resetBtn {
+  width: 90px;
+  height: 43px;
+  border-radius: 8px;
+  line-height: 41px;
+  font-weight: 600 !important;
+  font-size: 18px;
+}

src/views/data-module/index.tsx

@@ -0,0 +1,64 @@
+import { defineComponent, ref } from 'vue';
+import styles from './index.module.less';
+import { NTabs, NTabPane, NSpace, NButton } from 'naive-ui';
+import { useRoute } from 'vue-router';
+import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
+import CDatePicker from '/src/components/CDatePicker';
+import TrainData from '@/views/home/components/trainData';
+import PracticeData from '@/views/home/components/practiceData';
+import PracticeRanking from '@/views/home/components/practiceRanking';
+export default defineComponent({
+  name: 'data-module',
+  setup() {
+    const activeTab = ref('attendclass');
+    const route = useRoute();
+    getTabsCache((val: any) => {
+      if (val.form.tabName) {
+        activeTab.value = val.form.tabName;
+      }
+    });
+    const setTabs = (val: any) => {
+      setTabsCaches(val, 'tabName', route);
+    };
+    return () => (
+      <div>
+        <div class={styles.listWrap}>
+          <NTabs
+            onUpdate:value={(val: any) => setTabs(val)}
+            class={styles.customTabs}
+            v-model:value={activeTab.value}
+            size="large"
+            animated
+            pane-wrapper-style="margin: 0 -4px"
+            pane-style="padding-left: 4px; padding-right: 4px; box-sizing: border-box;"
+            v-Slots={{
+              suffix:()=><>
+                        <div class={styles.homeStudyInfoDate}>
+              <NSpace>
+                <CDatePicker separator={'-'} type="daterange"></CDatePicker>
+                <NButton type="primary" class={styles.searchBtn}>
+                  搜索
+                </NButton>
+                <NButton type="primary" ghost class={styles.resetBtn}>
+                  重置
+                </NButton>
+              </NSpace>
+            </div>
+              </>
+            }}>
+            <NTabPane name="training " tab="训练统计">
+             <TrainData></TrainData>
+            </NTabPane>
+            <NTabPane name="practice" tab="练习数据">
+              <PracticeData></PracticeData>
+            </NTabPane>
+            <NTabPane name="ranking" tab="练习排行">
+              <PracticeRanking></PracticeRanking>
+            </NTabPane>
+          </NTabs>
+
+        </div>
+      </div>
+    );
+  }
+});