caimei-applets-caimei/pages/login/components/activeTeamCom.vue

<template>
    <view class="growth-module">
        <view v-if="active === 2" class="cell-1" @click="playVideo">
            <view class="image">
                <image :src="module.headAppBanner" mode=""></image>
            </view>
            <view class="content text-line">
                {{ module.title }}
            </view>
        </view>
        <view v-else class="cell-2" @click="handlerTramp(module)">
            <view class="image">
                <image :src="module.headAppBanner" mode=""></image>
            </view>
            <view class="content">
                <view class="title">
                    {{ module.title }}
                </view>
                <view class="cont text-line" v-if="module.content">
                    {{ module.content && module.content.match(/[\u4e00-\u9fa5]/g).join('') }}
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        module: {
            type: Object,
            default: () => ({})
        },
        active: {
            type: Number,
            default: () => 1
        }
    },
    methods: {
        handlerTramp($event) {
            let data = $event.content.replace(/<img/g, '<img style="width: 100%;height: 200px"')
            data = data.replace(/\<figure/g, '<div')
            data = data.replace(/\<\/figure/g, '<\/div')
            uni.setStorageSync('artForm', data)
            uni.navigateTo({
                url: '/pages/login/supplier_information'
            })
        },
        // 视频播放
        playVideo() {
            this.$emit('playVideo', this.module)
        },
        // 视频关闭
        closeVideo() {
            this.showVideo = false
        },
    }
}
</script>

<style scoped lang="scss">
.growth-module {
    width: 322rpx;
    height: 328rpx;
    border: 1px solid #EAEAEA;
    box-sizing: border-box;
    .cell-1 {
        .image {
            height: 185rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .content {
            height: calc(100% - 220rpx);
            font-size: 26rpx;
            color: #333333;
            line-height: 40rpx;
            box-sizing: border-box;
            padding: 30rpx 18rpx 0 18rpx;
        }
    }
    .cell-2 {
        .image {
            height: 193rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .content {
            height: calc(100% - 193rpx);
            padding: 17rpx 0;
            font-size: 22rpx;
            color: #666666;
            box-sizing: border-box;
            .title {
                border-left: 4rpx solid #FF5B00;
                padding-left: 20rpx;
                color: #333333;
                font-size: 28rpx;
            }
            .cont {
                padding-left: 20rpx;
                line-height: 32rpx;
            }
        }
    }
}
.text-line {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    box-sizing: border-box;
}
</style>