ss_dc_wechat_mini_program/pages/todo/todo_list.scss

// 文件夹标签页效果
.folder-tab {
  position: relative;
  height: 28rpx;
  margin-bottom: -10rpx;
  z-index: 10;

  .tab-base-line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 12rpx;
    z-index: 1;

    &.orange {
      background: #fbb580;
    }

    &.gray {
      background: #ccc;
    }
  }

  // 上层：左侧梯形白色区域
  .tab-trapezoid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 125rpx;
    height: 24rpx;
    background: #fff;
    z-index: 3;
    border-left: 1rpx solid #e1e2e3;
    border-right: 1rpx solid #e1e2e3;
    border-top: 1rpx solid #e1e2e3;

    // 梯形效果 - 更明显的斜切
    clip-path: polygon(0 100%, 0 0, 80% 0, 100% 100%);

    // 梯形内的彩色线
    .tab-inner-line {
      position: absolute;
      bottom: 0;
      left: 30%;
      transform: translateX(-30%);
      height: 8rpx;
      border-radius: 6rpx;
      width: 60%;


      &.orange {
        background: #fbb580;
      }

      &.gray {
        background: #dbdde4;
      }
    }
  }

  // 右侧：二分之一高度的线
  .tab-right-line {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 14rpx;
    z-index: 2;
    border-radius:0 999rpx 999rpx 0;
    border-top: 1rpx solid #e1e2e3;
    border-right: 1rpx solid #e1e2e3;

    &.orange {
      background: #fbb580;
    }

    &.gray {
      background: #dbdde4;
    }
  }
}

// 容器样式
.draft-container,
.folder-container {
  position: relative;
}

.todo-page {
  height: 100vh; // 固定高度
  background: #f5f5f5;
  padding-bottom: 120rpx; // 为tabbar留出空间
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.todo-container {
  flex: 1; // 使用 flex 布局
  width: 100%;
  box-sizing: border-box;
  // 限制滚动行为
  overflow-y: auto;
}

.todo-content {
  padding: 20rpx;
  // 确保内容高度不超过容器
  max-height: 100%;
  box-sizing: border-box;
}

// 草稿箱样式
.draft-section {
  background: #fff;
  border: 1rpx solid #e1e2e3;
  border-right: none;
  border-radius: 6rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  position: relative;

  // 左滑状态时，右侧线条不显示圆角
  .draft-item-wrapper.swiped .draft-item::after {
    border-radius: 0 !important;
  }
}

.draft-header {
  height: 56rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx 12rpx 20rpx 30rpx; 
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;

  // 草稿箱标题右侧橙色线
  &::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 12rpx;
    background: #fbb580;
    border-radius:0 999rpx 6rpx 0;
  }

  .draft-title {
    display: flex;
    align-items: center;

    .title-text {
      margin-left: 16rpx;
      font-size: 34rpx;
      font-weight: 600;
      color: #000;
    }
  }

  .count-badge {
    font-family: 'SSXinYiTi' !important;
    font-size: 76rpx !important;
    width: 104rpx;
    text-align: center;
    box-sizing: border-box;
    line-height: 1;
    font-weight: normal !important;
    color: #dddfe6;
    // padding-left: 20rpx;
    border-left: 2rpx solid #d8dae1;
  }
}

