<template>
    <div class="popup-mask flexcenter">
        <div class="box flexflex">
            <div class="tba-list flexcenter">
                <div class="tab-item pitch flexcenter">
                    我的收藏
                    <div class="value">12</div>
                </div>

                <div class="tab-item flexcenter">
                    我的面经
                    <div class="value">12</div>
                </div>
            </div>
            <div class="empty-box flexcenter" v-if="false"><Empty></Empty></div>
            <div class="content">
                <div class="item flexflex" v-for="(item, index) in 10" :key="index">
                    <div class="left flexflex">
                        <div class="name">香港理工大学</div>
                        <div class="info-box flexflex">
                            <div class="info-item flexacenter" v-for="item in 2" :key="item">
                                <div class="info-item-name">专业</div>
                                <div class="info-item-value">Electrical and Electronics Engineering</div>
                            </div>
                        </div>
                        <div class="text-box flexacenter">
                            我是本专业+跨专业申请，中大是直接给了推研所。没啥经验分享，主要是港大和港科的面经…
                        </div>
                    </div>
                    <div class="operate-area flexacenter">
                        <!-- <img class="delete-icon" src="@/assets/img/delete-icon.svg" /> -->
                        <div class="anonymous-box flexacenter">
                            <div class="text">公开</div>
                            <img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
                            <div class="state-popup flexflex" v-if="false">
                                <div class="state-popup-item flexacenter flex1 pitch">
                                    <div class="">公开发表</div>
                                    <img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
                                </div>
                                <div class="state-popup-item flexacenter flex1">
                                    <div class="">匿名发表</div>
                                    <img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup></script>
<style lang="less" scoped>
.popup-mask {
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    max-width: none;
    max-height: none;
    border: none;
    outline: none;
    .box {
        width: 750px;
        height: 606px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
        -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
        flex-direction: column;
        padding: 30px 30px 46px;

        .tba-list {
            font-size: 16px;
            margin-bottom: 29px;
            .tab-item {
                color: #aaaaaa;
                padding: 0 22px;
                cursor: pointer;
                position: relative;

                &:first-of-type::after {
                    content: "";
                    width: 1px;
                    height: 16px;
                    background: #d7d7d7;
                    position: absolute;
                    right: 0;
                }
                .value {
                    margin-left: 10px;
                }
                &.pitch {
                    font-weight: 650;
                    color: #000000;
                    .value {
                        color: #555;
                        font-weight: 400;
                    }
                }
            }
        }

        .empty-box {
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(235, 235, 235, 1);
            border-radius: 6px;
            margin: 0 auto;
        }

        .content {
            width: 100%;
            height: 100%;
            // background: #000000;
            overflow: auto;
            padding-right: 10px;
            padding-bottom: 20px;
            .item {
                // flex-direction: column;
                border-bottom: 1px dotted #ebebeb;
                padding-bottom: 20px;
                cursor: pointer;
                margin-left: 22px;
                margin-bottom: 21px;
                .left {
                    flex-direction: column;
                    // padding-left: 22px;
                    position: relative;
                    &::after {
                        content: "";
                        position: absolute;
                        top: 4px;
                        left: -22px;
                        width: 5px;
                        height: 12px;
                        background-color: rgba(49, 215, 46, 1);
                        border-radius: 25px;
                    }
                    .name {
                        font-weight: 650;
                        font-size: 14px;
                        color: #000000;
                        margin-bottom: 10px;
                    }
                    .info-box {
                        flex-direction: column;
                        margin-bottom: 7px;

                        .info-item {
                            line-height: 24px;
                            &:not(:last-of-type) {
                                margin-bottom: 3px;
                            }

                            .info-item-name {
                                color: #7f7f7f;
                                font-size: 13px;
                                margin-right: 12px;
                            }
                            .info-item-value {
                                font-size: 13px;
                                color: #333333;
                            }
                        }
                    }

                    .text-box {
                        width: 580px;
                        height: 45px;
                        background-color: rgba(246, 246, 246, 1);
                        border-radius: 5px;
                        color: #000000;
                        font-size: 13px;
                        padding: 0 16px;
                    }
                }
                .operate-area {
                    flex: 1;
                    display: flex;
                    justify-content: flex-end;
                    .delete-icon {
                        width: 12px;
                        cursor: pointer;
                    }

                    .anonymous-box {
                        .text {
                            font-size: 13px;
                            color: #333333;
                        }
                        .arrow-icon {
                            width: 8px;
                            height: 5px;
                            margin-left: 6px;
                        }

                        position: relative;

                        .state-popup {
                            position: absolute;
                            top: 30px;
                            right: 0;
                            width: 140px;
                            height: 101px;
                            background-color: rgba(255, 255, 255, 1);
                            border-radius: 10px;
                            -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
                            -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
                            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
                            flex-direction: column;

                            .state-popup-item {
                                justify-content: space-between;
                                color: #555;
                                font-size: 14px;
                                padding: 0 10px;

                                &:hover {
                                    color: #000000;
                                }

                                &.pitch {
                                    color: #72db86;
                                    .state-popup-icon {
                                        display: block;
                                    }
                                }

                                &:not(:last-of-type) {
                                    border-bottom: 1px dotted #e3e3e3;
                                }

                                .state-popup-icon {
                                    width: 11px;
                                    height: 8px;
                                    display: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
