carInsightSystem/src/views/WeiboDetails/weiboContentTOPVolume/index.vue

<!--
 * @Author: your name
 * @Date: 2021-10-14 15:54:06
 * @LastEditTime: 2021-10-14 18:02:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/WeiboDetails/weiboContentTOPVolume/index.vue
-->
<template>
    <div class="wct-outter">
        <v-label-div title="微博内容TOP声量">
        </v-label-div>
        <div class="wct-inner">
            <div class="wct-d1">
                <v-echarts :opt="opt1"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">01</span></span>
                    <span>声量：<span class="ss1">600</span></span>
                </div>
            </div>
            <div class="wct-d1">
                 <v-echarts :opt="opt2"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">02</span></span>
                    <span>声量：<span class="ss1">500</span></span>
                </div>
            </div>
            <div class="wct-d1">
                 <v-echarts :opt="opt3"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">03</span></span>
                    <span>声量：<span class="ss1">450</span></span>
                </div>
            </div>
            <div class="wct-d1">
                 <v-echarts :opt="opt4"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">04</span></span>
                    <span>声量：<span class="ss1">400</span></span>
                </div>
            </div>
            <div class="wct-d1">
                 <v-echarts :opt="opt5"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">05</span></span>
                    <span>声量：<span class="ss1">350</span></span>
                </div>
            </div>
            <div class="wct-d1">
                 <v-echarts :opt="opt6"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">06</span></span>
                    <span>声量：<span class="ss1">300</span></span>
                </div>
            </div>
            <div class="wct-d1">
                <v-echarts :opt="opt7"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">07</span></span>
                    <span>声量：<span class="ss1">250</span></span>
                </div>
            </div>
            <div class="wct-d1">
                <v-echarts :opt="opt8"></v-echarts>
                <div class="wct-d1-dd1">
                    <span>排名：<span class="ss1">08</span></span>
                    <span>声量：<span class="ss1">200</span></span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import createOpt from "./opt"
export default {
    name: "weiboContentTOPVolume",
    data() {
        return {
            opt1: createOpt('内饰', '#306cc0', 600),
            opt2: createOpt('空间', '#5ea3c2', 500),
            opt3: createOpt('操控', '#49aa82', 450),
            opt4: createOpt('舒适', '#c79911', 400),
            opt5: createOpt('动力', '#316dc3', 350),
            opt6: createOpt('配置', '#5ea3c2', 300),
            opt7: createOpt('外观', '#49aa82', 250),
            opt8: createOpt('油耗', '#c79911', 200),
        }
    }
}
</script>

<style lang="less" scoped>
.wct-outter {
    width: 936px;
    height: 460px;
    border: 2px solid #0f2a4d;
    margin-left: 16px;
}
.wct-inner {
    width: 100%;
    height: calc(100% - 48px);
    .wct-d1 {
        position: relative;
        width: 233px;
        height: 206px;
        display: inline-block;
       .wct-d1-dd1 {
           position:absolute;
           padding: 0px 16px;
           width: 100%;
           height: auto;
           display: flex;
           justify-content: space-between;
           top: 140px;
           left: 0px;
           span {
               color: #d8d8d8;
               font-size: 12px;
               .ss1 {
                   font-family: Bebas;
                   font-size: 16px;
                   color: #FFFFFF;
               }
           }
       }
    }
}
</style>