翻书

src/views/courseware-list/index.module.less

@@ -154,6 +154,36 @@
   flex-shrink: 0;
   z-index: 1;
 
+  .item {
+    position: relative;
+    margin-bottom: 15px;
+    width: 100%;
+    height: 170px;
+    background-color: #EDEFF2;
+    box-shadow: 0 5px 14Px rgba(0,0,0,0.4);
+    &::before {
+      content: "";
+      position: absolute;
+      top: 4Px;
+      right: -4Px;
+      width: 4Px;
+      height: calc(100% - 8Px);
+      background-color: #c5c5c5;
+      z-index: 1;
+    }
+
+    &::after {
+      content: "";
+      position: absolute;
+      top: 2Px;
+      right: -2Px;
+      width: 4Px;
+      height: calc(100% - 4Px);
+      background-color: #e7e7e7;
+      z-index: 2;
+    }
+  }
+
 
   .name {
     font-size: 11px;
@@ -206,7 +236,6 @@
   display: block;
   width: 100%;
   height: 170px;
-  margin-bottom: 15px;
   background-color: #edeff2;
   background-image: url('./image/icon_default.svg');
   background-repeat: no-repeat;

src/views/courseware-list/index.tsx

@@ -285,7 +285,9 @@ export default defineComponent({
                   key={item.key}
                   onClick={() => handleOpen(item)}>
                   {/* courseware- */}
-                  <NImage
+
+                  <div class={styles.item}>
+                    <NImage
                       data-id={item.id}
                       {...{ id: index == 0 ? 'courseware-0' : '' }}
                       class={[styles.cover, item.load ? styles.loaded : '']}
@@ -298,6 +300,7 @@ export default defineComponent({
                         item.load = true;
                       }}
                     />
+                  </div>
 
                   <div class={styles.name}>{item.name}</div>
                   <div