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 flexflex">

            <div class="card-item shadow">
                <div class="card-head">
                    <img class="card-head-icon" src="" />
                    <div class="card-head-content flexflex">
                        <div class="card-head-name">闫旭Mike</div>
                        <div class="card-head-time">2022-7-6 14:56</div>
                    </div>
                    <div class="card-head-fool"></div>
                </div>
            </div>
        </div>


    </div>
</template>

<script>
export default {
    name: 'detailIndex',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</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;
        justify-content: center;

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

            .card-head {

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

                .card-head-content {}
            }
        }
    }

}
</style>