sange-bridge/components/index/app-math-card.vue

<template>
    <view class="app-math-card" @click="handleClick">
        <view class="cover-image">
            <u-image width="100%" height="200rpx" :src="coverImage"></u-image>
        </view>
        <view class="title">{{title}}</view>
    </view>
</template>

<script>
    export default {
        name: "app-math-card",
        props:{
            coverImage: {
                type: String,
                required: true
            },
            index:  {
                type: Number,
            },
            title:  {
                type: String,
                required: true
            },
            customStyle:{
                type: Object,
                default() {
                    return {};
                }
            }
        },
        data() {
            return {}
        },
        methods: {
            handleClick(){
                this.$emit('open',this.index);
            }
        },
        computed:{
            getStyle() {
                return Object.assign(this.customStyle);
            },
        }
    }
</script>

<style lang="scss" scoped>
    .app-math-card{
        width: 345rpx;
        border-radius: 16rpx;
        overflow: hidden;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 4rpx rgba(6, 149, 137, 0.15);
        background: #ffffff;
        margin-left: 10px;
        float: left;
        .cover-image{
            padding: 0 10rpx;
        }
        >.title{
            padding: 16rpx 0;
            text-align: center;
            background: $main-color;
            color: #ffffff;
        }
    }
</style>