<template>
    <view class="recommend-banner">
        <b-navigate
            :url="url"
            :extra="{
                mod: 'science-detail-overview-recommend-banner',
                page: page
            }"
        >
            <view class="recommend-banner__inner">
                <view v-if="image" class="recommend-banner__image__wrapper">
                    <c-image
                        has-compress
                        class="recommend-banner__image"
                        :src="image"
                        width="100%"
                        height="126px"
                        :is-round="false"
                        radius=".08rem"
                        :extra="{column: 11}"
                    />
                </view>
                <view class="recommend-banner__text c-line-clamp1 c-gap-left">
                    <view class="recommend-banner__text__title c-line-clamp1">{{ title }}</view>
                    <view class="recommend-banner__text__overview c-line-clamp2">{{ overview }}</view>
                </view>
            </view>
        </b-navigate>
    </view>
</template>

<script>
import Navigate from '../../../components/common/navigate';
import CImage from '@components/common/image';

export default {
    config: {
        component: true
    },
    props: {
        url: String,
        image: String,
        title: String,
        overview: String,
        page: String
    },
    components: {
        'b-navigate': Navigate,
        CImage
    }
};
</script>

<style lang="less" scoped>
.recommend-banner {
    &__inner {
        display: flex;
        height: 80px;
        background: #f8f8f8;
        border-radius: 5px;
        overflow: hidden;
        align-items: center;
    }

    &__image,
    &__image__wrapper {
        width: 80px;
        height: 80px;
    }

    &__text {
        padding-right: 5px;

        &__title {
            font-size: 16px;
            color: #333;
        }

        &__overview {
            font-size: 13px;
            color: #999;
            margin: 0;
        }
    }
}

</style>
