<!--
 * @Author: your name
 * @Date: 2021-10-16 11:36:20
 * @LastEditTime: 2021-10-16 12:01:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/BrandComparison/weiboUserPortrait/index.vue
-->
<template>
    <div class="wup-outter">
        <v-label-div title="微博用户画像" :showLine="false" :eStyle="{'border-style': 'none'}">
            <v-tab-group :btns="['奥迪','宝马','奔驰','吉利','大众','别克']"></v-tab-group>
        </v-label-div>
        <div class="wup-inner">
            <div class="d1">
                <div class="dd1">
                    <v-echarts :opt="opt1"></v-echarts>
                </div>
                <div class="dd2">
                    <v-label-ctx label="男性" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
                    <v-label-ctx label="女性" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
                </div>
            </div>
            <div class="d1">
                <div class="dd1">
                    <v-echarts :opt="opt2">
                        <v-echarts :opt="opt2"></v-echarts>
                    </v-echarts>
                </div>
                <div class="dd2" style="margin-right: 16px">
                    <v-label-ctx label="已认证" cont="2200" percentage="25%" color="#3373CC" :eStyle="{ height: '122px' }"></v-label-ctx>
                    <v-label-ctx label="未认证" cont="2200" percentage="25%" color="#63AECC" :eStyle="{ height: '122px' }"></v-label-ctx>
                    <v-label-ctx label="未知" cont="2200" percentage="25%" color="#54BF93 " :eStyle="{ height: '122px' }"></v-label-ctx>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import createOpt1 from "./opt1";
import createOpt2 from "./opt2";
export default {
    name: "weiboUserPortrait",
    data() {
        return {
            opt1: createOpt1(),
            opt2: createOpt2(),
        };
    },
};
</script>

<style lang="less" scoped>
.wup-outter {
    width: 944px;
    height: 412px;
    .wup-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        .d1 {
            width: 50%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            overflow: hidden;
            .dd1 {
                width: 260px;
                height: 100%;
            }
            .dd2 {
                width: 240px;
                height: 100%;
            }
        }
    }
}
</style>
