需求实战一

<template>
    <ARow>
        <ACol style="background-color:#F1F4F5 ">
            <div class="info-card">
                <div class="info-title">
                    数据总和
                </div>
                <div class="info-value">
                    100
                </div>
            </div>

        </ACol>
    </ARow>
</template>
<script setup lang="ts">

</script>
<style scoped>
:deep(.info-card){
    width: 318px;
    height: 116px;
    background-color: #FFFFFF;
    box-shadow: 0px 2px 10px 1px rgba(23,179,163,0.07);
    border-radius: 4px;
}

:deep(.info-title){
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    line-height: 21px;
    padding:20px 0 20px 30px;
}

:deep(.info-value){
    font-size: 36px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 21px;
    padding:0 0 0 30px;
}
</style>

这段代码是一个Vue组件的模板部分，用于展示一个信息卡片。具体解释如下：

-