Explorar o código

```
feat(app): 统一用户头像来源并优化UI动画与样式

- 将多处使用的默认头像地址提取至 appStore 的 getter 中统一管理
- 为课程卡片和需求列表项添加悬停动画效果( translateY 和阴影)
- 在多个页面中新增或应用 box_shadow_card 样式以增强视觉层次
- 增加 contactInfo 样式用于展示联系信息区块
- 提取 text-indent 样式类 indent_28 供后续复用
- 注释掉部分未启用的 hover 效果避免干扰当前交互逻辑
```

zhangningning hai 3 días
pai
achega
38ad172faf

+ 1 - 1
src/App.vue

@@ -14,7 +14,7 @@
             <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item>
             <el-menu-item index="5" @click="$router.push('/my-learning')">米币商城</el-menu-item>
           </el-menu>
           </el-menu>
           <div class="header-right">
           <div class="header-right">
-            <el-avatar :size="32" :src="appStore.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
+            <el-avatar :size="32" :src="appStore.avatar" />
             <el-dropdown v-if="appStore.token">
             <el-dropdown v-if="appStore.token">
               <span class="el-dropdown-link">
               <span class="el-dropdown-link">
                 {{ appStore.userInfo?.nickName || '用户' }}
                 {{ appStore.userInfo?.nickName || '用户' }}

BIN=BIN
src/assets/imgs/dianhua.png


BIN=BIN
src/assets/imgs/weixin.png


BIN=BIN
src/assets/imgs/youxiang.png


+ 6 - 6
src/components/course-card.vue

@@ -1,5 +1,5 @@
 <template>
 <template>
-  <div class="course-card">
+  <div class="course-card list_item_animation">
     <div class="flex-center-between">
     <div class="flex-center-between">
       <img :src="n8Icon" alt="" style="width: 50px; height: 50px;" class="mr10">
       <img :src="n8Icon" alt="" style="width: 50px; height: 50px;" class="mr10">
       <div class="line2 font_size18 line_height22 font_weight400">
       <div class="line2 font_size18 line_height22 font_weight400">
