pl2z38qho
/
moxun
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

背景

Browse Source
main
LiRen-qiu 5 months ago
parent 21d27c9006
commit f62eb3b8da
3 changed files with 134 additions and 38 deletions
Show Stats Download Patch File Download Diff File

BIN
src/vue_project/public/img/background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/vue_project/src/assets/background.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 MiB

172
src/vue_project/src/components/MainPage.vue
Unescape View File

@ -362,7 +362,10 @@
<div class="steps-flow-container"> <div class="steps-flow-container">
<!-- 步骤1 --> <!-- 步骤1 -->
<div class="step-item-container"> <div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }">1</div> <div class="step-circle" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }">
<div class="ripple-effect" v-if="activeStep === 0"></div>
1
</div>
<div class="step-button-box" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }" @click="handleFileUploadClick"> <div class="step-button-box" :class="{ 'active': activeStep === 0, 'completed': stepResults[0] }" @click="handleFileUploadClick">
<i class="el-icon-upload2"></i> <i class="el-icon-upload2"></i>
<div class="step-text">上传文件</div> <div class="step-text">上传文件</div>
@ -370,44 +373,56 @@
</div> </div>
<!-- 连接线 --> <!-- 连接线 -->
<div class="step-connector"></div> <div class="step-connector" :class="{ 'active-connector': stepResults[0] }"></div>
<!-- 步骤2 --> <!-- 步骤2 -->
<div class="step-item-container"> <div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 1, 'completed': stepResults[1] }">2</div> <div class="step-circle" :class="{ 'active': activeStep === 1, 'completed': stepResults[1] }">
<div class="ripple-effect" v-if="activeStep === 1"></div>
2
</div>
<div class="step-button-box" :class="{ 'active': activeStep === 1, 'completed': stepResults[1], 'disabled': !stepResults[0] }" @click="goToStep(1)"> <div class="step-button-box" :class="{ 'active': activeStep === 1, 'completed': stepResults[1], 'disabled': !stepResults[0] }" @click="goToStep(1)">
<div class="step-text">预处理</div> <div class="step-text">预处理</div>
</div> </div>
</div> </div>
<!-- 连接线 --> <!-- 连接线 -->
<div class="step-connector"></div> <div class="step-connector" :class="{ 'active-connector': stepResults[1] }"></div>
<!-- 步骤3 --> <!-- 步骤3 -->
<div class="step-item-container"> <div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 2, 'completed': stepResults[2] }">3</div> <div class="step-circle" :class="{ 'active': activeStep === 2, 'completed': stepResults[2] }">
<div class="ripple-effect" v-if="activeStep === 2"></div>
3
</div>
<div class="step-button-box" :class="{ 'active': activeStep === 2, 'completed': stepResults[2], 'disabled': !stepResults[1] }" @click="goToStep(2)"> <div class="step-button-box" :class="{ 'active': activeStep === 2, 'completed': stepResults[2], 'disabled': !stepResults[1] }" @click="goToStep(2)">
<div class="step-text">合并格式</div> <div class="step-text">合并格式</div>
</div> </div>
</div> </div>
<!-- 连接线 --> <!-- 连接线 -->
<div class="step-connector"></div> <div class="step-connector" :class="{ 'active-connector': stepResults[2] }"></div>
<!-- 步骤4 --> <!-- 步骤4 -->
<div class="step-item-container"> <div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 3, 'completed': stepResults[3] }">4</div> <div class="step-circle" :class="{ 'active': activeStep === 3, 'completed': stepResults[3] }">
<div class="ripple-effect" v-if="activeStep === 3"></div>
4
</div>
<div class="step-button-box" :class="{ 'active': activeStep === 3, 'completed': stepResults[3], 'disabled': !stepResults[2] }" @click="goToStep(3)"> <div class="step-button-box" :class="{ 'active': activeStep === 3, 'completed': stepResults[3], 'disabled': !stepResults[2] }" @click="goToStep(3)">
<div class="step-text">单词纠错</div> <div class="step-text">单词纠错</div>
</div> </div>
</div> </div>
<!-- 连接线 --> <!-- 连接线 -->
<div class="step-connector"></div> <div class="step-connector" :class="{ 'active-connector': stepResults[3] }"></div>
<!-- 步骤5 --> <!-- 步骤5 -->
<div class="step-item-container"> <div class="step-item-container">
<div class="step-circle" :class="{ 'active': activeStep === 4, 'completed': stepResults[4] }">5</div> <div class="step-circle" :class="{ 'active': activeStep === 4, 'completed': stepResults[4] }">
<div class="ripple-effect" v-if="activeStep === 4"></div>
5
</div>
<div class="step-button-box" :class="{ 'active': activeStep === 4, 'completed': stepResults[4], 'disabled': !stepResults[3] }" @click="goToStep(4)"> <div class="step-button-box" :class="{ 'active': activeStep === 4, 'completed': stepResults[4], 'disabled': !stepResults[3] }" @click="goToStep(4)">
<div class="step-text">大模型分析</div> <div class="step-text">大模型分析</div>
</div> </div>
@ -619,16 +634,24 @@ export default {
min-height: 100vh; min-height: 100vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: linear-gradient(180deg, #e6f7ff 0%, #ffffff 100%); background-image: url('../assets/background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 40px 20px;
align-items: center;
} }
.header { .header {
text-align: center; text-align: center;
padding: 40px 0 20px; padding: 30px 40px;
background: linear-gradient(135deg, #1976d2 0%, #2196f3 100%); background: rgba(25, 118, 210, 0.85);
color: white; color: white;
margin-bottom: 30px; margin-bottom: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
border-radius: 12px;
width: 80%;
max-width: 1200px;
} }
.header h1 { .header h1 {
@ -644,16 +667,21 @@ export default {
.step-content { .step-content {
flex: 1; flex: 1;
max-width: 1200px; width: 90%;
max-width: 1400px;
margin: 0 auto; margin: 0 auto;
padding: 0 20px; background-color: rgba(255, 255, 255, 0.9);
border-radius: 12px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
padding: 30px;
margin-bottom: 30px;
} }
.process-step { .process-step {
background-color: white; background-color: white;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
padding: 20px; padding: 25px;
margin-bottom: 30px; margin-bottom: 30px;
} }
@ -724,21 +752,23 @@ export default {
/* 底部步骤指示器样式 */ /* 底部步骤指示器样式 */
.bottom-steps-container { .bottom-steps-container {
width: 100%; width: 80%;
margin-top: 30px; max-width: 1200px;
margin-top: 0;
margin-bottom: 40px;
} }
.steps-background { .steps-background {
background-color: #f0f9ff; background-color: rgba(240, 249, 255, 0.85);
padding: 60px 0 30px; padding: 30px;
background-image: linear-gradient(to bottom, #87cefa 0%, #1e90ff 100%); border-radius: 12px;
border-top: 1px solid #d1e9ff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} }
.steps-wrapper { .steps-wrapper {
max-width: 1200px; width: 100%;
margin: 0 auto; margin: 0 auto;
padding: 20px; padding: 0;
} }
/* 新的流程步骤样式 */ /* 新的流程步骤样式 */
@ -757,10 +787,10 @@ export default {
} }
.step-circle { .step-circle {
width: 60px; width: 70px;
height: 60px; height: 70px;
border-radius: 50%; border-radius: 50%;
background-color: #bdbdbd; /* 默认灰色 */ background-color: #CCCCCC; /* 默认灰色 */
color: white; color: white;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -768,32 +798,94 @@ export default {
font-size: 28px; font-size: 28px;
font-weight: bold; font-weight: bold;
position: relative; position: relative;
border: 2px solid white;
transition: all 0.3s; transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 15px; margin-bottom: 15px;
z-index: 2; z-index: 2;
border: none;
}
.step-circle.active {
background-color: #87d068; /* 活动为亮绿色 */
box-shadow: 0 4px 8px rgba(103, 194, 58, 0.3);
} }
.step-circle.active, .step-circle.completed { .step-circle.completed {
background-color: #67c23a; /* 活动或已完成为绿色 */ background-color: #67c23a; /* 已完成为深绿色 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} }
.step-connector { .step-connector {
height: 2px; height: 4px;
background-color: rgba(255, 255, 255, 0.7); background-color: #E0E0E0;
flex-grow: 1; flex-grow: 1;
max-width: 60px; width: 60px;
margin: 0 5px; margin: 0 5px;
position: relative; position: relative;
top: -40px; /* 调整连接线的位置，使其与圆圈中心对齐 */ top: -40px; /* 调整连接线的位置，使其与圆圈中心对齐 */
z-index: 1; z-index: 1;
} }
/* 新的方框按钮样式 */ .step-connector.active-connector {
background-color: #67c23a;
}
/* 波纹效果 */
.ripple-effect {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: 50%;
background-color: rgba(103, 194, 58, 0.6);
box-shadow: 0 0 15px rgba(103, 194, 58, 0.8);
animation: ripple 1.5s infinite ease-out;
z-index: 0;
}
.ripple-effect::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
border-radius: 50%;
border: 3px solid rgba(103, 194, 58, 0.7);
animation: ripple-delay 1.5s infinite ease-out;
}
@keyframes ripple {
0% {
width: 85%;
height: 85%;
opacity: 1;
}
100% {
width: 170%;
height: 170%;
opacity: 0;
}
}
@keyframes ripple-delay {
0% {
width: 80%;
height: 80%;
opacity: 0.9;
}
100% {
width: 180%;
height: 180%;
opacity: 0;
}
}
/* 修改按钮方框样式 */
.step-button-box { .step-button-box {
background-color: #bdbdbd; /* 默认灰色 */ background-color: #CCCCCC; /* 默认灰色 */
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 15px 10px; padding: 15px 10px;
@ -814,8 +906,12 @@ export default {
transform: translateY(-2px); transform: translateY(-2px);
} }
.step-button-box.active, .step-button-box.completed { .step-button-box.active {
background-color: #67c23a; /* 活动或已完成为绿色 */ background-color: #87d068; /* 活动为亮绿色 */
}
.step-button-box.completed {
background-color: #67c23a; /* 已完成为深绿色 */
} }
.step-button-box.disabled { .step-button-box.disabled {

Write Preview
Loading…
Cancel
Save