.draft-content {
  .draft-item-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;

    // 当有swiped状态时，显示操作按钮
    &.swiped {
      .draft-item {
        transform: translateX(-200rpx);

        &::after {
          // 线移动到操作按钮左边缘（内容移动-200rpx，线移动到按钮左边）
          right: 0rpx;
          transform: none;
        }
      }

      .swipe-actions {
        transform: translateX(0);
      }
    }

    .draft-item {
      height: 97rpx;
      display: flex;
      align-items: center;
      padding: 0 12rpx 0 30rpx;
      border-bottom: 1rpx solid #f0f0f0;
      background: #fff;
      transition: transform 0.3s ease;
      position: relative;
      width: 100%;
      box-sizing: border-box;

      &:last-child {
        border-bottom: none;
      }

      // 右侧颜色线 - 跟着项目移动
      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 12rpx;
        border-radius: 0 6rpx 6rpx 0;

        background: #dbdde4; // 默认灰色
        transition: all 0.3s ease;
        z-index: 2;
      }

      // 有操作时显示橙色
      &.has-actions::after {
        background: #fbb580;
      }



      .draft-icon {
        margin-left: 20rpx;
        margin-right: 20rpx;

        .dot {
          width: 12rpx;
          height: 12rpx;
          border-radius: 50%;
          background: #666;
        }
      }

      .draft-title {
        flex: 1;
        font-size: 28rpx;
        color: #000;
        margin-right: 20rpx;
        // 限制最多两行
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 34rpx;
      }

      .draft-time-wrapper {
        position: relative;
        // margin-right: 20rpx;
        width: 104rpx;
        text-align: center;
        // 虚线在时间左边
        &::before {
          content: '';
          position: absolute;
          left: 0rpx;
          top: 0;
          bottom: 0;
          width: 2rpx;
          background: linear-gradient(to bottom, #ddd 50%, transparent 50%);
          background-size: 2rpx 8rpx;
        }

        .draft-time {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 28rpx;
          color: #999;
          line-height: 34rpx;
        }
      }
    }

    .swipe-actions {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 200rpx;
      display: flex;
      transform: translateX(100%);
      transition: transform 0.3s ease;
      box-sizing: border-box;

      .action-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 24rpx;

        &.edit-btn {
          background: #007AFF;
        }

        &.delete-btn {
          background: #ff4757;
        }
      }
    }


  }
}

