修改右侧弹窗效果

src/components/layout/components/rightAside.vue

 <template>
   <div class="right_bar">
-    <ul class="tab_btns">
+    <ul class="tab_btns" id="right_bar">
       <li
         :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
         @click="handleMsOver"
@@ -21,7 +21,7 @@
       enter-active-class="animated tada"
       leave-active-class="animated bounceOutRight"
     > -->
-    <div v-show="tabBtnActive" class="tab_cont">
+    <div v-show="tabBtnActive" class="tab_cont" id="tab_cont">
       <div class="enroll_cont">
         <i
           class="el-icon-circle-close"
@@ -51,11 +51,13 @@
 import cAction from '@action'
 import { sendCode, checkCode } from '@/api/my'
 const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
+
 export default {
   data() {
     return {
+      top: 0,
       tabBtnActive: true,
-      isShowBtn: false,
+      isShowBtn: true,
       tabBtnTarget: '',
       projectName: '教育学硕士',
       sendCode: '',
@@ -67,19 +69,29 @@ export default {
       }
     }
   },
+  mounted() {
+    window.addEventListener('scroll', this.scrollHandle)
+  },
+  watch: {
+    top(v) {
+      if (v > 500) {
+        this.tabBtnActive = false
+      }
+      if (v === 0) {
+        this.isOver = true
+      }
+    }
+  },
   methods: {
+    scrollHandle(e) {
+      this.top = e.srcElement.scrollingElement.scrollTop // 获取页面滚动高度
+    },
     handleClose() {
-      console.log('111')
-      this.tabBtnActive = !this.tabBtnActive
+      this.tabBtnActive = false
       this.isShowBtn = true
     },
     handleMsOver() {
-      this.tabBtnActive = !this.tabBtnActive
-      this.isShowBtn = false
-
-      // if (type !== '') {
-      //   this.tabBtnTarget = type
-      // }
+      this.tabBtnActive = true
     },
 
     submitEnroll() {
@@ -258,7 +270,6 @@ export default {
   .tab_cont {
     position: absolute;
     left: -238px;
-    // left: -310px;
     top: -120px;
     width: 310px;
     height: 374px;