GterForumWeB/src/views/detail/detailIndex.vue

<template>
    <div class="container">
        <div class="detail-head flexacenter">
            <div class="detail-section">版块：<span class="section-name">香港澳门台湾留学申请</span></div>
            <div class="detail-data flexacenter">
                <div class="detail-data-item flexacenter">
                    <img class="detail-data-eye" src="@/assets/img/detail/eye.png">10378
                </div>
                <div class="detail-data-item flexacenter">
                    <img class="detail-data-comment" src="@/assets/img/detail/comment.png">16
                </div>
            </div>
        </div>

        <div class="detail-title-box">
            <div class="detail-title-item detail-title-jinghua flexcenter">精华</div>
            <div class="detail-title-item detail-title-label flexcenter">生活贴士</div>
            香港永久居民的申请步骤和过程
        </div>

        <!--  -->
        <div class="card flexcenter">
            <div class="card-item shadow" v-for="(item, index) in 5" :key="index">
                <div class="card-head flexacenter">
                    <img class="card-head-icon"
                        src="https://axure-file.lanhuapp.com/md516b251fb-9cfa-46fc-a9b6-2a41a7b4dc37__3ad73406ff4bc8b138dafc6dcbf1a635.svg" />
                    <div class="card-head-content flex1 flexflex">
                        <div class="card-head-name flexflex">闫旭Mike <div class="landlord flexcenter" v-if="index == 0">楼主
                            </div>
                        </div>
                        <div class="card-head-time">2022-7-6 14:56</div>
                    </div>
                    <div class="card-head-fool">{{ index == 0 ? '楼主' : `${index}楼` }}</div>
                </div>

                <div class="card-content">
                    <!-- 回复引用 -->
                    <div class="quotation flexflex">
                        <svg-icon icon-class="quotation-left" class-name="quotation-icon"></svg-icon>
                        <div class="quotation-wenzi flex1 three-lines">
                            这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…这个离开香港是否超过180天，应该是居籍的判断，而非物理空间变化的判断。简单来说，只要你在香港纳税，你在香港有工作，有现金流，有房子…
                        </div>


                        <div class="quotation-bottom"></div>
                    </div>
                    <!-- 之前申请永久居民，参考了不少寄托的帖子和经验，现在回馈给大家，积攒RP。 -->
                </div>
            </div>


        </div>

        <!-- 分页 -->


        <detail-reply :two-comment-data="twoCommentData" :pop-state="popState"></detail-reply>
    </div>
</template>

<script>
import DetailReply from '@/components/DetailReply'
export default {
    name: 'detailIndex',

    data() {
        return {
            twoCommentData: {
                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
                content: "评论回复",
            },
            popState: "discussionSingle",
            
        };
    },

    mounted() {

    },

    methods: {

    },

    components: {
        DetailReply
    }
};
</script>

<style lang="scss" scoped>
.container {
    margin-top: 1.3rem;

    .detail-head {
        color: #7F7F7F;
        padding: .191rem 0.2933rem 0;
        justify-content: space-between;

        .detail-section {
            justify-content: space-between;
            font-size: .32rem;

            .section-name {
                color: #333;
            }
        }

        .detail-data {
            color: rgb(127, 127, 127);

            .detail-data-item {
                color: rgb(127, 127, 127);
                font-size: .28rem;

                img {
                    margin-right: .12rem;
                }

                .detail-data-eye {
                    width: .36rem;
                    height: .36rem;
                }

                .detail-data-comment {
                    width: .32rem;
                    height: .32rem;
                }

                &:last-of-type {
                    margin-left: .32rem;
                }
            }
        }
    }


    .detail-title-box {
        padding: .72rem 0.2933rem 0;
        color: #000;
        font-size: .56rem;
        font-weight: 650;

        .detail-title-item {
            font-size: .32rem;
            color: #fff;
            height: .64rem;
            display: inline-flex;
            margin-right: .16rem;
            font-weight: 400;

            &.detail-title-jinghua {
                width: 1rem;
                border-radius: .5rem .5rem 0;
                background: linear-gradient(-57.3808deg, rgb(178, 152, 232) 0%, rgb(88, 70, 195) 100%);
            }

            &.detail-title-label {
                background: rgb(51, 51, 51);
                padding: 0 .16rem;
                display: inline-flex;
                border-radius: .16rem;


            }

        }

    }

    .card {
        margin-top: .48rem;
        flex-direction: column;

        .card-item {
            width: 9.4rem;
            border-radius: .4rem;
            background: #fff;
            margin-bottom: .4rem;

            .card-head {
                padding: .48rem .32rem;
                border-bottom: .0133rem solid #ebebeb;

                .card-head-icon {
                    width: .96rem;
                    height: .96rem;
                    border-radius: 50%;
                    margin-right: .28rem;
                }

                .card-head-content {
                    flex-direction: column;

                    .card-head-name {
                        color: #333;
                        font-size: .32rem;
                        margin-bottom: .08rem;

                        .landlord {
                            color: rgb(127, 127, 127);
                            font-size: .26rem;
                            width: .64rem;
                            height: .44rem;
                            border: rgb(215, 215, 215) .0133rem solid;
                            background: rgb(240, 242, 245);
                            border-radius: .1rem;
                            margin-left: .16rem;
                        }
                    }

                    .card-head-time {
                        color: rgb(127, 127, 127);
                        font-size: .28rem;
                    }
                }

                .card-head-fool {
                    color: rgb(127, 127, 127);
                    font-size: .32rem;
                }
            }

            .card-content {
                color: #333;
                font-size: .36rem;
                line-height: .6rem;
                padding: .5rem .32rem;

                .quotation {
                    width: 100%;
                    color: #333;
                    font-size: .32rem;
                    border-radius: .16rem;
                    background: rgb(246, 246, 246);
                    padding: .36rem .24rem;
                    box-sizing: border-box;

                    .quotation-icon {
                        width: .32rem;
                        height: .26rem;
                    }
                }
            }
        }
    }

}
</style>