update
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user