|
@@ -11,8 +11,9 @@
|
|
|
:class="['module-card', index % 2 ? 'float-left' : 'float-right']"
|
|
|
@click="() => $router.push('/' + menu.ext4 + '/tips')"
|
|
|
>
|
|
|
- <div>
|
|
|
+ <div style="position: relative">
|
|
|
<img :class="['module-image', menu.ext4 + '-main-module']" />
|
|
|
+ <div class="cover"></div>
|
|
|
</div>
|
|
|
<div
|
|
|
class="align-self-left d-flex d-flex flex-column align-items-start module-desc"
|
|
@@ -135,6 +136,24 @@ export default {
|
|
|
box-shadow: 0px 5px 20px 0px #55bfff;
|
|
|
color: #4d7cc4 !important;
|
|
|
}
|
|
|
+.module-card .cover {
|
|
|
+ width: 100px;
|
|
|
+ height: 116px;
|
|
|
+ position: absolute;
|
|
|
+ top: -13px;
|
|
|
+ left: 0px;
|
|
|
+ transition: all 1s ease-in-out;
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.8);
|
|
|
+}
|
|
|
+.module-card:hover .cover {
|
|
|
+ /* background-color: transparent !important; */
|
|
|
+ /* left: -100px; */
|
|
|
+ width: 0px !important;
|
|
|
+ left: -80px !important;
|
|
|
+ /* transition: all 2s ease-in-out; */
|
|
|
+}
|
|
|
.module-desc {
|
|
|
background-color: white;
|
|
|
padding: 10px;
|