组件服务详情

This commit is contained in:
851673013@qq.com 2022-06-29 19:12:12 +08:00
parent 80f61d0698
commit ff1aea83f7
4 changed files with 36 additions and 68 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {