blog_front/src/components/blogs/leftsite/LeftSiteInfo.vue

<template>
    <a-card hoverable>
        <template #cover>
            <img alt="example" src="http://www.wuruilin.cn/otherimg/头像.jpg" />
        </template>
        <h1>sunfree</h1>
        <div class="cardText"></div>
        <div class="button-group">
            <a-button v-for="(button, index) in buttons" :key="index" shape="circle" size="large"
                @click="handleClick(button.url)">
                <component :is="button.icon" />
            </a-button>
        </div>
        <div class="fold-panel">
            <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end">
                <template #expandIcon="{ isActive }">
                    <caret-right-outlined :rotate="isActive ? 90 : 0" />
                </template>
                <a-collapse-panel v-for="classtic in classticlist" :key=classtic.id :header=classtic.header
                    :style="customStyle">
                    <p>{{ classtic.text }}</p>
                </a-collapse-panel>
            </a-collapse>
        </div>
    </a-card>
</template>

<script setup lang='ts'>
import { ref, onMounted } from 'vue';
import iconComponents from "@/assets/index";
import { get } from '@/tools/request';
import type { classticInterface } from '@/api/admin';
import { CaretRightOutlined } from '@ant-design/icons-vue';
const buttons = ref([
    { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
    { icon: iconComponents.QQLined, url: '/qqcode' },
    { icon: iconComponents.WechatLined, url: '/wechatcode' },
    { icon: iconComponents.MusicLined, url: 'https://music.163.com/#/playlist?id=160266689' },
    { icon: iconComponents.GitHubLined, url: 'https://gitee.com/c_panda' },
]);
const classticlist = ref<classticInterface[]>([])
const classticList = async () => {
    try {
        await get("/classtics/list").then(response => {
            if (response) {
                classticlist.value = response.data.data.map((item: any, index: any) => ({
                    key: (index + 1).toString(),
                    header: item.header,
                    text: item.text,
                    descr: item.descr
                }));
            } else {
                console.log("the interface request data does not exist!")
            }
        })
    } catch (error) {
        console.error("Failed to fetch data", error);
    }
}
const activeKey = ref(['']);
const handleClick = (url: string) => {
    window.open(url)
}
const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
onMounted(() => {
    classticList()
})
</script>

<style scoped>
img {
    /* 图片自适应容器并保持宽高比例 */
    aspect-ratio: 1/1;
}

h1 {
    text-align: center;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

.cardText {
    min-height: 60px;
    text-align: center;
}

.button-group {
    display: flex;
    margin: 0 12px 24px 12px;
    justify-content: space-between;
}
</style>