Przeglądaj źródła

```
feat(app): 添加首页样式和API配置

- 在App.vue中添加首页样式类,实现首页特殊背景效果
- 为header添加box_shadow_card样式类
- 更新背景图片资源

feat(styles): 调整全局样式和新增行高类

- 更新body背景图片
- 调整container最大宽度从1520px到1528px
- 新增line_height24和line_height26样式类
- 重新定义box_shadow_card样式

feat(components): 优化课程卡片组件样式

- 调整课程标题行高从22到26,改善文本显示效果

feat(pages): 为工作流添加页面增加卡片阴影效果

- 为文件上传、基本信息、价格设置区域添加box_shadow_card样式类

docs(env): 添加API基础URL配置注释

- 在.env.development文件中添加开发者注释
- 配置乔功和高运甲的API基础URL地址
```

zhangningning 1 miesiąc temu
rodzic
commit
9c2f319786

+ 4 - 1
.env.development

@@ -1 +1,4 @@
-VITE_API_BASE_URL=http://192.168.100.134:8080/api
+# 乔功
+VITE_API_BASE_URL=http://192.168.100.134:8080/api
+# 高运甲
+VITE_API_BASE_URL=http://192.168.100.89:8080/api

+ 14 - 4
src/App.vue

@@ -1,8 +1,8 @@
 <template>
-  <div id="app">
+  <div id="app" :class="{'isHomePage': $route.path === '/' || $route.path === '/index'}">
     <ElConfigProvider :locale="langStore.elLocale">
     <el-container style="min-height: 100vh;">
-      <el-header>
+      <el-header class="box_shadow_card">
         <div class="header-content">
           <div class="logo" @click="$router.push('/')">{{ $t('common.title') }}</div>
           <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" class="meauList">
@@ -116,12 +116,22 @@ const handleLogout = () => {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
+  &.isHomePage {
+    background: url('@/assets/imgs/bg.png') no-repeat center center fixed;
+    background-size: 100% 100%;
+  }
+}
+.isHomePage{
+  .el-header {
+    background: url('@/assets/imgs/bg-header.png') no-repeat;
+    background-size: 100% 100%;
+  }
 }
 
 .el-header {
-  // background-color: rgba(255, 255, 255, 0.5);
-  background: url('@/assets/imgs/bg-header.png') no-repeat;
+  background: url('@/assets/imgs/bg-header_2.png') no-repeat;
   background-size: 100% 100%;
+ 
   color: #333;
   line-height: 60px;
   // border-bottom: 1px solid #eee;

BIN
src/assets/imgs/bg-header_2.png


BIN
src/assets/imgs/bg_2.png


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

@@ -8,7 +8,7 @@
         <div class="font_size13">2023-10-15</div>
       </div>
       <div style="min-height: 82px;">
-        <div class="line2 font_size18 line_height22 bold mt10">
+        <div class="line2 font_size18 line_height26 bold mt10">
           【Linux】【操作】Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集Linux操作集
         </div>
         <div class="mt10 line1 gray font_size13">

+ 3 - 3
src/pages/WorkflowAdd.vue

@@ -2,7 +2,7 @@
   <div class="workflow-add container-height">
     <Breadcrumb />
     <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" label-position="top" class="page-add">
-      <div class="padding16 bg_color_fff border_radius_10">
+      <div class="padding16 bg_color_fff border_radius_10 box_shadow_card">
         <div class="gap10">
           <div class="line_vertical"></div>
           <div class="font_size20 bold">文件上传</div>
@@ -24,7 +24,7 @@
           />
         </div>
       </div>
-      <div class="padding16 bg_color_fff border_radius_10 mt10">
+      <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
         <div class="gap10">
           <div class="line_vertical"></div>
           <div class="font_size20 bold">基本信息</div>
@@ -60,7 +60,7 @@
           </el-form-item>
         </div>
       </div>
-      <div class="padding16 bg_color_fff border_radius_10 mt10">
+      <div class="padding16 bg_color_fff border_radius_10 mt10 box_shadow_card">
         <div class="gap10 mb20">
           <div class="line_vertical"></div>
           <div class="font_size20 bold">价格设置</div>

+ 17 - 9
src/styles/index.scss

@@ -48,7 +48,7 @@ body ,htm{
   margin: 0;
 }
 body{
-	background: url('@/assets/imgs/bg.png') no-repeat center center fixed;
+	background: url('@/assets/imgs/bg_2.png') no-repeat center center fixed;
 	background-size: 100% 100%;
 }
 
@@ -65,11 +65,12 @@ body{
 // 3. 公共样式类(全局可复用)
 // 容器宽度限制(统一页面最大宽度,居中显示)
 .container {
-  max-width: 1520px;
+  max-width: 1528px;
 	width: 80%;
 	min-width: 1200px;
   margin: 0 auto;
   // padding: 20px;
+	padding: 0 4px;
 }
 .gradient{
 	background: linear-gradient( 90deg, #0055FE 0%, #C832FA 100%);
@@ -570,6 +571,12 @@ wx-image{
 .font_size13{
 	font-size: 13px;
 }
+.line_height26{
+	line-height: 26px;
+}
+.line_height24{
+	line-height: 24px;
+}
 .line_height22{
 	line-height: 22px;
 }
@@ -614,12 +621,6 @@ wx-image{
 	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
 	z-index: 10;
 }
-.box_shadow{
-	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{
 	overflow: hidden;
   white-space: nowrap;
@@ -651,11 +652,18 @@ wx-image{
 	padding: 30px 0;
 	color: #c8c7cc;
 }
+.box_shadow{
+	box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+.box_shadow_card{
+	box-shadow: 0px 2px 10px rgba(45,113,255,0.1);
+}
 .list_item_animation{
 	transition: transform 0.3s;
 	&:hover {
 		transform: translateY(-5px);
-		box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+		// box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+		box-shadow: 0px 2px 10px rgba(45,113,255,0.1);
 	}
 }