eduepos_ui_store/pages/tools/sn.vue

<template>
    <view class="sn-page">
        <view class="scan-qr-code">
            <view class="label">扫码兑换商品</view>
            <u-icon name="scan" size="28" color="#6c6c6c"></u-icon>
        </view>
        <scroll-view scroll-y class="sn-list">
            <view class="item">
                <view class="row code">
                    <view class="label">兑换编码</view>
                    <view class="value">Q20230610103240002</view>
                </view>
                <view class="row">
                    <view class="label">商品名称</view>
                    <view class="value">猪肉白菜水饺</view>
                </view>
                <view class="row">
                    <view class="label">会员姓名</view>
                    <view class="value">吃不胖的王小二</view>
                </view>
                <view class="row">
                    <view class="label">获得日期</view>
                    <view class="value">2023-06-02 15:10:10</view>
                </view>
                <view class="row bb0">
                    <view class="label">兑换日期</view>
                    <view class="value">2023-06-13 10:22:38</view>
                </view>
            </view>
            <view class="item">
                <view class="row code">
                    <view class="label">兑换编码</view>
                    <view class="value">Q20230610103240001</view>
                </view>
                <view class="row">
                    <view class="label">商品名称</view>
                    <view class="value">芹菜水饺</view>
                </view>
                <view class="row">
                    <view class="label">会员姓名</view>
                    <view class="value">王小五</view>
                </view>
                <view class="row">
                    <view class="label">获得日期</view>
                    <view class="value">2023-06-02 15:10:10</view>
                </view>
                <view class="row bb0">
                    <view class="label">兑换日期</view>
                    <view class="value">2023-06-13 10:22:38</view>
                </view>
            </view>
        </scroll-view>
    </view>
</template>
<script>
export default {
    data () {
        return {

        }
    },
    methods: {

    },
    onLoad () {}
}
</script>
<style lang="scss" scoped>
.sn-page {
    background-color: #f5f5f5;
    border-top: 2rpx solid #f5f5f5;
}
.scan-qr-code {
    @include between;
    font-size: $font-base;
    height: 80rpx;
    padding: 0 20rpx;
    box-sizing: border-box;
}
.sn-list {
    height: calc(100vh - 82rpx - env(safe-area-inset-bottom));
    height: calc(100vh - 82rpx - constant(safe-area-inset-bottom));
    .item {
        background-color: #fff;
        border-bottom: 10rpx solid #f5f5f5;
        padding: 20rpx;
        box-sizing: border-box;
        font-size: $font-base;
    }
    .row {
        @include flexStart;
        margin-bottom: 20rpx;
    }
    .label {
        width: 200rpx;
    }
    .value {
        width: calc(100% - 200rpx);
    }
    .code {
        border-bottom: 2rpx solid #ececec;
        padding-bottom: 18rpx;
        box-sizing: border-box;
    }
    .bb0 {
        margin-bottom: 0;
    }
}
</style>