update

user_web/src/view/student/main/Main.vue

@@ -10,58 +10,58 @@ let menuList = ref([
         "name" : "元宇宙展厅",
         "logo" : new URL("../../../assets/res/img/main/tab_01.png", import.meta.url).href,
     },
-    {
-        "name" : "声纳检测实训",
-        "logo" : new URL("../../../assets/res/img/main/tab_02.png", import.meta.url).href,
-    },
-    {
-        "name" : "CCTV检测实训",
-        "logo" : new URL("../../../assets/res/img/main/tab_03.png", import.meta.url).href,
-    },
-    {
-        "name" : "QV检测实训",
-        "logo" : new URL("../../../assets/res/img/main/tab_04.png", import.meta.url).href,
-    },
+    // {
+    //     "name" : "声纳检测实训",
+    //     "logo" : new URL("../../../assets/res/img/main/tab_02.png", import.meta.url).href,
+    // },
+    // {
+    //     "name" : "CCTV检测实训",
+    //     "logo" : new URL("../../../assets/res/img/main/tab_03.png", import.meta.url).href,
+    // },
+    // {
+    //     "name" : "QV检测实训",
+    //     "logo" : new URL("../../../assets/res/img/main/tab_04.png", import.meta.url).href,
+    // },
 ]);
 
 let studyList = ref([
 
-    {
-        "topImg" : new URL("../../../assets/res/img/main/yuan_1.svg", import.meta.url).href,
-        "bgImg" : new URL("../../../assets/res/img/main/time_01.png", import.meta.url).href,
-        "name" : "声纳学习时长",
-        "style_1" : "color:#5B6EDD;",
-        "style_2" : "color:#5B6EDD;",
-        "style_3" : "color:#5B6EDD;",
-        "style_4" : "color:#a3aeec;",
-        "stydyTime" : 2.9,
-        "num" : 15,
-        "numMax" : 37,
-    },
-    {
-        "topImg" : new URL("../../../assets/res/img/main/yuan_2.svg", import.meta.url).href,
-        "bgImg" : new URL("../../../assets/res/img/main/time_02.png", import.meta.url).href,
-        "name" : "CCTV学习时长",
-        "style_1" : "color:#28A47E;",
-        "style_2" : "color:#28A47E;",
-        "style_3" : "color:#28A47E;",
-        "style_4" : "color:#93d3c0;",
-        "stydyTime" : 0.6,
-        "num" : 20,
-        "numMax" : 37,
-    },
-    {
-        "topImg" : new URL("../../../assets/res/img/main/yuan_3.svg", import.meta.url).href,
-        "bgImg" : new URL("../../../assets/res/img/main/time_03.png", import.meta.url).href,
-        "name" : "QV学习时长",
-        "style_1" : "color:#D47571;",
-        "style_2" : "color:#D47571;",
-        "style_3" : "color:#D47571;",
-        "style_4" : "color:#e8b3b0;",
-        "stydyTime" : 15,
-        "num" : 11,
-        "numMax" : 37,
-    },
+    // {
+    //     "topImg" : new URL("../../../assets/res/img/main/yuan_1.svg", import.meta.url).href,
+    //     "bgImg" : new URL("../../../assets/res/img/main/time_01.png", import.meta.url).href,
+    //     "name" : "声纳学习时长",
+    //     "style_1" : "color:#5B6EDD;",
+    //     "style_2" : "color:#5B6EDD;",
+    //     "style_3" : "color:#5B6EDD;",
+    //     "style_4" : "color:#a3aeec;",
+    //     "stydyTime" : 2.9,
+    //     "num" : 15,
+    //     "numMax" : 37,
+    // },
+    // {
+    //     "topImg" : new URL("../../../assets/res/img/main/yuan_2.svg", import.meta.url).href,
+    //     "bgImg" : new URL("../../../assets/res/img/main/time_02.png", import.meta.url).href,
+    //     "name" : "CCTV学习时长",
+    //     "style_1" : "color:#28A47E;",
+    //     "style_2" : "color:#28A47E;",
+    //     "style_3" : "color:#28A47E;",
+    //     "style_4" : "color:#93d3c0;",
+    //     "stydyTime" : 0.6,
+    //     "num" : 20,
+    //     "numMax" : 37,
+    // },
+    // {
+    //     "topImg" : new URL("../../../assets/res/img/main/yuan_3.svg", import.meta.url).href,
+    //     "bgImg" : new URL("../../../assets/res/img/main/time_03.png", import.meta.url).href,
+    //     "name" : "QV学习时长",
+    //     "style_1" : "color:#D47571;",
+    //     "style_2" : "color:#D47571;",
+    //     "style_3" : "color:#D47571;",
+    //     "style_4" : "color:#e8b3b0;",
+    //     "stydyTime" : 15,
+    //     "num" : 11,
+    //     "numMax" : 37,
+    // },
 
 ]);
 
