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-jinghua flexcenter">精华</div>
            <div class="detail-title-label flexcenter">生活贴士</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: .191rem 0.2933rem 0;

        .detail-title-jinghua {
            width: 1rem;
            height: .64rem;
            border-radius: .5rem .5rem 0;
            font-size: .32rem;
            color: #fff;
            background: linear-gradient(-57.3808deg, rgb(178, 152, 232) 0%, rgb(88, 70, 195) 100%);
        }

        .detail-title-label {
            background: rgb(51, 51, 51);
        }
    }
}
</style>