组件服务详情
This commit is contained in:
parent
80f61d0698
commit
ff1aea83f7
|
@ -4,22 +4,17 @@
|
||||||
<div class="application-associated-ability-main">
|
<div class="application-associated-ability-main">
|
||||||
<div
|
<div
|
||||||
class="associated-ability-card"
|
class="associated-ability-card"
|
||||||
v-for="(item, index) in dataFrom"
|
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||||
:key="item.type"
|
|
||||||
>
|
|
||||||
<div class="associated-ability-card-title">
|
|
||||||
{{ item.type }}
|
|
||||||
</div>
|
|
||||||
<div class="associated-ability-card-content">
|
|
||||||
<div
|
|
||||||
class="associated-ability-card-content-font"
|
|
||||||
v-for="(dataListitem, dataListindex) in item.dataList"
|
|
||||||
:key="dataListitem.id"
|
:key="dataListitem.id"
|
||||||
@click="switchFunction(dataListitem.id)"
|
@click="switchFunction(dataListitem.id)"
|
||||||
>
|
>
|
||||||
<span>{{ dataListindex + 1 }}、</span>
|
<div class="associated-ability-card-title">
|
||||||
{{ dataListitem.name }}
|
{{ dataListitem.name }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="associated-ability-card-content">
|
||||||
|
<div class="associated-ability-card-content-font">
|
||||||
|
{{ dataListitem.description }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,11 +80,11 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.application-associated-ability-main {
|
.application-associated-ability-main {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
width: 13.14rem;
|
width: 13.3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
.associated-ability-card {
|
.associated-ability-card {
|
||||||
width: 4.28rem;
|
width: 3.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -112,9 +107,6 @@
|
||||||
margin-right: 0.15rem;
|
margin-right: 0.15rem;
|
||||||
margin-top: 0.15rem;
|
margin-top: 0.15rem;
|
||||||
}
|
}
|
||||||
.associated-ability-card-content-font:hover {
|
|
||||||
color: #0058e1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.associated-ability-card:hover {
|
.associated-ability-card:hover {
|
||||||
|
|
|
@ -4,22 +4,17 @@
|
||||||
<div class="application-associated-ability-main">
|
<div class="application-associated-ability-main">
|
||||||
<div
|
<div
|
||||||
class="associated-ability-card"
|
class="associated-ability-card"
|
||||||
v-for="(item, index) in dataFrom"
|
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||||
:key="item.type"
|
|
||||||
>
|
|
||||||
<div class="associated-ability-card-title">
|
|
||||||
{{ item.type }}
|
|
||||||
</div>
|
|
||||||
<div class="associated-ability-card-content">
|
|
||||||
<div
|
|
||||||
class="associated-ability-card-content-font"
|
|
||||||
v-for="(dataListitem, dataListindex) in item.dataList"
|
|
||||||
:key="dataListitem.id"
|
:key="dataListitem.id"
|
||||||
@click="switchFunction(dataListitem.id)"
|
@click="switchFunction(dataListitem.id)"
|
||||||
>
|
>
|
||||||
<span>{{ dataListindex + 1 }}、</span>
|
<div class="associated-ability-card-title">
|
||||||
{{ dataListitem.name }}
|
{{ dataListitem.name }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="associated-ability-card-content">
|
||||||
|
<div class="associated-ability-card-content-font">
|
||||||
|
{{ dataListitem.description }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,11 +80,11 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.application-associated-ability-main {
|
.application-associated-ability-main {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
width: 13.14rem;
|
width: 13.3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
.associated-ability-card {
|
.associated-ability-card {
|
||||||
width: 4.28rem;
|
width: 3.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -112,9 +107,6 @@
|
||||||
margin-right: 0.15rem;
|
margin-right: 0.15rem;
|
||||||
margin-top: 0.15rem;
|
margin-top: 0.15rem;
|
||||||
}
|
}
|
||||||
.associated-ability-card-content-font:hover {
|
|
||||||
color: #0058e1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.associated-ability-card:hover {
|
.associated-ability-card:hover {
|
||||||
|
|
|
@ -4,22 +4,17 @@
|
||||||
<div class="application-associated-ability-main">
|
<div class="application-associated-ability-main">
|
||||||
<div
|
<div
|
||||||
class="associated-ability-card"
|
class="associated-ability-card"
|
||||||
v-for="(item, index) in dataFrom"
|
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||||
:key="item.type"
|
|
||||||
>
|
|
||||||
<div class="associated-ability-card-title">
|
|
||||||
{{ item.type }}
|
|
||||||
</div>
|
|
||||||
<div class="associated-ability-card-content">
|
|
||||||
<div
|
|
||||||
class="associated-ability-card-content-font"
|
|
||||||
v-for="(dataListitem, dataListindex) in item.dataList"
|
|
||||||
:key="dataListitem.id"
|
:key="dataListitem.id"
|
||||||
@click="switchFunction(dataListitem.id)"
|
@click="switchFunction(dataListitem.id)"
|
||||||
>
|
>
|
||||||
<span>{{ dataListindex + 1 }}、</span>
|
<div class="associated-ability-card-title">
|
||||||
{{ dataListitem.name }}
|
{{ dataListitem.name }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="associated-ability-card-content">
|
||||||
|
<div class="associated-ability-card-content-font">
|
||||||
|
{{ dataListitem.description }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,11 +80,11 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.application-associated-ability-main {
|
.application-associated-ability-main {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
width: 13.14rem;
|
width: 13.3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
.associated-ability-card {
|
.associated-ability-card {
|
||||||
width: 4.28rem;
|
width: 3.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -112,9 +107,6 @@
|
||||||
margin-right: 0.15rem;
|
margin-right: 0.15rem;
|
||||||
margin-top: 0.15rem;
|
margin-top: 0.15rem;
|
||||||
}
|
}
|
||||||
.associated-ability-card-content-font:hover {
|
|
||||||
color: #0058e1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.associated-ability-card:hover {
|
.associated-ability-card:hover {
|
||||||
|
|
|
@ -4,22 +4,17 @@
|
||||||
<div class="application-associated-ability-main">
|
<div class="application-associated-ability-main">
|
||||||
<div
|
<div
|
||||||
class="associated-ability-card"
|
class="associated-ability-card"
|
||||||
v-for="(item, index) in dataFrom"
|
v-for="(dataListitem, dataListindex) in dataFrom[0].dataList"
|
||||||
:key="item.type"
|
|
||||||
>
|
|
||||||
<div class="associated-ability-card-title">
|
|
||||||
{{ item.type }}
|
|
||||||
</div>
|
|
||||||
<div class="associated-ability-card-content">
|
|
||||||
<div
|
|
||||||
class="associated-ability-card-content-font"
|
|
||||||
v-for="(dataListitem, dataListindex) in item.dataList"
|
|
||||||
:key="dataListitem.id"
|
:key="dataListitem.id"
|
||||||
@click="switchFunction(dataListitem.id)"
|
@click="switchFunction(dataListitem.id)"
|
||||||
>
|
>
|
||||||
<span>{{ dataListindex + 1 }}、</span>
|
<div class="associated-ability-card-title">
|
||||||
{{ dataListitem.name }}
|
{{ dataListitem.name }}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="associated-ability-card-content">
|
||||||
|
<div class="associated-ability-card-content-font">
|
||||||
|
{{ dataListitem.description }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -85,11 +80,11 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
.application-associated-ability-main {
|
.application-associated-ability-main {
|
||||||
margin-top: 0.4rem;
|
margin-top: 0.4rem;
|
||||||
width: 13.14rem;
|
width: 13.3rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
.associated-ability-card {
|
.associated-ability-card {
|
||||||
width: 4.28rem;
|
width: 3.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -112,9 +107,6 @@
|
||||||
margin-right: 0.15rem;
|
margin-right: 0.15rem;
|
||||||
margin-top: 0.15rem;
|
margin-top: 0.15rem;
|
||||||
}
|
}
|
||||||
.associated-ability-card-content-font:hover {
|
|
||||||
color: #0058e1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.associated-ability-card:hover {
|
.associated-ability-card:hover {
|
||||||
|
|
Loading…
Reference in New Issue