#

whycq

2023-10-10 3c2720b0123fc3f3776f76325101c329566fa4c4

#

 components/plan-detail/plan-detail.vue

New file
@@ -0,0 +1,52 @@
<template>
    <view>
        <view v-for="k in info" class="item">
            <view class="item1-l">{{k.name}}</view>
            <view class="item-r">{{k.val}}</view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"plan-detail",
        props: {
            info: {
                type: [Array],
                default: [{name: 'yyy'}]
            },
        },
        computed: {
            itemInfo() {
                console.log(this.info);
                return this.info 
            },
        },
        data() {
            return {
				
            };
        }
    }
</script>

<style>
.item {
    padding: 10rpx 20rpx 0 20rpx;
    min-height: 60rpx;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 3fr;
}
.item1-l {
    min-height: 45rpx;
    line-height: 45rpx;
    color: #909399;
    text-indent: 30rpx;
}
.item-r {
    min-height: 45rpx;
    line-height: 45rpx;
    color: black;
}
</style>

 pages/index/index.vue

@@ -150,8 +150,9 @@
        font-size: 30rpx;
    }
    .top-border {
        background-color: #29EAC4;
        padding: 2px 5px;
        background-color: #3f624d;
        font-weight: 900;
        padding: 0 5px;
        border-radius: 2px;
    }