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.

90 lines
2.9 KiB

8 months ago
8 months ago
8 months ago
  1. <template>
  2. <a-card hoverable>
  3. <template #cover>
  4. <img alt="example" src="http://www.wuruilin.cn/otherimg/头像.jpg" />
  5. </template>
  6. <h1>sunfree</h1>
  7. <div class="cardText"></div>
  8. <div class="button-group">
  9. <a-button v-for="(button, index) in buttons" :key="index" shape="circle" size="large"
  10. @click="handleClick(button.url)">
  11. <component :is="button.icon" />
  12. </a-button>
  13. </div>
  14. <div class="fold-panel">
  15. <a-collapse v-model:activeKey="activeKey" :bordered="false" expandIconPosition="end">
  16. <template #expandIcon="{ isActive }">
  17. <caret-right-outlined :rotate="isActive ? 90 : 0" />
  18. </template>
  19. <a-collapse-panel v-for="classtic in classticlist" :key=classtic.id :header=classtic.header
  20. :style="customStyle">
  21. <p>{{ classtic.text }}</p>
  22. </a-collapse-panel>
  23. </a-collapse>
  24. </div>
  25. </a-card>
  26. </template>
  27. <script setup lang='ts'>
  28. import { ref, onMounted } from 'vue';
  29. import iconComponents from "@/assets/index";
  30. import { get } from '@/tools/request';
  31. import type { classticInterface } from '@/api/admin';
  32. import { CaretRightOutlined } from '@ant-design/icons-vue';
  33. const buttons = ref([
  34. { icon: iconComponents.CravatarLined, url: 'https://cravatar.cn/' },
  35. { icon: iconComponents.QQLined, url: '/qqcode' },
  36. { icon: iconComponents.WechatLined, url: '/wechatcode' },
  37. { icon: iconComponents.MusicLined, url: 'https://music.163.com/#/playlist?id=160266689' },
  38. { icon: iconComponents.GitHubLined, url: 'https://gitee.com/c_panda' },
  39. ]);
  40. const classticlist = ref<classticInterface[]>([])
  41. const classticList = async () => {
  42. try {
  43. await get("/classtics/list").then(response => {
  44. if (response) {
  45. classticlist.value = response.data.data.map((item: any, index: any) => ({
  46. key: (index + 1).toString(),
  47. header: item.header,
  48. text: item.text,
  49. descr: item.descr
  50. }));
  51. } else {
  52. console.log("the interface request data does not exist!")
  53. }
  54. })
  55. } catch (error) {
  56. console.error("Failed to fetch data", error);
  57. }
  58. }
  59. const activeKey = ref(['']);
  60. const handleClick = (url: string) => {
  61. window.open(url)
  62. }
  63. const customStyle = 'background: #F5F5F5;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden';
  64. onMounted(() => {
  65. classticList()
  66. })
  67. </script>
  68. <style scoped>
  69. img {
  70. /* 图片自适应容器并保持宽高比例 */
  71. aspect-ratio: 1/1;
  72. }
  73. h1 {
  74. text-align: center;
  75. font-family: Georgia, 'Times New Roman', Times, serif;
  76. }
  77. .cardText {
  78. min-height: 60px;
  79. text-align: center;
  80. }
  81. .button-group {
  82. display: flex;
  83. margin: 0 12px 24px 12px;
  84. justify-content: space-between;
  85. }
  86. </style>