|
|
@@ -1,21 +1,77 @@
|
|
|
<template>
|
|
|
<div class="search-platform container-height">
|
|
|
<div v-if="!isChildRoute">
|
|
|
- {{currentPath}}
|
|
|
<Breadcrumb />
|
|
|
- <h1 @click="goWorkflowDetail">{{activePlatform}}</h1>
|
|
|
- <h1 @click="goWorkflowAdd">创建工作流</h1>
|
|
|
+ <div class="padding16 bg_color_fff border_radius_16">
|
|
|
+ <!-- 搜索与创建区域 -->
|
|
|
+ <div class="search-create-bar">
|
|
|
+ <div class="search-input-container flex_1">
|
|
|
+ <input
|
|
|
+ type="text"
|
|
|
+ :placeholder="$t('common.qingshuruyaosousuodegongzuoliu')"
|
|
|
+ class="search-input"
|
|
|
+ />
|
|
|
+ <button class="search-btn bg_color_primary" @click.stop.prevent="goSearchPlatform">
|
|
|
+ <img :src="searchIcon" alt="" class="icon-search">
|
|
|
+ {{$t('common.shousuo')}}
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ <button class="create-btn bg_color_primary" @click.stop.prevent="goWorkflowAdd">
|
|
|
+ <img :src="addIcon" alt="" class="icon-add">
|
|
|
+ {{$t('common.chuangjiangongzuoliu')}}
|
|
|
+ </button>
|
|
|
+ <div class="flex-center-between border_radius_10 pad20" style="background: #EAF0FF;height: 56px;">
|
|
|
+ <img :src="n8Icon" alt="" style="width: 30px; height: 30px;" class="mr10">
|
|
|
+ <div class="font_size18 color_theme">前往{{activePlatform}}</div>
|
|
|
+ <el-icon :size="24" color="#2D71FF"><CaretRight /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="typeList flex-between typeborder">
|
|
|
+ <div class="gray font_size14 typeName">类型：</div>
|
|
|
+ <div class="flex_1 gap10">
|
|
|
+ <div class="font_size14 typeItem active" v-for="item in 5" :key="item">全部</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="typeList flex-between">
|
|
|
+ <div class="gray font_size14 typeName">二级分类：</div>
|
|
|
+ <div class="flex_1 gap10">
|
|
|
+ <div class="font_size14 typeItem active" v-for="item in 5" :key="item">全部</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 课程列表 -->
|
|
|
+ <div class="course-list mt20">
|
|
|
+ <div class="course-grid">
|
|
|
+ <CourseCard v-for="item in 4" :key="item" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <!-- 替换原有的分页代码 -->
|
|
|
+ <Pagination
|
|
|
+ :total="pagination.total"
|
|
|
+ :page-size="pagination.pageSize"
|
|
|
+ :current-page="pagination.currentPage"
|
|
|
+ @page-change="handlePageChange"
|
|
|
+ />
|
|
|
</div>
|
|
|
<router-view />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+ import searchIcon from '@/assets/imgs/search.png'
|
|
|
+ import addIcon from '@/assets/imgs/add.png'
|
|
|
+ import n8Icon from '@/assets/imgs/8n8.png'
|
|
|
+
|
|
|
+ import CourseCard from '@/components/course-card.vue'
|
|
|
+ import Pagination from '@/components/Pagination.vue'
|
|
|
+
|
|
|
+
|
|
|
import { useRouter, useRoute } from 'vue-router'
|
|
|
const router = useRouter()
|
|
|
const route = useRoute()
|
|
|
console.log(router,route)
|
|
|
- import { ref, computed } from 'vue'
|
|
|
+ import { ref, computed, reactive } from 'vue'
|
|
|
//获取参数
|
|
|
const query = router.currentRoute.value.query
|
|
|
const activePlatform = ref(query.activePlatform || '')
|
|
|
@@ -24,6 +80,19 @@
|
|
|
const isChildRoute = computed(() => {
|
|
|
return route.matched.length > 1
|
|
|
})
|
|
|
+ // 添加分页相关数据
|
|
|
+ const pagination = reactive({
|
|
|
+ currentPage: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ total: 100
|
|
|
+ })
|
|
|
+ const handlePageChange = (page) => {
|
|
|
+ pagination.currentPage = page
|
|
|
+ // 这里可以添加获取数据的逻辑
|
|
|
+ console.log('当前页:', page)
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
const goWorkflowDetail = () => {
|
|
|
//增加参数名称
|
|
|
router.push({
|
|
|
@@ -45,7 +114,86 @@
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-.search-platform {
|
|
|
+ // 2. 混合器：按钮通用样式
|
|
|
+@mixin btn-style() {
|
|
|
+ padding: 0 16px;
|
|
|
+ color: #ffffff;
|
|
|
+ border: none;
|
|
|
+ border-radius: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap:8px;
|
|
|
+ font-size: 18px;
|
|
|
|
|
|
+ &:hover {
|
|
|
+ opacity: 0.9;
|
|
|
+ }
|
|
|
+}
|
|
|
+.search-platform {
|
|
|
+
|
|
|
+ // 搜索创建栏嵌套
|
|
|
+ .search-create-bar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 8px;
|
|
|
+ background-color: rgba(255, 255, 255, 0.5);
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ .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();
|
|
|
+ }
|
|
|
+
|
|
|
+ .create-btn {
|
|
|
+ height: 56px;
|
|
|
+ @include btn-style();
|
|
|
+ }
|
|
|
+ .search-input-container{
|
|
|
+ position: relative;
|
|
|
+ border-radius: 8px;
|
|
|
+ border:2px solid $primary-color;
|
|
|
+ .search-btn{
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ right: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .typeList{
|
|
|
+ padding: 20px 0;
|
|
|
+ &.typeborder{
|
|
|
+ border-bottom: 1px dashed #DCDFE6;
|
|
|
+ }
|
|
|
+ .typeName{
|
|
|
+ margin-top: 6px;
|
|
|
+ width: 80px;
|
|
|
+ }
|
|
|
+ .typeItem{
|
|
|
+ margin: 0 8px;
|
|
|
+ &.active{
|
|
|
+ background: rgba(45,113,255,0.1);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ color: $primary-color;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
zhangningning