cocorobo/components/Platform.vue

<script setup>
import { defineProps, onMounted } from 'vue';
import VanillaTilt from 'vanilla-tilt';
const props = defineProps({
    title: String,
    content: String,
    img: String,
    link: String
})
onMounted(() => {
    VanillaTilt.init(document.querySelector(".platform-item"), {
        max: 25,
        speed: 400,
    });
    VanillaTilt.init(document.querySelectorAll(".platform-item"));
});
</script>
<template>
    <div class="platform-item">
        <div class="platform-img">
            <img :src="img" alt="">
        </div>
        <div class="platform-content">
            <div class="platform-title" v-html="title">
            </div>
            <div class="platform-desc">
                {{ content }}
            </div>
        </div>
        <div class="platform-link">
            <a :href="link" target="_blank">点击进入</a>
        </div>
    </div>
</template>
<style scoped lang="scss">
.platform-item {
    background-color: rgb(46, 62, 63);
    color: #fff;
    padding: 0px 10px 20px;
    min-height: 430px;
    width: 100%;
    margin-top: 50px;
    text-align: center;
    position: relative;

    .platform-img {
        text-align: center;
        img {
            width: 80%;
        }
    }
    .platform-content{
        .platform-title{
            font-weight: 700;
            font-size: 24px;
            margin-bottom: 20px;
        }
        .platform-desc{
            padding: 15px 0;
            font-size: 14px;
        }
    }

    .platform-link {
        a {
            padding: 5px 10px;
            background: rgb(255, 255, 255);
            color: rgb(46, 62, 63);
            font-size: 14px;
            border-radius: 3px;
            font-weight: 600;
            position: absolute;
            bottom: 25px;
            left: calc(50% - 38px);
            text-decoration: none;
        }
    }
}
</style>