update

user_web/src/assets/res/img/main/yuan_quan.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747807322490" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5857" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 64c247.424 0 448 200.576 448 448s-200.576 448-448 448S64 759.424 64 512 264.576 64 512 64z m0 256a192 192 0 1 0 0 384 192 192 0 0 0 0-384z" fill="#2C68FF" p-id="5858"></path></svg>

user_web/src/assets/res/img/user/user.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1744358424751" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3491" xmlns:xlink="http://www.w3.org/1999/xlink" width="200.1953125" height="200"><path d="M582.352706 568.885667c-3.173009-1.033003-23.208068-10.067029-10.688031-48.126141l-0.173001 0c32.628096-33.602098 57.568169-87.703257 57.568169-140.945413 0-81.88124-54.45416-124.788366-117.727345-124.788366-63.311185 0-117.455344 42.908126-117.455344 124.788366 0 53.458157 24.803073 107.775316 57.627169 141.295414 12.792037 33.563098-10.08603 46.021135-14.873044 47.77614-66.271194 23.96307-144.009422 67.648198-144.009422 110.771325l0 16.157047c0 58.755172 113.910334 72.111211 219.332643 72.111211 105.578309 0 218.047639-13.356039 218.047639-72.111211l0-16.157047C730.001139 635.229861 651.87491 591.897734 582.352706 568.885667L582.352706 568.885667zM582.352706 568.885667" fill="#1296db" p-id="3492"></path><path d="M511.308498 958.895809c-246.714723 0-447.417311-200.702588-447.417311-447.423311 0-246.714723 200.702588-447.417311 447.417311-447.417311 246.721723 0 447.423311 200.702588 447.423311 447.417311C958.731809 758.194221 758.029221 958.895809 511.308498 958.895809L511.308498 958.895809zM511.308498 128.259376c-211.307619 0-383.213123 171.905504-383.213123 383.213123 0 211.279619 171.905504 383.219123 383.213123 383.219123 211.279619 0 383.219123-171.939504 383.219123-383.219123C894.527621 300.165879 722.588117 128.259376 511.308498 128.259376L511.308498 128.259376zM511.308498 128.259376" fill="#1296db" p-id="3493"></path></svg>

user_web/src/components/user/UserRight.vue

