update AlbumPost.vue

src/views/my/AlbumPost.vue

@@ -4,34 +4,35 @@
       <div v-if="albumInfo" class="album-info-wrapper">
         <div class="album-cover-box">
           <el-image lazy fit="cover" class="header-cover-img" :src="albumInfo.coverUrl" />
+          <div class="cover-glass-overlay"></div>
         </div>
 
         <div class="album-detail-content">
           <div class="top-row">
             <h2 class="album-title">{{ albumInfo.title || '播放列表' }}</h2>
-            <el-button type="primary" size="small" icon="el-icon-video-play" class="play-all-btn" @click="onPlayAlbum">播放全部</el-button>
+            <el-button type="primary" size="medium" icon="el-icon-video-play" class="play-all-btn" @click="onPlayAlbum">播放全部</el-button>
           </div>
 
           <div class="filter-row">
             <div class="select-group">
               <span class="label hidden-xs-only">切换列表：</span>
               <el-select
-                  v-model="queryInfo.albumId"
-                  size="small"
-                  class="album-select"
-                  @change="onSelectChange"
+                v-model="queryInfo.albumId"
+                size="small"
+                class="album-select-custom"
+                @change="onSelectChange"
               >
                 <el-option
-                    v-for="(item, index) in allAlbums"
-                    :key="index"
-                    :label="item.label"
-                    :value="item.value"
+                  v-for="(item, index) in allAlbums"
+                  :key="index"
+                  :label="item.label"
+                  :value="item.value"
                 />
               </el-select>
             </div>
             <div class="stats-tags">
-              <el-tag size="mini" effect="plain" type="info">{{ albumInfo.total }} 个稿件</el-tag>
-              <el-tag size="mini" effect="plain" type="success" class="mgl-8">{{ albumInfo.scopeStr }}</el-tag>
+              <el-tag size="small" effect="plain" class="custom-tag-grey">{{ albumInfo.total }} 个稿件</el-tag>
+              <el-tag size="small" effect="dark" class="custom-tag-success mgl-8">{{ albumInfo.scopeStr }}</el-tag>
             </div>
           </div>
         </div>
@@ -45,21 +46,24 @@
 
       <el-row :gutter="20" class="video-grid">
         <el-col
-            v-for="(item, index) in dataList"
-            :key="index"
-            :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
-            class="video-col"
+          v-for="(item, index) in dataList"
+          :key="index"
+          :xs="12" :sm="8" :md="6" :lg="4" :xl="4"
+          class="video-col"
         >
-          <el-card :body-style="{ padding: '0px' }" class="video-card" shadow="hover">
+          <el-card :body-style="{ padding: '0px' }" class="video-card-modern" shadow="never">
             <div class="card-image-box">
               <router-link :to="`/video/${item.videoId}`" target="_blank">
                 <el-image lazy fit="cover" class="card-cover" :src="item.coverUrl" />
                 <div class="card-badges">
-                  <span class="duration">{{ item.duration }}</span>
-                  <span class="device-icon">
+                  <span class="duration-badge"><i class="el-icon-time" /> {{ item.duration }}</span>
+                  <span class="device-icon-badge">
                     <i :class="item.horizontal ? 'el-icon-monitor' : 'el-icon-mobile-phone'" />
                   </span>
                 </div>
+                <div class="play-hover-mask">
+                  <i class="el-icon-video-play play-center-icon" />
+                </div>
               </router-link>
             </div>
 
@@ -78,10 +82,10 @@
               <div class="card-btns">
                 <el-button-group class="full-width-btns">
                   <el-tooltip content="设为封面" placement="top" :disabled="screenWidth < 768">
-                    <el-button size="mini" icon="el-icon-picture-outline" @click="onSetCover(item)"></el-button>
+                    <el-button size="mini" class="btn-action-grey" icon="el-icon-picture-outline" @click="onSetCover(item)"></el-button>
                   </el-tooltip>
                   <el-tooltip content="删除收藏" placement="top" :disabled="screenWidth < 768">
