2246 lines
69 KiB
HTML
2246 lines
69 KiB
HTML
<!--#
|
|
layout("/layouts/v4/baseLayout.html"){
|
|
#-->
|
|
|
|
<style>
|
|
/* 主容器 */
|
|
.oa-container {
|
|
position: relative;
|
|
}
|
|
|
|
/* 主要内容区域 */
|
|
.oa-main-content {
|
|
margin: 0 auto;
|
|
padding-bottom: 20px;
|
|
/*background: url(/assets/platform/img/v4/home-bg.png);*/
|
|
background-size: cover;
|
|
background: #ffffff;
|
|
}
|
|
|
|
/* 背景图和搜索统计区域容器 */
|
|
.oa-hero-section {
|
|
position: relative;
|
|
height: 350px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-background-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.oa-background-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* 搜索和统计区域 */
|
|
.oa-search-stats-section {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: grid;
|
|
grid-template-columns: 1fr 500px;
|
|
gap: 40px;
|
|
align-items: center;
|
|
width: 1500px;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* 搜索区域 */
|
|
.oa-search-section {
|
|
text-align: left;
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
}
|
|
|
|
.oa-search-container {
|
|
display: flex;
|
|
max-width: 600px;
|
|
background: white;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.oa-search-input {
|
|
flex: 1;
|
|
padding: 15px 25px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 16px;
|
|
background: transparent;
|
|
}
|
|
|
|
.oa-search-btn {
|
|
background: #ff6b35;
|
|
color: white;
|
|
border: none;
|
|
padding: 15px 30px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
.oa-search-btn:hover {
|
|
background: #e55a2b;
|
|
}
|
|
|
|
/* 数字提醒区域 */
|
|
.oa-stats-section {
|
|
background: rgba(0, 109, 185, 0.7);
|
|
padding: 20px 25px;
|
|
}
|
|
|
|
.oa-stats-title {
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 0 0 15px 0;
|
|
text-align: left;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.oa-stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 12px;
|
|
}
|
|
|
|
.oa-stat-card {
|
|
background: #ffffff;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
border: 1px solid rgba(255, 255, 255, 0.8);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-stat-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, #4a90e2, #357abd);
|
|
transform: scaleX(0);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-stat-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-stat-card:hover::before {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.oa-stat-top {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.oa-stat-icon {
|
|
font-size: 28px;
|
|
color: #4a90e2;
|
|
flex-shrink: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.oa-stat-card:hover .oa-stat-icon {
|
|
transform: scale(1.1);
|
|
color: #357abd;
|
|
}
|
|
|
|
.oa-stat-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
flex: 1;
|
|
}
|
|
|
|
.oa-stat-number {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: #2c3e50;
|
|
line-height: 1;
|
|
transition: color 0.3s ease;
|
|
}
|
|
|
|
.oa-stat-card:hover .oa-stat-number {
|
|
color: #4a90e2;
|
|
}
|
|
|
|
.oa-stat-label {
|
|
font-weight: 500;
|
|
line-height: 1;
|
|
text-align: left;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* 活动中心 */
|
|
.oa-box-1-section {
|
|
display: grid;
|
|
grid-template-columns: 400px 1fr;
|
|
gap: 30px;
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
width: 1500px;
|
|
margin: 20px auto 0;
|
|
}
|
|
|
|
/* 左侧用户信息 */
|
|
.oa-user-panel {
|
|
background: rgba(0, 109, 185, 0.9);
|
|
color: white;
|
|
padding: 25px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
position: relative;
|
|
overflow: hidden;
|
|
max-height: 410px;
|
|
}
|
|
|
|
.oa-user-panel::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
z-index: 0;
|
|
}
|
|
|
|
.oa-user-panel > * {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.oa-user-avatar {
|
|
width: 90px;
|
|
height: 90px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 36px;
|
|
margin-bottom: 15px;
|
|
border: 3px solid rgba(255, 255, 255, 0.3);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.oa-user-avatar:hover {
|
|
transform: scale(1.05);
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.oa-user-name {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.oa-user-info {
|
|
line-height: 1.6;
|
|
margin-bottom: 20px;
|
|
background: rgba(255, 255, 255, 0.05);
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
|
|
.oa-user-info .info-item {
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 1.6;
|
|
width: 100%;
|
|
}
|
|
|
|
.oa-user-panel .info-label {
|
|
font-weight: 600;
|
|
margin-right: 8px;
|
|
flex-shrink: 0;
|
|
min-width: 50px;
|
|
max-width: 60px;
|
|
text-align: left;
|
|
}
|
|
|
|
.oa-user-panel .info-value {
|
|
flex: 1;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
min-width: 0;
|
|
}
|
|
|
|
.oa-user-homepage-btn {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
color: white;
|
|
border: 2px solid rgba(255, 255, 255, 0.3);
|
|
padding: 10px 20px;
|
|
border-radius: 25px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
text-decoration: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.oa-user-homepage-btn:hover {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
border-color: rgba(255, 255, 255, 0.5);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* 右侧活动列表 */
|
|
.oa-activity-content {
|
|
/*padding: 20px;*/
|
|
/*background: #ffffff;*/
|
|
max-height: 410px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0; /* 允许flex子项收缩 */
|
|
overflow: hidden; /* 防止内容溢出 */
|
|
}
|
|
|
|
.oa-activity-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid #eee;
|
|
padding-bottom: 15px;
|
|
flex-shrink: 0; /* 防止头部被压缩 */
|
|
}
|
|
|
|
.oa-activity-tabs {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
.oa-activity-tab {
|
|
padding: 10px 0;
|
|
font-size: 20px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: color 0.3s ease;
|
|
position: relative;
|
|
background: none;
|
|
border: none;
|
|
outline: none;
|
|
}
|
|
|
|
.oa-activity-tab:hover {
|
|
color: #4a90e2;
|
|
}
|
|
|
|
.oa-activity-tab.active {
|
|
color: #4a90e2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.oa-activity-tab.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background: #4a90e2;
|
|
border-radius: 1px;
|
|
}
|
|
|
|
|
|
/* 活动轮播样式 */
|
|
.oa-activity-carousel {
|
|
flex: 1;
|
|
/*margin-top: 15px;*/
|
|
}
|
|
|
|
.oa-activity-carousel .el-carousel, .oa-activity-carousel .el-carousel .el-carousel__container {
|
|
height: 100%;
|
|
}
|
|
|
|
.oa-activity-carousel .el-carousel__item {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.oa-activity-card {
|
|
width: 100%;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
height: 100%;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-activity-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.oa-activity-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-activity-card:hover .oa-activity-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* 图片上的文字叠加层 */
|
|
.oa-activity-overlay {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
|
padding: 40px 20px 20px;
|
|
color: white;
|
|
}
|
|
|
|
.oa-activity-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: white;
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.oa-activity-meta {
|
|
font-size: 14px;
|
|
color: white;
|
|
margin-bottom: 15px;
|
|
line-height: 1.5;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
/* 无活动时的提示区域 */
|
|
.oa-no-activity {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
background: #f8f9fa;
|
|
border-radius: 12px;
|
|
color: #6c757d;
|
|
text-align: center;
|
|
}
|
|
|
|
.oa-no-activity-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
color: #dee2e6;
|
|
}
|
|
|
|
.oa-no-activity-title {
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: #495057;
|
|
}
|
|
|
|
.oa-no-activity-desc {
|
|
font-size: 14px;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* box2 - 系统通知公告 */
|
|
.oa-box-2-section {
|
|
display: grid;
|
|
grid-template-columns: 1fr 450px;
|
|
gap: 30px;
|
|
border-radius: 6px;
|
|
width: 1500px;
|
|
margin: 30px auto 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-box-2-section-act {
|
|
/*background: #ffffff;*/
|
|
}
|
|
|
|
|
|
.oa-notice-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
/*background: #ffffff;*/
|
|
color: #000;
|
|
}
|
|
|
|
.oa-notice-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.oa-notice-header-content::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
.oa-notice-header-icon {
|
|
font-size: 24px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.oa-notice-header-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.oa-notice-header-more {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* 工会活动独立样式 */
|
|
.oa-activity-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 20px;
|
|
/*background: #ffffff;*/
|
|
color: #000;
|
|
}
|
|
|
|
.oa-activity-header-content {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
position: relative;
|
|
}
|
|
|
|
.oa-activity-header-content::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -10px;
|
|
left: 0;
|
|
right: 0;
|
|
height: 2px;
|
|
background-color: var(--color-primary);
|
|
}
|
|
|
|
.oa-activity-header-icon {
|
|
font-size: 24px;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.oa-activity-header-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin: 0;
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.oa-activity-header-more {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-header-more-btn {
|
|
background: transparent;
|
|
border: none;
|
|
color: #666;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 6px 12px;
|
|
border-radius: 4px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.oa-header-more-btn:hover {
|
|
background: #f5f5f5;
|
|
color: #4a90e2;
|
|
}
|
|
|
|
.oa-header-more-btn i {
|
|
font-size: 12px;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-header-more-btn:hover i {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
|
|
.oa-notice-content {
|
|
padding: 20px;
|
|
/*background: #ffffff;*/
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.oa-notice-content::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari and Opera */
|
|
}
|
|
|
|
.oa-notice-list {
|
|
display: grid;
|
|
gap: 15px;
|
|
}
|
|
|
|
.oa-notice-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 15px 20px;
|
|
/*background: #ffffff;*/
|
|
border-bottom: 1px solid #e8e8e8;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-notice-item:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.oa-notice-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.oa-notice-item-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #666;
|
|
margin-right: 12px;
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-notice-item-img {
|
|
width: 300px;
|
|
height: 150px;
|
|
flex-shrink: 0;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.oa-notice-item-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.oa-notice-item-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 工会活动 */
|
|
.oa-activity-content {
|
|
padding: 20px;
|
|
/*background: #ffffff;*/
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.oa-activity-content::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari and Opera */
|
|
}
|
|
|
|
.oa-activity-list {
|
|
display: grid;
|
|
gap: 15px;
|
|
}
|
|
|
|
.oa-activity-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding: 15px 20px;
|
|
/*background: #ffffff;*/
|
|
border-bottom: 1px solid #e8e8e8;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-activity-item:hover {
|
|
background: #f5f5f5;
|
|
}
|
|
|
|
.oa-activity-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.oa-activity-item-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
color: #666;
|
|
margin-right: 12px;
|
|
margin-top: 2px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-activity-item-img {
|
|
width: 300px;
|
|
height: 150px;
|
|
flex-shrink: 0;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.oa-activity-item-img img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.oa-activity-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 150px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
/*padding: 10px 0;*/
|
|
}
|
|
|
|
.oa-activity-item-title {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 8px;
|
|
line-height: 1.4;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-activity-item-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.5;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.oa-activity-item-desc i {
|
|
/*color: var(--color-primary);*/
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-activity-item-detail {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.oa-activity-item-date {
|
|
margin-left: 15px;
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.oa-notice-item-desc i {
|
|
/*color: var(--color-primary);*/
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-notice-item-detail {
|
|
margin-top: auto;
|
|
}
|
|
|
|
.oa-detail-link {
|
|
color: var(--color-primary);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
transition: color 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.oa-detail-link i {
|
|
font-size: 12px;
|
|
transition: transform 0.2s ease;
|
|
}
|
|
|
|
.oa-detail-link:hover i {
|
|
transform: translateX(2px);
|
|
}
|
|
|
|
/* 扩展工会活动样式 */
|
|
.oa-extended-activities-wrapper {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
|
|
padding: 60px 0;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.oa-extended-activities-section {
|
|
max-width: 1500px;
|
|
margin: 0 auto;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.oa-extended-activities-header {
|
|
text-align: center;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.oa-extended-activities-header-content {
|
|
display: inline-block;
|
|
}
|
|
|
|
.oa-extended-activities-header-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 60px;
|
|
height: 60px;
|
|
background: var(--color-primary);
|
|
border-radius: 50%;
|
|
margin: 0 auto 20px;
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.oa-extended-activities-header-icon i {
|
|
font-size: 28px;
|
|
color: white;
|
|
}
|
|
|
|
.oa-extended-activities-header-title {
|
|
font-size: 36px;
|
|
font-weight: 700;
|
|
color: #2c3e50;
|
|
margin: 0 0 10px 0;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.oa-extended-activities-header-subtitle {
|
|
font-size: 16px;
|
|
color: #7f8c8d;
|
|
margin: 0;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.oa-extended-activities-content {
|
|
position: relative;
|
|
}
|
|
|
|
.oa-extended-activities-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
|
gap: 30px;
|
|
padding: 20px 0;
|
|
}
|
|
|
|
.oa-extended-activity-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
overflow: hidden;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
|
|
.oa-extended-activity-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.oa-extended-activity-card-image {
|
|
position: relative;
|
|
height: 200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-extended-activity-card-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-extended-activity-card:hover .oa-extended-activity-card-image img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.oa-extended-activity-card-overlay {
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
}
|
|
|
|
.oa-extended-activity-card-status {
|
|
padding: 6px 12px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.oa-extended-activity-card-status.active {
|
|
background: #27ae60;
|
|
color: white;
|
|
}
|
|
|
|
.oa-extended-activity-card-status.upcoming {
|
|
background: #f39c12;
|
|
color: white;
|
|
}
|
|
|
|
.oa-extended-activity-card-status.ended {
|
|
background: #95a5a6;
|
|
color: white;
|
|
}
|
|
|
|
.oa-extended-activity-card-content {
|
|
padding: 25px;
|
|
}
|
|
|
|
.oa-extended-activity-card-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #2c3e50;
|
|
margin: 0 0 15px 0;
|
|
line-height: 1.3;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-extended-activity-card-meta {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.oa-extended-activity-card-date,
|
|
.oa-extended-activity-card-location {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
.oa-extended-activity-card-date i,
|
|
.oa-extended-activity-card-location i {
|
|
color: var(--color-primary);
|
|
width: 16px;
|
|
}
|
|
|
|
.oa-extended-activity-card-description {
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
line-height: 1.5;
|
|
margin: 0 0 20px 0;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-extended-activity-card-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-top: 15px;
|
|
border-top: 1px solid #ecf0f1;
|
|
}
|
|
|
|
.oa-extended-activity-card-participants {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 14px;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
.oa-extended-activity-card-participants i {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.oa-extended-activity-card-btn {
|
|
background: var(--color-primary);
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 20px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.oa-extended-activity-card-btn:hover {
|
|
background: #2980b9;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.oa-extended-activities-empty {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
}
|
|
|
|
.oa-extended-activities-empty-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 80px;
|
|
height: 80px;
|
|
background: #ecf0f1;
|
|
border-radius: 50%;
|
|
margin: 0 auto 20px;
|
|
}
|
|
|
|
.oa-extended-activities-empty-icon i {
|
|
font-size: 36px;
|
|
color: #bdc3c7;
|
|
}
|
|
|
|
.oa-extended-activities-empty-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
color: #7f8c8d;
|
|
margin: 0 0 10px 0;
|
|
}
|
|
|
|
.oa-extended-activities-empty-desc {
|
|
font-size: 16px;
|
|
color: #95a5a6;
|
|
line-height: 1.5;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.oa-extended-activities-wrapper {
|
|
padding: 40px 0;
|
|
margin: 20px 0;
|
|
}
|
|
|
|
.oa-extended-activities-section {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.oa-extended-activities-header-title {
|
|
font-size: 28px;
|
|
}
|
|
|
|
.oa-extended-activities-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 20px;
|
|
}
|
|
|
|
.oa-extended-activity-card-content {
|
|
padding: 20px;
|
|
}
|
|
|
|
.oa-extended-activity-card-footer {
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.oa-extended-activity-card-btn {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.oa-extended-activities-header-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.oa-extended-activity-card-image {
|
|
height: 160px;
|
|
}
|
|
|
|
.oa-extended-activity-card-content {
|
|
padding: 15px;
|
|
}
|
|
}
|
|
|
|
.oa-notice-item-date {
|
|
flex-shrink: 0;
|
|
white-space: nowrap;
|
|
font-size: 16px;
|
|
}
|
|
|
|
/* 工会网站新闻样式 */
|
|
.oa-box-3-section {
|
|
width: 1500px;
|
|
margin: 30px auto 0;
|
|
}
|
|
|
|
.oa-box-3-news-notices {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.oa-grassroots-wrapper {
|
|
width: 100%;
|
|
background-image: url(/assets/platform/img/v4/home-bg.png);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.oa-box-3-grassroots {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.oa-grassroots-list {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.oa-grassroots-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 16px;
|
|
/*background: #ffffff;*/
|
|
border: none;
|
|
/*border-radius: 8px;*/
|
|
border-bottom: 3px solid transparent;
|
|
transition: all 0.3s ease;
|
|
cursor: pointer;
|
|
height: auto;
|
|
}
|
|
|
|
.oa-grassroots-item:hover {
|
|
background: #ffffff;
|
|
border-bottom-color: var(--color-primary);
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.oa-grassroots-item-date {
|
|
font-size: 20px;
|
|
/*color: var(--color-primary);*/
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
text-align: left;
|
|
margin-bottom: 8px;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
|
|
.oa-grassroots-item-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
/*color: var(--color-primary);*/
|
|
margin-bottom: 12px;
|
|
line-height: 1.4;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
height: 44.8px;
|
|
}
|
|
|
|
.oa-grassroots-item-image {
|
|
width: 100%;
|
|
height: 180px;
|
|
margin: 0 0 16px 0;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
background: #f5f5f5;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-grassroots-item-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: transform 0.3s ease;
|
|
}
|
|
|
|
.oa-grassroots-item-image-placeholder {
|
|
color: #ccc;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.oa-grassroots-item-summary {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
text-align: justify;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.oa-news-section,
|
|
.oa-notices-section,
|
|
.oa-grassroots-section {
|
|
/*background: #ffffff;*/
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.oa-grassroots-section {
|
|
width: 1500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
|
|
.oa-news-content,
|
|
.oa-notices-content {
|
|
padding: 20px;
|
|
/*background: #ffffff;*/
|
|
/*max-height: 400px;*/
|
|
/*overflow-y: auto;*/
|
|
/*scrollbar-width: none;*/
|
|
/*-ms-overflow-style: none;*/
|
|
}
|
|
|
|
.oa-grassroots-content {
|
|
padding: 20px;
|
|
/*background: #ffffff;*/
|
|
min-height: 500px;
|
|
}
|
|
|
|
.oa-news-content::-webkit-scrollbar,
|
|
.oa-notices-content::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.oa-news-list, .oa-notices-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
.oa-news-item,
|
|
.oa-notice-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
/*background: #ffffff;*/
|
|
border-bottom: 1px solid #e8e8e8;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.oa-news-item:hover, .oa-notice-item:hover {
|
|
background: #f5f5f5;
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.oa-news-item:hover .oa-news-item-title,
|
|
.oa-notice-item:hover .oa-notice-item-title {
|
|
color: var(--color-primary);
|
|
text-decoration: underline;
|
|
text-decoration-color: var(--color-primary);
|
|
}
|
|
|
|
.oa-news-item:hover .oa-news-item-date,
|
|
.oa-notice-item:hover .oa-notice-item-date {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.oa-news-item:last-child,
|
|
.oa-notice-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.oa-news-item-content,
|
|
.oa-notice-item-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.oa-news-item-title,
|
|
.oa-notice-item-title {
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
margin-bottom: 6px;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.oa-news-item-date,
|
|
.oa-notice-item-date {
|
|
font-size: 14px;
|
|
color: #999;
|
|
white-space: nowrap;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.oa-news-item-arrow,
|
|
.oa-notice-item-arrow {
|
|
margin-left: 12px;
|
|
flex-shrink: 0;
|
|
color: #ccc;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.oa-news-item:hover .oa-news-item-arrow,
|
|
.oa-notice-item:hover .oa-notice-item-arrow {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/*推荐服务*/
|
|
.oa-box-2-section-recommend {
|
|
padding: 20px;
|
|
/*background: #ffffff;*/
|
|
}
|
|
|
|
.oa-recommend-tabs {
|
|
width: 100%;
|
|
}
|
|
|
|
.oa-recommend-tab-header {
|
|
display: flex;
|
|
border-bottom: 2px solid #f0f0f0;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.oa-recommend-tab-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 12px 24px;
|
|
font-size: 16px;
|
|
color: #666;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
border-bottom: 2px solid transparent;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
.oa-recommend-tab-btn:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.oa-recommend-tab-btn.active {
|
|
color: var(--color-primary);
|
|
border-bottom-color: var(--color-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.oa-recommend-tab-btn i {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.oa-recommend-tab-content {
|
|
min-height: 200px;
|
|
}
|
|
|
|
.oa-recommend-content {
|
|
width: 100%;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
scrollbar-width: none; /* Firefox */
|
|
-ms-overflow-style: none; /* IE and Edge */
|
|
}
|
|
|
|
.oa-recommend-content::-webkit-scrollbar {
|
|
display: none; /* Chrome, Safari and Opera */
|
|
}
|
|
|
|
.oa-recommend-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.oa-recommend-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
/* background: #f8f9fa; */
|
|
border-radius: 8px;
|
|
transition: all 0.2s ease;
|
|
cursor: pointer;
|
|
min-height: 100px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
min-width: 0;
|
|
padding: 10px 0;
|
|
}
|
|
|
|
.oa-recommend-item:hover {
|
|
/*background: #e9ecef;*/
|
|
/*transform: translateY(-2px);*/
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.oa-recommend-item-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-primary);
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 12px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.oa-recommend-item-icon i {
|
|
color: white;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.oa-recommend-item-info {
|
|
flex: 1;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.oa-recommend-item-info h4 {
|
|
margin: 0;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
width: 100%;
|
|
}
|
|
|
|
/* 空数据提示样式 */
|
|
.oa-empty-state {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px 20px;
|
|
text-align: center;
|
|
color: #999;
|
|
}
|
|
|
|
.oa-empty-state-icon {
|
|
font-size: 48px;
|
|
color: #ddd;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.oa-empty-state-title {
|
|
font-size: 16px;
|
|
color: #666;
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.oa-empty-state-desc {
|
|
font-size: 14px;
|
|
color: #999;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
<div class="oa-container" id="v4-home-app">
|
|
<!-- 主要内容 -->
|
|
<div class="oa-main-content">
|
|
<!-- 背景图和搜索统计区域容器 -->
|
|
<div class="oa-hero-section">
|
|
<!-- 背景图 -->
|
|
<div class="oa-background-image">
|
|
<img :src="homeBannerList[0] || ''" alt=""/>
|
|
</div>
|
|
|
|
<!-- 搜索和统计区域 -->
|
|
<div class="oa-search-stats-section">
|
|
<!-- 搜索区域 -->
|
|
<div class="oa-search-section">
|
|
<!-- <h1 class="oa-search-title">精业济群</h1>-->
|
|
<div class="oa-search-container">
|
|
<input type="text" class="oa-search-input" placeholder="请输入您要查询的关键字"
|
|
v-model="searchQuery"/>
|
|
<button class="oa-search-btn" @click="performSearch">搜索</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数字提醒 -->
|
|
<div class="oa-stats-section">
|
|
<h3 class="oa-stats-title">提醒</h3>
|
|
<div class="oa-stats-grid">
|
|
<div class="oa-stat-card" @click="handleStatClick('todo')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-clock-o"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.todo }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">待办</div>
|
|
</div>
|
|
<div class="oa-stat-card" @click="handleStatClick('done')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-check-circle"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.done }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">已办</div>
|
|
</div>
|
|
<div class="oa-stat-card" @click="handleStatClick('notification')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-bell"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.notifications }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">消息</div>
|
|
</div>
|
|
<div class="oa-stat-card" @click="handleStatClick('started')">
|
|
<div class="oa-stat-top">
|
|
<div class="oa-stat-icon">
|
|
<i class="fa fa-file-text"></i>
|
|
</div>
|
|
<div class="oa-stat-number">{{ stats.started }}</div>
|
|
</div>
|
|
<div class="oa-stat-label">申请</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- box1 -->
|
|
<div class="oa-box-1-section">
|
|
<!-- 左侧用户信息 -->
|
|
<div class="oa-user-panel">
|
|
<div class="oa-user-avatar">
|
|
<i class="fa fa-user"></i>
|
|
</div>
|
|
<div class="oa-user-name">${@auth.getPrincipalProperty('username')}</div>
|
|
<div class="oa-user-info">
|
|
<div class="info-item">
|
|
<span class="info-label">工号：</span>
|
|
<span class="info-value">${@auth.getPrincipalProperty('loginname')}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">性别：</span>
|
|
<span class="info-value">${@auth.getPrincipalProperty('sex')}</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">单位：</span>
|
|
<span class="info-value">
|
|
<!--#if(!isEmpty(@auth.getPrincipalProperty('unit'))){#-->
|
|
${@auth.getPrincipalProperty('unit').getName()}
|
|
<!--#}#-->
|
|
</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="info-label">工会：</span>
|
|
<span class="info-value">
|
|
<!--#if(!isEmpty(@auth.getPrincipalProperty('union'))){#-->
|
|
${@auth.getPrincipalProperty('union').getName()}
|
|
<!--#}#-->
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<a href="/platform/v4/personCenter" class="oa-user-homepage-btn" target="_blank">
|
|
<i class="fa fa-home"></i>
|
|
个人中心
|
|
</a>
|
|
</div>
|
|
|
|
<!-- 右侧活动列表 -->
|
|
<div class="oa-activity-content">
|
|
<!-- <div class="oa-activity-header">-->
|
|
<!-- <div class="oa-activity-tabs">-->
|
|
<!-- <div class="oa-activity-tab" :class="{active: activeTab === 'recent'}"-->
|
|
<!-- @click="setActiveTab('recent')">最新活动-->
|
|
<!-- </div>-->
|
|
<!-- <div class="oa-activity-tab" :class="{active: activeTab === 'history'}"-->
|
|
<!-- @click="setActiveTab('history')">历史活动-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<div class="oa-activity-carousel">
|
|
<div v-if="currentActivityList.length === 0" class="oa-no-activity">
|
|
<div class="oa-no-activity-icon">
|
|
<i class="fa fa-calendar-o"></i>
|
|
</div>
|
|
<div class="oa-no-activity-title">暂无活动信息</div>
|
|
<div class="oa-no-activity-desc">{{ activeTab === 'recent' ? '当前没有最新活动' : '当前没有历史活动'
|
|
}}
|
|
</div>
|
|
</div>
|
|
<el-carousel v-else :autoplay="true" arrow="always" indicator-position="none">
|
|
<el-carousel-item v-for="activity in currentActivityList" :key="activity.id">
|
|
<div class="oa-activity-card">
|
|
<div class="oa-activity-image">
|
|
<img :src="activity.cover" :alt="activity.name"/>
|
|
<div class="oa-activity-overlay">
|
|
<div class="oa-activity-title">{{ activity.name }}</div>
|
|
<div class="oa-activity-meta">{{ activity.startDate }} ~ {{ activity.endDate
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- box2 - 工会活动 -->
|
|
<div class="oa-box-2-section">
|
|
<div class="oa-box-2-section-act">
|
|
<div class="oa-activity-header">
|
|
<div class="oa-activity-header-content">
|
|
<div class="oa-activity-header-icon">
|
|
<i class="fa fa-users"></i>
|
|
</div>
|
|
<h2 class="oa-activity-header-title">工会活动</h2>
|
|
</div>
|
|
<div class="oa-activity-header-more">
|
|
<!-- <button class="oa-header-more-btn">-->
|
|
<!-- 更多-->
|
|
<!-- <i class="fa fa-angle-right"></i>-->
|
|
<!-- </button>-->
|
|
</div>
|
|
</div>
|
|
<div class="oa-activity-content">
|
|
<div v-if="recentActivities && recentActivities.length > 0" class="oa-activity-list">
|
|
<div v-for="notice in recentActivities" :key="notice.id" class="oa-activity-item"
|
|
@click="viewNotice(notice)">
|
|
<!-- <div class="oa-activity-item-icon">
|
|
<i class="fa fa-bullhorn"></i>
|
|
</div> -->
|
|
<div class="oa-activity-item-img">
|
|
<img :src="notice.cover" alt="">
|
|
</div>
|
|
<div class="oa-activity-item-content">
|
|
<div class="oa-activity-item-title">{{ notice.name }}</div>
|
|
<div class="oa-activity-item-desc">
|
|
<i class="fa fa-calendar-o"></i>
|
|
开始时间：{{ formatDate(notice.startDate) }}
|
|
</div>
|
|
<div class="oa-activity-item-desc">
|
|
<i class="fa fa-calendar-check-o"></i>
|
|
结束时间：{{ formatDate(notice.endDate) }}
|
|
</div>
|
|
<div class="oa-activity-item-detail">
|
|
<span class="oa-detail-link" @click.stop="openActivity(notice)">
|
|
立即前往
|
|
<i class="fa fa-arrow-right"></i>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="oa-activity-item-date">{{ notice.publishDate }}</div> -->
|
|
</div>
|
|
</div>
|
|
<div v-else class="oa-empty-state">
|
|
<div class="oa-empty-state-icon">
|
|
<i class="fa fa-bullhorn"></i>
|
|
</div>
|
|
<div class="oa-empty-state-title">暂无工会活动</div>
|
|
<div class="oa-empty-state-desc">当前没有可显示的工会活动内容<br>请稍后再来查看</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="oa-box-2-section-recommend">
|
|
<div class="oa-recommend-tabs">
|
|
<div class="oa-recommend-tab-header">
|
|
<button
|
|
class="oa-recommend-tab-btn"
|
|
:class="{ active: recommendTab === 'service' }"
|
|
@click="setRecommendTab('service')">
|
|
<i class="fa fa-cogs"></i>
|
|
推荐服务
|
|
</button>
|
|
<button
|
|
class="oa-recommend-tab-btn"
|
|
:class="{ active: recommendTab === 'app' }"
|
|
@click="setRecommendTab('app')">
|
|
<i class="fa fa-th-large"></i>
|
|
推荐应用
|
|
</button>
|
|
<button
|
|
class="oa-recommend-tab-btn"
|
|
:class="{ active: recommendTab === 'favorite' }"
|
|
@click="setRecommendTab('favorite')">
|
|
<i class="fa fa-heart"></i>
|
|
我的收藏
|
|
</button>
|
|
</div>
|
|
<div class="oa-recommend-tab-content">
|
|
<div v-if="recommendTab === 'service'" class="oa-recommend-content">
|
|
<div v-if="recommendServices && recommendServices.length > 0" class="oa-recommend-grid">
|
|
<div class="oa-recommend-item" v-for="service in recommendServices" :key="service.id"
|
|
@click="openService(service)">
|
|
<div class="oa-recommend-item-icon">
|
|
<img v-if="service.picIcon" :src="service.picIcon" :alt="service.name"
|
|
style="width: 32px; height: 32px; object-fit: cover;">
|
|
<i v-else-if="service.icon" :class="service.icon"></i>
|
|
<i v-else class="fa fa-cog"></i>
|
|
</div>
|
|
<div class="oa-recommend-item-info">
|
|
<h4>{{ service.name }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="oa-empty-state">
|
|
<div class="oa-empty-state-icon">
|
|
<i class="fa fa-cog"></i>
|
|
</div>
|
|
<div class="oa-empty-state-title">暂无推荐服务</div>
|
|
<div class="oa-empty-state-desc">当前没有可用的推荐服务<br>请联系管理员添加服务内容
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="recommendTab === 'app'" class="oa-recommend-content">
|
|
<div v-if="recommendApps && recommendApps.length > 0" class="oa-recommend-grid">
|
|
<div class="oa-recommend-item" v-for="app in recommendApps" :key="app.id"
|
|
@click="openApp(app)">
|
|
<div class="oa-recommend-item-icon">
|
|
<img v-if="app.picIcon" :src="app.picIcon" :alt="app.name"
|
|
style="width: 32px; height: 32px; object-fit: cover;">
|
|
<i v-else-if="app.icon" :class="app.icon"></i>
|
|
<i v-else class="fa fa-cube"></i>
|
|
</div>
|
|
<div class="oa-recommend-item-info">
|
|
<h4>{{ app.name }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="oa-empty-state">
|
|
<div class="oa-empty-state-icon">
|
|
<i class="fa fa-cube"></i>
|
|
</div>
|
|
<div class="oa-empty-state-title">暂无推荐应用</div>
|
|
<div class="oa-empty-state-desc">当前没有可用的推荐应用<br>请联系管理员添加应用内容
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="recommendTab === 'favorite'" class="oa-recommend-content">
|
|
<div v-if="favoriteItems && favoriteItems.length > 0" class="oa-recommend-grid">
|
|
<div class="oa-recommend-item" v-for="item in favoriteItems" :key="item.id"
|
|
@click="openFavorite(item)">
|
|
<div class="oa-recommend-item-icon">
|
|
<img v-if="item.picIcon" :src="item.picIcon" :alt="item.name"
|
|
style="width: 32px; height: 32px; object-fit: cover;">
|
|
<i v-else-if="item.icon" :class="item.icon"></i>
|
|
<i v-else class="fa fa-heart"></i>
|
|
</div>
|
|
<div class="oa-recommend-item-info">
|
|
<h4>{{ item.name }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="oa-empty-state">
|
|
<div class="oa-empty-state-icon">
|
|
<i class="fa fa-heart-o"></i>
|
|
</div>
|
|
<div class="oa-empty-state-title">暂无收藏内容</div>
|
|
<div class="oa-empty-state-desc">您还没有收藏任何内容<br>快去收藏您喜欢的服务和应用吧
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 扩展工会活动 - 卡片式展示 -->
|
|
<!-- <div class="oa-extended-activities-wrapper">-->
|
|
<!-- <div class="oa-extended-activities-section">-->
|
|
<!-- <div class="oa-extended-activities-header">-->
|
|
<!-- <div class="oa-extended-activities-header-content">-->
|
|
<!-- <div class="oa-extended-activities-header-icon">-->
|
|
<!-- <i class="fa fa-calendar-check-o"></i>-->
|
|
<!-- </div>-->
|
|
<!-- <h2 class="oa-extended-activities-header-title">工会活动</h2>-->
|
|
<!-- <p class="oa-extended-activities-header-subtitle">精彩活动，丰富生活</p>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="oa-extended-activities-content">-->
|
|
<!-- <div v-if="currentActivityList && currentActivityList.length > 0" class="oa-extended-activities-grid">-->
|
|
<!-- <div v-for="activity in currentActivityList" :key="activity.id" class="oa-extended-activity-card"-->
|
|
<!-- @click="viewExtendedActivity(activity)">-->
|
|
<!-- <div class="oa-extended-activity-card-image">-->
|
|
<!-- <img :src="activity.cover || '/static/images/default-activity.jpg'" :alt="activity.name">-->
|
|
<!-- <div class="oa-extended-activity-card-overlay">-->
|
|
<!-- <div class="oa-extended-activity-card-status" :class="getActivityStatus(activity)">-->
|
|
<!-- {{ getActivityStatusText(activity) }}-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="oa-extended-activity-card-content">-->
|
|
<!-- <h3 class="oa-extended-activity-card-title">{{ activity.name }}</h3>-->
|
|
<!-- <div class="oa-extended-activity-card-meta">-->
|
|
<!-- <div class="oa-extended-activity-card-date">-->
|
|
<!-- <i class="fa fa-calendar"></i>-->
|
|
<!-- <span>{{ formatDate(activity.startDate) }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="oa-extended-activity-card-location" v-if="activity.location">-->
|
|
<!-- <i class="fa fa-map-marker"></i>-->
|
|
<!-- <span>{{ activity.location }}</span>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <p class="oa-extended-activity-card-description">-->
|
|
<!-- {{ activity.description || '精彩活动等您参与' }}-->
|
|
<!-- </p>-->
|
|
<!-- <div class="oa-extended-activity-card-footer">-->
|
|
<!-- <div class="oa-extended-activity-card-participants">-->
|
|
<!-- <i class="fa fa-users"></i>-->
|
|
<!-- <span>{{ activity.participantCount || 0 }}人参与</span>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="oa-extended-activity-card-action">-->
|
|
<!-- <button class="oa-extended-activity-card-btn" @click.stop="joinActivity(activity)">-->
|
|
<!-- <i class="fa fa-plus"></i>-->
|
|
<!-- 立即参与-->
|
|
<!-- </button>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <div v-else class="oa-extended-activities-empty">-->
|
|
<!-- <div class="oa-extended-activities-empty-icon">-->
|
|
<!-- <i class="fa fa-calendar-times-o"></i>-->
|
|
<!-- </div>-->
|
|
<!-- <div class="oa-extended-activities-empty-title">暂无活动</div>-->
|
|
<!-- <div class="oa-extended-activities-empty-desc">当前没有可展示的工会活动<br>敬请期待更多精彩内容</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
|
|
<!-- box3 - 工会网站新闻 -->
|
|
<div style="width: 100%;
|
|
background-image: url(https://www.ncu.edu.cn/images/bbg1.jpg);
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-repeat: no-repeat;">
|
|
<div class="oa-box-3-section">
|
|
<!-- 新闻动态和通知公告 -->
|
|
<div class="oa-box-3-news-notices">
|
|
<!-- 新闻动态 -->
|
|
<div class="oa-news-section">
|
|
<div class="oa-notice-header">
|
|
<div class="oa-notice-header-content">
|
|
<div class="oa-notice-header-icon">
|
|
<i class="fa fa-newspaper-o"></i>
|
|
</div>
|
|
<h2 class="oa-notice-header-title">新闻动态</h2>
|
|
</div>
|
|
</div>
|
|
<div class="oa-news-content">
|
|
<div v-if="websiteNews.news && websiteNews.news.length > 0" class="oa-news-list">
|
|
<div v-for="news in websiteNews.news" :key="news.url" class="oa-news-item"
|
|
@click="openNews(news)">
|
|
<div class="oa-news-item-content">
|
|
<div class="oa-news-item-date">{{ news.date }}</div>
|
|
<div class="oa-news-item-title">{{ news.title }}</div>
|
|
</div>
|
|
<div class="oa-news-item-arrow">
|
|
<i class="fa fa-angle-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="oa-empty-state">
|
|
<div class="oa-empty-state-icon">
|
|
<i class="fa fa-newspaper-o"></i>
|
|
</div>
|
|
<div class="oa-empty-state-title">暂无新闻动态</div>
|
|
<div class="oa-empty-state-desc">当前没有可用的新闻内容</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 通知公告 -->
|
|
<div class="oa-notices-section">
|
|
<div class="oa-notice-header">
|
|
<div class="oa-notice-header-content">
|
|
<div class="oa-notice-header-icon">
|
|
<i class="fa fa-bullhorn"></i>
|
|
</div>
|
|
<h2 class="oa-notice-header-title">通知公告</h2>
|
|
</div>
|
|
</div>
|
|
<div class="oa-notices-content">
|
|
<div v-if="websiteNews.notices && websiteNews.notices.length > 0" class="oa-notices-list">
|
|
<div v-for="notice in websiteNews.notices" :key="notice.url" class="oa-notice-item"
|
|
@click="openNews(notice)">
|
|
<div class="oa-notice-item-content">
|
|
<div class="oa-notice-item-date">{{ notice.date }}</div>
|
|
<div class="oa-notice-item-title">{{ notice.title }}</div>
|
|
</div>
|
|
<div class="oa-notice-item-arrow">
|
|
<i class="fa fa-angle-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="oa-empty-state">
|
|
<div class="oa-empty-state-icon">
|
|
<i class="fa fa-bullhorn"></i>
|
|
</div>
|
|
<div class="oa-empty-state-title">暂无通知公告</div>
|
|
<div class="oa-empty-state-desc">当前没有可用的通知内容</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 基层动态 -->
|
|
<div class="oa-grassroots-wrapper">
|
|
<div class="oa-box-3-grassroots">
|
|
<div class="oa-grassroots-section">
|
|
<div class="oa-notice-header" style="justify-content: center;margin:40px 0 40px 0;">
|
|
<div class="oa-notice-header-content">
|
|
<div class="oa-notice-header-icon">
|
|
<i class="fa fa-users"></i>
|
|
</div>
|
|
<h2 class="oa-notice-header-title">基层动态</h2>
|
|
</div>
|
|
</div>
|
|
<div class="oa-grassroots-content">
|
|
<div v-if="websiteNews.grassroots && websiteNews.grassroots.length > 0"
|
|
class="oa-grassroots-list">
|
|
<div v-for="item in websiteNews.grassroots" :key="item.url" class="oa-grassroots-item"
|
|
@click="openNews(item)">
|
|
<div class="oa-grassroots-item-date">{{ item.date }}</div>
|
|
<div class="oa-grassroots-item-title">{{ item.title }}</div>
|
|
<div class="oa-grassroots-item-image">
|
|
<img v-if="item.image" :src="item.image" :alt="item.title"/>
|
|
<div v-else class="oa-grassroots-item-image-placeholder">
|
|
<i class="fa fa-image"></i>
|
|
</div>
|
|
</div>
|
|
<div class="oa-grassroots-item-summary" v-if="item.summary">{{ item.summary }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-else class="oa-empty-state">
|
|
<div class="oa-empty-state-icon">
|
|
<i class="fa fa-users"></i>
|
|
</div>
|
|
<div class="oa-empty-state-title">暂无基层动态</div>
|
|
<div class="oa-empty-state-desc">当前没有可用的基层动态内容</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script nonce="${cspNonce!}">
|
|
const vue = new Vue({
|
|
el: "#v4-home-app",
|
|
data() {
|
|
return {
|
|
searchQuery: "",
|
|
activeTab: "recent",
|
|
noticeTab: "system",
|
|
recommendTab: "service",
|
|
currentIndex: 0,
|
|
stats: {
|
|
todo: 3,
|
|
done: 0,
|
|
notifications: 7,
|
|
started: 9
|
|
},
|
|
activityList: [],
|
|
noticeList: [],
|
|
recommendServices: [],
|
|
favoriteItems: [],
|
|
recommendApps: [],
|
|
homeBannerList: "${config.AppHomeImg!}".split(",").map(item => item.trim()).filter(item => item),
|
|
|
|
// 工会网站新闻
|
|
websiteNews: {},
|
|
|
|
// 扩展工会活动数据
|
|
extendedActivities: []
|
|
}
|
|
},
|
|
computed: {
|
|
recentActivities() {
|
|
const now = new Date()
|
|
return this.activityList
|
|
.filter(activity => new Date(activity.endDate) >= now)
|
|
.sort((a, b) => new Date(b.startDate) - new Date(a.startDate))
|
|
},
|
|
historyActivities() {
|
|
const now = new Date()
|
|
return this.activityList
|
|
.filter(activity => new Date(activity.endDate) < now)
|
|
.sort((a, b) => new Date(b.startDate) - new Date(a.startDate))
|
|
},
|
|
currentActivityList() {
|
|
return this.activeTab === "recent" ? this.recentActivities : this.historyActivities
|
|
}
|
|
},
|
|
mounted() {
|
|
// 初始化数据
|
|
this.getActivity()
|
|
this.getStatistics()
|
|
this.getRecommendService()
|
|
this.getRecommendApp()
|
|
this.getFavorite()
|
|
this.getWebSiteNews()
|
|
},
|
|
methods: {
|
|
performSearch() {
|
|
if (this.searchQuery.trim()) {
|
|
console.log("搜索:", this.searchQuery)
|
|
// 实现搜索逻辑
|
|
}
|
|
},
|
|
formatDate(dateStr) {
|
|
if (!dateStr) return ''
|
|
const date = new Date(dateStr)
|
|
return date.toLocaleDateString('zh-CN', {
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit'
|
|
})
|
|
},
|
|
setActiveTab(tab) {
|
|
this.activeTab = tab
|
|
this.currentIndex = 0 // 切换标签时重置索引
|
|
},
|
|
setRecommendTab(tab) {
|
|
this.recommendTab = tab
|
|
},
|
|
|
|
// 获取活动列表
|
|
getActivity() {
|
|
$.get("/platform/home/listHomeActivity").then((res) => {
|
|
if (res.code === 0) {
|
|
this.activityList = res.data
|
|
}
|
|
})
|
|
},
|
|
viewNotice(notice) {
|
|
console.log('查看通知:', notice.title)
|
|
// 标记为已读
|
|
notice.isRead = true
|
|
// 这里可以添加查看详情的逻辑
|
|
},
|
|
|
|
// 待办、已办、消息、我的点击
|
|
handleStatClick(val) {
|
|
if (['todo', 'done', 'application']) {
|
|
window.open('/flow/todoCenter?status=' + val)
|
|
}
|
|
},
|
|
|
|
// 获取流程统计
|
|
async getStatistics() {
|
|
try {
|
|
const res = await $.post("/flow/todoCenter/statistics")
|
|
if (res.code === 0) {
|
|
const {todoCount, doneCount, startedCount} = res.data
|
|
this.stats.todo = todoCount
|
|
this.stats.done = doneCount
|
|
this.stats.started = startedCount
|
|
}
|
|
} catch (error) {
|
|
this.$message.error("获取统计数据失败")
|
|
console.error("获取统计数据失败:", error)
|
|
}
|
|
},
|
|
|
|
// 活动点击
|
|
openActivity(act) {
|
|
if (!act.url) {
|
|
this.$message.warning("管理员未配置活动链接")
|
|
return
|
|
}
|
|
window.open(act.url)
|
|
},
|
|
|
|
// 查询推荐服务
|
|
async getRecommendService() {
|
|
this.$axios.post('/platform/home/listRecommendService', {platform: "PC"}).then(res => {
|
|
if (res.code === 0) {
|
|
this.recommendServices = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取推荐应用
|
|
async getRecommendApp() {
|
|
this.$axios.post('/platform/home/listRecommendApp', {platform: "PC"}).then(res => {
|
|
if (res.code === 0) {
|
|
this.recommendApps = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
// 获取我的收藏
|
|
async getFavorite() {
|
|
this.$axios.post('/platform/home/listFavorite', {platform: "PC"}).then(res => {
|
|
if (res.code === 0) {
|
|
this.favoriteItems = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
|
|
// 推荐服务点击事件
|
|
openService(service) {
|
|
window.open(service.href, "_blank")
|
|
},
|
|
|
|
// 推荐应用点击事件
|
|
openApp(app) {
|
|
// 储存到缓存
|
|
window.sessionStorage.setItem("zhgh_sub_app", JSON.stringify(app))
|
|
// 新标签页打开
|
|
window.open("/platform/v4/subApp?appId=" + app.id, "_blank")
|
|
},
|
|
|
|
// 收藏项目点击事件
|
|
openFavorite(item) {
|
|
if (item.href) {
|
|
this.openService(item)
|
|
} else if (!item.parentId) {
|
|
this.openApp(item)
|
|
}
|
|
},
|
|
|
|
// 获取工会网站新闻
|
|
getWebSiteNews() {
|
|
this.$axios.post('/platform/home/getNews').then(res => {
|
|
if (res.code === 0) {
|
|
this.websiteNews = res.data
|
|
}
|
|
})
|
|
},
|
|
|
|
// 打开新闻/通知/基层动态
|
|
openNews(item) {
|
|
if (item.url) {
|
|
// 如果是相对路径，添加基础URL
|
|
const baseUrl = 'https://gh.ncu.edu.cn/'
|
|
const fullUrl = item.url.startsWith('http') ? item.url : baseUrl + item.url
|
|
window.open(fullUrl, '_blank')
|
|
}
|
|
},
|
|
|
|
// 获取活动状态样式类
|
|
getActivityStatus(activity) {
|
|
const now = new Date()
|
|
const startDate = new Date(activity.startDate)
|
|
const endDate = new Date(activity.endDate)
|
|
|
|
if (now < startDate) {
|
|
return 'upcoming'
|
|
} else if (now >= startDate && now <= endDate) {
|
|
return 'active'
|
|
} else {
|
|
return 'ended'
|
|
}
|
|
},
|
|
|
|
// 获取活动状态文本
|
|
getActivityStatusText(activity) {
|
|
const status = this.getActivityStatus(activity)
|
|
switch (status) {
|
|
case 'upcoming':
|
|
return '即将开始'
|
|
case 'active':
|
|
return '进行中'
|
|
case 'ended':
|
|
return '已结束'
|
|
default:
|
|
return '未知'
|
|
}
|
|
},
|
|
|
|
// 查看扩展活动详情
|
|
viewExtendedActivity(activity) {
|
|
// 复用现有的活动查看逻辑
|
|
this.viewNotice(activity)
|
|
},
|
|
|
|
// 参与活动
|
|
joinActivity(activity) {
|
|
// 复用现有的活动参与逻辑
|
|
this.openActivity(activity)
|
|
}
|
|
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<!--#}#-->
|
|
|