@@ -49,12 +49,12 @@ const props = defineProps({
   padding: 16px;
   padding: 16px;
   overflow: hidden;
   overflow: hidden;
   cursor: pointer;
   cursor: pointer;
-  transition: transform 0.3s;
+  // transition: transform 0.3s;
   
   
-  &:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
-  }
+  // &:hover {
+    // transform: translateY(-5px);
+    // box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  // }
   .line2{
   .line2{
     //hover 显示下划线
     //hover 显示下划线
     text-decoration: none;
     text-decoration: none;

+ 1 - 1
src/pages/SearchPlatform.vue

@@ -2,7 +2,7 @@
   <div class="search-platform container-height">
   <div class="search-platform container-height">
     <div v-if="!isChildRoute">
     <div v-if="!isChildRoute">
       <Breadcrumb />
       <Breadcrumb />
-      <div class="padding12 bg_color_fff border_radius_16">
+      <div class="padding12 bg_color_fff border_radius_16 box_shadow_card">
         <!-- 搜索与创建区域 -->
         <!-- 搜索与创建区域 -->
         <div class="search-create-bar">
         <div class="search-create-bar">
           <div class="search-input-container flex_1">
           <div class="search-input-container flex_1">

+ 5 - 5
src/pages/workflowTrade/workflowTrade.vue

@@ -2,7 +2,7 @@
   <div class="search-platform container-height">
   <div class="search-platform container-height">
     <div v-if="!isChildRoute">
     <div v-if="!isChildRoute">
       <Breadcrumb />
       <Breadcrumb />
-      <div class="padding12 bg_color_fff border_radius_16 mt10">
+      <div class="padding12 bg_color_fff border_radius_16 mt10 box_shadow_card">
         <!-- 搜索与创建区域 -->
         <!-- 搜索与创建区域 -->
         <div class="search-create-bar"> 
         <div class="search-create-bar"> 
           <div class="search-input-container flex_1">
           <div class="search-input-container flex_1">
@@ -43,9 +43,9 @@
       <!-- 列表 -->
       <!-- 列表 -->
       <div class="course-list mt20">
       <div class="course-list mt20">
         <div class="font_size20 bold mb10">共 <span class="color_theme">5</span> 条需求</div>
         <div class="font_size20 bold mb10">共 <span class="color_theme">5</span> 条需求</div>
-        <div class="padding16 bg_color_fff border_radius_16 mb20" 
-       
-        v-for="item in 4" :key="item">
+        <div class="padding16 bg_color_fff border_radius_16 mb20 box_shadow_card list_item_animation" 
+          v-for="item in 4" :key="item"
+        >
           <div  @click="goworkflowTradeDetail(item)" class="cursor-pointer">
           <div  @click="goworkflowTradeDetail(item)" class="cursor-pointer">
             <div class="flex-between">
             <div class="flex-between">
               <div class="gap10">
               <div class="gap10">
@@ -83,7 +83,7 @@
           <div class="mt20">
           <div class="mt20">
             <div class="flex-between">
             <div class="flex-between">
               <div class="gap10">
               <div class="gap10">
-                <el-avatar :size="32" :src="appStore.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
+                <el-avatar :size="32" :src="appStore.avatar" />
                 <div class="font_size16 bold">张三</div>
                 <div class="font_size16 bold">张三</div>
                 <div class="font_size14 gray mt2">2024-10-16</div>
                 <div class="font_size14 gray mt2">2024-10-16</div>
               </div>
               </div>

+ 67 - 17
src/pages/workflowTrade/workflowTradeDetail.vue

@@ -2,31 +2,73 @@
   <div class="workflowTradeDetail container-height">
   <div class="workflowTradeDetail container-height">
     <Breadcrumb />
     <Breadcrumb />
     <div class="flex-between mt10">
     <div class="flex-between mt10">
-      <div class="padding16 bg_color_fff border_radius_16 mb20  flex_1 mr20">
-        <div class="cursor-pointer">
-          <div class="flex-between">
-            <div class="gap10">
-              <el-button type="primary">报名中</el-button>
-              <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
+      <div class="flex_1 mr20">
+        <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
+          <div class="cursor-pointer">
+            <div class="flex-between">
+              <div class="gap10">
+                <el-button type="primary">报名中</el-button>
+                <div class="bold font_size30">AI智能线索富集与多渠道通知系统</div>
+              </div>
+            </div>
+            <div class="font_size24 color_price bold mt10">¥2000.00-3000.00</div>
+            <div class="gap20 mt10">
+              <div class="gap5">
+                <img :src="biaoqianIcon" alt="员工" style="width: 16px; height: 16px;">
+                <span class="font_size14">二级分类名称-三级分类名称</span>
+              </div>
+              <div class="gap5">
+                <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
+                <span class="font_size14">报名截止时间:2024-10-16</span>
+              </div>
             </div>
             </div>
           </div>
           </div>
-          <div class="font_size24 color_price bold mt10">¥2000.00-3000.00</div>
-          <div class="gap20 mt10">
-            <div class="gap5">
-              <img :src="biaoqianIcon" alt="员工" style="width: 16px; height: 16px;">
-              <span class="font_size14">二级分类名称-三级分类名称</span>
+        </div>
+        <div class="padding16 bg_color_fff border_radius_16 mt20 box_shadow_card">
+          <div class="gap10">
+            <div class="line_vertical"></div>
+            <div class="font_size20 bold">需求背景</div>
+          </div>
+          <div class="gray font_size14 mt10">
+            我们是一家内容营销公司,每天需要为多个客户生成大量高质量的营销文章。目前我们依赖人工撰写,效率较低且成本较高。希望通过引入AI技术,建立一个自动化文章生成工作流,提高内容生产效率,同时保持文章质量。这个工作流需要能够根据给定的关键词或主题,自动生成符合品牌调性的营销文章,并支持多种输出格式,便于我们直接发布到不同平台。
+          </div>
+          <div class="gap10 mt10">
+            <div class="line_vertical"></div>
+            <div class="font_size20 bold">具体要求</div>
+          </div>
+          <div class="gray font_size14 mt10">
+            我们是一家内容营销公司,每天需要为多个客户生成大量高质量的营销文章。目前我们依赖人工撰写,效率较低且成本较高。希望通过引入AI技术,建立一个自动化文章生成工作流,提高内容生产效率,同时保持文章质量。这个工作流需要能够根据给定的关键词或主题,自动生成符合品牌调性的营销文章,并支持多种输出格式,便于我们直接发布到不同平台。
+          </div>
+          <div class="gap10 mt10">
+            <div class="line_vertical"></div>
+            <div class="font_size20 bold">联系方式</div>
+          </div>
+          <div class="contactInfo mt10 padding16 flex-center-between">
+            <div class="flex_1 flex-center">
+              <div class="gap10">
+                <img :src="dianhuaIcon" alt="员工" style="width: 24px; height: 24px;">
+                <div class="font_size16">电话:13925214105</div>
+              </div>
             </div>
             </div>
-            <div class="gap5">
-              <img :src="riliIcon" alt="员工" style="width: 16px; height: 16px;">
-              <span class="font_size14">报名截止时间:2024-10-16</span>
+            <div class="flex_1 flex-center">
+              <div class="gap10">
+                <img :src="weixinIcon" alt="员工" style="width: 24px; height: 24px;">
+                <div class="font_size16">微信:13925214105</div>
+              </div>
+            </div>
+            <div class="flex_1 flex-center">
+              <div class="gap10">
+                <img :src="youxiangIcon" alt="员工" style="width: 24px; height: 24px;">
+                <div class="font_size16">邮箱:13925214105@qq.com</div>
+              </div>
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
       </div>
       </div>
       <div class="workflowTradeDetail_right">
       <div class="workflowTradeDetail_right">
-        <div class="padding16 bg_color_fff border_radius_16">
+        <div class="padding16 bg_color_fff border_radius_16 box_shadow_card">
           <div class="flex-column-center">
           <div class="flex-column-center">
-            <el-avatar :size="80" :src="appStore.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'" />
+            <el-avatar :size="80" :src="appStore.avatar" />
             <div class="font_size16 bold mt10">张三</div>
             <div class="font_size16 bold mt10">张三</div>
           </div>
           </div>
           <div class="totalInfo mt20 flex-center-between">
           <div class="totalInfo mt20 flex-center-between">
@@ -40,7 +82,7 @@
             </div>
             </div>
           </div>
           </div>
         </div>
         </div>
-        <div class="padding16 bg_color_fff border_radius_16 mt20">
+        <div class="padding16 bg_color_fff border_radius_16 mt20 box_shadow_card">
           <div class="gap10">
           <div class="gap10">
             <div class="line_vertical"></div>
             <div class="line_vertical"></div>
             <div class="font_size20 bold">已报名人数</div>
             <div class="font_size20 bold">已报名人数</div>
@@ -74,6 +116,10 @@
   import biaoqianIcon from '@/assets/imgs/biaoqian.png'
   import biaoqianIcon from '@/assets/imgs/biaoqian.png'
   import yuangong from '@/assets/imgs/yuangong.png'
   import yuangong from '@/assets/imgs/yuangong.png'
   import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
   import zaixianbaomingIcon from '@/assets/imgs/zaixianbaoming.png'
+  import dianhuaIcon from '@/assets/imgs/dianhua.png'
+  import weixinIcon from '@/assets/imgs/weixin.png'
+  import youxiangIcon from '@/assets/imgs/youxiang.png'
+
 
 
   import { useRouter, useRoute } from 'vue-router'
   import { useRouter, useRoute } from 'vue-router'
   const router = useRouter()
   const router = useRouter()
@@ -107,6 +153,10 @@
         }
         }
       }
       }
     }
     }