-                    <el-button size="mini" type="danger" plain icon="el-icon-delete" @click="onDeleteItem(item)"></el-button>
+                    <el-button size="mini" class="btn-action-danger" icon="el-icon-delete" @click="onDeleteItem(item)"></el-button>
                   </el-tooltip>
                 </el-button-group>
               </div>
@@ -92,13 +96,13 @@
 
       <div class="pagination-wrapper">
         <el-pagination
-            background
-            :small="screenWidth < 768"
-            layout="total, prev, pager, next"
-            :page-size="pageSize"
-            :current-page="currentPage"
-            :total="totalSize"
-            @current-change="handleCurrentChange"
+          background
+          :small="screenWidth < 768"
+          layout="total, prev, pager, next"
+          :page-size="pageSize"
+          :current-page="currentPage"
+          :total="totalSize"
+          @current-change="handleCurrentChange"
         />
       </div>
     </main>
@@ -115,7 +119,7 @@ export default {
   data() {
     return {
       allAlbums: [],
-      queryInfo: { albumId: null, pn: 1 },
+      queryInfo: { albumId: 0, pn: 1 },
       screenWidth: document.body.clientWidth,
       currentPage: 1,
       pageSize: 12,
@@ -166,7 +170,7 @@ export default {
           this.dataList = resp.data.pageList.list
           this.totalSize = resp.data.pageList.totalSize
           this.albumInfo = resp.data.albumInfo
-          this.queryInfo.albumId = this.albumInfo.albumId
+          this.queryInfo.albumId = this.albumInfo.albumId + ''
         }
       })
     },
@@ -199,141 +203,352 @@ export default {
 </script>
 
 <style scoped>
-/* 1. 基础容器与布局修复 */
+/* ==================== 1. 全局容器与精细化头部 ==================== */
 .album-page-container {
-  padding: 0;
-  max-width: 1400px; /* 限制 PC 端最大宽度，防止卡片过稀疏 */
+  padding: 16px;
+  max-width: 1440px;
   margin: 0 auto;
 }
 
 .album-header-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 24px;
-  margin-bottom: 20px;
-  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 28px;
+  margin-bottom: 24px;
+  border: 1px solid #f0f2f5;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
 }
 
 .album-info-wrapper {
   display: flex;
-  gap: 24px;
+  gap: 28px;
+  align-items: center;
 }
 
 .album-cover-box {
-  width: 180px;
-  height: 110px;
+  position: relative;
+  width: 192px;
+  height: 120px;
   flex-shrink: 0;
-  border-radius: 6px;
+  border-radius: 8px;
   overflow: hidden;
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
 }
 
-.header-cover-img { width: 100%; height: 100%; }
+.header-cover-img {
+  width: 100%;
+  height: 100%;
+  transition: transform 0.6s ease;
+}
 
-.album-detail-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
+.album-cover-box:hover .header-cover-img {
+  transform: scale(1.05);
+}
 
-.top-row { display: flex; justify-content: space-between; align-items: flex-start; }
+.album-detail-content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
 