@@ -0,0 +1,189 @@
+<script setup>
+
+import { computed, onMounted, onUnmounted, watch, ref } from "vue";
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+// 接收参数
+const props = defineProps({
+    // addStyle: {
+    //     type: String,
+    //     default : function() {
+    //         return "";
+    //     }
+    // },
+});
+
+let open = ref(false);
+
+let objTimeEvent = null;
+
+const objTimeEventClose = () => {
+    if (objTimeEvent != null && objTimeEvent != undefined) {
+        clearInterval(objTimeEvent);
+        objTimeEvent = null;
+    }
+}
+
+let windowsEvent = () => {
+    objTimeEventClose();
+    open.value = true;
+}
+
+let windowsExitEvent = () => {
+
+    objTimeEventClose();
+    objTimeEvent = setInterval(function() {
+        open.value = false;
+        objTimeEventClose();
+    }, 500);
+
+}
+
+/**
+ * 到首页
+ */
+const goIndexEvent = () => {
+    router.push('/Main');
+}
+
+
+/**
+ * 退出到登录页
+ */
+const exitEvent = () => {
+    router.push('/');
+}
+
+
+onMounted(function() {
+
+});
+
+</script>
+
+<template>
+    
+    <div class="UserRight" >
+
+        <div class="obj">
+            <img src="../../assets/res/img/user/sys.png" />
+        </div>
+        <div class="obj" v-on:click="goIndexEvent()" >
+            <img src="../../assets/res/img/user/host.png" />
+        </div>
+
+        <div class="user" v-on:mousemove="windowsEvent()" v-on:mouseout="windowsExitEvent()" >
+            <img class="imgUser" src="../../assets/res/img/user/user.svg"  />
+            高老师
+            <img class="imgDown" src="../../assets/res/img/user/down.png"  />
+        </div>
+
+        <div
+        v-on:click="exitEvent()"
+        v-show="open == true"
+        v-on:mousemove="windowsEvent()" v-on:mouseout="windowsExitEvent()"
+        class="list">
+            <div class="select">退出登陆</div>
+        </div>
+
+    </div>
+
+</template>
+
+<style scoped lang="less" >
+
+.UserRight * {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+}
+
+.UserRight {
+    position: fixed;
+    z-index: 999;
+    top: 1.9285rem;
+    right: 3.7857rem;
+    float: left;
+
+    .obj, .user {
+        float: left;
+    }
+
+    .obj {
+        width: 4.7857rem;
+        height: 4.7857rem;
+        margin: 0px 0.8928rem 0px 0.8928rem;
+        cursor:pointer;
+
+        // 垂直水平居中
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        img {
+            width: auto;
+            height: auto;
+            max-width: 100%;
+            max-height: 100%;
+        }
+
+    }
+
+    .user {
+        background-color: #ffffff;
+        height: 4.7857rem;
+        line-height: 4.7857rem;
+        margin: 0px 0.8928rem 0px 0.8928rem;
+        cursor:pointer;
+        border-radius: 1.0714rem;
+        font-size: 1.7142rem;
+        color: #000000;
+
+        .imgUser {
+            width: 3.1428rem;
+            margin: 0.7142rem;
+            float: left;
+            border-radius: 50%;
+        }
+
+        .imgDown {
+            width: 0.9285rem;
+            margin: 0rem 1.7142rem 0px 5.4285rem;
+            position: relative;
+            top: 2.2rem;
+        }
+
+    }
+
+    .list {
+
+        position: absolute;
+        width: 18.5rem;
+        border-radius: 1.0714rem;
+        background-color: #ffffff;
+        right: 0.75rem;
+        top: 5rem;
+
+        .select {
+            position: relative;
+            height: 4.64285rem;
+            line-height: 4.64285rem;
+            width: 80%;
+            left: 10%;
+            margin: 0.8rem 0px 0.8rem 0px;
+            color: #737373;
+            font-size: 1.71428rem;
+            cursor:pointer;
+        }
+
+    }
+
+
+}
+
+
+</style>

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

