Gyyq-Upstairs/src/views/components/all.vue

<template>
    <div class="container">
        <div>
            <div class="title">整体项目情况</div class="title">
            <table>
                <thead>
                    <tr>
                        <th>项目总数</th>
                        <th>建筑面积(万平方米)</th>
                        <th>已建数量(个)</th>
                        <th>在建数量(个)</th>
                        <th>拟建数量(个)</th>
                        <th style="visibility: hidden;">拟建数量(个)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ projectData.totalProjects }}</td>
                        <td>{{ projectData.totalArea }}</td>
                        <td>{{ projectData.completedProjects }}</td>
                        <td>{{ projectData.ongoingProjects }}</td>
                        <td>{{ projectData.plannedProjects }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div>
            <div class="title">当年项目情况</div class="title">
            <table>
                <thead>
                    <tr>
                        <th>新开工项目数</th>
                        <th>建筑面积(万平方米)</th>
                        <th>已建数量(个)</th>
                        <th>在建数量(个)</th>
                        <th style="visibility: hidden;">拟建数量(个)</th>
                        <th style="visibility: hidden;">拟建数量(个)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ projectData.totalProjects }}</td>
                        <td>{{ projectData.totalArea }}</td>
                        <td>{{ projectData.completedProjects }}</td>
                        <td>{{ projectData.ongoingProjects }}</td>
                        <!-- <td>{{ projectData.plannedProjects }}</td> -->
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            projectData: {
                totalProjects: 384,
                totalArea: 2352.6,
                completedProjects: 189,
                ongoingProjects: 100,
                plannedProjects: 97
            }
        };
    }
};
</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    border: none;
    padding: 8px;
    text-align: left;
}

th {
    width: 7rem;
}

.title {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 600;
    font-size: 1.25rem;
    color: #3D424C;
    line-height: 1.69rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin-bottom: .5rem;
    margin-left: .4rem;
}

thead tr {
    font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
    font-weight: 400;
    font-size: 0.88rem;
    color: #7B8599;
    line-height: 1.19rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
tbody tr {
    font-family: DIN, DIN;
    font-weight: 600;
    font-size: 1.5rem;
    color: #292C33;
    line-height: 2.11rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}
</style>