|
@@ -1,10 +1,10 @@
|
|
<template>
|
|
<template>
|
|
<div class="train">
|
|
<div class="train">
|
|
<Header @confirmExit="getExit" :showTool="false" closeClass="close2"></Header>
|
|
<Header @confirmExit="getExit" :showTool="false" closeClass="close2"></Header>
|
|
- <div class="menu" :class="projectList.length <= 6 ? 'menu1' : 'menu2'">
|
|
|
|
|
|
+ <div class="menu" :class="projectList.length <= 12 ? 'menu1' : 'menu2'">
|
|
<swiper :slides-per-view="6" :modules="[Grid]" :grid="{
|
|
<swiper :slides-per-view="6" :modules="[Grid]" :grid="{
|
|
- fill: projectList.length <= 6 ? 'row' : 'column',
|
|
|
|
- rows: projectList.length <= 6 ? 1 : 2,
|
|
|
|
|
|
+ fill: projectList.length <= 12 ? 'row' : 'column',
|
|
|
|
+ rows: 2,
|
|
}" :space-between="20" :slides-per-group="12">
|
|
}" :space-between="20" :slides-per-group="12">
|
|
<swiper-slide v-for="(item, index) in projectList " :key="index" @click="getOption(item)">
|
|
<swiper-slide v-for="(item, index) in projectList " :key="index" @click="getOption(item)">
|
|
<div class="li">
|
|
<div class="li">
|
|
@@ -142,7 +142,7 @@ $waiPadding: 6.51rem;
|
|
// margin-right: 1rem;
|
|
// margin-right: 1rem;
|
|
// margin-bottom: 1rem;
|
|
// margin-bottom: 1rem;
|
|
width: 100%;
|
|
width: 100%;
|
|
- height: 100%;
|
|
|
|
|
|
+ height: calc((72vh / 2) - 10px);
|
|
padding: 2.2vh 0;
|
|
padding: 2.2vh 0;
|
|
border-radius: 1.6rem;
|
|
border-radius: 1.6rem;
|
|
box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
@@ -197,15 +197,24 @@ $waiPadding: 6.51rem;
|
|
}
|
|
}
|
|
|
|
|
|
.menu1 {
|
|
.menu1 {
|
|
|
|
+ .swiper-slide {
|
|
|
|
+ margin-bottom: 20px;
|
|
|
|
|
|
- .swiper-slide:nth-child(odd) {
|
|
|
|
- background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
|
|
|
|
- }
|
|
|
|
|
|
+ .li {
|
|
|
|
+ background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
|
|
|
|
+ }
|
|
|
|
|
|
- .swiper-slide:nth-child(even) {
|
|
|
|
- background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
|
|
|
+ &:nth-child(2),
|
|
|
|
+ &:nth-child(4),
|
|
|
|
+ &:nth-child(6),
|
|
|
|
+ &:nth-child(7),
|
|
|
|
+ &:nth-child(9),
|
|
|
|
+ &:nth-child(11) {
|
|
|
|
+ .li {
|
|
|
|
+ background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
-
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.menu2 {
|
|
.menu2 {
|
|
@@ -235,7 +244,9 @@ $waiPadding: 6.51rem;
|
|
&:nth-child(40),
|
|
&:nth-child(40),
|
|
&:nth-child(41),
|
|
&:nth-child(41),
|
|
&:nth-child(44) {
|
|
&:nth-child(44) {
|
|
- background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
|
|
|
|
|
|
+ .li {
|
|
|
|
+ background: radial-gradient(96% 96% at 2% 32%, #FFFFFF 0%, #FCFDFD 54%, #E1E4E7 100%);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
&:nth-child(2),
|
|
&:nth-child(2),
|
|
@@ -260,7 +271,9 @@ $waiPadding: 6.51rem;
|
|
&:nth-child(39),
|
|
&:nth-child(39),
|
|
&:nth-child(42),
|
|
&:nth-child(42),
|
|
&:nth-child(43) {
|
|
&:nth-child(43) {
|
|
- background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
|
|
|
+ .li {
|
|
|
|
+ background: radial-gradient(167% 126% at 97% 6%, #35FFC6 0%, #00FFE8 100%);
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|