فهرست منبع

add home animation

Michael Wang 6 سال پیش
والد
کامیت
f5f7906b36
1فایلهای تغییر یافته به همراه20 افزوده شده و 1 حذف شده
  1. 20 1
      src/modules/portal/views/home/main/HomeMain.vue

+ 20 - 1
src/modules/portal/views/home/main/HomeMain.vue

@@ -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;