shuyuanweb/src/views/mobile/industry/Cluster.vue

<template>
    <div
        :class="['cluster', propsData.height ? 'height_200' : '']"
        :style="{ backgroundImage: 'url(' + formatImg(propsData.data.productUrl[0]) + ')' }"
    >
        <div class="cluster-title">{{ propsData.data.leadingIndustryName }}</div>
        <div
            class="cluster-content"
            v-html="SimpleMDE.prototype.markdown(propsData.data.leadingIndustryDetail)"
        ></div>
    </div>
</template>
<script setup>
import SimpleMDE from "simplemde";
import { formatImg } from "@/utils/common.js";

const propsData = defineProps({
    data: {
        type: Object,
    },
    height: {
        type: Number,
    },
});
</script>

<style lang="scss" scoped>
.cluster {
    position: relative;
    border-radius: 10px;
    padding: 10px 20px;

    @include border-box;
    @include flex(column, flex-start, flex-start, nowrap);
    margin-bottom: 10px;
    // @include bg-image("https://img.js.design/assets/img/64abb2f1eec7205596b5791f.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    &-title {
        @include font(14px, $color-white);
        font-weight: bold;
        margin-bottom: 10px;
        z-index: 100;
    }
    &-content {
        @include font(12px, $color-white);
        line-height: 20px;
        word-break: break-word;
        z-index: 100;
    }
}
.cluster:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;

    @include border-box;
}
.height_200 {
    height: 200px;
    .cluster-content {
        @include text-ellipsis-multiple(7);
    }
}
</style>