修改右侧弹框

src/components/layout/components/rightAside.vue

@@ -3,42 +3,47 @@
     <ul class="tab_btns">
       <li
         :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
-        @mouseover="handleMsOver('enroll')"
-        @mouseout="handleMsOut"
+        @click="handleMsOver"
+        v-if="isShowBtn === true"
       >
         <p>报名咨询</p>
       </li>
-      <li
+      <!-- <li
         :class="{ wx: true, active: tabBtnActive && tabBtnTarget === 'wx' }"
         @mouseover="handleMsOver('wx')"
         @mouseout="handleMsOut"
       >
         <p>微信公众号</p>
-      </li>
+      </li> -->
     </ul>
-    <transition
+    <!-- <transition
       name="custom-classes-transition"
       enter-active-class="animated tada"
       leave-active-class="animated bounceOutRight"
-    >
-      <div v-show="tabBtnActive" class="tab_cont" @mouseover="handleMsOver('')" @mouseout="handleMsOut">
-        <div class="enroll_cont" v-show="tabBtnTarget === 'enroll'">
-          <h5>报名咨询</h5>
-          <p><el-input v-model="formInfo.name" placeholder="请输入您的姓名" size="small"></el-input></p>
-          <p><el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input></p>
-          <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p>
-          <p class="sendcode">
-            <el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input
-            ><el-button :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">获取验证码</el-button>
-          </p>
-          <p><el-button style="width: 100%" @click="submitEnroll">立即报名</el-button></p>
-        </div>
-        <div class="wx_cont" v-show="tabBtnTarget === 'wx'">
-          <h5>扫描关注微信公众号</h5>
-          <img src="~@/assets/images/wx_code.jpg" />
-        </div>
+    > -->
+    <div v-show="tabBtnActive" class="tab_cont">
+      <div class="enroll_cont">
+        <i
+          class="el-icon-circle-close"
+          style="margin-top:10px;float:right;color:#ffffff;font-size:24px;cursor:pointer;z-index:10000; position:relative"
+          @click="handleClose"
+        ></i>
+        <h5>报名咨询</h5>
+        <p><el-input v-model="formInfo.name" placeholder="请输入您的姓名" size="small"></el-input></p>
+        <p><el-input v-model="formInfo.phone" placeholder="请输入您的电话" size="small"></el-input></p>
+        <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p>
+        <p class="sendcode">
+          <el-input v-model="sendCode" placeholder="请输入验证码" size="small"></el-input
+          ><el-button :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">获取验证码</el-button>
+        </p>
+        <p><el-button style="width: 100%" @click="submitEnroll">立即报名</el-button></p>
       </div>
-    </transition>
+      <div class="wx_cont" v-show="tabBtnTarget === 'wx'">
+        <h5>扫描关注微信公众号</h5>
+        <img src="~@/assets/images/wx_code.jpg" />
+      </div>
+    </div>
+    <!-- </transition> -->
   </div>
 </template>
 <script>
@@ -48,7 +53,8 @@ const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35
 export default {
   data() {
     return {
-      tabBtnActive: false,
+      tabBtnActive: true,
+      isShowBtn: false,
       tabBtnTarget: '',
       projectName: '应用心理学硕士',
       sendCode: '',
@@ -61,14 +67,18 @@ export default {
     }
   },
   methods: {
-    handleMsOver(type) {
-      this.tabBtnActive = true
-      if (type !== '') {
-        this.tabBtnTarget = type
-      }
+    handleClose() {
+      console.log('111')
+      this.tabBtnActive = !this.tabBtnActive
+      this.isShowBtn = true
     },
-    handleMsOut(type) {
-      this.tabBtnActive = false
+    handleMsOver() {
+      this.tabBtnActive = !this.tabBtnActive
+      this.isShowBtn = false
+
+      // if (type !== '') {
+      //   this.tabBtnTarget = type
+      // }
     },
     submitEnroll() {
       let flag = true
@@ -190,7 +200,7 @@ export default {
   transform: translateY(-50%);
   .tab_btns {
     width: 72px;
-    height: 136px;
+    // height: 136px;
     font-size: 12px;
     border-radius: 4px;
     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
@@ -245,7 +255,7 @@ export default {
   }
   .tab_cont {
     position: absolute;
-    left: -310px;
+    left: -238px;
     top: -120px;
     width: 310px;
     height: 374px;