<template>
    <div class="me">
        <div class="container">
            <!--<div class="header" v-bind:style="{height:height/2+'px'}">-->
            <div class="header">
                <div class="top pt20p pl10p pr10p">
                    <img src="../../assets/img/next.svg" alt="">
                    <img src="../../assets/img/more.svg" alt="">
                </div>
                <div class="bottom">
                    <div class="container pr10p pl10p pt10p">
                        <div class="head">
                            <img src="../../assets/img/head-image.jpeg" class="head-image ml20p">
                            <div class="other-buttons" v-if="false">
                                <div class="attention">
                                    关注
                                </div>
                                <div class="more-attention">
                                    -
                                </div>
                            </div>
                            <div class="my-buttons ">
                                <div class="collect">
                                    <img src="../../assets/img/collect-white.svg" alt="">
                                    <span class="mr5p">收藏</span>
                                </div>
                                <div class="add-friend">
                                    <img src="../../assets/img/add-friend-white.svg" alt="">
                                </div>
                                <div class="qr-code">
                                    <img src="../../assets/img/qr-code-white.svg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="description">
                            <p class="name f22 mt5p mb5p">ttentau</p>
                            <div class="number mb10p">
                                <span>抖音号：605128307</span>
                                <div class="jrtt">
                                    <img src="../../assets/img/sina.svg" alt="">
                                    <span>头条主页</span>
                                    <img src="../../assets/img/next.svg" alt="">
                                </div>
                            </div>
                            <div class="signature f12 mb10p">
                                <span>填写个性签名更容易获得别人关注哦</span>
                            </div>
                            <div class="info f10 mb10p">
                                <div class="age">
                                    <img src="../../assets/img/person.svg" alt="">
                                    <span>22岁</span>
                                </div>
                                <div class="location">
                                    <span>上海</span>
                                </div>
                                <div class="school">
                                    四川理工大学
                                </div>
                            </div>
                            <div class="heat mb10p">
                                <span>8获赞</span>
                                <span>38关注</span>
                                <span>42粉丝</span>
                            </div>
                        </div>
                        <div class="tabset">
                            <div class="tab active">
                                <span>作品1</span>
                            </div>
                            <div class="tab">
                                <span>动态6</span>
                            </div>
                            <div class="tab">
                                <span>喜欢6</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="content">
                <div class="video-container" v-for="item of videos"  v-bind:style="{'height':width/3*1.2+'px'}">
                    <video src="../../assets/video/吴三二的光年之外.mp4"></video>
                    <div class="love">
                        <img src="../../assets/img/love.svg" alt="">
                        <span class="ml5p">72.3w</span>
                    </div>
                </div>
            </div>
        </div>
        <Footer v-bind:init-tab="5"/>
    </div>
</template>

<script>
    import Footer from '../common/Footer';

    export default {
        name: "Me",
        components: {
            Footer
        },
        data() {
            return {
                height: 0,
                width: 0,
                videos: [{},{},{},{}]
            }
        },
        created() {
            this.height = window.screen.height;
            this.width = window.screen.width;
        }
    }
</script>

<style scoped lang="scss">
    .me {
        color: white;
        .header {
            background: gray;
            .top {
                /*height: 30%;*/
                height: 100px;
                display: flex;
                justify-content: space-between;
                background: url("../../assets/img/top-bg.jpg");
                img {
                    border-radius: 50%;
                    padding: 5px;
                    background: #524a4a;
                    height: 20px;
                    width: 20px;
                    &:nth-child(1) {
                        transform: rotate(180deg);
                    }
                }
            }
            .bottom {
                background-image: url("../../assets/img/head-image.jpeg");
                background-position: center;
                background-size: cover;
                background-repeat: no-repeat;
                /*height: 60%;*/
                .container {
                    height: 100%;
                    background-color: #2e3244ed;
                    position: relative;
                    .head {
                        width: 100%;
                        right: 10px;
                        position: absolute;
                        top: -8px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        .head-image {
                            background: black;
                            padding: 5px;
                            border-radius: 50%;
                            width: 60px;
                            height: 60px;
                        }
                        .my-buttons {
                            div {
                                display: flex;
                                align-items: center;
                                float: left;
                                border-radius: 2px;
                                background: #676767;
                                margin-right: 5px;
                                img {
                                    padding: 6px;
                                    height: 20px;
                                }
                                span {
                                    color: #cdcdcd;
                                }
                            }

                        }
                    }
                    .description {
                        margin-top: 60px;
                        color: white;
                        .number {
                            padding-bottom: 10px;
                            border-bottom: 1px solid gray;
                            .jrtt {
                                float: right;
                                img {
                                    height: 10px;
                                    width: 10px;
                                }
                                span {
                                    margin: 0 5px;
                                }
                            }
                        }
                        .info {
                            display: flex;
                            align-items: center;
                            div {
                                display: flex;
                                align-items: center;
                                float: left;
                                border-radius: 2px;
                                background: #676767;
                                margin-right: 5px;
                                padding: 2px 4px;
                                img {
                                    height: 10px;
                                    margin-right: 3px;
                                }
                                span {
                                    color: #cdcdcd;
                                }
                            }
                        }
                        .heat {
                            span {
                                margin-right: 10px;
                            }
                        }
                    }
                    .tabset {
                        display: flex;
                        justify-content: space-around;
                        .tab {
                            padding-top: 10px;
                            padding-bottom: 10px;
                            text-align: center;
                            width: 30%;
                        }
                        .active {
                            border-bottom: 2px solid gold;
                        }
                    }
                }

            }
        }
        .content {
            .video-container {
                width: 33%;
                float: left;
                position: relative;
                overflow: hidden;
                border: .5px solid black;
                video {
                    width: 100%;
                }
                .love {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    display: flex;
                    align-items: center;
                    img {
                        height: 20px;
                    }
                }
            }
        }
    }
</style>
