popularize-front/pages_order/invoiceRecords.vue

<template>
     <view class='invoiceRecords'>
        <view class="head-box"></view>
        <Navbar title="开票记录" :autoBack="true" :bgColor="bgColor" leftIconSize="18px" height="100rpx" :leftIconColor="leftIconColor" :titleStyle="{color:fontColor}" />
        <view class="content contentPosition_">
            <view class="info cardStyle_">
                <view class="left">
                    <image src="https://img0.baidu.com/it/u=4274003247,920124130&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1031" alt="">
                </view>
                <view class="right">
                    <view class="detailed">
                        <view class="title">夏日去撒野旅游计划～</view>
                        <view class="date">2024.10.28 10:00</view>
                        <view class="address">成都市东丽湖露营地32号</view>
                    </view>
                    <view class="data">
                        <text>标准票</text>
                        <text>×3</text>
                        <text class="btn">已开票</text>
                    </view>
                </view>
            </view>
        </view>
     </view>
</template>

<script>
import Navbar from '@/pages/components/Navbar.vue'
import { globalMixin } from '../pages/mixins/globalMixin';

export default {
     mixins: [globalMixin],
    components:{
        Navbar
    },
    data() {
        return {

        };
    },
    components: {

    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {

    },
    methods: {

    }
};
</script>

<style scoped lang="scss">
.invoiceRecords {
    .info {
        margin: 10rpx 32rpx 0rpx;
        padding: 35rpx 0 35rpx 24rpx;
        border-radius: 26rpx;
        .right {
            .data {
                display: flex;
                justify-content: space-between;
                .btn {
                    background: #381615;
                    color: $uni-color-primary;
                    padding: 10rpx 40rpx;
                    border-radius: 30rpx 0px 0px 30rpx;
                }
            }
        } 
    }
    
}
</style>