follow.vue

<!--个人中心-->
<template>
    <div class="idxs">
        <!--        设置关注和粉丝之间的跳转-->
        <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect" active-text-color="orange" router>
            <el-menu-item index="/fans">粉丝</el-menu-item>
            <el-menu-item index="/follow">关注</el-menu-item>
        </el-menu>
        <el-empty description="没有关注" v-if="abc"></el-empty>
        <div v-for="v of number">
            <el-card style="height: 120px;width: 800px;margin-left: 200px;margin-top: 30px;">
                <el-col >
                    <el-row :span="8" style="margin-top: 10px">
                        <div>
                            <el-popover
                                placement="bottom"
                                width="200"
                                trigger="hover"
                            >
                                <el-row :gutter="10">
                                    <el-col :span="12">
                                        <span><i class="el-icon-user"></i><span>粉丝数:</span></span>
                                        <span>{{ v.fans }}</span>
                                    </el-col>
                                    <el-col :span="12">
                                        <span><i class="el-icon-user"></i><span>关注数:</span></span>
                                        <span>{{ v.follow }}</span>
                                    </el-col>
                                </el-row>
                                <el-avatar slot="reference" style="cursor: pointer" shape="square" :size="60" :src="squareUrl"></el-avatar>
                            </el-popover>
                        </div>
                    </el-row>
                    <el-row :span="8" style="margin-top: -55px;margin-left: 50px"  >
                        <h3 style="margin-left: 50px;margin-top: 0px">{{ v.name }}</h3>
                    </el-row>
                    <el-row :span="8" style="margin-left: 50px"  >
                        <p style="margin-left: 50px;margin-top: 0px;color: #99a9bf">{{ v.tag }}</p>
                    </el-row>
                    <el-row :span="8" style="margin-left: 650px;margin-top: -50px"  >
                        <el-button type="primary" round>取消关注</el-button>
                    </el-row>
                </el-col>
            </el-card>
        </div>

    </div>
</template>

<script>
import Handder from "@/components/Handder.vue";
import Sidebar from "@/components/sidebar.vue";

export default {
    name: "personalCenter",
    components: {Sidebar,Handder},
    data() {
        return {
            radio1: '1',
            radio2: '2',
            activeName: 'first',
            abc: false,
            number: [
                {name : '将',
                    tag:'美好的生活大概就是白天又说有笑晚上睡个好觉',
                    fans: 12,follow: 120},
                {name : '别',
                    tag:'我够坚强，但不是所有的伤我都能抗',
                    fans: 40,follow: 300},
                {name : '吴',
                    tag:'你的微博辣妹有那么多，原来我只是其中一个',
                    fans: 67,follow: 420},
                {name : '康',
                    tag:'姑娘姑娘我就要嫁人啦',
                    fans: 80,follow: 720},
            ]
        }
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
    created() {

    }
}

</script>

<style scoped>

@media screen and (min-width: 1970px){
    .idxs {
        margin: 60px auto;
        width: calc(100% - 290px);
        max-width: 1570px;
        min-width: 1200px;
    }
}

@media screen and (max-width: 1969px){
    .idxs {
        /*width: 1270px;*/
        /*min-width: 1000px;*/
        /*margin-top: 60px;*/
        /*margin-left: 270px;*/
        /*padding: 40px;*/
        width: calc(100% - 290px);
        max-width: 1570px;
        min-width: 1200px;
        margin: 60px auto;
    }
    .idxs{
        margin-left: 250px;
    }
}

.el-card:hover{

}

</style>