-.album-title { margin: 0; font-size: 20px; color: #303133; font-weight: 600; }
+.top-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-.filter-row { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; }
+.album-title {
+  margin: 0;
+  font-size: 22px;
+  color: #1d2129;
+  font-weight: 600;
+  letter-spacing: -0.2px;
+}
 
-.select-group { display: flex; align-items: center; }
+.play-all-btn {
+  background: #409EFF;
+  border: none;
+  padding: 10px 20px;
+  font-weight: 500;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
+  transition: all 0.25s ease;
+}
 
-.album-select { width: 200px; }
+.play-all-btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(64, 158, 255, 0.45);
+}
+
+.filter-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px dashed #f2f3f5;
+  padding-top: 16px;
+}
+
+.select-group {
+  display: flex;
+  align-items: center;
+}
+
+.select-group .label {
+  font-size: 13px;
+  color: #86909c;
+}
+
+/* 隐藏 Element 默认边框线，改为平滑现代化设计 */
+::v-deep .album-select-custom .el-input__inner {
+  border-radius: 6px;
+  background-color: #f2f3f5;
+  border: 1px solid transparent;
+  color: #4e5969;
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+::v-deep .album-select-custom .el-input__inner:focus {
+  background-color: #ffffff;
+  border-color: #409EFF;
+}
+
+/* 细化标签层级 */
+.custom-tag-grey {
+  background-color: #f2f3f5 !important;
+  color: #4e5969 !important;
+  border: none !important;
+  border-radius: 4px;
+}
+
+.custom-tag-success {
+  background-color: #e8ffea !important;
+  color: #00b42a !important;
+  border: none !important;
+  border-radius: 4px;
+  font-weight: 500;
+}
 
 .mgl-8 { margin-left: 8px; }
 
-/* 2. 视频卡片 PC 端优化 */
-.video-grid { margin: 0 -10px; } /* 抵消 col 的 padding */
+/* ==================== 2. 视频网格与现代卡片 ==================== */
+.video-grid { margin: 0 -10px; }
 
-.video-card {
-  border-radius: 8px;
-  border: 1px solid #ebeef5;
-  margin-bottom: 20px;
-  transition: all 0.3s ease;
+.video-card-modern {
+  border-radius: 10px;
+  border: 1px solid #f2f3f5;
+  background: #ffffff;
+  margin-bottom: 24px;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  overflow: hidden;
+}
+
+/* 鼠标悬浮整体上浮、带柔和拟物阴影 */
+.video-card-modern:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(29, 33, 41, 0.08);
+  border-color: #e5e6eb;
 }
 
 .card-image-box {
   position: relative;
   width: 100%;
-  padding-top: 56.25%; /* 16:9 比例锁定 */
+  padding-top: 56.25%;
+  background-color: #f7f8fa;
+  overflow: hidden;
 }
 
 .card-cover {
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
+  transition: transform 0.4s ease;
+}
+
+.video-card-modern:hover .card-cover {
+  transform: scale(1.04);
+}
+
+/* 悬浮遮罩及中心播放小图标 */
+.play-hover-mask {
+  position: absolute;
+  top: 0; left: 0; width: 100%; height: 100%;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 0;
+  transition: opacity 0.25s ease;
 }
 
+.video-card-modern:hover .play-hover-mask {
+  opacity: 1;
+}
+
+.play-center-icon {
+  font-size: 36px;
+  color: rgba(255, 255, 255, 0.9);
+  text-shadow: 0 2px 8px rgba(0,0,0,0.3);
+}
+
+/* 精致的小微章 */
 .card-badges {
   position: absolute;
-  bottom: 6px; left: 0; right: 0;
-  padding: 0 8px;
+  bottom: 0; left: 0; right: 0;
+  padding: 20px 8px 6px 8px;
   display: flex;
   justify-content: space-between;
-  background: linear-gradient(transparent, rgba(0,0,0,0.6));
-  color: #fff; font-size: 12px;
+  align-items: center;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
+  color: #fff;
+  font-size: 11px;
+  z-index: 2;
+}
+
+.duration-badge {
+  background: rgba(0, 0, 0, 0.6);
+  padding: 2px 6px;
+  border-radius: 4px;
+  letter-spacing: 0.2px;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
+
+.device-icon-badge {
+  background: rgba(0, 0, 0, 0.6);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .card-info { padding: 12px; }
 
+.video-title-link { text-decoration: none; }
+
 .video-title {
-  margin: 0 0 10px 0;
+  margin: 0 0 8px 0;
   font-size: 14px;
-  height: 40px; /* 两行高度固定 */
+  font-weight: 500;
+  height: 40px;
   line-height: 20px;
-  color: #303133;
+  color: #1d2129;
+  transition: color 0.2s;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
 
+.video-card-modern:hover .video-title {
+  color: #409EFF;
+}
+
 .video-meta {
   display: flex;
   justify-content: space-between;
+  align-items: center;
   font-size: 12px;
-  color: #909399;
+  color: #86909c;
   margin-bottom: 12px;
 }
 
-.user-link { color: #606266; text-decoration: none; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.user-link {
+  color: #4e5969;
+  text-decoration: none;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+}
 .user-link:hover { color: #409EFF; }
 
-/* 按钮组 */
-.full-width-btns { display: flex; width: 100%; }
-.full-width-btns .el-button { flex: 1; }
+/* ==================== 3. 功能按钮卡片优化 ==================== */
+.card-btns {
+  border-top: 1px dashed #f2f3f5;
+  padding-top: 10px;
+  margin-top: 4px;
+}
+
+.full-width-btns { display: flex; width: 100%; gap: 8px; }
+.full-width-btns .el-button {
+  flex: 1;
+  border-radius: 4px !important;
+  border: 1px solid #f2f3f5;
+}
 
-.pagination-wrapper { padding: 40px 0; display: flex; justify-content: center; }
+.btn-action-grey {
+  background: #f7f8fa;
+  color: #4e5969;
+}
+.btn-action-grey:hover {
+  background: #e8f4ff !important;
+  color: #409EFF !important;
+  border-color: #c6e2ff !important;
+}
 
-/* 3. 移动端专项适配修复溢出 */
+.btn-action-danger {
+  background: #fffdfd;
+  color: #f56c6c;
+}
+.btn-action-danger:hover {
+  background: #fef0f0 !important;
+  color: #f56c6c !important;
+  border-color: #fde2e2 !important;
+}
+
+.pagination-wrapper { padding: 32px 0 16px 0; display: flex; justify-content: center; }
+
+/* ==================== 4. 完美移动端响应式适配 ==================== */
 @media screen and (max-width: 768px) {
-  .album-header-card { padding: 15px; margin-bottom: 15px; }
+  .album-page-container { padding: 10px; }
+
+  .album-header-card { padding: 16px; margin-bottom: 16px; border-radius: 8px; }
+
+  .album-info-wrapper { flex-direction: column; gap: 14px; align-items: stretch; text-align: left; }
 
-  .album-info-wrapper { flex-direction: column; gap: 12px; align-items: center; text-align: center; }
+  .album-cover-box { width: 100%; height: auto; padding-top: 45%; /* 移动端调整大拉伸或者横幅 */ }
+  .album-cover-box .header-cover-img { position: absolute; top:0; left:0; }
 
-  .album-cover-box { width: 140px; height: 85px; }
+  .top-row { flex-direction: row; align-items: center; gap: 12px; }
 
-  .top-row { flex-direction: column; align-items: center; gap: 10px; }
+  .album-title { font-size: 18px; flex: 1; }
 
-  .album-title { font-size: 16px; }
+  .play-all-btn { padding: 8px 14px; font-size: 12px; }
 
-  .filter-row { flex-direction: column; gap: 10px; align-items: stretch; }
+  .filter-row { flex-direction: column; gap: 12px; align-items: stretch; border-top: 1px solid #f2f3f5; }
 
-  .album-select { width: 100%; }
+  .album-select-custom { width: 100%; }
 
-  .video-grid { margin: 0 -5px; }
+  .stats-tags { display: flex; justify-content: flex-start; }
 
-  .video-col { padding: 0 5px !important; }
+  .video-grid { margin: 0 -4px; }
 
-  .video-title { font-size: 13px; height: 36px; line-height: 18px; margin-bottom: 6px; }
+  .video-col { padding: 0 4px !important; }
 
-  .video-meta { flex-direction: column; gap: 4px; margin-bottom: 8px; }
+  .video-card-modern { border-radius: 6px; margin-bottom: 8px; }
 
   .card-info { padding: 8px; }
+
+  .video-title { font-size: 13px; height: 36px; line-height: 18px; margin-bottom: 4px; }
+
+  .video-meta { flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 8px; font-size: 11px; }
+
+  .user-link { max-width: 100%; }
+
+  .card-btns { padding-top: 8px; }
+  .full-width-btns { gap: 4px; }
+  .full-width-btns .el-button { padding: 6px 0; }
 }
 
-/* 隐藏辅助类 */
 @media screen and (max-width: 767px) {
   .hidden-xs-only { display: none !important; }
 }