ali_ai_learn_web/src/pages/Home.vue

<template>
  <div class="home-page">
    <div class="banner flex-center">
      <el-carousel :height="carouselHeight" style="width: 100%;">
        <el-carousel-item>
          <img
            :src="bannerImage"
            class="carousel-image"
            @load="onImageLoad"
          />
        </el-carousel-item>
        <el-carousel-item>
          <img
            :src="bannerImage"
            class="carousel-image"
            @load="onImageLoad"
          />
        </el-carousel-item>
        
      </el-carousel>
    </div>
    <!-- 中间搜索区域 -->
    <div class="workflow-container">
      <!-- 平台标识区域 -->
      <div class="platforms">
        <div class="platform-item" @click="activePlatform = 'n8n'" :class="{'active': activePlatform === 'n8n'}">
          <img :src="n8Icon" alt="" class="platform-icon n8n-icon">
          <span class="platform-name">n8n</span>
        </div>
        <div class="platform-item" @click="activePlatform = 'coze'" :class="{'active': activePlatform === 'coze'}">
          <img :src="cozeIcon" alt="" class="platform-icon n8n-icon">
          <span class="platform-name">Coze</span>
        </div>
        <div class="platform-item" @click="activePlatform = 'dify'" :class="{'active': activePlatform === 'dify'}">
          <img :src="difyIcon" alt="" class="platform-icon n8n-icon">
          <span class="platform-name">Dify</span>
        </div>
        <div class="platform-item" @click="activePlatform = 'fastgpt'" :class="{'active': activePlatform === 'fastgpt'}">
          <img :src="fastgptIcon" alt="" class="platform-icon n8n-icon">
          <span class="platform-name">FastGPT</span>
        </div>
      </div>

      <!-- 搜索与创建区域 -->
      <div class="search-create-bar" :class="{'notFirst': activePlatform !== 'n8n'}">
        <div class="search-input-container flex_1 gradient">
          <input
            type="text"
            :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
            class="search-input"
          />
          <button class="search-btn gradient" @click.stop.prevent="goSearchPlatform">
            <img :src="searchIcon" alt="" class="icon-search">
            {{$t('common.shousuo')}}
          </button>
        </div>
        <button class="create-btn gradient" @click.stop.prevent="goWorkflowAdd">
          <img :src="addIcon" alt="" class="icon-add">
          {{$t('common.chuangjiangongzuoliu')}}
        </button>
      </div>
    </div>
    <!-- 工作流列表 -->
    <div class="course-list">
      <div class="course-grid">
        <div class="course-card" v-for="item in 4" :key="item">
          <div class="flex-center-between">
            <img :src="n8Icon" alt="" style="width: 50px; height: 50px;" class="mr10">
            <div class="line2 font_size14 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" size="large">
              <el-icon class="mr10"><VideoPlay /></el-icon>
              开始使用
            </el-button>
          </div>
        </div>
        
      </div>
    </div>
    
  </div>
</template>

<script setup>
import bannerImage from '@/assets/imgs/banner.png'
import searchIcon from '@/assets/imgs/search.png'
import addIcon from '@/assets/imgs/add.png'
import n8Icon from '@/assets/imgs/8n8.png'
import cozeIcon from '@/assets/imgs/coze.png'
import difyIcon from '@/assets/imgs/dify.png'
import fastgptIcon from '@/assets/imgs/FastGPT.png'
import yunIcon from '@/assets/imgs/yun.png'
import riliIcon from '@/assets/imgs/rili.png'
import detailIcon from '@/assets/imgs/detail.png'


import { onMounted,ref } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n' 
const { t } = useI18n() // 获取t函数// 导入useI18n


onMounted(() => {
  console.log('Home mounted')
})

const router = useRouter()
const activePlatform = ref('n8n')


// 监听图片加载完成，动态设置轮播图高度
const carouselHeight = ref('auto')
const onImageLoad = (event) => {
  const img = event.target
  const aspectRatio = img.naturalWidth / img.naturalHeight
  const containerWidth = img.offsetWidth
  const calculatedHeight = containerWidth / aspectRatio
  carouselHeight.value = calculatedHeight + 'px'
}




