<template>
    <view class="recommend-banner-image">
        <b-navigate
            :url="url"
            :extra="{
                mod: 'science-detail-overview-recommend-banner-image',
                page: page
            }"
        >
            <view
                v-if="topLine"
                class="c-line-top spe-topic-recommend-line"
            ></view>
            <view class="recommend-banner-image__inner">
                <!-- <image
                    :src="image"
                    :mode="'widthFix'"
                    lazy-load
                    class="image-self"
                    :style="{ 'width': '100%', 'height': 'auto','border-radius': '8px'}">
                </image> -->
                <c-image
                    has-compress
                    :src="image"
                    :mode="'widthFix'"
                    lazy-load
                    width="100%"
                    height="auto"
                    :is-round="false"
                    radius=".08rem"
                    :extra="{column: 11}"
                />
            </view>
        </b-navigate>
    </view>
</template>

<script>
/**
* @file 活动页
* @author yantingxi
*/
import Navigate from '../../../components/common/navigate';
import CImage from '@components/common/image';
export default {
    config: {
        component: true
    },
    props: {
        url: String,
        image: String,
        page: String,
        topLine: Boolean,
        ratio: {
            type: Number,
            default: 3 / 4
        }
    },
    components: {
        'b-navigate': Navigate,
        CImage
    }
};
</script>

<style lang="less" scoped>
.recommend-banner-image {
    &__inner {
        padding: 15px 17px 15px;
    }

    .image-self {
        display: block;
    }
}
</style>
