1

1

src/components/layout/layoutTop.tsx

@@ -52,6 +52,8 @@ export default defineComponent({
               value={8}
               max={99}
               class={styles.messageBadge}
+              {...{id:"home-3"}}
+
               color={'#FF1036'}>
               <NImage
                 class={[styles.messageIcon]}

src/custom-plugins/guide-page/home-guide.tsx

@@ -9,7 +9,8 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import { getImage } from './images';
-
+import {px2vw} from '@/utils/index'
+import { visibility } from 'html2canvas/dist/types/css/property-descriptors/visibility';
 export default defineComponent({
   name: 'coai-guide',
   emits: ['close'],
@@ -17,71 +18,117 @@ export default defineComponent({
     const data = reactive({
       box: {},
       show: false,
+      /**
+       *
+            width:  px2vw(840),
+            height:  px2vw(295)
+       */
       steps: [
         {
           ele: '',
           eleRect: {} as DOMRect,
-          img: getImage('coai-1.png'),
+          img: getImage('home1.png'),
           handStyle: {
             top: '0.91rem'
           },
           imgStyle: {
-            top: '1.5rem'
+            left: px2vw(295),
+            width:  px2vw(840),
+            height:  px2vw(295)
           },
           btnsStyle: {
-            top: '4.5rem',
-            left: '1rem'
+            top:  px2vw(215),
+            left:  px2vw(540),
+          },
+          boxStyle:{
+            border:'none',
+            width:'0px',
+            height:'0px',
+            backgroundColor: 'transparent'
+            // visibility: 'hidden'
+          },
+          eleRectPadding:{
+            left:7,
+            top:7,
+            width:14,
+            height:14
           }
         },
         {
           ele: '',
-          img: getImage('coai-2.png'),
-          handStyle: {
-            top: '-1.39rem',
-            left: '0.15rem',
-            transform: 'rotate(180deg)'
-          },
+          img: getImage('home2.png'),
+
           imgStyle: {
-            top: '-4rem'
+            top: '51Px',
+            left: '-18em',
+            width:  px2vw(401),
+            height:  px2vw(227)
           },
           btnsStyle: {
-            top: '-1.3rem',
-            left: '1.3rem'
+            top:  px2vw(200),
+            left: px2vw(-90),
+          },
+          boxStyle:{
+            borderRadius:'25px'
+          },
+          eleRectPadding:{
+            left:7,
+            top:7,
+            width:14,
+            height:14
           }
+
         },
         {
           ele: '',
-          img: getImage('coai-3.png'),
+          img: getImage('home3.png'),
           handStyle: {
             top: '-1.39rem',
             left: '0.17rem',
             transform: 'rotate(180deg)'
           },
           imgStyle: {
-            top: '-4rem'
+            top:px2vw(575),
+            width:  px2vw(454),
+            height:  px2vw(227),
+            left:px2vw(282)
           },
           btnsStyle: {
-            top: '-1.3rem',
-            left: '1.3rem'
+            top:px2vw(730),
+            left:px2vw(450)
+          },
+          eleRectPadding:{
+            left:44,
+            top:44,
+            width:88,
+            height:88
           }
         },
         {
           ele: '',
-          img: getImage('coai-4.png'),
+          img: getImage('home4.png'),
           handStyle: {
             top: '-1.39rem',
             left: '1.4rem',
             transform: 'rotate(180deg)'
           },
           imgStyle: {
-            top: '-4rem',
-            left: '-3.2rem'
+            top: '4rem',
+            left:  px2vw(-310),
+            width:  px2vw(477),
+            height:  px2vw(227),
           },
           btnsStyle: {
             top: '-0.85rem',
             left: '-3rem',
             'justify-content': 'center',
             padding: 0
+          },
+          eleRectPadding:{
+            left:7,
+            top:7,
+            width:14,
+            height:14
           }
         }
       ],
@@ -95,15 +142,20 @@ export default defineComponent({
       tipShow.value = true;
     }
     const getStepELe = () => {
-      console.log(`coai-${data.step}`);
-      const ele: HTMLElement = document.getElementById(`coai-${data.step}`)!;
+
+      const ele: HTMLElement = document.getElementById(`home-${data.step}`)!;
+      console.log(`coai-${data.step}`,data.steps[data.step].eleRectPadding);
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
+        const left = data.steps[data.step].eleRectPadding?.left || 0;
+        const top = data.steps[data.step].eleRectPadding?.top || 0;
+        const width = data.steps[data.step].eleRectPadding?.width || 0;
+        const height = data.steps[data.step].eleRectPadding?.height || 0
         data.box = {
-          left: eleRect.x + 'px',
-          top: eleRect.y + 'px',
-          width: eleRect.width + 'px',
-          height: eleRect.height + 'px'
+          left: eleRect.x - left+ 'px',
+          top: eleRect.y - top +'px',
+          width: eleRect.width + width+'px',
+          height: eleRect.height +height+ 'px'
         };
       }
     };
@@ -135,7 +187,9 @@ export default defineComponent({
     return () => (
       <>
         {tipShow.value ? (
-          <div v-model:show={tipShow.value} class={["n-modal-mask","n-modal-mask-guide"]}>
+          <div
+            v-model:show={tipShow.value}
+            class={['n-modal-mask', 'n-modal-mask-guide']}>
             <div class={styles.content} onClick={() => handleNext()}>
               <div
                 class={styles.backBtn}
@@ -147,8 +201,9 @@ export default defineComponent({
               </div>
               <div
                 class={styles.box}
-                style={data.box}
+                style={{...data.box,...data.steps[data.step].boxStyle}}
                 id={`modeType-${data.step}`}>
+
                 {data.steps.map((item: any, index) => (
                   <div
                     onClick={(e: Event) => e.stopPropagation()}
@@ -163,42 +218,34 @@ export default defineComponent({
                       style={item.imgStyle}
                       src={item.img}
                     />
-                    <img
+                    {/* <img
                       class={styles.iconHead}
                       style={item.handStyle}
                       src={getImage('indexDot.png')}
-                    />
+                    /> */}
                     <div class={styles.btns} style={item.btnsStyle}>
                       {data.step + 1 == data.steps.length ? (
                         <>
-                          <NButton
+                          <div
                             class={styles.btn}
-                            round
                             color="transparent"
                             style={{ 'border-color': '#fff' }}
-                            type="primary"
                             onClick={() => {
                               data.step = 0;
                               getStepELe();
                             }}>
                             再看一遍
-                          </NButton>
-                          <NButton
+                          </div>
+                          <div
                             class={[styles.btn, styles.endBtn]}
-                            round
-                            type="primary"
                             onClick={() => endGuide()}>
                             完成
-                          </NButton>
+                          </div>
                         </>
                       ) : (
-                        <NButton
-                          class={styles.btn}
-                          round
-                          type="primary"
-                          onClick={() => handleNext()}>
+                        <div class={styles.btn} onClick={() => handleNext()}>
                           下一步 ({data.step + 1}/{data.steps.length})
-                        </NButton>
+                        </div>
                       )}
                     </div>
                   </div>

src/custom-plugins/guide-page/index.module.less

@@ -1,3 +1,5 @@
+@img: './images';
+
 .guidePopup {
   z-index: 5000 !important;
   top: 0;
@@ -54,11 +56,13 @@
 
 .box {
   position: fixed;
-  box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 0px 5000px;
+  box-shadow: rgba(33, 33, 33, 0.7) 0px 0px 0px 5000px;
   transition: all 0.25s;
-  transform: scale(1.2);
+  // transform: scale(1.2);
   border-radius: 8px;
   z-index: 100;
+  position: relative;
+  border: 3px solid #55C9F7;
 }
 
 .item {
@@ -90,11 +94,21 @@
     padding: 0 12px;
 
     .btn {
-      width: 73px;
-      height: 23px;
-      line-height: 13px;
-      font-size: 9px;
+
+      background: url('./images/numbrBtn.png');
+      background-size: 144px 49px;
+      width: 144px;
+      height: 49px;
+      line-height: 49px;
+      font-size: 18px;
       padding: 0;
+      cursor: pointer;
+      text-align: center;
+      color: #fff;
+
+      &:hover {
+        opacity: .8;
+      }
     }
 
     .endBtn {
@@ -120,5 +134,6 @@
 :global {
   .n-modal-mask-guide {
     z-index: 2000;
+    background-color: transparent !important;
   }
 }

src/views/home/index.tsx

@@ -88,7 +88,8 @@ export default defineComponent({
         currentClass: null,
         name: ''
       } as any,
-      popSelectOptions: [] as any
+      popSelectOptions: [] as any,
+      showGuide:false
     });
     const teachList = ref({} as any);
 
@@ -126,7 +127,6 @@ export default defineComponent({
 
       getCourseSchedulePage();
     };
-
     const throttledFn = useThrottleFn(() => getLessonCourseware(), 500);
     const getLessonCourseware = async () => {
       forms.category = null;
@@ -296,6 +296,7 @@ export default defineComponent({
         };
       });
       getVersion();
+      forms.showGuide = true
     });
 
     const formsRef = ref();
@@ -350,14 +351,15 @@ export default defineComponent({
               </div>
               <div class={styles.userTips}>
                 <span>欢迎您使用酷乐秀课堂乐器数字化教学平台！</span>
-                <NButton color="#40A1FF" round class={styles.guide_btn}>
+                <NButton color="#40A1FF" round class={styles.guide_btn} {...{id:'home-1'}} >
                   功能引导
                   <i></i>
                 </NButton>
               </div>
             </div>
-            <div class={styles.centerInfo}>11111</div>
-            <div class={styles.applyInfo}>
+            <div class={styles.centerInfo} id='home-0'></div>
+            <div class={styles.applyInfo} id='home-2'>
+
               {userStore.getUserInfo.gender === 1 ? (
                 <img src={teacherMan} class={styles.teacherMan} />
               ) : (
@@ -671,8 +673,8 @@ export default defineComponent({
             onClose={() => (forms.useStatus = false)}
           />
         </NModal>
+            {forms.showGuide?<HomeGuide></HomeGuide>:null}
 
-        <HomeGuide></HomeGuide>
       </div>
     );
   }