This commit is contained in:
2026-08-19 19:45:04 +08:00
parent 4de893ca94
commit cd24d68481
37 changed files with 1937 additions and 746 deletions
@@ -1,6 +1,7 @@
import { asyncComputed } from '@vueuse/core'
import api from '@/api'
import './style.scss'
import { UiDataSection } from '@/components/ui/data-section'
import { TabsRoot, UiTabsList, UiTabsTrigger } from '@/components/ui/tabs'
export default defineComponent({
@@ -86,32 +87,48 @@ export default defineComponent({
const renderSkillDetail = () => (
<>
<div class="skill_title">基本信息</div>
<div class="skill-detail__stack">
{basic.value.map(
(item) =>
!!item.value && (
<div class="item skill-detail__row">
<span class="label">{item.label}</span>
<span class="value">{item.value}</span>
</div>
),
)}
</div>
<div class="skill_title">技能描述</div>
<div class="skill-detail__description-frame">
<div class="skill-detail__scroll-content">
{desc.value?.map((item) => (
// item.startsWith('[') || item.startsWith('-') || item.startsWith('<') ? (
// <div class="min-h-10px">{item}</div>
// ) :
<div class="skill-detail__description-line">{item}</div>
))}
<UiDataSection
class="skill-detail__section"
title="基本信息"
compact
showState={false}
indicatorPosition="end"
>
<div class="skill-detail__stack">
{basic.value.map(
(item) =>
!!item.value && (
<div class="item skill-detail__row">
<span class="label">{item.label}</span>
<span class="value">{item.value}</span>
</div>
),
)}
</div>
</div>
</UiDataSection>
<UiDataSection
class="skill-detail__section"
title="技能描述"
compact
showState={false}
indicatorPosition="end"
>
<div class="skill-detail__description-frame">
<div class="skill-detail__scroll-content">
{desc.value?.map((item) => (
<div class="skill-detail__description-line">{item}</div>
))}
</div>
</div>
</UiDataSection>
{detail.value.length > 0 && (
<>
<div class="skill_title">技能属性</div>
<UiDataSection
class="skill-detail__section skill-detail__section--grow"
title="技能属性"
compact
showState={false}
indicatorPosition="end"
>
<div class="skill-detail__flex-scroll">
<div class="skill-detail__stack">
{detail.value.map((item) => (
@@ -119,7 +136,7 @@ export default defineComponent({
))}
</div>
</div>
</>
</UiDataSection>
)}
</>
)
@@ -132,10 +149,17 @@ export default defineComponent({
<>
<div class="skill-detail__stack">
<div class="skill_vp_title">{item.name}</div>
<div class="skill_title">技能描述</div>
<div class="skill-detail__evolution-scroll">
<div class="skill-detail__evolution-copy">{item.descDetail}</div>
</div>
<UiDataSection
class="skill-detail__section"
title="技能描述"
compact
showState={false}
indicatorPosition="end"
>
<div class="skill-detail__evolution-scroll">
<div class="skill-detail__evolution-copy">{item.descDetail}</div>
</div>
</UiDataSection>
</div>
</>
))}
@@ -46,6 +46,29 @@
overflow-y: auto;
}
.skill-detail__section {
flex: 0 0 auto;
border-color: #3e4040;
}
.skill-detail__section--grow {
min-height: 0;
flex: 1;
}
.skill-detail__section .ui-data-section__content {
min-height: 0;
padding: 0;
}
.skill-detail__section--grow .ui-data-section__content {
display: flex;
min-height: 0;
flex: 1;
flex-direction: column;
overflow: hidden;
}
.skill-detail__evolution {
height: auto;
}
@@ -136,16 +159,6 @@
}
}
.skill_title {
border: 1px solid #3e4040;
color: #c1a238;
background: linear-gradient(180deg, #2b292b 0%, #0b0b0b 100%);
height: 20px;
display: flex;
align-items: center;
padding: 0px 5px;
}
.item {
background-color: #171616;
padding: 0px 5px;