// 审核分组样式
.approval-group {
  background: transparent;
  border-radius: 6rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

// 文件夹样式（多级）
.folder-item {
  position: relative;
  border: 1rpx solid #e1e2e3;
  border-right: none;

  // 左滑状态时，右侧线条不显示圆角
  .sub-item-wrapper.swiped .sub-item::after {
    border-radius: 0 !important;
  }
 

  .folder-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 12rpx 20rpx 30rpx;
    border-bottom: 1rpx solid #f0f0f0;
    height: 56rpx;
    background: #fff;
    position: relative;

    // 文件夹标题右侧灰色线
    &::after {
      content: '';
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 12rpx;
      background: #dbdde4;
      border-radius:0 6rpx 6rpx 0;
    }

    .folder-title {
      display: flex;
      align-items: center;

      .title-text {
        margin-left: 16rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
    }

    .count-badge {
      width: 104rpx;
      text-align: center;
      box-sizing: border-box;
      font-family: 'SSXinYiTi', sans-serif;
      font-size: 76rpx;
      line-height: 1;
      color: #dddfe6;
      // padding-left: 20rpx;
      border-left: 2rpx solid #d8dae1;
    }
  }

  .folder-content {
    background: #f8f9fa;

    .sub-item-wrapper {
      position: relative;
      overflow: hidden;
      width: 100%;
      box-sizing: border-box;

      // 当有swiped状态时，显示操作按钮
      &.swiped {
        .sub-item {
          transform: translateX(-200rpx);

          &::after {
            // 线移动到操作按钮左边缘
            right: 0rpx;
            transform: none;
          }
        }

        .swipe-actions {
          transform: translateX(0);
        }
      }

      .sub-item {
        display: flex;
        align-items: center;
        height: 97rpx;
        padding: 0 12rpx 0 30rpx;
        border-bottom: 1rpx solid #e9ecef;
        background: #fff;
        transition: transform 0.3s ease;
        position: relative;
        width: 100%;
        box-sizing: border-box;

        &:last-child {
          border-bottom: none;
        }

        // 右侧颜色线 - 跟着项目移动
        &::after {
          content: '';
          position: absolute;
          right: 0;
          top: 0;
          bottom: 0;
          width: 12rpx;
          background: #dbdde4; // 默认灰色
          transition: all 0.3s ease;
          border-radius: 0 6rpx 6rpx 0;
        }

        // 有操作时显示蓝色
        &.has-actions::after {
          background: #6b9ce0;
        }



        .sub-icon {
          margin-left: 20rpx;
          margin-right: 20rpx;

          .dot {
            width: 12rpx;
            height: 12rpx;
            border-radius: 50%;
            background: #666;
          }
        }

        .sub-title {
          flex: 1;
          font-size: 28rpx;
          color: #000;
          margin-right: 20rpx;
          // 限制最多两行
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 34rpx;
        }

        .sub-time-wrapper {
          position: relative;
          // margin-right: 20rpx;
          width: 104rpx;
          text-align: center;

          // 虚线在时间左边
          &::before {
            content: '';
            position: absolute;
            left: 0rpx;
            top: 0;
            bottom: 0;
            width: 2rpx;
            background: linear-gradient(to bottom, #ddd 50%, transparent 50%);
            background-size: 2rpx 8rpx;
          }

          .sub-time {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 28rpx;
            color: #999;
            line-height: 34rpx;
          }
        }
      }

      .swipe-actions {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 200rpx;
        display: flex;
        transform: translateX(100%);
        transition: transform 0.3s ease;

        .action-btn {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 24rpx;
          background: #007AFF;
        }
      }
    }
  }
}

// 文件样式（单级）
.file-item {
  // 左滑状态时，右侧线条不显示圆角
  .file-item-wrapper.swiped .file-content::after {
    border-radius: 0 !important;
  }
  .file-item-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;

    // 当有swiped状态时，显示操作按钮
    &.swiped {
      .file-content {
        transform: translateX(-200rpx);

        &::after {
          // 线移动到操作按钮左边缘
          right: 0rpx;
          transform: none;
        }
      }

      .swipe-actions {
        transform: translateX(0);
      }
    }

    .file-content {
      display: flex;
      align-items: center;
      height: 97rpx;
      padding: 0 12rpx 0 30rpx;
      background: #fff;
      transition: transform 0.3s ease;
      position: relative;
      width: 100%;
      box-sizing: border-box;

      // 右侧颜色线 - 跟着项目移动
      &::after {
        content: '';
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 12rpx;
        background: #dbdde4; // 默认灰色
        transition: all 0.3s ease;
        border-radius: 0 6rpx 6rpx 0;
      }

      // 有操作时显示蓝色
      &.has-actions::after {
        background: #6b9ce0;
      }



      .file-icon {
        // margin-left: 20rpx;
        margin-right: 24rpx;
        display: flex;
        align-items: center;
      }

      .file-title {
        flex: 1;
        font-size: 28rpx;
        color: #000;
        margin-right: 20rpx;
        // 限制最多两行
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 34rpx;
      }

      .file-time-wrapper {
        position: relative;
        // margin-right: 20rpx;
        width: 104rpx;
        text-align: center;

        // 虚线在时间左边
        &::before {
          content: '';
          position: absolute;
          left: 0rpx;
          top: 0;
          bottom: 0;
          width: 2rpx;
          background: linear-gradient(to bottom, #ddd 50%, transparent 50%);
          background-size: 2rpx 8rpx;
        }

        .file-time {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 28rpx;
          color: #999;
          line-height: 34rpx;
        }
      }
    }

    .swipe-actions {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      width: 200rpx;
      display: flex;
      transform: translateX(100%);
      transition: transform 0.3s ease;

      .action-btn {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 28rpx;
        background: #007AFF;
      }
    }
  }
}

// 这些样式已经在上面的具体组件中定义，删除重复代码

// 旧的 todo-item 样式已删除，现在使用更具体的 draft-item、sub-item、file-content 样式



.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;

  .empty-text {
    margin-top: 32rpx;
    font-size: 28rpx;
    color: #999;
  }
}