|
|
@ -11,10 +11,13 @@ |
|
|
|
<div class="station"> |
|
|
|
<div class="station"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<template v-for="(item,index) in curriculumList"> |
|
|
|
<template v-for="(item,index) in curriculumList"> |
|
|
|
<a class="item" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)"> |
|
|
|
<div class="item" :title="item.curriculumName" @click="goPreview(item)" :key="index" v-if="!keyword || item.curriculumName.includes(keyword)"> |
|
|
|
<img :src="item.coverUrl" alt=""> |
|
|
|
<img :src="item.coverUrl" alt=""> |
|
|
|
<p class="text" :title="item.curriculumName"><span>{{ item.curriculumName }}</span></p> |
|
|
|
<div class="bottom"> |
|
|
|
</a> |
|
|
|
<p class="text"><span>{{ item.curriculumName }}</span></p> |
|
|
|
|
|
|
|
<a>进入实验</a> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
@ -54,12 +57,12 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.search { |
|
|
|
.search { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
padding: 121px 0 167px; |
|
|
|
padding: 100px 0 130px; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
background: url(../../../assets/img/station-bg.png) 0 0/100% 100% no-repeat; |
|
|
|
background: url(../../../assets/img/station-bg.png) 0 0/100% 100% no-repeat; |
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
margin-bottom: 25px; |
|
|
|
margin-bottom: 25px; |
|
|
|
font-size: 32px; |
|
|
|
font-size: 26px; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
.input { |
|
|
|
.input { |
|
|
@ -98,25 +101,32 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
.item { |
|
|
|
.item { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
width: 256px; |
|
|
|
padding: 0 10px; |
|
|
|
height: 195px; |
|
|
|
margin: 0 10px 40px; |
|
|
|
margin: 0 6px 4px; |
|
|
|
text-align: center; |
|
|
|
|
|
|
|
background-color: #fff; |
|
|
|
|
|
|
|
border-radius: 8px; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
opacity: .9; |
|
|
|
opacity: .9; |
|
|
|
} |
|
|
|
} |
|
|
|
img { |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
width: 215px; |
|
|
|
height: 100%; |
|
|
|
height: 118px; |
|
|
|
|
|
|
|
margin-top: -20px; |
|
|
|
} |
|
|
|
} |
|
|
|
.text { |
|
|
|
.bottom { |
|
|
|
position: absolute; |
|
|
|
|
|
|
|
bottom: 14px; |
|
|
|
|
|
|
|
left: 25px; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
align-items: center; |
|
|
|
|
|
|
|
padding: 10px 5px; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
.text { |
|
|
|
|
|
|
|
display: inline-flex; |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
width: 130px; |
|
|
|
width: 130px; |
|
|
|
height: 50px; |
|
|
|
height: 40px; |
|
|
|
|
|
|
|
text-align: left; |
|
|
|
font-size: 12px; |
|
|
|
font-size: 12px; |
|
|
|
line-height: 1.6; |
|
|
|
line-height: 1.6; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
@ -124,6 +134,14 @@ export default { |
|
|
|
@include mul-ellipsis(2); |
|
|
|
@include mul-ellipsis(2); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
a { |
|
|
|
|
|
|
|
padding: 0 8px; |
|
|
|
|
|
|
|
line-height: 28px; |
|
|
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
color: #7A7A7A; |
|
|
|
|
|
|
|
border-radius: 20px; |
|
|
|
|
|
|
|
border: 1px solid #DADADA; |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
</style> |