@@ -72,38 +72,62 @@ let studyList = ref([
  */
 const menuListEvent = (json, index) => {
     
-    switch (json.name) {
-
-        case "元宇宙展厅":
-            window.open("https://www.3dyzt.com/main/game.html?id=da734e10-cdbd-40af-980b-dceeaa175722&user=3be57fe8a9024fff9c33237173ba58af", '_blank');
-            break;
-
-        case "声纳检测实训":
-            // window.open('#/Sonar', '_blank');
-            // window.open('#/train/list', '_blank');
-            router.push('/train/list');
-            break;
-
-        case "CCTV检测实训":
-            // window.open('https://www.3dyzt.com/eduTrain/web-user/index.html', '_blank');
-            // window.open('#/train/list', '_blank');
-            router.push('/train/list');
-            break;
-
-        case "QV检测实训":
-            // window.open('#/Qv', '_blank');
-            // window.open('#/train/list', '_blank');
-            router.push('/train/list');
-            break;
+    // console.log("切换菜单", json);
 
+    if (json["db"] == null || json["db"] == undefined) {
+        window.open("https://www.3dyzt.com/main/game.html?id=da734e10-cdbd-40af-980b-dceeaa175722&user=3be57fe8a9024fff9c33237173ba58af", '_blank');
+        return;
     }
+
+    let db = json["db"];
+    console.log("切换菜单 db ---", db);
+
+    // switch (json.name) {
+
+    //     case "元宇宙展厅":
+    //         window.open("https://www.3dyzt.com/main/game.html?id=da734e10-cdbd-40af-980b-dceeaa175722&user=3be57fe8a9024fff9c33237173ba58af", '_blank');
+    //         break;
+
+    //     case "声纳检测实训":
+    //         // window.open('#/Sonar', '_blank');
+    //         // window.open('#/train/list', '_blank');
+    //         router.push('/train/list');
+    //         break;
+
+    //     case "CCTV检测实训":
+    //         // window.open('https://www.3dyzt.com/eduTrain/web-user/index.html', '_blank');
+    //         // window.open('#/train/list', '_blank');
+    //         router.push('/train/list');
+    //         break;
+
+    //     case "QV检测实训":
+    //         // window.open('#/Qv', '_blank');
+    //         // window.open('#/train/list', '_blank');
+    //         router.push('/train/list');
+    //         break;
+
+    // }
     
 }
 
 
 const studentTaskGetSelfCourseEvent = () => {
     studentTaskGetSelfCourse().then(res => {
-        console.log("studentTaskGetSelfCourse ---", res);
+
+        // console.log("studentTaskGetSelfCourse ---", res);
+        let array = res?.data?.data;
+        for (let i = 0; i < array.length; i++) {
+            let objList = array[i];
+            // console.log("objList ---", objList);
+
+            let addJson = {
+                "name" : objList?.name,
+                "logo" : objList?.logo,
+                "db" : objList,
+            };
+            menuList.value.push(addJson);
+        }
+        
     }).catch(error => {
 
     });
@@ -143,16 +167,31 @@ const studentTaskLearningAchievementStatisticsEvent = () => {
     
     studentTaskLearningAchievementStatistics().then(res => {
 
+        studyList.value = [];
+
         // console.log("studentTaskLearningAchievementStatistics ---", res);
         let array = res?.data?.data?.courseStats;
         for (let i = 0; i < array.length; i++) {
             let objArray = array[i];
-            console.log("objArray ---", objArray);
+            // console.log("objArray ---", objArray);
 
             let addJson = JSON.parse(JSON.stringify(uiList[uiListIndex]));
 
+            let totalStudyTime = objArray.totalStudyTime;
+            let totalStudyTimeNew = parseInt(totalStudyTime) / (60 * 60);
+            totalStudyTimeNew = totalStudyTimeNew.toFixed(2);
+
+            addJson["name"] = objArray.courseName;
+            addJson["stydyTime"] = totalStudyTimeNew;
+            addJson["num"] = objArray.rank;
+            addJson["numMax"] = objArray.totalStudentCount;
             
+            studyList.value.push(addJson);
 
+            uiListIndex += 1;
+            if (uiListIndex >= uiList.length) {
+                uiListIndex = 0;
+            }
         }
 
     }).catch(error => {
@@ -194,7 +233,7 @@ onMounted(function() {
 
                         </div>
 
-                        <div class="lookContent">
+                        <div class="lookContent commonsScrollbar">
 
                             <div class="dbList dbListOne" v-for="(item, index) of studyList" :key="index" >
 
@@ -253,14 +292,14 @@ onMounted(function() {
                         
                     </div>
 
-                </div>
-
-            </div>
+                    <div class="bottomTxt">
+                        海迈科技技术支持
+                    </div>
 
-            <div class="bottomTxt">
-                海迈科技技术支持
+                </div>
+                
             </div>
-
+            
         </div>
 
     </div>
@@ -382,13 +421,15 @@ $myScale: 0.9;
                         width: 100%;
                         float: left;
                         margin: 2rem * $myScale 0px 0px 0px;
+                        height: 15rem;
 
                         .dbList {
                             
                             position: relative;
                             float: left;
                             // width: 14.9285rem * $myScale;
-                            width: 14.7rem * $myScale;
+                            // width: 14.7rem * $myScale;
+                            width: 14.5rem * $myScale;
                             height: 13.3571rem * $myScale;
                             margin: 0px 1.1428rem * $myScale 0px 1.1428rem * $myScale;
 
@@ -521,8 +562,9 @@ $myScale: 0.9;
 
             .menuMain {
 
-                display: inline-flex;
+                // display: inline-flex;
                 width: auto;
+                max-width: 72%;
                 height: 100%;
 
                 .menuList {
@@ -530,10 +572,11 @@ $myScale: 0.9;
                     position: relative;
                     width: 19.7142rem * $myScale;
                     height: 26.3571rem * $myScale;
-                    display: inline-flex;
+                    // display: inline-flex;
+                    float: left;
                     background: linear-gradient( 181deg, #E6FEFF 0%, #FFFFFF 100%);
                     box-shadow: 0px 4px 22px 0px rgba(104,121,183,0.25);
-                    margin: 0px 3.5714rem * $myScale 0px 3.5714rem * $myScale;
+                    margin: 1.75rem * $myScale 3.5714rem * $myScale 1.75rem * $myScale 3.5714rem * $myScale;
                     border-radius: 1.2142rem * $myScale;
                     // 手势
                     cursor:pointer;
@@ -564,6 +607,7 @@ $myScale: 0.9;
         }
 
         .bottomTxt {
+            clear: left;
             position: relative;
             margin: 1.7857rem * $myScale 0px 1.7857rem * $myScale 0px;
             width: 100%;
@@ -571,6 +615,7 @@ $myScale: 0.9;
             font-size: 1.5714rem * $myScale;
             color: #BBBBBB;
             font-weight: 400;
+            height: 5rem;
         }
 
     }

user_web/src/view/student/main/css/commonsScrollbar.scss

@@ -7,40 +7,40 @@
 
 /* 滚动条整体样式 */
 .commonsScrollbar::-webkit-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbar::scrollbar {
-    width: 5px;
-    height: 5px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbar::-moz-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbar::-ms-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 
 .commonsScrollbar::-o-scrollbar {
-    width: 5px;
-    height: 5px;
+    width: 0px;
+    height: 0px;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
@@ -49,7 +49,8 @@
 /* 滚动条里面小方块 */
 .commonsScrollbar::-webkit-scrollbar-thumb {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     background-clip: padding-box;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -59,7 +60,8 @@
 
 .commonsScrollbar::scrollbar-thumb {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     background-clip: padding-box;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -69,7 +71,8 @@
 
 .commonsScrollbar::-moz-scrollbar-thumb {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     background-clip: padding-box;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -79,7 +82,8 @@
 
 .commonsScrollbar::-ms-scrollbar-thumb {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     background-clip: padding-box;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -89,7 +93,8 @@
 
 .commonsScrollbar::-o-scrollbar-thumb {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     background-clip: padding-box;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
@@ -100,7 +105,8 @@
 /* 滚动条里面轨道 */
 .commonsScrollbar::-webkit-scrollbar-thumb:hover {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
@@ -108,7 +114,8 @@
 
 .commonsScrollbar::scrollbar-thumb:hover {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
@@ -116,7 +123,8 @@
 
 .commonsScrollbar::-moz-scrollbar-thumb:hover {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
@@ -124,7 +132,8 @@
 
 .commonsScrollbar::-ms-scrollbar-thumb:hover {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
@@ -132,7 +141,8 @@
 
 .commonsScrollbar::-o-scrollbar-thumb:hover {
     /* background-color: #EAEAEA;*/
-    background-color: #1E96C8;
+    // background-color: #1E96C8;
+    background-color: transparent;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;