vue可视化大屏数据对比自适配展示卡片小组件

个人近期偏爱半透色的卡片底色，能更好的适用于各种风格的背景图或者背景色，主要是我司UI也爱设计透明度不高的卡片。

//使用实例 dom
<xthink-data :x-list="List1[0]" ref="infoList1Ref1"></xthink-data>


//data
List1:[{
        title_image_index: 0,
        bottom_line_index: 0,
        x_title:'标题一',
        numList: [10, 20],
        xinfo_list: ['调整前', '调整后'],
      }],

<template>
    <div class="x_box_cav">
        <div class="x_title">
            <img class="icon" :src="xImage" alt="">
            <el-tooltip class="item" effect="dark" :content= 'xList.x_title' placement="top-start">
                <a>{{xList.x_title}}</a>
            </el-tooltip>
        </div>
        <div class="x_number">
            <div class="num_left" :style="{fontSize:fontSize}">{{xList.numList[0]}}</div>
            <div class="num_right" :style="{fontSize:fontSize}">{{xList.numList[1]}}</div>
        </div>
        <div class="x_text">
            <div class="txt_left">{{xList.xinfo_list[0]}}</div>
            <div class="txt_right">{{xList.xinfo_list[1]}}</div>
        </div>
    </div>
</template>

<script>
export default {
    name: "XthinkData",
    data() {
        return {
            xImage: require("../component/img.png"),
            fontSize: '18px',
        }
    },
    props: {
        xList:{
            type: Object,
            default(){
                return []
            }
        },
    },
    created() {
        this.changeFont();
    },
    mounted() {
        setTimeout(()=>{
            this.changeFont();
        },500)
    },
    watch:{
        xList() {
            this.changeFont();
        },
    },
    methods: {
//字体大小自适应
        changeFont() {
            if((this.xList.numList[0].toString().length >= 8 ||this.xList.numList[1].toString().length >= 8)
               &&(this.xList.numList[0].toString().length < 10 ||this.xList.numList[1].toString().length < 10)){
                this.fontSize = '18px';
            }else if((this.xList.numList[0].toString()).length >= 10 ||(this.xList.numList[1].toString()).length >= 10
                &&(this.xList.numList[0].toString().length < 12 ||this.xList.numList[1].toString().length < 12)){
                this.fontSize = '16px';
            }else if((this.xList.numList[0].toString()).length >= 12||(this.xList.numList[1].toString()).length >= 12){
                this.fontSize = '14px';
            }
        },
        update_father_data(){
            // 更新 父组件传进来的数据
            this.$forceUpdate()
        }
    },
}
</script>

<style scoped lang="scss">
.x_box_cav{
    background: #25344e80;//卡片背景色
    margin: 3px;
    border-radius: 6px;
    .x_title{
        //padding: 5px;
        height: 28px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        img{
            width: 25px;
            background-size: 100%;
        }
        a{
            padding-left: 10px;
            color: #ffffff;
            opacity: 0.8;
            font-size: 16px;
        }
    }
    .x_number{
        height: 30px;
        padding-top: 6px;
        display: flex;
        justify-content: space-around;
        .num_left{
            width: 50%;
            padding-left: 6px;
            font-weight: bold;
            color: #00fcff;
            text-align: center;
        }
        .num_right{
             width: 50%;
             padding-left: 6px;
             font-weight: bold;
            color: #65d215;
            text-align: center;
         }
    }
    .x_text{
        height: 25px;
        display: flex;
        justify-content: space-around;
        padding-bottom: 4px;
        .txt_left{
            width: 50%;
            font-size: 14px;
            color: #cafeff;
            text-align: left;
            padding-left: 5%;
        }
        .txt_right{
            width: 50%;
            font-size: 14px;
            color: #ddffc6;
            text-align: left;
            padding-left: 5%;
        }
    }
}
</style>

图片下载：https://download.csdn.net/download/galaxyJING/88616393