caimei-applets-hehe/components/cm-module/cm-selector-coupons/cm-selector-coupons.vue

<template>
    <view class="selector-coupons" :style="{ top: top + 'px' }" v-if="visible" @click="$emit('click')">
        <image :src="image"></image>
        <view class="content">
            <text class="title">{{ title }}</text> <text class="subTitle">{{ subTitle }}</text>
        </view>
    </view>
</template>

<script>
export default {
    name: 'cm-selector-coupons',
    props: {
        top: {
            type: Number,
            default: 0
        },
        image: {
            type: String
        },
        title: {
            type: String
        },
        subTitle: {
            type: String
        },
        visible: {
            type: Boolean,
            default: false
        }
    },
    created() {
        console.log(this.title, this.subTitle)
    }
}
</script>

<style lang="scss" scoped>
.selector-coupons {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 750rpx;
    height: 128rpx;
    background: rgba(0, 0, 0, 0.7);
    box-sizing: border-box;
    padding: 0 40rpx;
    image {
        width: 78rpx;
        height: 78rpx;
        border-radius: 50%;
    }
    .content {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        margin-left: 24rpx;
        .title {
            font-size: 26rpx;
            color: #fff;
        }
        .subTitle {
            font-size: 26rpx;
            color: #fff;
            margin-top: 10rpx;
        }
    }
}
</style>