<template>
    <view
        class="cooperation-banner-wrapper"
        :style="{'background-image': 'url(' + url + ')'} | imgCompress('background-image', {column: 12})"
    />
</template>

<script>
/**
 * @file 头图
 * @author mazihan
 */

export default {
    config: {
        component: true
    },
    props: {
        /**
         * title
         */
        url: {
            type: String,
            default: ''
        }
    },
};
</script>
<style lang="less" scoped>
.cooperation-banner-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: 0 0;
    background-repeat: no-repeat;

    .content {
        position: absolute;
        left: .17rem;
        width: 2rem;
        top: 44%;

        .text {
            font-size: .27rem;
            color: #fff;
            line-height: .33rem;
        }

        .logo-wrap {
            margin-top: .06rem;
            display: flex;
            align-items: center;
        }

        .logo {
            background-size: 100% auto;
            background-position: 0 0;
            background-repeat: no-repeat;
        }

        .logo-drug {
            width: .81rem;
            height: .14rem;
            margin-right: .08rem;
        }

        .logo-firm {
            width: .67rem;
            height: .13rem;

            &.baike {
                width: .45rem;
                height: .14rem;
            }
        }
    }
}
</style>
