修改右侧弹窗

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'">
-          <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>
-          <!-- <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p> -->
-          <p>
-            <select name="" id="" v-model="formInfo.newProjectId" disabled>
-              <option :value="item.value" v-for="(item, index) in projectList" :key="index">{{ item.label }}</option>
-            </select>
-            <span class="icon el-icon-arrow-down"></span>
-            <!-- <el-select v-model="formInfo.newProjectId" placeholder="请选择" size="small">
+    > -->
+    <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>
+        <!-- <p><el-input v-model="projectName" size="small" :readonly="true"></el-input></p> -->
+        <p>
+          <select name="" id="" v-model="formInfo.newProjectId" disabled>
+            <option :value="item.value" v-for="(item, index) in projectList" :key="index">{{ item.label }}</option>
+          </select>
+          <span class="icon el-icon-arrow-down"></span>
+          <!-- <el-select v-model="formInfo.newProjectId" placeholder="请选择" size="small">
               <el-option
                 v-for="item in projectList"
                 :key="item.value"
@@ -53,21 +46,23 @@
                 :value="item.value">
               </el-option>
             </el-select> -->
-          </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
-            >
-          </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>
+        </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>
+        </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>
-    </transition>
+    </div>
+    <!-- </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 {