ali_ai_learn_web/src/pages/Personal/Workflow.vue

<template>
  <div class="workflow">
    <div class="gradient workflow-btn flex-center">
      <img src="/src/assets/imgs/add.png" alt="">
      <div class="">{{ $t('common.publishWorkflow') }}</div>
    </div>
    <ul class="workflow-list">
      <li v-for="(item, index) in 6" :key="index" class="">
        <img class="image"
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" alt="">
        <div class="kong"></div>
        <div class="workflow-list-con flex-column flex-between">
          <div class="top">
            <div class="workflow-list-time flex-align-center">
              <img src="/src/assets/imgs/rili.png" alt="">
              <div class="">2023-10-15</div>
            </div>
            <div class="title">Linux操作集锦系列之十五——如何破解pdf、doc、word、png、MP3、mp4、表格...</div>
            <div class="desc">- 本文介绍两款开源的密码破解工具John the Ripp...</div>
          </div>
          <div class="flex_1">
            <div class="info flex-center-between">
              <div class="info-left flex-align-center">
                <el-avatar :size="30" :src="''" />
                <div class="">花花</div>
              </div>
              <div class="info-right flex-align-center">
                <img src="/src/assets/imgs/yun.png" alt="">
                <div class="">n8n平台</div>
              </div>
            </div>
            <div class="footer flex-center-between">
              <div class="flex-center btn">
                <img src="/src/assets/imgs/my/edit@2x.png" alt="">
                <div class="">{{ $t('common.edit') }}</div>
              </div>
              <div class="flex-center btn">
                <img src="/src/assets/imgs/my/del@2x.png" alt="">
                <div class="">{{ $t('common.delete') }}</div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
    <Pagination :total="20" :page-size="10" :current-page="1" @page-change="handlePageChange" />
  </div>
</template>
<script setup lang="ts">
import Pagination from '@/components/Pagination.vue'
</script>
<style scoped lang="scss">
.workflow {
  padding: 16px 0 20px;

  .workflow-btn {
    height: 50px;
    color: #FFFFFF;
    cursor: pointer;
    border-radius: 10px;
    font-size: 18px;

    &:hover {
      opacity: 0.9;
    }

    img {
      width: 30px;
      height: 30px;
      margin-right: 4px;
    }
  }

  .workflow-list {
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 16px;

    li {
      width: 380px;
      cursor: pointer;
      position: relative;
      background: #F5F7FA;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid #FFFFFF;

      .image {
        width: 100%;
        height: 204px;
        display: block;
        object-fit: cover;
        border-radius: 16px 16px 0 0;
      }

      .kong {
        height: 166px;
      }

      .workflow-list-con {
        height: 224px;
        padding: 16px;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        transform: translateY(58px);
        transition: transform 0.3s ease;

        background: #F5F7FA;
        border-radius: 0px 0px 16px 16px;

        .top {
          line-height: 1;
          height: 120px;
          display: flex;
          flex-direction: column;
        }

        .workflow-list-time {
          font-size: 14px;

          img {
            width: 16px;
            height: 16px;
            margin-right: 8px;
          }
        }

        .title {
          margin: 8px 0;
          font-size: 18px;
          font-weight: bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 26px;
        }

        .desc {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .info {
          font-size: 14px;

          .info-left {
            div {
              margin-left: 8px;
            }
          }

          .info-right {
            padding: 0 4px;
            height: 22px;
            background: #E9F3FF;
            border-radius: 4px;

            img {
              width: 16px;
              height: 16px;
              margin-right: 8px;
            }
          }
        }

        .footer {
          margin-top: 8px;

          .btn {
            width: 166px;
            height: 40px;
            font-size: 14px;
            color: #2D71FF;
            background: #FFFFFF;
            border-radius: 10px;

            img {
              width: 16px;
              height: 16px;
              margin-right: 4px;
            }

            &:last-child {
              color: #E43434;
            }
            &:hover {
              opacity: 0.7;
            }
          }
        }
      }

      &:hover {
        .workflow-list-con {
          transform: translateY(0);
        }
      }
    }
  }
}
</style>