ali_ai_learn_web/src/components/course-card.vue

<template>
  <div class="course-card list_item_animation" >
    <div class="bg_color_f5 coverImg" @click.stop.prevent="goWorkflowDetail">
      <img :src="info.coverImage" alt="" class="coverImg" />
    </div>
    <div class="course-card-bottom-height"></div>
    <div class="padding16 course-card-bottom">
      <div class="gap10">
        <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
        <div class="font_size13">{{info.createTime || ''}}</div>
      </div>
      <div style="min-height: 82px;" @click.stop.prevent="goWorkflowDetail">
        <div class="line2 font_size18 line_height26 bold mt10">
          {{info.workflowTitle || ''}}
        </div>
        <div class="mt10 line1 gray font_size13">
          {{info.description || ''}}
        </div>
      </div>
      <div class="mt10 flex-center-between">
        <div class="gap10">
          <el-avatar :size="24" :src="info.userAvatar || appStore.avatarDefault" />
          <div class="font_size14">{{info.nickName || '张三'}}</div>
        </div>
        <div class="gap10 contactInfo_bg border_radius_4">
          <img :src="yunIcon" alt="" style="width: 16px; height: 16px;" />
          <div class="font_size13">{{info.categoryName1}}平台</div>
        </div>
      </div>
      <div class="gap10 mt16 button-container">
        <el-button type="primary" class="flex_1" size="large" plain @click.stop.prevent="goWorkflowDetail">
          <el-icon class="mr10"><Document /></el-icon>
          查看详情
        </el-button>
        <el-button type="primary" class="flex_1 gradient" size="large">
          <el-icon class="mr10"><VideoPlay /></el-icon>
          开始使用
        </el-button>
      </div>
    </div>
    <!-- <div class="flex-center-between">
      <img :src="n8Icon" alt="" style="width: 50px; height: 50px;" class="mr10">
      <div class="line2 font_size18 line_height22 font_weight400">
        【Linux】【操作】Linux操作集锦系列之十五——如何破解pdf如何破解pdf如何破解pdf如何破解pdf如何破解pdf
      </div>
    </div>
    <div class="mt16 gap10">
      <img :src="yunIcon" alt="" style="width: 16px; height: 16px;">
      <div class="font_size13">n8n平台</div>
      <img :src="riliIcon" alt="" style="width: 16px; height: 16px;">
      <div class="font_size13">2023-10-15</div>
    </div>
    <div class="mt16 line3 gray font_size13">
      - 本文介绍两款开源的密码破解工具John the Ripper和PDFCrack，用于破解PDF、Word、Excel、ZIP、RAR等文件的密码。John the Ripper支持字典和暴力破解两种模
    </div>
    <div class="gap10 mt16">
      <el-button type="primary" class="flex_1" size="large" plain>
        <el-icon class="mr10"><Document /></el-icon>
        查看详情
      </el-button>
      <el-button type="primary" class="flex_1 gradient" size="large">
        <el-icon class="mr10"><VideoPlay /></el-icon>
        开始使用
      </el-button>
    </div> -->
  </div>
</template>
<script setup>
import n8Icon from '@/assets/imgs/8n8.png'
import yunIcon from '@/assets/imgs/yun.png'
import riliIcon from '@/assets/imgs/rili.png'
import { useAppStore } from '@/pinia/appStore'
const appStore = useAppStore();
import { useRouter } from 'vue-router'
const router = useRouter()


const props = defineProps({
  info: {
    type: Object,
    default: () => ({})
  },
  fromPage: {
    type: String,
    default: () => ''
  }
});
const goWorkflowDetail = () => {
  let path = `/search-platform/workflow-detail`
  if(props.fromPage === 'home'){
    path = `/workflow-detail`
  }
  //增加参数名称
  router.push({
    path: path,
    query: {
      publishId:props.info.publishId,
      metaTitle: 'route.WorkflowDetail'
    }
  })
};
</script>

<style scoped lang="scss">
.course-card {
  width: 368px;
  border: 1px solid #ffffff;
  // background-color: rgba(255, 255, 255, 0.5);
  background-color: #ffffff;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  position: relative; // 添加相对定位
  // transition: transform 0.3s;
  
  // &:hover {
    // transform: translateY(-5px);
    // box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  // }
  .line2{
    //hover 显示下划线
    text-decoration: none;
    &:hover{
      text-decoration: underline;
    }
  }
  .coverImg{
    width: 100%;
    height: 204px;
  }
  .course-card-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 16px;
    background: white; // 确保背景色
    transform: translateY(60px); // 初始完全在下方隐藏
    transition: transform 0.3s ease;
  }
  
  &:hover {
    .course-card-bottom {
      transform: translateY(0); // 悬浮时上移显示
    }
  }
  .course-card-bottom-height{
    height: 174px;
  }
}
</style>