+    .contactInfo{
+      background: #F5F7FA;
+      border-radius: 8px 8px 8px 8px;
+    }
   }
   }
 
 
 </style>
 </style>

+ 5 - 0
src/pinia/appStore.js

@@ -9,6 +9,11 @@ export const useAppStore = defineStore('app', {
     userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null,
     userInfo: localStorage.getItem('userInfo') ? JSON.parse(localStorage.getItem('userInfo')) : null,
     token: localStorage.getItem('token') || null,
     token: localStorage.getItem('token') || null,
   }),
   }),
+  getters: {
+    avatar() {
+      return this.userInfo?.avatar || 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
+    },
+  },
   actions: {
   actions: {
    UPDATE_TOKEN(token = '') {
    UPDATE_TOKEN(token = '') {
       if (!token) {
       if (!token) {

+ 14 - 0
src/styles/index.scss

@@ -330,6 +330,10 @@ wx-image{
 .gap10{
 .gap10{
   gap: 10px;
   gap: 10px;
 }
 }
+//首行缩进2em
+.indent_28{
+  text-indent: 28px;
+}
 /*flex样式*/
 /*flex样式*/
 .flex_1{
 .flex_1{
   flex:1;
   flex:1;
@@ -589,6 +593,9 @@ wx-image{
 .box_shadow{
 .box_shadow{
 	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
 	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 }
+.box_shadow_card{
+	box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
 .ellipsis{
 .ellipsis{
 	overflow: hidden;
 	overflow: hidden;
   white-space: nowrap;
   white-space: nowrap;
@@ -619,4 +626,11 @@ wx-image{
 	text-align: center;
 	text-align: center;
 	padding: 30px 0;
 	padding: 30px 0;
 	color: #c8c7cc;
 	color: #c8c7cc;
+}
+.list_item_animation{
+	transition: transform 0.3s;
+	&:hover {
+		transform: translateY(-5px);
+		box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+	}
 }
 }