carInsightSystem/src/views/WeiboDetails/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-14 09:00:09
 * @LastEditTime: 2021-10-16 15:54:30
 * @LastEditors: Please set LastEditors
 * @Description: 微博详情
 * @FilePath: /data-show/src/views/WeiboDetails/index.vue
-->
<template>
    <div class="d-container">
        <div class="wd-outter">
            <div class="wd-d1">
                <v-label-div title="微博洞察详情">
                    <v-btn @click="goback">返回洞察详情</v-btn>
                </v-label-div>
                <div class="wd-d1-bd">
                    <div class="d1">
                        奥迪
                    </div>
                    <div class="d2" style="margin-left: 114px">
                        <img class="dd1" src="../../assets/images/BrandInsight/ic_xxzl.png" />
                        <div class="dd2">
                            <span class="s1">74,073,195</span>
                            <span class="s2">信息总量</span>
                        </div>
                    </div>
                    <div class="d2">
                        <img class="dd1" src="../../assets/images/BrandInsight/ic_dvsl.png" />
                        <div class="dd2">
                            <span class="s1">16578</span>
                            <span class="s2">参与大V数量</span>
                        </div>
                    </div>
                    <div class="d2">
                        <img class="dd1" src="../../assets/images/BrandInsight/ic_yhs.png" />
                        <div class="dd2">
                            <span class="s1">13200</span>
                            <span class="s2">参与用户数</span>
                        </div>
                    </div>
                    <div class="d2">
                        <img class="dd1" src="../../assets/images/BrandInsight/ic_yqdx.png" />
                        <div class="dd3">
                            <span class="s3" style="background: #3373CC"></span>
                            <span class="s3" style="background: #54BF93;width: 69px"></span>
                            <span class="s3" style="background: #CC9D12;width: 96px"></span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wd-d2">
                <weibo-communication-trend></weibo-communication-trend>
                <weiboContentType></weiboContentType>
                <weiboCharacters></weiboCharacters>
            </div>
            <div class="wd-d3">
                <weiboUserActiveArea></weiboUserActiveArea>
                <weiboContentTOPVolume></weiboContentTOPVolume>
            </div>
            <div class="wd-d4">
                <modelPopularity></modelPopularity>
                <weiboWordCloud></weiboWordCloud>
                <weiboSpreadFission></weiboSpreadFission>
                <weiboTonalDistribution></weiboTonalDistribution>
            </div>
            <div class="wd-d5">
                <positiveViewKOL></positiveViewKOL>
                <negativeOpinionKOL></negativeOpinionKOL>
            </div>
        </div>
    </div>
</template>

<script>
import weiboCommunicationTrend from "./weiboCommunicationTrend";
import weiboContentType from "./weiboContentType";
import weiboCharacters from "./weiboCharacters";
import weiboUserActiveArea from "./weiboUserActiveArea";
import weiboContentTOPVolume from "./weiboContentTOPVolume";
import modelPopularity from "./modelPopularity";
import weiboWordCloud from "./weiboWordCloud";
import weiboSpreadFission from "./weiboSpreadFission";
import weiboTonalDistribution from "./weiboTonalDistribution";
import positiveViewKOL from "./positiveViewKOL";
import negativeOpinionKOL from "./negativeOpinionKOL"
export default {
    name: "WeiboDetails",
    components: {
        weiboCommunicationTrend, // 微博传播趋势
        weiboContentType, // 微博内容类型
        weiboCharacters, // 微博人物画像
        weiboUserActiveArea, // 微博用户活跃地区
        weiboContentTOPVolume, // 微博内容TOP声量
        modelPopularity, // 车型热度
        weiboWordCloud, // 词云分布
        weiboSpreadFission, // 微博传播裂变
        weiboTonalDistribution, // 调性分布
        positiveViewKOL, // 正面观点KOL
        negativeOpinionKOL // 负面观点KOL
    },
    methods: {
        goback() {
            this.$router.go(-1);
        },
    },
};
</script>

<style lang="less" scoped>
.wd-outter {
    padding: 0px 16px 16px 16px;
}
.wd-d1 {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .wd-d1-bd {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .d1 {
            width: 150px;
            height: 150px;
            background-image: url("../../assets/images/BrandInsight/img_lq.png");
            background-repeat: no-repeat;
            background-size: cover;
            margin-left: 114px;
            text-align: center;
            line-height: 150px;
            font-size: 24px;
            color: #b2daf7;
        }
        .d2 {
            width: 378px;
            height: 82px;
            display: flex;
            justify-content: flex-start;
            .dd1 {
                width: 80px;
                height: 80px;
            }
            .dd2 {
                margin-left: 20px;
                height: 100%;
                .s1 {
                    display: block;
                    font-size: 34px;
                    font-family: Bebas;
                    color: #ffffff;
                }
                .s2 {
                    display: block;
                    font-size: 20px;
                    color: #8f969c;
                }
            }
            .dd3 {
                margin-left: 20px;
                height: 100%;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                .s3 {
                    width: 87px;
                    height: 33px;
                    display: inline-block;
                    margin-right: 2px;
                }
            }
        }
    }
}
.wd-d2 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.wd-d3 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.wd-d4 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
.wd-d5 {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    margin-top: 16px;
}
</style>