修改右侧弹窗

components/rightAside.vue

 <template>
   <div class="right_bar">
-    <ul class="tab_btns">
+    <ul class="tab_btns" v-if="isShowBtn === true">
       <a href="/my">
-        <li
-          class="service"
-        >
+        <li class="service">
           <p>{{ $t('aside.apply') }}</p>
         </li>
       </a>
-      <li
-        :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }"
-        @mouseenter="handleMsOver('enroll')"
-        @mouseleave="handleMsOut"
-      >
+      <li :class="{ enroll: true, active: tabBtnActive && tabBtnTarget === 'enroll' }" @click="handleMsOver">
         <p>{{ $t('aside.apply2') }}</p>
       </li>
-      <li
+      <!-- <li
         :class="{ wx: true, active: tabBtnActive && tabBtnTarget === 'wx' }"
         @mouseenter="handleMsOver('wx')"
         @mouseleave="handleMsOut"
       >
         <p>{{ $t('aside.follow') }}</p>
-      </li>
+      </li> -->
     </ul>
-    <transition
+    <!-- <transition
       name="custom-classes-transition"
       enter-active-class="animated tada"
       leave-active-class="animated bounceOutRight"
-    >
-      <div
-        id="show-enroll"
-        v-show="tabBtnActive"
-        class="tab_cont"
-        @mouseenter="handleMsOver('')"
-        @mouseleave="handleMsOut"
-      >
-        <div class="enroll_cont" id="show-enroll-content" v-show="tabBtnTarget === 'enroll'">
+    > -->
+    <div id="show-enroll" v-show="tabBtnActive" class="tab_cont">
+      <div class="enroll_cont" id="show-enroll-content">
+        <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>{{ $t('aside.apply') }}</h5>
         <p><el-input v-model="formInfo.name" :placeholder="$t('aside.name')" size="small"></el-input></p>
         <p><el-input v-model="formInfo.phone" :placeholder="$t('aside.phone')" size="small"></el-input></p>
@@ -56,18 +49,20 @@
         </p>
         <p class="sendcode">
           <el-input v-model="sendCode" :placeholder="$t('aside.code')" size="small"></el-input
-            ><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode"
-              >{{ $t('aside.codeBtn') }}</el-button
-            >
+          ><el-button class="btn" :disabled="isBtnDisabled" id="checkedCode" @click="getSendCode">{{
+            $t('aside.codeBtn')
+          }}</el-button>
+        </p>
+        <p>
+          <el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button>
         </p>
-          <p><el-button style="width: 100%" @click="submitEnroll">{{ $t('aside.formBtn') }}</el-button></p>
       </div>
       <div class="wx_cont" v-show="tabBtnTarget === 'wx'">
         <h5>{{ $t('aside.follow') }}</h5>
         <img src="https://zws-imgs-pub.ezijing.com/static/public/d2d9945d598e81c3b58aff5ce927a78a.jpg" />
       </div>
     </div>
-    </transition>
+    <!-- </transition> -->
   </div>
 </template>
 <script>
@@ -76,7 +71,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: this.$t('aside.project4'),
       sendCode: '',
@@ -97,14 +93,17 @@ export default {
     }
   },
   methods: {
-    handleMsOver(type) {
-      this.tabBtnActive = true
-      if (type !== '') {
-        this.tabBtnTarget = type
-      }
+    handleClose() {
+      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
@@ -264,21 +263,21 @@ export default {
     li.enroll.active {
       background-image: url(https://webapp-pub.ezijing.com/project/kelley/kefu11.png);
     }
-    li.service{
+    li.service {
       background-image: url(https://zws-imgs-pub.ezijing.com/static/public/d434fa0ffd77892273e63e6d694cff0a.png);
     }
-    li.service{
+    li.service {
       border-bottom: 1px solid #b8bcbf;
       cursor: pointer;
-      &:hover{
+      &:hover {
         background-color: #af1b40;
-        p{
+        p {
           color: #fff;
         }
         background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
       }
     }
-    li.service.acitve{
+    li.service.acitve {
       background-image: url(https://zws-imgs-pub.ezijing.com/static/public/4cbef518113d24b392be80148e921abd.png);
     }
     li.wx {