MastersDetail.vue
2.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!--
* @Date: 2025-10-30 20:00:25
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-11-04 11:28:14
* @FilePath: /stdj_h5/src/views/MastersDetail.vue
* @Description: 文件描述
-->
<template>
<div class="masters-detail-container">
<section class="single-list">
<div class="item-card">
<img :src="article_item.src" :alt="article_item.title" class="item-image" />
<div class="item-content">
<div class="item-role">{{ article_item.role }}</div>
<div class="item-name" v-html="formatNameWithSuperscript(article_item.name)"></div>
<div class="item-desc">{{ article_item.desc }}</div>
</div>
</div>
</section>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useTitle } from '@vueuse/core';
import { useRoute, useRouter } from 'vue-router'
// 导入接口
import { getArticleDetailAPI } from '@/api/index.js'
useTitle('三師七證 - 詳情')
const route = useRoute()
const router = useRouter()
const article_item = ref({})
/**
* 为name字段的第一个文字添加上标效果
* @param {string} name - 原始姓名
* @returns {string} - 带上标的HTML字符串
*/
const formatNameWithSuperscript = (name) => {
if (!name || name.length === 0) return name
const firstChar = name.charAt(0)
const restChars = name.slice(1)
return `<sup style="font-size: 0.6rem;">上</sup>${firstChar}<sup style="font-size: 0.6rem;">下</sup>${restChars}`
}
/**
* 加载文章详情
*/
const loadArticleDetail = async () => {
try {
const articleId = route.params.id
const { code, data } = await getArticleDetailAPI({ i: articleId })
if (code) {
// 遍历data对象，将每个元素转换为新的对象格式
article_item.value = {
id: data.id,
role: data.post_excerpt,
name: data.post_title,
src: data?.file_list?.photo?.value,
desc: data.post_content
}
}
} catch (error) {
console.error('加载文章详情失败:', error)
}
}
onMounted(() => {
loadArticleDetail()
})
</script>
<style scoped>
.masters-detail-container {
padding: 1.5rem;
background: #F2EBDB;
min-height: 100vh;
/* 背景至少覆盖整个视口高度 */
width: 100%;
box-sizing: border-box;
}
.single-list {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1rem;
}
.item-card {
position: relative;
padding: 0.5rem;
background: #F2EBDB;
border: 2px solid #6B4102;
overflow: hidden;
transition: transform 0.2s ease;
}
.item-image {
width: 100%;
height: auto;
display: block;
}
.item-content {
padding: 0.85rem;
text-align: center;
color: #6B4102;
background: #FCF8F1;
}
.item-role {
font-size: 0.75rem;
opacity: 0.95;
}
.item-name {
font-size: 1.25rem;
font-weight: 600;
margin-top: 0.25rem;
}
.item-desc {
margin-top: 0.5rem;
}
</style>