vant 弹窗优化

src/components/HelloWorld.vue

@@ -1,38 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <div class="card">
-    <button type="button" @click="count++">count is {{ count }}</button>
-    <p>
-      Edit
-      <code>components/HelloWorld.vue</code> to test HMR
-    </p>
-  </div>
-
-  <p>
-    Check out
-    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
-      >create-vue</a
-    >, the official Vue + Vite starter
-  </p>
-  <p>
-    Install
-    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
-    in your IDE for a better DX
-  </p>
-  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
-</template>
-
-<style scoped>
-.read-the-docs {
-  color: #888;
-}
-</style>

src/page-gym/detail/index.module.less

@@ -27,7 +27,7 @@
     .container {
         position: relative;
         height: calc(100vh - 18px - var(--header-height));
-        margin: 0 18px;
+        margin: 0 30px;
         background: var(--container-background);
         border-radius: 10px;
         overflow: hidden;

src/page-gym/detail/index.tsx

@@ -19,6 +19,7 @@ import MeasureSpeed from "/src/view/plugins/measure-speed";
 import { mappingVoicePart, subjectFingering } from "/src/view/fingering/fingering-config";
 import Fingering from "/src/view/fingering";
 import store from "store";
+import HelperModel from "../helper-model";
 
 //特殊教材分类id
 const classIds = [1, 30, 97]; // [大雅金唐, 竖笛教程, 声部训练]
@@ -238,6 +239,7 @@ export default defineComponent({
 				<div class={styles.headHeight}>
 					<Transition name="van-slide-down">{state.musicRendered && <HeaderTop />}</Transition>
 				</div>
+
 				<div
 					style={{ ...fingerConfig.value.container }}
 					class={[styles.container, state.setting.eyeProtection && "eyeProtection", !state.setting.displayCursor && "hideCursor"]}
@@ -269,6 +271,8 @@ export default defineComponent({
 						</>
 					)}
 				</div>
+				{/* 投屏 and 帮助 */}
+				<HelperModel />
 			</div>
 		);
 	},

src/page-gym/helper-model/index.module.less

@@ -0,0 +1,16 @@
+.helperModel{
+    position: fixed;
+    right: 0;
+    top: 50%;
+    width: 26px;
+    height: 50px;
+    margin-top: -25px;
+    & > img {
+        display: block;
+        width: 100%;
+        height: 100%;
+        &:active{
+            opacity: .8;
+        }
+    }
+}

src/page-gym/helper-model/index.tsx

@@ -0,0 +1,43 @@
+import { defineComponent, reactive } from "vue";
+import styles from "./index.module.less";
+import iconRight from "./icons/icon-right.png";
+import { Popup } from "vant";
+import ScreenModel from "./screen-model";
+import Recommendation from "./recommendation";
+
+export default defineComponent({
+	name: "helper-model",
+	setup() {
+		const helperData = reactive({
+			show: false,
+            recommendationShow: false, // 建议
+		});
+		return () => (
+			<>
+				<div class={styles.helperModel} onClick={() => (helperData.recommendationShow = true)}>
+					<img src={iconRight} />
+				</div>
+				<Popup
+                    class="van-custom"
+					v-model:show={helperData.show}
+					onClose={() => {
+						helperData.show = false;
+					}}
+                    position="right"
+				>
+					<ScreenModel />
+				</Popup>
+				<Popup
+					v-model:show={helperData.recommendationShow}
+					onClose={() => {
+                        helperData.recommendationShow = false;
+					}}
+                    class="van-custom van-scale"
+                    transition="van-scale"
+				>
+					<Recommendation />
+				</Popup>
+			</>
+		);
+	},
+});

src/page-gym/helper-model/recommendation/index.module.less

@@ -0,0 +1,6 @@
+.container{
+    width: 46vw;
+    height: 80vh;
+    background: #fff;
+    border-radius: 8px;
+}

src/page-gym/helper-model/recommendation/index.tsx

@@ -0,0 +1,11 @@
+import { defineComponent } from "vue";
+import styles from './index.module.less'
+
+export default defineComponent({
+    name: 'recommendation',
+    setup(props, ctx) {
+        return () => <div class={styles.container}>
+            
+        </div>
+    },
+})

src/page-gym/helper-model/screen-model/index.module.less

@@ -0,0 +1,7 @@
+.container{
+    width: 40vw;
+    height: 100vh;
+    max-width: 295px;
+    background: #fff;
+    border-radius: 16px 0 0 16px;
+}

src/page-gym/helper-model/screen-model/index.tsx

@@ -0,0 +1,9 @@
+import { defineComponent } from "vue";
+import styles from './index.module.less'
+
+export default defineComponent({
+    name: 'screenModel',
+    setup(props, ctx) {
+        return () => <div class={styles.container}>123</div>
+    },
+})

src/style.css

@@ -33,4 +33,28 @@
 .pop-center-enter-active,
 .pop-center-leave-active {
   transition: all 0.25s;
+}
+
+/* vant 弹窗优化 */
+.van-overlay{
+  transition: all 0.25s;
+}
+.van-custom{
+  transition: all 0.25s;
+  background: transparent;
+}
+.van-custom.van-scale{
+  transform-origin: center -25%;
+}
+
+/* 缩放动画 */
+.van-scale-enter-from,
+.van-scale-leave-to {
+  opacity  : 0;
+  transform: scale(0.3);
+}
+
+.van-scale-enter-active,
+.van-scale-leave-active {
+  transition: all 0.25s;
 }