一个卡片展示的前端组件-526互联

<template>
    <div class="header-container">
        <div  class="header-item"  :style="item.bcg_color" v-for="item in header_data">
            <el-row>
                <el-col :span="9" class="lefticon">
                    <i style="padding-right: 10%">
                        <img :src=item.img_src style="width: 80%;" />
                    </i>
                </el-col>
                <el-col :span="15" class="rightword">
                    <div class="data">
                        {{ item.total_number }}
                        <div class="quantifier">个</div>
                    </div>
                    <div class="downside">
                        {{ item.title }}
                    </div>
                </el-col>
            </el-row>
        </div>
        
    </div>
</template>

<script lang='ts' setup>
import {nextTick, onMounted, ref} from 'vue';

// 使用类型别名来定义展示在上方的卡片数据
type Color_card = {
    backgroundColor: string
}
type Show_card = {
    title: string;
    total_number: number;
    img_src: string;
    bcg_color: Color_card
}

// 定死的用于在上方展示的数据
let show_card_data:Array<Show_card>= [
    {
        title: '模型总数',
        total_number: 500,
        img_src: '/src/assets/assets/数字主题库_模型总数.png',
        bcg_color: {backgroundColor: '#6ac7dd'},
    },
    {
        title: '已成案',
        total_number: 200,
        img_src: '/src/assets/assets/数字主题库_已成案.png',
        bcg_color: {backgroundColor: '#789bdf'},
    },
    {
        title: '阶段性成果',
        total_number: 100,
        img_src: '/src/assets/assets/数字主题库_阶段性成果.png',
        bcg_color: {backgroundColor: '#60cfc3'},
    },
    {
        title: '建设中',
        total_number: 200,
        img_src: '/src/assets/assets/数字主题库_建设中.png',
        bcg_color: {backgroundColor: '#72b2e5'},
    }
]
const header_data = ref(show_card_data)
// 获取数据
function getData() {
   
}
onMounted(async () => {
    // nextTick函数方便我们在DOM更新后执行一些操作
    await nextTick();
    setTimeout(() =>{
        getData();
    })
});
</script>

<style lang="scss" scoped>
// 上方四个模块样式
.header-container{
    height: 120px;
    width: 100%;
    background-color: #eef7fe;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-evenly;
    .header-item {
    height: 110px;
    width: 22%;
    overflow: hidden;
    border-radius: 15px;
    color: #fff;
    font-weight: bold;
    text-align: center;
    .lefticon {
      display: flex;
      justify-content: end;
      align-items: center;
      height: 110px;
    }
    .rightword {
      display: flex;
      justify-content: center;
      align-items: start;
      height: 110px;
      flex-direction: column;
      .data {
        font-size: 1.7rem;
        font-weight: bolder;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .quantifier {
        font-size: 1rem;
        font-weight: 200;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .downside {
        padding-bottom: 20px;
        height: 35px;
        display: flex;
        font-size: 1.2rem;
        font-weight: normal;
      }
    }
  }
}
</style>
效果图如下：
前端