carInsightSystem/src/views/ModelTailDetails/MTDHeader/index.vue

<!--
 * @Author: your name
 * @Date: 2021-11-08 10:10:57
 * @LastEditTime: 2021-11-08 10:28:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/ModelTailDetails/MTDHeader/index.vue
-->
<template>
    <div class="mtdH-outter">
        <v-label-div title="尾翼洞察详情">
            <v-btn @click="goback">返回车型洞察</v-btn>
        </v-label-div>
        <div class="mtdH-inner">
            <div class="mtdH-d1">
                奥迪
            </div>
            <span class="mtdH-s1">奥迪A8</span>
            <span class="mtdH-s2">洞察分析：共监测到尾翼信息5条,2021-06-15 10:00:00尾翼传播达到波峰值,共监测到1条信息.,尾翼信息主要分布在萝卜投研,微信等媒体平台，媒体尾翼分布占比为萝卜投研 60%,微信 40%.,网民对于该品牌主要关注"上市,全新,不错,亮点,搭载"等信息.,通过对行业大数据的聚合分析,可以发现网民热议TOP10车型分别为”奥迪h6,rav4荣放,博越"等.</span>
        </div>
    </div>
</template>

<script>
export default {
    name: "MTDHeader",
    methods: {
        goback() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="less" scoped>
.mtdH-outter {
    width: 100%;
    height: 222px;
    border: 2px solid #0F2A4D;
    .mtdH-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .mtdH-d1 {
            width: 150px;
            height: 150px;
            background-image: url("../../../assets/images/BrandInsight/img_lq.png");
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: 16px;
            text-align: center;
            line-height: 150px;
            color: #b2daf7;
            font-size: 24px;
            font-weight: 500;
        }
        .mtdH-s1 {
            display: block;
            color: #b2daf7;
            font-size: 24px;
            margin-left: 16px;
        }
        .mtdH-s2 {
            display: block;
            color: #a9adb2;
            font-size: 20px;
            width: 1478px;
            margin-left: 133px;
        }
    }
}
</style>