You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
<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>
|