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

<template>
    <view class="special" @click="activeProduct">
        <view class="img">
            <image :src="activeImage.image" mode="aspectFill" style="width: 100%;height: 100%;"></image>
        </view>
        <view class="special_title">
            <view class="title">
                {{activeImage.topic | subText(25)}}
            </view>
            <view class="">
                <button class="special_btn">查看详情</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            activeImage: {
                type: Object,
                default: () => {}
            }
        },
        data() {
            return {}
        },
        filters: {
            subText(str, index) {
                if(str) {
                    if (str.length <= index) {
                        return str
                    }
                    return str.substring(0, index) + '...'
                }
                return str
            }
        },
        methods: {
            activeProduct() {
                uni.navigateTo({
                    url: '/pages/goods/active-product?activeImageId=' + this.activeImage.id
                })
            },
        }
    }
</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;
        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;
        width: 128rpx;
        height: 48rpx;
        text-align: center;
        display: flex;
        align-items: center;
    }
</style>