Browse Source

```
feat(home): 添加全屏加载动画并优化轮播图配置

- 在首页添加全屏加载动画,在数据加载时显示loading状态
- 配置轮播图自动播放属性,设置间隔时间为3000毫秒
- 移除不必要的margin-left样式,优化布局间距
- 添加渐变文字样式用于探索无线和AI工作流标题展示
- 导入openFullScreenLoading工具函数用于加载状态管理
- 调整首页横幅区域布局结构,添加mr20类名优化间距

style(app): 注释掉header右侧边距样式

- 临时注释掉.header-right的margin-right: 30px样式
- 保留其他flex布局相关样式设置
```

zhangningning 1 tuần trước cách đây
mục cha
commit
beec7757f2
2 tập tin đã thay đổi với 31 bổ sung6 xóa
  1. 1 1
      src/App.vue
  2. 30 5
      src/pages/Home.vue

+ 1 - 1
src/App.vue

@@ -282,7 +282,7 @@ const scrollLoad = () => {
     }
     
     .header-right {
-      margin-right: 30px;
+      // margin-right: 30px;
       display: flex;
       align-items: center; /* 垂直居中 */
       gap: 10px;

+ 30 - 5
src/pages/Home.vue

@@ -2,15 +2,19 @@
   <div class="home-page">
     <div class="banner flex-center">
       <div class="flex-between" style="width:100%">
-        <div class="flex_1 flex-column-start-between" >
+        <div class="flex_1 flex-column-start-between mr20" >
           <img :src="allyinqing" alt="" style="height:40px">
           <img :src="aigongzuoliu" alt="" style="height:186px">
+          <!-- <div>
+            <div class="tansuowuxian">探索无线</div>
+            <div class="gradient-text-fallback" data-text="AI工作流">AI工作流</div>
+          </div> -->
           <div class="font_size24 line_height30">
             一站式发现、交易与运行自动化工作流。连接n8n、Coze、Dify 等主流平台,释放生产力潜能。
           </div>
           <img :src="userTotal" alt="" style="height:52px">
         </div>
-        <el-carousel height="522px" style="width: 777px;">
+        <el-carousel height="522px" style="width: 777px;" :autoplay="false" :interval="3000">
           <el-carousel-item v-for="(item,index) in 3" :key="index">
             <img
               :src="`https://baomiai.oss-cn-shanghai.aliyuncs.com/static/banner-0${index+1}.png?v=0.0.1`"
@@ -94,7 +98,7 @@ import difyIcon from '@/assets/imgs/dify.png'
 import fastgptIcon from '@/assets/imgs/FastGPT.png'
 import detailIcon from '@/assets/imgs/detail.png'
 import CourseCard from '@/components/course-card.vue'
-import { isLogin } from '@/utils/util.js'
+import { isLogin, openFullScreenLoading } from '@/utils/util.js'
 
 import { getCategoryListTree } from '@/api/category.js'
 import { getPublishList } from '@/api/publish.js'
@@ -191,9 +195,10 @@ const loadMore = async () => {
   if (hasLoadedAll.value) {
     return;
   }
- 
+  const loading = openFullScreenLoading();
   searchFom.pageNum += 1;
   const res = await getPublishList(searchFom)
+  loading.close();
   if(res.code === 200){
     list.value = [...list.value, ...res.rows || []];
     total.value = res.total || 0;
@@ -211,6 +216,27 @@ defineExpose({
 </script>
 
 <style lang="scss">
+.tansuowuxian,.gradient-text-fallback{
+  font-size: 80px;
+  font-weight: 600;
+}
+.gradient-text-fallback {
+  position: relative;
+  /* 基础文字颜色(降级方案) */
+  color: #333;
+}
+
+.gradient-text-fallback::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: linear-gradient(90deg, #0055FE, #C832FA);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  z-index: 1;
+}
 
 .banner {
   // margin-top: 140px;
@@ -219,7 +245,6 @@ defineExpose({
   .carousel-image {
     width: 100%;
     height: 522px;
-    margin-left: 20px;
     // object-fit: cover; // 保持比例填充整个容器
     // object-position: center; // 居中显示
   }