popularize-front/pages_my/collection.vue

<template>
	<view class="invoiceIssuance">
        <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">
                        <view>12/30</view>
                        <button class="mini-btn" size="mini">立即报名</button>
                    </view>
                </view>
                <i class="icon"></i>
            </view>
            <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">
                        <view>12/30</view>
                        <button class="mini-btn" size="mini">立即报名</button>
                    </view>
                </view>
                <i class="icon"></i>
            </view>
        </view>
	</view>
</template>

<script>
    import Navbar from '@/pages/components/Navbar.vue'
    import { globalMixin } from '../pages/mixins/globalMixin';
	export default{
        mixins: [globalMixin],
        components:{
            Navbar
		},
        computed: {
            customStyle1() {
                return {
                    height: '30rpx',
                    color: '#FF4546',
                }
            }
        },
		data() {
			return {
			}
		},
		methods: {
		}
	}
</script>
<style scoped lang="scss">
.invoiceIssuance {
    // margin-bottom: 500rpx;
    
    .content {
        .info {
            position: relative;
            margin: 10rpx 32rpx 36rpx;;
            border-radius: 26rpx;
            .icon {
                position: absolute;
                right: 0;
                top: 0;
                display: block;
                width: 66rpx;
                height: 56rpx;
                background: red;
                background: url('@/static/image/icon.png') no-repeat;
                background-size: 100% 100%;
            }
            .right {
                .data {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .mini-btn {
                        margin: 0;
                        background: linear-gradient(to right, #FE5E5E, #E41522);
                        height: 45rpx;
                        line-height: 45rpx;
                        width: 181rpx;
                        color:#fff;
                        border-radius: 60rpx;
                        padding-bottom: 5rpx;
                    }
                }
            }
        }
    }
}

</style>