/* 顶部导航栏样式（固定显示） */
.site-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: #fff;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
z-index: 9999; /* 确保导航栏在最上层，不被遮挡 */
}
/* 导航菜单布局 */
.nav-menu {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
gap: 30px; /* 菜单间距 */
}
/* 上传按钮样式 */
.upload-btn {
padding: 6px 12px;
background: #007cba;
color: #fff;
border-radius: 4px;
text-decoration: none;
}
.upload-btn:hover {
background: #006ba1;
}
/* 搜索框样式 */
.search-form {
display: flex;
align-items: center;
gap: 5px;
}
.search-form input {
padding: 6px 10px;
border: 1px solid #eee;
border-radius: 4px;
outline: none;
}
/* 移动端汉堡菜单适配 */
@media (max-width: 768px) {
.nav-menu {
display: none; /* 隐藏PC端菜单 */
}
.mobile-menu-btn {
display: block; /* 显示汉堡菜单按钮 */
font-size: 24px;
background: transparent;
border: none;
cursor: pointer;
}
}
/* 底部信息栏样式 */
.site-footer {
width: 100%;
height: 80px;
background: #f5f5f5;
color: #666;
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
margin-top: 50px;
}
/* 底部链接样式 */
.footer-links a {
color: #666;
text-decoration: none;
margin: 0 10px;
}
.footer-links a:hover {
color: #007cba;
text-decoration: underline;
}
/* 今日推荐板块整体样式 */
.today-recommend {
width: 100%;
height: 300px;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
margin-top: 70px; /* 避开固定导航栏 */
display: flex;
padding: 15px;
box-sizing: border-box;
}
/* 左侧主推荐样式 */
.recommend-main {
width: 60%;
height: 100%;
position: relative;
border-radius: 4px;
overflow: hidden;
}
.recommend-main img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 播放图标（悬浮显示） */
.play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 48px;
color: #fff;
opacity: 0;
transition: opacity 0.3s;
}
.recommend-main:hover .play-icon {
opacity: 1;
}
/* 右侧辅助推荐样式 */
.recommend-side {
width: 40%;
height: 100%;
display: flex;
flex-direction: row;
gap: 10px;
padding-left: 15px;
box-sizing: border-box;
}
.recommend-card {
width: 33.33%;
height: 100%;
border-radius: 4px;
overflow: hidden;
position: relative;
}
.recommend-card img {
width: 100%;
height: 80%;
object-fit: cover;
}
/* 热门标签 */
.hot-tag {
position: absolute;
top: 10px;
right: 10px;
background: #ff4d4f;
color: #fff;
font-size: 12px;
padding: 2px 6px;
border-radius: 2px;
}
/* 今日推荐移动端适配 */
@media (max-width: 768px) {
.today-recommend {
height: 180px;
flex-direction: column;
}
.recommend-main, .recommend-side {
width: 100%;
height: 50%;
}
.recommend-side {
padding-left: 0;
padding-top: 10px;
}
}
/* 视频版面整体样式 */
.video-section {
width: 100%;
background: #fff;
margin-top: 30px;
}
/* 视频标题栏样式 */
.video-title-bar {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
border-bottom: 1px solid #eee;
}
.video-title-bar h2 {
font-size: 18px;
font-weight: bold;
margin: 0;
}
/* 筛选下拉菜单样式 */
.filter-select {
padding: 6px 10px;
border: 1px solid #eee;
border-radius: 4px;
outline: none;
}
/* 视频卡片网格布局 */
.video-grid {
display: grid;
grid-template-columns: repeat(3, 32%);
gap: 2%;
padding: 15px;
}
/* 视频卡片样式 */
.video-card {
width: 100%;
height: 300px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
transition: transform 0.3s;
}
.video-card:hover {
transform: scale(1.05); /* 悬浮放大效果 */
}
.video-card img {
width: 100%;
height: 80%;
object-fit: cover;
}
/* 视频卡片信息样式 */
.video-card-info {
padding: 10px;
font-size: 14px;
}
.video-title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 5px;
}
.video-meta {
display: flex;
justify-content: space-between;
color: #666;
}
/* 收藏、分享图标样式 */
.video-actions {
position: relative;
top: -20px;
right: 10px;
display: flex;
gap: 10px;
}
.video-actions i {
color: #fff;
font-size: 16px;
cursor: pointer;
}
/* 视频版面移动端适配 */
@media (max-width: 768px) {
.video-grid {
grid-template-columns: 1fr; /* 1列布局 */
}
.video-card {
height: 200px;
}
}
/* 图片版面整体样式 */
.image-section {
width: 100%;
background: #fff;
margin-top: 30px;
}
/* 图片标题栏样式（与视频标题栏统一） */
.image-title-bar {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 15px;
border-bottom: 1px solid #eee;
}
.image-title-bar h2 {
font-size: 18px;
font-weight: bold;
margin: 0;
}
/* 图片瀑布流布局 */
.image-masonry {
display: flex;
flex-wrap: wrap;
gap: 1%;
padding: 15px;
}
/* 图片卡片样式 */
.image-card {
width: 24%;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
transition: box-shadow 0.3s;
}
.image-card:hover {
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.image-card img {
width: 100%;
height: auto; /* 自适应高度，避免拉伸 */
object-fit: cover;
}
/* 图片悬浮图标（预览、下载、收藏） */
.image-actions {
display: flex;
justify-content: center;
gap: 15px;
padding: 10px 0;
background: rgba(0,0,0,0.5);
opacity: 0;
transition: opacity 0.3s;
position: relative;
top: -40px;
}
.image-card:hover .image-actions {
opacity: 1;
}
.image-actions a {
color: #fff;
font-size: 16px;
text-decoration: none;
}
/* 图片预览窗口样式 */
.image-preview {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.image-preview img {
max-width: 80%;
max-height: 80%;
}
/* 图片版面移动端适配 */
@media (max-width: 768px) {
.image-masonry {
gap: 10px;
}
.image-card {
width: 48%; /* 2列布局 */
}
}
/* 个人中心整体样式 */
.user-center {
width: 100%;
background: #fff;
margin-top: 70px; /* 避开固定导航栏 */
padding: 20px;
box-sizing: border-box;
display: flex;
gap: 20px;
}
/* 左侧个人信息侧边栏 */
.user-sidebar {
width: 25%;
height: 500px;
background: #f9f9f9;
border-radius: 8px;
padding: 20px;
box-sizing: border-box;
}
/* 个人头像样式 */
.user-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto 15px;
overflow: hidden;
}
.user-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 个人信息文字样式 */
.user-info {
text-align: center;
margin-bottom: 20px;
}
.user-info h3 {
margin: 0 0 10px;
font-size: 18px;
}
.user-meta {
font-size: 14px;
color: #666;
margin-bottom: 5px;
}
/* 侧边栏导航菜单 */
.user-nav {
list-style: none;
padding: 0;
}
.user-nav li {
margin-bottom: 10px;
}
.user-nav a {
display: block;
padding: 10px;
background: #fff;
border-radius: 4px;
text-decoration: none;
color: #333;
transition: background 0.3s;
}
.user-nav a:hover, .user-nav a.active {
background: #007cba;
color: #fff;
}
/* 右侧核心功能区 */
.user-content {
width: 75%;
background: #f9f9f9;
border-radius: 8px;
padding: 20px;
box-sizing: border-box;
}
/* 我的上传标签样式 */
.upload-tabs {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.upload-tab {
padding: 8px 16px;
background: #fff;
border-radius: 4px;
cursor: pointer;
}
.upload-tab.active {
background: #007cba;
color: #fff;
}
/* 我的上传卡片布局 */
.upload-grid {
display: grid;
grid-template-columns: repeat(3, 32%);
gap: 2%;
}
.upload-card {
background: #fff;
border-radius: 4px;
padding: 10px;
box-shadow: 0 2px 5px rgba(0,0,0,0.03);
}
/* 审核状态标签 */
.audit-status {
display: inline-block;
padding: 2px 6px;
border-radius: 2px;
font-size: 12px;
margin-right: 5px;
}
.status-pending {
background: #ffc107;
color: #fff;
}
.status-approved {
background: #28a745;
color: #fff;
}
.status-rejected {
background: #dc3545;
color: #fff;
}
/* 个人设置表单样式 */
.setting-form {
display: flex;
flex-direction: column;
gap: 15px;
}
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-group label {
font-size: 14px;
font-weight: 500;
}
.form-group input, .form-group select {
padding: 8px 10px;
border: 1px solid #eee;
border-radius: 4px;
outline: none;
}
.form-submit {
padding: 8px 16px;
background: #007cba;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* 个人中心移动端适配 */
@media (max-width: 768px) {
.user-center {
flex-direction: column;
}
.user-sidebar, .user-content {
width: 100%;
}
.upload-grid {
grid-template-columns: 1fr;
}
}