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.
91 lines
2.9 KiB
91 lines
2.9 KiB
<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>
|