排行榜悬浮样式

src/views/portal/course/Index.vue

@@ -122,7 +122,7 @@
             <div class="ranking-card portal-right-box list-bg">
                 <p class="portal-title-one" style="padding-bottom:12px">好评榜</p>
                 <ul>
-                   <li v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
+                   <li class="list-info" v-for="(item, index) in scorelist" :key="index" style="cursor: pointer;margin-top:24px;line-height: 30px;display: flex;">
                         <span class="portal-right-text blue-one" v-if="index==0">
                           <img src="/images/listblue01.png" alt="">
                         </span>
@@ -143,7 +143,23 @@
                           <img style="width:96px;height:52px" :src="fileBaseUrl + item.images" alt=""/>
                           <span class="portal-images-title two-line-ellipsis">{{ item.name }}</span>
                         </span>
+
+                      <div class="list-active">
+                         <div class="list-content">
+                           <div class="list-img"><img src="/images/list-img.png" alt=""></div>
+                           <div class="list-text">
+                             <h6>京东方位列世界知识产权组织2021年专利申请榜产权组织2021年专利申请榜全球</h6>
+                             <span>2022年2月18日</span>
+                           </div>
+                         </div>
+                         <div class="list-bottom">
+                            点赞组件
+                         </div>
+                      </div>
+                        
+
                    </li>
+                   
                 </ul>
               </div>
             <div style="margin-top:26px" class="ranking-card portal-right-box list-bg1">
@@ -742,6 +758,56 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.list-active{
+  display: none;
+  width: 458px;
+  height: 165px;
+  padding: 20px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  box-shadow: 0px 2px 12px 0px rgba(0,0,0,0.05);
+  border-radius: 2px;
+  border: 1px solid #EDEFF0;
+  position: absolute;
+  top: 30px;
+  left: -16%;
+  z-index: 999;
+  .list-content{
+    display: flex;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #EDEFF0;
+    .list-img{
+      width: 125px;
+      height: 70px;
+      img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .list-text{
+      flex: 1;
+      margin-left: 12px;
+      h6{
+        font-size: 14px;
+        margin: 0px;
+        font-weight: 500;
+        line-height: normal;
+        color: #04243C;
+      }
+      span{
+        font-size: 14px;
+        color: #6E7B84;
+      }
+    }
+  }
+}
+.list-info{
+  position: relative;
+}
+.list-info:hover .list-active{
+  display: block;
+}
+
   .course-banner{
     height: 240px;
     background: url('/images/course-banner.png');