const goSearchPlatform = () => {
  //增加参数名称
  router.push({
    path: `/search-platform`,
    query: {
      activePlatform: activePlatform.value,
      metaTitle: activePlatform.value 
    }
  })
};

const goWorkflowAdd = () => {
  //增加参数名称
  router.push({
    path: `workflow-add`,
    query: {
    }
  })
};

</script>

<style lang="scss">

.banner {
  // margin-top: 140px;
  height: calc(100vh - 60px);
  min-height: 600px;
  .carousel-image {
    width: 100%;
    height: auto;
    // object-fit: cover; // 保持比例填充整个容器
    // object-position: center; // 居中显示
  }
}
.icon-search{
  width: 24px;
  height: 24px;
}
.icon-add{
  width: 30px;
  height: 30px;
}
// 1. 定义全局变量，方便统一修改
$primary-bg: rgba(255, 255, 255, 0.5);
$white: #fff;
$border-radius-base: 8px;
$border-radius-sm: 8px;
$border-radius-xs: 4px;
$text-color-main: #333;
$font-size-base: 14px;
$font-size-sm: 12px;
$gap-base: 8px;
$gap-lg: 16px;
$gap-xl: 24px;
$padding-base: 20px;
$height-btn: 50px;

// 2. 混合器：按钮通用样式
@mixin btn-style($bg-start, $bg-end) {
  padding: 0 16px;
  color: $white;
  border: none;
  border-radius: $border-radius-sm;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: $gap-base;
  font-size: 18px;
  
  &:hover {
    opacity: 0.9;
  }
}

// 3. 混合器：平台图标通用样式
@mixin platform-icon-style($bg-color, $color: $white) {
  width: 24px;
  height: 24px;
  border-radius: $border-radius-xs;
  color: $color;
  display: flex;
  align-items: center;
  justify-content: center;
}

// 容器样式（SCSS嵌套）
.workflow-container {
  padding: $padding-base;
  border-radius: $border-radius-base;
  width: 1100px;
  margin: $padding-base auto;

  // 平台区域嵌套
  .platforms {
    display: flex;
    position: relative;
    top: px;

    .platform-item {
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      padding: 8px 0;
      border-radius: $border-radius-sm  $border-radius-sm 0 0;
      //手指
      cursor: pointer;
      &.active{
        background-color: $primary-bg;
      
      }

      .platform-icon {
        &.n8n-icon {
          @include platform-icon-style(#2563eb);
          font-size: $font-size-base;
        }

        &.coze-icon {
          @include platform-icon-style(#8b5cf6);
          font-size: $font-size-base;
        }

        &.dify-icon {
          @include platform-icon-style($white, $text-color-main);
          border: 1px solid #eee;
          font-size: $font-size-sm;
        }

        &.fastgpt-icon {
          @include platform-icon-style(#1e293b);
          font-size: $font-size-sm;
        }
      }

      .platform-name {
        font-size: $font-size-base;
        color: $text-color-main;
      }
    }
  }

  // 搜索创建栏嵌套
  .search-create-bar {
    display: flex;
    align-items: center;
    gap: $gap-base;
    background-color: $primary-bg;
    padding: 16px;
    border-radius: 0 $border-radius-base $border-radius-base $border-radius-base;
   
    &.notFirst{
      border-radius: $border-radius-base;
    }

    .search-input {
      flex: 1;
      height: 60px;
      padding: 0 12px;
      outline: none;
      font-size: 18px;
      border-radius:7px;
      border: none;
      width: 100%;
      //占位符的颜色
      ::placeholder {
        color: #999;
      }
    }

    .search-btn {
      height: 50px;
      @include btn-style(#0055FE, #2563eb);
    }

    .create-btn {
      height: 56px;
      @include btn-style(#a78bfa, #8b5cf6);
    }
    .search-input-container{
      position: relative;
      padding: 2px;
      border-radius: 8px;
      .search-btn{
        position: absolute;
        top: 6px;
        right: 16px;
      }
    }
  }
}
.home-page{
  .course-list{
    margin-top: 70px;
    .course-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
      gap: 20px;
    }
    .course-card {
      border: 1px solid #ffffff;
      background-color: rgba(255, 255, 255, 0.5);
      border-radius: 8px;
      padding: 16px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.3s;
      
      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
      }
    }
  }
}
</style>