处理弹窗内容超出问题

components/login/Login.vue

@@ -95,9 +95,13 @@
                    size="tiny">
           <div class="x-floating x-list" v-show="dialogVisible">
             <div class="x-list-header">您要登录的公司是：</div>
-            <ul class="list-unstyled" v-for="space in this.enterprise">
-              <li v-text="space.name" @click="chooseOneEnterprise(false, space.id)">华商龙科技有限公司</li>
-            </ul>
+            <div class="x-list-content">
+              <ul class="list-unstyled" >
+                <template v-for="space in this.enterprise">
+                  <li v-text="space.name" @click="chooseOneEnterprise(false, space.id)">华商龙科技有限公司</li>
+                </template>
+              </ul>
+            </div>
           </div>
         </el-dialog>
       </div>
@@ -292,6 +296,7 @@
           }
           this.$http.post('/sso/login', param, config)
             .then(response => {
+              this.isShowLoading = false
               if (response.data.success) {
                 if (response.data.content.spaces) {
 //                   弹框让用户选择企业
@@ -310,6 +315,7 @@
                       console.log(data)
                     })
                   }
+                  this.isShowLoading = true
                   setTimeout(function () {
                     window.location.href = response.data.content.returnUrl || 'http://www.ubtob.com'
                   }, 3000)
@@ -352,7 +358,7 @@
     }
   }
 </script>
-<style lang="scss" scoped>
+<style lang="scss" scoped type="text/scss">
   @import '~assets/scss/mixins';
   @import '~assets/scss/variables';
   .x-navbar{
@@ -418,34 +424,39 @@
       transition: all .5s;
     }
     .x-list {
-      width: 306px;
-      margin-left: -153px;
+      width: 60%;
+      height:420px;
+      margin-left: -30%;
       background: #fff;
       border-top: 1px solid #e7e7e7;
       cursor: pointer;
       .x-list-header {
         padding: 10px 20px;
         background: #e0e0e0;
-        width: 306px;
         height: 42px;
         line-height: 21px;
         font-size: 14px;
         font-weight: 700;
         color: #505050;
       }
-      ul{
-        margin-bottom: 0;
-        li{
-          padding: 10px 20px;
-          width: 306px;
-          height: 42px;
-          line-height: 21px;
-          font-size: 12px;
-          color: #505050;
-          border-bottom: 1px solid #e7e7e7;
-          &:hover{
-            background: #e7e7e7;
-           }
+      .x-list-content{
+        overflow-y: auto;
+        height:375px;
+        ul{
+          margin-bottom: 0;
+          li{
+            display:inline-block;
+            padding: 10px 20px;
+            width: 33%;
+            height: 42px;
+            line-height: 21px;
+            font-size: 12px;
+            color: #505050;
+            border-bottom: 1px solid #e7e7e7;
+            &:hover{
+              background: #e7e7e7;
+            }
+          }
         }
       }
       .x-list .x-list-header, .x-list li {