样式修改

2025-10-31 13:17:57 +08:00
parent a881f57e30
commit 9ad9507a72
19 changed files with 693 additions and 971 deletions
--- a/schoolNewsWeb/src/assets/imgs/task-finish.svg
+++ b/schoolNewsWeb/src/assets/imgs/task-finish.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="60" height="60" rx="4.67532" fill="#F3FFF0"/>
+  <path d="M42.0005 23.3318V42.0105C42.0005 42.7409 41.4076 43.3327 40.6763 43.3328H19.3257C18.5942 43.3328 18.0005 42.7258 18.0005 42.0105V17.989C18.0005 17.2587 18.5944 16.6667 19.3257 16.6667H35.3345L42.0005 23.3318ZM29.3813 29.9324L26.5532 27.1042L24.6675 28.989L29.3813 33.7039L35.0386 28.0466L33.1528 26.1609L29.3813 29.9324Z" fill="#44BB17"/>
+  </svg>
+  
--- a/schoolNewsWeb/src/assets/imgs/task-learning.svg
+++ b/schoolNewsWeb/src/assets/imgs/task-learning.svg
@@ -0,0 +1,7 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="60" height="60" rx="4.67532" fill="#FFFBEB"/>
+  <path d="M35.3338 16.6667L42.0005 23.3334V42.011C42.0005 42.7414 41.4073 43.3334 40.676 43.3334H19.325C18.5935 43.3334 18.0005 42.7263 18.0005 42.011V17.9891C18.0005 17.2588 18.5938 16.6667 19.325 16.6667H35.3338ZM30.0005 24.6667C27.055 24.6667 24.6672 27.0546 24.6672 30.0001C24.6672 32.9455 27.055 35.3334 30.0005 35.3334C32.946 35.3334 35.3338 32.9455 35.3338 30.0001H30.0005V24.6667Z" fill="#F6A723"/>
+  <path d="M30.0005 24.6667C27.055 24.6667 24.6672 27.0546 24.6672 30.0001C24.6672 32.9455 27.055 35.3334 30.0005 35.3334C32.946 35.3334 35.3338 32.9455 35.3338 30.0001H30.0005V24.6667Z" fill="#F6A723"/>
+  <path d="M36.949 27.6489L34.6331 25.333L24.6704 33.0174L24.667 35.3298L26.9863 35.3333L36.949 27.6489Z" fill="#F9F9F9"/>
+  </svg>
+  
--- a/schoolNewsWeb/src/assets/imgs/task-notstart.svg
+++ b/schoolNewsWeb/src/assets/imgs/task-notstart.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="60" height="60" rx="4.67532" fill="#F8FBFC"/>
+  <path d="M35.3338 16.6667L42.0005 23.3321V42.011C42.0005 42.7414 41.4073 43.3334 40.676 43.3334H19.325C18.5935 43.3334 18.0005 42.7263 18.0005 42.011V17.9891C18.0005 17.2588 18.5938 16.6667 19.325 16.6667H35.3338ZM31.3338 26.0001H28.6672V34.0001H35.3338V31.3334H31.3338V26.0001Z" fill="#38BDF8"/>
+  </svg>
+  
--- a/schoolNewsWeb/src/assets/imgs/task-total.svg
+++ b/schoolNewsWeb/src/assets/imgs/task-total.svg
@@ -0,0 +1,5 @@
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="60" height="60" rx="4.67532" fill="#F4FAFF"/>
+  <path d="M42.0015 23.334V42.0127C42.0012 42.7429 41.4075 43.335 40.6763 43.335H19.3247C18.5935 43.3348 18.0007 42.7277 18.0005 42.0127V17.9902C18.0005 17.26 18.5936 16.6672 19.3247 16.667H35.3345L42.0015 23.334ZM24.6675 32.668V35.334H35.3345V32.668H24.6675ZM24.6675 27.334V30.001H35.3345V27.334H24.6675ZM24.6675 22.001V24.667H28.6675V22.001H24.6675Z" fill="#4DAEFF"/>
+  </svg>
+  
--- a/schoolNewsWeb/src/views/public/article/ArticleAddView.vue
+++ b/schoolNewsWeb/src/views/public/article/ArticleAddView.vue
@@ -1,6 +1,5 @@
 <template>
  <ArticleAdd 
-    v-if="articleId !== undefined"
    :article-id="articleId"
    :show-back-button="true"
    back-button-text="返回"
--- a/schoolNewsWeb/src/views/public/task/LearningTaskDetail.vue
+++ b/schoolNewsWeb/src/views/public/task/LearningTaskDetail.vue
--- a/schoolNewsWeb/src/views/user/resource-center/ResourceCenterView.vue
+++ b/schoolNewsWeb/src/views/user/resource-center/ResourceCenterView.vue
@@ -43,7 +43,7 @@ import { Search, CenterHead } from '@/components/base';
 import type { Resource, Tag } from '@/types/resource';

 const showArticle = ref(false);
