<template>
    <div class="homePage">
        <div>
            <router-view></router-view>
        </div>
        <div class="tabbar">
            <div class="tabbarBox" @click="changeselect(1)">
                <p><img :src="select == 1 ? homelogo : homelogo2" alt="" /></p>
                <p>首页</p>
            </div>

            <div class="tabbarBox" @click="changeselect(2)">
                <p><img :src="select == 2 ? minelogo : minelogo2" alt="" /></p>
                <p>我的</p>
            </div>
        </div>
    </div>
</template>
<script>
import auth from '@/service/auth'
export default {
    data() {
        return {
            sum: '',
            select: 1,
            homelogo: require('../../assets/image/houseSel.png'),
            homelogo2: require('../../assets/image/houseUnSel.png'),
            minelogo: require('../../assets/image/mineSel.png'),
            minelogo2: require('../../assets/image/mineUnSel.png')
        }
    },
    mounted() {
        if (this.$route.path == '/home/mine') {
            this.select = 2
        }
    },
    methods: {
        changeselect(e) {
            this.select = e
            if (e == 1) {
                this.$router.push('/home/home')
            } else if (e == 2) {
                this.$router.push('/home/mine')
            }
        },
        onShareAppMessage: function() {}
    }
}
</script>
<style lang="scss">
.homePage {
    padding-bottom: 17vw;
    .tabbar {
        display: flex;
        // background-color: #8eb7b2;
        position: fixed;
        width: 100%;
        justify-content: space-evenly;
        bottom: 0;
        box-shadow: 5px 5px 1vw 5px lightgray;
        padding-bottom: 5vw;
        background-color: white;
        .tabbarBox {
            text-align: center;
            position: relative;
            img {
                width: 8vw;
            }
        }
    }
    .homeP {
        padding-bottom: 18.667vw;
        background-color: white;
    }
    .sums {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        min-width: 5.5vw;
        min-height: 5.5vw;
        border-radius: 50%;
        background-color: orangered;
        color: white;
        top: -2.5vw;
        right: -3vw;
        font-size: 3vw;
    }
}
</style>
