背景图，智慧教室修改

src/assets/css/home.scss

@@ -11,7 +11,7 @@
         margin-bottom: 20px;
         height: 70px;
         width: 100%;
-        top: 0;
+        top: 10px;
 
         img {
             width: 100%;

src/assets/css/right.scss

@@ -225,6 +225,8 @@
                         position: absolute;
                         top: 0;
                         left: 10px;
+                        width: 80px;
+                        background-color: rgba(0, 0, 0, 0.38);
                     }
                 }
             }

src/components/CircleProgress.vue

@@ -3,7 +3,7 @@
         <div class="number" v-if="textPosition == 'top'">
             <ul class="flex">
                 <ScrollNum v-for="(num, idx) of numArr" :key="idx" as="li" :i="num" :delay="idx + 1" />
-                <span> (人)</span>
+                <span>个</span>
             </ul>
         </div>
     </div>
@@ -11,8 +11,8 @@
         <svg viewBox="0 0 96 96" class="svg-circle-progress">
             <circle r="38" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4" class="svg-progress"
                 style="stroke-dasharray: 275, 279.602; stroke: rgba(255, 255, 255, 0.19)"></circle>
-            <circle r="38" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4" class="svg-progress"
+            <circle r="38" transform="rotate(180 48 48)" cx="48" cy="48" fill="none" stroke-miterlimit="20" stroke-width="4"
-                :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"></circle>
+                class="svg-progress" :style="`stroke-dasharray: ${progressValue}, 279.602;stroke:${color};`"></circle>
         </svg>
         <div class="mask">
             <slot></slot>

src/components/Login.vue

@@ -4,20 +4,11 @@
             <img :src="loginimg" alt="" style="">
             <span @click="login"> 登录</span>
         </div>
-        <div class="slogan">
-            <span class="slogan1">
-                元宇宙智慧校园
-            </span>
-            <span class="slogan2">
-                校园最好的导游
-            </span>
 
-        </div>
     </div>
 </template>
 
 <script >
-import * as echarts from "echarts";
 import { ref } from "vue";
 // import login from '/''
 export default ({
@@ -44,10 +35,12 @@ export default ({
     height: 100%;
     margin: 0;
     padding: 0;
+    overflow: hidden;
     // border: 1px solid red;
-    z-index: 888;
+
     // background-color: darkcyan;
     background: url('/public/img/bg.png');
+
     background-size: cover;
     z-index: 888;
 
@@ -55,11 +48,18 @@ export default ({
 }
 
 .loginbutton {
+    position: absolute;
+    bottom: 10%;
+    left: 46%;
     display: flex;
-
+    background: #6171FF;
     align-items: center;
-    position: absolute;
+    justify-content: center;
-    right: 0;
+
+    width: 160px;
+    border-radius: 20px;
+    padding: 10px;
+    cursor: pointer;
 
     img {
         width: 24px;
@@ -67,42 +67,13 @@ export default ({
     }
 
     span {
-        cursor: pointer;
         color: #FFF;
         font-family: PingFang SC;
-        font-size: 18px;
+        font-size: 20px;
         font-style: normal;
-        font-weight: 700;
+        font-weight: 400;
+        line-height: 24px;
         margin-left: 3px;
     }
 }
-
-.slogan {
-    width: 635px;
-    display: flex;
-    flex-direction: column;
-    // border: 1px solid aliceblue;
-    color: #fff;
-    // display: ;
-    font-family: MF LangQian (Noncommercial);
-
-    font-size: 64px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 126px;
-    position: absolute;
-    bottom: 246px;
-    left: 112px;
-
-    .slogan1 {
-        display: flex;
-
-    }
-
-    .slogan2 {
-        display: flex;
-
-        justify-content: flex-end
-    }
-}
 </style>

src/components/right.vue

@@ -58,18 +58,15 @@
 
                             <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
                                 <span>{{ item.title }}</span>
-                                <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item.src)">
+                                <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item)">
-                                <!-- <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)"> -->
                             </div>
                         </div>
 
-                        <p style="margin-top: 5px;">{{ item.activeMonitor.title }}</p>
+                        <p style="margin-top: 5px;">{{ item.activeMonitor.title1 }}</p>
                         <div class="interactclass">
-                            <div class="room" v-for="(item, index) in item.activeMonitor.array" :key="index">
+                            <div class="room" v-for="(item, index) in item.activeMonitor.array1" :key="index">
                                 <span>{{ item.title }}</span>
                                 <img :src="deviceImg + 'rb2.png'" alt="" @click="lookVideo(item.src)">
-
-                                <!-- <img :src="'src/assets/img/' + 'rb2' + '.png'" alt="" @click="lookVideo(item.src)"> -->
                             </div>
                         </div>
                     </el-carousel-item>
@@ -80,7 +77,7 @@
     </el-aside>
 
     <!-- 视频播放弹框 -->
-    <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
+    <el-dialog class="videoDialog" v-model="videoDialog" :title="dialogTitle" width="60%" align="center" top="4%">
         <videoPlay v-bind="videoData" />
         <!-- {{ videoData.src }} -->
     </el-dialog>
@@ -104,7 +101,7 @@ export default ({
             width: "100%", //播放器高度
             height: "100%", //播放器高度
             color: "red", //主题色
-            title: "互动教室", //视频名称
+            // title: "互动教室", //视频名称
             // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
             src: "",
             type: "m3u8",
@@ -131,12 +128,15 @@ export default ({
         });
         //视频播放弹框
         const videoDialog = ref(false)
+        const dialogTitle = ref("")
         // 播放视频
-        const lookVideo = function (src) {
+        const lookVideo = function (item) {
             videoDialog.value = true;
-            // console.log("点击了播放视频", 12312312, "播放路径", src)
+            dialogTitle.value = item.title
-            getVideoUrl({ "rtsp": src }).then((res) => {
+            console.log("点击了播放视频", 12312312, "播放路径", item)
+            getVideoUrl({ "rtsp": item.src }).then((res) => {
                 console.log("视频处理", res);
+
                 videoData.src = res.data.httpFlv
             })
             // videoData.src = src
@@ -190,7 +190,8 @@ export default ({
             d12img,
             d2img,
             d3img,
-            deviceImg
+            deviceImg,
+            dialogTitle
         }
     },
 })

src/request/api.js

@@ -16,4 +16,4 @@ export const getDevice = () => service.get("/wisdomClass/deviceStatistic")
 
 export const getClassDetail = (deviceCode) => service.get(`/wisdomClass/deviceDetail/${deviceCode}`)
 
-export const getVideoUrl = (data) => service.post(`/ioc-server/camera/getUrl`, data)
+export const getVideoUrl = (data) => service.post(`/camera/getUrl`, data)

src/request/http.js

@@ -44,7 +44,7 @@ service.interceptors.response.use(
                     console.error("网络错误，请稍后再试");
                     break;
                 case 404:
-                    console.eroor("请求路径出错");
+                    console.error("请求路径出错");
                     break;
 
                 default: