优惠券领取提醒

components/cm-module/selector-coupons/selector-coupons.vue

@@ -0,0 +1,75 @@
+<template>
+    <view class="selector-coupons" :style="{ top: top + 'px' }" v-if="visible">
+        <image :src="image"></image>
+        <view class="content">
+            <text class="title">{{ title }}</text> <text class="subTitle">{{ subTitle }}</text>
+        </view>
+    </view>
+</template>
+
+<script>
+export default {
+    name: 'SelectorCoupons',
+    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>