切换企业修改

src/views/index.vue

@@ -159,21 +159,37 @@
       <div class="switch-corp-pane">
         <div class="corp-block">
           <div class="corp-desc">我创建的企业/团队</div>
-          <el-button size="small" type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('创建')">
-            <span>创建企业/团队</span>
-          </el-button>
-          <!-- <div class="corp-wrapper">
-            <div class="corp-item is-owner">
-              <div class="corp-name" title="sunny">sunny</div>
+          <div class="corp-wrapper" v-for="(item, index) in myTeamList" :key="index" @mouseover="showMyTeam = index" @mouseleave="showMyTeam = null">
+            <div class="corp-item">
+              <div class="corp-name" :class="{'is-owner': item.isOwner}" :title="item.name">{{ item.name }}</div>
               <div class="corp-op">
-                <span class="op-current">当前所在企业/团队</span>
+                <span class="op-current" v-show="item.isOwner">当前所在企业/团队</span>
+                <el-button v-show="!item.isOwner && showMyTeam == index" type="text" class="style-text" @click.stop="changeTeam(item)">
+                  <span>进入企业/团队<i class="el-icon-right"></i></span>
+                </el-button>
               </div>
             </div>
-          </div> -->
+          </div>
+          <el-button type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('创建')">
+            <span>创建企业/团队</span>
+          </el-button>
+          
         </div>
-        <div class="corp-block">
+        <div class="corp-block" style="margin-top: 10px;">
           <div class="corp-desc">我加入的企业/团队</div>
-          <el-button size="small" type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('加入')">
+         
+          <div class="corp-wrapper" v-for="(item, index) in joinTeamList" :key="index" @mouseover="showJoinTeam = index" @mouseleave="showJoinTeam = null">
+            <div class="corp-item">
+              <div class="corp-name" :title="item.name">{{ item.name }}</div>
+              <div class="corp-op">
+                <span class="op-current" v-show="item.isOwner">当前所在企业/团队</span>
+                <el-button v-show="!item.isOwner && showJoinTeam == index" type="text" class="style-text" @click.stop="changeTeam(item)">
+                  <span>进入企业/团队<i class="el-icon-right"></i></span>
+                </el-button>
+              </div>
+            </div>
+          </div>
+          <el-button type="primary" plain class="corp-switch-btn" @click="joinOrCreateCorp('加入')">
             <span>加入企业/团队</span>
           </el-button>
         </div>
@@ -237,6 +253,32 @@ export default {
   },
   data() {
     return {
+      showMyTeam: null,
+      myTeamList: [
+        {
+          id: 1,
+          name: 'sunny',
+          isOwner: true,
+        },
+        {
+          id: 2,
+          name: 'jacker',
+          isOwner: false,
+        },
+      ],
+      showJoinTeam: null,
+      joinTeamList: [
+        {
+          id: 3,
+          name: 'DP开发团队',
+          isOwner: false,
+        },
+        {
+          id: 4,
+          name: '开发团队',
+          isOwner: false,
+        },
+      ],
       hasCorp:true,
       corpTitle: '',
       form: {
@@ -295,6 +337,10 @@ export default {
     this.getList();
   },
   methods: {
+    //切换企业
+    changeTeam(val){
+      console.log(val);
+    },
      // 菜单选择事件
      handleSelect(item) {
       let key = item;
@@ -526,18 +572,18 @@ export default {
       margin-bottom: 12px;
       max-height: 200px;
       overflow: auto;
-
+      
       .corp-item {
         align-items: center;
         display: flex;
         height: 50px;
         justify-content: space-between;
         line-height: 50px;
-
-        .corp-name {
+        .is-owner{
           font-size: 18px;
           font-weight: 700;
-
+        }
+        .corp-name {
           flex: auto;
           max-width: 350px;
           overflow: hidden;
@@ -548,7 +594,9 @@ export default {
 
         .corp-op {
           flex: none;
-
+          .style-text{
+            padding: 0 16px;
+          }
           .op-current {
             color: #838892;
             padding-right: 20px;