解决视频显示问题

cf-pages · Dec 9, 2024 · 10cac37 · 10cac37
1 parent 679d838
commit 10cac37
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 22 deletions.
diff --git a/admin-imgtc.css b/admin-imgtc.css
@@ -299,24 +299,21 @@ body {
   position: relative;
   justify-content: center;
   align-items: center;
-  max-height: 256px;
   box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
   transition: transform 0.3s ease;
 }
 
 .video-card{
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(135deg, rgba(178, 107, 255, 0.85) 0%, rgba(138, 180, 255, 0.85) 100%);
+  background-color: #8EC5FC;
+  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
 }
 
-.audio-card.selected {
-  background: linear-gradient(135deg, rgba(138, 75, 255, 0.85) 0%, rgba(255, 215, 228, 0.85) 100%);
+.video-card .el-card__body{
+  padding: 0 !important;
 }
 
-.video-card.selected {
-  background: linear-gradient(135deg, rgba(186, 104, 255, 0.85) 0%, rgba(111, 163, 252, 0.85) 100%);
+.audio-card.selected, .video-card.selected {
+  background: linear-gradient(135deg, rgba(138, 75, 255, 0.85) 0%, rgba(255, 215, 228, 0.85) 100%);
 }
 
 .video-card:hover, .audio-card:hover {
@@ -327,7 +324,6 @@ body {
   padding: 12px;
   color: white;
   width: 100%;
-  height: 100%;
   box-sizing: border-box;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -336,15 +332,8 @@ body {
 .video-content{
   display: flex;
   flex-direction: column;
-}
-
-.video-content video {
-  flex: 1;
-  width: 100%;
-  height: calc(100% - 60px);
-  object-fit: cover;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.1);
+  justify-content: center;
+  align-items: center;
 }
 
 .audio-header {
@@ -383,6 +372,7 @@ body {
   margin-bottom: 4px;
 }
 .video-title{
+  margin: 6px 0;
   font-size: 0.9em;
 }
 .audio-subtitle {

diff --git a/admin-imgtc.html b/admin-imgtc.html
@@ -94,7 +94,7 @@
                 </div>
               </div>
               <div class="card-footer">
-                <el-popover trigger="hover" placement="top">
+                <el-popover trigger="hover" placement="top" :show-after="1000">
                   <p v-html="formattedFileDetails(item)"></p>
                   <div slot="reference">
                     <span :style="{ color: item.metadata.ListType !== 'Block' ? '#fff' : '#aaa' }">{{ item.name }}</span>
@@ -109,7 +109,7 @@
                 <div class="video-content">
                   <video :src="'/file/' + item.name" controls style="width: 100%; height: 100%; object-fit: cover;"></video>
                   <div class="video-title">
-                    <el-popover trigger="hover" placement="top">
+                    <el-popover trigger="hover" placement="top" :show-after="1000">
                       <p v-html="formattedFileDetails(item)"></p>
                       <div slot="reference">
                         <span :style="{ color: item.metadata.ListType !== 'Block' ? '#fff' : '#aaa' }">{{ item.name }}</span>
@@ -145,7 +145,7 @@
                     </div>
                     <div class="audio-info">
                       <div class="audio-title">
-                        <el-popover trigger="hover" placement="top">
+                        <el-popover trigger="hover" placement="top" :show-after="1000">
                           <p v-html="formattedFileDetails(item)"></p>
                           <div slot="reference">
                             <span :style="{ color: item.metadata.ListType !== 'Block' ? '#fff' : '#aaa' }">{{ item.name }}</span>