-const currentCategoryId = ref('party_history');
+const currentCategoryId = ref('tag_article_001');
 const currentCategoryName = ref('党史学习');
 const currentResourceId = ref('');
 const searchKeyword = ref('');
@@ -99,6 +99,7 @@ async function handleArticleNavigate(direction: 'prev' | 'next', resourceId: str
 <style scoped lang="scss">
 .resource-center-view {
  background: #F9F9F9;
+  height: 100%;
 }

 .search-wrapper {
--- a/schoolNewsWeb/src/views/user/resource-center/components/ResourceList.vue
+++ b/schoolNewsWeb/src/views/user/resource-center/components/ResourceList.vue
@@ -275,12 +275,5 @@ defineExpose({
  color: #979797;
 }

-.pagination-wrapper {
-  display: flex;
-  justify-content: center;
-  padding: 30px 0;
-  background: #FFFFFF;
-  border-top: 1px solid #EEEEEE;
-}
 </style>

--- a/schoolNewsWeb/src/views/user/study-plan/CourseCenterView.vue
+++ b/schoolNewsWeb/src/views/user/study-plan/CourseCenterView.vue
@@ -13,7 +13,6 @@
              v-model="searchKeyword"
              placeholder="搜索思政资源"
              class="search-input"
-              clearable
              @keyup.enter="handleSearch"
            >
              <template #suffix>
@@ -220,6 +219,7 @@ function getCategoryName(): string {
    max-width: 400px;
    
    .search-input {
+      border: none;
      :deep(.el-input__wrapper) {
        border-radius: 30px;
        padding-right: 4px;
--- a/schoolNewsWeb/src/views/user/study-plan/LearningTaskDetailView.vue
+++ b/schoolNewsWeb/src/views/user/study-plan/LearningTaskDetailView.vue
@@ -2,7 +2,7 @@
    <LearingTaskDetail 
      :task-id="taskId" 
      :show-back-button="true"
-      back-button-text="返回任务列表"
+      back-button-text="返回"
      @back="handleBack"
    />
 </template>
--- a/schoolNewsWeb/src/views/user/study-plan/StudyTasksView.vue
+++ b/schoolNewsWeb/src/views/user/study-plan/StudyTasksView.vue
@@ -54,45 +54,63 @@
            v-for="task in taskList"
            :key="task.taskID"
            class="task-card"
-            @click="handleTaskClick(task)"
          >
+            <!-- 背景装饰 -->
+            <div class="task-bg-decoration"></div>
+            
            <!-- 内容容器 -->
            <div class="task-content">
-              <!-- 状态标签（小标签，自适应宽度） -->
-              <div 
-                class="status-tag"
-                :class="{
-                  'status-pending': task.status === 0,
-                  'status-processing': task.status === 1,
-                  'status-completed': task.status === 2
-                }"
-              >
-                {{ task.status === 0 ? '待完成' : task.status === 1 ? '进行中' : '已完成' }}
-              </div>
+              <!-- 顶部信息区 -->
+              <div class="task-header">
+                <!-- 状态标签（小标签，自适应宽度） -->
+                <div 
+                  class="status-tag"
+                  :class="{
+                    'status-pending': task.status === 0,
+                    'status-processing': task.status === 1,
+                    'status-completed': task.status === 2
+                  }"
+                >
+                  {{ task.status === 0 ? '待完成' : task.status === 1 ? '进行中' : '已完成' }}
+                </div>

-              <!-- 任务标题 -->
-              <h3 class="task-title">{{ task.name }}</h3>
+                <!-- 任务标题 -->
+                <h3 class="task-title">{{ task.name }}</h3>
+              </div>

              <!-- 任务描述 -->
              <p class="task-desc">{{ task.description || '暂无描述' }}</p>

+              <!-- 学习进度 -->
+              <div class="task-progress">
+                <div class="progress-header">
+                  <span class="progress-label">学习进度</span>
+                  <span class="progress-value">{{ getTaskProgress(task) }}%</span>
+                </div>
+                <div class="progress-bar">
+                  <div class="progress-fill" :style="{ width: getTaskProgress(task) + '%' }"></div>
+                </div>
+              </div>
+
              <!-- 任务底部信息 -->
              <div class="task-footer">
-                <span class="task-time">
-                  任务时间：{{ formatDate(task.startTime) }}-{{ formatDate(task.endTime) }}
-                </span>
-                <div 
-                  v-if="getDeadlineStatus(task).show"
-                  class="deadline-tag"
-                  :class="{
-                    'deadline-danger': getDeadlineStatus(task).type === 'danger',
-                    'deadline-info': getDeadlineStatus(task).type === 'info',
-                    'deadline-success': getDeadlineStatus(task).type === 'success',
-                    'deadline-primary': getDeadlineStatus(task).type === 'primary',
-                  }"
-                >
-                  {{ getDeadlineStatus(task).text }}
+                <div class="task-time">
+                  <el-icon class="calendar-icon"><Calendar /></el-icon>
+                  <span>任务时间：{{ formatDate(task.startTime) }}-{{ formatDate(task.endTime) }}</span>
+                  <span 
+                    v-if="getDeadlineStatus(task).show"
+                    class="deadline-text"
+                    :class="'deadline-' + getDeadlineStatus(task).type"
+                  >
+                    （{{ getDeadlineStatus(task).text }}）
+                  </span>
                </div>
+                <button 
+                  class="start-btn"
+                  @click.stop="handleTaskClick(task)"
+                >
+                  {{ task.status === 0 ? '开始学习' : '继续学习' }}
+                </button>
              </div>
            </div>
          </div>
@@ -110,10 +128,10 @@
 import { ref, onMounted, computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
-import { DocumentCopy, DocumentChecked } from '@element-plus/icons-vue';
+import { DocumentCopy, DocumentChecked, Calendar } from '@element-plus/icons-vue';
 import { useStore } from 'vuex';
 import { learningTaskApi } from '@/apis/study';
-import type { LearningTask, TaskItemVO } from '@/types';
+import type { TaskItemVO } from '@/types';
 import { StudyPlanLayout } from '@/views/user/study-plan';

 defineOptions({
@@ -123,7 +141,7 @@ defineOptions({
 const router = useRouter();
 const store = useStore();
 const loading = ref(false);
-const taskList = ref<LearningTask[]>([]);
+const taskList = ref<TaskItemVO[]>([]);

 // 统计数据
 const totalCount = ref(0);
@@ -210,7 +228,7 @@ async function loadUserProgress() {


 // 点击任务卡片
-function handleTaskClick(task: LearningTask) {
+function handleTaskClick(task: TaskItemVO) {
  if (!task.taskID) {
    ElMessage.warning('任务ID不存在');
    return;
@@ -232,8 +250,14 @@ function formatDate(dateString?: string): string {
  return `${date.getFullYear()}.${(date.getMonth() + 1).toString().padStart(2, '0')}.${date.getDate().toString().padStart(2, '0')}`;
 }

+// 获取任务学习进度
+function getTaskProgress(task: TaskItemVO): number {
+  if (!task.progress && task.progress !== 0) return 0;
+  return Math.round(task.progress);
+}
+
 // 获取截止时间状态
-function getDeadlineStatus(task: LearningTask): { show: boolean; text: string; type: 'danger' | 'info' | 'success' | 'primary' } {
+function getDeadlineStatus(task: TaskItemVO): { show: boolean; text: string; type: 'danger' | 'info' | 'success' | 'primary' } {
  if (!task.endTime) {
    return { show: false, text: '', type: 'primary' };
  }
@@ -426,127 +450,217 @@ function getDeadlineStatus(task: LearningTask): { show: boolean; text: string; t
 }

 .task-card {
+  position: relative;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
  padding: 40px;
-  cursor: pointer;
  transition: all 0.3s;
-  min-height: 278px;
+  height: 376px;
+  overflow: hidden;
  
  &:hover {
    box-shadow: 0 8px 20px rgba(164, 182, 199, 0.2);
    transform: translateY(-2px);
  }
  
+  // 背景装饰
+  .task-bg-decoration {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, rgba(253, 144, 130, 0.03) 0%, rgba(253, 109, 120, 0.03) 100%);
+    pointer-events: none;
+    z-index: 0;
+  }
+  
  .task-content {
+    position: relative;
+    z-index: 1;
    display: flex;
    flex-direction: column;
-    gap: 18px;
+    height: 100%;
+    gap: 0;
    
-    // 状态标签 - 小标签，自适应宽度
-    .status-tag {
-      align-self: flex-start;
-      display: inline-flex;
-      align-items: center;
-      gap: 4px;
-      padding: 3px 8px;
-      font-size: 14px;
-      font-weight: 500;
-      line-height: 1.5714285714285714;
-      border-radius: 2px;
+    // 顶部信息区
+    .task-header {
+      display: flex;
+      flex-direction: column;
+      gap: 18px;
+      margin-bottom: 18px;
      
-      // 待完成 - 红色
-      &.status-pending {
-        background-color: #FFECE8;
-        color: #F53F3F;
-      }
-      
-      // 进行中 - 蓝色
-      &.status-processing {
-        background-color: #E8F7FF;
-        color: #3491FA;
-      }
-      
-      // 已完成 - 绿色
-      &.status-completed {
-        background-color: #E8FFEA;
-        color: #00B42A;
+      // 状态标签 - 小标签，自适应宽度
+      .status-tag {
+        align-self: flex-start;
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 3px 8px;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 1.5714285714285714;
+        border-radius: 2px;
+        
+        // 待完成 - 红色
+        &.status-pending {
+          background-color: #FFECE8;
+          color: #F53F3F;
+        }
+        
+        // 进行中 - 蓝色
+        &.status-processing {
+          background-color: #E8F7FF;
+          color: #3491FA;
+        }
+        
+        // 已完成 - 绿色
+        &.status-completed {
+          background-color: #E8FFEA;
+          color: #00B42A;
+        }
      }
    }
-  }
-  
-  .task-title {
-    font-size: 20px;
-    font-weight: 600;
-    color: #141F38;
-    margin: 0;
-    line-height: 1.4;
-  }
-  
-  .task-desc {
-    font-size: 14px;
-    font-weight: 400;
-    color: #334155;
-    line-height: 1.5714285714285714;
-    margin: 0;
-    flex: 1;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-  
-  .task-footer {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    gap: 20px;
    
-    .task-time {
+    .task-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: #141F38;
+      margin: 0;
+      line-height: 1.4;
+    }
+    
+    .task-desc {
      font-size: 14px;
      font-weight: 400;
-      color: #979797;
+      color: #334155;
      line-height: 1.5714285714285714;
-      flex: 1;
+      margin: 0 0 20px 0;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      line-clamp: 3;
+      overflow: hidden;
+      text-overflow: ellipsis;
    }
    
-    // 截止时间标签
-    .deadline-tag {
-      flex-shrink: 0;
-      display: inline-flex;
+    // 学习进度
+    .task-progress {
+      margin-bottom: auto;
+      padding-bottom: 20px;
+      
+      .progress-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 6px;
+        
+        .progress-label {
+          font-size: 14px;
+          font-weight: 400;
+          color: #1D2129;
+          line-height: 1.5714285714285714;
+        }
+        
+        .progress-value {
+          font-size: 14px;
+          font-weight: 400;
+          color: #1D2129;
+          line-height: 1.5714285714285714;
+        }
+      }
+      
+      .progress-bar {
+        width: 100%;
+        height: 6px;
+        background: #F7F8F9;
+        border-radius: 27px;
+        overflow: hidden;
+        
+        .progress-fill {
+          height: 100%;
+          background: linear-gradient(143deg, #FD9082 1%, #FD6D78 99%);
+          border-radius: 27px;
+          transition: width 0.3s ease;
+        }
+      }
+    }
+    
+    .task-footer {
+      display: flex;
+      justify-content: space-between;
      align-items: center;
-      gap: 4px;
-      padding: 0 8px;
-      font-size: 12px;
-      font-weight: 500;
-      line-height: 1.6666666666666667;
-      border-radius: 2px;
-      border: 1px solid;
-      background-color: transparent;
+      gap: 20px;
+      margin-top: auto;
      
-      // 即将截止 - 红色边框
-      &.deadline-danger {
-        border-color: #F53F3F;
-        color: #F53F3F;
-      }
-      
-      // 已截止 - 灰色边框
-      &.deadline-info {
-        border-color: #979797;
+      .task-time {
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        font-size: 14px;
+        font-weight: 400;
        color: #979797;
+        line-height: 1.5714285714285714;
+        flex: 1;
+        
+        .calendar-icon {
+          font-size: 16px;
+          color: #979797;
+          flex-shrink: 0;
+        }
+        
+        // 截止时间文本
+        .deadline-text {
+          font-size: 14px;
+          font-weight: 400;
+          line-height: 1.5714285714285714;
+          
+          // 即将截止 - 红色
+          &.deadline-danger {
+            color: #F53F3F;
+          }
+          
+          // 已截止 - 灰色
+          &.deadline-info {
+            color: #979797;
+          }
+          
+          // 已完成 - 绿色
+          &.deadline-success {
+            color: #00B42A;
+          }
+          
+          // 进行中 - 蓝色
+          &.deadline-primary {
+            color: #3491FA;
+          }
+        }
      }
-      // 已完成 - 绿色边框
-      &.deadline-success {
-        border-color: #00B42A;
-        color: #00B42A;
-      }
-      // 进行中 - 蓝色边框
-      &.deadline-primary {
-        border-color: #3491FA;
-        color: #3491FA;
+      
+      // 开始学习按钮
+      .start-btn {
+        flex-shrink: 0;
+        width: 104px;
+        height: 42px;
+        background: #C62828;
+        border: none;
+        border-radius: 8px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #FFFFFF;
+        line-height: 1.5;
+        cursor: pointer;
+        transition: all 0.3s;
+        
+        &:hover {
+          background: #D32F2F;
+          box-shadow: 0 4px 8px rgba(198, 40, 40, 0.3);
+        }
+        
+        &:active {
+          background: #B71C1C;
+        }
      }
    }
  }