|
|
@@ -1,44 +1,49 @@
|
|
|
<template>
|
|
|
<!-- 左侧导航栏 -->
|
|
|
<div class="left_nav">
|
|
|
- <div class="nav_header">
|
|
|
- {{ store.state.evaluationManageStepData.evaluationManageDetailName }}
|
|
|
+ <div class="exam_title">
|
|
|
+ <div class="exam_page_title" :title="store.state.evaluationManageStepData.evaluationManageDetailName">
|
|
|
+ {{ store.state.evaluationManageStepData.evaluationManageDetailName }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <div class="back_btn">
|
|
|
- <el-button class="button_refresh" @click="$router.push('/main/reviewManagement')"><img :src="backIcon" alt="">返回</el-button>
|
|
|
+ <div class="exam_back">
|
|
|
+ <el-button class="back_button" @click="$router.push('/main/reviewManagement')">
|
|
|
+ <img :src="backIcon" alt="">返回
|
|
|
+ </el-button>
|
|
|
</div>
|
|
|
-
|
|
|
- <ul class="nav_list">
|
|
|
- <!-- 激活状态的步骤 -->
|
|
|
- <template v-for="stepItm in stepMsgs" :key="stepItm.stepName">
|
|
|
- <li v-if="stepItm.show"
|
|
|
- :class="['nav_item', {'active_item':store.state.evaluationManageStepData.currentActiveStepName == stepItm.stepName}]"
|
|
|
+
|
|
|
+ <div class="nav_list">
|
|
|
+ <!-- 步骤列表 -->
|
|
|
+ <template v-for="(stepItm, index) in stepMsgs" :key="stepItm.stepName">
|
|
|
+ <div
|
|
|
+ v-if="stepItm.show"
|
|
|
+ class="nav_item"
|
|
|
+ :class="{
|
|
|
+ 'active_item': store.state.evaluationManageStepData.currentActiveStepName == stepItm.stepName,
|
|
|
+ 'success': stepItm.isFinish
|
|
|
+ }"
|
|
|
@click="HandleChangeStep(stepItm)"
|
|
|
>
|
|
|
<div class="step_box">
|
|
|
-
|
|
|
<div class="step_header_title">
|
|
|
- <i v-if="stepItm.isFinish" class="hjx-dui iconfont"></i>
|
|
|
- <span v-else class="step_num">{{ stepItm.stepNum }}</span>
|
|
|
- <span class="step_title">{{stepItm.title}}</span>
|
|
|
+ <div class="num_box">
|
|
|
+ <el-icon v-if="stepItm.isFinish" class="el-icon-success"><SuccessFilled /></el-icon>
|
|
|
+ <span v-else class="step_num">{{ stepItm.stepNum || (index + 1) }}</span>
|
|
|
+ </div>
|
|
|
+ <span class="step_title" :title="stepItm.title">{{ stepItm.title }}</span>
|
|
|
</div>
|
|
|
|
|
|
- <div class="step_bottom" >
|
|
|
- <div class="step_guide_line">
|
|
|
- <div class="dashed_line"></div>
|
|
|
- </div>
|
|
|
- <div class="step_content">
|
|
|
- {{ stepItm.desc }}
|
|
|
+ <div class="step_content">
|
|
|
+ <div class="left_line "></div>
|
|
|
+ <div>
|
|
|
+ {{ stepItm.desc }}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
-
|
|
|
- </li>
|
|
|
-
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- </ul>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -205,137 +210,274 @@ onMounted(()=>{
|
|
|
</script>
|
|
|
|
|
|
|
|
|
-
|
|
|
<style lang="scss" scoped>
|
|
|
- /* 左侧导航样式 */
|
|
|
- .left_nav {
|
|
|
- width: 160px;
|
|
|
- font-size: 16px;
|
|
|
- background-color: white;
|
|
|
- height: 100vh;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: flex-start;
|
|
|
+/* 左侧导航样式 */
|
|
|
+.left_nav {
|
|
|
+ min-width: 160px;
|
|
|
+ width: 160px;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ > *{
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
|
|
|
- .nav_header {
|
|
|
- padding:8px 12px;
|
|
|
- background-color: #2E64FA;
|
|
|
- color:white;
|
|
|
- font-weight: 600;
|
|
|
+ .exam_title {
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #2e64fa;
|
|
|
+ padding: 5px 5px;
|
|
|
+
|
|
|
+ .exam_page_title {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 25px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 5;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ white-space: normal;
|
|
|
+ word-break: break-all;
|
|
|
+ word-wrap: break-word;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- .back_btn {
|
|
|
- padding: 12px;
|
|
|
- .button_refresh{
|
|
|
- width: 100%;
|
|
|
- img{
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
+ .exam_back {
|
|
|
+ width: 100%;
|
|
|
+ height: 56px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .back_button {
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ margin: auto;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #dcdfe6;
|
|
|
+ text-align: center;
|
|
|
+ cursor: pointer;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 5px;
|
|
|
}
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav_list {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ flex:1 1;
|
|
|
+ position: relative;
|
|
|
+ width: 100%;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ > *{
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
|
|
|
+ /* 菜单节点样式 (完全还原第一段 step_item) */
|
|
|
+ .nav_item {
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ z-index: 7;
|
|
|
|
|
|
+ .step_box{
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
+ }
|
|
|
|
|
|
- .nav_list {
|
|
|
- flex: 1 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- gap:10px;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
|
|
|
- overflow-y: auto;
|
|
|
- padding-bottom: 12px;
|
|
|
+
|
|
|
|
|
|
- .nav_item {
|
|
|
- position: relative;
|
|
|
- cursor: pointer;
|
|
|
+ /* 标题区域 */
|
|
|
+ .step_header_title {
|
|
|
display: flex;
|
|
|
- flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
justify-content: flex-start;
|
|
|
- .step_header_title{
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 34px;
|
|
|
+ font-weight: 600;
|
|
|
+ border-top-left-radius: 10px;
|
|
|
+
|
|
|
+ .step_title {
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 图标/序号容器 */
|
|
|
+ .num_box {
|
|
|
+ width: 30px;
|
|
|
+ height: 100%;
|
|
|
display: flex;
|
|
|
+ justify-content: center;
|
|
|
align-items: center;
|
|
|
- padding:3px 8px;
|
|
|
- border-radius: 10px 0 0 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ /* 完成状态打勾图标 (兼顾 iconfont / element-ui 两种类名) */
|
|
|
+ .hjx-dui,
|
|
|
+ .el-icon-success {
|
|
|
+ font-size: 19px;
|
|
|
|
|
|
- .hjx-dui{
|
|
|
- color:#15bc83;
|
|
|
- margin:0 5px;
|
|
|
+ &::before {
|
|
|
+ font-size: 19px;
|
|
|
+ }
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
+ /* 序号圆圈 */
|
|
|
+ .step_num {
|
|
|
+ display: block;
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 17px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: #B0B2B7;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .step_num{
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
-
|
|
|
- margin:0 5px;
|
|
|
- width: 16px;
|
|
|
- height: 16px;
|
|
|
- line-height: 1;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #B0B2B7;
|
|
|
- color: white;
|
|
|
- font-weight: 600;
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
+ /* 描述文字区域 */
|
|
|
+ .step_content {
|
|
|
+ padding: 0px 5px 6px 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left_line {
|
|
|
+ position: absolute;
|
|
|
+ top: 28px;
|
|
|
+ left: 15.55px;
|
|
|
+ z-index: 6;
|
|
|
+ height: 100%;
|
|
|
+ width: 0;
|
|
|
+ border-left: 1px dashed #C0C4CC;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:last-child{
|
|
|
+ flex:1 1;
|
|
|
+ margin-bottom: 0;
|
|
|
+
|
|
|
+ .left_line {
|
|
|
+ height: calc(100% - 28px);
|
|
|
}
|
|
|
- .step_bottom{
|
|
|
- .step_guide_line{
|
|
|
- position: absolute;
|
|
|
- top:26px;
|
|
|
- left:8px;
|
|
|
- width: 26px;
|
|
|
- height: calc(100% - 26px + 10px + 7px );
|
|
|
-
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- align-items: center;
|
|
|
-
|
|
|
- .dashed_line {
|
|
|
- flex: 1;
|
|
|
- width: 0;
|
|
|
- border-left: 1px dashed #B0B2B7;
|
|
|
- min-height: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- .step_content {
|
|
|
- padding:5px 10px 5px 30px;
|
|
|
- font-size: 12px;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 完成状态 (success) */
|
|
|
+ &.success {
|
|
|
+ border-color: #ffffff;
|
|
|
+
|
|
|
+ .num_box > i,
|
|
|
+ .num_box > span {
|
|
|
+ color: #15BC83;
|
|
|
}
|
|
|
+ }
|
|
|
|
|
|
- &.active_item {
|
|
|
- .step_box{
|
|
|
- border-radius: 8px 0 0 8px;
|
|
|
- background: rgba(46,100,250,0.1);
|
|
|
- box-shadow: inset 1px -1px 0px 0px #2E64FA;
|
|
|
- }
|
|
|
- .step_header_title{
|
|
|
- background-color: #2E64FA;
|
|
|
- color: white;
|
|
|
- }
|
|
|
+ /* 激活高亮状态 (active_item) - 完美还原原蓝色阴影与卡片样式 */
|
|
|
+ &.active_item {
|
|
|
+ .step_box{
|
|
|
+ border-color: #2E64FA;
|
|
|
+ background-color: rgba(46, 100, 250, 0.1);
|
|
|
+ box-shadow: inset 1px -1px 0px 1.5px #2E64FA;
|
|
|
+ }
|
|
|
|
|
|
- .step_guide_line{
|
|
|
- top:30px;
|
|
|
- height: calc(100% - 30px + 10px + 7px);
|
|
|
- }
|
|
|
- .step_num{
|
|
|
- background-color: white;
|
|
|
- color: #2E64FA;
|
|
|
- }
|
|
|
+ .step_header_title {
|
|
|
+ background-color: #2E64FA;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
- &:last-child{
|
|
|
- flex:1 1;
|
|
|
- .step_guide_line{
|
|
|
- height: calc(100% - 30px);
|
|
|
- }
|
|
|
+
|
|
|
+ .step_num {
|
|
|
+ background-color: #ffffff;
|
|
|
+ color: #2E64FA;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step_content {
|
|
|
+ background-color: rgba(46, 100, 250, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ------------------- 响应式适配 (100% 还原第一段媒体查询) ------------------- */
|
|
|
+
|
|
|
+ /* 小屏幕笔记本：常见分辨率 1366x768 及以下 */
|
|
|
+ @media (max-height: 768px) {
|
|
|
+ .nav_item {
|
|
|
+ margin-bottom: 0px;
|
|
|
+
|
|
|
+ .step_header_title {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 30px;
|
|
|
+ font-weight: 700;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step_content {
|
|
|
+ padding: 0px 5px 6px 20px;
|
|
|
+ font-size: 10px;
|
|
|
+ line-height: 15px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
|
|
|
+ /* 中等屏幕笔记本：1600x900, 1920x1080 */
|
|
|
+ @media (min-height: 769px) and (max-height: 1080px) {
|
|
|
+ .nav_item {
|
|
|
+ margin-bottom: 15px;
|
|
|
|
|
|
+ .step_header_title {
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step_content {
|
|
|
+ padding: 0px 5px 6px 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 大屏幕/高分辨率设备：2560x1440 及以上 */
|
|
|
+ @media screen and (min-height: 1081px) {
|
|
|
+ .nav_item {
|
|
|
+ margin-bottom: 25px;
|
|
|
+
|
|
|
+ .step_header_title {
|
|
|
+ font-size: 17px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .step_content {
|
|
|
+ padding: 10px 5px 10px 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
lm