34 lines
643 B
Vue
34 lines
643 B
Vue
|
<template>
|
||
|
|
<div class="tab-content grid md:overflow-hidden">
|
||
|
|
<template v-for="(mission, index) in $store.state.missions">
|
||
|
|
<progress-button
|
||
|
|
:key="index"
|
||
|
|
:label="mission.name"
|
||
|
|
:description="mission.description"
|
||
|
|
:max="100"
|
||
|
|
:value="50 * (2 - index)"
|
||
|
|
/>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.tab-content {
|
||
|
|
--columns: 1;
|
||
|
|
grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
|
||
|
|
grid-gap: 1rem;
|
||
|
|
}
|
||
|
|
/* md */
|
||
|
|
@media (min-width: 768px) {
|
||
|
|
.tab-content {
|
||
|
|
--columns: 2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* 2xl */
|
||
|
|
@media (min-width: 1536px) {
|
||
|
|
.tab-content {
|
||
|
|
--columns: 3;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|