SmartCommunity/login/src/components/ToggleTenant.vue

<template >
    <div class="ms-login2" :class="$route.path !== '/nav' ? 'ms-login' : ''">
        <div class="ms-main">
            <div class="ms-content">
                <div class="ms-tenantslist-title">
                    <p class="">你有多个租户节点，请选择租户</p>
                </div>
                <hr />
                <div class="tanantslist-box">
                    <el-scrollbar style="height: 260px; padding: 20px 0px; margin-right: -21px">
                        <ul class="ms-tenantslist">
                            <li v-for="(item, index) in selectDta" :key="index" @click="selectTenant(item)">
                                <div>{{ item.tenantName }}</div>
                            </li>
                        </ul>
                    </el-scrollbar>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        selectDta: {
            type: Array,
            default: () => []
        }
    },
    methods: {
        selectTenant(item) {
            if (this.$route.query.tenantId == item.tenantId) {
                this.$parent.toggleTenant();
                return;
            }
            if (this.$route.path == '/nav') {
                this.$parent.selectTenant(item);
            } else {
                window.sessionStorage.setItem('loginJson', JSON.stringify(this.selectDta));
                window.sessionStorage.setItem('loginJsonActive', JSON.stringify(item ));
                this.$router.push({
                    path: '/nav',
                    // query: {
                    //     phone: item.phone,
                    //     tenantId: item.tenantId
                    // }
                });
            }
        }
    }
};
</script>
<style lang='scss' scoped>
.ms-login2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // background: rgba(255, 255, 255, 0.05);
    z-index: 10;
    & > .ms-main {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: row;
        position: relative;
        z-index: 999;
        border: 1px solid rgba(240, 238, 241, 0.2);
        border-radius: 10px;
        padding: 20px !important;
        .ms-content {
            display: flex;
            justify-content: center;
            align-content: center;
            flex-direction: column;
            position: relative;
            height: 100%;
            width: 100%;
            .ms-tenantslist-title {
                padding: 0px 30px 20px;
                height: 90px;
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 0 8px;
                p {
                    font-size: 20px;
                    font-family: PingFang SC;
                    font-weight: 600;
                    color: #ffffff;
                    opacity: 0.5;
                }
            }
            hr {
                width: 100%;
                height: 1px;
                padding-left: 30px;
                padding-right: 30px;
                background: #ffffff;
                opacity: 0.2;
            }
        }
    }
    .ms-tenantslist {
        margin: 30px 0;
        li {
            margin: 0 auto 20px auto;
            background: rgba(255, 255, 255, 0.05);

            padding: 20px;
            border-radius: 6px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            div {
                background-size: 340px 61px;
                font-size: 16px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #ffffff;
                line-height: 61px;
                height: 61px;
            }
        }
        li:hover {
            border-radius: 6px;
            background: linear-gradient(-80deg, #2a68e6 0%, #2887f2) no-repeat;
        }
    }
    .tanantslist-box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
        .el-scrollbar {
            padding: 0 !important;
            margin-right: -2px !important;
        }
        /deep/.el-scrollbar {
            width: 100%;
            height: 260px;
        }
        /deep/.el-scrollbar__wrap {
            overflow-x: hidden;
        }
        /deep/ .is-horizontal {
            display: none;
        }
        /deep/ .el-scrollbar__bar {
            right: 0px;
        }
    }
}
.ms-login.ms-login2 {
    right: 215px;
    left: auto;
    transform: translateY(-50%);
    .ms-main {
        width: 400px;
        opacity: 0.8;
        background: linear-gradient(0deg, #101327 0%, #29314c 100%);
    }
}
</style>