From b655c8c8bc5f7a99ef2d71628fc8f671e591395c Mon Sep 17 00:00:00 2001
From: haiyangcui <cuiocean@gmail.com>
Date: Wed, 31 Mar 2021 18:35:26 +0200
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/style.scss       | 131 +++++++++++++++++++++++++++++++
 src/assets/scss/theme/dark.scss  |  11 +++
 src/assets/scss/theme/green.scss |  11 +++
 src/assets/scss/theme/light.scss |  11 +++
 src/assets/scss/theme/pink.scss  |  11 +++
 src/components/Detail.vue        |   4 +-
 6 files changed, 177 insertions(+), 2 deletions(-)

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index 2916668..32a6388 100644
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -441,3 +441,134 @@
     }
   }
 }
+
+// detail
+.detail{
+  .detail-content{
+    .detail-body{
+      .m3u8{
+        .show-picture{
+          height: 100%;
+          width: 100%;
+          padding: 10px;
+          .card{
+            border-radius: 6px;
+            overflow: hidden;
+            position: relative;
+            cursor: pointer;
+            transition: 0.2s;
+            &:hover {
+              width: 102%;
+              height: 102%
+            }
+            .img{
+              position: relative;
+              min-height: 40px;
+              img{
+                width: 100%;
+                height: auto;
+                cursor: pointer;
+              }
+              .rate{
+                position: absolute;
+                top: 3%;
+                right: -40%;
+                width: 100%;
+                background-color: #111111aa;
+                color:#2f90b9;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                font-weight: bolder;
+                text-align: center;
+                transform: rotate(45deg);
+              }
+              .site{
+                position: absolute;
+                top: 0%;
+                left: 0%;
+                width: 100%;
+                background-color: #111111aa;
+                color:#2f90b9;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                font-weight: bolder;
+                text-align: center;
+              }
+              .progress{
+                position: absolute;
+                bottom: 10%;
+                left: 0%;
+                width: 40%;
+                background-color: #111111aa;
+                color: #f8df70;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                font-weight: bolder;
+                text-align: left;
+              }
+              .update{
+                position: absolute;
+                top: 5%;
+                left: -40%;
+                width: 100%;
+                background-color: #68b88e;
+                color: #cdcdcd;
+                height: 30px;
+                line-height: 30px;
+                font-size: 14px;
+                text-align: center;
+                transform: rotate(-45deg);
+              }
+              .operate{
+                display: none;
+                position: absolute;
+                left: 0;
+                bottom: 0;
+                background-color: #111111aa;
+                width: 100%;
+                font-size: 13px;
+                .operate-wrap{
+                  display: flex;
+                  justify-content: space-between;
+                  .o-play, .o-star, .o-share{
+                    cursor: pointer;
+                    display: inline-block;
+                    width: 80px;
+                    height: 36px;
+                    text-align: center;
+                    line-height: 36px;
+                    color: #cdcdcd;
+                    &:hover{
+                      background-color: #111;
+                    }
+                  }
+                }
+              }
+            }
+            .name{
+              font-size: 16px;
+              padding: 10px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+            }
+            .info{
+              display: flex;
+              justify-content: space-between;
+              font-size: 12px;
+              padding: 10px;
+            }
+            &:hover{
+              .operate{
+                display: block;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/assets/scss/theme/dark.scss b/src/assets/scss/theme/dark.scss
index 6c2e3d6..90a60de 100644
--- a/src/assets/scss/theme/dark.scss
+++ b/src/assets/scss/theme/dark.scss
@@ -138,6 +138,17 @@
               }
             }
           }
+          .show-picture{
+            color: var(--d-fc-1);
+            .card{
+              background-color: var(--d-bgc-3);
+              box-shadow: var(--d-bsc);
+              transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+              &:hover{
+                box-shadow: var(--d-bsc-hover);
+              }
+            }
+          }
         }
       }
     }
diff --git a/src/assets/scss/theme/green.scss b/src/assets/scss/theme/green.scss
index e7af4cc..520b5bb 100644
--- a/src/assets/scss/theme/green.scss
+++ b/src/assets/scss/theme/green.scss
@@ -138,6 +138,17 @@
               }
             }
           }
+          .show-picture{
+            color: var(--g-fc-1);
+            .card{
+              background-color: var(--g-bgc-3);
+              box-shadow: var(--g-bsc);
+              transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+              &:hover{
+                box-shadow: var(--g-bsc-hover);
+              }
+            }
+          }
         }
       }
     }
diff --git a/src/assets/scss/theme/light.scss b/src/assets/scss/theme/light.scss
index eba43d0..9bffc35 100644
--- a/src/assets/scss/theme/light.scss
+++ b/src/assets/scss/theme/light.scss
@@ -139,6 +139,17 @@
               }
             }
           }
+          .show-picture{
+            color: var(--l-fc-1);
+            .card{
+              background-color: var(--l-bgc-3);
+              box-shadow: var(--l-bsc);
+              transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+              &:hover{
+                box-shadow: var(--l-bsc-hover);
+              }
+            }
+          }
         }
       }
     }
diff --git a/src/assets/scss/theme/pink.scss b/src/assets/scss/theme/pink.scss
index e114bb5..e3ab440 100644
--- a/src/assets/scss/theme/pink.scss
+++ b/src/assets/scss/theme/pink.scss
@@ -138,6 +138,17 @@
               }
             }
           }
+          .show-picture{
+            color: var(--p-fc-1);
+            .card{
+              background-color: var(--p-bgc-3);
+              box-shadow: var(--p-bsc);
+              transition: all 0.3s cubic-bezier(.25,.8,.25,1);
+              &:hover{
+                box-shadow: var(--p-bsc-hover);
+              }
+            }
+          }
         }
       }
     }
diff --git a/src/components/Detail.vue b/src/components/Detail.vue
index 63f0470..33a089b 100644
--- a/src/components/Detail.vue
+++ b/src/components/Detail.vue
@@ -64,8 +64,8 @@
             <span v-bind:class="{ selected: j === selectedEpisode }" v-for="(i, j) in videoList" :key="j" @click="playEvent(j)" @mouseenter="() => { selectedEpisode = j }">{{ i | ftName(j) }}</span>
           </div>
         </div>
-        <div class="listpage-body" v-show="info.recommendations && info.recommendations.length > 0">
-          <div class="show-picture">
+        <div class="m3u8">
+          <div class="show-picture" v-show="info.recommendations && info.recommendations.length > 0">
             <span>喜欢这部电影的人也喜欢 · · · · · ·</span>
             <Waterfall :list="info.recommendations" :gutter="20" :width="240"
             :breakpoints="{