样式调整

shuishen

2023-12-18 61893d402e647209ce4a0600494fa9d0df761703

样式调整

 src/views/userHouse/lable/statistics.vue

@@ -19,10 +19,10 @@
                        <div class="grid-container" v-if="item1.children">
                            <div v-for="(item2, childChildIndex) in item1.children" :key="childChildIndex">
                                <div>
                                    {{ item2.name }}
                                    {{ item2.count }}
                                </div>
                                <div>
                                    {{ item2.count }}
                                    {{ item2.name }}
                                </div>
                            </div>
                        </div>
@@ -41,14 +41,12 @@
                    <div class="grid-container">
                        <div v-for="(item1, childIndex) in item.children" :key="childIndex">
                            <div>
                                {{ item1.name }}
                            </div>

                            <div>
                                {{ item1.count }}
                            </div>
                            <div>
                                {{ item1.name }}
                            </div>
                        </div>

                    </div>
                </div>

@@ -64,10 +62,10 @@
                    <div class="grid-container">
                        <div>
                            <div>
                                {{ item.name }}
                                {{ item.count }}
                            </div>
                            <div>
                                {{ item.count }}
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
@@ -143,24 +141,23 @@

.grid-container>div {
    margin: 10px;
    padding: 0 8px;
    padding: 12px 8px;
    display: flex;
    width: calc(100% / 3 - 20px);
    flex-direction: column;
    width: calc(100% / 6 - 20px);
    background-color: #097FFE;
    text-align: center;
    line-height: 40px;
    border-radius: 10px;
    box-sizing: border-box;

    &>div:first-child {
        width: 0;
        flex: 1;
        text-align: left;
    &>div {
        line-height: 24px;
        text-align: center;
    }

    &>div:last-child {
        width: 24px;
        text-align: right;
    &>div:first-child {
        font-size: 20px;
        font-weight: bold;
    }
}