@@ -0,0 +1,508 @@
+<script setup>
+import { computed, onMounted, onUnmounted, watch, ref } from "vue";
+import { useRouter } from 'vue-router';
+const router = useRouter();
+import UserRight from "@/components/user/UserRight.vue";
+
+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,
+    },
+]);
+
+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,
+    },
+
+]);
+
+/**
+ * 切换菜单
+ * json
+ * index
+ */
+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');
+            break;
+
+        case "CCTV检测实训":
+            window.open('https://www.3dyzt.com/eduTrain/web-user/index.html', '_blank');
+            break;
+
+        case "QV检测实训":
+            window.open('#/Qv', '_blank');
+            break;
+
+    }
+    
+}
+
+</script>
+
+<template>
+    <div class="main commonsScrollbar">
+        
+        <UserRight></UserRight>
+        <img class="logo" src="../assets/res/img/main/logo.png" />
+        <img class="title" src="../assets/res/img/main/title.svg" />
+
+        <div class="content">
+
+            <div class="labelLookMain">
+
+                <div class="lookMain">
+                    
+                    <div class="look">
+
+                        <div class="lb" >
+
+                            <div class="symbol">
+                                <img class="imgYuanQuan" src="../assets/res/img/main/yuan_quan.svg" />
+                            </div>
+                            我的学习成果
+
+                        </div>
+
+                        <div class="lookContent">
+
+                            <div class="dbList dbListOne" v-for="(item, index) of studyList" :key="index" >
+
+                                <div class="topLb">
+
+                                    <div class="symbol">
+                                        <img class="imgYuanQuan" :src="item.topImg" />
+                                    </div>
+                                    {{ item.name }}
+
+                                </div>
+
+                                <div class="bottomDb">
+                                    <img class="bg" :src="item.bgImg" />
+                                    <div class="time">
+                                        <span class="num" :style="item.style_1" >{{ item.stydyTime }}</span>
+                                        <span class="hour" :style="item.style_2" >小时</span>
+                                    </div>
+                                    <div class="lv">
+                                        <span class="txt" :style="item.style_3" >{{ item.num }}/</span>
+                                        <span class="num" :style="item.style_4" >{{ item.numMax }}</span>
+                                        <span class="txt" :style="item.style_3" >名</span>
+                                    </div>
+
+                                </div>
+                                
+                            </div>
+                            
+
+                        </div>
+
+                    </div>
+
+                    <div class="look2">
+
+                        <img class="haiBao" src="../assets/res/img/main/hai_bao.png" />
+
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="menu">
+
+                <div class="menuMain">
+
+                    <div v-on:click="menuListEvent(item, index)"
+                    class="menuList" v-for="(item, index) of menuList" :key="index" >
+
+                        <img class="menuListLogo" :src="item.logo" />
+
+                        <div class="txt">
+                            {{ item.name }}
+                        </div>
+                        
+                    </div>
+
+                </div>
+
+            </div>
+
+            <div class="bottomTxt">
+                海迈科技技术支持
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<style lang="less" >
+* {
+    box-sizing:border-box;
+    -moz-box-sizing:border-box; /* Firefox */
+    -webkit-box-sizing:border-box; /* Safari */
+}
+</style>
+
+<style lang="less" scoped>
+
+@myScale: 0.9;
+
+.main * {
+    -moz-user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    -khtml-user-select: none;
+    user-select: none;
+}
+
+.main {
+
+    position: fixed;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+
+    background-color: #F6F7F9;
+
+    .logo {
+        position: absolute;
+        width: 27.5714rem * @myScale;
+        top: 3.6428rem * @myScale;
+        left: 7.5%;
+    }
+
+    .title {
+        position: absolute;
+        width: 30.4285rem * @myScale;
+        top: 4.7857rem * @myScale;
+        left: 29%;
+    }
+
+    .content {
+
+        position: absolute;
+        width: 100%;
+        left: 0px;
+        top: 11.4342rem * @myScale;
+
+        .labelLookMain {
+
+            position: relative;
+            width: 81%;
+            height: 24.2857rem * @myScale;
+            margin: 1.7857rem * @myScale auto 1.7857rem * @myScale auto;
+
+            /* 水平垂直居中,支持文字自动换行 */
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .lookMain {
+
+                position: relative;
+                height: 24.2857rem * @myScale;
+                width: 100% * @myScale;
+
+                .look, .look2 {
+                    position: relative;
+                    height: 100%;
+                    // display: inline-block;
+                    border-radius: 1.1428rem * @myScale;
+                    background-color: #FFFFFF;
+                    float: left;
+                }
+
+                .look {
+                    width: 54.6428rem * @myScale;
+
+                    .lb {
+
+                        width: 100%;
+                        height: 4.0714rem * @myScale;
+                        line-height: 4.0714rem * @myScale;
+                        margin: 0.9285rem * @myScale 0px 0px 0px;
+                        padding: 0px 0px 0px 0.9285rem * @myScale;
+
+                        .symbol {
+
+                            float: left;
+                            height: 100%;
+                            width: 2.2142rem * @myScale;
+
+                            /* 水平垂直居中,支持文字自动换行 */
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: center;
+                            align-items: center;
+
+                            .imgYuanQuan {
+                                width: 0.9285rem * @myScale;
+                            }
+
+                        }
+
+                        color: #444444;
+                        font-size: 1.5714rem * @myScale;
+
+
+                    }
+
+                    .lookContent {
+
+                        width: 100%;
+                        float: left;
+                        margin: 2rem * @myScale 0px 0px 0px;
+
+                        .dbList {
+                            
+                            position: relative;
+                            float: left;
+                            // width: 14.9285rem * @myScale;
+                            width: 14.7rem * @myScale;
+                            height: 13.3571rem * @myScale;
+                            margin: 0px 1.1428rem * @myScale 0px 1.1428rem * @myScale;
+
+                            .topLb {
+
+                                width: 100%;
+                                height: 3.5rem * @myScale;
+                                line-height: 3.5rem * @myScale;
+                                color: #5C5C5C;
+                                font-size: 1.2857rem * @myScale;
+                                font-weight: 500;
+
+                                .symbol {
+
+                                    float: left;
+                                    height: 100%;
+                                    width: 1.3rem * @myScale;
+                                    // width: 0.9285rem * @myScale;
+
+                                    /* 水平垂直居中,支持文字自动换行 */
+                                    display: flex;
+                                    flex-direction: column;
+                                    justify-content: center;
+                                    // align-items: center;
+
+                                    .imgYuanQuan {
+                                        width: 0.6428rem * @myScale;
+                                    }
+
+                                }
+                                
+                            }
+
+                            .bottomDb {
+
+                                position: absolute;
+                                width: 100%;
+                                height: 8.1428rem * @myScale;
+                                left: 0px;
+                                bottom: 0px;
+
+                                .bg {
+                                    position: absolute;
+                                    z-index: 0;
+                                    width: 100%;
+                                    height: 100%;
+                                }
+
+                                .time, .lv {
+                                    width: 100%;
+                                    text-align: center;
+                                    position: absolute;
+                                    left: 0px;
+                                }
+
+                                .time {
+                                    bottom: 3.2857rem * @myScale;
+
+                                    .num {
+                                        color: #5B6EDD;
+                                        font-size: 3.4285rem * @myScale;
+                                        font-weight: bold;
+                                    }
+
+                                    .hour {
+
+                                        font-weight: 500;
+                                        color: #5B6EDD;
+                                        font-size: 1.2857rem * @myScale;
+                                        margin: 0px 0px 0px 0.5rem * @myScale;
+
+                                    }
+                                }
+
+                                .lv {
+                                    bottom: 0.6428rem * @myScale;
+
+                                    .txt {
+                                        color: #5B6EDD;
+                                        font-size: 0.9285rem * @myScale;
+                                        font-weight: 500;
+                                    }
+
+                                    .num {
+                                        color: #a3aeec;
+                                        font-size: 0.9285rem * @myScale;
+                                        font-weight: 500;
+                                    }
+                                }
+
+                            }
+
+                        }
+
+                        .dbListOne {
+                            margin: 0px 1.1428rem * @myScale 0px 2.2857rem * @myScale;
+                        }
+
+                    }
+
+                }
+
+                .look2 {
+                    width: 54.0714rem * @myScale;
+                    margin: 0px 0px 0px 1.4285rem * @myScale;
+
+                    .haiBao {
+                        width: 100%;
+                        height: 100%;
+                    }
+
+                }
+
+            }
+            
+        }
+
+        .menu {
+
+            position: relative;
+            width: 100%;
+            height: 26.3571rem * @myScale;
+            margin: 1.7857rem * @myScale 0px 1.7857rem * @myScale 0px;
+
+            /* 水平垂直居中,支持文字自动换行 */
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .menuMain {
+
+                display: inline-flex;
+                width: auto;
+                height: 100%;
+
+                .menuList {
+
+                    position: relative;
+                    width: 19.7142rem * @myScale;
+                    height: 26.3571rem * @myScale;
+                    display: inline-flex;
+                    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;
+                    border-radius: 1.2142rem * @myScale;
+                    // 手势
+                    cursor:pointer;
+
+                    .txt {
+
+                        width: 100%;
+                        position: absolute;
+                        font-size: 1.5714rem * @myScale;
+                        text-align: center;
+                        color: #333333;
+                        font-weight: 500;
+                        bottom: 2rem * @myScale;
+
+                    }
+
+                    .menuListLogo {
+                        position: absolute;
+                        width: 85%;
+                        left: 7.5%;
+                        top: 1.285rem * @myScale;
+                    }
+                    
+                }
+
+            }
+
+        }
+
+        .bottomTxt {
+            position: relative;
+            margin: 1.7857rem * @myScale 0px 1.7857rem * @myScale 0px;
+            width: 100%;
+            text-align: center;
+            font-size: 1.5714rem * @myScale;
+            color: #BBBBBB;
+            font-weight: 400;
+        }
+
+    }
+
+}
+</style>