#

whycq

2023-10-01 7c2840abfa3e3ba0b1ef3f5ea96f8a0fc9955023

#

 components/z-data-list/z-data-list.vue

New file
@@ -0,0 +1,75 @@
<template>
    <view >
        <view class="main">
            <view class="main-left" >
                <view class="main-list" v-for="it in dataList" >
                    <view>key</view>
                    <view style="margin-left: 8px;">value</view>
                </view>
            </view>
            <view class="main-right">
                <view class="list-options">
                    <!-- <view class="list-number">1</view> -->
                    <view class="abdb"> > </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        name:"z-data-list",
        data() {
            return {
                dataList: [
                    {},
                    {},
                    {},
                    {},
                    {},
                    {},
                    {},
                    {}
                ]
            };
        }
    }
</script>

<style scoped>
    .main {
        position: relative;
        min-height: 70rpx;
        background-color: #fdadfc;
        display: flex;
        align-items: center;
        margin: 8px 8px 8px 8px;
    }
    .main-left {
        flex: 4;
        display: flex;
        flex-direction: column;
    }
    .main-right {
        background-color: #cccccc;
        flex: 1;
        display: flex;
        /* flex-direction: column; */
    }
    .main-list {
        display: flex;
    }
    .list-options {
        display: flex;
        flex-direction: column;
    }
    .list-number {
        position: absolute;
        right: 30px;
        top: 20px;
    }
    .abdb {
        flex: 0;
    }
</style>