文案提示

src/page-instrument/component/the-modal-tip/index.module.less

@@ -0,0 +1,66 @@
+:global {
+    .modalTip {
+        overflow: initial;
+
+        .van-dialog__header {
+            position: relative;
+            height: 75px;
+            display: flex;
+            align-items: flex-end;
+            background: url('./images/moveTopBg.png') no-repeat;
+            background-size: 100%;
+            font-size: 18px;
+            font-weight: 600;
+            color: #131415;
+            justify-content: center;
+            padding: 0;
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 50%;
+                transform: translateX(-50%);
+                top: -38px;
+                width: 120px;
+                height: 72px;
+                background: url('./images/ding.png') no-repeat;
+                background-size: 100%;
+            }
+        }
+
+        .van-dialog__message--has-title {
+            font-size: 14px;
+            color: #777777;
+            font-weight: 400;
+            padding: 19px 20px 26px 20px;
+        }
+
+        .van-dialog__footer {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            padding-bottom: 26px;
+
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
+
+        .van-dialog__confirm,
+        .van-dialog__cancel {
+            width: 193px;
+            height: 35px;
+            flex: initial;
+
+        }
+
+        .van-dialog__confirm {
+            background: linear-gradient(305deg, #40C8FF 0%, #3192FF 100%);
+            font-size: 14px;
+            font-weight: 400;
+            color: #FFFFFF;
+            border-radius: 18px;
+        }
+    }
+}

src/page-instrument/component/the-modal-tip/index.tsx

@@ -0,0 +1,31 @@
+import { defineComponent, reactive } from "vue";
+import styles from "./index.module.less";
+import moveTop from "./images/moveTopBg.png";
+import dingPng from "./images/ding.png";
+import closeAble from "./images/closeAble.png";
+
+export default defineComponent({
+	name: "TheModalTip",
+	setup(props, ctx) {
+		return () => (
+			<> </>
+			// <div class={styles.downMove}>
+			// 	<img src={dingPng} class={styles.dingPng} alt="" />
+			// 	<img src={moveTop} class={styles.downMoveBg} alt="" />
+			// 	<img
+			// 		src={closeAble}
+			// 		class={styles.closeAble}
+			// 		onClick={() => {
+			// 			data.showModalMask = false;
+			// 		}}
+			// 		alt=""
+			// 	/>
+			// 	<h2>温馨提示</h2>
+			// 	<p>检测到您尚未安装“音乐数字课堂”应用程序，为了更好的使用体验，是否立即下载？</p>
+			// 	<div class={styles.action}>
+			// 		<button class={styles.submitAppBtn}>立即下载</button>
+			// 	</div>
+			// </div>
+		);
+	},
+});

src/page-instrument/header-top/index.tsx

@@ -26,6 +26,7 @@ import TeacherTop from "../custom-plugins/guide-page/teacher-top";
 import StudentTop from "../custom-plugins/guide-page/student-top";
 import { HANDLE_WORK_ADD } from "../custom-plugins/work-index";
 import { browser } from "/src/utils";
+import "../component/the-modal-tip/index.module.less"
 
 /** 头部数据和方法 */
 export const headTopData = reactive({
@@ -41,6 +42,7 @@ export const headTopData = reactive({
 			// 如果是pc端, 评测模式暂不可用
 			if (state.platform === IPlatform.PC) {
 				showConfirmDialog({
+					className: 'modalTip',
 					title: "温馨提示",
 					message: "该功能暂未开发，敬请期待",
 					showCancelButton: false,