修改

src/views/coursewarePlay/component/courseware-tips/index.module.less

@@ -3,14 +3,30 @@
   width: 453px;
   height: 80vh;
   max-height: 302px;
-  background: url('../../image/tips-bg.png') top center no-repeat #fff;
-  background-size: contain;
+  // background: url('../../image/tips-bg.png') top center no-repeat #fff;
+  // background-size: contain;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  background-color: #fff;
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 46px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background: linear-gradient(to bottom, #DEFAFF, #ffffff);
+  }
 
   .iconClose {
+    position: relative;
+    z-index: 1;
     width: 18px;
     height: 19px;
     position: absolute;
@@ -22,6 +38,8 @@
   }
 
   .title {
+    position: relative;
+    z-index: 1;
     font-weight: 600;
     font-size: 16px;
     color: #131415;

src/views/coursewarePlay/component/tips/index.module.less

@@ -3,13 +3,28 @@
   padding: 20px !important;
   max-width: 310px !important;
   min-width: 295px !important;
-  background: url('./top-bg.png') no-repeat top center #fff !important;
-  background-size: contain !important;
+  // background: url('./top-bg.png') no-repeat top center #fff !important;
+  // background-size: contain !important;
   overflow: hidden;
   border-radius: 20px !important;
   overflow: hidden;
+  background-color: #fff;
+
+  &::before {
+    content: '';
+    width: 100%;
+    height: 49px;
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    background: linear-gradient(to bottom, #DEFAFF, #ffffff);
+  }
 
   .iconClose {
+    position: relative;
     width: 18px;
     height: 19px;
     position: absolute;

src/views/coursewarePlay/index.tsx

@@ -37,7 +37,7 @@ import OGuide from '@/components/o-guide';
 // import VideoItem from './component/video-item';
 import VideoPlay from './component/video-play';
 import deepClone from '@/helpers/deep-clone';
-import { useInterval, useIntervalFn } from '@vueuse/core';
+import { useInterval, useIntervalFn, useNetwork } from '@vueuse/core';
 import CoursewareType from './component/courseware-type';
 import CoursewareTips from './component/courseware-tips';
 import GlobalTools from '@/components/globalTools';
@@ -46,6 +46,7 @@ import { isHidden, isPlay, penShow, toolOpen, whitePenShow } from '@/components/
 export default defineComponent({
   name: 'CoursewarePlay',
   setup() {
+    const { isSupported, isOnline } = useNetwork()
     const pageVisibility = usePageVisibility();
     /** 页面显示和隐藏 */
     watch(
@@ -1216,6 +1217,10 @@ export default defineComponent({
                 nextTick(() => {
                   popupData.open = true
                 })
+              } else {
+                if(isSupported.value && !isOnline.value) {
+                  showToast('网络异常')
+                }
               }
             }} />
         </Popup>