|
|
@@ -2,16 +2,16 @@
|
|
|
<div :class="$style.container">
|
|
|
<template v-for="(row, rowIndex) in rowData">
|
|
|
<dv-decoration-10 v-if="rowIndex === 1" :key="`lineOne${rowIndex}`" />
|
|
|
- <div :key="`row${rowIndex}`" :class="$style.row" :style="`width: ${row.length / 4 * 100}%;`">
|
|
|
+ <div :key="`row${rowIndex}`" :class="$style.row" :style="`width: ${row.length / 2 * 100}%;`">
|
|
|
<template v-for="(item, index) in row">
|
|
|
- <div :key="`${rowIndex * 4 + index}`" :class="$style.column" :style="`width: ${1 / row.length * 100}%;`">
|
|
|
- <div :id="`card${rowIndex * 4 + index}`" />
|
|
|
+ <div :key="`${rowIndex * 2 + index}`" :class="$style.column" :style="`width: ${1 / row.length * 100}%;`">
|
|
|
+ <div :id="`card${rowIndex * 2 + index}`" />
|
|
|
</div>
|
|
|
<dv-decoration-2
|
|
|
v-if="index !== row.length - 1"
|
|
|
- :key="`line${rowIndex * 4 + index}`"
|
|
|
+ :key="`line${rowIndex * 2 + index}`"
|
|
|
:reverse="true"
|
|
|
- :dur="4 + index * 2"
|
|
|
+ :dur="2 + index * 2"
|
|
|
/>
|
|
|
</template>
|
|
|
</div>
|
|
|
@@ -45,8 +45,8 @@ export default {
|
|
|
computed: {
|
|
|
rowData () {
|
|
|
const data = []
|
|
|
- for (let i = 0; i < this.info.length; i += 4) {
|
|
|
- data.push(this.info.slice(i, i + 4))
|
|
|
+ for (let i = 0; i < this.info.length; i += 2) {
|
|
|
+ data.push(this.info.slice(i, i + 2))
|
|
|
}
|
|
|
return data
|
|
|
}
|
|
|
@@ -109,10 +109,10 @@ export default {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
width: 100%;
|
|
|
- height: calc((100% - 70px) / 3);
|
|
|
+ height: calc((100% - 70px) / 2);
|
|
|
// margin: 15px 0 15px;
|
|
|
.column {
|
|
|
- width: 24%;
|
|
|
+ width: 48%;
|
|
|
height: 100%;
|
|
|
background-color: rgba(6, 30, 93, 0.5);
|
|
|
> div {
|