caimei-applets-mcare/pages/goods/commonStoreIndex/components/special.vue

<template>
    <view class="special">
        <view class="img">
            <image src="" mode="aspectFill" style="width: 100%;height: 100%;"></image>
        </view>
        <view class="special_title">
            <view class="title">
                买Meso X 美肤导入仪免费送采美超级会...
            </view>
            <button class="special_btn">查看详情</button>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {}
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .special {
        border-radius: 8rpx;
        margin-bottom: 24rpx;
        height: 432rpx;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .img {
        width: 100%;
        height: 360rpx;
        border: 1px dotted;
        box-sizing: border-box;
    }
    .special_title {
        height: 72rpx;
        box-sizing: border-box;
        padding: 12rpx 24rpx;
        background-color: #FFF8EF;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .special_title .title {
        color: #F3B574;
        font-size: 26rpx;
    }
    .special_btn {
        border-radius: 8rpx;
        padding: 8rpx 16rpx;
        box-sizing: border-box;
        background-color: #F3B574;
        color: #FFFFFF;
        font-size: 24rpx;
    }
</style>